Fixed typescript errors and tabs sorting.

__tests__/tabs.test.tsx

@@ -65,7 +65,7 @@ test('Renders shortened <Tabs /> properly', () => {
     );
   });
 
-  expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(3);
   expect(
     document.querySelectorAll('.reqore-tabs-list .reqore-popover-wrapper')
       .length

src/components/Breadcrumbs/index.tsx

@@ -92,7 +92,10 @@ const getBreadcrumbsLength = (
     }
 
     if (item.withTabs) {
-      return len + getTabsLength(item.withTabs.tabs);
+      return (
+        len +
+        getTabsLength(item.withTabs.tabs, 'width', item.withTabs.activeTab)
+      );
     }
 
     return len + 27 + item.label.length * 10 + 35;
@@ -105,9 +108,11 @@ const getTransformedItems = (
   if (!width) {
     return items;
   }
+
+  let stop = false;
   let newItems = [...items];
 
-  while (getBreadcrumbsLength(newItems) > width) {
+  while (getBreadcrumbsLength(newItems) > width && !stop) {
     if (isArray(newItems[1])) {
       newItems[1].push(newItems[2] as IReqoreBreadcrumbItem);
       newItems[2] = undefined;
@@ -117,6 +122,10 @@ const getTransformedItems = (
     }
 
     newItems = newItems.filter((i) => i);
+
+    if ((newItems[2] as IReqoreBreadcrumbItem).withTabs) {
+      stop = true;
+    }
   }
 
   return newItems;

src/stories/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -276,16 +276,15 @@ WithTabsDark.args = {
               label: 'Tab 4',
               id: 'tab4',
               icon: 'notifications',
-              active: true,
+              disabled: true,
             },
             {
-              label: 'Tab 5',
+              label: 'Really long tab name',
               id: 'tab5',
               icon: 'notifications',
-              disabled: true,
             },
           ],
-          activeTab: 'tab1',
+          activeTab: 'tab5',
           onTabChange: (tabId) => {
             alert(`Tab ${tabId} clicked`);
           },