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

package/src/components/dropdown/dropdown.styled.ts

@@ -0,0 +1,265 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+
+export const DROPDOWN_ELEMENT_CLASSES = {
+    WRAPPER: 'dropdown-wrapper',
+    ITEM: 'dropdown-item',
+    TRIGGER_OVERLAY: 'dropdown-trigger-overlay',
+    RADIO_OPTION: 'dropdown-radio-option',
+    RADIO_OPTION_DISABLED: 'dropdown-radio-option-disabled',
+    RADIO_OPTION_SELECTED: 'dropdown-radio-option-selected',
+    RADIO_OPTION_ICON: 'dropdown-radio-option-icon',
+    RADIO_OPTION_CONTENT: 'dropdown-radio-option-content',
+};
+
+type StyledContentProps = {
+    $width?: string;
+    $height?: string;
+    $zIndex?: number;
+};
+
+export const StyledContent = styled(DropdownMenu.Content).attrs<
+    DropdownMenu.DropdownMenuContentProps & { 'data-test'?: string }
+>((props) => ({
+    'data-test': 'dropdown-wrapper',
+    className: [DROPDOWN_ELEMENT_CLASSES.WRAPPER, props.className].filter(Boolean).join(' '),
+}))<StyledContentProps>`
+    background: ${theme.color.neutral.background};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    padding: ${theme.space.space6} 0;
+    min-width: 80px;
+    width: ${(props) => props.$width || 'auto'};
+    height: ${(props) => props.$height || 'auto'};
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: ${(props) => props.$zIndex ?? 100} !important;
+    position: relative;
+`;
+
+export const ScrollableContent = styled.div`
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    gap: ${theme.space.space4};
+    display: flex;
+    flex-direction: column;
+    scrollbar-width: thin;
+    scrollbar-color: ${theme.color.neutral.separatorSubtle} transparent;
+
+    .${DROPDOWN_ELEMENT_CLASSES.TRIGGER_OVERLAY} {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        z-index: 1;
+        pointer-events: none;
+    }
+    .${DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION} {
+        cursor: pointer;
+        width: 100%;
+        display: flex;
+        align-items: flex-start;
+        padding: ${theme.space.space4} ${theme.space.space8};
+        border-radius: ${theme.radius.radius4};
+        gap: ${theme.space.space8};
+        min-height: 28px;
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    }
+    .${DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_DISABLED} {
+        cursor: not-allowed;
+        color: ${theme.color.neutral.textDisabled};
+
+        * {
+            color: ${theme.color.neutral.textDisabled} !important;
+        }
+    }
+    .${DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_SELECTED} {
+        background: none;
+        color: ${theme.color.neutral.text};
+    }
+    .${DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_ICON} {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: ${theme.space.space2} 0;
+        min-width: 16px;
+        min-height: 20px;
+        margin-right: ${theme.space.space4};
+    }
+    .${DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_CONTENT} {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        max-width: 100%;
+    }
+`;
+
+export const StyledItemRow = styled.div`
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    gap: ${theme.space.space4};
+    min-height: 28px;
+    padding: ${theme.space.space4} 0;
+`;
+
+export const StyledItemWrapper = styled.div`
+    margin: 0 ${theme.space.space6};
+`;
+
+export const StyledItem = styled(DropdownMenu.Item)`
+    min-width: 100%;
+    display: block;
+    padding: 0 ${theme.space.space8};
+    color: ${theme.color.neutral.text};
+    border-radius: ${theme.radius.radius6};
+    cursor: pointer;
+    background: none;
+    border: none;
+    transition: background 0.15s;
+    outline: none;
+    box-shadow: none;
+
+    &[data-highlighted],
+    &.dropdown-item-selected {
+        background: ${theme.color.neutral.hover};
+    }
+
+    &[data-disabled] {
+        color: ${theme.color.neutral.textDisabled};
+        cursor: not-allowed;
+    }
+    &.no-hover {
+        cursor: default;
+        &[data-highlighted],
+        &.dropdown-item-selected,
+        &:hover {
+            background: none !important;
+        }
+    }
+`;
+
+export const StyledCheckboxItem = styled(DropdownMenu.CheckboxItem)`
+    min-width: 100%;
+    display: block;
+    padding: 0 ${theme.space.space8};
+    color: ${theme.color.neutral.text};
+    border-radius: ${theme.radius.radius4};
+    cursor: pointer;
+    background: none;
+    border: none;
+    transition: background 0.15s;
+    outline: none;
+    box-shadow: none;
+
+    &[data-highlighted],
+    &:hover {
+        background: ${theme.color.neutral.hover};
+    }
+
+    &[data-disabled] {
+        color: ${theme.color.neutral.textDisabled};
+        cursor: not-allowed;
+    }
+
+    &[data-state='checked'] {
+        background: none;
+    }
+
+    &.no-hover {
+        cursor: default;
+
+        &[data-highlighted],
+        &:hover {
+            background: none !important;
+        }
+    }
+`;
+
+export const StyledLabel = styled(DropdownMenu.Label)`
+    padding: ${theme.space.space8};
+    padding-bottom: ${theme.space.space2};
+    color: ${theme.color.neutral.textSubtle};
+    ${theme.typography.shared.desktop.bodyS}
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space4};
+`;
+
+export const StyledDescription = styled.div`
+    color: ${theme.color.neutral.textSubtle};
+    ${theme.typography.shared.desktop.bodyS}
+    display: block;
+    width: 100%;
+    margin-top: ${theme.space.space2};
+
+    [data-disabled] & {
+        color: ${theme.color.neutral.textDisabled};
+    }
+`;
+
+export const StyledItemTitle = styled.span`
+    ${theme.typography.shared.desktop.bodyM}
+    color: ${theme.color.neutral.textMuted};
+    display: block;
+    width: 100%;
+    margin-right: ${theme.space.space32};
+
+    [data-disabled] & {
+        color: ${theme.color.neutral.textDisabled};
+    }
+`;
+
+export const StyledIconWrapper = styled.span`
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-shrink: 0;
+    width: 20px;
+    padding-top: ${theme.space.space2};
+    color: ${theme.color.neutral.textMuted};
+`;
+
+export const StyledCheckboxIconWrapper = styled(StyledIconWrapper)`
+    margin-right: ${theme.space.space4};
+`;
+
+export const StyledContentWrapper = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+    width: max-content;
+    overflow: hidden;
+`;
+
+export const StyledTagWrapper = styled.div`
+    display: flex;
+    gap: ${theme.space.space4};
+`;
+
+export const StyledControls = styled.div`
+    padding-top: ${theme.space.space6};
+    border-top: 1px solid ${theme.color.neutral.separatorSubtle};
+    gap: ${theme.space.space4};
+    display: flex;
+    flex-direction: column;
+`;
+
+export const StyledSeparator = styled(DropdownMenu.Separator)`
+    height: 1px;
+    min-height: 1px;
+    margin: ${theme.space.space4} ${theme.space.space8};
+    background-color: ${theme.color.neutral.separatorSubtle};
+`;

package/src/components/dropdown/dropdown.tsx

@@ -0,0 +1,259 @@
+import type * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { clsx } from 'clsx';
+import React from 'react';
+import styled from 'styled-components';
+
+import { CheckIcon } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import { CheckboxPrimitive } from '../checkbox/checkbox.js';
+import { radioButtonStyle } from '../radio_button/radio_button.style.js';
+import { useDropdownContext } from './dropdown.context.js';
+import {
+    DROPDOWN_ELEMENT_CLASSES,
+    StyledCheckboxIconWrapper,
+    StyledCheckboxItem,
+    StyledContentWrapper,
+    StyledControls,
+    StyledDescription,
+    StyledIconWrapper,
+    StyledItem,
+    StyledItemRow,
+    StyledItemTitle,
+    StyledItemWrapper,
+    StyledLabel,
+    StyledSeparator,
+    StyledTagWrapper,
+} from './dropdown.styled.js';
+import type { BaseDropdownItemProps } from './dropdown.types.js';
+import { DropdownRoot } from './dropdown_root.js';
+
+type DropdownItemProps = React.ComponentPropsWithRef<typeof DropdownMenu.Item> &
+    BaseDropdownItemProps & {
+        trailingIcon?: React.ReactNode;
+        selected?: boolean;
+        onSelect?: (event: Event) => void;
+        tags?: React.ReactNode[];
+    };
+
+const DropdownItem = ({
+    children,
+    icon,
+    trailingIcon,
+    selected,
+    description,
+    onSelect,
+    className,
+    disabled,
+    tags = [],
+    ...props
+}: DropdownItemProps) => {
+    const { handleSelectAndClose } = useDropdownContext();
+    const handleSelect = (event: Event) => {
+        if (onSelect) onSelect(event);
+        handleSelectAndClose(event);
+    };
+
+    return (
+        <StyledItemWrapper>
+            <StyledItem
+                onSelect={handleSelect}
+                disabled={disabled}
+                {...props}
+                className={clsx(DROPDOWN_ELEMENT_CLASSES.ITEM, className, selected && 'dropdown-item-selected')}
+                data-test={disabled ? 'dropdown-item-disabled' : 'dropdown-item'}
+            >
+                <StyledItemRow>
+                    {icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
+                    <StyledContentWrapper>
+                        <StyledItemTitle>{children}</StyledItemTitle>
+                        {description && <StyledDescription>{description}</StyledDescription>}
+                    </StyledContentWrapper>
+                    {(trailingIcon || selected) && (
+                        <StyledIconWrapper>
+                            {trailingIcon}
+                            {!trailingIcon && selected && <CheckIcon size="16" color={theme.color.neutral.text} />}
+                        </StyledIconWrapper>
+                    )}
+                    {tags.length > 0 && (
+                        <StyledTagWrapper onClick={(e) => e.stopPropagation()}>{tags}</StyledTagWrapper>
+                    )}
+                </StyledItemRow>
+            </StyledItem>
+        </StyledItemWrapper>
+    );
+};
+
+type DropdownCheckboxItemProps = React.ComponentPropsWithRef<typeof DropdownMenu.CheckboxItem> &
+    BaseDropdownItemProps & {
+        checked?: boolean;
+        trailingIcon?: React.ReactNode;
+        onCheckedChange?: (checked: boolean) => void;
+        onSelect?: (event: Event) => void;
+    };
+
+const DropdownCheckboxItem = ({
+    checked,
+    children,
+    icon,
+    trailingIcon,
+    onCheckedChange,
+    description,
+    onSelect,
+    disabled,
+    className,
+    ...props
+}: DropdownCheckboxItemProps) => {
+    const { handleSelectAndClose } = useDropdownContext();
+    const handleSelect = (event: Event) => {
+        if (disabled) return;
+        if (onSelect) onSelect(event);
+        handleSelectAndClose(event);
+    };
+
+    return (
+        <StyledItemWrapper>
+            <StyledCheckboxItem
+                checked={checked}
+                onSelect={handleSelect}
+                disabled={disabled}
+                {...props}
+                onCheckedChange={disabled ? undefined : onCheckedChange}
+                className={clsx(className)}
+                data-test={disabled ? 'dropdown-item-disabled' : 'dropdown-item'}
+            >
+                <StyledItemRow>
+                    <StyledCheckboxIconWrapper>
+                        <CheckboxPrimitive
+                            value={!!checked}
+                            setValue={disabled ? () => undefined : onCheckedChange || (() => undefined)}
+                            readOnly={disabled || !onCheckedChange}
+                        />
+                    </StyledCheckboxIconWrapper>
+                    {icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
+                    <StyledContentWrapper>
+                        <StyledItemTitle>{children}</StyledItemTitle>
+                        {description && <StyledDescription>{description}</StyledDescription>}
+                    </StyledContentWrapper>
+                    {trailingIcon && <StyledIconWrapper>{trailingIcon}</StyledIconWrapper>}
+                </StyledItemRow>
+            </StyledCheckboxItem>
+        </StyledItemWrapper>
+    );
+};
+
+// --- Radio group: self-contained, uses radioButtonStyle from radio_button component ---
+
+const StyledRadioGroupRoot = styled(RadioGroupPrimitive.Root)`
+    display: flex;
+    flex-direction: column;
+`;
+
+const StyledRadioGroupItem = styled(RadioGroupPrimitive.Item)`
+    ${radioButtonStyle}
+    flex-shrink: 0;
+`;
+
+type RadioOption = {
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    value: string;
+};
+
+const DropdownRadioOptionLabel = ({ label, description }: { label: string; description?: string }) => (
+    <>
+        <StyledItemTitle>{label}</StyledItemTitle>
+        {description && <StyledDescription title={description}>{description}</StyledDescription>}
+    </>
+);
+
+type DropdownRadioOptionProps = {
+    option: RadioOption;
+    isSelected: boolean;
+    onSelect?: () => void;
+    children: React.ReactNode;
+};
+
+const DropdownRadioOption = ({ option, isSelected, onSelect, children }: DropdownRadioOptionProps) => (
+    <div
+        className={clsx(
+            DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION,
+            option.disabled && DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_DISABLED,
+            isSelected && DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_SELECTED,
+        )}
+        onClick={onSelect}
+        aria-disabled={option.disabled}
+    >
+        {children}
+    </div>
+);
+
+type DropdownRadioGroupProps = {
+    options: RadioOption[];
+    value: string;
+    setValue: (value: string) => void;
+};
+
+const DropdownRadioGroup = ({ options, value, setValue }: DropdownRadioGroupProps) => {
+    const { handleSelectAndClose } = useDropdownContext();
+
+    const handleSelect = (newValue: string) => {
+        setValue(newValue);
+        handleSelectAndClose();
+    };
+
+    return (
+        <StyledItemWrapper>
+            <StyledRadioGroupRoot value={value} onValueChange={handleSelect}>
+                {options.map((option) => (
+                    <DropdownRadioOption
+                        key={option.value}
+                        option={option}
+                        isSelected={option.value === value}
+                        onSelect={option.disabled ? undefined : () => handleSelect(option.value)}
+                    >
+                        <span className={DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_ICON}>
+                            <StyledRadioGroupItem
+                                value={option.value}
+                                id={option.value}
+                                disabled={option.disabled}
+                                onClick={(e) => e.stopPropagation()}
+                            />
+                        </span>
+                        <span className={DROPDOWN_ELEMENT_CLASSES.RADIO_OPTION_CONTENT}>
+                            <DropdownRadioOptionLabel label={option.label} description={option.description} />
+                        </span>
+                    </DropdownRadioOption>
+                ))}
+            </StyledRadioGroupRoot>
+        </StyledItemWrapper>
+    );
+};
+
+type DropdownLabelProps = React.ComponentPropsWithRef<typeof DropdownMenu.Label> & {
+    children?: React.ReactNode | React.ReactNode[];
+};
+
+const DropdownLabel = (props: DropdownLabelProps) => <StyledLabel {...props} />;
+
+type DropdownControlProps = React.ComponentPropsWithRef<typeof DropdownMenu.Label> & {
+    children?: React.ReactNode | React.ReactNode[];
+};
+const DropdownControls = (props: DropdownControlProps) => {
+    return <StyledControls>{props.children}</StyledControls>;
+};
+
+const DropdownSeparator = (props: React.ComponentPropsWithRef<typeof DropdownMenu.Separator>) => (
+    <StyledSeparator {...props} />
+);
+
+export const Dropdown = Object.assign(DropdownRoot, {
+    Item: DropdownItem,
+    CheckboxItem: DropdownCheckboxItem,
+    Label: DropdownLabel,
+    RadioGroup: DropdownRadioGroup,
+    Controls: DropdownControls,
+    Separator: DropdownSeparator,
+});

package/src/components/dropdown/dropdown.types.ts

@@ -0,0 +1,18 @@
+import type * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import type * as React from 'react';
+
+export type BaseDropdownItemProps = {
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+};
+
+export type BaseDropdownContentProps = {
+    width?: string;
+    height?: string;
+    closeOnSelect?: boolean;
+    zIndex?: number;
+    contentProps?: React.ComponentPropsWithRef<typeof DropdownMenu.Content>;
+};

package/src/components/dropdown/dropdown_button.tsx

@@ -0,0 +1,45 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { useState } from 'react';
+
+import { Button } from '../button/button.js';
+import { ScrollableContent, StyledContent } from './dropdown.styled.js';
+import type { BaseDropdownContentProps } from './dropdown.types.js';
+import { DropdownRoot } from './dropdown_root.js';
+
+type DropdownButtonProps = BaseDropdownContentProps & {
+    buttonProps?: Partial<React.ComponentPropsWithoutRef<typeof Button>>;
+    buttonLabel: React.ReactNode;
+    children: React.ReactNode;
+};
+
+export const DropdownButton = ({
+    buttonProps,
+    buttonLabel,
+    children,
+    closeOnSelect = true,
+    contentProps,
+    width,
+    height,
+    zIndex,
+}: DropdownButtonProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const defaultButtonProps = {
+        onClick: () => undefined,
+        trackingId: 'dropdown-button',
+        ...buttonProps,
+    };
+
+    return (
+        <DropdownRoot isOpen={isOpen} onIsOpenChange={setIsOpen} closeOnSelect={closeOnSelect}>
+            <DropdownMenu.Trigger asChild>
+                <Button {...defaultButtonProps}>{buttonLabel}</Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Portal>
+                <StyledContent $width={width} $height={height} $zIndex={zIndex} {...contentProps}>
+                    <ScrollableContent>{children}</ScrollableContent>
+                </StyledContent>
+            </DropdownMenu.Portal>
+        </DropdownRoot>
+    );
+};

package/src/components/dropdown/dropdown_root.tsx

@@ -0,0 +1,41 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { useCallback, useState } from 'react';
+
+import { DropdownContext } from './dropdown.context.js';
+
+type DropdownRootProps = React.ComponentPropsWithRef<typeof DropdownMenu.Root> & {
+    closeOnSelect?: boolean;
+    children: React.ReactNode;
+    onIsOpenChange?: (isOpen: boolean) => void;
+    isOpen?: boolean;
+    contentProps?: React.ComponentPropsWithRef<typeof DropdownMenu.Content>;
+};
+
+export const DropdownRoot = ({
+    closeOnSelect = true,
+    children,
+    isOpen,
+    onIsOpenChange,
+    ...props
+}: DropdownRootProps) => {
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const isControlled = isOpen !== undefined && onIsOpenChange !== undefined;
+    const effectiveIsOpen = isControlled ? isOpen : internalIsOpen;
+    const effectiveSetIsOpen = isControlled ? onIsOpenChange : setInternalIsOpen;
+    const closeDropdown = useCallback(() => effectiveSetIsOpen(false), [effectiveSetIsOpen]);
+    const handleSelectAndClose = useCallback(
+        (event?: Event) => {
+            if (closeOnSelect) closeDropdown();
+            if (event) event.preventDefault();
+        },
+        [closeOnSelect, closeDropdown],
+    );
+
+    return (
+        <DropdownContext.Provider value={{ handleSelectAndClose }}>
+            <DropdownMenu.Root open={effectiveIsOpen} onOpenChange={effectiveSetIsOpen} modal={false} {...props}>
+                {children}
+            </DropdownMenu.Root>
+        </DropdownContext.Provider>
+    );
+};