@hi-ui/tabs 4.0.0-beta.19 → 4.0.0-beta.21

package/lib/cjs/TabInk.js

@@ -32,36 +32,43 @@ var TabInk = function TabInk(_ref) {
 
   var disabled = _ref.disabled,
       prefixCls = _ref.prefixCls,
-      itemRef = _ref.itemRef,
-      tabListRef = _ref.tabListRef,
+      activeItemElement = _ref.activeItemElement,
       direction = _ref.direction,
-      translate = _ref.translate;
+      activeTabId = _ref.activeTabId,
+      getTabOffset = _ref.getTabOffset;
   var inkRef = React.useRef(null);
   React.useEffect(function () {
-    if (inkRef.current && itemRef && tabListRef) {
-      var itemRect = itemRef.getBoundingClientRect();
-      var listRect = tabListRef.getBoundingClientRect();
-      var _style = {};
+    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 (direction === 'vertical') {
+      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, direction, activeTabId, getTabOffset]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classname.cx(prefixCls + "__ink", (_cx = {}, _cx[prefixCls + "__ink--disabled"] = disabled, _cx)),
     ref: inkRef

package/lib/cjs/TabList.js

@@ -37,6 +37,10 @@ var iconButton = require('@hi-ui/icon-button');
 
 var index = require('./hooks/index.js');
 
+var useLatest = require('@hi-ui/use-latest');
+
+var index$1 = require('./utils/index.js');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -52,8 +56,6 @@ var _prefix = classname.getPrefixCls(_role);
 var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _cx;
 
-  var _b;
-
   var data = _a.data,
       className = _a.className,
       style = _a.style,
@@ -84,25 +86,30 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
 
     return defaultActiveId;
-  }, activeId, onChange),
+  }, activeId, onChange, Object.is),
       activeTabId = _useUncontrolledState[0],
       setActiveTabId = _useUncontrolledState[1];
 
   var _useState = React.useState(null),
-      innerRef = _useState[0],
-      setInnerRef = _useState[1];
+      innerElement = _useState[0],
+      setInnerElement = _useState[1];
 
   var _useState2 = React.useState(null),
-      scrollRef = _useState2[0],
-      setScrollRef = _useState2[1];
+      scrollElement = _useState2[0],
+      setScrollElement = _useState2[1];
+
+  var showHorizontal = direction === 'horizontal';
+  var getClientSize = React.useCallback(function (element) {
+    return showHorizontal ? element.clientWidth : element.clientHeight;
+  }, [showHorizontal]);
 
   var _useState3 = React.useState(0),
-      translateX = _useState3[0],
-      setTranslateX = _useState3[1];
+      translatePos = _useState3[0],
+      setTranslatePos = _useState3[1];
 
   var _useState4 = React.useState(0),
-      translateY = _useState4[0],
-      setTranslateY = _useState4[1];
+      translateBoundPos = _useState4[0],
+      setTranslateBoundPos = _useState4[1];
 
   var itemsRef = React.useRef({});
 
@@ -110,103 +117,132 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       showScrollBtn = _useState5[0],
       setShowScrollBtn = _useState5[1];
 
-  var showHorizontal = direction === 'horizontal'; // 响应式滚动按钮展示
+  var resizeScroll = function resizeScroll(scrollSize, innerSize) {
+    var showScrollBtn = scrollSize > innerSize;
+    setShowScrollBtn(showScrollBtn);
+
+    if (showScrollBtn) {
+      setTranslateBoundPos(scrollSize - innerSize);
+    }
+  }; // 响应式滚动按钮展示
+
 
   index.useResizeObserver({
-    element: innerRef,
-    getSize: function getSize(element) {
-      return showHorizontal ? element.clientWidth : element.clientHeight;
-    },
-    onResize: function onResize(_, size) {
-      if (scrollRef) {
-        var _showScrollBtn = showHorizontal ? scrollRef.clientWidth > size : scrollRef.clientHeight > size;
-
-        setShowScrollBtn(_showScrollBtn);
+    element: innerElement,
+    getSize: getClientSize,
+    onResize: function onResize(_, innerSize) {
+      if (scrollElement) {
+        var scrollSize = getClientSize(scrollElement);
+        resizeScroll(scrollSize, innerSize);
       }
     }
   });
   index.useResizeObserver({
-    element: scrollRef,
-    getSize: function getSize(element) {
-      return showHorizontal ? element.clientWidth : element.clientHeight;
-    },
-    onResize: function onResize(_, size) {
-      if (innerRef) {
-        var _showScrollBtn2 = showHorizontal ? size > innerRef.clientWidth : size > innerRef.clientHeight;
-
-        setShowScrollBtn(_showScrollBtn2);
+    element: scrollElement,
+    getSize: getClientSize,
+    onResize: function onResize(_, scrollSize) {
+      if (innerElement) {
+        var innerSize = getClientSize(innerElement);
+        resizeScroll(scrollSize, innerSize);
       }
     }
   });
-  var onClickTab = React.useCallback(function (key, event) {
-    if (onTabClick) {
-      onTabClick(key, event);
+  var getTabPos = React.useCallback(function (tabId) {
+    var target = 0; // 获取目标元素的位置
+
+    var targetElement = itemsRef.current[tabId];
+
+    if (targetElement) {
+      var rect = targetElement.getBoundingClientRect();
+      target = showHorizontal ? rect.left : rect.top;
     }
 
-    if (key !== activeTabId && setActiveTabId) {
-      setActiveTabId(key);
+    return target;
+  }, [showHorizontal]);
+  var getTabOffset = React.useCallback(function (tabId) {
+    // 获取目标元素的位置
+    var targetPos = getTabPos(tabId); // 获取基准元素的位置（第一个）
+
+    var basePos = 0;
+
+    if (typeAssertion.isArrayNonEmpty(data)) {
+      var baseItem = data[0];
+      basePos = getTabPos(baseItem.tabId);
+    } // 返回目标元素相对基准元素的偏移量
+
+
+    return targetPos ? targetPos - basePos : 0;
+  }, [data, getTabPos]);
+
+  var syncScrollPosition = function syncScrollPosition(tabId) {
+    if (!innerElement) return;
+    if (!scrollElement) return;
+    var scrollSize = getClientSize(scrollElement);
+    var innerSize = getClientSize(innerElement);
+    var offsetValue = getTabOffset(tabId); // 左边或上半部内容展示不全
+
+    var currentOffset = -translatePos;
+
+    if (offsetValue < currentOffset) {
+      setTranslatePos(-offsetValue);
+    } else {
+      // 右边或下半部内容展示不全
+      var nextTabId = index$1.getNextTabId(data, tabId);
+      var nextOffsetValue = nextTabId !== null ? getTabOffset(nextTabId) : scrollSize;
+
+      var _currentOffset = -translatePos + innerSize;
+
+      if (nextOffsetValue > _currentOffset) {
+        setTranslatePos(translatePos - (nextOffsetValue - _currentOffset));
+      }
     }
-  }, [activeTabId, onTabClick, setActiveTabId]);
+  };
+
+  var onClickTab = useLatest.useLatestCallback(function (tabId, event) {
+    onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tabId, event);
+    setActiveTabId(tabId);
+    syncScrollPosition(tabId);
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     style: style,
     className: classname.cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
     ref: ref
-  }, rest), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
-    className: prefixCls + "__left-btn",
+  }, rest), showScrollBtn ? /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
+    className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
     effect: true,
-    icon: /*#__PURE__*/React__default["default"].createElement(icons.LeftOutlined, null),
+    disabled: translatePos === 0,
+    icon: showHorizontal ? /*#__PURE__*/React__default["default"].createElement(icons.LeftOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null),
     onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var canScroll = -translateX - innerRef.clientWidth;
-        var moveWidth = 0;
-
-        if (canScroll >= 0) {
-          moveWidth = innerRef.clientWidth;
-        } else {
-          moveWidth = -translateX;
-        }
-
-        setTranslateX(translateX + moveWidth);
-      }
+      if (!scrollElement) return;
+      if (!innerElement) return; // 向前面滚动
+
+      var clientSize = getClientSize(innerElement);
+      var canScroll = -translatePos - clientSize;
+      var moveWidth = canScroll >= 0 ? clientSize : -translatePos;
+      setTranslatePos(function (prev) {
+        return prev + moveWidth;
+      });
     }
-  }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
-    className: prefixCls + "__up-btn",
-    effect: true,
-    icon: /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null),
-    onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var canScroll = -translateY - innerRef.clientHeight;
-        var moveWidth = 0;
-
-        if (canScroll >= 0) {
-          moveWidth = innerRef.clientHeight;
-        } else {
-          moveWidth = -translateY;
-        }
-
-        setTranslateY(translateY + moveWidth);
-      }
-    }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classname.cx(prefixCls + "__list--inner"),
-    ref: setInnerRef
+    ref: setInnerElement
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classname.cx(prefixCls + "__list--scroll"),
-    ref: setScrollRef,
+    ref: setScrollElement,
     style: showScrollBtn ? {
-      transform: direction === 'horizontal' ? "translateX(" + translateX + "px)" : "translateY(" + translateY + "px)"
-    } : {}
-  }, data.map(function (d, index) {
+      transform: direction === 'horizontal' ? "translateX(" + translatePos + "px)" : "translateY(" + translatePos + "px)"
+    } : undefined
+  }, data.map(function (item, index) {
     return /*#__PURE__*/React__default["default"].createElement(TabItem.TabItem, Object.assign({
       key: index
-    }, d, {
+    }, item, {
       ref: function ref(node) {
-        itemsRef.current["" + d.tabId] = node;
+        itemsRef.current["" + item.tabId] = node;
       },
       type: type,
-      itemRef: itemsRef.current["" + d.tabId],
+      itemRef: itemsRef.current["" + item.tabId],
       index: index,
-      active: activeTabId === d.tabId,
+      active: activeTabId === item.tabId,
       prefixCls: prefixCls,
       draggable: draggable,
       onTabClick: onClickTab,
@@ -218,46 +254,30 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onDragEnd: onDragEnd,
       direction: direction
     }));
-  }), type === 'line' && /*#__PURE__*/React__default["default"].createElement(TabInk.TabInk, {
-    translate: direction === 'horizontal' ? translateX : translateY,
+  }), type === 'line' ? /*#__PURE__*/React__default["default"].createElement(TabInk.TabInk, {
     prefixCls: prefixCls,
     direction: direction,
-    tabListRef: innerRef,
-    itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTabId]
-  }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
+    activeItemElement: itemsRef.current[activeTabId],
+    activeTabId: activeTabId,
+    getTabOffset: getTabOffset
+  }) : null)), showScrollBtn ? /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
     effect: true,
-    className: prefixCls + "__right-btn",
-    icon: /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null),
+    className: showHorizontal ? prefixCls + "__right-btn" : prefixCls + "__down-btn",
+    disabled: translateBoundPos === -translatePos,
+    icon: showHorizontal ? /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
     onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var scrollWidth = scrollRef.clientWidth;
-        var innerWidth = innerRef.clientWidth;
-        var canScrollWidth = scrollWidth - innerWidth + translateX;
-        var moveWidth = canScrollWidth < innerWidth ? canScrollWidth : innerWidth;
-        setTranslateX(function (prev) {
-          return prev - moveWidth;
-        });
-      }
-    }
-  }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
-    effect: true,
-    className: prefixCls + "__down-btn",
-    icon: /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
-    onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
-        var moveWidth = 0;
-
-        if (canScroll >= innerRef.clientHeight) {
-          moveWidth = innerRef.clientHeight;
-        } else {
-          moveWidth = canScroll;
-        }
-
-        setTranslateY(translateY - moveWidth);
-      }
+      if (!scrollElement) return;
+      if (!innerElement) return; // 向后面滚动
+
+      var scrollSize = getClientSize(scrollElement);
+      var innerSize = getClientSize(innerElement);
+      var canScrollWidth = scrollSize - innerSize + translatePos;
+      var moveWidth = canScrollWidth < innerSize ? canScrollWidth : innerSize;
+      setTranslatePos(function (prev) {
+        return prev - moveWidth;
+      });
     }
-  }), editable ? /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
+  }) : null, editable ? /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
     icon: /*#__PURE__*/React__default["default"].createElement(icons.PlusOutlined, null),
     className: prefixCls + "__add-btn",
     onClick: onAdd

package/lib/cjs/TabPane.js

@@ -19,6 +19,8 @@ var tslib = require('tslib');
 
 var React = require('react');
 
+var reactUtils = require('@hi-ui/react-utils');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -27,6 +29,8 @@ function _interopDefaultLegacy(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var omitProps = ['tabId', 'tabTitle', 'disabled', 'tabDesc', 'closeable'];
+
 var TabPane = function TabPane(_a) {
   var children = _a.children,
       className = _a.className,
@@ -34,10 +38,11 @@ var TabPane = function TabPane(_a) {
       active = _a.active,
       rest = tslib.__rest(_a, ["children", "className", "style", "active"]);
 
+  var htmlProps = reactUtils.filterProps(rest, omitProps);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     style: style,
     className: className
-  }, rest), active ? children : null);
+  }, htmlProps), active ? children : null);
 };
 
 exports.TabPane = TabPane;

package/lib/cjs/hooks/index.js

@@ -17,6 +17,12 @@ 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,
@@ -26,9 +32,11 @@ var useResizeObserver = function useResizeObserver(_ref) {
   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) {
@@ -49,7 +57,7 @@ var useResizeObserver = function useResizeObserver(_ref) {
     }
 
     return function () {};
-  }, [element, getSizeLatestRef, onResizeLatest]);
+  }, [element, getSizeLatestRef, onResizeLatest, unmountRef]);
 };
 
 exports.useResizeObserver = useResizeObserver;

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

@@ -15,36 +15,43 @@ var TabInk = function TabInk(_ref) {
 
   var disabled = _ref.disabled,
       prefixCls = _ref.prefixCls,
-      itemRef = _ref.itemRef,
-      tabListRef = _ref.tabListRef,
+      activeItemElement = _ref.activeItemElement,
       direction = _ref.direction,
-      translate = _ref.translate;
+      activeTabId = _ref.activeTabId,
+      getTabOffset = _ref.getTabOffset;
   var inkRef = useRef(null);
   useEffect(function () {
-    if (inkRef.current && itemRef && tabListRef) {
-      var itemRect = itemRef.getBoundingClientRect();
-      var listRect = tabListRef.getBoundingClientRect();
-      var _style = {};
+    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 (direction === 'vertical') {
+      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, direction, activeTabId, getTabOffset]);
   return /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__ink", (_cx = {}, _cx[prefixCls + "__ink--disabled"] = disabled, _cx)),
     ref: inkRef

package/lib/esm/TabList.js

@@ -8,16 +8,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useState, useRef, useCallback } from 'react';
+import React, { forwardRef, useState, useCallback, useRef } from 'react';
 import { __DEV__ } from '@hi-ui/env';
 import { TabItem } from './TabItem.js';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { TabInk } from './TabInk.js';
 import { LeftOutlined, UpOutlined, RightOutlined, DownOutlined, PlusOutlined } from '@hi-ui/icons';
-import { isUndef } from '@hi-ui/type-assertion';
+import { isUndef, isArrayNonEmpty } from '@hi-ui/type-assertion';
 import { IconButton } from '@hi-ui/icon-button';
 import { useResizeObserver } from './hooks/index.js';
+import { useLatestCallback } from '@hi-ui/use-latest';
+import { getNextTabId } from './utils/index.js';
 var _role = 'tabs';
 
 var _prefix = getPrefixCls(_role);
@@ -25,8 +27,6 @@ var _prefix = getPrefixCls(_role);
 var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _cx;
 
-  var _b;
-
   var data = _a.data,
       className = _a.className,
       style = _a.style,
@@ -57,25 +57,30 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
 
     return defaultActiveId;
-  }, activeId, onChange),
+  }, activeId, onChange, Object.is),
       activeTabId = _useUncontrolledState[0],
       setActiveTabId = _useUncontrolledState[1];
 
   var _useState = useState(null),
-      innerRef = _useState[0],
-      setInnerRef = _useState[1];
+      innerElement = _useState[0],
+      setInnerElement = _useState[1];
 
   var _useState2 = useState(null),
-      scrollRef = _useState2[0],
-      setScrollRef = _useState2[1];
+      scrollElement = _useState2[0],
+      setScrollElement = _useState2[1];
+
+  var showHorizontal = direction === 'horizontal';
+  var getClientSize = useCallback(function (element) {
+    return showHorizontal ? element.clientWidth : element.clientHeight;
+  }, [showHorizontal]);
 
   var _useState3 = useState(0),
-      translateX = _useState3[0],
-      setTranslateX = _useState3[1];
+      translatePos = _useState3[0],
+      setTranslatePos = _useState3[1];
 
   var _useState4 = useState(0),
-      translateY = _useState4[0],
-      setTranslateY = _useState4[1];
+      translateBoundPos = _useState4[0],
+      setTranslateBoundPos = _useState4[1];
 
   var itemsRef = useRef({});
 
@@ -83,103 +88,132 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
       showScrollBtn = _useState5[0],
       setShowScrollBtn = _useState5[1];
 
-  var showHorizontal = direction === 'horizontal'; // 响应式滚动按钮展示
+  var resizeScroll = function resizeScroll(scrollSize, innerSize) {
+    var showScrollBtn = scrollSize > innerSize;
+    setShowScrollBtn(showScrollBtn);
+
+    if (showScrollBtn) {
+      setTranslateBoundPos(scrollSize - innerSize);
+    }
+  }; // 响应式滚动按钮展示
+
 
   useResizeObserver({
-    element: innerRef,
-    getSize: function getSize(element) {
-      return showHorizontal ? element.clientWidth : element.clientHeight;
-    },
-    onResize: function onResize(_, size) {
-      if (scrollRef) {
-        var _showScrollBtn = showHorizontal ? scrollRef.clientWidth > size : scrollRef.clientHeight > size;
-
-        setShowScrollBtn(_showScrollBtn);
+    element: innerElement,
+    getSize: getClientSize,
+    onResize: function onResize(_, innerSize) {
+      if (scrollElement) {
+        var scrollSize = getClientSize(scrollElement);
+        resizeScroll(scrollSize, innerSize);
       }
     }
   });
   useResizeObserver({
-    element: scrollRef,
-    getSize: function getSize(element) {
-      return showHorizontal ? element.clientWidth : element.clientHeight;
-    },
-    onResize: function onResize(_, size) {
-      if (innerRef) {
-        var _showScrollBtn2 = showHorizontal ? size > innerRef.clientWidth : size > innerRef.clientHeight;
-
-        setShowScrollBtn(_showScrollBtn2);
+    element: scrollElement,
+    getSize: getClientSize,
+    onResize: function onResize(_, scrollSize) {
+      if (innerElement) {
+        var innerSize = getClientSize(innerElement);
+        resizeScroll(scrollSize, innerSize);
       }
     }
   });
-  var onClickTab = useCallback(function (key, event) {
-    if (onTabClick) {
-      onTabClick(key, event);
+  var getTabPos = useCallback(function (tabId) {
+    var target = 0; // 获取目标元素的位置
+
+    var targetElement = itemsRef.current[tabId];
+
+    if (targetElement) {
+      var rect = targetElement.getBoundingClientRect();
+      target = showHorizontal ? rect.left : rect.top;
     }
 
-    if (key !== activeTabId && setActiveTabId) {
-      setActiveTabId(key);
+    return target;
+  }, [showHorizontal]);
+  var getTabOffset = useCallback(function (tabId) {
+    // 获取目标元素的位置
+    var targetPos = getTabPos(tabId); // 获取基准元素的位置（第一个）
+
+    var basePos = 0;
+
+    if (isArrayNonEmpty(data)) {
+      var baseItem = data[0];
+      basePos = getTabPos(baseItem.tabId);
+    } // 返回目标元素相对基准元素的偏移量
+
+
+    return targetPos ? targetPos - basePos : 0;
+  }, [data, getTabPos]);
+
+  var syncScrollPosition = function syncScrollPosition(tabId) {
+    if (!innerElement) return;
+    if (!scrollElement) return;
+    var scrollSize = getClientSize(scrollElement);
+    var innerSize = getClientSize(innerElement);
+    var offsetValue = getTabOffset(tabId); // 左边或上半部内容展示不全
+
+    var currentOffset = -translatePos;
+
+    if (offsetValue < currentOffset) {
+      setTranslatePos(-offsetValue);
+    } else {
+      // 右边或下半部内容展示不全
+      var nextTabId = getNextTabId(data, tabId);
+      var nextOffsetValue = nextTabId !== null ? getTabOffset(nextTabId) : scrollSize;
+
+      var _currentOffset = -translatePos + innerSize;
+
+      if (nextOffsetValue > _currentOffset) {
+        setTranslatePos(translatePos - (nextOffsetValue - _currentOffset));
+      }
     }
-  }, [activeTabId, onTabClick, setActiveTabId]);
+  };
+
+  var onClickTab = useLatestCallback(function (tabId, event) {
+    onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tabId, event);
+    setActiveTabId(tabId);
+    syncScrollPosition(tabId);
+  });
   return /*#__PURE__*/React.createElement("div", Object.assign({
     style: style,
     className: cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
     ref: ref
-  }, rest), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
-    className: prefixCls + "__left-btn",
-    effect: true,
-    icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
-    onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var canScroll = -translateX - innerRef.clientWidth;
-        var moveWidth = 0;
-
-        if (canScroll >= 0) {
-          moveWidth = innerRef.clientWidth;
-        } else {
-          moveWidth = -translateX;
-        }
-
-        setTranslateX(translateX + moveWidth);
-      }
-    }
-  }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement(IconButton, {
-    className: prefixCls + "__up-btn",
+  }, rest), showScrollBtn ? /*#__PURE__*/React.createElement(IconButton, {
+    className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
     effect: true,
-    icon: /*#__PURE__*/React.createElement(UpOutlined, null),
+    disabled: translatePos === 0,
+    icon: showHorizontal ? /*#__PURE__*/React.createElement(LeftOutlined, null) : /*#__PURE__*/React.createElement(UpOutlined, null),
     onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var canScroll = -translateY - innerRef.clientHeight;
-        var moveWidth = 0;
+      if (!scrollElement) return;
+      if (!innerElement) return; // 向前面滚动
 
-        if (canScroll >= 0) {
-          moveWidth = innerRef.clientHeight;
-        } else {
-          moveWidth = -translateY;
-        }
-
-        setTranslateY(translateY + moveWidth);
-      }
+      var clientSize = getClientSize(innerElement);
+      var canScroll = -translatePos - clientSize;
+      var moveWidth = canScroll >= 0 ? clientSize : -translatePos;
+      setTranslatePos(function (prev) {
+        return prev + moveWidth;
+      });
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }) : null, /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__list--inner"),
-    ref: setInnerRef
+    ref: setInnerElement
   }, /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__list--scroll"),
-    ref: setScrollRef,
+    ref: setScrollElement,
     style: showScrollBtn ? {
-      transform: direction === 'horizontal' ? "translateX(" + translateX + "px)" : "translateY(" + translateY + "px)"
-    } : {}
-  }, data.map(function (d, index) {
+      transform: direction === 'horizontal' ? "translateX(" + translatePos + "px)" : "translateY(" + translatePos + "px)"
+    } : undefined
+  }, data.map(function (item, index) {
     return /*#__PURE__*/React.createElement(TabItem, Object.assign({
       key: index
-    }, d, {
+    }, item, {
       ref: function ref(node) {
-        itemsRef.current["" + d.tabId] = node;
+        itemsRef.current["" + item.tabId] = node;
       },
       type: type,
-      itemRef: itemsRef.current["" + d.tabId],
+      itemRef: itemsRef.current["" + item.tabId],
       index: index,
-      active: activeTabId === d.tabId,
+      active: activeTabId === item.tabId,
       prefixCls: prefixCls,
       draggable: draggable,
       onTabClick: onClickTab,
@@ -191,46 +225,30 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
       onDragEnd: onDragEnd,
       direction: direction
     }));
-  }), type === 'line' && /*#__PURE__*/React.createElement(TabInk, {
-    translate: direction === 'horizontal' ? translateX : translateY,
+  }), type === 'line' ? /*#__PURE__*/React.createElement(TabInk, {
     prefixCls: prefixCls,
     direction: direction,
-    tabListRef: innerRef,
-    itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTabId]
-  }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
-    effect: true,
-    className: prefixCls + "__right-btn",
-    icon: /*#__PURE__*/React.createElement(RightOutlined, null),
-    onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var scrollWidth = scrollRef.clientWidth;
-        var innerWidth = innerRef.clientWidth;
-        var canScrollWidth = scrollWidth - innerWidth + translateX;
-        var moveWidth = canScrollWidth < innerWidth ? canScrollWidth : innerWidth;
-        setTranslateX(function (prev) {
-          return prev - moveWidth;
-        });
-      }
-    }
-  }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement(IconButton, {
+    activeItemElement: itemsRef.current[activeTabId],
+    activeTabId: activeTabId,
+    getTabOffset: getTabOffset
+  }) : null)), showScrollBtn ? /*#__PURE__*/React.createElement(IconButton, {
     effect: true,
-    className: prefixCls + "__down-btn",
-    icon: /*#__PURE__*/React.createElement(DownOutlined, null),
+    className: showHorizontal ? prefixCls + "__right-btn" : prefixCls + "__down-btn",
+    disabled: translateBoundPos === -translatePos,
+    icon: showHorizontal ? /*#__PURE__*/React.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null),
     onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
-        var moveWidth = 0;
+      if (!scrollElement) return;
+      if (!innerElement) return; // 向后面滚动
 
-        if (canScroll >= innerRef.clientHeight) {
-          moveWidth = innerRef.clientHeight;
-        } else {
-          moveWidth = canScroll;
-        }
-
-        setTranslateY(translateY - moveWidth);
-      }
+      var scrollSize = getClientSize(scrollElement);
+      var innerSize = getClientSize(innerElement);
+      var canScrollWidth = scrollSize - innerSize + translatePos;
+      var moveWidth = canScrollWidth < innerSize ? canScrollWidth : innerSize;
+      setTranslatePos(function (prev) {
+        return prev - moveWidth;
+      });
     }
-  }), editable ? /*#__PURE__*/React.createElement(IconButton, {
+  }) : null, editable ? /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
     className: prefixCls + "__add-btn",
     onClick: onAdd

package/lib/esm/TabPane.js

@@ -9,6 +9,8 @@
  */
 import { __rest } from 'tslib';
 import React from 'react';
+import { filterProps } from '@hi-ui/react-utils';
+var omitProps = ['tabId', 'tabTitle', 'disabled', 'tabDesc', 'closeable'];
 
 var TabPane = function TabPane(_a) {
   var children = _a.children,
@@ -17,10 +19,11 @@ var TabPane = function TabPane(_a) {
       active = _a.active,
       rest = __rest(_a, ["children", "className", "style", "active"]);
 
+  var htmlProps = filterProps(rest, omitProps);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     style: style,
     className: className
-  }, rest), active ? children : null);
+  }, htmlProps), active ? children : null);
 };
 
 export { TabPane };

package/lib/esm/hooks/index.js

@@ -9,6 +9,10 @@
  */
 import { useRef, useEffect } from 'react';
 import { useLatestRef, useLatestCallback } from '@hi-ui/use-latest';
+import { useUnmountEffect } from '@hi-ui/use-unmount-effect';
+/**
+ * 响应式监听元素的 size 变化
+ */
 
 var useResizeObserver = function useResizeObserver(_ref) {
   var element = _ref.element,
@@ -19,9 +23,11 @@ var useResizeObserver = function useResizeObserver(_ref) {
   var getSizeLatestRef = useLatestRef(getSize);
   var onResizeLatest = useLatestCallback(onResize);
   var prevSizeRef = useRef(initialSize);
+  var unmountRef = useUnmountEffect();
   useEffect(function () {
     if (element) {
       var _resizeObserver = new ResizeObserver(function () {
+        if (unmountRef.current) return;
         var getSize = getSizeLatestRef.current;
 
         if (element) {
@@ -42,7 +48,7 @@ var useResizeObserver = function useResizeObserver(_ref) {
     }
 
     return function () {};
-  }, [element, getSizeLatestRef, onResizeLatest]);
+  }, [element, getSizeLatestRef, onResizeLatest, unmountRef]);
 };
 
 export { useResizeObserver };

package/lib/esm/utils/index.js

@@ -0,0 +1,26 @@
+/** @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.
+ */
+import { isArrayNonEmpty } from '@hi-ui/type-assertion';
+
+var getNextTabId = function getNextTabId(data, tabId) {
+  if (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;
+};
+
+export { getNextTabId };

package/lib/types/TabInk.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 export declare const TabInk: React.FC<TabInkProps>;
 interface TabInkProps {
-    disabled?: boolean;
     prefixCls?: string;
-    itemRef: HTMLElement;
-    tabListRef: HTMLElement;
+    disabled?: boolean;
+    activeItemElement: HTMLElement | null;
     direction: 'vertical' | 'horizontal';
-    translate: number;
+    activeTabId: React.ReactText;
+    getTabOffset: (tabId: React.ReactText) => number;
 }
 export {};

package/lib/types/hooks/index.d.ts

@@ -4,5 +4,8 @@ interface UseResizeObserverProps {
     initialSize?: any;
     getSize?: (element: HTMLElement) => any;
 }
+/**
+ * 响应式监听元素的 size 变化
+ */
 export declare const useResizeObserver: ({ element, onResize, initialSize, getSize, }: UseResizeObserverProps) => void;
 export {};

package/lib/types/utils/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TabPaneProps } from '../TabPane';
+export declare const getNextTabId: (data: TabPaneProps[], tabId: React.ReactText) => React.ReactText | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tabs",
-  "version": "4.0.0-beta.19",
+  "version": "4.0.0-beta.21",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -47,11 +47,13 @@
     "@hi-ui/core": "^4.0.0-beta.9",
     "@hi-ui/core-css": "^4.0.0-beta.5",
     "@hi-ui/env": "^4.0.0-beta.1",
-    "@hi-ui/icon-button": "^4.0.0-beta.10",
+    "@hi-ui/icon-button": "^4.0.0-beta.11",
     "@hi-ui/icons": "^4.0.0-beta.11",
+    "@hi-ui/react-utils": "^4.0.0-beta.6",
     "@hi-ui/type-assertion": "^4.0.0-beta.5",
     "@hi-ui/use-latest": "^4.0.0-beta.5",
-    "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5"
+    "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5",
+    "@hi-ui/use-unmount-effect": "^4.0.0-beta.7"
   },
   "peerDependencies": {
     "react": ">=16.8.6",
@@ -62,5 +64,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "9956956831546dfe051b56cf8330912a772fa86f"
+  "gitHead": "a59dd6b403457d48fea690a9c6f50b701a8e667b"
 }