@apify/ui-library 1.167.0 → 1.168.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.167.0",
+    "version": "1.168.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -75,7 +75,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.453.2",
+        "@apify-packages/types": "^3.454.0",
         "@storybook/react-vite": "^10.3.5",
         "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "6295bb684477aec1dd61d5c1f0917162197f0de8"
+    "gitHead": "6a2d3eedb716e9e766ea4328f4ef3c5554fc6426"
 }

package/src/components/avatar/actor_avatar.tsx

@@ -34,10 +34,13 @@ const StyledBoringAvatarMarble = styled(BoringAvatarMarble)<{ $borderRadius: str
     }
 `;
 
-const StyledImg = styled.img`
-    border-radius: ${theme.radius.radius8};
+const StyledImg = styled.img<{ $borderRadius: string | number }>`
+    border-radius: ${({ $borderRadius }) => $borderRadius};
 `;
 
+/** Corner radius in px for an Actor avatar of the given size, shared with bordered avatars. */
+export const getActorAvatarBorderRadius = (size: number) => size / 4 + 2;
+
 interface ActorAvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     name?: string;
     className?: string;
@@ -53,7 +56,7 @@ export const ActorAvatarInner: FC<ActorAvatarProps> = ({
     url,
     size,
     alt,
-    borderRadius = theme.radius.radius8,
+    borderRadius = `${getActorAvatarBorderRadius(size)}px`,
     ...rest
 }) => {
     const [hasImageError, setHasImageError] = useState(false);
@@ -110,6 +113,7 @@ export const ActorAvatarInner: FC<ActorAvatarProps> = ({
                 height={size}
                 alt={altText}
                 onError={onError}
+                $borderRadius={borderRadius}
                 {...rest}
             />
         );

package/src/components/button/button.stories.tsx

@@ -1,11 +1,13 @@
-import type { Meta } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 // eslint-disable-next-line import-x/extensions
 import { action } from 'storybook/actions';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import styled from 'styled-components';
 
 import { CrossIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme';
+import { Tooltip } from '../floating';
 import { Button, type ButtonProps } from './button';
 
 export default {
@@ -219,3 +221,43 @@ export const Animated = () => {
         </Wrapper>
     );
 };
+
+// Tooltip renders only its children when `content` is empty, so a conditional tooltip needs no branching.
+export const WithTooltip: StoryObj = {
+    render: () => (
+        <Wrapper>
+            <ButtonGrid>
+                <Tooltip content="Saves the current draft" delayShow={0}>
+                    <Button onClick={action('onClick')}>Save</Button>
+                </Tooltip>
+                <Tooltip content="Fill in all required fields first" delayShow={0}>
+                    <Button onClick={action('onClick')} disabled>
+                        Disabled with reason
+                    </Button>
+                </Tooltip>
+                <Tooltip content={undefined}>
+                    <Button onClick={action('onClick')}>No tooltip</Button>
+                </Tooltip>
+            </ButtonGrid>
+        </Wrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await userEvent.hover(canvas.getByRole('button', { name: 'Save' }));
+        await expect(await canvas.findByText('Saves the current draft')).toBeInTheDocument();
+        await userEvent.unhover(canvas.getByRole('button', { name: 'Save' }));
+
+        // A disabled button fires no pointer events, the tooltip's wrapping span does.
+        const disabledButton = canvas.getByRole('button', { name: 'Disabled with reason' });
+        await userEvent.hover(disabledButton.parentElement as HTMLElement);
+        await expect(await canvas.findByText('Fill in all required fields first')).toBeInTheDocument();
+        await userEvent.unhover(disabledButton.parentElement as HTMLElement);
+        await waitFor(async () =>
+            expect(canvas.queryByText('Fill in all required fields first')).not.toBeInTheDocument(),
+        );
+
+        const plainButton = canvas.getByRole('button', { name: 'No tooltip' });
+        await expect(plainButton.parentElement?.tagName).not.toBe('SPAN');
+    },
+};

package/src/components/floating/tooltip.tsx

@@ -152,6 +152,7 @@ export const Tooltip = ({
     );
 };
 
+/** @deprecated Wrap the component in `Tooltip` instead. */
 export function withTooltip<TProps extends Record<string, unknown> = Record<string, unknown>>(
     Component: ComponentType<TProps>,
 ) {

package/src/components/icon_button/icon_button.tsx

@@ -14,7 +14,7 @@ import {
     type RegularButtonProps,
     type TransientButtonProps,
 } from '../button';
-import { Tooltip } from '../floating';
+import { Tooltip, type TooltipProps } from '../floating';
 import { Link, type RegularLinkProps } from '../link';
 import { InlineSpinner, spinnerClassNames } from '../spinner';
 
@@ -212,7 +212,7 @@ export type IconButtonProps<T extends IconButtonNodeType> = RegularBoxProps &
         disabled?: boolean;
         isLoading?: boolean;
         title?: string;
-        tooltipProps?: unknown;
+        tooltipProps?: Omit<TooltipProps, 'children'>;
     } & Omit<IconButtonNodePropsMap[T]['props'], 'size' | 'variant'>;
 
 /**
@@ -261,7 +261,6 @@ export const IconButton = forwardRef(
         );
 
         return title ? (
-            // @ts-expect-error tooltip is not migrated to TS yet
             <Tooltip content={title} {...tooltipProps}>
                 {button}
             </Tooltip>

package/src/components/readme_renderer/pythonize_value.ts

@@ -66,7 +66,8 @@ export const pythonizeValue = <T>(value: T, depth = 0): string | T => {
 
     // Object values
     if (typeof value === 'object') {
-        const entries = Object.entries(value);
+        // Keys with `undefined` values are left out, like in `JSON.stringify`
+        const entries = Object.entries(value).filter(([, v]) => v !== undefined);
         if (entries.length === 0) return '{}';
         if (entries.length === 1)
             return '{ ' + pythonQuoteString(entries[0][0]) + ': ' + pythonizeValue(entries[0][1], depth + 1) + ' }';

package/src/components/split_button/split_button.stories.tsx

@@ -1,10 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { action } from 'storybook/actions';
-import { expect, userEvent, within } from 'storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import styled from 'styled-components';
 
 import { BuildIcon, PlayIcon } from '@apify/ui-icons';
 
+import { Tooltip } from '../floating';
 import { SplitButton, type SplitButtonAction } from './';
 
 const defaultActions: SplitButtonAction[] = [
@@ -204,10 +205,20 @@ export const AllActionsDisabled: Story = {
 };
 
 export const WithTooltip: Story = {
-    args: {
-        tooltipProps: {
-            content: 'Run this Actor with the current input',
-        },
+    render: (args) => (
+        <Tooltip content="Run this Actor with the current input" delayShow={0}>
+            <SplitButton {...args} />
+        </Tooltip>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await userEvent.hover(canvas.getAllByRole('button')[0]);
+        await expect(await canvas.findByText('Run this Actor with the current input')).toBeInTheDocument();
+        await userEvent.unhover(canvas.getAllByRole('button')[0]);
+        await waitFor(async () =>
+            expect(canvas.queryByText('Run this Actor with the current input')).not.toBeInTheDocument(),
+        );
     },
 };
 

package/src/components/split_button/split_button.tsx

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import type { MarginSpacingProps } from '../box';
 import { Button, type ButtonColor, type ButtonSize, type ButtonVariant } from '../button';
 import { Dropdown, DropdownShell } from '../dropdown';
-import { type TooltipProps, withTooltip } from '../floating';
+import { Tooltip, type TooltipProps } from '../floating';
 import { Text } from '../text';
 import { splitButtonClassNames, StyledDropdownChevron, StyledSplitButtonWrapper } from './split_button.styled';
 import { splitButtonMainActionTestId, splitButtonTriggerTestId } from './split_button.test_ids';
@@ -36,6 +36,7 @@ export interface SplitButtonProps
     align?: PopperContentProps['align'];
     width?: string;
     showMainIcon?: boolean;
+    /** @deprecated Wrap `SplitButton` in `Tooltip` instead. */
     tooltipProps?: TooltipProps;
     /** Forwarded to the dropdown's DropdownShell - override when a consumer renders inside a modal/overlay stack. */
     zIndex?: number;
@@ -48,8 +49,6 @@ const ButtonWrapper = styled.div`
     align-items: center;
 `;
 
-const ButtonWrapperWithTooltip = withTooltip(ButtonWrapper);
-
 export const SplitButton = ({
     className,
     actions,
@@ -84,40 +83,42 @@ export const SplitButton = ({
     );
     const buttonMainLabel = label || mainAction.label;
 
-    const Wrapper = tooltipProps ? ButtonWrapperWithTooltip : ButtonWrapper;
+    const buttons = (
+        <ButtonWrapper ref={triggerRef}>
+            <Button
+                data-test={splitButtonMainActionTestId(mainAction.trackingId)}
+                {...passedProps}
+                className={mainActionClassNames}
+                disabled={mainAction.disabled}
+                mr="none"
+                onClick={() => {
+                    mainAction.onClick();
+                    setActionsVisible(false);
+                }}
+                trackingId={mainAction.trackingId}
+            >
+                {mainAction.icon && showMainIcon ? <mainAction.icon /> : null}
+                {buttonMainLabel}
+            </Button>
+            <Button
+                {...passedProps}
+                className={triggerClassNames}
+                ml="none"
+                onClick={() => setActionsVisible((prevActionsVisible) => !prevActionsVisible)}
+                trackingId={mainAction.trackingId ? `${mainAction.trackingId}-OpenDropdown` : undefined}
+                data-test={splitButtonTriggerTestId(mainAction.trackingId)}
+                aria-haspopup="menu"
+                aria-expanded={actionsVisible}
+                aria-label={triggerAriaLabel}
+            >
+                <StyledDropdownChevron $isOpen={actionsVisible} size="16" />
+            </Button>
+        </ButtonWrapper>
+    );
 
     return (
         <StyledSplitButtonWrapper className={wrapperClassNames}>
-            <Wrapper ref={triggerRef} tooltipProps={tooltipProps}>
-                <Button
-                    data-test={splitButtonMainActionTestId(mainAction.trackingId)}
-                    {...passedProps}
-                    className={mainActionClassNames}
-                    disabled={mainAction.disabled}
-                    mr="none"
-                    onClick={() => {
-                        mainAction.onClick();
-                        setActionsVisible(false);
-                    }}
-                    trackingId={mainAction.trackingId}
-                >
-                    {mainAction.icon && showMainIcon ? <mainAction.icon /> : null}
-                    {buttonMainLabel}
-                </Button>
-                <Button
-                    {...passedProps}
-                    className={triggerClassNames}
-                    ml="none"
-                    onClick={() => setActionsVisible((prevActionsVisible) => !prevActionsVisible)}
-                    trackingId={mainAction.trackingId ? `${mainAction.trackingId}-OpenDropdown` : undefined}
-                    data-test={splitButtonTriggerTestId(mainAction.trackingId)}
-                    aria-haspopup="menu"
-                    aria-expanded={actionsVisible}
-                    aria-label={triggerAriaLabel}
-                >
-                    <StyledDropdownChevron $isOpen={actionsVisible} size="16" />
-                </Button>
-            </Wrapper>
+            {tooltipProps ? <Tooltip {...tooltipProps}>{buttons}</Tooltip> : buttons}
 
             <DropdownShell
                 isOpen={actionsVisible}

package/src/components/store/store_actor_header.tsx

@@ -96,12 +96,7 @@ export const StoreActorHeader: React.FC<StoreActorHeaderProps & BoxProps> = ({
     return (
         <StyledStoreActorHeader data-test={storeActorHeaderTestIds.HEADER} $compact={compact} {...rest}>
             <ActorAvatarWrapper>
-                <ActorAvatar
-                    size={compact ? 20 : avatarSize}
-                    url={pictureUrl}
-                    name={title}
-                    borderRadius={compact ? theme.radius.radius4 : theme.radius.radius8}
-                />
+                <ActorAvatar size={compact ? 20 : avatarSize} url={pictureUrl} name={title} />
                 {!compact && hasRisingStarBadge && (
                     <StyledCompactBadge
                         variant="primary_blue"