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

package/src/components/dropdown/dropdown_shell.tsx

@@ -0,0 +1,139 @@
+import {
+    autoUpdate,
+    flip,
+    offset as offsetMiddleware,
+    type Placement,
+    shift,
+    size,
+    useFloating,
+} from '@floating-ui/react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { type ReactNode, type RefObject, useCallback, useLayoutEffect } from 'react';
+
+import { theme } from '../../design_system/theme.js';
+import { DropdownContext } from './dropdown.context.js';
+import { ScrollableContent, StyledContent } from './dropdown.styled.js';
+import type { BaseDropdownContentProps } from './dropdown.types.js';
+
+export type DropdownShellProps = BaseDropdownContentProps & {
+    children: ReactNode;
+    isOpen: boolean;
+    onIsOpenChange: (open: boolean) => void;
+    triggerRef: RefObject<HTMLElement | null>;
+    strategy?: 'absolute' | 'fixed';
+};
+
+/**
+ * DropdownShell positions the dropdown relative to a custom trigger element via Floating UI.
+ * Use it when you have a custom trigger (not a Button) and need explicit ref-based positioning.
+ */
+export const DropdownShell = ({
+    isOpen,
+    onIsOpenChange,
+    children,
+    closeOnSelect = true,
+    contentProps,
+    width,
+    height,
+    triggerRef,
+    strategy = 'absolute',
+    zIndex,
+}: DropdownShellProps) => {
+    const handleSelectAndClose = useCallback(
+        (event?: Event) => {
+            if (closeOnSelect) onIsOpenChange(false);
+            if (event) event.preventDefault();
+        },
+        [closeOnSelect, onIsOpenChange],
+    );
+
+    const side = contentProps?.side || 'bottom';
+    const align = contentProps?.align || 'start';
+    const sideOffset = contentProps?.sideOffset || 0;
+    const alignOffset = contentProps?.alignOffset || 0;
+
+    const placement: Placement = align === 'center' ? (side as Placement) : (`${side}-${align}` as Placement);
+
+    const floatingMiddleware = [
+        shift(),
+        flip(),
+        size({
+            apply({ availableHeight, elements }) {
+                Object.assign(elements.floating.style, {
+                    maxHeight: `calc(${availableHeight}px - ${theme.space.space8})`,
+                });
+            },
+        }),
+    ];
+
+    if (sideOffset || alignOffset) {
+        floatingMiddleware.push(offsetMiddleware({ mainAxis: sideOffset, crossAxis: alignOffset }));
+    }
+
+    const {
+        x,
+        y,
+        refs: { setReference, setFloating },
+        strategy: floatingStrategy,
+    } = useFloating({
+        placement,
+        strategy,
+        middleware: floatingMiddleware,
+        whileElementsMounted: autoUpdate,
+    });
+
+    useLayoutEffect(() => {
+        if (triggerRef?.current) {
+            setReference(triggerRef.current);
+        }
+    }, [triggerRef, setReference]);
+
+    const handlePointerDownOutside = useCallback(
+        (event: any) => {
+            const isInsideTrigger = triggerRef?.current?.contains(event.detail.originalEvent.target as Node);
+            if (!isInsideTrigger) {
+                onIsOpenChange(false);
+            }
+        },
+        [triggerRef, onIsOpenChange],
+    );
+
+    const shouldShowDropdown = isOpen && x !== null && y !== null;
+
+    const setFloatingRef = useCallback(
+        (element: HTMLElement | null) => {
+            setFloating(element);
+        },
+        [setFloating],
+    );
+
+    if (!shouldShowDropdown) return null;
+
+    const fullscreenContainer = document.fullscreenElement as HTMLElement | null;
+
+    return (
+        <DropdownContext.Provider value={{ handleSelectAndClose }}>
+            <DropdownMenu.Root open={true} modal={false}>
+                <DropdownMenu.Portal container={fullscreenContainer ?? undefined}>
+                    <StyledContent
+                        ref={setFloatingRef}
+                        $width={width}
+                        $height={height}
+                        $zIndex={zIndex}
+                        data-radix-dropdown-content
+                        onPointerDownOutside={handlePointerDownOutside}
+                        style={{
+                            position: floatingStrategy,
+                            top: y ?? '',
+                            left: x ?? '',
+                            zIndex: zIndex ?? 100,
+                        }}
+                        {...contentProps}
+                    >
+                        <ScrollableContent>{children}</ScrollableContent>
+                    </StyledContent>
+                </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+        </DropdownContext.Provider>
+    );
+};

package/src/components/dropdown/index.ts

@@ -0,0 +1,6 @@
+export { Dropdown } from './dropdown.js';
+export { DropdownButton } from './dropdown_button.js';
+export { DropdownShell } from './dropdown_shell.js';
+export type { DropdownShellProps } from './dropdown_shell.js';
+export { DROPDOWN_ELEMENT_CLASSES } from './dropdown.styled.js';
+export type { BaseDropdownItemProps, BaseDropdownContentProps } from './dropdown.types.js';

package/src/components/index.ts

@@ -37,3 +37,4 @@ export * from './select';
 export * from './switch';
 export * from './table';
 export * from './breadcrumb';
+export * from './dropdown';

package/src/components/message/message.stories.jsx

@@ -12,6 +12,7 @@ const MESSAGE_TYPES = ['info', 'warning', 'danger', 'success'];
 
 export default {
     title: 'UI-Library/Message (aka Banner)',
+    tags: ['deprecated'],
     component: Message,
     argTypes: {
         type: {

package/src/components/message/message.tsx

@@ -158,6 +158,8 @@ type MessageProps = BoxProps & {
 
 /**
  * Component used to display larger messages that are part of the content of the application.
+ * @deprecated Use `Alert` instead once it is available.
+ * @see https://www.notion.so/apify/Design-system-roadmap-2026-326f39950a2280d4b81bec00ebc9cf44
  */
 export const Message: React.FC<MessageProps> = ({
     className,

package/src/components/pagination/pagination.tsx

@@ -15,6 +15,7 @@ const PaginationButtonBase = styled(Button).attrs({ variant: 'tertiary' })`
     padding: 0;
     height: 28px;
     min-width: 28px;
+    /* TODO: (typography-partial) font-weight override without paired font-size/line-height — revisit to confirm intended typography token. */
     font-weight: 400 !important; /* default for button is medium, force regular to all page selection buttons */
 
     &:disabled {

package/src/components/tabs/tab.tsx

@@ -199,11 +199,11 @@ export const Tab = ({
     const href = typeof to === 'string' ? to : createPath(to);
     return (
         <TabWrapper
+            data-test="tab"
             {...props}
             id={id}
             to={to}
             role="tab"
-            data-test="tab"
             data-test-url={href}
             className={clsx(className, { active, disabled })}
             onClick={onSelect ? (event) => onSelect({ id, href, event }) : undefined}

package/src/design_system/colors/build_color_tokens.js

@@ -45,6 +45,15 @@ async function buildTheme(theme) {
         },
     });
 
+    // Format to generate a plain CSS file with tokens inside a :root block
+    StyleDictionary.registerFormat({
+        name: 'css/custom-properties',
+        format: ({ dictionary }) => {
+            const lines = dictionary.allTokens.map((token) => `  --${token.name}: ${token.$value};`);
+            return `${DO_NOT_EXPORT_COMMENT}\n:root {\n${lines.join('\n')}\n}\n`;
+        },
+    });
+
     // Format to generate typescript file that exports CSS variables as a string
     // Example: export const tokens = `--color-neutral-text: #000; --color-primary: #fff;`
     StyleDictionary.registerFormat({
@@ -165,6 +174,11 @@ async function buildTheme(theme) {
                         mapName: 'tokens',
                         filter: 'only-palette',
                     },
+                    {
+                        destination: `tokens.${theme}.css`,
+                        format: 'css/custom-properties',
+                        filter: 'only-colors',
+                    },
                 ],
             },
         },

package/src/design_system/colors/colors.stories.tsx

@@ -0,0 +1,395 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { CSSProperties, ReactNode } from 'react';
+
+import { theme } from '../theme.js';
+import { cssColorsVariablesDark, cssColorsVariablesLight, darkTheme, lightTheme } from './index.js';
+
+type ColorToken = {
+    name: string;
+    value: string;
+    variable: string;
+};
+
+type PaletteColor = {
+    name: string;
+    shade: string;
+    value: string;
+};
+
+type SemanticColorSection = {
+    title: string;
+    prefix: string;
+    description: string;
+};
+
+const basePaletteFamilies = ['blue', 'green', 'yellow', 'red'];
+const neutralPaletteFamilies = ['neutral'];
+const decorativePaletteFamilies = [
+    'coral',
+    'lavender',
+    'bamboo',
+    'rose',
+    'buttercup',
+    'paprika',
+    'teal',
+    'indigo',
+    'slate',
+];
+const brandPaletteFamilies = ['magenta', 'mondo', 'lime', 'meteorite', 'logo'];
+const semanticColorSections: SemanticColorSection[] = [
+    {
+        title: 'Neutral',
+        prefix: 'neutral',
+        description: 'Foundational semantic colors for text, icons, surfaces, borders, and controls.',
+    },
+    {
+        title: 'Primary',
+        prefix: 'primary',
+        description: 'Primary brand actions, selected states, interactive text, and blue-tinted surfaces.',
+    },
+    {
+        title: 'PrimaryBlack',
+        prefix: 'primaryBlack',
+        description: 'High-emphasis black/white primary action tokens.',
+    },
+    {
+        title: 'Success',
+        prefix: 'success',
+        description: 'Positive status colors for success states, chips, borders, and actions.',
+    },
+    {
+        title: 'Warning',
+        prefix: 'warning',
+        description: 'Cautionary status colors for warning states, chips, borders, and fields.',
+    },
+    {
+        title: 'Danger',
+        prefix: 'danger',
+        description: 'Critical status colors for destructive actions, errors, chips, and borders.',
+    },
+    {
+        title: 'Special',
+        prefix: 'special',
+        description: 'Special-purpose semantic colors for plans and highlights.',
+    },
+];
+
+const styles = {
+    page: { display: 'flex', flexDirection: 'column', gap: 40, padding: 24, color: theme.color.neutral.text },
+    section: { display: 'flex', flexDirection: 'column', gap: 20 },
+    paletteGroup: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 20,
+        padding: 20,
+        border: `1px solid ${theme.color.neutral.border}`,
+        borderRadius: 10,
+        background: lightTheme.neutral0,
+        color: lightTheme.neutral850,
+    },
+    paletteGroupHeader: { display: 'flex', flexDirection: 'column', gap: 4 },
+    paletteGroupTitle: { margin: 0, fontSize: 20, fontWeight: 700, lineHeight: 1.2 },
+    paletteGroupDescription: { margin: 0, color: lightTheme.neutral500, fontSize: 12, lineHeight: 1.4 },
+    sectionTitle: {
+        margin: 0,
+        paddingBottom: 10,
+        borderBottom: `1px solid ${theme.color.neutral.border}`,
+        fontSize: 28,
+        fontWeight: 700,
+        lineHeight: 1.2,
+    },
+    themeBlock: { display: 'flex', flexDirection: 'column', gap: 20 },
+    themeBlockDark: { padding: 24, borderRadius: 8, background: darkTheme.neutral900, color: darkTheme.neutral50 },
+    themeTitle: { margin: 0, fontSize: 22, fontWeight: 700, lineHeight: 1.2 },
+    neutralThemeGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 32 },
+    paletteGrid: { display: 'grid', gridTemplateColumns: 'repeat(4, minmax(160px, 1fr))', gap: '28px 40px' },
+    paletteColumn: { display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 },
+    paletteColumnTitle: { margin: 0, fontSize: 18, fontWeight: 700, lineHeight: 1.2 },
+    paletteRow: { display: 'grid', gridTemplateColumns: '92px minmax(0, 1fr)', gap: 10, alignItems: 'center' },
+    paletteSwatch: { height: 44, borderRadius: 8 },
+    paletteMeta: { display: 'flex', flexDirection: 'column', minWidth: 0, fontSize: 12, lineHeight: 1.25 },
+    paletteShade: { fontSize: 16, fontWeight: 700 },
+    semanticGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr' },
+    semanticPanel: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+        padding: 24,
+        background: lightTheme.neutral0,
+        color: lightTheme.neutral850,
+    },
+    semanticPanelDark: { borderRadius: 8, background: darkTheme.neutral900, color: darkTheme.neutral50 },
+    semanticTokenRow: { display: 'grid', gridTemplateColumns: '64px minmax(0, 1fr)', gap: 10, alignItems: 'center' },
+    semanticTokenSwatch: { height: 28, borderRadius: 6 },
+    tokenMeta: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        marginTop: 6,
+        minWidth: 0,
+        fontSize: 11,
+        lineHeight: 1.25,
+    },
+    paletteName: { overflow: 'hidden', fontWeight: 700, textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    colorValue: {
+        overflow: 'hidden',
+        color: lightTheme.neutral500,
+        fontFamily: 'monospace',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+} satisfies Record<string, CSSProperties>;
+
+const parseColorTokens = (tokens: string): ColorToken[] =>
+    tokens
+        .trim()
+        .split('\n')
+        .map((line) => line.trim().match(/^(--color-([\w-]+)):\s*(.+);$/))
+        .filter((match): match is RegExpMatchArray => Boolean(match))
+        .map(([, variable, path, value]) => ({
+            name: path.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase()),
+            value,
+            variable,
+        }));
+
+const lightColors = parseColorTokens(cssColorsVariablesLight);
+const darkColors = parseColorTokens(cssColorsVariablesDark);
+
+const formatLabel = (name: string) =>
+    name
+        .replace(/([a-z])([A-Z0-9])/g, '$1 $2')
+        .replace(/^./, (char) => char.toUpperCase())
+        .toLowerCase()
+        .replace(/^./, (char) => char.toUpperCase());
+
+const isColorInPrefix = (name: string, prefix: string) =>
+    name === prefix || name.startsWith(`${prefix}${name[prefix.length]?.toUpperCase() ?? ''}`);
+
+const getColorDisplayName = (name: string, prefix: string) => {
+    const displayName = name.slice(prefix.length);
+
+    return formatLabel(displayName ? `${displayName[0].toLowerCase()}${displayName.slice(1)}` : name);
+};
+
+const getPaletteNameByValue = (value: string, palette: Record<string, string>) => {
+    const paletteColor = Object.entries(palette).find(
+        ([, paletteValue]) => paletteValue.toLowerCase() === value.toLowerCase(),
+    );
+
+    return paletteColor ? formatLabel(paletteColor[0]) : 'Color';
+};
+
+const getColorSectionItems = (colors: ColorToken[], prefix: string) =>
+    colors
+        .filter(({ name }) => isColorInPrefix(name, prefix))
+        .sort((colorA, colorB) => colorA.name.localeCompare(colorB.name));
+
+const getPaletteFamily = (name: string) => name.match(/^[a-z]+/)?.[0] ?? name;
+
+const getPaletteShade = (name: string) => {
+    const shade = name.slice(getPaletteFamily(name).length);
+
+    return shade || name;
+};
+
+const getPaletteGroups = (palette: Record<string, string>) =>
+    Object.entries(palette).reduce<Record<string, PaletteColor[]>>((groups, [name, value]) => {
+        const family = getPaletteFamily(name);
+        const familyColors = [...(groups[family] ?? []), { name, shade: getPaletteShade(name), value }].sort(
+            (colorA, colorB) => colorA.name.localeCompare(colorB.name, undefined, { numeric: true }),
+        );
+
+        return { ...groups, [family]: familyColors };
+    }, {});
+
+const getPaletteGroupsByFamily = (palette: Record<string, string>, families: string[]) => {
+    const groups = getPaletteGroups(palette);
+
+    return families.flatMap((family) => (groups[family] ? [[family, groups[family]] as const] : []));
+};
+
+const Section = ({ title, children }: { title: string; children?: ReactNode }) => (
+    <section style={styles.section}>
+        <h2 style={styles.sectionTitle}>{title}</h2>
+        {children}
+    </section>
+);
+
+const PaletteColumn = ({ family, colors }: { family: string; colors: PaletteColor[] }) => (
+    <div style={styles.paletteColumn}>
+        <h3 style={styles.paletteColumnTitle}>{formatLabel(family)}</h3>
+        {colors.map(({ name, shade, value }) => (
+            <div key={name} style={styles.paletteRow}>
+                <div style={{ ...styles.paletteSwatch, backgroundColor: value }} />
+                <div style={styles.paletteMeta}>
+                    <span style={styles.paletteShade}>{shade}</span>
+                    <span style={styles.colorValue} title={value}>
+                        {value}
+                    </span>
+                </div>
+            </div>
+        ))}
+    </div>
+);
+
+const PaletteFamilyGrid = ({ families, palette }: { families: string[]; palette: Record<string, string> }) => (
+    <div style={styles.paletteGrid}>
+        {getPaletteGroupsByFamily(palette, families).map(([family, colors]) => (
+            <PaletteColumn key={family} family={family} colors={colors} />
+        ))}
+    </div>
+);
+
+const PaletteTheme = ({
+    families,
+    isDark = false,
+    palette,
+    title,
+}: {
+    families: string[];
+    isDark?: boolean;
+    palette: Record<string, string>;
+    title: string;
+}) => (
+    <div style={isDark ? { ...styles.themeBlock, ...styles.themeBlockDark } : styles.themeBlock}>
+        <h3 style={styles.themeTitle}>{title}</h3>
+        <PaletteFamilyGrid families={families} palette={palette} />
+    </div>
+);
+
+const PaletteGroup = ({
+    children,
+    description,
+    title,
+}: {
+    children?: ReactNode;
+    description?: string;
+    title: string;
+}) => (
+    <div style={styles.paletteGroup}>
+        <div style={styles.paletteGroupHeader}>
+            <h3 style={styles.paletteGroupTitle}>{title}</h3>
+            {description ? <p style={styles.paletteGroupDescription}>{description}</p> : null}
+        </div>
+        {children}
+    </div>
+);
+
+const ColorTokenRow = ({
+    color,
+    palette,
+    name,
+}: {
+    color: ColorToken;
+    palette: Record<string, string>;
+    name: string;
+}) => {
+    const paletteName = getPaletteNameByValue(color.value, palette);
+
+    return (
+        <div style={styles.semanticTokenRow}>
+            <div style={{ ...styles.semanticTokenSwatch, backgroundColor: color.value }} />
+            <div style={styles.tokenMeta}>
+                <span style={styles.paletteShade}>{name}</span>
+                <span style={styles.paletteName} title={paletteName}>
+                    {paletteName}
+                </span>
+                <span style={styles.colorValue} title={color.value}>
+                    {color.value}
+                </span>
+            </div>
+        </div>
+    );
+};
+
+const PaletteSection = () => (
+    <Section title="Palette">
+        <PaletteGroup
+            title="Base palette"
+            description="Base palette scales for product UI. Use semantic colors for implementation."
+        >
+            <PaletteTheme families={basePaletteFamilies} palette={lightTheme} title="Light" />
+            <PaletteTheme families={basePaletteFamilies} isDark palette={darkTheme} title="Dark" />
+        </PaletteGroup>
+        <PaletteGroup title="Neutrals" description="Neutral scales for text, surfaces, borders, and structure.">
+            <div style={styles.neutralThemeGrid}>
+                <PaletteTheme families={neutralPaletteFamilies} palette={lightTheme} title="Light" />
+                <PaletteTheme families={neutralPaletteFamilies} isDark palette={darkTheme} title="Dark" />
+            </div>
+        </PaletteGroup>
+        <PaletteGroup
+            title="Decorative"
+            description="Accent colors for charts and illustrations. Do not use for semantic states."
+        >
+            <PaletteTheme families={decorativePaletteFamilies} palette={lightTheme} title="Light" />
+            <PaletteTheme families={decorativePaletteFamilies} isDark palette={darkTheme} title="Dark" />
+        </PaletteGroup>
+        <PaletteGroup
+            title="Brand"
+            description="Brand accent colors for charts and illustrations. Do not use for semantic states."
+        >
+            <PaletteFamilyGrid families={brandPaletteFamilies} palette={lightTheme} />
+        </PaletteGroup>
+    </Section>
+);
+
+const SemanticTokenPanel = ({
+    colors,
+    isDark = false,
+    palette,
+    prefix,
+    title,
+}: {
+    colors: ColorToken[];
+    isDark?: boolean;
+    palette: Record<string, string>;
+    prefix: string;
+    title: string;
+}) => (
+    <div style={isDark ? { ...styles.semanticPanel, ...styles.semanticPanelDark } : styles.semanticPanel}>
+        <h3 style={styles.paletteColumnTitle}>{title}</h3>
+        {getColorSectionItems(colors, prefix).map((color) => (
+            <ColorTokenRow
+                key={color.variable}
+                color={color}
+                name={getColorDisplayName(color.name, prefix)}
+                palette={palette}
+            />
+        ))}
+    </div>
+);
+
+const SemanticTokenGroup = ({ description, prefix, title }: SemanticColorSection) => (
+    <PaletteGroup description={description} title={title}>
+        <div style={styles.semanticGrid}>
+            <SemanticTokenPanel colors={lightColors} palette={lightTheme} prefix={prefix} title="Light" />
+            <SemanticTokenPanel colors={darkColors} isDark palette={darkTheme} prefix={prefix} title="Dark" />
+        </div>
+    </PaletteGroup>
+);
+
+const SemanticSection = () => (
+    <Section title="Semantic">
+        {semanticColorSections.map((section) => (
+            <SemanticTokenGroup key={section.prefix} {...section} />
+        ))}
+    </Section>
+);
+
+const ColorsShowcase = () => (
+    <div style={styles.page}>
+        <PaletteSection />
+        <SemanticSection />
+    </div>
+);
+
+export default {
+    title: 'Design Tokens/Colors',
+    component: ColorsShowcase,
+} as Meta<typeof ColorsShowcase>;
+
+type Story = StoryObj<typeof ColorsShowcase>;
+
+export const Default: Story = {
+    render: () => <ColorsShowcase />,
+};