@hi-ui/tabs 4.0.8 → 4.1.1

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 (7) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/lib/cjs/TabPane.js +31 -3
  3. package/lib/cjs/styles/index.scss.js +2 -2
  4. package/lib/esm/TabPane.js +30 -3
  5. package/lib/esm/styles/index.scss.js +2 -2
  6. package/lib/types/TabPane.d.ts +4 -0
  7. package/package.json +4 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @hi-ui/tabs
2
2
 
3
+ ## 4.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2652](https://github.com/XiaoMi/hiui/pull/2652) [`d4f74c723`](https://github.com/XiaoMi/hiui/commit/d4f74c723d7fb619320dac5cdb4444480a3b7880) Thanks [@zyprepare](https://github.com/zyprepare)! - chore: 胶囊样式下标签之间增加竖线展示
8
+
9
+ - [#2653](https://github.com/XiaoMi/hiui/pull/2653) [`b477d91db`](https://github.com/XiaoMi/hiui/commit/b477d91db15bbc92c8712a9a771af5b332779315) Thanks [@zyprepare](https://github.com/zyprepare)! - chore: 更新使用到的 G40 颜色值
10
+
11
+ - Updated dependencies [[`b477d91db`](https://github.com/XiaoMi/hiui/commit/b477d91db15bbc92c8712a9a771af5b332779315)]:
12
+ - @hi-ui/icon-button@4.0.5
13
+
14
+ ## 4.1.0
15
+
16
+ ### Minor Changes
17
+
18
+ - [#2536](https://github.com/XiaoMi/hiui/pull/2536) [`e8443a2f8`](https://github.com/XiaoMi/hiui/commit/e8443a2f871ad19faa7bbf1df2ad3f52ab245019) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: 增加 unmountOnInactive API
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies [[`3aa4b9465`](https://github.com/XiaoMi/hiui/commit/3aa4b9465bf1d9e1710a427b8c5dbfec2e8af281)]:
23
+ - @hi-ui/icons@4.0.11
24
+
3
25
  ## 4.0.8
4
26
 
5
27
  ### Patch Changes
package/lib/cjs/TabPane.js CHANGED
@@ -21,6 +21,8 @@ var React = require('react');
21
21
 
22
22
  var reactUtils = require('@hi-ui/react-utils');
23
23
 
24
+ var classname = require('@hi-ui/classname');
25
+
24
26
  function _interopDefaultLegacy(e) {
25
27
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
26
28
  'default': e
@@ -29,6 +31,10 @@ function _interopDefaultLegacy(e) {
29
31
 
30
32
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
31
33
 
34
+ var _role = 'tabs-tab-pane';
35
+
36
+ var _prefix = classname.getPrefixCls(_role);
37
+
32
38
  var omitProps = ['tabId', 'tabTitle', 'disabled', 'tabDesc', 'closeable'];
33
39
 
34
40
  var TabPane = function TabPane(_a) {
@@ -36,13 +42,35 @@ var TabPane = function TabPane(_a) {
36
42
  className = _a.className,
37
43
  style = _a.style,
38
44
  active = _a.active,
39
- rest = tslib.__rest(_a, ["children", "className", "style", "active"]);
45
+ _a$unmountOnInactive = _a.unmountOnInactive,
46
+ unmountOnInactive = _a$unmountOnInactive === void 0 ? true : _a$unmountOnInactive,
47
+ rest = tslib.__rest(_a, ["children", "className", "style", "active", "unmountOnInactive"]);
40
48
 
41
49
  var htmlProps = reactUtils.filterProps(rest, omitProps);
50
+
51
+ var _React$useState = React__default["default"].useState(false),
52
+ isLoaded = _React$useState[0],
53
+ setIsLoaded = _React$useState[1];
54
+
55
+ var childrenContentMemo = React__default["default"].useMemo(function () {
56
+ if (!unmountOnInactive) {
57
+ if (active && !isLoaded) {
58
+ setIsLoaded(true);
59
+ }
60
+
61
+ if (isLoaded) {
62
+ return children;
63
+ }
64
+ } else if (active) {
65
+ return children;
66
+ }
67
+
68
+ return null;
69
+ }, [active, children, isLoaded, unmountOnInactive]);
42
70
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
43
71
  style: style,
44
- className: className
45
- }, htmlProps), active ? children : null);
72
+ className: classname.cx(className, !unmountOnInactive && !active && _prefix + "--hide")
73
+ }, htmlProps), childrenContentMemo);
46
74
  };
47
75
 
48
76
  exports.TabPane = TabPane;
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,9 +12,9 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = ".hi-v4-tabs__add-btn.hi-v4-icon-button {font-size: var(--hi-v4-text-size-md, 0.875rem); }.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 {margin: var(--hi-v4-spacing-1, 2px); }.hi-v4-tabs__close-btn {cursor: pointer;color: var(--hi-v4-color-gray-500, #929aa6);margin-left: var(--hi-v4-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s; }.hi-v4-tabs__close-btn:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs--type-card .hi-v4-tabs__content {background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-tabs__list {position: relative;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center; }.hi-v4-tabs__list--card .hi-v4-tabs__item {background-color: var(--hi-v4-color-gray-200, #ebedf0);margin: 0;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px); }.hi-v4-tabs__list--button .hi-v4-tabs__item {margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-tabs__list--desc {padding: 0 var(--hi-v4-spacing-10, 20px); }.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-tabs__list--desc .hi-v4-tabs__item {background: var(--hi-v4-color-gray-50, #f5f7fa);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;overflow: hidden; }.hi-v4-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v4-motion-duration-slow, 300ms);transition-duration: var(--hi-v4-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform; }.hi-v4-tabs__list--placement-vertical > .hi-v4-tabs__list--inner > .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; }.hi-v4-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex; }.hi-v4-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {padding-left: 16px;padding-top: 0; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-6, 12px); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item--active {border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-2, 4px); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {width: auto;display: block;position: relative; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-left: none; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-right: none; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item {margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }.hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }.hi-v4-tabs__item:focus {outline: 0; }.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__item--prev {border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__item--next {border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__item--disabled, .hi-v4-tabs__item--disabled .hi-v4-tabs__close-btn {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed; }.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }.hi-v4-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v4-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box; }";
15
+ var css_248z = ".hi-v4-tabs__add-btn.hi-v4-icon-button {font-size: var(--hi-v4-text-size-md, 0.875rem);}.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 {margin: var(--hi-v4-spacing-1, 2px);}.hi-v4-tabs__close-btn {cursor: pointer;color: var(--hi-v4-color-gray-500, #929aa6);margin-left: var(--hi-v4-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s;}.hi-v4-tabs__close-btn:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--type-card .hi-v4-tabs__content {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tabs__list {position: relative;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-tabs__list--card .hi-v4-tabs__item {background-color: var(--hi-v4-color-gray-200, #ebedf0);margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs__list--button .hi-v4-tabs__item {position: relative;margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled))::after {content: \"\";position: absolute;width: 1px;height: var(--hi-v4-height-4, 16px);background-color: var(--hi-v4-color-gray-300, #dfe2e8);left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):first-child::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--button .hi-v4-tabs__item--active + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs__item {background: var(--hi-v4-color-gray-50, #f5f7fa);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 var(--hi-v4-spacing-6, 12px) 0 0;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;overflow: hidden;}.hi-v4-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v4-motion-duration-slow, 300ms);transition-duration: var(--hi-v4-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform;}.hi-v4-tabs__list--placement-vertical > .hi-v4-tabs__list--inner > .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v4-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {padding-left: 16px;padding-top: 0;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-6, 12px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item {margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-2, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {width: auto;display: block;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-left: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-right: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item:focus {outline: 0;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--prev {border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--next {border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--disabled, .hi-v4-tabs__item--disabled .hi-v4-tabs__close-btn {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.hi-v4-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v4-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tabs-tab-pane--hide {display: none;}";
16
16
 
17
- var __styleInject__ = require('inject-head-style')["default"];
17
+ var __styleInject__ = require('style-inject')["default"];
18
18
 
19
19
  __styleInject__(css_248z);
20
20
 
package/lib/esm/TabPane.js CHANGED
@@ -10,6 +10,11 @@
10
10
  import { __rest } from 'tslib';
11
11
  import React from 'react';
12
12
  import { filterProps } from '@hi-ui/react-utils';
13
+ import { getPrefixCls, cx } from '@hi-ui/classname';
14
+ var _role = 'tabs-tab-pane';
15
+
16
+ var _prefix = getPrefixCls(_role);
17
+
13
18
  var omitProps = ['tabId', 'tabTitle', 'disabled', 'tabDesc', 'closeable'];
14
19
 
15
20
  var TabPane = function TabPane(_a) {
@@ -17,13 +22,35 @@ var TabPane = function TabPane(_a) {
17
22
  className = _a.className,
18
23
  style = _a.style,
19
24
  active = _a.active,
20
- rest = __rest(_a, ["children", "className", "style", "active"]);
25
+ _a$unmountOnInactive = _a.unmountOnInactive,
26
+ unmountOnInactive = _a$unmountOnInactive === void 0 ? true : _a$unmountOnInactive,
27
+ rest = __rest(_a, ["children", "className", "style", "active", "unmountOnInactive"]);
21
28
 
22
29
  var htmlProps = filterProps(rest, omitProps);
30
+
31
+ var _React$useState = React.useState(false),
32
+ isLoaded = _React$useState[0],
33
+ setIsLoaded = _React$useState[1];
34
+
35
+ var childrenContentMemo = React.useMemo(function () {
36
+ if (!unmountOnInactive) {
37
+ if (active && !isLoaded) {
38
+ setIsLoaded(true);
39
+ }
40
+
41
+ if (isLoaded) {
42
+ return children;
43
+ }
44
+ } else if (active) {
45
+ return children;
46
+ }
47
+
48
+ return null;
49
+ }, [active, children, isLoaded, unmountOnInactive]);
23
50
  return /*#__PURE__*/React.createElement("div", Object.assign({
24
51
  style: style,
25
- className: className
26
- }, htmlProps), active ? children : null);
52
+ className: cx(className, !unmountOnInactive && !active && _prefix + "--hide")
53
+ }, htmlProps), childrenContentMemo);
27
54
  };
28
55
 
29
56
  export { TabPane };
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,8 +7,8 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import __styleInject__ from 'inject-head-style';
11
- var css_248z = ".hi-v4-tabs__add-btn.hi-v4-icon-button {font-size: var(--hi-v4-text-size-md, 0.875rem); }.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 {margin: var(--hi-v4-spacing-1, 2px); }.hi-v4-tabs__close-btn {cursor: pointer;color: var(--hi-v4-color-gray-500, #929aa6);margin-left: var(--hi-v4-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s; }.hi-v4-tabs__close-btn:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs--type-card .hi-v4-tabs__content {background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-tabs__list {position: relative;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center; }.hi-v4-tabs__list--card .hi-v4-tabs__item {background-color: var(--hi-v4-color-gray-200, #ebedf0);margin: 0;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px); }.hi-v4-tabs__list--button .hi-v4-tabs__item {margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-tabs__list--desc {padding: 0 var(--hi-v4-spacing-10, 20px); }.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-tabs__list--desc .hi-v4-tabs__item {background: var(--hi-v4-color-gray-50, #f5f7fa);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;overflow: hidden; }.hi-v4-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v4-motion-duration-slow, 300ms);transition-duration: var(--hi-v4-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform; }.hi-v4-tabs__list--placement-vertical > .hi-v4-tabs__list--inner > .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; }.hi-v4-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex; }.hi-v4-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {padding-left: 16px;padding-top: 0; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-6, 12px); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item--active {border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-2, 4px); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {width: auto;display: block;position: relative; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-left: none; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-right: none; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item {margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }.hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }.hi-v4-tabs__item:focus {outline: 0; }.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__item--prev {border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__item--next {border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-tabs__item--disabled, .hi-v4-tabs__item--disabled .hi-v4-tabs__close-btn {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed; }.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }.hi-v4-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v4-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box; }";
10
+ import __styleInject__ from 'style-inject';
11
+ var css_248z = ".hi-v4-tabs__add-btn.hi-v4-icon-button {font-size: var(--hi-v4-text-size-md, 0.875rem);}.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 {margin: var(--hi-v4-spacing-1, 2px);}.hi-v4-tabs__close-btn {cursor: pointer;color: var(--hi-v4-color-gray-500, #929aa6);margin-left: var(--hi-v4-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s;}.hi-v4-tabs__close-btn:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--type-card .hi-v4-tabs__content {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tabs__list {position: relative;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-tabs__list--card .hi-v4-tabs__item {background-color: var(--hi-v4-color-gray-200, #ebedf0);margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs__list--button .hi-v4-tabs__item {position: relative;margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled))::after {content: \"\";position: absolute;width: 1px;height: var(--hi-v4-height-4, 16px);background-color: var(--hi-v4-color-gray-300, #dfe2e8);left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):first-child::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--button .hi-v4-tabs__item--active + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs__item {background: var(--hi-v4-color-gray-50, #f5f7fa);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 var(--hi-v4-spacing-6, 12px) 0 0;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;overflow: hidden;}.hi-v4-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v4-motion-duration-slow, 300ms);transition-duration: var(--hi-v4-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform;}.hi-v4-tabs__list--placement-vertical > .hi-v4-tabs__list--inner > .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v4-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {padding-left: 16px;padding-top: 0;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-6, 12px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item {margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-2, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {width: auto;display: block;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-left: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-right: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item:focus {outline: 0;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--prev {border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--next {border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--disabled, .hi-v4-tabs__item--disabled .hi-v4-tabs__close-btn {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.hi-v4-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v4-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tabs-tab-pane--hide {display: none;}";
12
12
 
13
13
  __styleInject__(css_248z);
14
14
 
package/lib/types/TabPane.d.ts CHANGED
@@ -26,4 +26,8 @@ export interface TabPaneProps extends HiBaseHTMLProps<'div'> {
26
26
  * 标签是否激活
27
27
  */
28
28
  active?: boolean;
29
+ /**
30
+ * 标签内容不活跃时是否卸载
31
+ */
32
+ unmountOnInactive?: boolean;
29
33
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tabs",
3
- "version": "4.0.8",
3
+ "version": "4.1.1",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -45,8 +45,8 @@
45
45
  "dependencies": {
46
46
  "@hi-ui/classname": "^4.0.1",
47
47
  "@hi-ui/env": "^4.0.1",
48
- "@hi-ui/icon-button": "^4.0.4",
49
- "@hi-ui/icons": "^4.0.6",
48
+ "@hi-ui/icon-button": "^4.0.5",
49
+ "@hi-ui/icons": "^4.0.11",
50
50
  "@hi-ui/react-utils": "^4.0.1",
51
51
  "@hi-ui/type-assertion": "^4.0.1",
52
52
  "@hi-ui/use-latest": "^4.0.1",
@@ -60,8 +60,7 @@
60
60
  },
61
61
  "devDependencies": {
62
62
  "@hi-ui/core": "^4.0.5",
63
- "@hi-ui/core-css": "^4.0.1",
64
- "@hi-ui/hi-build": "^4.0.1",
63
+ "@hi-ui/core-css": "^4.1.2",
65
64
  "react": "^17.0.1",
66
65
  "react-dom": "^17.0.1"
67
66
  }