@apify/ui-library 1.138.0 → 1.138.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.138.0",
+    "version": "1.138.1",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -14,21 +14,22 @@
         "test": "echo \"Warning: no test specified\" && exit 0",
         "lint": "oxlint --type-aware .",
         "lint:fix": "oxlint --type-aware --fix .",
-        "build": "npm run clean && npm run compile",
+        "build": "pnpm run clean && pnpm run compile",
         "clean": "rimraf ./dist",
         "compile": "tsc -p tsconfig.build.json",
         "type-check": "tsc --noEmit",
-        "generate-theme": "node src/codemods/generate_typograpy_tokens_files.mjs  && npm run lint:fix",
+        "generate-theme": "node src/codemods/generate_typograpy_tokens_files.mjs  && pnpm run lint:fix",
         "build-color-tokens": "node src/design_system/colors/build_color_tokens.js",
-        "postpublish": "npm run clean"
+        "postpublish": "pnpm run clean"
     },
     "//": [
         "Storybook for the components lives in a separate package ui-storybook.",
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.38.0",
+        "@apify/ui-icons": "^1.38.1",
         "@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-switch": "^1.2.6",
@@ -57,6 +58,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
+        "@apify-packages/types": "^3.353.1",
         "@storybook/react-vite": "^10.3.5",
         "@types/hast": "^3.0.4",
         "@types/lodash": "^4.14.200",
@@ -70,5 +72,5 @@
         "src",
         "style"
     ],
-    "gitHead": "459dde84808a04317ad05d19a4b0b48e4f7f2633"
+    "gitHead": "1c034549fdf20fd6d95643da8db6940cd850bfdc"
 }

package/src/codemods/generate_typograpy_tokens_files.mjs

@@ -15,12 +15,7 @@ const fontFamilies = {
 };
 
 const transformTokenProperties = (token) => {
-    const {
-        fontWeight,
-        fontSize,
-        lineHeight,
-        fontFamily,
-    } = token.value;
+    const { fontWeight, fontSize, lineHeight, fontFamily } = token.value;
 
     // Convert font family name to font family value
     let fontFamilyValue;
@@ -29,10 +24,12 @@ const transformTokenProperties = (token) => {
     if (fontFamilyNameParts.length === 1) {
         fontFamilyValue = fontFamilies[fontFamilyNameParts[0].toLowerCase()];
     } else {
-        const fontFamilyIndex = fontFamilyNameParts.map((fontFamilyNamePart, i) => {
-            if (i === 0) return fontFamilyNamePart.toLowerCase();
-            return fontFamilyNamePart;
-        }).join('');
+        const fontFamilyIndex = fontFamilyNameParts
+            .map((fontFamilyNamePart, i) => {
+                if (i === 0) return fontFamilyNamePart.toLowerCase();
+                return fontFamilyNamePart;
+            })
+            .join('');
 
         fontFamilyValue = fontFamilies[fontFamilyIndex];
     }
@@ -42,7 +39,7 @@ const transformTokenProperties = (token) => {
 
 const transformTokenName = (tokenName) => {
     const [token, variant] = tokenName.split('-');
-    return (variant ? `${token}${variant.charAt(0).toUpperCase() + variant.slice(1)}` : token);
+    return variant ? `${token}${variant.charAt(0).toUpperCase() + variant.slice(1)}` : token;
 };
 
 const extractDeviceTokensDefinitions = (tokens) => {
@@ -97,32 +94,30 @@ const createTokensCode = (tokens) => {
             const deviceItemsArray = [];
 
             for (const [tokenName, tokenValue] of Object.entries(deviceTokens)) {
-                deviceItemsArray.push(builders.property(
-                    'init',
-                    builders.identifier(tokenName),
-                    builders.literal(tokenValue),
-                ));
+                deviceItemsArray.push(
+                    builders.property('init', builders.identifier(tokenName), builders.literal(tokenValue)),
+                );
             }
-            devicesArray.push(builders.property(
-                'init',
-                builders.identifier(device),
-                builders.objectExpression(deviceItemsArray),
-            ));
+            devicesArray.push(
+                builders.property('init', builders.identifier(device), builders.objectExpression(deviceItemsArray)),
+            );
         }
 
-        variantsArray.push(builders.property(
-            'init',
-            builders.identifier(tokenVariant),
-            builders.objectExpression(devicesArray),
-        ));
+        variantsArray.push(
+            builders.property('init', builders.identifier(tokenVariant), builders.objectExpression(devicesArray)),
+        );
     }
 
     const exportDeclaration = builders.exportNamedDeclaration(
         builders.variableDeclaration('const', [
             builders.variableDeclarator(
                 builders.identifier('typographyTokens'),
-                builders.tsAsExpression(builders.objectExpression(variantsArray), builders.tsTypeReference(builders.identifier('const'))),
-            )]),
+                builders.tsAsExpression(
+                    builders.objectExpression(variantsArray),
+                    builders.tsTypeReference(builders.identifier('const')),
+                ),
+            ),
+        ]),
         [],
     );
 

package/src/components/action_link.tsx

@@ -34,12 +34,10 @@ export const ActionBox: FC<RequiredBy<BoxProps, 'onClick'> & { contentProps?: ob
     ...rest
 }) => {
     return (
-        <StyledGuidepost
-            forwardedAs={as}
-            $isBackLink={false}
-            {...rest}
-        >
-            <Heading as='span' type='titleM' {...contentProps}>{children}</Heading>
+        <StyledGuidepost forwardedAs={as} $isBackLink={false} {...rest}>
+            <Heading as="span" type="titleM" {...contentProps}>
+                {children}
+            </Heading>
             <ArrowRightIcon size="16" />
         </StyledGuidepost>
     );
@@ -52,30 +50,22 @@ export const ActionLink: FC<LinkProps & { contentProps?: object }> = ({
     ...rest
 }) => {
     return (
-        <StyledGuidepost
-            forwardedAs={as}
-            $isBackLink={false}
-            {...rest}
-        >
-            <Heading as='span' type='titleM' {...contentProps}>{children}</Heading>
+        <StyledGuidepost forwardedAs={as} $isBackLink={false} {...rest}>
+            <Heading as="span" type="titleM" {...contentProps}>
+                {children}
+            </Heading>
             <ArrowRightIcon size="16" />
         </StyledGuidepost>
     );
 };
 
-export const BackLink: React.FC<LinkProps> = ({
-    children,
-    as,
-    ...rest
-}) => {
+export const BackLink: React.FC<LinkProps> = ({ children, as, ...rest }) => {
     return (
-        <StyledGuidepost
-            forwardedAs={as || Link}
-            $isBackLink={true}
-            {...rest}
-        >
+        <StyledGuidepost forwardedAs={as || Link} $isBackLink={true} {...rest}>
             <ArrowLeftIcon size="16" />
-            <Heading as='span' type='titleM'>{children}</Heading>
+            <Heading as="span" type="titleM">
+                {children}
+            </Heading>
         </StyledGuidepost>
     );
 };

package/src/components/actor_template_card.stories.tsx

@@ -18,9 +18,7 @@ const mockIcons = [
     <img key="2" src="https://apify.com/img/template-icons/typescript.svg" alt="Icon B" />,
 ];
 
-const singleIcon = [
-    <img key="1" src="https://apify.com/img/template-icons/typescript.svg" alt="Single Icon" />,
-];
+const singleIcon = [<img key="1" src="https://apify.com/img/template-icons/typescript.svg" alt="Single Icon" />];
 
 const multipleIcons = [
     <img key="1" src="https://apify.com/img/template-icons/typescript.svg" alt="Icon 1" />,
@@ -67,7 +65,8 @@ export const Default: Story = {
     args: {
         id: 'web-scraper',
         label: 'Web Scraper',
-        description: 'A versatile web scraper that can extract data from any website. Perfect for beginners and professionals alike.',
+        description:
+            'A versatile web scraper that can extract data from any website. Perfect for beginners and professionals alike.',
         icons: mockIcons,
     },
 };
@@ -79,7 +78,8 @@ export const WithStarterBadge: Story = {
     args: {
         id: 'simple-scraper',
         label: 'Simple Website Scraper',
-        description: 'An easy-to-use scraper designed for beginners. Start scraping websites with minimal configuration.',
+        description:
+            'An easy-to-use scraper designed for beginners. Start scraping websites with minimal configuration.',
         icons: singleIcon,
         useCases: ['STARTER'],
     },
@@ -92,7 +92,8 @@ export const WithAIBadge: Story = {
     args: {
         id: 'ai-scraper',
         label: 'AI-Powered Data Extractor',
-        description: 'Advanced scraper using artificial intelligence to intelligently extract and structure data from complex websites.',
+        description:
+            'Advanced scraper using artificial intelligence to intelligently extract and structure data from complex websites.',
         icons: mockIcons,
         useCases: ['AI'],
     },
@@ -105,7 +106,8 @@ export const WithMultipleBadges: Story = {
     args: {
         id: 'ai-starter-scraper',
         label: 'AI Scraper for Beginners',
-        description: 'An AI-powered scraper designed specifically for newcomers. Get the power of AI with beginner-friendly setup.',
+        description:
+            'An AI-powered scraper designed specifically for newcomers. Get the power of AI with beginner-friendly setup.',
         icons: mockIcons,
         useCases: ['STARTER', 'AI'],
     },
@@ -118,7 +120,8 @@ export const WithSingleIcon: Story = {
     args: {
         id: 'single-icon-scraper',
         label: 'E-commerce Scraper',
-        description: 'Specialized scraper for e-commerce websites. Extract product information, prices, and reviews efficiently.',
+        description:
+            'Specialized scraper for e-commerce websites. Extract product information, prices, and reviews efficiently.',
         icons: singleIcon,
         useCases: ['STARTER'],
     },
@@ -131,7 +134,8 @@ export const WithMultipleIcons: Story = {
     args: {
         id: 'multi-icon-scraper',
         label: 'Universal Data Scraper',
-        description: 'A comprehensive scraper supporting multiple data formats and websites. Works with JSON, XML, HTML, and more.',
+        description:
+            'A comprehensive scraper supporting multiple data formats and websites. Works with JSON, XML, HTML, and more.',
         icons: multipleIcons,
         useCases: ['AI'],
     },
@@ -144,10 +148,11 @@ export const WithLongDescription: Story = {
     args: {
         id: 'long-description-scraper',
         label: 'Advanced Web Scraper',
-        description: 'This is a very comprehensive web scraper that can handle complex websites with dynamic content, '
-            + 'JavaScript rendering, pagination, infinite scroll, CAPTCHA solving, proxy rotation, and much more. '
-            + 'It includes advanced features like data validation, duplicate detection, rate limiting, and export to '
-            + 'multiple formats including CSV, JSON, XML, and direct database connections.',
+        description:
+            'This is a very comprehensive web scraper that can handle complex websites with dynamic content, ' +
+            'JavaScript rendering, pagination, infinite scroll, CAPTCHA solving, proxy rotation, and much more. ' +
+            'It includes advanced features like data validation, duplicate detection, rate limiting, and export to ' +
+            'multiple formats including CSV, JSON, XML, and direct database connections.',
         icons: mockIcons,
         useCases: ['STARTER', 'AI'],
     },
@@ -160,7 +165,8 @@ export const WithoutBadges: Story = {
     args: {
         id: 'no-badges-scraper',
         label: 'Basic Web Scraper',
-        description: 'A straightforward web scraper without any special categorization. Perfect for general-purpose data extraction.',
+        description:
+            'A straightforward web scraper without any special categorization. Perfect for general-purpose data extraction.',
         icons: mockIcons,
     },
 };

package/src/components/actor_template_card.tsx

@@ -65,13 +65,7 @@ const TemplateCardContentWrapper = styled.div`
     }
 `;
 
-export const ActorTemplateCard: React.FC<ActorTemplateCardProps> = ({
-    id,
-    label,
-    description,
-    icons,
-    useCases,
-}) => {
+export const ActorTemplateCard: React.FC<ActorTemplateCardProps> = ({ id, label, description, icons, useCases }) => {
     const templateCardContent = (
         <TemplateCardContentWrapper data-test={`actor-template-card-${id}`}>
             <div className={WrapperClasses.TEMPLATE_CARD_IMAGES}>{icons}</div>
@@ -79,17 +73,12 @@ export const ActorTemplateCard: React.FC<ActorTemplateCardProps> = ({
                 <TextMarketing size="regular" weight="bold">
                     {label}
                 </TextMarketing>
-                <TextMarketing
-                    size="small"
-                    className={WrapperClasses.TEMPLATE_CARD_DESCRIPTION}
-                >
+                <TextMarketing size="small" className={WrapperClasses.TEMPLATE_CARD_DESCRIPTION}>
                     {description}
                 </TextMarketing>
             </div>
             <div className={WrapperClasses.TEMPLATE_CARD_BADGES}>
-                {useCases?.includes('STARTER') && (
-                    <Badge variant="success">Starter</Badge>
-                )}
+                {useCases?.includes('STARTER') && <Badge variant="success">Starter</Badge>}
                 {useCases?.includes('AI') && (
                     <Badge
                         variant="success"
@@ -106,11 +95,5 @@ export const ActorTemplateCard: React.FC<ActorTemplateCardProps> = ({
         </TemplateCardContentWrapper>
     );
 
-    return (
-        <VerticalTile
-            id={`actor-template-card-${id}`}
-            content={templateCardContent}
-            isClickable
-        />
-    );
+    return <VerticalTile id={`actor-template-card-${id}`} content={templateCardContent} isClickable />;
 };

package/src/components/avatar/actor_avatar.tsx

@@ -64,11 +64,10 @@ export const ActorAvatarInner: FC<ActorAvatarProps> = ({
     const { generateProxyImageUrl } = useSharedUiDependencies();
 
     const maybeProxiedUrl = useMemo(
-        () => (
+        () =>
             generateProxyImageUrl && url
                 ? generateProxyImageUrl(url, { resize: { height: size * 2, width: size * 2 } })
-                : url
-        ),
+                : url,
         [generateProxyImageUrl, url, size],
     );
 
@@ -104,7 +103,7 @@ export const ActorAvatarInner: FC<ActorAvatarProps> = ({
         return (
             <StyledImg
                 ref={imageRefCallback}
-                crossOrigin='anonymous'
+                crossOrigin="anonymous"
                 src={maybeProxiedUrl}
                 className={fullClassName}
                 width={size}