@apify/ui-library 1.140.2 → 1.141.1

package/src/components/floating/menu.tsx

@@ -13,8 +13,8 @@ import clsx from 'clsx';
 import type React from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 
-import { Box, type BoxProps } from '../box.js';
-import { Text } from '../text/index.js';
+import { Box, type BoxProps } from '../box';
+import { Text } from '../text';
 import { useFloatingMenu } from './menu_common.js';
 import { DropdownMenuBaseComponent, ListMenuComponent, ListMenuItemComponent } from './menu_components.js';
 
@@ -37,12 +37,16 @@ export interface MenuOption {
 export interface MenuProps<T = MenuOption> {
     ariaLabel?: string;
     options: T[];
-    value?: string;
+    value?: string | string[];
     onSelect: (newValue: string, selectedBy: SelectActionType) => void;
     onMenuOpen?: (isOpen: boolean) => void;
+    /**
+     * Overrides default label, which is selected value || defaultLabel
+     */
+    label?: string;
     defaultLabel?: React.ReactNode;
     closeOnSelect?: boolean;
-    renderOption?: (option: T) => React.ReactNode;
+    renderOption?: (option: T, isSelected: boolean) => React.ReactNode;
     placement?: Placement;
     components?: {
         MenuBase?: React.ElementType;
@@ -51,7 +55,7 @@ export interface MenuProps<T = MenuOption> {
     };
 }
 
-const defaultRenderOption = ({ label }: MenuOption) => <Text as="span">{label}</Text>;
+const defaultRenderOption = ({ label }: MenuOption, _isSelected: boolean) => <Text as="span">{label}</Text>;
 
 /**
  * This example is a Select taken from https://floating-ui.com/docs/react-examples
@@ -64,6 +68,7 @@ export const Menu = <T extends MenuOption>({
     onSelect,
     onMenuOpen,
     closeOnSelect = true,
+    label,
     defaultLabel,
     components,
     renderOption,
@@ -88,10 +93,16 @@ export const Menu = <T extends MenuOption>({
     });
 
     const selectedIndex = useMemo(() => {
+        if (Array.isArray(value)) return null;
         const foundIndex = options.findIndex((option) => option.value === value);
         return foundIndex < 0 ? null : foundIndex;
     }, [options, value]);
 
+    const selectedValuesSet = useMemo(() => new Set(Array.isArray(value) ? value : []), [value]);
+
+    const isItemSelected = (index: number): boolean =>
+        Array.isArray(value) ? selectedValuesSet.has(options[index].value) : index === selectedIndex;
+
     const [activeIndex, setActiveIndex] = useState<number | null>(null);
     const handleSelect = (newIndex: number, selectedBy: SelectActionType) => {
         onSelect(options[newIndex].value, selectedBy);
@@ -147,7 +158,7 @@ export const Menu = <T extends MenuOption>({
                 className={menuClassNames.BASE}
                 tabindex="0"
             >
-                {selectedIndex !== null ? options[selectedIndex].label : defaultLabel}
+                {label ?? (selectedIndex !== null ? options[selectedIndex].label : defaultLabel)}
             </MenuBaseComponent>
             {isOpen && (
                 <FloatingPortal>
@@ -158,36 +169,39 @@ export const Menu = <T extends MenuOption>({
                             {...getFloatingProps()}
                             className={menuClassNames.LIST}
                         >
-                            {options.map((option, i) => (
-                                <MenuItemComponent
-                                    key={option.value}
-                                    $isSelected={i === selectedIndex}
-                                    $isActive={i === activeIndex}
-                                    ref={(node: HTMLElement | null) => {
-                                        listRef.current[i] = node;
-                                    }}
-                                    role="option"
-                                    tabIndex={i === activeIndex ? 0 : -1}
-                                    className={menuClassNames.ITEM}
-                                    aria-selected={i === selectedIndex && i === activeIndex}
-                                    {...getItemProps({
-                                        onClick: () => handleSelect(i, 'click'), // Handles mouse click
-                                        onKeyDown: (event) => {
-                                            if (event.key === 'Enter') {
-                                                event.preventDefault();
-                                                handleSelect(i, 'enter'); // Handles enter press
-                                            }
-
-                                            if (event.key === ' ' && !isTypingRef.current) {
-                                                event.preventDefault();
-                                                handleSelect(i, 'space');
-                                            }
-                                        },
-                                    })}
-                                >
-                                    {effectiveRenderOption(option)}
-                                </MenuItemComponent>
-                            ))}
+                            {options.map((option, i) => {
+                                const isSelected = isItemSelected(i);
+                                return (
+                                    <MenuItemComponent
+                                        key={option.value}
+                                        $isSelected={isSelected}
+                                        $isActive={i === activeIndex}
+                                        ref={(node: HTMLElement | null) => {
+                                            listRef.current[i] = node;
+                                        }}
+                                        role="option"
+                                        tabIndex={i === activeIndex ? 0 : -1}
+                                        className={menuClassNames.ITEM}
+                                        aria-selected={isSelected && i === activeIndex}
+                                        {...getItemProps({
+                                            onClick: () => handleSelect(i, 'click'), // Handles mouse click
+                                            onKeyDown: (event) => {
+                                                if (event.key === 'Enter') {
+                                                    event.preventDefault();
+                                                    handleSelect(i, 'enter'); // Handles enter press
+                                                }
+
+                                                if (event.key === ' ' && !isTypingRef.current) {
+                                                    event.preventDefault();
+                                                    handleSelect(i, 'space');
+                                                }
+                                            },
+                                        })}
+                                    >
+                                        {effectiveRenderOption(option, isSelected)}
+                                    </MenuItemComponent>
+                                );
+                            })}
                         </MenuComponent>
                     </FloatingFocusManager>
                 </FloatingPortal>

package/src/components/floating/menu_components.tsx

@@ -1,12 +1,14 @@
 import { type ReferenceType, type UseFloatingReturn } from '@floating-ui/react';
+import type React from 'react';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { ChevronDownIcon } from '@apify/ui-icons';
+import { ChevronDownIcon, CrossIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
-import type { BoxProps } from '../box.js';
-import { Box } from '../box.js';
+import { Badge } from '../badge';
+import type { BoxProps } from '../box';
+import { Box } from '../box';
 
 export type FloatingContext = Pick<UseFloatingReturn<ReferenceType>, 'context'>['context'];
 
@@ -97,3 +99,51 @@ export const DropdownMenuBaseComponent = forwardRef<HTMLElement, DropdownMenuBas
         );
     },
 );
+
+const VerticalDivider = styled.div`
+    width: 1px;
+    align-self: stretch;
+    background: ${theme.color.neutral.separatorSubtle};
+`;
+
+type DropdownMenuBaseComponentWithCountProps = {
+    children: React.ReactNode;
+    onClear?: () => void;
+    selectedCount?: number;
+} & BoxProps;
+
+/**
+ * Menu base component WITH dropdown icon and a selected-count badge.
+ * Use this variant when the menu supports multi-select and you want to
+ * display how many items are selected.
+ */
+export const DropdownMenuBaseComponentWithCount = forwardRef<HTMLElement, DropdownMenuBaseComponentWithCountProps>(
+    ({ children, onClear, selectedCount, ...props }, ref) => {
+        const showCount = onClear && selectedCount !== undefined;
+
+        return (
+            <PlainMenuBaseComponent {...props} ref={ref}>
+                {children}
+                {showCount && (
+                    <Badge variant="primary_black" size="extra_small">
+                        {selectedCount}
+                    </Badge>
+                )}
+                {showCount && <VerticalDivider />}
+                {onClear ? (
+                    <CrossIcon
+                        size="16"
+                        color={theme.color.neutral.icon}
+                        onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
+                        onClick={(e: React.MouseEvent) => {
+                            e.stopPropagation();
+                            onClear();
+                        }}
+                    />
+                ) : (
+                    <ChevronDownIcon size="16" color={theme.color.neutral.icon} />
+                )}
+            </PlainMenuBaseComponent>
+        );
+    },
+);

package/src/components/floating/tooltip_content.tsx

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import { Shortcut } from '../shortcut.js';
-import type { TooltipProps, TooltipSize, TooltipTextAlign } from './tooltip.js';
+import { Shortcut } from '../shortcut';
+import type { TooltipProps, TooltipSize, TooltipTextAlign } from './tooltip';
 import { TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS } from './tooltip.js';
 
 type ContentProps = Pick<TooltipProps, 'content' | 'shortcuts' | 'imageUrl' | 'subtleText' | 'size' | 'textAlign'>;

package/src/components/{icon_button.tsx → icon_button/icon_button.tsx}

@@ -5,18 +5,18 @@ import type { IconComponent, IconSize } from '@apify/ui-icons';
 
 import type { ValueOf } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme.js';
-import type { RegularBoxProps } from './box.js';
+import { theme } from '../../design_system/theme.js';
+import type { RegularBoxProps } from '../box';
 import {
     Button,
     BUTTON_SIZE_VARIANTS_CSS,
     type ButtonSize,
     type RegularButtonProps,
     type TransientButtonProps,
-} from './button.js';
-import { Tooltip } from './floating/tooltip.js';
-import { Link, type RegularLinkProps } from './link.js';
-import { InlineSpinner, spinnerClassNames } from './spinner.js';
+} from '../button';
+import { Tooltip } from '../floating';
+import { Link, type RegularLinkProps } from '../link';
+import { InlineSpinner, spinnerClassNames } from '../spinner';
 
 export const ICON_BUTTON_VARIANTS = {
     DEFAULT: 'DEFAULT',

package/src/components/icon_button/index.ts

@@ -0,0 +1 @@
+export * from './icon_button.js';

package/src/components/image/image.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Image } from './image.js';
+
+const meta: Meta<typeof Image> = {
+    title: 'UI-Library/Image',
+    component: Image,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component:
+                    "Wrapper around `<img>` that uses the host app's `InternalImage` (e.g. for image proxy / CDN). Also accepts all spacing props from `Box`.",
+            },
+        },
+    },
+    argTypes: {
+        src: { control: 'text' },
+        alt: { control: 'text' },
+        width: { control: 'number' },
+        height: { control: 'number' },
+        loading: {
+            control: 'select',
+            options: ['eager', 'lazy'],
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Image>;
+
+const PLACEHOLDER_SRC = 'https://console.apify.com/img/logos_apify/logo_apify_full_dark_text.svg';
+
+/** Basic image with src and alt. */
+export const Default: Story = {
+    args: {
+        src: PLACEHOLDER_SRC,
+        alt: 'Apify logo',
+        width: 160,
+    },
+};
+
+/** With explicit dimensions. */
+export const WithDimensions: Story = {
+    args: {
+        src: PLACEHOLDER_SRC,
+        alt: 'Apify logo',
+        width: 240,
+        height: 64,
+    },
+};
+
+/** Lazy loading — the browser defers the request until the image is near the viewport. */
+export const LazyLoading: Story = {
+    args: {
+        src: PLACEHOLDER_SRC,
+        alt: 'Apify logo (lazy)',
+        width: 200,
+        loading: 'lazy',
+    },
+};
+
+/** Box spacing props work on Image too. */
+export const WithSpacing: Story = {
+    args: {
+        src: PLACEHOLDER_SRC,
+        alt: 'Apify logo',
+        width: 200,
+        m: 'space24',
+    },
+    render: (args) => (
+        <div style={{ background: '#f5f5f5', display: 'inline-block', borderRadius: '0.4rem' }}>
+            <Image {...args} />
+        </div>
+    ),
+};

package/src/components/{image.tsx → image/image.tsx}

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 
-import type { ImageProxyOptions } from '../ui_dependency_provider.js';
-import { useSharedUiDependencies } from '../ui_dependency_provider.js';
-import { Box, type BoxProps } from './box.js';
+import type { ImageProxyOptions } from '../../ui_dependency_provider';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Box, type BoxProps } from '../box';
 
 type ImageProps = {
     src: string;

package/src/components/image/index.ts

@@ -0,0 +1 @@
+export * from './image.js';

package/src/components/index.ts

@@ -1,35 +1,39 @@
-export * from './text/index.js';
-export * from './box.js';
-export * from './avatar/index.js';
-export * from './card_container.js';
-export * from './message.js';
-export * from './floating/index.js';
-export * from './button.js';
-export * from './link.js';
-export * from './action_link.js';
-export * from './simple_markdown/index.js';
-export * from './code/index.js';
-export * from './color_wheel_gradient.js';
-export * from './readme_renderer/index.js';
-export * from './to_consolidate/index.js';
-export * from './tile/index.js';
-export * from './blog_article.js';
-export * from './banner.js';
-export * from './actor_template_card.js';
-export * from './chip.js';
-export * from './image.js';
-export * from './rating.js';
-export * from './badge.js';
-export * from './tag.js';
-export * from './tabs/index.js';
-export * from './shortcut.js';
-export * from './icon_button.js';
-export * from './spinner.js';
-export * from './store/index.js';
-export * from './checkbox/index.js';
-export * from './browser_window/index.js';
-export * from './collapsible_card/index.js';
-export * from './select/index.js';
-export * from './switch/index.js';
-export * from './table/index.js';
-export * from './breadcrumb/index.js';
+export * from './text';
+export * from './box';
+export * from './avatar';
+export * from './card_container';
+export * from './message';
+export * from './floating';
+export * from './button';
+export * from './link';
+export * from './action_link';
+export * from './simple_markdown';
+export * from './code';
+export * from './color_wheel_gradient';
+export * from './readme_renderer';
+export * from './card';
+export * from './markdown';
+export * from './pagination';
+export * from './tab_number_chip';
+export * from './tile';
+export * from './blog_article';
+export * from './banner';
+export * from './actor_template_card';
+export * from './chip';
+export * from './image';
+export * from './rating';
+export * from './badge';
+export * from './tag';
+export * from './tabs';
+export * from './shortcut';
+export * from './icon_button';
+export * from './spinner';
+export * from './store';
+export * from './checkbox';
+export * from './radio_button';
+export * from './browser_window';
+export * from './collapsible_card';
+export * from './select';
+export * from './switch';
+export * from './table';
+export * from './breadcrumb';

package/src/components/link/index.ts

@@ -0,0 +1 @@
+export * from './link.js';

package/src/components/{link.tsx → link/link.tsx}

@@ -6,9 +6,9 @@ import styled from 'styled-components';
 
 import { ExternalLinkIcon } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme.js';
-import { useSharedUiDependencies } from '../ui_dependency_provider.js';
-import { Box, type BoxProps } from './box.js';
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Box, type BoxProps } from '../box';
 
 export type To = string | Partial<Path>;
 export interface RegularLinkProps {

package/src/components/markdown/index.ts

@@ -0,0 +1 @@
+export * from './markdown.js';

package/src/components/{to_consolidate → markdown}/markdown.tsx

@@ -10,13 +10,13 @@ import styled from 'styled-components';
 
 import { LinkIcon } from '@apify/ui-icons';
 
-import type { UiThemeOption } from '../../design_system/theme.js';
+import { Box } from '..';
+import type { UiThemeOption } from '../../design_system/theme';
 import { theme } from '../../design_system/theme.js';
-import { useCopyToClipboard } from '../../utils/index.js';
-import { CodeBlock, inlineCodeStyles, OneLineCode } from '../code/index.js';
-import { Box } from '../index.js';
-import { Link as SharedLink, type LinkProps } from '../link.js';
-import { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer/utils.js';
+import { useCopyToClipboard } from '../../utils';
+import { CodeBlock, inlineCodeStyles, OneLineCode } from '../code';
+import { Link as SharedLink, type LinkProps } from '../link';
+import { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer';
 
 interface StyledReadmeProps {
     $scrollMarginTopPx: number;

package/src/components/message/index.ts

@@ -0,0 +1 @@
+export * from './message.js';

package/src/components/{message.stories.jsx → message/message.stories.jsx}

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { PlaceholderIcon } from '@apify/ui-icons';
 
-import { Link } from './link.tsx';
+import { Link } from '../link';
 import { Message } from './message.tsx';
 
 const handleDismissClick = () => {};

package/src/components/{message.tsx → message/message.tsx}

@@ -6,11 +6,11 @@ import styled, { css } from 'styled-components';
 import type { IconComponent as IconComponentType } from '@apify/ui-icons';
 import { CheckIcon, CrossIcon, InfoIcon, WarningTriangleIcon, XCircleIcon } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme.js';
-import { Box, type BoxProps } from './box.js';
-import type { ButtonProps } from './button.js';
-import { Button } from './button.js';
-import { Text } from './text/index.js';
+import { theme } from '../../design_system/theme.js';
+import { Box, type BoxProps } from '../box';
+import type { ButtonProps } from '../button';
+import { Button } from '../button';
+import { Text } from '../text';
 
 export const messageClassNames = {
     main: 'Message',

package/src/components/pagination/index.ts

@@ -0,0 +1 @@
+export * from './pagination.js';

package/src/components/{to_consolidate → pagination}/pagination.tsx

@@ -5,8 +5,8 @@ import styled from 'styled-components';
 import { ChevronLeftIcon, ChevronRightIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
-import { Box } from '../box.js';
-import { Button } from '../button.js';
+import { Box } from '../box';
+import { Button } from '../button';
 
 const LEADING_THREE_DOTS_PAGE_KEY = -1;
 const TRAILING_THREE_DOTS_PAGE_KEY = -2;

package/src/components/radio_button/index.ts

@@ -0,0 +1 @@
+export * from './radio_button.js';

package/src/components/radio_button/radio_button.stories.tsx

@@ -0,0 +1,57 @@
+import { type ComponentProps, useState } from 'react';
+import styled from 'styled-components';
+
+import { RadioButtonPrimitive } from './radio_button.js';
+
+export default {
+    title: 'UI-Library/Inputs/RadioButtonPrimitive',
+};
+
+const Grid = styled.div`
+    margin: 5rem 3rem;
+    display: grid;
+    grid-template-columns: repeat(1, auto);
+    gap: 1.4rem;
+`;
+
+const Row = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+`;
+
+type ControlledRadioButtonProps = { initialValue?: boolean } & Omit<
+    ComponentProps<typeof RadioButtonPrimitive>,
+    'value' | 'setValue'
+>;
+
+const ControlledRadioButton = ({ initialValue = false, ...props }: ControlledRadioButtonProps) => {
+    const [value, setValue] = useState(initialValue);
+    return <RadioButtonPrimitive value={value} setValue={setValue} {...props} />;
+};
+
+export const States = () => (
+    <Grid>
+        <Row>
+            <ControlledRadioButton /> Unchecked
+        </Row>
+        <Row>
+            <ControlledRadioButton initialValue /> Checked
+        </Row>
+        <Row>
+            <ControlledRadioButton disabled /> Disabled
+        </Row>
+        <Row>
+            <ControlledRadioButton initialValue disabled /> Checked & disabled
+        </Row>
+        <Row>
+            <ControlledRadioButton readOnly initialValue /> Checked & readonly
+        </Row>
+        <Row>
+            <ControlledRadioButton error="Some error" /> Error
+        </Row>
+        <Row>
+            <ControlledRadioButton initialValue error="Some error" /> Checked + error
+        </Row>
+    </Grid>
+);

package/src/components/radio_button/radio_button.style.ts

@@ -0,0 +1,48 @@
+import { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+
+export const radioButtonStyle = css`
+    all: unset;
+    box-sizing: border-box;
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: 50%;
+    background-color: ${theme.color.neutral.background};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    position: relative;
+    flex-shrink: 0;
+
+    &:hover,
+    &:focus {
+        border-color: ${theme.color.primary.action};
+        cursor: pointer;
+    }
+
+    &.disabled {
+        background-color: ${theme.color.neutral.textDisabled};
+        border-color: ${theme.color.neutral.border};
+        cursor: not-allowed;
+    }
+
+    &.error {
+        border-color: ${theme.color.danger.action};
+    }
+
+    &[data-state='checked'] {
+        border-color: ${theme.color.primary.action};
+        border-width: 4px;
+
+        &.error {
+            border-color: ${theme.color.danger.action};
+        }
+
+        &.disabled {
+            border-color: ${theme.color.neutral.border};
+            background-color: ${theme.color.neutral.textDisabled};
+        }
+    }
+`;