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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.68.1-feattabs-4feb6d.95+80e5c4fa623",
+    "version": "0.68.1-feattabs-4feb6d.112+7719fefdfd4",
     "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": "80e5c4fa623f29667a54f306849212ffded7ba03"
+    "gitHead": "7719fefdfd47a748e36ef561734584b7d38b7fdf"
 }

package/src/components/tabs/tab.tsx

@@ -189,6 +189,7 @@ export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, c
             to={to}
             role="tab"
             data-test="tab"
+            data-test-url={href}
             className={clsx(className, { active, disabled })}
             onClick={onSelect ? (event) => onSelect({ id, href, event }) : undefined}
             $variant={variant}

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));
     }, []);