rc-tabs - npm Package Compare versions

		@@ -10,3 +10,2 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
		var mergedAnimated;

		if (animated === false) {
		@@ -26,9 +25,8 @@ 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) {
		@@ -38,7 +36,5 @@ if (process.env.NODE_ENV !== 'production') {
		}

		mergedAnimated.tabPane = false;
		}

		return mergedAnimated;
		}

es/hooks/useOffsets.js

		@@ -12,25 +12,22 @@ 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);

		var entity = map.get(key) \|\| _objectSpread({}, data); // Right
		// Right
		entity.right = rightOffset - entity.left - entity.width;


		entity.right = rightOffset - entity.left - entity.width; // Update entity

		// Update entity
		map.set(key, entity);
		}

		return map;
		@@ -37,0 +34,0 @@ }, [tabs.map(function (tab) {

es/hooks/useSyncState.js

		@@ -5,19 +5,14 @@ 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,32 +7,30 @@ 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];
		_useState8 = _slicedToArray(_useState7, 2),
		lastOffset = _useState8[0],
		setLastOffset = _useState8[1];
		var motionRef = useRef();

		var motionRef = useRef(); // ========================= Events =========================
		// ========================= 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({
		@@ -44,3 +42,2 @@ x: screenX,
		}

		function onTouchMove(e) {
		@@ -50,4 +47,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({
		@@ -68,8 +65,8 @@ x: screenX,
		}

		function onTouchEnd() {
		if (!touchPosition) return;
		setTouchPosition(null);
		setLastOffset(null); // Swipe if needed
		setLastOffset(null);

		// Swipe if needed
		if (lastOffset) {
		@@ -79,4 +76,5 @@ 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;
		@@ -90,3 +88,2 @@ var currentX = distanceX;
		}

		currentX *= SPEED_OFF_MULTIPLE;
		@@ -97,15 +94,14 @@ 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) {
		@@ -120,9 +116,8 @@ mixed = lastWheelDirectionRef.current === 'x' ? deltaX : deltaY;
		}

		if (onOffset(-mixed, -mixed)) {
		e.preventDefault();
		}
		} // ========================= Effect =========================
		}


		// ========================= Effect =========================
		var touchEventsRef = useRef(null);
		@@ -139,15 +134,11 @@ 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, {
		@@ -158,4 +149,5 @@ 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, {
		@@ -162,0 +154,0 @@ passive: false

es/hooks/useVisibleRange.js

		@@ -11,8 +11,7 @@ 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)) {
		@@ -27,3 +26,2 @@ charUnit = 'width';
		}

		return useMemo(function () {
		@@ -33,9 +31,6 @@ 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) {
		@@ -46,8 +41,5 @@ 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) {
		@@ -58,3 +50,2 @@ startIndex = _i + 1;
		}

		return [startIndex, endIndex];
		@@ -61,0 +52,0 @@ }, [tabOffsets, visibleTabContentValue, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, transformSize, tabPosition, tabs.map(function (tab) {

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", {
		@@ -26,3 +23,2 @@ ref: ref,
		}

		export default /#__PURE__/React.forwardRef(AddButton);

es/TabNavList/ExtraContent.js

		@@ -5,9 +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)) {
		@@ -18,11 +18,8 @@ assertExtra = extra;
		}

		if (position === 'right') {
		content = assertExtra.right;
		}

		if (position === 'left') {
		content = assertExtra.left;
		}

		return content ? /#__PURE__/React.createElement("div", {
		@@ -33,7 +30,5 @@ className: "".concat(prefixCls, "-extra-content"),
		});

		if (process.env.NODE_ENV !== 'production') {
		ExtraContent.displayName = 'ExtraContent';
		}

		export default ExtraContent;

282

es/TabNavList/index.js

		@@ -8,2 +8,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
		import ResizeObserver from 'rc-resize-observer';
		import useEvent from "rc-util/es/hooks/useEvent";
		import raf from "rc-util/es/raf";
		@@ -14,5 +15,5 @@ import { useComposeRef } from "rc-util/es/ref";
		import useOffsets from "../hooks/useOffsets";
		import useRaf, { useRafState } from "../hooks/useRaf";
		import useSyncState from "../hooks/useSyncState";
		import useTouchMove from "../hooks/useTouchMove";
		import useUpdate, { useUpdateState } from "../hooks/useUpdate";
		import useVisibleRange from "../hooks/useVisibleRange";
		@@ -25,42 +26,36 @@ import TabContext from "../TabContext";
		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];
		};

		/**
		* Convert `SizeInfo` to unit value. Such as [123, 456] with `top` position get `123`
		*/


		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();
		@@ -72,55 +67,49 @@ var extraLeftRef = useRef();
		var operationsRef = useRef();
		var innerAddButtonRef = useRef(); // const [getBtnRef, removeBtnRef] = useRefs<HTMLDivElement>();
		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 _useUpdateState = useUpdateState(new Map()),
		_useUpdateState2 = _slicedToArray(_useUpdateState, 2),
		tabSizes = _useUpdateState2[0],
		setTabSizes = _useUpdateState2[1];
		var tabOffsets = useOffsets(tabs, tabSizes, tabContentSize[0]);

		var _useRafState = useRafState(new Map()),
		_useRafState2 = _slicedToArray(_useRafState, 2),
		tabSizes = _useRafState2[0],
		setTabSizes = _useRafState2[1];

		var tabOffsets = useOffsets(tabs, tabSizes, tabContentSize[0]); // ========================== Unit =========================

		// ========================== Unit =========================
		var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
		@@ -131,8 +120,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) {
		@@ -148,3 +137,2 @@ transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
		}

		function alignInRange(value) {
		@@ -154,26 +142,20 @@ 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) {
		@@ -185,9 +167,8 @@ function doMove(setState, offset) {
		});
		} // Skip scroll if place is enough
		}


		if (containerExcludeExtraSizeValue >= tabContentSizeValue) {
		// Skip scroll if place is enough
		if (!needScroll) {
		return false;
		}

		if (tabPositionTopOrBottom) {
		@@ -198,3 +179,2 @@ doMove(setTransformLeft, offsetX);
		}

		clearTouchMoving();
		@@ -206,3 +186,2 @@ doLockAnimation();
		clearTouchMoving();

		if (lockAnimation) {
		@@ -213,21 +192,26 @@ touchMovingRef.current = window.setTimeout(function () {
		}
		return clearTouchMoving;
		}, [lockAnimation]);

		return clearTouchMoving;
		}, [lockAnimation]); // ===================== Visible Range =====================
		// ===================== 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];

		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() {
		// ========================= Scroll ========================
		var scrollToTab = useEvent(function () {
		var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
		@@ -241,7 +225,7 @@ var tabOffset = tabOffsets.get(key) \|\| {
		};

		if (tabPositionTopOrBottom) {
		// ============ Align with top & bottom ============
		var newTransform = transformLeft; // RTL
		var newTransform = transformLeft;

		// RTL
		if (rtl) {
		@@ -253,3 +237,4 @@ if (tabOffset.right < transformLeft) {
		}
		} // LTR
		}
		// LTR
		else if (tabOffset.left < -transformLeft) {
		@@ -260,3 +245,2 @@ newTransform = -tabOffset.left;
		}

		setTransformTop(0);
		@@ -267,3 +251,2 @@ setTransformLeft(alignInRange(newTransform));
		var _newTransform = transformTop;

		if (tabOffset.top < -transformTop) {
		@@ -274,11 +257,9 @@ _newTransform = -tabOffset.top;
		}

		setTransformLeft(0);
		setTransformTop(alignInRange(_newTransform));
		}
		}; // ========================== Tab ==========================
		});


		// ========================== Tab ==========================
		var tabNodeStyle = {};

		if (tabPosition === 'top' \|\| tabPosition === 'bottom') {
		@@ -289,3 +270,2 @@ tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
		}

		var tabNodes = tabs.map(function (tab, i) {
		@@ -298,4 +278,3 @@ 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,
		@@ -313,17 +292,15 @@ closable: tab.closable,
		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() {
		@@ -334,6 +311,4 @@ return setTabSizes(function () {
		var _tabListRef$current;

		var key = _ref2.key;
		var btnNode = (_tabListRef$current = tabListRef.current) === null \|\| _tabListRef$current === void 0 ? void 0 : _tabListRef$current.querySelector("[data-node-key=\"".concat(key, "\"]"));

		if (btnNode) {
		@@ -351,3 +326,2 @@ newSizes.set(key, {
		};

		useEffect(function () {
		@@ -358,3 +332,3 @@ updateTabSizes();
		}).join('_')]);
		var onListHolderResize = useRaf(function () {
		var onListHolderResize = useUpdate(function () {
		// Update wrapper records
		@@ -368,30 +342,31 @@ var containerSize = getSize(containerRef);
		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]]); // Update buttons records
		setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]);

		// Update buttons records
		updateTabSizes();
		}); // ======================== 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];
		_useState12 = _slicedToArray(_useState11, 2),
		inkStyle = _useState12[0],
		setInkStyle = _useState12[1];
		var activeTabOffset = tabOffsets.get(activeKey);

		var activeTabOffset = tabOffsets.get(activeKey); // Delay set ink style to avoid remove tab blink

		// Delay set ink style to avoid remove tab blink
		var inkBarRafRef = useRef();

		function cleanInkBarRaf() {
		raf.cancel(inkBarRafRef.current);
		}

		useEffect(function () {
		var newInkStyle = {};

		if (activeTabOffset) {
		@@ -404,3 +379,2 @@ if (tabPositionTopOrBottom) {
		}

		newInkStyle.width = activeTabOffset.width;
		@@ -412,3 +386,2 @@ } else {
		}

		cleanInkBarRaf();
		@@ -419,12 +392,17 @@ 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, transformMin, transformMax, 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;
		@@ -436,16 +414,14 @@ var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
		var pingBottom;

		if (tabPositionTopOrBottom) {
		if (rtl) {
		pingRight = transformLeft > 0;
		pingLeft = transformLeft + containerExcludeExtraSizeValue < tabContentSizeValue;
		pingLeft = transformLeft !== transformMax;
		} else {
		pingLeft = transformLeft < 0;
		pingRight = -transformLeft + containerExcludeExtraSizeValue < tabContentSizeValue;
		pingRight = transformLeft !== transformMin;
		}
		} else {
		pingTop = transformTop < 0;
		pingBottom = -transformTop + containerExcludeExtraSizeValue < tabContentSizeValue;
		pingBottom = transformTop !== transformMin;
		}

		return /#__PURE__/React.createElement(ResizeObserver, {
		@@ -452,0 +428,0 @@ onResize: onListHolderResize

es/TabNavList/OperationNode.js

		@@ -10,33 +10,29 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
		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");
		@@ -46,3 +42,2 @@ var dropdownPrefix = "".concat(prefixCls, "-dropdown");
		var dropdownAriaLabel = locale === null \|\| locale === void 0 ? void 0 : locale.dropdownAriaLabel;

		function onRemoveTab(event, key) {
		@@ -56,7 +51,6 @@ 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);
		@@ -91,3 +85,2 @@ setOpen(false);
		}));

		function selectOffset(offset) {
		@@ -101,7 +94,5 @@ 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,6 +104,4 @@ setSelectedKey(tab.key);
		}

		function onKeyDown(e) {
		var which = e.which;

		if (!open) {
		@@ -123,6 +112,4 @@ if ([KeyCode.DOWN, KeyCode.SPACE, KeyCode.ENTER].includes(which)) {
		}

		return;
		}

		switch (which) {
		@@ -133,3 +120,2 @@ case KeyCode.UP:
		break;

		case KeyCode.DOWN:
		@@ -139,7 +125,5 @@ selectOffset(1);
		break;

		case KeyCode.ESC:
		setOpen(false);
		break;

		case KeyCode.SPACE:
		@@ -150,9 +134,8 @@ 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) {
		@@ -166,6 +149,6 @@ ele.scrollIntoView(false);
		}
		}, [open]); // ========================= Render =========================
		}, [open]);

		// ========================= Render =========================
		var moreStyle = _defineProperty({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);

		if (!tabs.length) {
		@@ -175,3 +158,2 @@ moreStyle.visibility = 'hidden';
		}

		var overlayClassName = classNames(_defineProperty({}, "".concat(dropdownPrefix, "-rtl"), rtl));
		@@ -211,5 +193,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
		@@ -216,0 +198,0 @@ next.tabMoving

es/TabNavList/TabNode.js

		@@ -5,24 +5,21 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
		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,
		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");
		var removable = editable && closable !== false && !disabled;

		function onInternalClick(e) {
		@@ -32,6 +29,4 @@ if (disabled) {
		}

		onClick(e);
		}

		function onRemoveTab(event) {
		@@ -45,5 +40,5 @@ event.preventDefault();
		}

		var node = /#__PURE__/React.createElement("div", {
		key: key // ref={ref}
		key: key
		// ref={ref}
		,
		@@ -85,3 +80,2 @@ "data-node-key": key,
		}

		export default TabNode;

es/TabNavList/Wrapper.js

		@@ -5,4 +5,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
		var _excluded = ["renderTabBar"],
		_excluded2 = ["label", "key"];
		_excluded2 = ["label", "key"];
		// zombieJ: To compatible with `renderTabBar` usage.

		import * as React from 'react';
		@@ -15,7 +16,5 @@ import TabNavList from '.';
		var renderTabBar = _ref.renderTabBar,
		restProps = _objectWithoutProperties(_ref, _excluded);

		restProps = _objectWithoutProperties(_ref, _excluded);
		var _React$useContext = React.useContext(TabContext),
		tabs = _React$useContext.tabs;

		tabs = _React$useContext.tabs;
		if (renderTabBar) {
		@@ -26,5 +25,4 @@ 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({
		@@ -37,7 +35,5 @@ tab: label,
		});

		return renderTabBar(tabNavBarProps, TabNavList);
		}

		return /#__PURE__/React.createElement(TabNavList, restProps);
		}

es/TabPanelList/index.js

		@@ -13,11 +13,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
		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;
		@@ -31,7 +29,6 @@ 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;
		@@ -46,3 +43,3 @@ return /#__PURE__/React.createElement(CSSMotion, _extends({
		var motionStyle = _ref3.style,
		motionClassName = _ref3.className;
		motionClassName = _ref3.className;
		return /#__PURE__/React.createElement(TabPane, _extends({}, restTabProps, {
		@@ -49,0 +46,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,7 +23,5 @@ id: id && "".concat(id, "-panel-").concat(tabKey),
		});

		if (process.env.NODE_ENV !== 'production') {
		TabPane.displayName = 'TabPane';
		}

		export default TabPane;

136

es/Tabs.js

		@@ -18,2 +18,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
		import useAnimateConfig from "./hooks/useAnimateConfig";

		/**
		@@ -28,36 +29,33 @@ * 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 () {
		@@ -69,36 +67,35 @@ 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 () {
		@@ -108,23 +105,21 @@ 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 () {
		@@ -135,4 +130,5 @@ if (!id) {
		}
		}, []); // ======================== Events ========================
		}, []);

		// ======================== Events ========================
		function onInternalTabClick(key, e) {
		@@ -142,9 +138,8 @@ 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 = {
		@@ -159,3 +154,2 @@ id: mergedId,
		var tabNavBar;

		var tabNavBarProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
		@@ -175,3 +169,2 @@ editable: editable,
		});

		return /#__PURE__/React.createElement(TabContext.Provider, {
		@@ -194,9 +187,6 @@ value: {
		}

		var ForwardTabs = /#__PURE__/React.forwardRef(Tabs);

		if (process.env.NODE_ENV !== 'production') {
		ForwardTabs.displayName = 'Tabs';
		}

		export default ForwardTabs;

es/util.js

		@@ -7,3 +7,2 @@ /**
		var tgt;

		if (obj instanceof Map) {
		@@ -17,4 +16,3 @@ tgt = {};
		}

		return JSON.stringify(tgt);
		}

lib/hooks/useAnimateConfig.js

		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		@@ -9,9 +8,5 @@ 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() {
		@@ -23,3 +18,2 @@ var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
		var mergedAnimated;

		if (animated === false) {
		@@ -39,9 +33,8 @@ 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) {
		@@ -51,7 +44,5 @@ 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", {
		@@ -9,7 +8,4 @@ value: true
		exports.default = useOffsets;

		var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

		var _react = require("react");

		var DEFAULT_SIZE = {
		@@ -21,28 +17,25 @@ 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);

		var entity = map.get(key) \|\| (0, _objectSpread2.default)({}, data); // Right
		// Right
		entity.right = rightOffset - entity.left - entity.width;

		entity.right = rightOffset - entity.left - entity.width; // Update entity

		// Update entity
		map.set(key, entity);
		}

		return map;
		@@ -49,0 +42,0 @@ }, [tabs.map(function (tab) {

lib/hooks/useSyncState.js

		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		var _typeof = require("@babel/runtime/helpers/typeof");

		Object.defineProperty(exports, "__esModule", {
		@@ -11,30 +9,20 @@ 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", {
		@@ -11,44 +9,37 @@ 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];
		_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
		lastOffset = _useState8[0],
		setLastOffset = _useState8[1];
		var motionRef = (0, React.useRef)();

		var motionRef = (0, React.useRef)(); // ========================= Events =========================
		// ========================= 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({
		@@ -60,3 +51,2 @@ x: screenX,
		}

		function onTouchMove(e) {
		@@ -66,4 +56,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({
		@@ -84,8 +74,8 @@ x: screenX,
		}

		function onTouchEnd() {
		if (!touchPosition) return;
		setTouchPosition(null);
		setLastOffset(null); // Swipe if needed
		setLastOffset(null);

		// Swipe if needed
		if (lastOffset) {
		@@ -95,4 +85,5 @@ 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;
		@@ -106,3 +97,2 @@ var currentX = distanceX;
		}

		currentX *= SPEED_OFF_MULTIPLE;
		@@ -113,15 +103,14 @@ 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) {
		@@ -136,9 +125,8 @@ mixed = lastWheelDirectionRef.current === 'x' ? deltaX : deltaY;
		}

		if (onOffset(-mixed, -mixed)) {
		e.preventDefault();
		}
		} // ========================= Effect =========================
		}


		// ========================= Effect =========================
		var touchEventsRef = (0, React.useRef)(null);
		@@ -155,15 +143,11 @@ 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, {
		@@ -174,4 +158,5 @@ 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, {
		@@ -178,0 +163,0 @@ passive: false

lib/hooks/useVisibleRange.js

		@@ -7,5 +7,3 @@ "use strict";
		exports.default = useVisibleRange;

		var _react = require("react");

		var DEFAULT_SIZE = {
		@@ -18,11 +16,9 @@ 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)) {
		@@ -37,3 +33,2 @@ charUnit = 'width';
		}

		return (0, _react.useMemo)(function () {
		@@ -43,9 +38,6 @@ 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) {
		@@ -56,8 +48,5 @@ 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) {
		@@ -68,3 +57,2 @@ startIndex = _i + 1;
		}

		return [startIndex, endIndex];
		@@ -71,0 +59,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", {
		@@ -9,6 +8,4 @@ value: true
		exports.default = void 0;

		var _Tabs = _interopRequireDefault(require("./Tabs"));

		var _default = _Tabs.default;
		exports.default = _default;

lib/TabContext.js

		@@ -7,7 +7,4 @@ "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", {
		@@ -9,19 +8,13 @@ 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", {
		@@ -40,5 +33,3 @@ 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", {
		@@ -11,20 +9,15 @@ 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)) {
		@@ -35,11 +28,8 @@ assertExtra = extra;
		}

		if (position === 'right') {
		content = assertExtra.right;
		}

		if (position === 'left') {
		content = assertExtra.left;
		}

		return content ? /#__PURE__/React.createElement("div", {
		@@ -50,8 +40,6 @@ className: "".concat(prefixCls, "-extra-content"),
		});

		if (process.env.NODE_ENV !== 'production') {
		ExtraContent.displayName = 'ExtraContent';
		}

		var _default = ExtraContent;
		exports.default = _default;

309

lib/TabNavList/index.js

		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		var _typeof = require("@babel/runtime/helpers/typeof");

		Object.defineProperty(exports, "__esModule", {
		@@ -11,88 +9,60 @@ 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 _classnames = _interopRequireDefault(require("classnames"));

		var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));

		var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
		var _raf = _interopRequireDefault(require("rc-util/lib/raf"));

		var _ref3 = require("rc-util/lib/ref");

		var React = _interopRequireWildcard(require("react"));

		var _useOffsets = _interopRequireDefault(require("../hooks/useOffsets"));

		var _useRaf = _interopRequireWildcard(require("../hooks/useRaf"));

		var _useSyncState5 = _interopRequireDefault(require("../hooks/useSyncState"));

		var _useTouchMove = _interopRequireDefault(require("../hooks/useTouchMove"));

		var _useUpdate = _interopRequireWildcard(require("../hooks/useUpdate"));
		var _useVisibleRange3 = _interopRequireDefault(require("../hooks/useVisibleRange"));

		var _TabContext = _interopRequireDefault(require("../TabContext"));

		var _util = require("../util");

		var _AddButton = _interopRequireDefault(require("./AddButton"));

		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];
		};

		/**
		* Convert `SizeInfo` to unit value. Such as [123, 456] with `top` position get `123`
		*/


		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)();
		@@ -104,55 +74,49 @@ var extraLeftRef = (0, React.useRef)();
		var operationsRef = (0, React.useRef)();
		var innerAddButtonRef = (0, React.useRef)(); // const [getBtnRef, removeBtnRef] = useRefs<HTMLDivElement>();
		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 _useUpdateState = (0, _useUpdate.useUpdateState)(new Map()),
		_useUpdateState2 = (0, _slicedToArray2.default)(_useUpdateState, 2),
		tabSizes = _useUpdateState2[0],
		setTabSizes = _useUpdateState2[1];
		var tabOffsets = (0, _useOffsets.default)(tabs, tabSizes, tabContentSize[0]);

		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 =========================

		// ========================== Unit =========================
		var containerExcludeExtraSizeValue = getUnitValue(containerExcludeExtraSize, tabPositionTopOrBottom);
		@@ -163,8 +127,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) {
		@@ -180,3 +144,2 @@ transformMin = Math.min(0, visibleTabContentValue - tabContentSizeValue);
		}

		function alignInRange(value) {
		@@ -186,26 +149,20 @@ 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) {
		@@ -217,9 +174,8 @@ function doMove(setState, offset) {
		});
		} // Skip scroll if place is enough
		}


		if (containerExcludeExtraSizeValue >= tabContentSizeValue) {
		// Skip scroll if place is enough
		if (!needScroll) {
		return false;
		}

		if (tabPositionTopOrBottom) {
		@@ -230,3 +186,2 @@ doMove(setTransformLeft, offsetX);
		}

		clearTouchMoving();
		@@ -238,3 +193,2 @@ doLockAnimation();
		clearTouchMoving();

		if (lockAnimation) {
		@@ -245,21 +199,26 @@ touchMovingRef.current = window.setTimeout(function () {
		}
		return clearTouchMoving;
		}, [lockAnimation]);

		return clearTouchMoving;
		}, [lockAnimation]); // ===================== Visible Range =====================
		// ===================== 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];

		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() {
		// ========================= Scroll ========================
		var scrollToTab = (0, _useEvent.default)(function () {
		var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeKey;
		@@ -273,7 +232,7 @@ var tabOffset = tabOffsets.get(key) \|\| {
		};

		if (tabPositionTopOrBottom) {
		// ============ Align with top & bottom ============
		var newTransform = transformLeft; // RTL
		var newTransform = transformLeft;

		// RTL
		if (rtl) {
		@@ -285,3 +244,4 @@ if (tabOffset.right < transformLeft) {
		}
		} // LTR
		}
		// LTR
		else if (tabOffset.left < -transformLeft) {
		@@ -292,3 +252,2 @@ newTransform = -tabOffset.left;
		}

		setTransformTop(0);
		@@ -299,3 +258,2 @@ setTransformLeft(alignInRange(newTransform));
		var _newTransform = transformTop;

		if (tabOffset.top < -transformTop) {
		@@ -306,11 +264,9 @@ _newTransform = -tabOffset.top;
		}

		setTransformLeft(0);
		setTransformTop(alignInRange(_newTransform));
		}
		}; // ========================== Tab ==========================
		});


		// ========================== Tab ==========================
		var tabNodeStyle = {};

		if (tabPosition === 'top' \|\| tabPosition === 'bottom') {
		@@ -321,3 +277,2 @@ tabNodeStyle[rtl ? 'marginRight' : 'marginLeft'] = tabBarGutter;
		}

		var tabNodes = tabs.map(function (tab, i) {
		@@ -330,4 +285,3 @@ 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,
		@@ -345,17 +299,15 @@ closable: tab.closable,
		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() {
		@@ -366,6 +318,4 @@ return setTabSizes(function () {
		var _tabListRef$current;

		var key = _ref2.key;
		var btnNode = (_tabListRef$current = tabListRef.current) === null \|\| _tabListRef$current === void 0 ? void 0 : _tabListRef$current.querySelector("[data-node-key=\"".concat(key, "\"]"));

		if (btnNode) {
		@@ -383,3 +333,2 @@ newSizes.set(key, {
		};

		(0, React.useEffect)(function () {
		@@ -390,3 +339,3 @@ updateTabSizes();
		}).join('_')]);
		var onListHolderResize = (0, _useRaf.default)(function () {
		var onListHolderResize = (0, _useUpdate.default)(function () {
		// Update wrapper records
		@@ -400,30 +349,31 @@ var containerSize = getSize(containerRef);
		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]]); // Update buttons records
		setTabContentSize([tabContentFullSize[0] - newAddSize[0], tabContentFullSize[1] - newAddSize[1]]);

		// Update buttons records
		updateTabSizes();
		}); // ======================== 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];
		_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
		inkStyle = _useState12[0],
		setInkStyle = _useState12[1];
		var activeTabOffset = tabOffsets.get(activeKey);

		var activeTabOffset = tabOffsets.get(activeKey); // Delay set ink style to avoid remove tab blink

		// 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) {
		@@ -436,3 +386,2 @@ if (tabPositionTopOrBottom) {
		}

		newInkStyle.width = activeTabOffset.width;
		@@ -444,3 +393,2 @@ } else {
		}

		cleanInkBarRaf();
		@@ -451,12 +399,17 @@ 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, transformMin, transformMax, (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;
		@@ -468,16 +421,14 @@ var wrapPrefix = "".concat(prefixCls, "-nav-wrap");
		var pingBottom;

		if (tabPositionTopOrBottom) {
		if (rtl) {
		pingRight = transformLeft > 0;
		pingLeft = transformLeft + containerExcludeExtraSizeValue < tabContentSizeValue;
		pingLeft = transformLeft !== transformMax;
		} else {
		pingLeft = transformLeft < 0;
		pingRight = -transformLeft + containerExcludeExtraSizeValue < tabContentSizeValue;
		pingRight = transformLeft !== transformMin;
		}
		} else {
		pingTop = transformTop < 0;
		pingBottom = -transformTop + containerExcludeExtraSizeValue < tabContentSizeValue;
		pingBottom = transformTop !== transformMin;
		}

		return /#__PURE__/React.createElement(_rcResizeObserver.default, {
		@@ -537,5 +488,3 @@ onResize: onListHolderResize
		}

		var _default = /#__PURE__/React.forwardRef(TabNavList);

		exports.default = _default;

lib/TabNavList/OperationNode.js

		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		var _typeof = require("@babel/runtime/helpers/typeof");

		Object.defineProperty(exports, "__esModule", {
		@@ -11,53 +9,39 @@ value: true
		exports.default = void 0;

		var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

		var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

		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 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");
		@@ -67,3 +51,2 @@ var dropdownPrefix = "".concat(prefixCls, "-dropdown");
		var dropdownAriaLabel = locale === null \|\| locale === void 0 ? void 0 : locale.dropdownAriaLabel;

		function onRemoveTab(event, key) {
		@@ -77,7 +60,6 @@ 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);
		@@ -112,3 +94,2 @@ setOpen(false);
		}));

		function selectOffset(offset) {
		@@ -122,7 +103,5 @@ 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) {
		@@ -134,6 +113,4 @@ setSelectedKey(tab.key);
		}

		function onKeyDown(e) {
		var which = e.which;

		if (!open) {
		@@ -144,6 +121,4 @@ if ([_KeyCode.default.DOWN, _KeyCode.default.SPACE, _KeyCode.default.ENTER].includes(which)) {
		}

		return;
		}

		switch (which) {
		@@ -154,3 +129,2 @@ case _KeyCode.default.UP:
		break;

		case _KeyCode.default.DOWN:
		@@ -160,7 +134,5 @@ selectOffset(1);
		break;

		case _KeyCode.default.ESC:
		setOpen(false);
		break;

		case _KeyCode.default.SPACE:
		@@ -171,9 +143,8 @@ 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) {
		@@ -187,6 +158,6 @@ ele.scrollIntoView(false);
		}
		}, [open]); // ========================= Render =========================
		}, [open]);

		// ========================= Render =========================
		var moreStyle = (0, _defineProperty2.default)({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);

		if (!tabs.length) {
		@@ -196,3 +167,2 @@ moreStyle.visibility = 'hidden';
		}

		var overlayClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(dropdownPrefix, "-rtl"), rtl));
		@@ -232,5 +202,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
		@@ -240,3 +210,2 @@ next.tabMoving
		});

		exports.default = _default;

lib/TabNavList/TabNode.js

		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		var _typeof = require("@babel/runtime/helpers/typeof");

		Object.defineProperty(exports, "__esModule", {
		@@ -11,36 +9,27 @@ value: true
		exports.default = void 0;

		var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

		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) {
		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,
		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");
		var removable = editable && closable !== false && !disabled;

		function onInternalClick(e) {
		@@ -50,6 +39,4 @@ if (disabled) {
		}

		onClick(e);
		}

		function onRemoveTab(event) {
		@@ -63,5 +50,5 @@ event.preventDefault();
		}

		var node = /#__PURE__/React.createElement("div", {
		key: key // ref={ref}
		key: key
		// ref={ref}
		,
		@@ -103,4 +90,3 @@ "data-node-key": key,
		}

		var _default = TabNode;
		exports.default = _default;

lib/TabNavList/Wrapper.js

		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		var _typeof = require("@babel/runtime/helpers/typeof");

		Object.defineProperty(exports, "__esModule", {
		@@ -11,32 +9,19 @@ 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 _TabContext = _interopRequireDefault(require("../TabContext"));

		var _TabPane = _interopRequireDefault(require("../TabPanelList/TabPane"));

		var _excluded = ["renderTabBar"],
		_excluded2 = ["label", "key"];

		_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; }

		// 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 _React$useContext = React.useContext(_TabContext.default),
		tabs = _React$useContext.tabs;

		tabs = _React$useContext.tabs;
		if (renderTabBar) {
		@@ -47,4 +32,4 @@ var tabNavBarProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
		var label = _ref2.label,
		key = _ref2.key,
		restTabProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
		key = _ref2.key,
		restTabProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
		return /#__PURE__/React.createElement(_TabPane.default, (0, _extends2.default)({
		@@ -59,4 +44,3 @@ tab: label,
		}

		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", {
		@@ -11,38 +9,23 @@ 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;
		@@ -56,6 +39,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;
		@@ -70,3 +53,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, {
		@@ -73,0 +56,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", {
		@@ -11,19 +9,14 @@ 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", {
		@@ -40,8 +33,6 @@ id: id && "".concat(id, "-panel-").concat(tabKey),
		});

		if (process.env.NODE_ENV !== 'production') {
		TabPane.displayName = 'TabPane';
		}

		var _default = TabPane;
		exports.default = _default;

151

lib/Tabs.js

		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		var _typeof3 = require("@babel/runtime/helpers/typeof");

		Object.defineProperty(exports, "__esModule", {
		@@ -11,37 +9,19 @@ 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; }

		/**
		@@ -56,34 +36,33 @@ * 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 = (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 () {
		@@ -95,36 +74,35 @@ 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 () {
		@@ -134,23 +112,21 @@ 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 () {
		@@ -161,4 +137,5 @@ if (!id) {
		}
		}, []); // ======================== Events ========================
		}, []);

		// ======================== Events ========================
		function onInternalTabClick(key, e) {
		@@ -168,9 +145,8 @@ 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 = {
		@@ -216,10 +192,7 @@ 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,3 +7,2 @@ "use strict";
		exports.stringify = stringify;

		/**
		@@ -15,3 +14,2 @@ * We trade Map as deps which may change with same value but different ref object.
		var tgt;

		if (obj instanceof Map) {
		@@ -25,4 +23,3 @@ tgt = {};
		}

		return JSON.stringify(tgt);
		}

package.json

		{
		"name": "rc-tabs",
		"version": "12.5.6",
		"version": "12.5.7",
		"description": "tabs ui component for react",
		@@ -5,0 +5,0 @@ "engines": {

es/hooks/useRaf.d.ts

es/hooks/useRaf.js

lib/hooks/useRaf.d.ts

lib/hooks/useRaf.js

Improved metrics

Worsened metrics