@hi-ui/tabs 4.0.0-beta.8 → 4.0.1

package/lib/cjs/Tabs.js

@@ -2,7 +2,7 @@
  * @hi-ui/tabs
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -41,7 +41,7 @@ var _role = 'tabs';
 
 var _prefix = classname.getPrefixCls(_role);
 /**
- * TODO: What is Tabs
+ * Tabs 标签页
  */
 
 
@@ -75,7 +75,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
   var tabList = React.useMemo(function () {
     var list = [];
-    React__default['default'].Children.map(children, function (child) {
+    React__default["default"].Children.map(children, function (child) {
       if (child) {
         var _child$props = child.props,
             tabTitle = _child$props.tabTitle,
@@ -107,18 +107,18 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       setActiveTabId = _useUncontrolledState[1];
 
   var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
-  return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     role: role,
     className: cls,
     style: style
-  }, rest), /*#__PURE__*/React__default['default'].createElement(TabList.TabList, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(TabList.TabList, {
     prefixCls: prefixCls,
     data: tabList,
-    activeId: activeId,
+    activeId: activeTabId,
     onChange: setActiveTabId,
     onTabClick: onTabClick,
-    direction: placement,
+    placement: placement,
     editable: editable,
     onAdd: onAdd,
     onDelete: onDelete,
@@ -129,10 +129,10 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     type: type,
     onDragStart: onDragStart,
     extra: extra
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: _prefix + "__content"
-  }, React__default['default'].Children.map(children, function (child) {
-    return child ? /*#__PURE__*/React__default['default'].cloneElement(child, {
+  }, React__default["default"].Children.map(children, function (child) {
+    return child ? /*#__PURE__*/React__default["default"].cloneElement(child, {
       key: child.props.tabId,
       className: classname.cx(_prefix + "-tab-pane", child.props.className),
       active: activeTabId === child.props.tabId
@@ -145,4 +145,3 @@ if (env.__DEV__) {
 }
 
 exports.Tabs = Tabs;
-//# sourceMappingURL=Tabs.js.map

package/lib/cjs/hooks/index.js

@@ -0,0 +1,63 @@
+/** @LICENSE
+ * @hi-ui/tabs
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var React = require('react');
+
+var useLatest = require('@hi-ui/use-latest');
+
+var useUnmountEffect = require('@hi-ui/use-unmount-effect');
+/**
+ * 响应式监听元素的 size 变化
+ */
+
+
+var useResizeObserver = function useResizeObserver(_ref) {
+  var element = _ref.element,
+      onResize = _ref.onResize,
+      _ref$initialSize = _ref.initialSize,
+      initialSize = _ref$initialSize === void 0 ? 0 : _ref$initialSize,
+      getSize = _ref.getSize;
+  var getSizeLatestRef = useLatest.useLatestRef(getSize);
+  var onResizeLatest = useLatest.useLatestCallback(onResize);
+  var prevSizeRef = React.useRef(initialSize);
+  var unmountRef = useUnmountEffect.useUnmountEffect();
+  React.useEffect(function () {
+    if (element) {
+      var _resizeObserver = new ResizeObserver(function () {
+        if (unmountRef.current) return;
+        var getSize = getSizeLatestRef.current;
+
+        if (element) {
+          if (getSize) {
+            var nextSize = getSize(element);
+
+            if (prevSizeRef.current !== nextSize) {
+              prevSizeRef.current = nextSize;
+              onResizeLatest(element, nextSize);
+            }
+          } else {
+            onResizeLatest(element);
+          }
+        }
+      });
+
+      _resizeObserver.observe(element);
+    }
+
+    return function () {};
+  }, [element, getSizeLatestRef, onResizeLatest, unmountRef]);
+};
+
+exports.useResizeObserver = useResizeObserver;

package/lib/cjs/index.js

@@ -2,7 +2,7 @@
  * @hi-ui/tabs
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -28,4 +28,3 @@ exports.Tabs = Tabs$1.Tabs;
 exports.TabPane = TabPane.TabPane;
 exports.TabList = TabList.TabList;
 exports["default"] = Tabs;
-//# sourceMappingURL=index.js.map

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

@@ -2,7 +2,7 @@
  * @hi-ui/tabs
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,11 +12,10 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tabs__add-btn.hi-v4-icon-button {\n  font-size: var(--hi-v4-text-size-normal, 0.875rem); }\n.hi-v4-tabs__up-btn.hi-v4-icon-button, .hi-v4-tabs__down-btn.hi-v4-icon-button, .hi-v4-tabs__left-btn.hi-v4-icon-button, .hi-v4-tabs__right-btn.hi-v4-icon-button {\n  margin: var(--hi-v4-spacing-1, 2px); }\n.hi-v4-tabs__close-btn {\n  cursor: pointer;\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  margin-left: var(--hi-v4-spacing-2, 4px);\n  -webkit-transition: color 0.3s;\n  transition: color 0.3s; }\n.hi-v4-tabs__close-btn:hover {\n    color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--card .hi-v4-tabs__content {\n  background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list {\n  position: relative;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: hidden;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n    background-color: var(--hi-v4-color-gray-200, #ebedf0);\n    margin: 0;\n    padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n    border-radius: var(--hi-v4-border-radius-normal, 4px) var(--hi-v4-border-radius-normal, 4px) 0 0;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n      color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item {\n    margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;\n    padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n    border-radius: var(--hi-v4-border-radius-normal, 4px);\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n      color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc {\n    padding: 0 var(--hi-v4-spacing-10, 20px); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: var(--hi-v4-text-size-sm, 0.75rem);\n      line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item {\n      background: var(--hi-v4-color-gray-50, #f5f7fa);\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;\n      padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--inner {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1;\n            flex: 1 1;\n    position: relative;\n    overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {\n    padding-left: 16px;\n    padding-top: 0; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {\n      width: auto;\n      display: block;\n      position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {\n      line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n      padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n      margin: 0;\n      -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n      transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {\n        border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        border-left: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {\n        border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        border-right: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {\n      position: absolute;\n      left: 0;\n      bottom: auto;\n      width: 2px;\n      background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n      transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {\n      margin: 0;\n      padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      border-radius: var(--hi-v4-border-radius-normal, 4px) 0 0 var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item {\n      margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n      padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: var(--hi-v4-text-size-sm, 0.75rem);\n      line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n      padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__ink {\n  position: absolute;\n  bottom: 0;\n  right: auto;\n  top: auto;\n  height: 2px;\n  background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n  -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n  transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n  line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n  padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n  margin: 0;\n  cursor: pointer;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n    color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--active {\n    color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--prev {\n    border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--next {\n    border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--disabled {\n    color: var(--hi-v4-color-gray-500, #929aa6) !important;\n    cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n  width: 100%;\n  overflow: hidden;\n  padding-top: var(--hi-v4-spacing-8, 16px);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n";
+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(.hi-v4-tabs__item--active):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(.hi-v4-tabs__item--active):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--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(.hi-v4-tabs__item--active):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(.hi-v4-tabs__item--active):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 {color: var(--hi-v4-color-gray-500, #929aa6) !important;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; }";
 
-var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
+var __styleInject__ = require('inject-head-style')["default"];
 
 __styleInject__(css_248z);
 
 exports["default"] = css_248z;
-//# sourceMappingURL=index.scss.js.map

package/lib/cjs/utils/index.js

@@ -0,0 +1,32 @@
+/** @LICENSE
+ * @hi-ui/tabs
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var typeAssertion = require('@hi-ui/type-assertion');
+
+var getNextTabId = function getNextTabId(data, tabId) {
+  if (typeAssertion.isArrayNonEmpty(data)) {
+    var itemIndex = data.findIndex(function (item) {
+      return item.tabId === tabId;
+    });
+
+    if (itemIndex !== -1 && data[itemIndex + 1]) {
+      return data[itemIndex + 1].tabId;
+    }
+  }
+
+  return null;
+};
+
+exports.getNextTabId = getNextTabId;

package/lib/esm/TabInk.js

@@ -2,49 +2,68 @@
  * @hi-ui/tabs
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useCallback, useEffect } from 'react';
 import { cx } from '@hi-ui/classname';
+import { useResizeObserver } from './hooks/index.js';
 
 var TabInk = function TabInk(_ref) {
   var _cx;
 
   var disabled = _ref.disabled,
       prefixCls = _ref.prefixCls,
-      itemRef = _ref.itemRef,
-      tabListRef = _ref.tabListRef,
-      direction = _ref.direction,
-      translate = _ref.translate;
+      activeItemElement = _ref.activeItemElement,
+      activeTabId = _ref.activeTabId,
+      getTabOffset = _ref.getTabOffset,
+      showHorizontal = _ref.showHorizontal;
   var inkRef = useRef(null);
-  useEffect(function () {
-    if (inkRef.current && itemRef && tabListRef) {
-      var itemRect = itemRef.getBoundingClientRect();
-      var listRect = tabListRef.getBoundingClientRect();
-      var _style = {};
+  var setTabLnkPositionStyle = useCallback(function () {
+    if (!inkRef.current) return;
+    if (!activeItemElement) return;
+    var computedStyle = getComputedStyle(activeItemElement);
+    var itemRect = activeItemElement.getBoundingClientRect();
+    var offset = getTabOffset(activeTabId);
 
-      if (direction === 'vertical') {
-        _style = {
-          top: itemRect.top - listRect.top - translate + 2 + 8 + "px",
-          height: itemRect.height - 4 - 16 + "px",
-          left: '',
-          width: ''
-        };
-      } else {
-        _style = {
-          left: itemRect.left - listRect.left - translate + 20 + "px",
-          width: itemRect.width - 40 + "px",
-          top: '',
-          height: ''
-        };
-      }
+    var _style;
 
-      Object.assign(inkRef.current.style, _style);
+    if (!showHorizontal) {
+      var paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'));
+      var paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-bottom'));
+      _style = {
+        // 2px 保证尽量和文字顶部对齐，减少文本行高的影响
+        top: offset + paddingTop + 2 + 'px',
+        height: itemRect.height - paddingTop - paddingBottom - 4 + "px",
+        left: '',
+        width: ''
+      };
+    } else {
+      var paddingLeft = parseFloat(computedStyle.getPropertyValue('padding-left'));
+      var paddingRight = parseFloat(computedStyle.getPropertyValue('padding-right'));
+      _style = {
+        left: offset + paddingLeft + 'px',
+        width: itemRect.width - paddingRight - paddingLeft + "px",
+        top: '',
+        height: ''
+      };
     }
-  }, [itemRef, tabListRef, direction]);
+
+    Object.assign(inkRef.current.style, _style);
+  }, [activeItemElement, activeTabId, getTabOffset, showHorizontal]);
+  useEffect(function () {
+    setTabLnkPositionStyle();
+  }, [setTabLnkPositionStyle]);
+  useResizeObserver({
+    element: activeItemElement,
+    getSize: function getSize(element) {
+      var itemRect = element.getBoundingClientRect();
+      return showHorizontal ? itemRect.width : itemRect.height;
+    },
+    onResize: setTabLnkPositionStyle
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__ink", (_cx = {}, _cx[prefixCls + "__ink--disabled"] = disabled, _cx)),
     ref: inkRef
@@ -52,4 +71,3 @@ var TabInk = function TabInk(_ref) {
 };
 
 export { TabInk };
-//# sourceMappingURL=TabInk.js.map

package/lib/esm/TabItem.js

@@ -2,7 +2,7 @@
  * @hi-ui/tabs
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -178,4 +178,3 @@ if (__DEV__) {
 }
 
 export { TabItem };
-//# sourceMappingURL=TabItem.js.map