fix(AdaptiveTabs): fix calc of tabs width

src/components/AdaptiveTabs/AdaptiveTabs.tsx

@@ -21,7 +21,7 @@
 const b = block('adaptive-tabs');
 const TAB_CLASS_NAME = b('tab');
 const getSortObjectKeysByValuesFunc =
     (objectToSort: Record<string, any>) => (a: string, b: string) => {
         if (objectToSort[a] > objectToSort[b]) {
             return 1;
         }
@@ -185,7 +185,7 @@
     private tabsRootNode = React.createRef<HTMLDivElement>();
     private tabsListNode = React.createRef<HTMLDivElement>();
 
     get activeTab() {
         const {activeTab, items, allowNotSelected} = this.props;
         if (activeTab) {
             return activeTab;
@@ -213,7 +213,7 @@
 
         this.breakpoints = Object.keys(props.breakpointsConfig)
             .map(Number)
             .sort((a, b) => a - b);
 
         /* save the object, where the keys are the "name" of the current container width, the values are the maximum width of the tab for
         the corresponding container width (in percent of the container width) */
@@ -227,7 +227,7 @@
                     breakpointName = LARGE_CONTAINER_WIDTH_NAME;
                 }
 
                 accum[breakpointName] = props.breakpointsConfig[currentBreakpointWidth] || 100;
 
                 return accum;
             },
@@ -246,9 +246,9 @@
         this.setState({currentContainerWidthName: this.getCurrentContainerWidthName()});
 
         if (this.tabsRootNode.current.clientWidth > this.breakpoints[0]) {
             if ((document as any).fonts) {
                 (document as any).fonts.ready.then(this.initialCollectDimensions);
             } else if ((document as any).readyState === READY_STATE_COMPLETE) {
                 setTimeout(this.initialCollectDimensions, 0);
             } else {
                 window.addEventListener('load', this.initialCollectDimensions);
@@ -389,6 +389,7 @@
     /*
         Recalculating the Layout - Phases 1 and 2
      */
+    // eslint-disable-next-line complexity
     recalculateTabs = () => {
         if (!this.tabsRootNode.current) {
             return;
@@ -436,7 +437,7 @@
          of the switcher width will not exceed the width of the container */
         for (let i = 0; i < this.tabsWidth.length; i++) {
             renderedTabsSumWidth = renderedTabsSumWidth + this.tabsWidth[i];
-            const switcherWidthCorrection = i >= items.length - 1 ? 0 : this.switcherWidth;
+            const switcherWidthCorrection = i === items.length - 1 ? 0 : this.switcherWidth;
             const isOverflown = renderedTabsSumWidth + switcherWidthCorrection > tabsRootNodeWidth;
 
             if (firstHiddenTabIndexForSequentialCase === null && isOverflown) {
@@ -456,6 +457,10 @@
             }
         }
 
+        if (tabChosenFromSelectIndex > -1) {
+            maxHiddenTabWidth = this.tabsWidth[tabChosenFromSelectIndex];
+        }
+
         if (maxHiddenTabWidth && typeof firstHiddenTabIndexForSequentialCase === 'number') {
             let rightSpace = maxHiddenTabWidth - emptySpace;
 
@@ -465,10 +470,7 @@
             firstHiddenTabIndex = firstHiddenTabIndexForSequentialCase;
 
             for (let j = firstHiddenTabIndexForSequentialCase - 1; j >= 0; j--) {
-                // We need to use maxHiddenTabWidth instead of tabWidth[i],
-                // beacause the tab, that we are going to render at index j
-                // may be active tab, which can be wider than real tab at index j
-                rightSpace = rightSpace - maxHiddenTabWidth;
+                rightSpace = rightSpace - this.tabsWidth[j];
 
                 if (rightSpace < 0) {
                     firstHiddenTabIndex = j + (tabChosenFromSelectIndex > j ? 0 : 1);
@@ -507,6 +509,10 @@
 
         this.setState({firstHiddenTabIndex});
 
+        if (firstHiddenTabIndex > tabChosenFromSelectIndex) {
+            this.setState({tabChosenFromSelectId: null});
+        }
+
         /*phase 1 is complete, call the method of adjusting the width of the overflowing tabs to fill the entire width of the container*/
         this.setUpOverflownTabs(firstHiddenTabIndex, activeTabIndex, tabsRootNodeWidth);
 
@@ -845,7 +851,7 @@
 
         const maxWidth =
             dimensionsWereCollected && typeof this.overflownTabsCurrentWidth[tabIndex] === 'number'
-                ? this.overflownTabsCurrentWidth[tabIndex] - this.tabItemPaddingRight
+                ? this.overflownTabsCurrentWidth[tabIndex] + this.tabItemPaddingRight
                 : `${this.tabMaxWidthInPercentsForScreenSize[currentContainerWidthName!]}%`;
 
         const tabNode = <Tab {...item} active={item.id === activeTabID} />;