acud 1.2.17 → 1.2.18

package/lib/tabs/src/TabNavList/index.js

@@ -1,194 +1,146 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
-
 var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
-
 var _OutlinedRight = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedRight"));
-
 var _OutlinedLeft = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedLeft"));
-
 var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
-
 var _useRaf = _interopRequireWildcard(require("../hooks/useRaf"));
-
 var _TabNode = _interopRequireDefault(require("./TabNode"));
-
 var _useOffsets = _interopRequireDefault(require("../hooks/useOffsets"));
-
 var _useVisibleRange3 = _interopRequireDefault(require("../hooks/useVisibleRange"));
-
 var _TabContext = _interopRequireDefault(require("../TabContext"));
-
 var _useTouchMove = _interopRequireDefault(require("../hooks/useTouchMove"));
-
 var _useRefs3 = _interopRequireDefault(require("../hooks/useRefs"));
-
 var _AddButton = _interopRequireDefault(require("./AddButton"));
-
 var _useSyncState5 = _interopRequireDefault(require("../hooks/useSyncState"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var ExtraContent = function ExtraContent(_ref) {
   var position = _ref.position,
-      prefixCls = _ref.prefixCls,
-      extra = _ref.extra;
+    prefixCls = _ref.prefixCls,
+    extra = _ref.extra;
   if (!extra) return null;
   var content;
   var assertExtra = extra;
-
   if (position === 'right') {
     content = assertExtra.right || !assertExtra.left && assertExtra || null;
   }
-
   if (position === 'left') {
     content = assertExtra.left || null;
   }
-
   return content ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-extra-content")
   }, content) : null;
 };
-
 function TabNavList(props, ref) {
   var _classNames;
-
   var _React$useContext = React.useContext(_TabContext["default"]),
-      prefixCls = _React$useContext.prefixCls,
-      tabs = _React$useContext.tabs;
-
+    prefixCls = _React$useContext.prefixCls,
+    tabs = _React$useContext.tabs;
   var className = props.className,
-      style = props.style,
-      id = props.id,
-      animated = props.animated,
-      activeKey = props.activeKey,
-      rtl = props.rtl,
-      extra = props.extra,
-      editable = props.editable,
-      locale = props.locale,
-      tabPosition = props.tabPosition,
-      tabBarGutter = props.tabBarGutter,
-      mobile = props.mobile,
-      children = props.children,
-      onTabClick = props.onTabClick,
-      onTabScroll = props.onTabScroll,
-      _onEditTabNav = props.onEditTabNav;
+    style = props.style,
+    id = props.id,
+    animated = props.animated,
+    activeKey = props.activeKey,
+    rtl = props.rtl,
+    extra = props.extra,
+    editable = props.editable,
+    locale = props.locale,
+    tabPosition = props.tabPosition,
+    tabBarGutter = props.tabBarGutter,
+    mobile = props.mobile,
+    children = props.children,
+    onTabClick = props.onTabClick,
+    onTabScroll = props.onTabScroll,
+    _onEditTabNav = props.onEditTabNav;
   var tabsWrapperRef = (0, React.useRef)();
   var tabListRef = (0, React.useRef)();
   var operationsRef = (0, React.useRef)();
   var innerAddButtonRef = (0, React.useRef)();
-
   var _useRefs = (0, _useRefs3["default"])(),
-      _useRefs2 = (0, _slicedToArray2["default"])(_useRefs, 2),
-      getBtnRef = _useRefs2[0],
-      removeBtnRef = _useRefs2[1];
-
+    _useRefs2 = (0, _slicedToArray2["default"])(_useRefs, 2),
+    getBtnRef = _useRefs2[0],
+    removeBtnRef = _useRefs2[1];
   var tabPositionTopOrBottom = tabPosition === 'top' || tabPosition === 'bottom';
-
   var _useSyncState = (0, _useSyncState5["default"])(0, function (next, prev) {
-    if (tabPositionTopOrBottom && onTabScroll) {
-      onTabScroll({
-        direction: next > prev ? 'left' : 'right'
-      });
-    }
-  }),
-      _useSyncState2 = (0, _slicedToArray2["default"])(_useSyncState, 2),
-      transformLeft = _useSyncState2[0],
-      setTransformLeft = _useSyncState2[1];
-
+      if (tabPositionTopOrBottom && onTabScroll) {
+        onTabScroll({
+          direction: next > prev ? 'left' : 'right'
+        });
+      }
+    }),
+    _useSyncState2 = (0, _slicedToArray2["default"])(_useSyncState, 2),
+    transformLeft = _useSyncState2[0],
+    setTransformLeft = _useSyncState2[1];
   var _useSyncState3 = (0, _useSyncState5["default"])(0, function (next, prev) {
-    if (!tabPositionTopOrBottom && onTabScroll) {
-      onTabScroll({
-        direction: next > prev ? 'top' : 'bottom'
-      });
-    }
-  }),
-      _useSyncState4 = (0, _slicedToArray2["default"])(_useSyncState3, 2),
-      transformTop = _useSyncState4[0],
-      setTransformTop = _useSyncState4[1];
-
+      if (!tabPositionTopOrBottom && onTabScroll) {
+        onTabScroll({
+          direction: next > prev ? 'top' : 'bottom'
+        });
+      }
+    }),
+    _useSyncState4 = (0, _slicedToArray2["default"])(_useSyncState3, 2),
+    transformTop = _useSyncState4[0],
+    setTransformTop = _useSyncState4[1];
   var _useState = (0, React.useState)(0),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      wrapperScrollWidth = _useState2[0],
-      setWrapperScrollWidth = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    wrapperScrollWidth = _useState2[0],
+    setWrapperScrollWidth = _useState2[1];
   var _useState3 = (0, React.useState)(0),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      wrapperScrollHeight = _useState4[0],
-      setWrapperScrollHeight = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    wrapperScrollHeight = _useState4[0],
+    setWrapperScrollHeight = _useState4[1];
   var _useState5 = (0, React.useState)(0),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      wrapperContentWidth = _useState6[0],
-      setWrapperContentWidth = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    wrapperContentWidth = _useState6[0],
+    setWrapperContentWidth = _useState6[1];
   var _useState7 = (0, React.useState)(0),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      wrapperContentHeight = _useState8[0],
-      setWrapperContentHeight = _useState8[1];
-
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    wrapperContentHeight = _useState8[0],
+    setWrapperContentHeight = _useState8[1];
   var _useState9 = (0, React.useState)(null),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      wrapperWidth = _useState10[0],
-      setWrapperWidth = _useState10[1];
-
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    wrapperWidth = _useState10[0],
+    setWrapperWidth = _useState10[1];
   var _useState11 = (0, React.useState)(null),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      wrapperHeight = _useState12[0],
-      setWrapperHeight = _useState12[1];
-
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    wrapperHeight = _useState12[0],
+    setWrapperHeight = _useState12[1];
   var _useState13 = (0, React.useState)(0),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      addWidth = _useState14[0],
-      setAddWidth = _useState14[1];
-
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    addWidth = _useState14[0],
+    setAddWidth = _useState14[1];
   var _useState15 = (0, React.useState)(0),
-      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      addHeight = _useState16[0],
-      setAddHeight = _useState16[1];
-
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    addHeight = _useState16[0],
+    setAddHeight = _useState16[1];
   var _useState17 = (0, React.useState)(true),
-      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-      isScroll = _useState18[0],
-      setScroll = _useState18[1];
-
+    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+    isScroll = _useState18[0],
+    setScroll = _useState18[1];
   var _useRafState = (0, _useRaf.useRafState)(new Map()),
-      _useRafState2 = (0, _slicedToArray2["default"])(_useRafState, 2),
-      tabSizes = _useRafState2[0],
-      setTabSizes = _useRafState2[1];
-
-  var tabOffsets = (0, _useOffsets["default"])(tabs, tabSizes, wrapperScrollWidth); // ========================== Util =========================
-
+    _useRafState2 = (0, _slicedToArray2["default"])(_useRafState, 2),
+    tabSizes = _useRafState2[0],
+    setTabSizes = _useRafState2[1];
+  var tabOffsets = (0, _useOffsets["default"])(tabs, tabSizes, wrapperScrollWidth);
+  // ========================== Util =========================
   var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
   var transformMin = 0;
   var transformMax = 0;
-
   if (!tabPositionTopOrBottom) {
     transformMin = Math.min(0, wrapperHeight - wrapperScrollHeight);
     transformMax = 0;
@@ -199,35 +151,27 @@ function TabNavList(props, ref) {
     transformMin = Math.min(0, wrapperWidth - wrapperScrollWidth);
     transformMax = 0;
   }
-
   function alignInRange(value) {
     if (value < transformMin) {
       return transformMin;
     }
-
     if (value > transformMax) {
       return transformMax;
     }
-
     return value;
-  } // ========================= Mobile ========================
-
-
+  }
+  // ========================= Mobile ========================
   var touchMovingRef = (0, React.useRef)();
-
   var _useState19 = (0, React.useState)(),
-      _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
-      lockAnimation = _useState20[0],
-      setLockAnimation = _useState20[1];
-
+    _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
+    lockAnimation = _useState20[0],
+    setLockAnimation = _useState20[1];
   function doLockAnimation() {
     setLockAnimation(Date.now());
   }
-
   function clearTouchMoving() {
     window.clearTimeout(touchMovingRef.current);
   }
-
   (0, _useTouchMove["default"])(tabsWrapperRef, function (offsetX, offsetY) {
     function doMove(setState, offset) {
       setState(function (value) {
@@ -235,38 +179,32 @@ function TabNavList(props, ref) {
         return newValue;
       });
     }
-
     if (tabPositionTopOrBottom) {
       // Skip scroll if place is enough
       if (wrapperWidth >= wrapperScrollWidth) {
         return false;
       }
-
       doMove(setTransformLeft, offsetX);
     } else {
       if (wrapperHeight >= wrapperScrollHeight) {
         return false;
       }
-
       doMove(setTransformTop, offsetY);
     }
-
     clearTouchMoving();
     doLockAnimation();
     return true;
   });
   (0, React.useEffect)(function () {
     clearTouchMoving();
-
     if (lockAnimation) {
       touchMovingRef.current = window.setTimeout(function () {
         setLockAnimation(0);
       }, 100);
     }
-
     return clearTouchMoving;
-  }, [lockAnimation]); // ========================= Scroll ========================
-
+  }, [lockAnimation]);
+  // ========================= Scroll ========================
   function scrollToTab() {
     var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
     var tabOffset = tabOffsets.get(key) || {
@@ -276,61 +214,56 @@ function TabNavList(props, ref) {
       right: 0,
       top: 0
     };
-
     if (tabPositionTopOrBottom) {
       // ============ Align with top & bottom ============
-      var newTransform = transformLeft; // RTL
-
+      var newTransform = transformLeft;
+      // RTL
       if (rtl) {
         if (tabOffset.right < transformLeft) {
           newTransform = tabOffset.right;
         } else if (tabOffset.right + tabOffset.width > transformLeft + wrapperWidth) {
           newTransform = tabOffset.right + tabOffset.width - wrapperWidth;
         }
-      } // LTR
+      }
+      // LTR
       else if (tabOffset.left < -transformLeft) {
         newTransform = -tabOffset.left;
       } else if (tabOffset.left + tabOffset.width > -transformLeft + wrapperWidth) {
         newTransform = -(tabOffset.left + tabOffset.width - wrapperWidth);
       }
-
       setTransformTop(0);
       setTransformLeft(alignInRange(newTransform));
     } else {
       // ============ Align with left & right ============
       var _newTransform = transformTop;
-
       if (tabOffset.top < -transformTop) {
         _newTransform = -tabOffset.top;
       } else if (tabOffset.top + tabOffset.height > -transformTop + wrapperHeight) {
         _newTransform = -(tabOffset.top + tabOffset.height - wrapperHeight);
       }
-
       setTransformLeft(0);
       setTransformTop(alignInRange(_newTransform));
     }
-  } // ========================== Tab ==========================
+  }
+  // ========================== Tab ==========================
   // Render tab node & collect tab offset
-
-
   var _useVisibleRange = (0, _useVisibleRange3["default"])(tabOffsets, {
-    width: wrapperWidth,
-    height: wrapperHeight,
-    left: transformLeft,
-    top: transformTop
-  }, {
-    width: wrapperContentWidth,
-    height: wrapperContentHeight
-  }, {
-    width: addWidth,
-    height: addHeight
-  }, (0, _extends2["default"])((0, _extends2["default"])({}, props), {
-    tabs: tabs
-  })),
-      _useVisibleRange2 = (0, _slicedToArray2["default"])(_useVisibleRange, 2),
-      visibleStart = _useVisibleRange2[0],
-      visibleEnd = _useVisibleRange2[1];
-
+      width: wrapperWidth,
+      height: wrapperHeight,
+      left: transformLeft,
+      top: transformTop
+    }, {
+      width: wrapperContentWidth,
+      height: wrapperContentHeight
+    }, {
+      width: addWidth,
+      height: addHeight
+    }, (0, _extends2["default"])((0, _extends2["default"])({}, props), {
+      tabs: tabs
+    })),
+    _useVisibleRange2 = (0, _slicedToArray2["default"])(_useVisibleRange, 2),
+    visibleStart = _useVisibleRange2[0],
+    visibleEnd = _useVisibleRange2[1];
   var tabNodes = tabs.map(function (tab, index) {
     var key = tab.key;
     return /*#__PURE__*/React.createElement(_TabNode["default"], {
@@ -356,26 +289,23 @@ function TabNavList(props, ref) {
       },
       onFocus: function onFocus() {
         scrollToTab(key);
-        doLockAnimation(); // Focus element will make scrollLeft change which we should reset back
-
+        doLockAnimation();
+        // Focus element will make scrollLeft change which we should reset back
         if (!rtl) {
           tabsWrapperRef.current.scrollLeft = 0;
         }
-
         tabsWrapperRef.current.scrollTop = 0;
       },
       onEditTabNav: function onEditTabNav(tabContent) {
         var _tabs = (0, _cloneDeep["default"])(tabs);
-
         _tabs[index].tab = tabContent;
         _onEditTabNav && _onEditTabNav(_tabs);
       }
     });
   });
   var onListHolderResize = (0, _useRaf["default"])(function () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j; // Update wrapper records
-
-
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    // Update wrapper records
     var offsetWidth = ((_a = tabsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
     var offsetHeight = ((_b = tabsWrapperRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
     var newAddWidth = ((_c = innerAddButtonRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth) || 0;
@@ -392,14 +322,13 @@ function TabNavList(props, ref) {
     setWrapperScrollHeight(newWrapperScrollHeight);
     var isOperationHidden = (_j = operationsRef.current) === null || _j === void 0 ? void 0 : _j.className.includes(operationsHiddenClassName);
     setWrapperContentWidth(newWrapperScrollWidth - (isOperationHidden ? 0 : newOperationWidth));
-    setWrapperContentHeight(newWrapperScrollHeight - (isOperationHidden ? 0 : newOperationHeight)); // Update buttons records
-
+    setWrapperContentHeight(newWrapperScrollHeight - (isOperationHidden ? 0 : newOperationHeight));
+    // Update buttons records
     setTabSizes(function () {
       var newSizes = new Map();
       tabs.forEach(function (_ref2) {
         var key = _ref2.key;
         var btnNode = getBtnRef(key).current;
-
         if (btnNode) {
           newSizes.set(key, {
             width: btnNode.offsetWidth,
@@ -411,28 +340,24 @@ function TabNavList(props, ref) {
       });
       return newSizes;
     });
-  }); // ======================== Dropdown =======================
-
+  });
+  // ======================== Dropdown =======================
   var startHiddenTabs = tabs.slice(0, visibleStart);
   var endHiddenTabs = tabs.slice(visibleEnd + 1);
-  var hiddenTabs = [].concat((0, _toConsumableArray2["default"])(startHiddenTabs), (0, _toConsumableArray2["default"])(endHiddenTabs)); // =================== Link & Operations ===================
-
+  var hiddenTabs = [].concat((0, _toConsumableArray2["default"])(startHiddenTabs), (0, _toConsumableArray2["default"])(endHiddenTabs));
+  // =================== Link & Operations ===================
   var _useState21 = (0, React.useState)(),
-      _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
-      inkStyle = _useState22[0],
-      setInkStyle = _useState22[1];
-
-  var activeTabOffset = tabOffsets.get(activeKey); // Delay set ink style to avoid remove tab blink
-
+    _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
+    inkStyle = _useState22[0],
+    setInkStyle = _useState22[1];
+  var activeTabOffset = tabOffsets.get(activeKey);
+  // Delay set ink style to avoid remove tab blink
   var inkBarRafRef = (0, React.useRef)();
-
   function cleanInkBarRaf() {
     _raf["default"].cancel(inkBarRafRef.current);
   }
-
   (0, React.useEffect)(function () {
     var newInkStyle = {};
-
     if (activeTabOffset) {
       if (tabPositionTopOrBottom) {
         if (rtl) {
@@ -440,40 +365,37 @@ function TabNavList(props, ref) {
         } else {
           newInkStyle.left = activeTabOffset.left;
         }
-
         newInkStyle.width = activeTabOffset.width;
       } else {
         newInkStyle.top = activeTabOffset.top;
         newInkStyle.height = activeTabOffset.height;
       }
     }
-
     cleanInkBarRaf();
     inkBarRafRef.current = (0, _raf["default"])(function () {
       setInkStyle(newInkStyle);
     });
     return cleanInkBarRaf;
-  }, [activeTabOffset, tabPositionTopOrBottom, rtl]); // ========================= Effect ========================
-
+  }, [activeTabOffset, tabPositionTopOrBottom, rtl]);
+  // ========================= Effect ========================
   (0, React.useEffect)(function () {
     if (isScroll) {
       scrollToTab();
     }
-  }, [activeKey, activeTabOffset, tabOffsets, tabPositionTopOrBottom, isScroll]); // Should recalculate when rtl changed
-
+  }, [activeKey, activeTabOffset, tabOffsets, tabPositionTopOrBottom, isScroll]);
+  // Should recalculate when rtl changed
   (0, React.useEffect)(function () {
     onListHolderResize();
   }, [rtl, tabBarGutter, activeKey, tabs.map(function (tab) {
     return tab.key;
-  }).join('_')]); // ========================= Render ========================
-
+  }).join('_')]);
+  // ========================= Render ========================
   var hasDropdown = !!hiddenTabs.length;
   var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
   var pingLeft;
   var pingRight;
   var pingTop;
   var pingBottom;
-
   if (tabPositionTopOrBottom) {
     if (rtl) {
       pingRight = transformLeft > 0;
@@ -485,35 +407,29 @@ function TabNavList(props, ref) {
   } else {
     pingTop = transformTop < 0;
     pingBottom = -transformTop + wrapperHeight < wrapperScrollHeight;
-  } // operations
-
-
+  }
+  // operations
   var _useState23 = (0, React.useState)(null),
-      _useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
-      scrolledKey = _useState24[0],
-      setScrolledKey = _useState24[1];
-
+    _useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
+    scrolledKey = _useState24[0],
+    setScrolledKey = _useState24[1];
   var popupId = "".concat(id, "-more-popup");
   var moreStyle = (0, _defineProperty2["default"])({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);
   moreStyle.cursor = 'pointer';
-
   if (!hiddenTabs.length) {
     moreStyle.visibility = 'hidden';
     moreStyle.order = 1;
   }
-
   var onMoreClick = function onMoreClick(type) {
     var index = (0, _findIndex["default"])(tabs, function (tab) {
       return tab.key === scrolledKey;
     });
     var key;
-
     if (type === 'left') {
       key = tabs[index - 1 <= 0 ? 0 : index - 1].key;
     } else {
       key = tabs[index + 1 > tabs.length - 1 ? tabs.length - 1 : index + 1].key;
     }
-
     setScrolledKey(key);
     var tabOffset = tabOffsets.get(key) || {
       width: 0,
@@ -523,17 +439,14 @@ function TabNavList(props, ref) {
       top: 0
     };
     var newTransform = transformLeft;
-
     if (type === 'left') {
       newTransform = transformLeft + tabOffset.width + 16;
     } else {
       newTransform = transformLeft - tabOffset.width - 16;
     }
-
     setTransformLeft(alignInRange(newTransform));
     setScroll(false);
   };
-
   var moreLeftNode = mobile ? null : /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "".concat(prefixCls, "-nav-more left"),
@@ -555,7 +468,8 @@ function TabNavList(props, ref) {
     "aria-hidden": "true",
     "aria-haspopup": "listbox",
     "aria-controls": "".concat(popupId, "-right"),
-    id: "".concat(id, "-more") // aria-expanded={open}
+    id: "".concat(id, "-more")
+    // aria-expanded={open}
     ,
     onClick: function onClick() {
       return onMoreClick('right');
@@ -623,7 +537,5 @@ function TabNavList(props, ref) {
   }));
   /* eslint-enable */
 }
-
 var _default = /*#__PURE__*/React.forwardRef(TabNavList);
-
 exports["default"] = _default;

package/lib/tabs/src/TabPanelList/TabPane.d.ts

@@ -15,4 +15,4 @@ export interface TabPaneProps {
     active?: boolean;
     destroyInactiveTabPane?: boolean;
 }
-export default function TabPane({ prefixCls, forceRender, className, style, id, active, animated, destroyInactiveTabPane, tabKey, children, }: TabPaneProps): JSX.Element;
+export default function TabPane({ prefixCls, forceRender, className, style, id, active, animated, destroyInactiveTabPane, tabKey, children, }: TabPaneProps): React.JSX.Element;