@apify/ui-library 0.68.1-feattabs-4feb6d.94 → 0.68.1-feattabs-4feb6d.103

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.68.1-feattabs-4feb6d.94+0bf4ae961f9",
+    "version": "0.68.1-feattabs-4feb6d.103+115a161713b",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -28,6 +28,7 @@
     "dependencies": {
         "@apify/ui-icons": "^0.10.0",
         "@floating-ui/react": "^0.26.2",
+        "@juggle/resize-observer": "^3.4.0",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
         "dayjs": "1.11.9",
@@ -66,5 +67,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "0bf4ae961f9aee815b791932332847b9864bffd7"
+    "gitHead": "115a161713b7c2cc8a7dda7417f9f46836b93d4d"
 }

package/src/components/tabs/tab.tsx

@@ -147,6 +147,7 @@ const TabWrapper = styled(Link)<TabWrapperProps>`
     align-items: center;
     justify-content: center;
     gap: ${theme.space.space4};
+    flex-shrink: 0;
     cursor: pointer;
     position: relative;
     transition: background-color ${theme.transition.fastEaseOut}, border-color ${theme.transition.fastEaseOut}, color ${theme.transition.fastEaseOut};
@@ -166,6 +167,12 @@ const TabWrapper = styled(Link)<TabWrapperProps>`
         transition: color ${theme.transition.fastEaseOut};
     }
 
+    .Tab-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     .Tab-badge {
         flex-shrink: 0;
         text-transform: uppercase;
@@ -187,7 +194,7 @@ export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, c
             $variant={variant}
         >
             {Icon && <Icon size="16" className="Tab-icon" />}
-            <Text size={tabVariantTextSize[variant]} weight="bold" as="div">{title}</Text>
+            <Text size={tabVariantTextSize[variant]} className="Tab-title" weight="bold" as="div">{title}</Text>
             {chip && <Badge size={tabVariantBadgeSize[variant]} variant={active ? 'primary_black' : 'neutral_subtle'} className="Tab-badge">{chip}</Badge>}
             {rollout && <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue" className="Tab-badge">{rollout}</Badge>}
         </TabWrapper>

package/src/components/tabs/tabs.tsx

@@ -1,3 +1,4 @@
+import { ResizeObserver } from '@juggle/resize-observer';
 import useResizeObserver from '@react-hook/resize-observer';
 import React, { useCallback, useRef, useState } from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
@@ -146,7 +147,7 @@ export const Tabs = ({ variant = 'default', tabs, activeTab, onSelect, ...props
     const ref = useRef<HTMLDivElement>(null);
     const [overflowState, setOveflowState] = useState<TabOverflowState>();
 
-    useResizeObserver(ref, (entry) => setOveflowState(isTabsOverflowing(entry.target as HTMLDivElement)));
+    useResizeObserver(ref, (entry) => setOveflowState(isTabsOverflowing(entry.target as HTMLDivElement)), { polyfill: ResizeObserver });
     const scrollHandler = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
         setOveflowState(isTabsOverflowing(event.currentTarget as HTMLDivElement));
     }, []);