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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.68.1-feattabs-4feb6d.103+115a161713b",
+    "version": "0.68.1-feattabs-4feb6d.123+d7d865c0725",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -28,7 +28,6 @@
     "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",
@@ -67,5 +66,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "115a161713b7c2cc8a7dda7417f9f46836b93d4d"
+    "gitHead": "d7d865c072540b0f249548378976fe3bb43051d1"
 }

package/src/components/badge.tsx

@@ -47,7 +47,7 @@ const badgeSizeStyle = {
         border-radius: ${theme.radius.radius4};
     `,
     extra_small: css`
-        height: 1.6rem;
+        height: ${theme.space.space16};
         padding: ${theme.space.space2} ${theme.space.space4};
         border-radius: ${theme.radius.radius4};
     `,

package/src/components/tabs/tab.tsx

@@ -142,6 +142,12 @@ type TabWrapperProps = WithTransientProps<Required<Pick<TabProps, 'variant'>>> &
     role?: React.AriaRole;
 };
 
+export const TAB_CLASSNAMES = {
+    ICON: 'Tab-icon',
+    TITLE: 'Tab-title',
+    BADGE: 'Tab-badge',
+};
+
 const TabWrapper = styled(Link)<TabWrapperProps>`
     display: inline-flex;
     align-items: center;
@@ -161,19 +167,19 @@ const TabWrapper = styled(Link)<TabWrapperProps>`
         pointer-events: none;
     }
 
-    .Tab-icon {
+    .${TAB_CLASSNAMES.ICON} {
         color: inherit;
         flex-shrink: 0;
         transition: color ${theme.transition.fastEaseOut};
     }
 
-    .Tab-title {
+    .${TAB_CLASSNAMES.TITLE} {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
-    .Tab-badge {
+    .${TAB_CLASSNAMES.BADGE} {
         flex-shrink: 0;
         text-transform: uppercase;
     }
@@ -189,14 +195,23 @@ 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}
         >
-            {Icon && <Icon size="16" className="Tab-icon" />}
-            <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>}
+            {Icon && <Icon size="16" className={TAB_CLASSNAMES.ICON} />}
+            <Text size={tabVariantTextSize[variant]} className={TAB_CLASSNAMES.ICON} weight="bold" as="div">{title}</Text>
+            {chip && (
+                <Badge
+                    size={tabVariantBadgeSize[variant]}
+                    variant={active ? 'primary_black' : 'neutral_subtle'}
+                    className={TAB_CLASSNAMES.ICON}
+                >
+                    {chip}
+                </Badge>
+            )}
+            {rollout && <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue" className={TAB_CLASSNAMES.ICON}>{rollout}</Badge>}
         </TabWrapper>
     );
 };

package/src/components/tabs/tabs.tsx

@@ -1,11 +1,10 @@
-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';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils.js';
+import { useResizeObserverSsr } from '../../utils/resize_observer.js';
 import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
 import { Box } from '../box.js';
 import type { TabData, TabVariant } from './tab.js';
@@ -147,7 +146,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)), { polyfill: ResizeObserver });
+    useResizeObserverSsr(ref, (entry) => setOveflowState(isTabsOverflowing(entry.target as HTMLDivElement)));
     const scrollHandler = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
         setOveflowState(isTabsOverflowing(event.currentTarget as HTMLDivElement));
     }, []);

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './copy_to_clipboard.js';
 export * from './sanitization.js';
 export * from './image_color.js';
+export * from './resize_observer.js';

package/src/utils/resize_observer.ts

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-useless-constructor, @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars */
+import type { UseResizeObserverCallback } from '@react-hook/resize-observer';
+import useResizeObserver from '@react-hook/resize-observer';
+
+class ServerSideResizeObserverPolyfill {
+    constructor(callback: ResizeObserverCallback) {}
+    observe(target: Element, options?: ResizeObserverOptions) {}
+    unobserve(target: Element) {}
+}
+
+export const useResizeObserverSsr = <T extends Element>(
+    target: React.RefObject<T> | React.ForwardedRef<T> | T | null,
+    callback: UseResizeObserverCallback,
+) => {
+    return useResizeObserver(target, callback, {
+        polyfill: typeof window === 'undefined' ? ServerSideResizeObserverPolyfill : null,
+    });
+};