@apify/ui-library 1.141.3 → 1.145.2-featverifieddeveloperbadge-bd59c6.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.141.3",
+    "version": "1.145.2-featverifieddeveloperbadge-bd59c6.13+33d7a3fb5e7",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -11,7 +11,8 @@
         "access": "public"
     },
     "scripts": {
-        "test": "echo \"Warning: no test specified\" && exit 0",
+        "test": "vitest run",
+        "test:watch": "vitest watch",
         "lint": "oxlint --type-aware .",
         "lint:fix": "oxlint --type-aware --fix .",
         "build": "pnpm run clean && pnpm run compile",
@@ -27,11 +28,12 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.39.1",
+        "@apify/ui-icons": "^1.41.1-featverifieddeveloperbadge-bd59c6.30+33d7a3fb5e7",
         "@floating-ui/react": "^0.27.19",
         "@floating-ui/react-dom": "^2.1.8",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.1.12",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-radio-group": "^1.3.8",
         "@radix-ui/react-switch": "^1.2.6",
         "@react-hook/resize-observer": "^2.0.2",
@@ -59,11 +61,14 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.356.1",
+        "@apify-packages/types": "^3.360.1",
         "@storybook/react-vite": "^10.3.5",
+        "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
         "@types/lodash": "^4.14.200",
         "@types/react": "19.2.2",
+        "jest-styled-components": "^7.4.0",
+        "jsdom": "^29.1.1",
         "recast": "^0.23.9",
         "style-dictionary": "^4.4.0",
         "styled-components": "^6.1.19"
@@ -73,5 +78,5 @@
         "src",
         "style"
     ],
-    "gitHead": "5e30cad3d0d55bc05c0cdb634ac8a67a7402c236"
+    "gitHead": "33d7a3fb5e710c1d9f32465b6e63edd9667b601a"
 }

package/src/components/box/box.stories.tsx

@@ -59,6 +59,24 @@ export const PaddingSpacing: Story = {
     ),
 };
 
+/**
+ * Responsive props accept breakpoint objects, e.g. `{ mobile: 'space8', tablet: 'space16', desktop: 'space32' }`.
+ * (*Resize the preview to see spacing change between mobile, tablet, and desktop breakpoints.*)
+ */
+export const ResponsiveProps: Story = {
+    render: () => (
+        <Box
+            p={{ mobile: 'space8', tablet: 'space16', desktop: 'space32' }}
+            style={{ background: '#fff8e1', borderRadius: '0.4rem', border: '1px solid #f6d365' }}
+        >
+            <Sample
+                label="Box with p={{ mobile: 'space8', tablet: 'space16', desktop: 'space32' }}"
+                background="#fff"
+            />
+        </Box>
+    ),
+};
+
 /** `as` prop renders the Box as a different HTML element while keeping all spacing props. */
 export const PolymorphicAs: Story = {
     render: () => (

package/src/components/box/box.tsx

@@ -1,31 +1,32 @@
 import type React from 'react';
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import type { Size } from '../../design_system/tokens';
 import type { WithTransientProps } from '../../type_utils';
+import { getResponsiveStyles, type ResponsiveValue } from '../../utils/css_utils.js';
 
 type ExtendedSize = Size | 'none' | 'auto';
 
 export interface MarginSpacingProps {
-    m?: ExtendedSize;
-    mt?: ExtendedSize;
-    mb?: ExtendedSize;
-    ml?: ExtendedSize;
-    mr?: ExtendedSize;
-    mx?: ExtendedSize;
-    my?: ExtendedSize;
+    m?: ResponsiveValue<ExtendedSize>;
+    mt?: ResponsiveValue<ExtendedSize>;
+    mb?: ResponsiveValue<ExtendedSize>;
+    ml?: ResponsiveValue<ExtendedSize>;
+    mr?: ResponsiveValue<ExtendedSize>;
+    mx?: ResponsiveValue<ExtendedSize>;
+    my?: ResponsiveValue<ExtendedSize>;
 }
 
 export interface PaddingSpacingProps {
-    p?: ExtendedSize;
-    pt?: ExtendedSize;
-    pb?: ExtendedSize;
-    pl?: ExtendedSize;
-    pr?: ExtendedSize;
-    px?: ExtendedSize;
-    py?: ExtendedSize;
+    p?: ResponsiveValue<ExtendedSize>;
+    pt?: ResponsiveValue<ExtendedSize>;
+    pb?: ResponsiveValue<ExtendedSize>;
+    pl?: ResponsiveValue<ExtendedSize>;
+    pr?: ResponsiveValue<ExtendedSize>;
+    px?: ResponsiveValue<ExtendedSize>;
+    py?: ResponsiveValue<ExtendedSize>;
 }
 
 type SharedBoxProps = {
@@ -54,53 +55,21 @@ const getSizeValue = (token?: ExtendedSize) => {
 };
 
 const StyledBox = styled.div<WithTransientProps<MarginSpacingProps & PaddingSpacingProps>>`
-    ${({ $mt, $my, $m }) =>
-        ($mt || $my || $m) &&
-        css`
-            margin-top: ${getSizeValue($mt || $my || $m)};
-        `}
-
-    ${({ $mb, $my, $m }) =>
-        ($mb || $my || $m) &&
-        css`
-            margin-bottom: ${getSizeValue($mb || $my || $m)};
-        `}
-
-    ${({ $mr, $mx, $m }) =>
-        ($mr || $mx || $m) &&
-        css`
-            margin-right: ${getSizeValue($mr || $mx || $m)};
-        `}
-
-    ${({ $ml, $mx, $m }) =>
-        ($ml || $mx || $m) &&
-        css`
-            margin-left: ${getSizeValue($ml || $mx || $m)};
-        `}
-
-    ${({ $pt, $py, $p }) =>
-        ($pt || $py || $p) &&
-        css`
-            padding-top: ${getSizeValue($pt || $py || $p)};
-        `}
-
-    ${({ $pb, $py, $p }) =>
-        ($pb || $py || $p) &&
-        css`
-            padding-bottom: ${getSizeValue($pb || $py || $p)};
-        `}
-
-    ${({ $pr, $px, $p }) =>
-        ($pr || $px || $p) &&
-        css`
-            padding-right: ${getSizeValue($pr || $px || $p)};
-        `}
-
-    ${({ $pl, $px, $p }) =>
-        ($pl || $px || $p) &&
-        css`
-            padding-left: ${getSizeValue($pl || $px || $p)};
-        `}
+    ${({ $mt, $my, $m }) => getResponsiveStyles('margin-top', getSizeValue, $mt, [$my, $m])}
+
+    ${({ $mb, $my, $m }) => getResponsiveStyles('margin-bottom', getSizeValue, $mb, [$my, $m])}
+
+    ${({ $mr, $mx, $m }) => getResponsiveStyles('margin-right', getSizeValue, $mr, [$mx, $m])}
+
+    ${({ $ml, $mx, $m }) => getResponsiveStyles('margin-left', getSizeValue, $ml, [$mx, $m])}
+
+    ${({ $pt, $py, $p }) => getResponsiveStyles('padding-top', getSizeValue, $pt, [$py, $p])}
+
+    ${({ $pb, $py, $p }) => getResponsiveStyles('padding-bottom', getSizeValue, $pb, [$py, $p])}
+
+    ${({ $pr, $px, $p }) => getResponsiveStyles('padding-right', getSizeValue, $pr, [$px, $p])}
+
+    ${({ $pl, $px, $p }) => getResponsiveStyles('padding-left', getSizeValue, $pl, [$px, $p])}
 `;
 // This component should work as a base component for all low level components (Heading, Message, Card, ...) to make it easy to define spacing.
 // Right now, it's quite common to define some sort of spacing on these components already using css. Card = styled.div`margin-bottom: theme.space.space8`

package/src/components/breadcrumb/breadcrumb.tsx

@@ -29,6 +29,7 @@ const StyledBreadcrumbLink = styled(Link)`
     &:hover {
         color: ${theme.color.neutral.textMuted};
         span {
+            /* TODO: (typography-partial) font-weight override without paired font-size/line-height — revisit to confirm intended typography token. */
             font-weight: 500;
         }
     }

package/src/components/card/card.tsx

@@ -60,6 +60,7 @@ export const StyledCardWrapper = styled(Box)<StyledCardProps>`
             margin-left: 2rem;
 
             button {
+                /* TODO: (typography-mismatch) font-size 1.4rem + line-height 1.4rem + font-weight 500 is not a token in typography_theme.ts — resolve with designer. */
                 font-size: 1.4rem;
                 line-height: 1.4rem;
                 font-weight: 500;

package/src/components/chip/chip.tsx

@@ -50,6 +50,7 @@ const chipSizeStyle = {
         border-radius: 100px;
     `,
     [CHIP_SIZES.LARGE]: css`
+        /* TODO: (typography-mismatch) 16px/20px does not match any canonical typography token — needs designer input. Blocks migrating chipSizeStyle to typography token interpolations (XS/S match bodyS, M matches bodyM). */
         font-size: 16px;
         line-height: 20px;
         padding: 2px 8px;
@@ -114,6 +115,7 @@ const StyledChip = styled.span<{ size: CHIP_SIZES; type: CHIP_TYPES; clickable:
     flex-direction: row;
     justify-content: center;
     align-items: center;
+    /* TODO: (typography-keyword) 'normal' keyword used instead of numeric value (400) or typography token. */
     font-weight: normal;
     white-space: nowrap;
     cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};

package/src/components/code/code_block/code_block.styled.tsx

@@ -118,10 +118,9 @@ export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<{
 
                 &::after {
                     /* ensures same width of text when switching tabs and making it bold */
-                    ${theme.typography.shared.tablet.bodyMStrong}
+                    ${theme.typography.content.tablet.heading5}
                     display: block;
                     content: attr(title);
-                    font-weight: bold;
                     height: 0px;
                     color: transparent;
                     overflow: hidden;

package/src/components/code/one_light_theme.ts

@@ -82,6 +82,7 @@ export const oneLightTheme: PrismTheme = {
         {
             types: ['important', 'bold'],
             style: {
+                // NOTE: syntax highlighting (PrismJS theme); typography tokens do not apply here — 'bold' keyword is intentional.
                 fontWeight: 'bold',
             },
         },

package/src/components/dropdown/dropdown.context.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+export type DropdownContextValue = {
+    handleSelectAndClose: (event?: Event) => void;
+};
+
+export const DropdownContext = createContext<DropdownContextValue | null>(null);
+export const useDropdownContext = () => {
+    const context = useContext(DropdownContext);
+    if (!context) {
+        throw new Error('Dropdown components must be used within a DropdownRoot provider');
+    }
+    return context;
+};

package/src/components/dropdown/dropdown.stories.tsx

@@ -0,0 +1,343 @@
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+import { AnalyticsIcon, ArrowRightIcon, PeopleIcon, UnlockIcon } from '@apify/ui-icons';
+
+import { Dropdown } from './dropdown.js';
+import { DropdownButton } from './dropdown_button.js';
+import { DropdownShell } from './dropdown_shell.js';
+
+const CLASS_NAME_PREFIX = 'Dropdown';
+const elementClass = (name: string) => `${CLASS_NAME_PREFIX}-${name}`;
+
+const ELEMENT_CLASSES = {
+    CUSTOM_BUTTON: elementClass('custom_button'),
+};
+
+interface DropdownStoryProps {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    alignOffset?: number;
+    width?: string;
+    height?: string;
+}
+
+const DropdownWrapper = styled.div`
+    position: relative;
+    padding-bottom: 40rem;
+    margin-top: 300px;
+    #positioned-wrapper {
+        display: flex;
+        gap: 20px;
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%, 0);
+    }
+    overflow: auto;
+
+    .${ELEMENT_CLASSES.CUSTOM_BUTTON} {
+        padding: 8px 16px;
+        background: #007bff;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+
+        &:hover {
+            background: #0056b3;
+        }
+    }
+`;
+
+export default {
+    title: 'UI-Library/Inputs/Dropdown',
+    component: Dropdown,
+    parameters: {
+        layout: 'padded',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=5236-33981&p=f&t=ufGWQB5VxrrP26yD-0',
+        },
+    },
+    argTypes: {
+        side: {
+            control: { type: 'select' },
+            options: ['top', 'right', 'bottom', 'left'],
+        },
+        align: {
+            control: { type: 'select' },
+            options: ['start', 'center', 'end'],
+        },
+        sideOffset: {
+            control: { type: 'number' },
+        },
+        alignOffset: {
+            control: { type: 'number' },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Width of the dropdown (e.g., "200px", "50%", "full-width")',
+        },
+        height: {
+            control: { type: 'text' },
+            description: 'Height of the dropdown (e.g., "300px", "50vh", "auto")',
+        },
+    },
+    args: {
+        side: 'bottom',
+        align: 'start',
+        sideOffset: 4,
+        alignOffset: 0,
+        width: '250px',
+        height: '450px',
+    },
+};
+
+export const CustomButton = (args: DropdownStoryProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [radioValue, setRadioValue] = useState('option1');
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    return (
+        <DropdownWrapper>
+            <div id="positioned-wrapper">
+                <div>
+                    <button
+                        ref={buttonRef}
+                        className={ELEMENT_CLASSES.CUSTOM_BUTTON}
+                        onClick={() => setIsOpen(!isOpen)}
+                    >
+                        Custom Button with Dropdown
+                    </button>
+
+                    <DropdownShell
+                        isOpen={isOpen}
+                        onIsOpenChange={setIsOpen}
+                        closeOnSelect={false}
+                        width={args.width}
+                        height={args.height}
+                        triggerRef={buttonRef}
+                        contentProps={{
+                            side: args.side,
+                            align: args.align,
+                            sideOffset: args.sideOffset,
+                            alignOffset: args.alignOffset,
+                        }}
+                    >
+                        <Dropdown.Item selected>Selected item</Dropdown.Item>
+                        <Dropdown.Item icon={<ArrowRightIcon size="16" />}>Item with icon</Dropdown.Item>
+                        <Dropdown.Item description="This is a description">Item with description</Dropdown.Item>
+                        <Dropdown.Item description="This is a very very veryyy looong description">
+                            Item with very very very looong name and description
+                        </Dropdown.Item>
+                        <Dropdown.Item disabled>Disabled item</Dropdown.Item>
+                        <Dropdown.Separator />
+                        <Dropdown.Label>Checkbox group</Dropdown.Label>
+                        <Dropdown.CheckboxItem checked={true}>Checkbox item (checked)</Dropdown.CheckboxItem>
+                        <Dropdown.CheckboxItem checked={false}>Checkbox item (unchecked)</Dropdown.CheckboxItem>
+                        <Dropdown.Separator />
+                        <Dropdown.Label>Radio group</Dropdown.Label>
+                        <Dropdown.RadioGroup
+                            options={[
+                                { value: 'option1', label: 'Radio option 1' },
+                                { value: 'option2', label: 'Radio option 2' },
+                                { value: 'option3', label: 'Radio option 3' },
+                            ]}
+                            value={radioValue}
+                            setValue={setRadioValue}
+                        />
+                        <Dropdown.Controls>
+                            <Dropdown.Item selected>Selected item</Dropdown.Item>
+                            <Dropdown.Item icon={<ArrowRightIcon size="16" />}>Item with icon</Dropdown.Item>
+                            <Dropdown.Item description="This is a description">Item with description</Dropdown.Item>
+                            <Dropdown.Item description="This is a very very veryyy looong description">
+                                Item with very very very looong name and description
+                            </Dropdown.Item>
+                        </Dropdown.Controls>
+                    </DropdownShell>
+                </div>
+            </div>
+        </DropdownWrapper>
+    );
+};
+
+export const DefaultButtonVariants = (args: DropdownStoryProps) => {
+    const [checked1, setChecked1] = useState(false);
+    const [checked2, setChecked2] = useState(true);
+    const [checked3, setChecked3] = useState(true);
+    const [radioValue, setRadioValue] = useState('one');
+    return (
+        <DropdownWrapper>
+            <div id="positioned-wrapper">
+                <DropdownButton
+                    buttonLabel="Dropdown (closeOnSelect=true)"
+                    closeOnSelect={true}
+                    width={args.width}
+                    height={args.height}
+                    buttonProps={{
+                        variant: 'secondary',
+                        size: 'medium',
+                        onClick: () => undefined,
+                        trackingId: 'dropdown-button-2',
+                    }}
+                    contentProps={{
+                        side: args.side,
+                        align: args.align,
+                        sideOffset: args.sideOffset,
+                        alignOffset: args.alignOffset,
+                    }}
+                >
+                    <Dropdown.Label>Section label</Dropdown.Label>
+                    <Dropdown.Item>Plain item</Dropdown.Item>
+                    <Dropdown.Item icon={<PeopleIcon size="16" />} trailingIcon={<ArrowRightIcon size="16" />}>
+                        Item with icons
+                    </Dropdown.Item>
+                    <Dropdown.Item description="Describe item">Item with description</Dropdown.Item>
+                    <Dropdown.Item description="A reeeeaaaally looooooong description">
+                        Item with loooong text and description
+                    </Dropdown.Item>
+                    <Dropdown.Item icon={<UnlockIcon size="16" />} description="Describe item">
+                        Item with icon and description
+                    </Dropdown.Item>
+                    <Dropdown.Item selected description="Describe item">
+                        Selected item with description
+                    </Dropdown.Item>
+                    <Dropdown.Item selected trailingIcon={<AnalyticsIcon size="16" />} description="Describe item">
+                        Selected item with trailing icon
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                        disabled
+                        icon={<AnalyticsIcon size="16" />}
+                        trailingIcon={<PeopleIcon size="16" />}
+                        description="Describe item"
+                    >
+                        Disabled item with icons and description
+                    </Dropdown.Item>
+                    <Dropdown.Separator />
+                    <Dropdown.Label>Checkbox group</Dropdown.Label>
+                    <Dropdown.CheckboxItem checked={checked1} onCheckedChange={setChecked1} description="Describe item">
+                        Checkbox item 1
+                    </Dropdown.CheckboxItem>
+                    <Dropdown.CheckboxItem
+                        disabled
+                        checked={checked2}
+                        onCheckedChange={setChecked2}
+                        description="Describe item"
+                    >
+                        Checkbox item 2 (disabled)
+                    </Dropdown.CheckboxItem>
+                    <Dropdown.CheckboxItem
+                        checked={checked3}
+                        onCheckedChange={setChecked3}
+                        icon={<ArrowRightIcon size="16" />}
+                        trailingIcon={<AnalyticsIcon size="16" />}
+                        description="Describe item"
+                    >
+                        Checkbox with icons 3
+                    </Dropdown.CheckboxItem>
+                    <Dropdown.Separator />
+                    <Dropdown.Label>Radio group</Dropdown.Label>
+                    <Dropdown.RadioGroup
+                        options={[
+                            {
+                                label: 'One with a reeeaaaally looooooong label',
+                                description: 'Describe item but very very loooong',
+                                value: 'one',
+                            },
+                            { label: 'Two', value: 'two', description: 'Describe item', disabled: true },
+                            { label: 'Three', value: 'three' },
+                        ]}
+                        value={radioValue}
+                        setValue={setRadioValue}
+                    />
+                </DropdownButton>
+                <br />
+                <br />
+                <DropdownButton
+                    buttonLabel="Dropdown (closeOnSelect=false)"
+                    closeOnSelect={false}
+                    width={args.width}
+                    height={args.height}
+                    buttonProps={{
+                        variant: 'secondary',
+                        size: 'medium',
+                        onClick: () => undefined,
+                        trackingId: 'dropdown-button-2',
+                    }}
+                    contentProps={{
+                        side: args.side,
+                        align: args.align,
+                        sideOffset: args.sideOffset,
+                        alignOffset: args.alignOffset,
+                    }}
+                >
+                    <Dropdown.Label>Section label</Dropdown.Label>
+                    <Dropdown.Item>Plain item</Dropdown.Item>
+                    <Dropdown.Item icon={<PeopleIcon size="16" />} trailingIcon={<AnalyticsIcon size="16" />}>
+                        Item with icons
+                    </Dropdown.Item>
+                    <Dropdown.Item description="Describe item">Item with description</Dropdown.Item>
+                    <Dropdown.Item description="A reeeeaaaally looooooong description">
+                        Item with loooong text and description
+                    </Dropdown.Item>
+                    <Dropdown.Item icon={<AnalyticsIcon size="16" />} description="Describe item">
+                        Item with icon and description
+                    </Dropdown.Item>
+                    <Dropdown.Item selected description="Describe item">
+                        Selected item with description
+                    </Dropdown.Item>
+                    <Dropdown.Item selected trailingIcon={<UnlockIcon size="16" />} description="Describe item">
+                        Selected item with trailing icon
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                        disabled
+                        icon={<UnlockIcon size="16" />}
+                        trailingIcon={<ArrowRightIcon size="16" />}
+                        description="Describe item"
+                    >
+                        Disabled item with icons and description
+                    </Dropdown.Item>
+                    <Dropdown.Separator />
+                    <Dropdown.Label>Checkbox group</Dropdown.Label>
+                    <Dropdown.CheckboxItem checked={checked1} onCheckedChange={setChecked1} description="Describe item">
+                        Checkbox item 1
+                    </Dropdown.CheckboxItem>
+                    <Dropdown.CheckboxItem
+                        disabled
+                        checked={checked2}
+                        onCheckedChange={setChecked2}
+                        description="Describe item"
+                    >
+                        Checkbox item 2 (disabled)
+                    </Dropdown.CheckboxItem>
+                    <Dropdown.CheckboxItem
+                        checked={checked3}
+                        onCheckedChange={setChecked3}
+                        icon={<PeopleIcon size="16" />}
+                        trailingIcon={<UnlockIcon size="16" />}
+                        description="Describe item"
+                    >
+                        Checkbox with icons 3
+                    </Dropdown.CheckboxItem>
+                    <Dropdown.Separator />
+                    <Dropdown.Label>Radio group</Dropdown.Label>
+                    <Dropdown.RadioGroup
+                        options={[
+                            {
+                                label: 'One with a reeeaaaally looooooong label',
+                                description: 'Describe item but very very loooong',
+                                value: 'one',
+                            },
+                            { label: 'Two', value: 'two', description: 'Describe item', disabled: true },
+                            { label: 'Three', value: 'three' },
+                        ]}
+                        value={radioValue}
+                        setValue={setRadioValue}
+                    />
+                </DropdownButton>
+            </div>
+        </DropdownWrapper>
+    );
+};