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

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.94+0bf4ae961f9",
     "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": "0bf4ae961f9aee815b791932332847b9864bffd7"
 }

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';
 

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"] {