@apify/ui-library 1.168.1 → 1.168.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.168.1",
+    "version": "1.168.3",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -94,5 +94,5 @@
         "src",
         "style"
     ],
-    "gitHead": "f595cd4e86d51505e5f4f6bb20fab58d386a30a7"
+    "gitHead": "fed97f595c48ce93b0f230388cf98113cd62791f"
 }

package/src/components/avatar/bordered_actor_avatar.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BorderedActorAvatar } from './bordered_actor_avatar';
+
+const AVATAR_SIZES = [24, 32, 40, 44] as const;
+
+export default {
+    title: 'UI-Library/Avatar/BorderedActorAvatar',
+    component: BorderedActorAvatar,
+    argTypes: {
+        size: { control: 'select', options: AVATAR_SIZES },
+        name: { control: 'text' },
+        url: { control: 'text' },
+    },
+    args: {
+        name: 'Web Scraper',
+        size: 24,
+    },
+    tags: ['new'],
+} as Meta<typeof BorderedActorAvatar>;
+
+type Story = StoryObj<typeof BorderedActorAvatar>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-end' }}>
+            {AVATAR_SIZES.map((size) => (
+                <div key={size} style={{ textAlign: 'center' }}>
+                    <BorderedActorAvatar name="Web Scraper" size={size} />
+                    <p style={{ marginTop: '8px', fontSize: '12px' }}>{size}px</p>
+                </div>
+            ))}
+        </div>
+    ),
+};
+
+export const WithImageUrl: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-end' }}>
+            {AVATAR_SIZES.map((size) => (
+                <div key={size} style={{ textAlign: 'center' }}>
+                    <BorderedActorAvatar
+                        name="Actors MCP Server"
+                        url="https://apify.github.io/apify-web/img/apify-logo/logomark-32x32.svg"
+                        size={size}
+                    />
+                    <p style={{ marginTop: '8px', fontSize: '12px' }}>{size}px</p>
+                </div>
+            ))}
+        </div>
+    ),
+};

package/src/components/avatar/bordered_actor_avatar.tsx

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme';
+import { Box, type BoxProps } from '../box';
+import { ActorAvatar, getActorAvatarBorderRadius } from './actor_avatar';
+
+const BORDER_WIDTH = 1;
+
+/** Computes border, padding, and radius dimensions for the bordered wrapper. */
+const getBorderedStyle = (size: number) => {
+    const padding = size < 40 ? 2 : 3;
+    const outerRadius = getActorAvatarBorderRadius(size);
+    const innerRadius = Math.max(outerRadius - 3, 2);
+    const innerSize = Math.max(size - (BORDER_WIDTH + padding) * 2, 1);
+
+    return { padding, outerRadius, innerRadius, innerSize };
+};
+
+type StyledBorderProps = { $outerRadius: number; $padding: number };
+
+const StyledBorder = styled(Box)<StyledBorderProps>`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: ${BORDER_WIDTH}px solid ${theme.color.neutral.border};
+    border-radius: ${({ $outerRadius }) => $outerRadius}px;
+    padding: ${({ $padding }) => $padding}px;
+    overflow: hidden;
+`;
+
+type BorderedActorAvatarProps = BoxProps & {
+    name?: string;
+    url?: string | null;
+    size: 24 | 32 | 40 | 44;
+};
+
+export const BorderedActorAvatar = ({ size, name, url, ...rest }: BorderedActorAvatarProps) => {
+    const { padding, outerRadius, innerRadius, innerSize } = getBorderedStyle(size);
+
+    return (
+        <StyledBorder $outerRadius={outerRadius} $padding={padding} {...rest}>
+            <ActorAvatar size={innerSize} borderRadius={`${innerRadius}px`} name={name} url={url} />
+        </StyledBorder>
+    );
+};

package/src/components/avatar/index.ts

@@ -1,2 +1,3 @@
 export * from './actor_avatar';
+export * from './bordered_actor_avatar';
 export * from './user_avatar';

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

@@ -1,4 +1,4 @@
-import type { PopperContentProps } from '@radix-ui/react-popper';
+import type { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu';
 import type * as React from 'react';
 
 export type BaseDropdownItemProps = {
@@ -14,5 +14,5 @@ export type BaseDropdownContentProps = {
     height?: string;
     closeOnSelect?: boolean;
     zIndex?: number;
-    contentProps?: PopperContentProps;
+    contentProps?: DropdownMenuContentProps;
 };

package/src/components/split_button/split_button.tsx

@@ -1,4 +1,4 @@
-import type { PopperContentProps } from '@radix-ui/react-popper';
+import type { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 import { useRef, useState } from 'react';
@@ -32,8 +32,8 @@ export interface SplitButtonProps
     /** Must contain at least two actions - a single action should just be a regular Button. */
     actions: SplitButtonAction[];
     label?: ReactNode;
-    side?: PopperContentProps['side'];
-    align?: PopperContentProps['align'];
+    side?: DropdownMenuContentProps['side'];
+    align?: DropdownMenuContentProps['align'];
     width?: string;
     showMainIcon?: boolean;
     /** @deprecated Wrap `SplitButton` in `Tooltip` instead. */