@apify/ui-library 0.68.1-feattabs-4feb6d.72 → 0.68.1-feattabs-4feb6d.95

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.68.1-feattabs-4feb6d.72+6c2024f5a97",
+    "version": "0.68.1-feattabs-4feb6d.95+80e5c4fa623",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -66,5 +66,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "6c2024f5a97b2f1844976716cc92199dd6ede982"
+    "gitHead": "80e5c4fa623f29667a54f306849212ffded7ba03"
 }

package/src/components/tabs/tab.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { createPath } from 'history';
+import React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
@@ -146,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};
@@ -165,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;
@@ -186,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,5 +1,5 @@
 import useResizeObserver from '@react-hook/resize-observer';
-import { type AriaRole, useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
@@ -7,7 +7,8 @@ import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils.js';
 import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
 import { Box } from '../box.js';
-import { Tab, type TabData, type TabVariant } from './tab.js';
+import type { TabData, TabVariant } from './tab.js';
+import { Tab } from './tab.js';
 
 type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
 type TabsProps = SharedTabsProps & {
@@ -56,7 +57,7 @@ const tabsVariantStyle = {
 } satisfies Record<TabVariant, FlattenSimpleInterpolation>;
 
 type TabsWrapperProps = WithTransientProps<Required<Pick<TabsProps, 'variant'>>> & {
-    role?: AriaRole;
+    role?: React.AriaRole;
 };
 
 const TabsWrapper = styled(Box)<TabsWrapperProps>`
@@ -70,6 +71,14 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
         flex-grow: 1;
         overflow-x: auto;
         ${({ $variant }) => tabsVariantStyle[$variant]};
+
+        /* Scrollbar */
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        
+        &::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera */
+        }
     }
 
     & > [role="cell"] {