@apify/ui-library 1.167.1 → 1.168.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.167.1",
+    "version": "1.168.1",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -75,7 +75,6 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.453.3",
         "@storybook/react-vite": "^10.3.5",
         "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
@@ -95,5 +94,5 @@
         "src",
         "style"
     ],
-    "gitHead": "1c34b7a81856b7951c963b244efa9ec415a59e6f"
+    "gitHead": "f595cd4e86d51505e5f4f6bb20fab58d386a30a7"
 }

package/src/components/action_link/action_link.tsx

@@ -3,9 +3,8 @@ import styled from 'styled-components';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@apify/ui-icons';
 
-import type { RequiredBy } from '@apify-packages/types';
-
 import { theme } from '../../design_system/theme';
+import type { WithRequired } from '../../type_utils';
 import { Box, type BoxProps } from '../box';
 import { Link, type LinkProps, StyledAsLink } from '../link';
 import { Heading } from '../text';
@@ -27,7 +26,7 @@ const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
     }
 `;
 
-export const ActionBox: FC<RequiredBy<BoxProps, 'onClick'> & { contentProps?: object }> = ({
+export const ActionBox: FC<WithRequired<BoxProps, 'onClick'> & { contentProps?: object }> = ({
     as = StyledAsLink,
     contentProps,
     children,

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/card_container/card_container.tsx

@@ -1,10 +1,9 @@
 import type React from 'react';
 import styled from 'styled-components';
 
-import type { ValueOf } from '@apify-packages/types';
-
 import { theme } from '../../design_system/theme';
 import type { Size } from '../../design_system/tokens';
+import type { ValueOf } from '../../internal_type_utils';
 import { Box, type BoxProps } from '../box';
 
 export const cardContainerClassNames = {

package/src/components/chip/chip.tsx

@@ -4,9 +4,8 @@ import type React from 'react';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { ValueOf } from '@apify-packages/types';
-
 import { theme } from '../../design_system/theme';
+import type { ValueOf } from '../../internal_type_utils';
 import type { RegularBoxProps } from '../box';
 
 export const CHIP_SIZES = {

package/src/components/code/one_line_code/one_line_code.tsx

@@ -3,8 +3,6 @@ import styled, { css } from 'styled-components';
 
 import { EyeIcon, EyeOffIcon } from '@apify/ui-icons';
 
-import type { HttpMethod } from '@apify-packages/types';
-
 import { theme } from '../../../design_system/theme';
 import type { BoxProps } from '../../box';
 import { InlineSpinner } from '../../spinner';
@@ -25,6 +23,8 @@ export const oneLineCodeClassNames = {
     buttons: 'OneLineCode-Buttons',
 };
 
+type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'PATCH' | 'OPTIONS';
+
 type ThemeType = keyof Pick<(typeof theme)['color'], 'primary' | 'success' | 'warning' | 'danger' | 'neutral'>;
 
 const HTML_METHOD_CHIP_STYLES: Record<HttpMethod, ThemeType> = {

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

@@ -3,9 +3,8 @@ import styled, { css } from 'styled-components';
 
 import type { IconComponent, IconSize } from '@apify/ui-icons';
 
-import type { ValueOf } from '@apify-packages/types';
-
 import { theme } from '../../design_system/theme';
+import type { ValueOf } from '../../internal_type_utils';
 import type { RegularBoxProps } from '../box';
 import {
     Button,
@@ -14,7 +13,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 +211,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 +260,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/rating/rating.tsx

@@ -4,13 +4,13 @@ import styled from 'styled-components';
 
 import { StarEmptyIcon, StarFullIcon, StarHalfIcon } from '@apify/ui-icons';
 
-import type { ReviewRating } from '@apify-packages/types';
-
 import { theme } from '../../design_system/theme';
 import type { BoxProps } from '../box';
 import { Box } from '../box';
 import { Text } from '../text';
 
+type ReviewRating = 1 | 2 | 3 | 4 | 5;
+
 type RatingStatsProps = {
     ratingStats: Record<ReviewRating, number>;
 };

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,
@@ -61,6 +60,7 @@ export const SplitButton = ({
     tooltipProps,
     zIndex,
     triggerAriaLabel = 'More actions',
+    disabled,
     ...passedProps
 }: SplitButtonProps) => {
     const [actionsVisible, setActionsVisible] = useState(false);
@@ -74,7 +74,7 @@ export const SplitButton = ({
 
     const wrapperClassNames = clsx(splitButtonClassNames.ROOT, className);
     const mainActionClassNames = clsx(splitButtonClassNames.MAIN_ACTION, passedProps.variant, passedProps.size);
-    const allActionsDisabled = !actions.some(({ disabled }) => !disabled);
+    const allActionsDisabled = actions.every((action) => action.disabled);
     // When all actions are disabled, we still want to be able to show the dropdown
     const triggerClassNames = clsx(
         splitButtonClassNames.TRIGGER,
@@ -84,40 +84,43 @@ 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={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}
+                disabled={disabled}
+                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}
@@ -134,7 +137,7 @@ export const SplitButton = ({
                 {actions.map((action, index) => (
                     <Dropdown.Item
                         key={action.trackingId ?? index}
-                        disabled={action.disabled}
+                        disabled={disabled || action.disabled}
                         icon={action.icon && <action.icon size="16" />}
                         description={action.description}
                         onClick={() => {

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"

package/src/internal_type_utils.ts

@@ -0,0 +1 @@
+export type ValueOf<T extends unknown[] | object> = T extends unknown[] ? T[number] : T[keyof T];