@apify/ui-library 1.138.0 → 1.138.1

package/src/components/button.tsx

@@ -23,10 +23,10 @@ export interface TransientButtonProps {
 }
 
 export interface RegularButtonProps {
-    trackingId?: string,
-    trackingData?: Record<string, unknown>,
-    LeftIcon?: React.ElementType,
-    RightIcon?: React.ElementType,
+    trackingId?: string;
+    trackingData?: Record<string, unknown>;
+    LeftIcon?: React.ElementType;
+    RightIcon?: React.ElementType;
     disabled?: boolean;
     type?: ButtonType;
 }
@@ -48,34 +48,34 @@ function isAnchorButton(props: ButtonProps | AnchorButtonProps): props is Anchor
 type ButtonColorCombinations = {
     [Type in ButtonVariant]: {
         [Size in ButtonColor]: {
-            textColor: string,
-            borderColor: string
-            backgroundColor: string,
+            textColor: string;
+            borderColor: string;
+            backgroundColor: string;
 
             // hover & active state effects
-            actionTextColor?: string,
+            actionTextColor?: string;
             // only exception is primary outlined button
-            actionBorderColor?: string
+            actionBorderColor?: string;
 
             // hover state effects override
-            hoverColor?: string,
+            hoverColor?: string;
             // Optional gradient overlay on hover (e.g., for primaryBlack)
-            hoverGradient?: string,
+            hoverGradient?: string;
 
             // active state effects override
-            activeColor?: string,
-            activeTextColor?: string,
-        }
+            activeColor?: string;
+            activeTextColor?: string;
+        };
     };
 };
 
 type ButtonSizeCombinations = {
     [Size in ButtonSize]: {
-        typography: string,
-        size: number,
-        horizontalPadding: number,
-        borderRadius: string,
-        iconSize: IconSize,
+        typography: string;
+        size: number;
+        horizontalPadding: number;
+        borderRadius: string;
+        iconSize: IconSize;
     };
 };
 
@@ -236,12 +236,13 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
         &:hover {
             color: ${actionTextColor || textColor};
             ${hoverGradient
-                    ? css`
-                    background-image: ${hoverGradient};
-                    background-color: ${backgroundColor};
-                `
-                    : css`background-color: ${hoverColor};`
-            }
+                ? css`
+                      background-image: ${hoverGradient};
+                      background-color: ${backgroundColor};
+                  `
+                : css`
+                      background-color: ${hoverColor};
+                  `}
             border-color: ${actionBorderColor || (hoverGradient ? borderColor : hoverColor)};
         }
 
@@ -263,12 +264,7 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
 };
 
 export const getButtonSizeStyles = (size: ButtonSize = 'medium') => {
-    const {
-        typography,
-        size: height,
-        horizontalPadding,
-        borderRadius,
-    } = BUTTON_SIZE_VARIANTS_CSS[size];
+    const { typography, size: height, horizontalPadding, borderRadius } = BUTTON_SIZE_VARIANTS_CSS[size];
 
     return css`
         ${typography};
@@ -276,7 +272,6 @@ export const getButtonSizeStyles = (size: ButtonSize = 'medium') => {
         /* We just want to ensure padding on the sides. Height is set the the hard way for simplicity */
         padding: 0 ${horizontalPadding}px;
         border-radius: ${borderRadius};
-
     `;
 };
 
@@ -292,7 +287,9 @@ const StyledButton = styled(Box)<WithTransientProps<Required<TransientButtonProp
     /* Basic styles */
     white-space: nowrap;
     cursor: pointer;
-    transition: border-color ${theme.transition.fastEaseOut}, background-color ${theme.transition.fastEaseOut};
+    transition:
+        border-color ${theme.transition.fastEaseOut},
+        background-color ${theme.transition.fastEaseOut};
 
     /* Border is always defined, but it can be set to transparent */
     border-style: solid;
@@ -322,10 +319,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
         ...rest
     } = props;
 
-    const {
-        trackClick,
-        windowLocationHost,
-    } = useSharedUiDependencies();
+    const { trackClick, windowLocationHost } = useSharedUiDependencies();
     const trackedOnClick = (e: React.MouseEvent) => {
         if (trackClick && trackingId) trackClick(trackingId, trackingData);
         if (onClick) onClick(e);
@@ -335,7 +329,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
 
     if (isAnchorButton(props)) {
         const isExternal = isUrlExternal(props.to, windowLocationHost);
-        const EffectiveRightIcon = (isExternal && !props.hideExternalIcon) ? ExternalLinkIcon : RightIcon;
+        const EffectiveRightIcon = isExternal && !props.hideExternalIcon ? ExternalLinkIcon : RightIcon;
 
         return (
             <StyledButton
@@ -363,7 +357,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
             $size={size}
             $color={color}
             $variant={variant}
-            forwardedAs={ as || 'button'}
+            forwardedAs={as || 'button'}
             ref={ref}
             onClick={trackedOnClick}
             type={type}

package/src/components/card_container.stories.tsx

@@ -40,35 +40,34 @@ export const Default: Story = {
         header: 'Recently viewed',
     },
     render: (args: CardContainerProps) => {
-        return <StoryWrapper>
-            <CardContainer {...args} />
-            <CardContainer {...args} headerPlacement='BOTTOM'/>
-            <CardContainer
-                {...args}
-                header={<>
-                    <CardContainer.Heading>Test</CardContainer.Heading>
-                    <IconButton Icon={DragIndicatorIcon}/>
-                </>}
-            />
-            <CardContainer
-                {...args}
-                header={
-                    <div>
-                        <CardContainer.Heading># Videos with this hashtag</CardContainer.Heading>
-                        <code style={{ marginLeft: 8 }}>Required</code>
-                    </div>
-                }
-            />
-            <CardContainer
-                {...args}
-                header={<>
-                    Completely custom header content
-                </>}
-            />
-            <CardContainer {...args} header={null}>
-                Content without header
-            </CardContainer>
-        </StoryWrapper>;
+        return (
+            <StoryWrapper>
+                <CardContainer {...args} />
+                <CardContainer {...args} headerPlacement="BOTTOM" />
+                <CardContainer
+                    {...args}
+                    header={
+                        <>
+                            <CardContainer.Heading>Test</CardContainer.Heading>
+                            <IconButton Icon={DragIndicatorIcon} />
+                        </>
+                    }
+                />
+                <CardContainer
+                    {...args}
+                    header={
+                        <div>
+                            <CardContainer.Heading># Videos with this hashtag</CardContainer.Heading>
+                            <code style={{ marginLeft: 8 }}>Required</code>
+                        </div>
+                    }
+                />
+                <CardContainer {...args} header={<>Completely custom header content</>} />
+                <CardContainer {...args} header={null}>
+                    Content without header
+                </CardContainer>
+            </StoryWrapper>
+        );
     },
     play: async ({ canvasElement }) => {
         const headers = canvasElement.querySelectorAll(`.${cardContainerClassNames.HEADER}`);

package/src/components/card_container.tsx

@@ -25,19 +25,24 @@ const getContentPadding = (contentPadding?: ContentPaddingValue) => {
     return theme.space.space16;
 };
 
-const Wrapper = styled(Box)<{ $headerPlacement: ValueOf<typeof HEADER_PLACEMENT>; $contentPadding?: ContentPaddingValue }>`
+const Wrapper = styled(Box)<{
+    $headerPlacement: ValueOf<typeof HEADER_PLACEMENT>;
+    $contentPadding?: ContentPaddingValue;
+}>`
     background-color: ${theme.color.neutral.backgroundSubtle};
     border-radius: ${theme.radius.radius12};
 
     padding: ${theme.space.space2};
 
     display: flex;
-    flex-direction: ${({ $headerPlacement }) => ($headerPlacement === HEADER_PLACEMENT.TOP ? 'column' : 'column-reverse')};
+    flex-direction: ${({ $headerPlacement }) =>
+        $headerPlacement === HEADER_PLACEMENT.TOP ? 'column' : 'column-reverse'};
 
     .${cardContainerClassNames.CONTENT} {
         /* 11px inner radius to match Figma (outer 12px - 1px visual offset) */
         border-radius: 1.1rem;
-        background-color: ${({ $contentPadding }) => ($contentPadding === 'none' ? 'transparent' : theme.color.neutral.background)};
+        background-color: ${({ $contentPadding }) =>
+            $contentPadding === 'none' ? 'transparent' : theme.color.neutral.background};
         ${({ $contentPadding }) => $contentPadding === 'none' && 'overflow: hidden;'}
 
         padding: ${({ $contentPadding }) => getContentPadding($contentPadding)};
@@ -52,17 +57,19 @@ const Wrapper = styled(Box)<{ $headerPlacement: ValueOf<typeof HEADER_PLACEMENT>
     }
 `;
 
-const CardContainerHeading = styled.span`${theme.typography.shared.desktop.bodyMMedium}`;
+const CardContainerHeading = styled.span`
+    ${theme.typography.shared.desktop.bodyMMedium}
+`;
 
 export type CardContainerProps = BoxProps & {
     /** The header can be placed on the bottom of the card or on the top. */
-    headerPlacement?: ValueOf<typeof HEADER_PLACEMENT>,
+    headerPlacement?: ValueOf<typeof HEADER_PLACEMENT>;
     /**
      * If string is passed, the correct styles are applied automatically.
      * In case of custom component, use `CardContainer.Heading` component to get the same styles.
      * Pass `null` to render without a header section.
      */
-    header: React.ReactNode,
+    header: React.ReactNode;
     /**
      * Controls the padding of the content area. Accepts a space token or `'none'`.
      * When set to `'none'`, padding is removed, the content background becomes transparent
@@ -70,7 +77,7 @@ export type CardContainerProps = BoxProps & {
      * Other values (e.g. `'space8'`) change the padding but keep the white background.
      * Defaults to `space16` with white background when not provided.
      */
-    contentPadding?: ContentPaddingValue,
+    contentPadding?: ContentPaddingValue;
 };
 
 /**
@@ -91,9 +98,7 @@ export const CardContainer = ({
                 {typeof header === 'string' ? <CardContainerHeading>{header}</CardContainerHeading> : header}
             </div>
         )}
-        <div className={cardContainerClassNames.CONTENT}>
-            {children}
-        </div>
+        <div className={cardContainerClassNames.CONTENT}>{children}</div>
     </Wrapper>
 );
 

package/src/components/checkbox/checkbox.stories.tsx

@@ -20,7 +20,10 @@ const Row = styled.div`
     gap: 0.8rem;
 `;
 
-type ControlledCheckboxProps = { initialValue?: boolean } & Omit<ComponentProps<typeof CheckboxPrimitive>, 'value' | 'setValue'>;
+type ControlledCheckboxProps = { initialValue?: boolean } & Omit<
+    ComponentProps<typeof CheckboxPrimitive>,
+    'value' | 'setValue'
+>;
 
 const ControlledCheckbox = ({ initialValue = false, ...props }: ControlledCheckboxProps) => {
     const [value, setValue] = useState(initialValue);
@@ -29,13 +32,27 @@ const ControlledCheckbox = ({ initialValue = false, ...props }: ControlledCheckb
 
 export const States = () => (
     <Grid>
-        <Row><ControlledCheckbox /> Unchecked</Row>
-        <Row><ControlledCheckbox initialValue /> Checked</Row>
-        <Row><ControlledCheckbox disabled /> Disabled</Row>
-        <Row><ControlledCheckbox initialValue disabled /> Checked & disabled</Row>
-        <Row><ControlledCheckbox readOnly initialValue /> Checked & readonly</Row>
-        <Row><ControlledCheckbox error="Some error" /> Error</Row>
-        <Row><ControlledCheckbox initialValue error="Some error" /> Checked + error</Row>
+        <Row>
+            <ControlledCheckbox /> Unchecked
+        </Row>
+        <Row>
+            <ControlledCheckbox initialValue /> Checked
+        </Row>
+        <Row>
+            <ControlledCheckbox disabled /> Disabled
+        </Row>
+        <Row>
+            <ControlledCheckbox initialValue disabled /> Checked & disabled
+        </Row>
+        <Row>
+            <ControlledCheckbox readOnly initialValue /> Checked & readonly
+        </Row>
+        <Row>
+            <ControlledCheckbox error="Some error" /> Error
+        </Row>
+        <Row>
+            <ControlledCheckbox initialValue error="Some error" /> Checked + error
+        </Row>
     </Grid>
 );
 
@@ -59,19 +76,37 @@ export const Indeterminate = () => {
             </Row>
 
             <SectionLabel>Indeterminate</SectionLabel>
-            <Row><IndeterminateCheckbox value={null} setValue={() => {}} /> Default</Row>
-            <Row><IndeterminateCheckbox value={null} setValue={() => {}} disabled /> Disabled</Row>
-            <Row><IndeterminateCheckbox value={null} setValue={() => {}} error="Some error" /> Error</Row>
+            <Row>
+                <IndeterminateCheckbox value={null} setValue={() => {}} /> Default
+            </Row>
+            <Row>
+                <IndeterminateCheckbox value={null} setValue={() => {}} disabled /> Disabled
+            </Row>
+            <Row>
+                <IndeterminateCheckbox value={null} setValue={() => {}} error="Some error" /> Error
+            </Row>
 
             <SectionLabel>Checked</SectionLabel>
-            <Row><IndeterminateCheckbox value={true} setValue={() => {}} /> Default</Row>
-            <Row><IndeterminateCheckbox value={true} setValue={() => {}} disabled /> Disabled</Row>
-            <Row><IndeterminateCheckbox value={true} setValue={() => {}} error="Some error" /> Error</Row>
+            <Row>
+                <IndeterminateCheckbox value={true} setValue={() => {}} /> Default
+            </Row>
+            <Row>
+                <IndeterminateCheckbox value={true} setValue={() => {}} disabled /> Disabled
+            </Row>
+            <Row>
+                <IndeterminateCheckbox value={true} setValue={() => {}} error="Some error" /> Error
+            </Row>
 
             <SectionLabel>Unchecked</SectionLabel>
-            <Row><IndeterminateCheckbox value={false} setValue={() => {}} /> Default</Row>
-            <Row><IndeterminateCheckbox value={false} setValue={() => {}} disabled /> Disabled</Row>
-            <Row><IndeterminateCheckbox value={false} setValue={() => {}} error="Some error" /> Error</Row>
+            <Row>
+                <IndeterminateCheckbox value={false} setValue={() => {}} /> Default
+            </Row>
+            <Row>
+                <IndeterminateCheckbox value={false} setValue={() => {}} disabled /> Disabled
+            </Row>
+            <Row>
+                <IndeterminateCheckbox value={false} setValue={() => {}} error="Some error" /> Error
+            </Row>
         </Grid>
     );
 };

package/src/components/checkbox/checkbox.style.ts

@@ -14,9 +14,12 @@ export const checkboxStyle = css`
     height: 16px;
     position: relative;
     box-sizing: border-box;
-    transition: border-color 120ms ease-out, background-color 120ms ease-out !important;
+    transition:
+        border-color 120ms ease-out,
+        background-color 120ms ease-out !important;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
         border-color: ${theme.color.primary.action};
         cursor: pointer;
     }
@@ -30,8 +33,8 @@ export const checkboxStyle = css`
         border-color: ${theme.color.danger.text};
     }
 
-    &[data-state="indeterminate"],
-    &[data-state="checked"] {
+    &[data-state='indeterminate'],
+    &[data-state='checked'] {
         background-color: ${theme.color.primary.action};
         border-color: ${theme.color.primary.action};
 

package/src/components/checkbox/checkbox.tsx

@@ -3,9 +3,7 @@ import clsx from 'clsx';
 import { type ComponentPropsWithoutRef, type FC } from 'react';
 import styled from 'styled-components';
 
-import {
-    CheckIcon, MinusIcon,
-} from '@apify/ui-icons';
+import { CheckIcon, MinusIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
 import { checkboxStyle } from './checkbox.style.js';
@@ -31,7 +29,10 @@ const IndeterminateIndicator = styled(StyledIndicator)`
     color: ${theme.color.neutral.textOnPrimary};
 `;
 
-type CheckboxBaseProps = Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitiveReact.Root>, 'checked' | 'onCheckedChange' | 'value'> & {
+type CheckboxBaseProps = Omit<
+    ComponentPropsWithoutRef<typeof CheckboxPrimitiveReact.Root>,
+    'checked' | 'onCheckedChange' | 'value'
+> & {
     setValue: (checked: boolean) => void;
     error?: string;
     disabled?: boolean;
@@ -56,11 +57,7 @@ const InternalCheckbox: FC<IndeterminateCheckboxProps> = ({
         checked={value == null ? 'indeterminate' : value}
         onCheckedChange={setValue}
         disabled={disabled || readOnly}
-        className={clsx(
-            className,
-            error && 'error',
-            (disabled || readOnly) && 'disabled',
-        )}
+        className={clsx(className, error && 'error', (disabled || readOnly) && 'disabled')}
     >
         {children}
     </StyledCheckbox>

package/src/components/chip.stories.tsx

@@ -291,11 +291,21 @@ export const AllSizes: Story = {
 export const WithVariousIcons: Story = {
     render: () => (
         <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-            <Chip type={CHIP_TYPES.SUCCESS} icon={mockIcons.check}>Approved</Chip>
-            <Chip type={CHIP_TYPES.WARNING} icon={mockIcons.warning}>Pending</Chip>
-            <Chip type={CHIP_TYPES.DANGER} icon={mockIcons.error}>Failed</Chip>
-            <Chip type={CHIP_TYPES.PRIMARY} icon={mockIcons.heart}>Favorite</Chip>
-            <Chip type={CHIP_TYPES.DEFAULT} icon={mockIcons.info}>Info</Chip>
+            <Chip type={CHIP_TYPES.SUCCESS} icon={mockIcons.check}>
+                Approved
+            </Chip>
+            <Chip type={CHIP_TYPES.WARNING} icon={mockIcons.warning}>
+                Pending
+            </Chip>
+            <Chip type={CHIP_TYPES.DANGER} icon={mockIcons.error}>
+                Failed
+            </Chip>
+            <Chip type={CHIP_TYPES.PRIMARY} icon={mockIcons.heart}>
+                Favorite
+            </Chip>
+            <Chip type={CHIP_TYPES.DEFAULT} icon={mockIcons.info}>
+                Info
+            </Chip>
         </div>
     ),
 };

package/src/components/chip.tsx

@@ -80,7 +80,7 @@ const chipTypeStyle = {
     `,
 } satisfies Record<CHIP_TYPES, unknown>;
 
-const StyledChip = styled.span<{ size: CHIP_SIZES, type: CHIP_TYPES, clickable: boolean }>`
+const StyledChip = styled.span<{ size: CHIP_SIZES; type: CHIP_TYPES; clickable: boolean }>`
     ${({ size }) => chipSizeStyle[size]};
     ${({ type }) => chipTypeStyle[type]};
     /* Static styles */
@@ -96,28 +96,38 @@ const StyledChip = styled.span<{ size: CHIP_SIZES, type: CHIP_TYPES, clickable:
 `;
 
 export type ChipProps = RegularBoxProps & {
-    type?: CHIP_TYPES
-    size?: CHIP_SIZES
-    icon?: React.ReactNode
-    clickable?: boolean
+    type?: CHIP_TYPES;
+    size?: CHIP_SIZES;
+    icon?: React.ReactNode;
+    clickable?: boolean;
 };
 
 /**
  * Component for displaying status and for labelling other components.
  * @deprecated Use Tag or Badge
  */
-export const Chip = forwardRef(({
-    type = CHIP_TYPES.DEFAULT,
-    size = CHIP_SIZES.MEDIUM,
-    icon,
-    children,
-    className,
-    ...passThroughProps
-}: ChipProps, ref) => {
-    const otherProps = { ...passThroughProps, type, size, className: clsx(className, classNames.BODY) };
+export const Chip = forwardRef(
+    (
+        {
+            type = CHIP_TYPES.DEFAULT,
+            size = CHIP_SIZES.MEDIUM,
+            icon,
+            children,
+            className,
+            ...passThroughProps
+        }: ChipProps,
+        ref,
+    ) => {
+        const otherProps = { ...passThroughProps, type, size, className: clsx(className, classNames.BODY) };
 
-    return <StyledChip ref={ref} {...otherProps}>{children}{icon}</StyledChip>;
-});
+        return (
+            <StyledChip ref={ref} {...otherProps}>
+                {children}
+                {icon}
+            </StyledChip>
+        );
+    },
+);
 
 Chip.displayName = 'Chip';
 

package/src/components/code/action_button.tsx

@@ -38,8 +38,9 @@ const StyledButton = styled.button<StyledButtonProps>`
         height: 2rem;
     }
 
-    ${({ $hasText }) => $hasText
-        && css`
+    ${({ $hasText }) =>
+        $hasText &&
+        css`
             width: auto;
             padding: ${theme.space.space4} ${theme.space.space8};
             p {
@@ -47,8 +48,9 @@ const StyledButton = styled.button<StyledButtonProps>`
             }
         `}
 
-    ${({ $successStyle }) => $successStyle
-        && css`
+    ${({ $successStyle }) =>
+        $successStyle &&
+        css`
             background-color: ${theme.color.success.action};
             color: ${theme.color.neutral.textOnPrimary};
             border: none;
@@ -86,12 +88,7 @@ export const ActionButton = ({
     };
 
     return (
-        <StyledButton
-            $successStyle={successStyle}
-            $hasText={hasText}
-            onClick={trackedOnClick}
-            {...props}
-        >
+        <StyledButton $successStyle={successStyle} $hasText={hasText} onClick={trackedOnClick} {...props}>
             {hasText ? <Text weight="bold">{children}</Text> : children}
         </StyledButton>
     );
@@ -108,9 +105,10 @@ export const CopyButton = ({ code, ...props }: CopyButtonProps) => {
     return (
         <ActionButton
             onClick={async () => copyToClipboard(code)}
-            data-test='copy_to_clipboard'
+            data-test="copy_to_clipboard"
             aria-label="Copy to clipboard"
-            {...props}>
+            {...props}
+        >
             {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
         </ActionButton>
     );

package/src/components/code/code_block/code_block.stories.jsx

@@ -14,10 +14,9 @@ export default {
 };
 
 const Template = ({ content, ...args }) => {
-    const longCode = `${Array.from(
-        { length: 20 },
-        () => content.split('\n')[1],
-    ).join(' ')}\n${Array.from({ length: 10 }, () => content).join('\n')}`;
+    const longCode = `${Array.from({ length: 20 }, () => content.split('\n')[1]).join(
+        ' ',
+    )}\n${Array.from({ length: 10 }, () => content).join('\n')}`;
     const multipleCodes = Array.from({ length: 5 }, (_, i) => ({
         key: i,
         label: `Code ${i}`,
@@ -43,11 +42,7 @@ const Template = ({ content, ...args }) => {
             <h2>CodeBlock</h2>
             <CodeBlock content={content} {...args} />
             <h2>CodeBlock with title</h2>
-            <CodeBlock title="What a code"
-
-                content={content}
-                {...args}
-            />
+            <CodeBlock title="What a code" content={content} {...args} />
             <h2>CodeBlock with gradient, dots and action</h2>
             <CodeBlock
                 content={content}
@@ -58,25 +53,12 @@ const Template = ({ content, ...args }) => {
                 {...args}
             />
             <h2>CodeBlock with long lines, action and gradient</h2>
-            <CodeBlock
-                content={longCode}
-                showGradient
-                showActionButton
-                {...args}
-            />
+            <CodeBlock content={longCode} showGradient showActionButton {...args} />
 
             <h2>CodeBlock with multiple long codes, highlighted lines, action and gradient</h2>
-            <CodeBlock
-                content={multipleLongCodes}
-                showGradient
-                showActionButton
-                {...args}
-            />
+            <CodeBlock content={multipleLongCodes} showGradient showActionButton {...args} />
             <h2>CodeBlock with multiple codes</h2>
-            <CodeBlock
-                content={multipleCodes}
-                {...args}
-            />
+            <CodeBlock content={multipleCodes} {...args} />
         </div>
     );
 };