rc-tabs - npm Package Compare versions

Comparing version 12.4.2 to 12.5.0

es/hooks/useAnimateConfig.js

@@ -10,2 +10,3 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
   var mergedAnimated;
+
   if (animated === false) {
@@ -25,7 +26,9 @@ mergedAnimated = {
     }, _typeof(animated) === 'object' ? animated : {});
-  }
-  // Enable tabPane animation if provide motion
+  } // Enable tabPane animation if provide motion
+
+
   if (mergedAnimated.tabPaneMotion && mergedAnimated.tabPane === undefined) {
     mergedAnimated.tabPane = true;
   }
+
   if (!mergedAnimated.tabPaneMotion && mergedAnimated.tabPane) {
@@ -35,5 +38,7 @@ if (process.env.NODE_ENV !== 'production') {
     }
+
     mergedAnimated.tabPane = false;
   }
+
   return mergedAnimated;
 }

es/hooks/useOffsets.js

@@ -12,19 +12,25 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
     var _tabs$;
+
     var map = new Map();
     var lastOffset = tabSizes.get((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key) || DEFAULT_SIZE;
     var rightOffset = lastOffset.left + lastOffset.width;
+
     for (var i = 0; i < tabs.length; i += 1) {
       var key = tabs[i].key;
-      var data = tabSizes.get(key);
-      // Reuse last one when not exist yet
+      var data = tabSizes.get(key); // Reuse last one when not exist yet
+
       if (!data) {
         var _tabs;
+
         data = tabSizes.get((_tabs = tabs[i - 1]) === null || _tabs === void 0 ? void 0 : _tabs.key) || DEFAULT_SIZE;
       }
-      var entity = map.get(key) || _objectSpread({}, data);
-      // Right
-      entity.right = rightOffset - entity.left - entity.width;
-      // Update entity
+
+      var entity = map.get(key) || _objectSpread({}, data); // Right
+
+
+      entity.right = rightOffset - entity.left - entity.width; // Update entity
+
       map.set(key, entity);
     }
+
     return map;
@@ -31,0 +37,0 @@ }, [tabs.map(function (tab) {

es/hooks/useRaf.d.ts

 export default function useRaf<Callback extends Function>(callback: Callback): (...args: any[]) => void;
-type Callback<T> = (ori: T) => T;
+declare type Callback<T> = (ori: T) => T;
 export declare function useRafState<T>(defaultState: T | (() => T)): [T, (updater: Callback<T>) => void];
 export {};

es/hooks/useRaf.js

@@ -7,2 +7,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
   var removedRef = useRef(false);
+
   function trigger() {
@@ -12,2 +13,3 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     }
+
     if (!removedRef.current) {
@@ -20,2 +22,3 @@ raf.cancel(rafRef.current);
   }
+
   useEffect(function () {
@@ -33,5 +36,7 @@ //be compatible with react 18 StrictMode in dev
   var batchRef = useRef([]);
+
   var _useState = useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    forceUpdate = _useState2[1];
+      _useState2 = _slicedToArray(_useState, 2),
+      forceUpdate = _useState2[1];
+
   var state = useRef(typeof defaultState === 'function' ? defaultState() : defaultState);
@@ -47,2 +52,3 @@ var flushUpdate = useRaf(function () {
   });
+
   function updater(callback) {
@@ -52,3 +58,4 @@ batchRef.current.push(callback);
   }
+
   return [state.current, updater];
 }

es/hooks/useSyncState.d.ts

@@ -1,3 +0,3 @@
-type Updater<T> = (prev: T) => T;
+declare type Updater<T> = (prev: T) => T;
 export default function useSyncState<T>(defaultState: T, onChange: (newValue: T, prevValue: T) => void): [T, (updater: T | Updater<T>) => void];
 export {};

es/hooks/useSyncState.js

@@ -5,14 +5,19 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
   var stateRef = React.useRef(defaultState);
+
   var _React$useState = React.useState({}),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    forceUpdate = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      forceUpdate = _React$useState2[1];
+
   function setState(updater) {
     var newValue = typeof updater === 'function' ? updater(stateRef.current) : updater;
+
     if (newValue !== stateRef.current) {
       onChange(newValue, stateRef.current);
     }
+
     stateRef.current = newValue;
     forceUpdate({});
   }
+
   return [stateRef.current, setState];
 }

es/hooks/useTouchMove.js

@@ -7,28 +7,32 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var REFRESH_INTERVAL = 20;
-var SPEED_OFF_MULTIPLE = Math.pow(0.995, REFRESH_INTERVAL);
-// ================================= Hook =================================
+var SPEED_OFF_MULTIPLE = Math.pow(0.995, REFRESH_INTERVAL); // ================================= Hook =================================
+
 export default function useTouchMove(ref, onOffset) {
   var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    touchPosition = _useState2[0],
-    setTouchPosition = _useState2[1];
+      _useState2 = _slicedToArray(_useState, 2),
+      touchPosition = _useState2[0],
+      setTouchPosition = _useState2[1];
+
   var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    lastTimestamp = _useState4[0],
-    setLastTimestamp = _useState4[1];
+      _useState4 = _slicedToArray(_useState3, 2),
+      lastTimestamp = _useState4[0],
+      setLastTimestamp = _useState4[1];
+
   var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    lastTimeDiff = _useState6[0],
-    setLastTimeDiff = _useState6[1];
+      _useState6 = _slicedToArray(_useState5, 2),
+      lastTimeDiff = _useState6[0],
+      setLastTimeDiff = _useState6[1];
+
   var _useState7 = useState(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    lastOffset = _useState8[0],
-    setLastOffset = _useState8[1];
-  var motionRef = useRef();
-  // ========================= Events =========================
+      _useState8 = _slicedToArray(_useState7, 2),
+      lastOffset = _useState8[0],
+      setLastOffset = _useState8[1];
+
+  var motionRef = useRef(); // ========================= Events =========================
   // >>> Touch events
+
   function onTouchStart(e) {
     var _e$touches$ = e.touches[0],
-      screenX = _e$touches$.screenX,
-      screenY = _e$touches$.screenY;
+        screenX = _e$touches$.screenX,
+        screenY = _e$touches$.screenY;
     setTouchPosition({
@@ -40,2 +44,3 @@ x: screenX,
   }
+
   function onTouchMove(e) {
@@ -45,4 +50,4 @@ if (!touchPosition) return;
     var _e$touches$2 = e.touches[0],
-      screenX = _e$touches$2.screenX,
-      screenY = _e$touches$2.screenY;
+        screenX = _e$touches$2.screenX,
+        screenY = _e$touches$2.screenY;
     setTouchPosition({
@@ -63,7 +68,8 @@ x: screenX,
   }
+
   function onTouchEnd() {
     if (!touchPosition) return;
     setTouchPosition(null);
-    setLastOffset(null);
-    // Swipe if needed
+    setLastOffset(null); // Swipe if needed
+
     if (lastOffset) {
@@ -73,4 +79,4 @@ var distanceX = lastOffset.x / lastTimeDiff;
       var absX = Math.abs(distanceX);
-      var absY = Math.abs(distanceY);
-      // Skip swipe if low distance
+      var absY = Math.abs(distanceY); // Skip swipe if low distance
+
       if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
@@ -84,2 +90,3 @@ var currentX = distanceX;
         }
+
         currentX *= SPEED_OFF_MULTIPLE;
@@ -90,12 +97,15 @@ currentY *= SPEED_OFF_MULTIPLE;
     }
-  }
-  // >>> Wheel event
+  } // >>> Wheel event
+
+
   var lastWheelDirectionRef = useRef();
+
   function onWheel(e) {
     var deltaX = e.deltaX,
-      deltaY = e.deltaY;
-    // Convert both to x & y since wheel only happened on PC
+        deltaY = e.deltaY; // Convert both to x & y since wheel only happened on PC
+
     var mixed = 0;
     var absX = Math.abs(deltaX);
     var absY = Math.abs(deltaY);
+
     if (absX === absY) {
@@ -110,7 +120,9 @@ mixed = lastWheelDirectionRef.current === 'x' ? deltaX : deltaY;
     }
+
     if (onOffset(-mixed, -mixed)) {
       e.preventDefault();
     }
-  }
-  // ========================= Effect =========================
+  } // ========================= Effect =========================
+
+
   var touchEventsRef = useRef(null);
@@ -127,11 +139,15 @@ touchEventsRef.current = {
     }
+
     function onProxyTouchMove(e) {
       touchEventsRef.current.onTouchMove(e);
     }
+
     function onProxyTouchEnd(e) {
       touchEventsRef.current.onTouchEnd(e);
     }
+
     function onProxyWheel(e) {
       touchEventsRef.current.onWheel(e);
     }
+
     document.addEventListener('touchmove', onProxyTouchMove, {
@@ -142,4 +158,4 @@ passive: false
       passive: false
-    });
-    // No need to clean up since element removed
+    }); // No need to clean up since element removed
+
     ref.current.addEventListener('touchstart', onProxyTouchStart, {
@@ -146,0 +162,0 @@ passive: false

es/hooks/useVisibleRange.d.ts

 import type { Tab, TabOffsetMap } from '../interface';
 import type { TabNavListProps } from '../TabNavList';
-export type ContainerSizeInfo = [width: number, height: number, left: number, top: number];
+export declare type ContainerSizeInfo = [width: number, height: number, left: number, top: number];
 export default function useVisibleRange(tabOffsets: TabOffsetMap, visibleTabContentValue: number, transform: number, tabContentSizeValue: number, addNodeSizeValue: number, operationNodeSizeValue: number, { tabs, tabPosition, rtl }: {
     tabs: Tab[];
 } & TabNavListProps): [visibleStart: number, visibleEnd: number];

es/hooks/useVisibleRange.js

@@ -11,7 +11,8 @@ import { useMemo } from 'react';
   var tabs = _ref.tabs,
-    tabPosition = _ref.tabPosition,
-    rtl = _ref.rtl;
+      tabPosition = _ref.tabPosition,
+      rtl = _ref.rtl;
   var charUnit;
   var position;
   var transformSize;
+
   if (['top', 'bottom'].includes(tabPosition)) {
@@ -26,2 +27,3 @@ charUnit = 'width';
   }
+
   return useMemo(function () {
@@ -31,6 +33,9 @@ if (!tabs.length) {
     }
+
     var len = tabs.length;
     var endIndex = len;
+
     for (var i = 0; i < len; i += 1) {
       var offset = tabOffsets.get(tabs[i].key) || DEFAULT_SIZE;
+
       if (offset[position] + offset[charUnit] > transformSize + visibleTabContentValue) {
@@ -41,5 +46,8 @@ endIndex = i - 1;
     }
+
     var startIndex = 0;
+
     for (var _i = len - 1; _i >= 0; _i -= 1) {
       var _offset = tabOffsets.get(tabs[_i].key) || DEFAULT_SIZE;
+
       if (_offset[position] < transformSize) {
@@ -50,2 +58,3 @@ startIndex = _i + 1;
     }
+
     return [startIndex, endIndex];
@@ -52,0 +61,0 @@ }, [tabOffsets, visibleTabContentValue, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, transformSize, tabPosition, tabs.map(function (tab) {

es/index.js

@@ -1,2 +0,2 @@
-import Tabs from './Tabs';
+import Tabs from "./Tabs";
 export default Tabs;

es/interface.d.ts

@@ -5,4 +5,4 @@ import type React from 'react';
 import type { TabPaneProps } from './TabPanelList/TabPane';
-export type SizeInfo = [width: number, height: number];
-export type TabSizeMap = Map<React.Key, {
+export declare type SizeInfo = [width: number, height: number];
+export declare type TabSizeMap = Map<React.Key, {
     width: number;
@@ -20,4 +20,4 @@ height: number;
 }
-export type TabOffsetMap = Map<React.Key, TabOffset>;
-export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
+export declare type TabOffsetMap = Map<React.Key, TabOffset>;
+export declare type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 export interface Tab extends Omit<TabPaneProps, 'tab'> {
@@ -27,3 +27,3 @@ key: string;
 }
-type RenderTabBarProps = {
+declare type RenderTabBarProps = {
     id: string;
@@ -47,3 +47,3 @@ activeKey: string;
 };
-export type RenderTabBar = (props: RenderTabBarProps, DefaultTabBar: React.ComponentType<TabNavListProps>) => React.ReactElement;
+export declare type RenderTabBar = (props: RenderTabBarProps, DefaultTabBar: React.ComponentType<TabNavListProps>) => React.ReactElement;
 export interface TabsLocale {
@@ -68,8 +68,8 @@ dropdownAriaLabel?: string;
 }
-export type OnTabScroll = (info: {
+export declare type OnTabScroll = (info: {
     direction: 'left' | 'right' | 'top' | 'bottom';
 }) => void;
-export type TabBarExtraPosition = 'left' | 'right';
-export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, React.ReactNode>>;
-export type TabBarExtraContent = React.ReactNode | TabBarExtraMap;
+export declare type TabBarExtraPosition = 'left' | 'right';
+export declare type TabBarExtraMap = Partial<Record<TabBarExtraPosition, React.ReactNode>>;
+export declare type TabBarExtraContent = React.ReactNode | TabBarExtraMap;
 export {};

es/TabNavList/AddButton.js

 import * as React from 'react';
+
 function AddButton(_ref, ref) {
   var prefixCls = _ref.prefixCls,
-    editable = _ref.editable,
-    locale = _ref.locale,
-    style = _ref.style;
+      editable = _ref.editable,
+      locale = _ref.locale,
+      style = _ref.style;
+
   if (!editable || editable.showAdd === false) {
     return null;
   }
+
   return /*#__PURE__*/React.createElement("button", {
@@ -23,2 +26,3 @@ ref: ref,
 }
+
 export default /*#__PURE__*/React.forwardRef(AddButton);

es/TabNavList/ExtraContent.js

@@ -5,8 +5,9 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
   var position = _ref.position,
-    prefixCls = _ref.prefixCls,
-    extra = _ref.extra;
+      prefixCls = _ref.prefixCls,
+      extra = _ref.extra;
   if (!extra) return null;
-  var content;
-  // Parse extra
+  var content; // Parse extra
+
   var assertExtra = {};
+
   if (_typeof(extra) === 'object' && ! /*#__PURE__*/React.isValidElement(extra)) {
@@ -17,8 +18,11 @@ assertExtra = extra;
   }
+
   if (position === 'right') {
     content = assertExtra.right;
   }
+
   if (position === 'left') {
     content = assertExtra.left;
   }
+
   return content ? /*#__PURE__*/React.createElement("div", {
@@ -29,5 +33,7 @@ className: "".concat(prefixCls, "-extra-content"),
 });
+
 if (process.env.NODE_ENV !== 'production') {
   ExtraContent.displayName = 'ExtraContent';
 }
+
 export default ExtraContent;

es/TabNavList/index.d.ts

 import * as React from 'react';
-import type { TabPosition, RenderTabBar, TabsLocale, EditableConfig, AnimatedConfig, OnTabScroll, TabBarExtraContent } from '../interface';
+import type { AnimatedConfig, EditableConfig, OnTabScroll, RenderTabBar, TabBarExtraContent, TabPosition, TabsLocale } from '../interface';
 export interface TabNavListProps {
@@ -4,0 +4,0 @@ id: string;

es/TabNavList/index.js

@@ -6,26 +6,27 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import * as React from 'react';
-import { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
 import raf from "rc-util/es/raf";
 import { useComposeRef } from "rc-util/es/ref";
-import ResizeObserver from 'rc-resize-observer';
-import useRaf, { useRafState } from '../hooks/useRaf';
-import TabNode from './TabNode';
-import useOffsets from '../hooks/useOffsets';
-import useVisibleRange from '../hooks/useVisibleRange';
-import OperationNode from './OperationNode';
-import TabContext from '../TabContext';
-import useTouchMove from '../hooks/useTouchMove';
-import useRefs from '../hooks/useRefs';
-import AddButton from './AddButton';
-import useSyncState from '../hooks/useSyncState';
-import { stringify } from '../util';
-import ExtraContent from './ExtraContent';
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import useOffsets from "../hooks/useOffsets";
+import useRaf, { useRafState } from "../hooks/useRaf";
+import useSyncState from "../hooks/useSyncState";
+import useTouchMove from "../hooks/useTouchMove";
+import useVisibleRange from "../hooks/useVisibleRange";
+import TabContext from "../TabContext";
+import { stringify } from "../util";
+import AddButton from "./AddButton";
+import ExtraContent from "./ExtraContent";
+import OperationNode from "./OperationNode";
+import TabNode from "./TabNode";
+
 var getSize = function getSize(refObj) {
   var _ref = refObj.current || {},
-    _ref$offsetWidth = _ref.offsetWidth,
-    offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
-    _ref$offsetHeight = _ref.offsetHeight,
-    offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
+      _ref$offsetWidth = _ref.offsetWidth,
+      offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
+      _ref$offsetHeight = _ref.offsetHeight,
+      offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
+
   return [offsetWidth, offsetHeight];
@@ -36,24 +37,29 @@ };
  */
+
+
 var getUnitValue = function getUnitValue(size, tabPositionTopOrBottom) {
   return size[tabPositionTopOrBottom ? 0 : 1];
 };
+
 function TabNavList(props, ref) {
   var _classNames;
+
   var _React$useContext = React.useContext(TabContext),
-    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,
-    children = props.children,
-    onTabClick = props.onTabClick,
-    onTabScroll = props.onTabScroll;
+      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,
+      children = props.children,
+      onTabClick = props.onTabClick,
+      onTabScroll = props.onTabScroll;
   var containerRef = useRef();
@@ -65,50 +71,55 @@ var extraLeftRef = useRef();
   var operationsRef = useRef();
-  var innerAddButtonRef = useRef();
-  var _useRefs = useRefs(),
-    _useRefs2 = _slicedToArray(_useRefs, 2),
-    getBtnRef = _useRefs2[0],
-    removeBtnRef = _useRefs2[1];
+  var innerAddButtonRef = useRef(); // const [getBtnRef, removeBtnRef] = useRefs<HTMLDivElement>();
+
   var tabPositionTopOrBottom = tabPosition === 'top' || tabPosition === 'bottom';
+
   var _useSyncState = useSyncState(0, function (next, prev) {
-      if (tabPositionTopOrBottom && onTabScroll) {
-        onTabScroll({
-          direction: next > prev ? 'left' : 'right'
-        });
-      }
-    }),
-    _useSyncState2 = _slicedToArray(_useSyncState, 2),
-    transformLeft = _useSyncState2[0],
-    setTransformLeft = _useSyncState2[1];
+    if (tabPositionTopOrBottom && onTabScroll) {
+      onTabScroll({
+        direction: next > prev ? 'left' : 'right'
+      });
+    }
+  }),
+      _useSyncState2 = _slicedToArray(_useSyncState, 2),
+      transformLeft = _useSyncState2[0],
+      setTransformLeft = _useSyncState2[1];
+
   var _useSyncState3 = useSyncState(0, function (next, prev) {
-      if (!tabPositionTopOrBottom && onTabScroll) {
-        onTabScroll({
-          direction: next > prev ? 'top' : 'bottom'
-        });
-      }
-    }),
-    _useSyncState4 = _slicedToArray(_useSyncState3, 2),
-    transformTop = _useSyncState4[0],
-    setTransformTop = _useSyncState4[1];
+    if (!tabPositionTopOrBottom && onTabScroll) {
+      onTabScroll({
+        direction: next > prev ? 'top' : 'bottom'
+      });
+    }
+  }),
+      _useSyncState4 = _slicedToArray(_useSyncState3, 2),
+      transformTop = _useSyncState4[0],
+      setTransformTop = _useSyncState4[1];
+
   var _useState = useState([0, 0]),
-    _useState2 = _slicedToArray(_useState, 2),
-    containerExcludeExtraSize = _useState2[0],
-    setContainerExcludeExtraSize = _useState2[1];
+      _useState2 = _slicedToArray(_useState, 2),
+      containerExcludeExtraSize = _useState2[0],
+      setContainerExcludeExtraSize = _useState2[1];
+
   var _useState3 = useState([0, 0]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tabContentSize = _useState4[0],
-    setTabContentSize = _useState4[1];
+      _useState4 = _slicedToArray(_useState3, 2),
+      tabContentSize = _useState4[0],
+      setTabContentSize = _useState4[1];
+
   var _useState5 = useState([0, 0]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    addSize = _useState6[0],
-    setAddSize = _useState6[1];
+      _useState6 = _slicedToArray(_useState5, 2),
+      addSize = _useState6[0],
+      setAddSize = _useState6[1];
+
   var _useState7 = useState([0, 0]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    operationSize = _useState8[0],
-    setOperationSize = _useState8[1];
+      _useState8 = _slicedToArray(_useState7, 2),
+      operationSize = _useState8[0],
+      setOperationSize = _useState8[1];
+
   var _useRafState = useRafState(new Map()),
-    _useRafState2 = _slicedToArray(_useRafState, 2),
-    tabSizes = _useRafState2[0],
-    setTabSizes = _useRafState2[1];
-  var tabOffsets = useOffsets(tabs, tabSizes, tabContentSize[0]);
-  // ========================== Unit =========================
+      _useRafState2 = _slicedToArray(_useRafState, 2),
+      tabSizes = _useRafState2[0],
+      setTabSizes = _useRafState2[1];
+
+  var tabOffsets = useOffsets(tabs, tabSizes, tabContentSize[0]); // ========================== Unit =========================
+
   var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
@@ -119,7 +130,8 @@ var tabContentSizeValue = getUnitValue(tabContentSize, tabPositionTopOrBottom);
   var needScroll = containerExcludeExtraSizeValue < tabContentSizeValue + addSizeValue;
-  var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue;
-  // ========================== Util =========================
+  var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue; // ========================== Util =========================
+
   var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
   var transformMin = 0;
   var transformMax = 0;
+
   if (!tabPositionTopOrBottom) {
@@ -135,2 +147,3 @@ transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
   }
+
   function alignInRange(value) {
@@ -140,19 +153,26 @@ if (value < transformMin) {
     }
+
     if (value > transformMax) {
       return transformMax;
     }
+
     return value;
-  }
-  // ========================= Mobile ========================
+  } // ========================= Mobile ========================
+
+
   var touchMovingRef = useRef();
+
   var _useState9 = useState(),
-    _useState10 = _slicedToArray(_useState9, 2),
-    lockAnimation = _useState10[0],
-    setLockAnimation = _useState10[1];
+      _useState10 = _slicedToArray(_useState9, 2),
+      lockAnimation = _useState10[0],
+      setLockAnimation = _useState10[1];
+
   function doLockAnimation() {
     setLockAnimation(Date.now());
   }
+
   function clearTouchMoving() {
     window.clearTimeout(touchMovingRef.current);
   }
+
   useTouchMove(tabsWrapperRef, function (offsetX, offsetY) {
@@ -164,7 +184,9 @@ function doMove(setState, offset) {
       });
-    }
-    // Skip scroll if place is enough
+    } // Skip scroll if place is enough
+
+
     if (containerExcludeExtraSizeValue >= tabContentSizeValue) {
       return false;
     }
+
     if (tabPositionTopOrBottom) {
@@ -175,2 +197,3 @@ doMove(setTransformLeft, offsetX);
     }
+
     clearTouchMoving();
@@ -182,2 +205,3 @@ doLockAnimation();
     clearTouchMoving();
+
     if (lockAnimation) {
@@ -188,23 +212,20 @@ touchMovingRef.current = window.setTimeout(function () {
     }
+
     return clearTouchMoving;
-  }, [lockAnimation]);
-  // ===================== Visible Range =====================
+  }, [lockAnimation]); // ===================== Visible Range =====================
   // Render tab node & collect tab offset
-  var _useVisibleRange = useVisibleRange(tabOffsets,
-    // Container
-    visibleTabContentValue,
-    // Transform
-    tabPositionTopOrBottom ? transformLeft : transformTop,
-    // Tabs
-    tabContentSizeValue,
-    // Add
-    addSizeValue,
-    // Operation
-    operationSizeValue, _objectSpread(_objectSpread({}, props), {}, {
-      tabs: tabs
-    })),
-    _useVisibleRange2 = _slicedToArray(_useVisibleRange, 2),
-    visibleStart = _useVisibleRange2[0],
-    visibleEnd = _useVisibleRange2[1];
-  // ========================= Scroll ========================
+
+  var _useVisibleRange = useVisibleRange(tabOffsets, // Container
+  visibleTabContentValue, // Transform
+  tabPositionTopOrBottom ? transformLeft : transformTop, // Tabs
+  tabContentSizeValue, // Add
+  addSizeValue, // Operation
+  operationSizeValue, _objectSpread(_objectSpread({}, props), {}, {
+    tabs: tabs
+  })),
+      _useVisibleRange2 = _slicedToArray(_useVisibleRange, 2),
+      visibleStart = _useVisibleRange2[0],
+      visibleEnd = _useVisibleRange2[1]; // ========================= Scroll ========================
+
+
   var scrollToTab = function scrollToTab() {
@@ -219,6 +240,7 @@ var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
     };
+
     if (tabPositionTopOrBottom) {
       // ============ Align with top & bottom ============
-      var newTransform = transformLeft;
-      // RTL
+      var newTransform = transformLeft; // RTL
+
       if (rtl) {
@@ -230,4 +252,3 @@ if (tabOffset.right < transformLeft) {
         }
-      }
-      // LTR
+      } // LTR
       else if (tabOffset.left < -transformLeft) {
@@ -238,2 +259,3 @@ newTransform = -tabOffset.left;
       }
+
       setTransformTop(0);
@@ -244,2 +266,3 @@ setTransformLeft(alignInRange(newTransform));
       var _newTransform = transformTop;
+
       if (tabOffset.top < -transformTop) {
@@ -250,8 +273,11 @@ _newTransform = -tabOffset.top;
       }
+
       setTransformLeft(0);
       setTransformTop(alignInRange(_newTransform));
     }
-  };
-  // ========================== Tab ==========================
+  }; // ========================== Tab ==========================
+
+
   var tabNodeStyle = {};
+
   if (tabPosition === 'top' || tabPosition === 'bottom') {
@@ -262,2 +288,3 @@ tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
   }
+
   var tabNodes = tabs.map(function (tab, i) {
@@ -270,3 +297,4 @@ var key = tab.key;
       tab: tab
-      /* first node should not have margin left */,
+      /* first node should not have margin left */
+      ,
       style: i === 0 ? undefined : tabNodeStyle,
@@ -278,24 +306,23 @@ closable: tab.closable,
       removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
-      ref: getBtnRef(key),
       onClick: function onClick(e) {
         onTabClick(key, e);
       },
-      onRemove: function onRemove() {
-        removeBtnRef(key);
-      },
       onFocus: function onFocus() {
         scrollToTab(key);
         doLockAnimation();
+
         if (!tabsWrapperRef.current) {
           return;
-        }
-        // Focus element will make scrollLeft change which we should reset back
+        } // Focus element will make scrollLeft change which we should reset back
+
+
         if (!rtl) {
           tabsWrapperRef.current.scrollLeft = 0;
         }
+
         tabsWrapperRef.current.scrollTop = 0;
       }
     });
-  });
-  // Update buttons records
+  }); // Update buttons records
+
   var updateTabSizes = function updateTabSizes() {
@@ -306,3 +333,4 @@ return setTabSizes(function () {
         var key = _ref2.key;
-        var btnNode = getBtnRef(key).current;
+        var btnNode = tabListRef.current.querySelector("[data-node-key=\"".concat(key, "\"]"));
+
         if (btnNode) {
@@ -320,2 +348,3 @@ newSizes.set(key, {
   };
+
   useEffect(function () {
@@ -335,24 +364,28 @@ updateTabSizes();
     var newOperationSize = getSize(operationsRef);
-    setOperationSize(newOperationSize);
-    // Which includes add button size
+    setOperationSize(newOperationSize); // Which includes add button size
+
     var tabContentFullSize = getSize(tabListRef);
     setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]);
-  });
-  // ======================== Dropdown =======================
+  }); // ======================== Dropdown =======================
+
   var startHiddenTabs = tabs.slice(0, visibleStart);
   var endHiddenTabs = tabs.slice(visibleEnd + 1);
-  var hiddenTabs = [].concat(_toConsumableArray(startHiddenTabs), _toConsumableArray(endHiddenTabs));
-  // =================== Link & Operations ===================
+  var hiddenTabs = [].concat(_toConsumableArray(startHiddenTabs), _toConsumableArray(endHiddenTabs)); // =================== Link & Operations ===================
+
   var _useState11 = useState(),
-    _useState12 = _slicedToArray(_useState11, 2),
-    inkStyle = _useState12[0],
-    setInkStyle = _useState12[1];
-  var activeTabOffset = tabOffsets.get(activeKey);
-  // Delay set ink style to avoid remove tab blink
+      _useState12 = _slicedToArray(_useState11, 2),
+      inkStyle = _useState12[0],
+      setInkStyle = _useState12[1];
+
+  var activeTabOffset = tabOffsets.get(activeKey); // Delay set ink style to avoid remove tab blink
+
   var inkBarRafRef = useRef();
+
   function cleanInkBarRaf() {
     raf.cancel(inkBarRafRef.current);
   }
+
   useEffect(function () {
     var newInkStyle = {};
+
     if (activeTabOffset) {
@@ -365,2 +398,3 @@ if (tabPositionTopOrBottom) {
         }
+
         newInkStyle.width = activeTabOffset.width;
@@ -372,2 +406,3 @@ } else {
     }
+
     cleanInkBarRaf();
@@ -378,14 +413,12 @@ inkBarRafRef.current = raf(function () {
     return cleanInkBarRaf;
-  }, [activeTabOffset, tabPositionTopOrBottom, rtl]);
-  // ========================= Effect ========================
+  }, [activeTabOffset, tabPositionTopOrBottom, rtl]); // ========================= Effect ========================
+
   useEffect(function () {
-    scrollToTab();
-    // eslint-disable-next-line
-  }, [activeKey, stringify(activeTabOffset), stringify(tabOffsets), tabPositionTopOrBottom]);
-  // Should recalculate when rtl changed
+    scrollToTab(); // eslint-disable-next-line
+  }, [activeKey, stringify(activeTabOffset), stringify(tabOffsets), tabPositionTopOrBottom]); // Should recalculate when rtl changed
+
   useEffect(function () {
-    onListHolderResize();
-    // eslint-disable-next-line
-  }, [rtl]);
-  // ========================= Render ========================
+    onListHolderResize(); // eslint-disable-next-line
+  }, [rtl]); // ========================= Render ========================
+
   var hasDropdown = !!hiddenTabs.length;
@@ -397,2 +430,3 @@ var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
   var pingBottom;
+
   if (tabPositionTopOrBottom) {
@@ -410,2 +444,3 @@ if (rtl) {
   }
+
   return /*#__PURE__*/React.createElement(ResizeObserver, {
@@ -412,0 +447,0 @@ onResize: onListHolderResize

es/TabNavList/OperationNode.d.ts

 import * as React from 'react';
-import type { Tab, TabsLocale, EditableConfig } from '../interface';
+import type { EditableConfig, Tab, TabsLocale } from '../interface';
 export interface OperationNodeProps {
@@ -4,0 +4,0 @@ prefixCls: string;

es/TabNavList/OperationNode.js

 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import * as React from 'react';
 import classNames from 'classnames';
-import { useState, useEffect } from 'react';
+import Dropdown from 'rc-dropdown';
+import Menu, { MenuItem } from 'rc-menu';
 import KeyCode from "rc-util/es/KeyCode";
-import Menu, { MenuItem } from 'rc-menu';
-import Dropdown from 'rc-dropdown';
-import AddButton from './AddButton';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import AddButton from "./AddButton";
+
 function OperationNode(_ref, ref) {
   var prefixCls = _ref.prefixCls,
-    id = _ref.id,
-    tabs = _ref.tabs,
-    locale = _ref.locale,
-    mobile = _ref.mobile,
-    _ref$moreIcon = _ref.moreIcon,
-    moreIcon = _ref$moreIcon === void 0 ? 'More' : _ref$moreIcon,
-    moreTransitionName = _ref.moreTransitionName,
-    style = _ref.style,
-    className = _ref.className,
-    editable = _ref.editable,
-    tabBarGutter = _ref.tabBarGutter,
-    rtl = _ref.rtl,
-    removeAriaLabel = _ref.removeAriaLabel,
-    onTabClick = _ref.onTabClick,
-    getPopupContainer = _ref.getPopupContainer,
-    popupClassName = _ref.popupClassName;
+      id = _ref.id,
+      tabs = _ref.tabs,
+      locale = _ref.locale,
+      mobile = _ref.mobile,
+      _ref$moreIcon = _ref.moreIcon,
+      moreIcon = _ref$moreIcon === void 0 ? 'More' : _ref$moreIcon,
+      moreTransitionName = _ref.moreTransitionName,
+      style = _ref.style,
+      className = _ref.className,
+      editable = _ref.editable,
+      tabBarGutter = _ref.tabBarGutter,
+      rtl = _ref.rtl,
+      removeAriaLabel = _ref.removeAriaLabel,
+      onTabClick = _ref.onTabClick,
+      getPopupContainer = _ref.getPopupContainer,
+      popupClassName = _ref.popupClassName;
+
   // ======================== Dropdown ========================
   var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
   var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedKey = _useState4[0],
-    setSelectedKey = _useState4[1];
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedKey = _useState4[0],
+      setSelectedKey = _useState4[1];
+
   var popupId = "".concat(id, "-more-popup");
@@ -41,2 +45,3 @@ var dropdownPrefix = "".concat(prefixCls, "-dropdown");
   var dropdownAriaLabel = locale === null || locale === void 0 ? void 0 : locale.dropdownAriaLabel;
+
   function onRemoveTab(event, key) {
@@ -50,6 +55,7 @@ event.preventDefault();
   }
+
   var menu = /*#__PURE__*/React.createElement(Menu, {
     onClick: function onClick(_ref2) {
       var key = _ref2.key,
-        domEvent = _ref2.domEvent;
+          domEvent = _ref2.domEvent;
       onTabClick(key, domEvent);
@@ -84,2 +90,3 @@ setOpen(false);
   }));
+
   function selectOffset(offset) {
@@ -93,5 +100,7 @@ var enabledTabs = tabs.filter(function (tab) {
     var len = enabledTabs.length;
+
     for (var i = 0; i < len; i += 1) {
       selectedIndex = (selectedIndex + offset + len) % len;
       var tab = enabledTabs[selectedIndex];
+
       if (!tab.disabled) {
@@ -103,4 +112,6 @@ setSelectedKey(tab.key);
   }
+
   function onKeyDown(e) {
     var which = e.which;
+
     if (!open) {
@@ -111,4 +122,6 @@ if ([KeyCode.DOWN, KeyCode.SPACE, KeyCode.ENTER].includes(which)) {
       }
+
       return;
     }
+
     switch (which) {
@@ -119,2 +132,3 @@ case KeyCode.UP:
         break;
+
       case KeyCode.DOWN:
@@ -124,5 +138,7 @@ selectOffset(1);
         break;
+
       case KeyCode.ESC:
         setOpen(false);
         break;
+
       case KeyCode.SPACE:
@@ -133,7 +149,9 @@ case KeyCode.ENTER:
     }
-  }
-  // ========================= Effect =========================
+  } // ========================= Effect =========================
+
+
   useEffect(function () {
     // We use query element here to avoid React strict warning
     var ele = document.getElementById(selectedItemId);
+
     if (ele && ele.scrollIntoView) {
@@ -147,5 +165,6 @@ ele.scrollIntoView(false);
     }
-  }, [open]);
-  // ========================= Render =========================
+  }, [open]); // ========================= Render =========================
+
   var moreStyle = _defineProperty({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);
+
   if (!tabs.length) {
@@ -155,2 +174,3 @@ moreStyle.visibility = 'hidden';
   }
+
   var overlayClassName = classNames(_defineProperty({}, "".concat(dropdownPrefix, "-rtl"), rtl));
@@ -190,5 +210,5 @@ var moreNode = mobile ? null : /*#__PURE__*/React.createElement(Dropdown, {
 }
+
 export default /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(OperationNode), function (_, next) {
-  return (
-    // https://github.com/ant-design/ant-design/issues/32544
+  return (// https://github.com/ant-design/ant-design/issues/32544
     // We'd better remove syntactic sugar in `rc-menu` since this has perf issue
@@ -195,0 +215,0 @@ next.tabMoving

es/TabNavList/TabNode.d.ts

 import * as React from 'react';
-import type { Tab, EditableConfig } from '../interface';
+import type { EditableConfig, Tab } from '../interface';
 export interface TabNodeProps {
@@ -15,7 +15,6 @@ id: string;
     removeIcon?: React.ReactNode;
-    onRemove: () => void;
     onFocus: React.FocusEventHandler;
     style?: React.CSSProperties;
 }
-declare const _default: React.ForwardRefExoticComponent<TabNodeProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare function TabNode({ prefixCls, id, active, tab: { key, label, disabled, closeIcon }, closable, renderWrapper, removeAriaLabel, editable, onClick, onFocus, style, }: TabNodeProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default TabNode;

es/TabNavList/TabNode.js

 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import * as React from 'react';
 import classNames from 'classnames';
 import KeyCode from "rc-util/es/KeyCode";
-function TabNode(_ref, ref) {
+import * as React from 'react';
+
+function TabNode(_ref) {
   var _classNames;
+
   var prefixCls = _ref.prefixCls,
-    id = _ref.id,
-    active = _ref.active,
-    _ref$tab = _ref.tab,
-    key = _ref$tab.key,
-    label = _ref$tab.label,
-    disabled = _ref$tab.disabled,
-    closeIcon = _ref$tab.closeIcon,
-    closable = _ref.closable,
-    renderWrapper = _ref.renderWrapper,
-    removeAriaLabel = _ref.removeAriaLabel,
-    editable = _ref.editable,
-    onClick = _ref.onClick,
-    onRemove = _ref.onRemove,
-    onFocus = _ref.onFocus,
-    style = _ref.style;
+      id = _ref.id,
+      active = _ref.active,
+      _ref$tab = _ref.tab,
+      key = _ref$tab.key,
+      label = _ref$tab.label,
+      disabled = _ref$tab.disabled,
+      closeIcon = _ref$tab.closeIcon,
+      closable = _ref.closable,
+      renderWrapper = _ref.renderWrapper,
+      removeAriaLabel = _ref.removeAriaLabel,
+      editable = _ref.editable,
+      onClick = _ref.onClick,
+      onFocus = _ref.onFocus,
+      style = _ref.style;
   var tabPrefix = "".concat(prefixCls, "-tab");
-  React.useEffect(function () {
-    return onRemove;
-  }, []);
   var removable = editable && closable !== false && !disabled;
+
   function onInternalClick(e) {
@@ -32,4 +31,6 @@ if (disabled) {
     }
+
     onClick(e);
   }
+
   function onRemoveTab(event) {
@@ -43,5 +44,7 @@ event.preventDefault();
   }
+
   var node = /*#__PURE__*/React.createElement("div", {
-    key: key,
-    ref: ref,
+    key: key // ref={ref}
+    ,
+    "data-node-key": key,
     className: classNames(tabPrefix, (_classNames = {}, _defineProperty(_classNames, "".concat(tabPrefix, "-with-remove"), removable), _defineProperty(_classNames, "".concat(tabPrefix, "-active"), active), _defineProperty(_classNames, "".concat(tabPrefix, "-disabled"), disabled), _classNames)),
@@ -81,2 +84,3 @@ style: style,
 }
-export default /*#__PURE__*/React.forwardRef(TabNode);
+
+export default TabNode;

es/TabNavList/Wrapper.d.ts

 import type { TabNavListProps } from '.';
-export type TabNavListWrapperProps = Required<Omit<TabNavListProps, 'children' | 'className'>> & TabNavListProps;
+export declare type TabNavListWrapperProps = Required<Omit<TabNavListProps, 'children' | 'className'>> & TabNavListProps;
 export default function TabNavListWrapper({ renderTabBar, ...restProps }: TabNavListWrapperProps): JSX.Element;

es/TabNavList/Wrapper.js

@@ -5,15 +5,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var _excluded = ["renderTabBar"],
-  _excluded2 = ["label", "key"];
-import React from "react";
+    _excluded2 = ["label", "key"];
 // zombieJ: To compatible with `renderTabBar` usage.
 import TabNavList from '.';
 import { useContext } from 'react';
-import TabContext from '../TabContext';
-import TabPane from '../TabPanelList/TabPane';
+import TabContext from "../TabContext";
+import TabPane from "../TabPanelList/TabPane";
 // We have to create a TabNavList components.
 export default function TabNavListWrapper(_ref) {
   var renderTabBar = _ref.renderTabBar,
-    restProps = _objectWithoutProperties(_ref, _excluded);
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
   var _useContext = useContext(TabContext),
-    tabs = _useContext.tabs;
+      tabs = _useContext.tabs;
+
   if (renderTabBar) {
@@ -24,4 +25,5 @@ var tabNavBarProps = _objectSpread(_objectSpread({}, restProps), {}, {
         var label = _ref2.label,
-          key = _ref2.key,
-          restTabProps = _objectWithoutProperties(_ref2, _excluded2);
+            key = _ref2.key,
+            restTabProps = _objectWithoutProperties(_ref2, _excluded2);
+
         return /*#__PURE__*/React.createElement(TabPane, _extends({
@@ -34,5 +36,7 @@ tab: label,
     });
+
     return renderTabBar(tabNavBarProps, TabNavList);
   }
+
   return /*#__PURE__*/React.createElement(TabNavList, restProps);
 }

es/TabPanelList/index.js

@@ -9,13 +9,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import CSSMotion from 'rc-motion';
-import TabContext from '../TabContext';
-import TabPane from './TabPane';
+import TabContext from "../TabContext";
+import TabPane from "./TabPane";
 export default function TabPanelList(_ref) {
   var id = _ref.id,
-    activeKey = _ref.activeKey,
-    animated = _ref.animated,
-    tabPosition = _ref.tabPosition,
-    destroyInactiveTabPane = _ref.destroyInactiveTabPane;
+      activeKey = _ref.activeKey,
+      animated = _ref.animated,
+      tabPosition = _ref.tabPosition,
+      destroyInactiveTabPane = _ref.destroyInactiveTabPane;
+
   var _React$useContext = React.useContext(TabContext),
-    prefixCls = _React$useContext.prefixCls,
-    tabs = _React$useContext.tabs;
+      prefixCls = _React$useContext.prefixCls,
+      tabs = _React$useContext.tabs;
+
   var tabPaneAnimated = animated.tabPane;
@@ -29,6 +31,7 @@ var tabPanePrefixCls = "".concat(prefixCls, "-tabpane");
     var key = _ref2.key,
-      forceRender = _ref2.forceRender,
-      paneStyle = _ref2.style,
-      paneClassName = _ref2.className,
-      restTabProps = _objectWithoutProperties(_ref2, _excluded);
+        forceRender = _ref2.forceRender,
+        paneStyle = _ref2.style,
+        paneClassName = _ref2.className,
+        restTabProps = _objectWithoutProperties(_ref2, _excluded);
+
     var active = key === activeKey;
@@ -43,3 +46,3 @@ return /*#__PURE__*/React.createElement(CSSMotion, _extends({
       var motionStyle = _ref3.style,
-        motionClassName = _ref3.className;
+          motionClassName = _ref3.className;
       return /*#__PURE__*/React.createElement(TabPane, _extends({}, restTabProps, {
@@ -46,0 +49,0 @@ prefixCls: tabPanePrefixCls,

es/TabPanelList/TabPane.js

@@ -5,8 +5,8 @@ import * as React from 'react';
   var prefixCls = _ref.prefixCls,
-    className = _ref.className,
-    style = _ref.style,
-    id = _ref.id,
-    active = _ref.active,
-    tabKey = _ref.tabKey,
-    children = _ref.children;
+      className = _ref.className,
+      style = _ref.style,
+      id = _ref.id,
+      active = _ref.active,
+      tabKey = _ref.tabKey,
+      children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
@@ -23,5 +23,7 @@ id: id && "".concat(id, "-panel-").concat(tabKey),
 });
+
 if (process.env.NODE_ENV !== 'production') {
   TabPane.displayName = 'TabPane';
 }
+
 export default TabPane;

es/Tabs.js

@@ -14,6 +14,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import useMergedState from "rc-util/es/hooks/useMergedState";
-import TabPanelList from './TabPanelList';
-import TabContext from './TabContext';
-import TabNavListWrapper from './TabNavList/Wrapper';
-import useAnimateConfig from './hooks/useAnimateConfig';
+import TabPanelList from "./TabPanelList";
+import TabContext from "./TabContext";
+import TabNavListWrapper from "./TabNavList/Wrapper";
+import useAnimateConfig from "./hooks/useAnimateConfig";
 /**
@@ -29,31 +29,35 @@ * Should added antd:
 // Used for accessibility
+
 var uuid = 0;
+
 function Tabs(_ref, ref) {
   var _classNames;
+
   var id = _ref.id,
-    _ref$prefixCls = _ref.prefixCls,
-    prefixCls = _ref$prefixCls === void 0 ? 'rc-tabs' : _ref$prefixCls,
-    className = _ref.className,
-    items = _ref.items,
-    direction = _ref.direction,
-    activeKey = _ref.activeKey,
-    defaultActiveKey = _ref.defaultActiveKey,
-    editable = _ref.editable,
-    animated = _ref.animated,
-    _ref$tabPosition = _ref.tabPosition,
-    tabPosition = _ref$tabPosition === void 0 ? 'top' : _ref$tabPosition,
-    tabBarGutter = _ref.tabBarGutter,
-    tabBarStyle = _ref.tabBarStyle,
-    tabBarExtraContent = _ref.tabBarExtraContent,
-    locale = _ref.locale,
-    moreIcon = _ref.moreIcon,
-    moreTransitionName = _ref.moreTransitionName,
-    destroyInactiveTabPane = _ref.destroyInactiveTabPane,
-    renderTabBar = _ref.renderTabBar,
-    onChange = _ref.onChange,
-    onTabClick = _ref.onTabClick,
-    onTabScroll = _ref.onTabScroll,
-    getPopupContainer = _ref.getPopupContainer,
-    popupClassName = _ref.popupClassName,
-    restProps = _objectWithoutProperties(_ref, _excluded);
+      _ref$prefixCls = _ref.prefixCls,
+      prefixCls = _ref$prefixCls === void 0 ? 'rc-tabs' : _ref$prefixCls,
+      className = _ref.className,
+      items = _ref.items,
+      direction = _ref.direction,
+      activeKey = _ref.activeKey,
+      defaultActiveKey = _ref.defaultActiveKey,
+      editable = _ref.editable,
+      animated = _ref.animated,
+      _ref$tabPosition = _ref.tabPosition,
+      tabPosition = _ref$tabPosition === void 0 ? 'top' : _ref$tabPosition,
+      tabBarGutter = _ref.tabBarGutter,
+      tabBarStyle = _ref.tabBarStyle,
+      tabBarExtraContent = _ref.tabBarExtraContent,
+      locale = _ref.locale,
+      moreIcon = _ref.moreIcon,
+      moreTransitionName = _ref.moreTransitionName,
+      destroyInactiveTabPane = _ref.destroyInactiveTabPane,
+      renderTabBar = _ref.renderTabBar,
+      onChange = _ref.onChange,
+      onTabClick = _ref.onTabClick,
+      onTabScroll = _ref.onTabScroll,
+      getPopupContainer = _ref.getPopupContainer,
+      popupClassName = _ref.popupClassName,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
   var tabs = React.useMemo(function () {
@@ -65,32 +69,36 @@ return (items || []).filter(function (item) {
   var rtl = direction === 'rtl';
-  var mergedAnimated = useAnimateConfig(animated);
-  // ======================== Mobile ========================
+  var mergedAnimated = useAnimateConfig(animated); // ======================== Mobile ========================
+
   var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    mobile = _useState2[0],
-    setMobile = _useState2[1];
+      _useState2 = _slicedToArray(_useState, 2),
+      mobile = _useState2[0],
+      setMobile = _useState2[1];
+
   useEffect(function () {
     // Only update on the client side
     setMobile(isMobile());
-  }, []);
-  // ====================== Active Key ======================
+  }, []); // ====================== Active Key ======================
+
   var _useMergedState = useMergedState(function () {
-      var _tabs$;
-      return (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key;
-    }, {
-      value: activeKey,
-      defaultValue: defaultActiveKey
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    mergedActiveKey = _useMergedState2[0],
-    setMergedActiveKey = _useMergedState2[1];
+    var _tabs$;
+
+    return (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key;
+  }, {
+    value: activeKey,
+    defaultValue: defaultActiveKey
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      mergedActiveKey = _useMergedState2[0],
+      setMergedActiveKey = _useMergedState2[1];
+
   var _useState3 = useState(function () {
-      return tabs.findIndex(function (tab) {
-        return tab.key === mergedActiveKey;
-      });
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    activeIndex = _useState4[0],
-    setActiveIndex = _useState4[1];
-  // Reset active key if not exist anymore
+    return tabs.findIndex(function (tab) {
+      return tab.key === mergedActiveKey;
+    });
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      activeIndex = _useState4[0],
+      setActiveIndex = _useState4[1]; // Reset active key if not exist anymore
+
+
   useEffect(function () {
@@ -100,19 +108,23 @@ var newActiveIndex = tabs.findIndex(function (tab) {
     });
+
     if (newActiveIndex === -1) {
       var _tabs$newActiveIndex;
+
       newActiveIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1));
       setMergedActiveKey((_tabs$newActiveIndex = tabs[newActiveIndex]) === null || _tabs$newActiveIndex === void 0 ? void 0 : _tabs$newActiveIndex.key);
     }
+
     setActiveIndex(newActiveIndex);
   }, [tabs.map(function (tab) {
     return tab.key;
-  }).join('_'), mergedActiveKey, activeIndex]);
-  // ===================== Accessibility ====================
+  }).join('_'), mergedActiveKey, activeIndex]); // ===================== Accessibility ====================
+
   var _useMergedState3 = useMergedState(null, {
-      value: id
-    }),
-    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
-    mergedId = _useMergedState4[0],
-    setMergedId = _useMergedState4[1];
-  // Async generate id to avoid ssr mapping failed
+    value: id
+  }),
+      _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+      mergedId = _useMergedState4[0],
+      setMergedId = _useMergedState4[1]; // Async generate id to avoid ssr mapping failed
+
+
   useEffect(function () {
@@ -123,4 +135,4 @@ if (!id) {
     }
-  }, []);
-  // ======================== Events ========================
+  }, []); // ======================== Events ========================
+
   function onInternalTabClick(key, e) {
@@ -130,7 +142,9 @@ onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(key, e);
     setMergedActiveKey(key);
+
     if (isActiveChanged) {
       onChange === null || onChange === void 0 ? void 0 : onChange(key);
     }
-  }
-  // ======================== Render ========================
+  } // ======================== Render ========================
+
+
   var sharedProps = {
@@ -145,2 +159,3 @@ id: mergedId,
   var tabNavBar;
+
   var tabNavBarProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
@@ -160,2 +175,3 @@ editable: editable,
   });
+
   return /*#__PURE__*/React.createElement(TabContext.Provider, {
@@ -178,6 +194,9 @@ value: {
 }
+
 var ForwardTabs = /*#__PURE__*/React.forwardRef(Tabs);
+
 if (process.env.NODE_ENV !== 'production') {
   ForwardTabs.displayName = 'Tabs';
 }
+
 export default ForwardTabs;

es/util.js

@@ -7,2 +7,3 @@ /**
   var tgt;
+
   if (obj instanceof Map) {
@@ -16,3 +17,4 @@ tgt = {};
   }
+
   return JSON.stringify(tgt);
 }

lib/hooks/useAnimateConfig.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,5 +9,9 @@ value: true
 exports.default = useAnimateConfig;
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+
 function useAnimateConfig() {
@@ -18,2 +23,3 @@ var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
   var mergedAnimated;
+
   if (animated === false) {
@@ -33,7 +39,9 @@ mergedAnimated = {
     }, (0, _typeof2.default)(animated) === 'object' ? animated : {});
-  }
-  // Enable tabPane animation if provide motion
+  } // Enable tabPane animation if provide motion
+
+
   if (mergedAnimated.tabPaneMotion && mergedAnimated.tabPane === undefined) {
     mergedAnimated.tabPane = true;
   }
+
   if (!mergedAnimated.tabPaneMotion && mergedAnimated.tabPane) {
@@ -43,5 +51,7 @@ if (process.env.NODE_ENV !== 'production') {
     }
+
     mergedAnimated.tabPane = false;
   }
+
   return mergedAnimated;
 }

lib/hooks/useOffsets.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,4 +9,7 @@ value: true
 exports.default = useOffsets;
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _react = require("react");
+
 var DEFAULT_SIZE = {
@@ -17,22 +21,28 @@ width: 0,
 };
+
 function useOffsets(tabs, tabSizes, holderScrollWidth) {
   return (0, _react.useMemo)(function () {
     var _tabs$;
+
     var map = new Map();
     var lastOffset = tabSizes.get((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key) || DEFAULT_SIZE;
     var rightOffset = lastOffset.left + lastOffset.width;
+
     for (var i = 0; i < tabs.length; i += 1) {
       var key = tabs[i].key;
-      var data = tabSizes.get(key);
-      // Reuse last one when not exist yet
+      var data = tabSizes.get(key); // Reuse last one when not exist yet
+
       if (!data) {
         var _tabs;
+
         data = tabSizes.get((_tabs = tabs[i - 1]) === null || _tabs === void 0 ? void 0 : _tabs.key) || DEFAULT_SIZE;
       }
-      var entity = map.get(key) || (0, _objectSpread2.default)({}, data);
-      // Right
-      entity.right = rightOffset - entity.left - entity.width;
-      // Update entity
+
+      var entity = map.get(key) || (0, _objectSpread2.default)({}, data); // Right
+
+      entity.right = rightOffset - entity.left - entity.width; // Update entity
+
       map.set(key, entity);
     }
+
     return map;
@@ -39,0 +49,0 @@ }, [tabs.map(function (tab) {

lib/hooks/useRaf.d.ts

 export default function useRaf<Callback extends Function>(callback: Callback): (...args: any[]) => void;
-type Callback<T> = (ori: T) => T;
+declare type Callback<T> = (ori: T) => T;
 export declare function useRafState<T>(defaultState: T | (() => T)): [T, (updater: Callback<T>) => void];
 export {};

lib/hooks/useRaf.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,8 +10,13 @@ value: true
 exports.useRafState = useRafState;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = require("react");
+
 var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
+
 function useRaf(callback) {
   var rafRef = (0, _react.useRef)();
   var removedRef = (0, _react.useRef)(false);
+
   function trigger() {
@@ -20,4 +26,6 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     }
+
     if (!removedRef.current) {
       _raf.default.cancel(rafRef.current);
+
       rafRef.current = (0, _raf.default)(function () {
@@ -28,2 +36,3 @@ callback.apply(void 0, args);
   }
+
   (0, _react.useEffect)(function () {
@@ -34,2 +43,3 @@ //be compatible with react 18 StrictMode in dev
       removedRef.current = true;
+
       _raf.default.cancel(rafRef.current);
@@ -40,7 +50,10 @@ };
 }
+
 function useRafState(defaultState) {
   var batchRef = (0, _react.useRef)([]);
+
   var _useState = (0, _react.useState)({}),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    forceUpdate = _useState2[1];
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      forceUpdate = _useState2[1];
+
   var state = (0, _react.useRef)(typeof defaultState === 'function' ? defaultState() : defaultState);
@@ -56,2 +69,3 @@ var flushUpdate = useRaf(function () {
   });
+
   function updater(callback) {
@@ -61,3 +75,4 @@ batchRef.current.push(callback);
   }
+
   return [state.current, updater];
 }

lib/hooks/useSyncState.d.ts

@@ -1,3 +0,3 @@
-type Updater<T> = (prev: T) => T;
+declare type Updater<T> = (prev: T) => T;
 export default function useSyncState<T>(defaultState: T, onChange: (newValue: T, prevValue: T) => void): [T, (updater: T | Updater<T>) => void];
 export {};

lib/hooks/useSyncState.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,20 +11,30 @@ value: true
 exports.default = useSyncState;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var React = _interopRequireWildcard(require("react"));
+
 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; }
+
 function useSyncState(defaultState, onChange) {
   var stateRef = React.useRef(defaultState);
+
   var _React$useState = React.useState({}),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    forceUpdate = _React$useState2[1];
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      forceUpdate = _React$useState2[1];
+
   function setState(updater) {
     var newValue = typeof updater === 'function' ? updater(stateRef.current) : updater;
+
     if (newValue !== stateRef.current) {
       onChange(newValue, stateRef.current);
     }
+
     stateRef.current = newValue;
     forceUpdate({});
   }
+
   return [stateRef.current, setState];
 }

lib/hooks/useTouchMove.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,35 +11,44 @@ value: true
 exports.default = useTouchMove;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var React = _interopRequireWildcard(require("react"));
+
 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 MIN_SWIPE_DISTANCE = 0.1;
 var STOP_SWIPE_DISTANCE = 0.01;
 var REFRESH_INTERVAL = 20;
-var SPEED_OFF_MULTIPLE = Math.pow(0.995, REFRESH_INTERVAL);
-// ================================= Hook =================================
+var SPEED_OFF_MULTIPLE = Math.pow(0.995, REFRESH_INTERVAL); // ================================= Hook =================================
+
 function useTouchMove(ref, onOffset) {
   var _useState = (0, React.useState)(),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    touchPosition = _useState2[0],
-    setTouchPosition = _useState2[1];
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      touchPosition = _useState2[0],
+      setTouchPosition = _useState2[1];
+
   var _useState3 = (0, React.useState)(0),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    lastTimestamp = _useState4[0],
-    setLastTimestamp = _useState4[1];
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      lastTimestamp = _useState4[0],
+      setLastTimestamp = _useState4[1];
+
   var _useState5 = (0, React.useState)(0),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    lastTimeDiff = _useState6[0],
-    setLastTimeDiff = _useState6[1];
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      lastTimeDiff = _useState6[0],
+      setLastTimeDiff = _useState6[1];
+
   var _useState7 = (0, React.useState)(),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    lastOffset = _useState8[0],
-    setLastOffset = _useState8[1];
-  var motionRef = (0, React.useRef)();
-  // ========================= Events =========================
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      lastOffset = _useState8[0],
+      setLastOffset = _useState8[1];
+
+  var motionRef = (0, React.useRef)(); // ========================= Events =========================
   // >>> Touch events
+
   function onTouchStart(e) {
     var _e$touches$ = e.touches[0],
-      screenX = _e$touches$.screenX,
-      screenY = _e$touches$.screenY;
+        screenX = _e$touches$.screenX,
+        screenY = _e$touches$.screenY;
     setTouchPosition({
@@ -49,2 +60,3 @@ x: screenX,
   }
+
   function onTouchMove(e) {
@@ -54,4 +66,4 @@ if (!touchPosition) return;
     var _e$touches$2 = e.touches[0],
-      screenX = _e$touches$2.screenX,
-      screenY = _e$touches$2.screenY;
+        screenX = _e$touches$2.screenX,
+        screenY = _e$touches$2.screenY;
     setTouchPosition({
@@ -72,7 +84,8 @@ x: screenX,
   }
+
   function onTouchEnd() {
     if (!touchPosition) return;
     setTouchPosition(null);
-    setLastOffset(null);
-    // Swipe if needed
+    setLastOffset(null); // Swipe if needed
+
     if (lastOffset) {
@@ -82,4 +95,4 @@ var distanceX = lastOffset.x / lastTimeDiff;
       var absX = Math.abs(distanceX);
-      var absY = Math.abs(distanceY);
-      // Skip swipe if low distance
+      var absY = Math.abs(distanceY); // Skip swipe if low distance
+
       if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
@@ -93,2 +106,3 @@ var currentX = distanceX;
         }
+
         currentX *= SPEED_OFF_MULTIPLE;
@@ -99,12 +113,15 @@ currentY *= SPEED_OFF_MULTIPLE;
     }
-  }
-  // >>> Wheel event
+  } // >>> Wheel event
+
+
   var lastWheelDirectionRef = (0, React.useRef)();
+
   function onWheel(e) {
     var deltaX = e.deltaX,
-      deltaY = e.deltaY;
-    // Convert both to x & y since wheel only happened on PC
+        deltaY = e.deltaY; // Convert both to x & y since wheel only happened on PC
+
     var mixed = 0;
     var absX = Math.abs(deltaX);
     var absY = Math.abs(deltaY);
+
     if (absX === absY) {
@@ -119,7 +136,9 @@ mixed = lastWheelDirectionRef.current === 'x' ? deltaX : deltaY;
     }
+
     if (onOffset(-mixed, -mixed)) {
       e.preventDefault();
     }
-  }
-  // ========================= Effect =========================
+  } // ========================= Effect =========================
+
+
   var touchEventsRef = (0, React.useRef)(null);
@@ -136,11 +155,15 @@ touchEventsRef.current = {
     }
+
     function onProxyTouchMove(e) {
       touchEventsRef.current.onTouchMove(e);
     }
+
     function onProxyTouchEnd(e) {
       touchEventsRef.current.onTouchEnd(e);
     }
+
     function onProxyWheel(e) {
       touchEventsRef.current.onWheel(e);
     }
+
     document.addEventListener('touchmove', onProxyTouchMove, {
@@ -151,4 +174,4 @@ passive: false
       passive: false
-    });
-    // No need to clean up since element removed
+    }); // No need to clean up since element removed
+
     ref.current.addEventListener('touchstart', onProxyTouchStart, {
@@ -155,0 +178,0 @@ passive: false

lib/hooks/useVisibleRange.d.ts

 import type { Tab, TabOffsetMap } from '../interface';
 import type { TabNavListProps } from '../TabNavList';
-export type ContainerSizeInfo = [width: number, height: number, left: number, top: number];
+export declare type ContainerSizeInfo = [width: number, height: number, left: number, top: number];
 export default function useVisibleRange(tabOffsets: TabOffsetMap, visibleTabContentValue: number, transform: number, tabContentSizeValue: number, addNodeSizeValue: number, operationNodeSizeValue: number, { tabs, tabPosition, rtl }: {
     tabs: Tab[];
 } & TabNavListProps): [visibleStart: number, visibleEnd: number];

lib/hooks/useVisibleRange.js

@@ -7,3 +7,5 @@ "use strict";
 exports.default = useVisibleRange;
+
 var _react = require("react");
+
 var DEFAULT_SIZE = {
@@ -16,9 +18,11 @@ width: 0,
 };
+
 function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, _ref) {
   var tabs = _ref.tabs,
-    tabPosition = _ref.tabPosition,
-    rtl = _ref.rtl;
+      tabPosition = _ref.tabPosition,
+      rtl = _ref.rtl;
   var charUnit;
   var position;
   var transformSize;
+
   if (['top', 'bottom'].includes(tabPosition)) {
@@ -33,2 +37,3 @@ charUnit = 'width';
   }
+
   return (0, _react.useMemo)(function () {
@@ -38,6 +43,9 @@ if (!tabs.length) {
     }
+
     var len = tabs.length;
     var endIndex = len;
+
     for (var i = 0; i < len; i += 1) {
       var offset = tabOffsets.get(tabs[i].key) || DEFAULT_SIZE;
+
       if (offset[position] + offset[charUnit] > transformSize + visibleTabContentValue) {
@@ -48,5 +56,8 @@ endIndex = i - 1;
     }
+
     var startIndex = 0;
+
     for (var _i = len - 1; _i >= 0; _i -= 1) {
       var _offset = tabOffsets.get(tabs[_i].key) || DEFAULT_SIZE;
+
       if (_offset[position] < transformSize) {
@@ -57,2 +68,3 @@ startIndex = _i + 1;
     }
+
     return [startIndex, endIndex];
@@ -59,0 +71,0 @@ }, [tabOffsets, visibleTabContentValue, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, transformSize, tabPosition, tabs.map(function (tab) {

lib/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,4 +9,6 @@ value: true
 exports.default = void 0;
+
 var _Tabs = _interopRequireDefault(require("./Tabs"));
+
 var _default = _Tabs.default;
 exports.default = _default;

lib/interface.d.ts

@@ -5,4 +5,4 @@ import type React from 'react';
 import type { TabPaneProps } from './TabPanelList/TabPane';
-export type SizeInfo = [width: number, height: number];
-export type TabSizeMap = Map<React.Key, {
+export declare type SizeInfo = [width: number, height: number];
+export declare type TabSizeMap = Map<React.Key, {
     width: number;
@@ -20,4 +20,4 @@ height: number;
 }
-export type TabOffsetMap = Map<React.Key, TabOffset>;
-export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
+export declare type TabOffsetMap = Map<React.Key, TabOffset>;
+export declare type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 export interface Tab extends Omit<TabPaneProps, 'tab'> {
@@ -27,3 +27,3 @@ key: string;
 }
-type RenderTabBarProps = {
+declare type RenderTabBarProps = {
     id: string;
@@ -47,3 +47,3 @@ activeKey: string;
 };
-export type RenderTabBar = (props: RenderTabBarProps, DefaultTabBar: React.ComponentType<TabNavListProps>) => React.ReactElement;
+export declare type RenderTabBar = (props: RenderTabBarProps, DefaultTabBar: React.ComponentType<TabNavListProps>) => React.ReactElement;
 export interface TabsLocale {
@@ -68,8 +68,8 @@ dropdownAriaLabel?: string;
 }
-export type OnTabScroll = (info: {
+export declare type OnTabScroll = (info: {
     direction: 'left' | 'right' | 'top' | 'bottom';
 }) => void;
-export type TabBarExtraPosition = 'left' | 'right';
-export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, React.ReactNode>>;
-export type TabBarExtraContent = React.ReactNode | TabBarExtraMap;
+export declare type TabBarExtraPosition = 'left' | 'right';
+export declare type TabBarExtraMap = Partial<Record<TabBarExtraPosition, React.ReactNode>>;
+export declare type TabBarExtraContent = React.ReactNode | TabBarExtraMap;
 export {};

lib/TabContext.js

@@ -7,4 +7,7 @@ "use strict";
 exports.default = void 0;
+
 var _react = require("react");
+
 var _default = /*#__PURE__*/(0, _react.createContext)(null);
+
 exports.default = _default;

lib/TabNavList/AddButton.js

 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,13 +9,19 @@ value: true
 exports.default = void 0;
+
 var React = _interopRequireWildcard(require("react"));
+
 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; }
+
 function AddButton(_ref, ref) {
   var prefixCls = _ref.prefixCls,
-    editable = _ref.editable,
-    locale = _ref.locale,
-    style = _ref.style;
+      editable = _ref.editable,
+      locale = _ref.locale,
+      style = _ref.style;
+
   if (!editable || editable.showAdd === false) {
     return null;
   }
+
   return /*#__PURE__*/React.createElement("button", {
@@ -33,3 +40,5 @@ ref: ref,
 }
+
 var _default = /*#__PURE__*/React.forwardRef(AddButton);
+
 exports.default = _default;

lib/TabNavList/ExtraContent.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,14 +11,20 @@ value: true
 exports.default = void 0;
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var React = _interopRequireWildcard(require("react"));
+
 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 || _typeof3(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 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var position = _ref.position,
-    prefixCls = _ref.prefixCls,
-    extra = _ref.extra;
+      prefixCls = _ref.prefixCls,
+      extra = _ref.extra;
   if (!extra) return null;
-  var content;
-  // Parse extra
+  var content; // Parse extra
+
   var assertExtra = {};
+
   if ((0, _typeof2.default)(extra) === 'object' && ! /*#__PURE__*/React.isValidElement(extra)) {
@@ -27,8 +35,11 @@ assertExtra = extra;
   }
+
   if (position === 'right') {
     content = assertExtra.right;
   }
+
   if (position === 'left') {
     content = assertExtra.left;
   }
+
   return content ? /*#__PURE__*/React.createElement("div", {
@@ -39,6 +50,8 @@ className: "".concat(prefixCls, "-extra-content"),
 });
+
 if (process.env.NODE_ENV !== 'production') {
   ExtraContent.displayName = 'ExtraContent';
 }
+
 var _default = ExtraContent;
 exports.default = _default;

lib/TabNavList/index.d.ts

 import * as React from 'react';
-import type { TabPosition, RenderTabBar, TabsLocale, EditableConfig, AnimatedConfig, OnTabScroll, TabBarExtraContent } from '../interface';
+import type { AnimatedConfig, EditableConfig, OnTabScroll, RenderTabBar, TabBarExtraContent, TabPosition, TabsLocale } from '../interface';
 export interface TabNavListProps {
@@ -4,0 +4,0 @@ id: string;

lib/TabNavList/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,32 +11,56 @@ value: true
 exports.default = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
+var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+
 var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
+
 var _ref3 = require("rc-util/lib/ref");
-var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useOffsets = _interopRequireDefault(require("../hooks/useOffsets"));
+
 var _useRaf = _interopRequireWildcard(require("../hooks/useRaf"));
-var _TabNode = _interopRequireDefault(require("./TabNode"));
-var _useOffsets = _interopRequireDefault(require("../hooks/useOffsets"));
+
+var _useSyncState5 = _interopRequireDefault(require("../hooks/useSyncState"));
+
+var _useTouchMove = _interopRequireDefault(require("../hooks/useTouchMove"));
+
 var _useVisibleRange3 = _interopRequireDefault(require("../hooks/useVisibleRange"));
-var _OperationNode = _interopRequireDefault(require("./OperationNode"));
+
 var _TabContext = _interopRequireDefault(require("../TabContext"));
-var _useTouchMove = _interopRequireDefault(require("../hooks/useTouchMove"));
-var _useRefs3 = _interopRequireDefault(require("../hooks/useRefs"));
+
+var _util = require("../util");
+
 var _AddButton = _interopRequireDefault(require("./AddButton"));
-var _useSyncState5 = _interopRequireDefault(require("../hooks/useSyncState"));
-var _util = require("../util");
+
 var _ExtraContent = _interopRequireDefault(require("./ExtraContent"));
+
+var _OperationNode = _interopRequireDefault(require("./OperationNode"));
+
+var _TabNode = _interopRequireDefault(require("./TabNode"));
+
 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 getSize = function getSize(refObj) {
   var _ref = refObj.current || {},
-    _ref$offsetWidth = _ref.offsetWidth,
-    offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
-    _ref$offsetHeight = _ref.offsetHeight,
-    offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
+      _ref$offsetWidth = _ref.offsetWidth,
+      offsetWidth = _ref$offsetWidth === void 0 ? 0 : _ref$offsetWidth,
+      _ref$offsetHeight = _ref.offsetHeight,
+      offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight;
+
   return [offsetWidth, offsetHeight];
@@ -45,24 +71,29 @@ };
  */
+
+
 var getUnitValue = function getUnitValue(size, tabPositionTopOrBottom) {
   return size[tabPositionTopOrBottom ? 0 : 1];
 };
+
 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,
-    children = props.children,
-    onTabClick = props.onTabClick,
-    onTabScroll = props.onTabScroll;
+      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,
+      children = props.children,
+      onTabClick = props.onTabClick,
+      onTabScroll = props.onTabScroll;
   var containerRef = (0, React.useRef)();
@@ -74,50 +105,55 @@ var extraLeftRef = (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];
+  var innerAddButtonRef = (0, React.useRef)(); // const [getBtnRef, removeBtnRef] = useRefs<HTMLDivElement>();
+
   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, 0]),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    containerExcludeExtraSize = _useState2[0],
-    setContainerExcludeExtraSize = _useState2[1];
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      containerExcludeExtraSize = _useState2[0],
+      setContainerExcludeExtraSize = _useState2[1];
+
   var _useState3 = (0, React.useState)([0, 0]),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    tabContentSize = _useState4[0],
-    setTabContentSize = _useState4[1];
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      tabContentSize = _useState4[0],
+      setTabContentSize = _useState4[1];
+
   var _useState5 = (0, React.useState)([0, 0]),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    addSize = _useState6[0],
-    setAddSize = _useState6[1];
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      addSize = _useState6[0],
+      setAddSize = _useState6[1];
+
   var _useState7 = (0, React.useState)([0, 0]),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    operationSize = _useState8[0],
-    setOperationSize = _useState8[1];
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      operationSize = _useState8[0],
+      setOperationSize = _useState8[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, tabContentSize[0]);
-  // ========================== Unit =========================
+      _useRafState2 = (0, _slicedToArray2.default)(_useRafState, 2),
+      tabSizes = _useRafState2[0],
+      setTabSizes = _useRafState2[1];
+
+  var tabOffsets = (0, _useOffsets.default)(tabs, tabSizes, tabContentSize[0]); // ========================== Unit =========================
+
   var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
@@ -128,7 +164,8 @@ var tabContentSizeValue = getUnitValue(tabContentSize, tabPositionTopOrBottom);
   var needScroll = containerExcludeExtraSizeValue < tabContentSizeValue + addSizeValue;
-  var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue;
-  // ========================== Util =========================
+  var visibleTabContentValue = needScroll ? containerExcludeExtraSizeValue - operationSizeValue : containerExcludeExtraSizeValue - addSizeValue; // ========================== Util =========================
+
   var operationsHiddenClassName = "".concat(prefixCls, "-nav-operations-hidden");
   var transformMin = 0;
   var transformMax = 0;
+
   if (!tabPositionTopOrBottom) {
@@ -144,2 +181,3 @@ transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
   }
+
   function alignInRange(value) {
@@ -149,19 +187,26 @@ if (value < transformMin) {
     }
+
     if (value > transformMax) {
       return transformMax;
     }
+
     return value;
-  }
-  // ========================= Mobile ========================
+  } // ========================= Mobile ========================
+
+
   var touchMovingRef = (0, React.useRef)();
+
   var _useState9 = (0, React.useState)(),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    lockAnimation = _useState10[0],
-    setLockAnimation = _useState10[1];
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      lockAnimation = _useState10[0],
+      setLockAnimation = _useState10[1];
+
   function doLockAnimation() {
     setLockAnimation(Date.now());
   }
+
   function clearTouchMoving() {
     window.clearTimeout(touchMovingRef.current);
   }
+
   (0, _useTouchMove.default)(tabsWrapperRef, function (offsetX, offsetY) {
@@ -173,7 +218,9 @@ function doMove(setState, offset) {
       });
-    }
-    // Skip scroll if place is enough
+    } // Skip scroll if place is enough
+
+
     if (containerExcludeExtraSizeValue >= tabContentSizeValue) {
       return false;
     }
+
     if (tabPositionTopOrBottom) {
@@ -184,2 +231,3 @@ doMove(setTransformLeft, offsetX);
     }
+
     clearTouchMoving();
@@ -191,2 +239,3 @@ doLockAnimation();
     clearTouchMoving();
+
     if (lockAnimation) {
@@ -197,23 +246,20 @@ touchMovingRef.current = window.setTimeout(function () {
     }
+
     return clearTouchMoving;
-  }, [lockAnimation]);
-  // ===================== Visible Range =====================
+  }, [lockAnimation]); // ===================== Visible Range =====================
   // Render tab node & collect tab offset
-  var _useVisibleRange = (0, _useVisibleRange3.default)(tabOffsets,
-    // Container
-    visibleTabContentValue,
-    // Transform
-    tabPositionTopOrBottom ? transformLeft : transformTop,
-    // Tabs
-    tabContentSizeValue,
-    // Add
-    addSizeValue,
-    // Operation
-    operationSizeValue, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-      tabs: tabs
-    })),
-    _useVisibleRange2 = (0, _slicedToArray2.default)(_useVisibleRange, 2),
-    visibleStart = _useVisibleRange2[0],
-    visibleEnd = _useVisibleRange2[1];
-  // ========================= Scroll ========================
+
+  var _useVisibleRange = (0, _useVisibleRange3.default)(tabOffsets, // Container
+  visibleTabContentValue, // Transform
+  tabPositionTopOrBottom ? transformLeft : transformTop, // Tabs
+  tabContentSizeValue, // Add
+  addSizeValue, // Operation
+  operationSizeValue, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    tabs: tabs
+  })),
+      _useVisibleRange2 = (0, _slicedToArray2.default)(_useVisibleRange, 2),
+      visibleStart = _useVisibleRange2[0],
+      visibleEnd = _useVisibleRange2[1]; // ========================= Scroll ========================
+
+
   var scrollToTab = function scrollToTab() {
@@ -228,6 +274,7 @@ var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
     };
+
     if (tabPositionTopOrBottom) {
       // ============ Align with top & bottom ============
-      var newTransform = transformLeft;
-      // RTL
+      var newTransform = transformLeft; // RTL
+
       if (rtl) {
@@ -239,4 +286,3 @@ if (tabOffset.right < transformLeft) {
         }
-      }
-      // LTR
+      } // LTR
       else if (tabOffset.left < -transformLeft) {
@@ -247,2 +293,3 @@ newTransform = -tabOffset.left;
       }
+
       setTransformTop(0);
@@ -253,2 +300,3 @@ setTransformLeft(alignInRange(newTransform));
       var _newTransform = transformTop;
+
       if (tabOffset.top < -transformTop) {
@@ -259,8 +307,11 @@ _newTransform = -tabOffset.top;
       }
+
       setTransformLeft(0);
       setTransformTop(alignInRange(_newTransform));
     }
-  };
-  // ========================== Tab ==========================
+  }; // ========================== Tab ==========================
+
+
   var tabNodeStyle = {};
+
   if (tabPosition === 'top' || tabPosition === 'bottom') {
@@ -271,2 +322,3 @@ tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
   }
+
   var tabNodes = tabs.map(function (tab, i) {
@@ -279,3 +331,4 @@ var key = tab.key;
       tab: tab
-      /* first node should not have margin left */,
+      /* first node should not have margin left */
+      ,
       style: i === 0 ? undefined : tabNodeStyle,
@@ -287,24 +340,23 @@ closable: tab.closable,
       removeAriaLabel: locale === null || locale === void 0 ? void 0 : locale.removeAriaLabel,
-      ref: getBtnRef(key),
       onClick: function onClick(e) {
         onTabClick(key, e);
       },
-      onRemove: function onRemove() {
-        removeBtnRef(key);
-      },
       onFocus: function onFocus() {
         scrollToTab(key);
         doLockAnimation();
+
         if (!tabsWrapperRef.current) {
           return;
-        }
-        // Focus element will make scrollLeft change which we should reset back
+        } // Focus element will make scrollLeft change which we should reset back
+
+
         if (!rtl) {
           tabsWrapperRef.current.scrollLeft = 0;
         }
+
         tabsWrapperRef.current.scrollTop = 0;
       }
     });
-  });
-  // Update buttons records
+  }); // Update buttons records
+
   var updateTabSizes = function updateTabSizes() {
@@ -315,3 +367,4 @@ return setTabSizes(function () {
         var key = _ref2.key;
-        var btnNode = getBtnRef(key).current;
+        var btnNode = tabListRef.current.querySelector("[data-node-key=\"".concat(key, "\"]"));
+
         if (btnNode) {
@@ -329,2 +382,3 @@ newSizes.set(key, {
   };
+
   (0, React.useEffect)(function () {
@@ -344,24 +398,28 @@ updateTabSizes();
     var newOperationSize = getSize(operationsRef);
-    setOperationSize(newOperationSize);
-    // Which includes add button size
+    setOperationSize(newOperationSize); // Which includes add button size
+
     var tabContentFullSize = getSize(tabListRef);
     setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]);
-  });
-  // ======================== 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 _useState11 = (0, React.useState)(),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    inkStyle = _useState12[0],
-    setInkStyle = _useState12[1];
-  var activeTabOffset = tabOffsets.get(activeKey);
-  // Delay set ink style to avoid remove tab blink
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      inkStyle = _useState12[0],
+      setInkStyle = _useState12[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) {
@@ -374,2 +432,3 @@ if (tabPositionTopOrBottom) {
         }
+
         newInkStyle.width = activeTabOffset.width;
@@ -381,2 +440,3 @@ } else {
     }
+
     cleanInkBarRaf();
@@ -387,14 +447,12 @@ inkBarRafRef.current = (0, _raf.default)(function () {
     return cleanInkBarRaf;
-  }, [activeTabOffset, tabPositionTopOrBottom, rtl]);
-  // ========================= Effect ========================
+  }, [activeTabOffset, tabPositionTopOrBottom, rtl]); // ========================= Effect ========================
+
   (0, React.useEffect)(function () {
-    scrollToTab();
-    // eslint-disable-next-line
-  }, [activeKey, (0, _util.stringify)(activeTabOffset), (0, _util.stringify)(tabOffsets), tabPositionTopOrBottom]);
-  // Should recalculate when rtl changed
+    scrollToTab(); // eslint-disable-next-line
+  }, [activeKey, (0, _util.stringify)(activeTabOffset), (0, _util.stringify)(tabOffsets), tabPositionTopOrBottom]); // Should recalculate when rtl changed
+
   (0, React.useEffect)(function () {
-    onListHolderResize();
-    // eslint-disable-next-line
-  }, [rtl]);
-  // ========================= Render ========================
+    onListHolderResize(); // eslint-disable-next-line
+  }, [rtl]); // ========================= Render ========================
+
   var hasDropdown = !!hiddenTabs.length;
@@ -406,2 +464,3 @@ var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
   var pingBottom;
+
   if (tabPositionTopOrBottom) {
@@ -419,2 +478,3 @@ if (rtl) {
   }
+
   return /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
@@ -474,3 +534,5 @@ onResize: onListHolderResize
 }
+
 var _default = /*#__PURE__*/React.forwardRef(TabNavList);
+
 exports.default = _default;

lib/TabNavList/OperationNode.d.ts

 import * as React from 'react';
-import type { Tab, TabsLocale, EditableConfig } from '../interface';
+import type { EditableConfig, Tab, TabsLocale } from '../interface';
 export interface OperationNodeProps {
@@ -4,0 +4,0 @@ prefixCls: string;

lib/TabNavList/OperationNode.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,39 +11,53 @@ value: true
 exports.default = void 0;
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
+var _rcDropdown = _interopRequireDefault(require("rc-dropdown"));
+
+var _rcMenu = _interopRequireWildcard(require("rc-menu"));
+
 var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
-var _rcMenu = _interopRequireWildcard(require("rc-menu"));
-var _rcDropdown = _interopRequireDefault(require("rc-dropdown"));
+
+var React = _interopRequireWildcard(require("react"));
+
 var _AddButton = _interopRequireDefault(require("./AddButton"));
+
 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; }
+
 function OperationNode(_ref, ref) {
   var prefixCls = _ref.prefixCls,
-    id = _ref.id,
-    tabs = _ref.tabs,
-    locale = _ref.locale,
-    mobile = _ref.mobile,
-    _ref$moreIcon = _ref.moreIcon,
-    moreIcon = _ref$moreIcon === void 0 ? 'More' : _ref$moreIcon,
-    moreTransitionName = _ref.moreTransitionName,
-    style = _ref.style,
-    className = _ref.className,
-    editable = _ref.editable,
-    tabBarGutter = _ref.tabBarGutter,
-    rtl = _ref.rtl,
-    removeAriaLabel = _ref.removeAriaLabel,
-    onTabClick = _ref.onTabClick,
-    getPopupContainer = _ref.getPopupContainer,
-    popupClassName = _ref.popupClassName;
+      id = _ref.id,
+      tabs = _ref.tabs,
+      locale = _ref.locale,
+      mobile = _ref.mobile,
+      _ref$moreIcon = _ref.moreIcon,
+      moreIcon = _ref$moreIcon === void 0 ? 'More' : _ref$moreIcon,
+      moreTransitionName = _ref.moreTransitionName,
+      style = _ref.style,
+      className = _ref.className,
+      editable = _ref.editable,
+      tabBarGutter = _ref.tabBarGutter,
+      rtl = _ref.rtl,
+      removeAriaLabel = _ref.removeAriaLabel,
+      onTabClick = _ref.onTabClick,
+      getPopupContainer = _ref.getPopupContainer,
+      popupClassName = _ref.popupClassName;
+
   // ======================== Dropdown ========================
   var _useState = (0, React.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
   var _useState3 = (0, React.useState)(null),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    selectedKey = _useState4[0],
-    setSelectedKey = _useState4[1];
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      selectedKey = _useState4[0],
+      setSelectedKey = _useState4[1];
+
   var popupId = "".concat(id, "-more-popup");
@@ -51,2 +67,3 @@ var dropdownPrefix = "".concat(prefixCls, "-dropdown");
   var dropdownAriaLabel = locale === null || locale === void 0 ? void 0 : locale.dropdownAriaLabel;
+
   function onRemoveTab(event, key) {
@@ -60,6 +77,7 @@ event.preventDefault();
   }
+
   var menu = /*#__PURE__*/React.createElement(_rcMenu.default, {
     onClick: function onClick(_ref2) {
       var key = _ref2.key,
-        domEvent = _ref2.domEvent;
+          domEvent = _ref2.domEvent;
       onTabClick(key, domEvent);
@@ -94,2 +112,3 @@ setOpen(false);
   }));
+
   function selectOffset(offset) {
@@ -103,5 +122,7 @@ var enabledTabs = tabs.filter(function (tab) {
     var len = enabledTabs.length;
+
     for (var i = 0; i < len; i += 1) {
       selectedIndex = (selectedIndex + offset + len) % len;
       var tab = enabledTabs[selectedIndex];
+
       if (!tab.disabled) {
@@ -113,4 +134,6 @@ setSelectedKey(tab.key);
   }
+
   function onKeyDown(e) {
     var which = e.which;
+
     if (!open) {
@@ -121,4 +144,6 @@ if ([_KeyCode.default.DOWN, _KeyCode.default.SPACE, _KeyCode.default.ENTER].includes(which)) {
       }
+
       return;
     }
+
     switch (which) {
@@ -129,2 +154,3 @@ case _KeyCode.default.UP:
         break;
+
       case _KeyCode.default.DOWN:
@@ -134,5 +160,7 @@ selectOffset(1);
         break;
+
       case _KeyCode.default.ESC:
         setOpen(false);
         break;
+
       case _KeyCode.default.SPACE:
@@ -143,7 +171,9 @@ case _KeyCode.default.ENTER:
     }
-  }
-  // ========================= Effect =========================
+  } // ========================= Effect =========================
+
+
   (0, React.useEffect)(function () {
     // We use query element here to avoid React strict warning
     var ele = document.getElementById(selectedItemId);
+
     if (ele && ele.scrollIntoView) {
@@ -157,5 +187,6 @@ ele.scrollIntoView(false);
     }
-  }, [open]);
-  // ========================= Render =========================
+  }, [open]); // ========================= Render =========================
+
   var moreStyle = (0, _defineProperty2.default)({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);
+
   if (!tabs.length) {
@@ -165,2 +196,3 @@ moreStyle.visibility = 'hidden';
   }
+
   var overlayClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(dropdownPrefix, "-rtl"), rtl));
@@ -200,5 +232,5 @@ var moreNode = mobile ? null : /*#__PURE__*/React.createElement(_rcDropdown.default, {
 }
+
 var _default = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(OperationNode), function (_, next) {
-  return (
-    // https://github.com/ant-design/ant-design/issues/32544
+  return (// https://github.com/ant-design/ant-design/issues/32544
     // We'd better remove syntactic sugar in `rc-menu` since this has perf issue
@@ -208,2 +240,3 @@ next.tabMoving
 });
+
 exports.default = _default;

lib/TabNavList/TabNode.d.ts

 import * as React from 'react';
-import type { Tab, EditableConfig } from '../interface';
+import type { EditableConfig, Tab } from '../interface';
 export interface TabNodeProps {
@@ -15,7 +15,6 @@ id: string;
     removeIcon?: React.ReactNode;
-    onRemove: () => void;
     onFocus: React.FocusEventHandler;
     style?: React.CSSProperties;
 }
-declare const _default: React.ForwardRefExoticComponent<TabNodeProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare function TabNode({ prefixCls, id, active, tab: { key, label, disabled, closeIcon }, closable, renderWrapper, removeAriaLabel, editable, onClick, onFocus, style, }: TabNodeProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default TabNode;

lib/TabNavList/TabNode.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,31 +11,36 @@ value: true
 exports.default = void 0;
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var React = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+
+var React = _interopRequireWildcard(require("react"));
+
 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; }
-function TabNode(_ref, ref) {
+
+function TabNode(_ref) {
   var _classNames;
+
   var prefixCls = _ref.prefixCls,
-    id = _ref.id,
-    active = _ref.active,
-    _ref$tab = _ref.tab,
-    key = _ref$tab.key,
-    label = _ref$tab.label,
-    disabled = _ref$tab.disabled,
-    closeIcon = _ref$tab.closeIcon,
-    closable = _ref.closable,
-    renderWrapper = _ref.renderWrapper,
-    removeAriaLabel = _ref.removeAriaLabel,
-    editable = _ref.editable,
-    onClick = _ref.onClick,
-    onRemove = _ref.onRemove,
-    onFocus = _ref.onFocus,
-    style = _ref.style;
+      id = _ref.id,
+      active = _ref.active,
+      _ref$tab = _ref.tab,
+      key = _ref$tab.key,
+      label = _ref$tab.label,
+      disabled = _ref$tab.disabled,
+      closeIcon = _ref$tab.closeIcon,
+      closable = _ref.closable,
+      renderWrapper = _ref.renderWrapper,
+      removeAriaLabel = _ref.removeAriaLabel,
+      editable = _ref.editable,
+      onClick = _ref.onClick,
+      onFocus = _ref.onFocus,
+      style = _ref.style;
   var tabPrefix = "".concat(prefixCls, "-tab");
-  React.useEffect(function () {
-    return onRemove;
-  }, []);
   var removable = editable && closable !== false && !disabled;
+
   function onInternalClick(e) {
@@ -43,4 +50,6 @@ if (disabled) {
     }
+
     onClick(e);
   }
+
   function onRemoveTab(event) {
@@ -54,5 +63,7 @@ event.preventDefault();
   }
+
   var node = /*#__PURE__*/React.createElement("div", {
-    key: key,
-    ref: ref,
+    key: key // ref={ref}
+    ,
+    "data-node-key": key,
     className: (0, _classnames.default)(tabPrefix, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(tabPrefix, "-with-remove"), removable), (0, _defineProperty2.default)(_classNames, "".concat(tabPrefix, "-active"), active), (0, _defineProperty2.default)(_classNames, "".concat(tabPrefix, "-disabled"), disabled), _classNames)),
@@ -92,3 +103,4 @@ style: style,
 }
-var _default = /*#__PURE__*/React.forwardRef(TabNode);
+
+var _default = TabNode;
 exports.default = _default;

lib/TabNavList/Wrapper.d.ts

 import type { TabNavListProps } from '.';
-export type TabNavListWrapperProps = Required<Omit<TabNavListProps, 'children' | 'className'>> & TabNavListProps;
+export declare type TabNavListWrapperProps = Required<Omit<TabNavListProps, 'children' | 'className'>> & TabNavListProps;
 export default function TabNavListWrapper({ renderTabBar, ...restProps }: TabNavListWrapperProps): JSX.Element;

lib/TabNavList/Wrapper.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,19 +9,28 @@ value: true
 exports.default = TabNavListWrapper;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+
 var _ = _interopRequireDefault(require("."));
+
+var _react = require("react");
+
 var _TabContext = _interopRequireDefault(require("../TabContext"));
+
 var _TabPane = _interopRequireDefault(require("../TabPanelList/TabPane"));
+
 var _excluded = ["renderTabBar"],
-  _excluded2 = ["label", "key"];
-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; }
+    _excluded2 = ["label", "key"];
+
 // We have to create a TabNavList components.
 function TabNavListWrapper(_ref) {
   var renderTabBar = _ref.renderTabBar,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
   var _useContext = (0, _react.useContext)(_TabContext.default),
-    tabs = _useContext.tabs;
+      tabs = _useContext.tabs;
+
   if (renderTabBar) {
@@ -32,5 +41,5 @@ var tabNavBarProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
         var label = _ref2.label,
-          key = _ref2.key,
-          restTabProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-        return /*#__PURE__*/_react.default.createElement(_TabPane.default, (0, _extends2.default)({
+            key = _ref2.key,
+            restTabProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+        return /*#__PURE__*/React.createElement(_TabPane.default, (0, _extends2.default)({
           tab: label,
@@ -44,3 +53,4 @@ key: key,
   }
-  return /*#__PURE__*/_react.default.createElement(_.default, restProps);
+
+  return /*#__PURE__*/React.createElement(_.default, restProps);
 }

lib/TabPanelList/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,23 +11,38 @@ value: true
 exports.default = TabPanelList;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var React = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _rcMotion = _interopRequireDefault(require("rc-motion"));
+
 var _TabContext = _interopRequireDefault(require("../TabContext"));
+
 var _TabPane = _interopRequireDefault(require("./TabPane"));
+
 var _excluded = ["key", "forceRender", "style", "className"];
+
 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; }
+
 function TabPanelList(_ref) {
   var id = _ref.id,
-    activeKey = _ref.activeKey,
-    animated = _ref.animated,
-    tabPosition = _ref.tabPosition,
-    destroyInactiveTabPane = _ref.destroyInactiveTabPane;
+      activeKey = _ref.activeKey,
+      animated = _ref.animated,
+      tabPosition = _ref.tabPosition,
+      destroyInactiveTabPane = _ref.destroyInactiveTabPane;
+
   var _React$useContext = React.useContext(_TabContext.default),
-    prefixCls = _React$useContext.prefixCls,
-    tabs = _React$useContext.tabs;
+      prefixCls = _React$useContext.prefixCls,
+      tabs = _React$useContext.tabs;
+
   var tabPaneAnimated = animated.tabPane;
@@ -39,6 +56,6 @@ var tabPanePrefixCls = "".concat(prefixCls, "-tabpane");
     var key = _ref2.key,
-      forceRender = _ref2.forceRender,
-      paneStyle = _ref2.style,
-      paneClassName = _ref2.className,
-      restTabProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+        forceRender = _ref2.forceRender,
+        paneStyle = _ref2.style,
+        paneClassName = _ref2.className,
+        restTabProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
     var active = key === activeKey;
@@ -53,3 +70,3 @@ return /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({
       var motionStyle = _ref3.style,
-        motionClassName = _ref3.className;
+          motionClassName = _ref3.className;
       return /*#__PURE__*/React.createElement(_TabPane.default, (0, _extends2.default)({}, restTabProps, {
@@ -56,0 +73,0 @@ prefixCls: tabPanePrefixCls,

lib/TabPanelList/TabPane.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,14 +11,19 @@ value: true
 exports.default = void 0;
+
 var React = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 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 TabPane = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var prefixCls = _ref.prefixCls,
-    className = _ref.className,
-    style = _ref.style,
-    id = _ref.id,
-    active = _ref.active,
-    tabKey = _ref.tabKey,
-    children = _ref.children;
+      className = _ref.className,
+      style = _ref.style,
+      id = _ref.id,
+      active = _ref.active,
+      tabKey = _ref.tabKey,
+      children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
@@ -33,6 +40,8 @@ id: id && "".concat(id, "-panel-").concat(tabKey),
 });
+
 if (process.env.NODE_ENV !== 'production') {
   TabPane.displayName = 'TabPane';
 }
+
 var _default = TabPane;
 exports.default = _default;

lib/Tabs.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
@@ -9,19 +11,37 @@ value: true
 exports.default = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var React = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile"));
+
 var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+
 var _TabPanelList = _interopRequireDefault(require("./TabPanelList"));
+
 var _TabContext = _interopRequireDefault(require("./TabContext"));
+
 var _Wrapper = _interopRequireDefault(require("./TabNavList/Wrapper"));
+
 var _useAnimateConfig = _interopRequireDefault(require("./hooks/useAnimateConfig"));
+
 var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName"];
+
 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 || _typeof3(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; }
+
 /**
@@ -38,30 +58,32 @@ * Should added antd:
 var uuid = 0;
+
 function Tabs(_ref, ref) {
   var _classNames;
+
   var id = _ref.id,
-    _ref$prefixCls = _ref.prefixCls,
-    prefixCls = _ref$prefixCls === void 0 ? 'rc-tabs' : _ref$prefixCls,
-    className = _ref.className,
-    items = _ref.items,
-    direction = _ref.direction,
-    activeKey = _ref.activeKey,
-    defaultActiveKey = _ref.defaultActiveKey,
-    editable = _ref.editable,
-    animated = _ref.animated,
-    _ref$tabPosition = _ref.tabPosition,
-    tabPosition = _ref$tabPosition === void 0 ? 'top' : _ref$tabPosition,
-    tabBarGutter = _ref.tabBarGutter,
-    tabBarStyle = _ref.tabBarStyle,
-    tabBarExtraContent = _ref.tabBarExtraContent,
-    locale = _ref.locale,
-    moreIcon = _ref.moreIcon,
-    moreTransitionName = _ref.moreTransitionName,
-    destroyInactiveTabPane = _ref.destroyInactiveTabPane,
-    renderTabBar = _ref.renderTabBar,
-    onChange = _ref.onChange,
-    onTabClick = _ref.onTabClick,
-    onTabScroll = _ref.onTabScroll,
-    getPopupContainer = _ref.getPopupContainer,
-    popupClassName = _ref.popupClassName,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      _ref$prefixCls = _ref.prefixCls,
+      prefixCls = _ref$prefixCls === void 0 ? 'rc-tabs' : _ref$prefixCls,
+      className = _ref.className,
+      items = _ref.items,
+      direction = _ref.direction,
+      activeKey = _ref.activeKey,
+      defaultActiveKey = _ref.defaultActiveKey,
+      editable = _ref.editable,
+      animated = _ref.animated,
+      _ref$tabPosition = _ref.tabPosition,
+      tabPosition = _ref$tabPosition === void 0 ? 'top' : _ref$tabPosition,
+      tabBarGutter = _ref.tabBarGutter,
+      tabBarStyle = _ref.tabBarStyle,
+      tabBarExtraContent = _ref.tabBarExtraContent,
+      locale = _ref.locale,
+      moreIcon = _ref.moreIcon,
+      moreTransitionName = _ref.moreTransitionName,
+      destroyInactiveTabPane = _ref.destroyInactiveTabPane,
+      renderTabBar = _ref.renderTabBar,
+      onChange = _ref.onChange,
+      onTabClick = _ref.onTabClick,
+      onTabScroll = _ref.onTabScroll,
+      getPopupContainer = _ref.getPopupContainer,
+      popupClassName = _ref.popupClassName,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var tabs = React.useMemo(function () {
@@ -73,32 +95,36 @@ return (items || []).filter(function (item) {
   var rtl = direction === 'rtl';
-  var mergedAnimated = (0, _useAnimateConfig.default)(animated);
-  // ======================== Mobile ========================
+  var mergedAnimated = (0, _useAnimateConfig.default)(animated); // ======================== Mobile ========================
+
   var _useState = (0, React.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    mobile = _useState2[0],
-    setMobile = _useState2[1];
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      mobile = _useState2[0],
+      setMobile = _useState2[1];
+
   (0, React.useEffect)(function () {
     // Only update on the client side
     setMobile((0, _isMobile.default)());
-  }, []);
-  // ====================== Active Key ======================
+  }, []); // ====================== Active Key ======================
+
   var _useMergedState = (0, _useMergedState5.default)(function () {
-      var _tabs$;
-      return (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key;
-    }, {
-      value: activeKey,
-      defaultValue: defaultActiveKey
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    mergedActiveKey = _useMergedState2[0],
-    setMergedActiveKey = _useMergedState2[1];
+    var _tabs$;
+
+    return (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key;
+  }, {
+    value: activeKey,
+    defaultValue: defaultActiveKey
+  }),
+      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+      mergedActiveKey = _useMergedState2[0],
+      setMergedActiveKey = _useMergedState2[1];
+
   var _useState3 = (0, React.useState)(function () {
-      return tabs.findIndex(function (tab) {
-        return tab.key === mergedActiveKey;
-      });
-    }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    activeIndex = _useState4[0],
-    setActiveIndex = _useState4[1];
-  // Reset active key if not exist anymore
+    return tabs.findIndex(function (tab) {
+      return tab.key === mergedActiveKey;
+    });
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      activeIndex = _useState4[0],
+      setActiveIndex = _useState4[1]; // Reset active key if not exist anymore
+
+
   (0, React.useEffect)(function () {
@@ -108,19 +134,23 @@ var newActiveIndex = tabs.findIndex(function (tab) {
     });
+
     if (newActiveIndex === -1) {
       var _tabs$newActiveIndex;
+
       newActiveIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1));
       setMergedActiveKey((_tabs$newActiveIndex = tabs[newActiveIndex]) === null || _tabs$newActiveIndex === void 0 ? void 0 : _tabs$newActiveIndex.key);
     }
+
     setActiveIndex(newActiveIndex);
   }, [tabs.map(function (tab) {
     return tab.key;
-  }).join('_'), mergedActiveKey, activeIndex]);
-  // ===================== Accessibility ====================
+  }).join('_'), mergedActiveKey, activeIndex]); // ===================== Accessibility ====================
+
   var _useMergedState3 = (0, _useMergedState5.default)(null, {
-      value: id
-    }),
-    _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
-    mergedId = _useMergedState4[0],
-    setMergedId = _useMergedState4[1];
-  // Async generate id to avoid ssr mapping failed
+    value: id
+  }),
+      _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
+      mergedId = _useMergedState4[0],
+      setMergedId = _useMergedState4[1]; // Async generate id to avoid ssr mapping failed
+
+
   (0, React.useEffect)(function () {
@@ -131,4 +161,4 @@ if (!id) {
     }
-  }, []);
-  // ======================== Events ========================
+  }, []); // ======================== Events ========================
+
   function onInternalTabClick(key, e) {
@@ -138,7 +168,9 @@ onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(key, e);
     setMergedActiveKey(key);
+
     if (isActiveChanged) {
       onChange === null || onChange === void 0 ? void 0 : onChange(key);
     }
-  }
-  // ======================== Render ========================
+  } // ======================== Render ========================
+
+
   var sharedProps = {
@@ -184,7 +216,10 @@ id: mergedId,
 }
+
 var ForwardTabs = /*#__PURE__*/React.forwardRef(Tabs);
+
 if (process.env.NODE_ENV !== 'production') {
   ForwardTabs.displayName = 'Tabs';
 }
+
 var _default = ForwardTabs;
 exports.default = _default;

lib/util.js

@@ -7,2 +7,3 @@ "use strict";
 exports.stringify = stringify;
+
 /**
@@ -14,2 +15,3 @@ * We trade Map as deps which may change with same value but different ref object.
   var tgt;
+
   if (obj instanceof Map) {
@@ -23,3 +25,4 @@ tgt = {};
   }
+
   return JSON.stringify(tgt);
 }

package.json

 {
   "name": "rc-tabs",
-  "version": "12.4.2",
+  "version": "12.5.0",
   "description": "tabs ui component for react",
@@ -36,3 +36,3 @@ "engines": {
     "compile": "father build && npm run compile:style",
-    "test": "father test",
+    "test": "rc-test",
     "coverage": "father test --coverage",
@@ -46,7 +46,7 @@ "now-build": "npm run build",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^13.0.0",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
+    "@types/jest": "^25.2.3",
     "@types/keyv": "3.1.4",
-    "@types/jest": "^25.2.3",
     "@types/react": "^17.0.14",
@@ -57,9 +57,6 @@ "@types/react-dom": "^16.9.8",
     "cross-env": "^7.0.2",
-    "dumi": "^1.1.0",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
-    "enzyme-to-json": "^3.3.4",
+    "dumi": "^2.0.0",
     "eslint": "^7.0.0",
     "fastclick": "~1.0.6",
-    "father": "^2.29.2",
+    "father": "^4.0.0",
     "gh-pages": "^3.1.0",
@@ -70,12 +67,12 @@ "history": "^1.17.0",
     "np": "^7.5.0",
-    "preact": "^8.2.1",
     "preact-compat": "^3.16.0",
-    "react": "^16.0.0",
+    "rc-test": "^7.0.14",
+    "react": "^18.0.0",
     "react-dnd": "^10.0.0",
     "react-dnd-html5-backend": "^10.0.0",
-    "react-dom": "^16.0.0",
+    "react-dom": "^18.0.0",
     "react-sticky": "^6.0.3",
-    "react-test-renderer": "^16.0.0",
     "sortablejs": "^1.7.0",
-    "typescript": "^4.0.5"
+    "typescript": "^4.0.5",
+    "@rc-component/father-plugin": "^1.0.0"
   },
@@ -82,0 +79,0 @@ "dependencies": {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1288049

increased by727.35%

Dev dependency count

30

decreased by-9.09%

Number of package files

139

increased by65.48%

Lines of code

10100

increased by172.02%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes