@apify/ui-library 1.138.0 → 1.138.1

package/src/components/icon_button.stories.tsx

@@ -3,16 +3,9 @@ import type { Meta } from '@storybook/react-vite';
 import { action } from 'storybook/actions';
 import styled from 'styled-components';
 
-import {
-    BellIcon,
-    DeleteIcon, PeopleIcon,
-} from '@apify/ui-icons';
+import { BellIcon, DeleteIcon, PeopleIcon } from '@apify/ui-icons';
 
-import {
-    ICON_BUTTON_VARIANTS,
-    IconButton,
-    type IconButtonProps,
-} from './icon_button.js';
+import { ICON_BUTTON_VARIANTS, IconButton, type IconButtonProps } from './icon_button.js';
 
 export default {
     title: 'UI-Library/IconButton',
@@ -36,171 +29,173 @@ const Table = styled.table`
 `;
 
 export const Default = (props: IconButtonProps<'button'>) => {
-    return (<>
-        <Table>
-            <tbody>
-                {Object.values(ICON_BUTTON_VARIANTS).map((variant) => (
-                    <tr key={variant}>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                size='extraLarge'
-                                title='Delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                size='large'
-                                title='Delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                size='medium'
-                                title='Delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                size='small'
-                                title='Delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                size='extraSmall'
-                                title='Delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                disabled
-                                size='extraLarge'
-                                title='Disabled delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                disabled
-                                size='large'
-                                title='Disabled delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                disabled
-                                size='medium'
-                                title='Disabled delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                disabled
-                                size='small'
-                                title='Disabled delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                disabled
-                                size='extraSmall'
-                                title='Disabled delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                isLoading
-                                size='extraLarge'
-                                title='Loading delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                isLoading
-                                size='extraLarge'
-                                title='Loading delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                isLoading
-                                size='large'
-                                title='Loading delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                isLoading
-                                size='medium'
-                                title='Loading delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                isLoading
-                                size='small'
-                                title='Loading delete example'
-                            />
-                        </td>
-                        <td>
-                            <IconButton
-                                {...props}
-                                variant={variant}
-                                Icon={DeleteIcon}
-                                isLoading
-                                size='extraSmall'
-                                title='Loading delete example'
-                            />
-                        </td>
-                    </tr>
-                ))}
-            </tbody>
-        </Table>
-    </>);
+    return (
+        <>
+            <Table>
+                <tbody>
+                    {Object.values(ICON_BUTTON_VARIANTS).map((variant) => (
+                        <tr key={variant}>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    size="extraLarge"
+                                    title="Delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    size="large"
+                                    title="Delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    size="medium"
+                                    title="Delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    size="small"
+                                    title="Delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    size="extraSmall"
+                                    title="Delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    disabled
+                                    size="extraLarge"
+                                    title="Disabled delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    disabled
+                                    size="large"
+                                    title="Disabled delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    disabled
+                                    size="medium"
+                                    title="Disabled delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    disabled
+                                    size="small"
+                                    title="Disabled delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    disabled
+                                    size="extraSmall"
+                                    title="Disabled delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    isLoading
+                                    size="extraLarge"
+                                    title="Loading delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    isLoading
+                                    size="extraLarge"
+                                    title="Loading delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    isLoading
+                                    size="large"
+                                    title="Loading delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    isLoading
+                                    size="medium"
+                                    title="Loading delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    isLoading
+                                    size="small"
+                                    title="Loading delete example"
+                                />
+                            </td>
+                            <td>
+                                <IconButton
+                                    {...props}
+                                    variant={variant}
+                                    Icon={DeleteIcon}
+                                    isLoading
+                                    size="extraSmall"
+                                    title="Loading delete example"
+                                />
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </Table>
+        </>
+    );
 };
 
 const StyledPlayground = styled.div`
@@ -210,20 +205,13 @@ const StyledPlayground = styled.div`
 `;
 
 export const Playground = (props: IconButtonProps<'button'>) => {
-    return (<StyledPlayground>
-        <IconButton
-            {...props}
-            Icon={PeopleIcon}
-        />
-        <IconButton
-            {...props}
-            Icon={DeleteIcon}
-        />
-        <IconButton
-            {...props}
-            Icon={BellIcon}
-        />
-    </StyledPlayground>);
+    return (
+        <StyledPlayground>
+            <IconButton {...props} Icon={PeopleIcon} />
+            <IconButton {...props} Icon={DeleteIcon} />
+            <IconButton {...props} Icon={BellIcon} />
+        </StyledPlayground>
+    );
 };
 
 Playground.args = {

package/src/components/icon_button.tsx

@@ -7,7 +7,13 @@ import type { ValueOf } from '@apify-packages/types';
 
 import { theme } from '../design_system/theme.js';
 import type { RegularBoxProps } from './box.js';
-import { Button, BUTTON_SIZE_VARIANTS_CSS, type ButtonSize, type RegularButtonProps, type TransientButtonProps } from './button.js';
+import {
+    Button,
+    BUTTON_SIZE_VARIANTS_CSS,
+    type ButtonSize,
+    type RegularButtonProps,
+    type TransientButtonProps,
+} from './button.js';
 import { Tooltip } from './floating/tooltip.js';
 import { Link, type RegularLinkProps } from './link.js';
 import { InlineSpinner, spinnerClassNames } from './spinner.js';
@@ -142,12 +148,13 @@ const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
 
         &:hover {
             ${backgroundHoverGradient
-                    ? css`
-                    background-image: ${backgroundHoverGradient};
-                    background-color: ${backgroundColor};
-                `
-                    : css`background-color: ${backgroundHoverColor};`
-            }
+                ? css`
+                      background-image: ${backgroundHoverGradient};
+                      background-color: ${backgroundColor};
+                  `
+                : css`
+                      background-color: ${backgroundHoverColor};
+                  `}
             border-color: ${borderHoverColor || borderColor};
             color: ${iconColor};
         }
@@ -172,12 +179,12 @@ const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
     `;
 };
 
-const StyledButton = styled(Button) <{ $variant: ICON_BUTTON_VARIANTS, $size: ButtonSize }>`
+const StyledButton = styled(Button)<{ $variant: ICON_BUTTON_VARIANTS; $size: ButtonSize }>`
     ${({ $variant }) => getIconButtonColorStyles($variant)}
 
     /* Override default button styles */
     box-sizing: border-box;
-    width: ${({ $size }) => (BUTTON_SIZE_VARIANTS_CSS[$size].size)}px;
+    width: ${({ $size }) => BUTTON_SIZE_VARIANTS_CSS[$size].size}px;
     padding: 0;
 
     .${spinnerClassNames.SPINNER} .path {
@@ -197,59 +204,66 @@ type IconButtonNodePropsMap = {
     };
 };
 
-export type IconButtonProps<T extends IconButtonNodeType> = RegularBoxProps & Pick<TransientButtonProps, 'size'> & {
-    as?: T
-    variant?: ICON_BUTTON_VARIANTS
-    Icon: IconComponent
-    disabled?: boolean
-    isLoading?: boolean
-    title?: string
-    tooltipProps?: unknown
-} & Omit<IconButtonNodePropsMap[T]['props'], 'size' | 'variant'>;
+export type IconButtonProps<T extends IconButtonNodeType> = RegularBoxProps &
+    Pick<TransientButtonProps, 'size'> & {
+        as?: T;
+        variant?: ICON_BUTTON_VARIANTS;
+        Icon: IconComponent;
+        disabled?: boolean;
+        isLoading?: boolean;
+        title?: string;
+        tooltipProps?: unknown;
+    } & Omit<IconButtonNodePropsMap[T]['props'], 'size' | 'variant'>;
 
 /**
  * Simplified button component that displays an icon.
  * Has a tooltip and a loading state.
  */
-export const IconButton = forwardRef(<T extends IconButtonNodeType>(
-    {
-        variant = ICON_BUTTON_VARIANTS.DEFAULT,
-        size = 'medium',
-        as = 'button' as T,
-        title,
-        disabled = false,
-        isLoading = false,
-        Icon,
-        tooltipProps,
-        ...passThroughProps
-    }: IconButtonProps<T>, ref: React.Ref<IconButtonNodePropsMap[T]['element']>) => {
-    const otherProps = { ...passThroughProps, size };
-
-    const component: React.ElementType = as === 'a' ? Link : as;
-    const { iconSize, spinnerSize } = iconButtonSizeConfig[size];
-
-    const button = (
-        <StyledButton
-            forwardedAs={component}
-            ref={ref}
-            disabled={disabled || isLoading}
-            type='button'
-            aria-label={title}
-            LeftIcon={isLoading ? () => <InlineSpinner size={spinnerSize} /> : () => <Icon size={iconSize} />}
-            // We apply our own styles to the button, so we need to override the default variant
-            variant="tertiary"
-            $size={size}
-            $variant={variant}
-            {...otherProps}
-        />
-    );
-
-    return title ? (
-        // @ts-expect-error tooltip is not migrated to TS yet
-        <Tooltip content={title} {...tooltipProps}>
-            {button}
-        </Tooltip>
-    ) : button;
-});
+export const IconButton = forwardRef(
+    <T extends IconButtonNodeType>(
+        {
+            variant = ICON_BUTTON_VARIANTS.DEFAULT,
+            size = 'medium',
+            as = 'button' as T,
+            title,
+            disabled = false,
+            isLoading = false,
+            Icon,
+            tooltipProps,
+            ...passThroughProps
+        }: IconButtonProps<T>,
+        ref: React.Ref<IconButtonNodePropsMap[T]['element']>,
+    ) => {
+        const otherProps = { ...passThroughProps, size };
+
+        const component: React.ElementType = as === 'a' ? Link : as;
+        const { iconSize, spinnerSize } = iconButtonSizeConfig[size];
+
+        const button = (
+            <StyledButton
+                forwardedAs={component}
+                ref={ref}
+                disabled={disabled || isLoading}
+                type="button"
+                aria-label={title}
+                LeftIcon={isLoading ? () => <InlineSpinner size={spinnerSize} /> : () => <Icon size={iconSize} />}
+                // We apply our own styles to the button, so we need to override the default variant
+                variant="tertiary"
+                $size={size}
+                $variant={variant}
+                {...otherProps}
+            />
+        );
+
+        return title ? (
+            // @ts-expect-error tooltip is not migrated to TS yet
+            <Tooltip content={title} {...tooltipProps}>
+                {button}
+            </Tooltip>
+        ) : (
+            button
+        );
+    },
+);
 
 IconButton.displayName = 'IconButton';

package/src/components/image.tsx

@@ -5,20 +5,14 @@ import { useSharedUiDependencies } from '../ui_dependency_provider.js';
 import { Box, type BoxProps } from './box.js';
 
 type ImageProps = {
-    src: string,
-    alt?: string,
-    width?: number,
-    height?: number,
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
     loading?: 'eager' | 'lazy' | undefined;
 } & ImageProxyOptions;
 
 export const Image = forwardRef<HTMLImageElement, ImageProps & Omit<BoxProps, 'as'>>((props, ref) => {
     const { InternalImage } = useSharedUiDependencies();
-    return (
-        <Box
-            ref={ref}
-            {...props}
-            as={InternalImage}
-        />
-    );
+    return <Box ref={ref} {...props} as={InternalImage} />;
 });

package/src/components/link.stories.tsx

@@ -4,7 +4,8 @@ import type { ElementType } from 'react';
 import { Link, type LinkProps } from './link.js';
 
 // eslint-disable-next-line @stylistic/max-len
-const longText = 'This is a very long link text that might wrap to multiple lines depending on the container width. It is used to test how the Link component handles overflow and wrapping in different scenarios.';
+const longText =
+    'This is a very long link text that might wrap to multiple lines depending on the container width. It is used to test how the Link component handles overflow and wrapping in different scenarios.';
 
 // Mock the UI dependencies provider for Storybook
 const MockUIProvider = ({ children }: { children: React.ReactNode }) => {
@@ -34,7 +35,8 @@ export default {
     argTypes: {
         to: {
             control: 'text',
-            description: 'The destination URL or path object. Can be internal (/path) or external (https://example.com)',
+            description:
+                'The destination URL or path object. Can be internal (/path) or external (https://example.com)',
         },
         hideExternalIcon: {
             control: 'boolean',