@apify/ui-library 1.83.2-fixactorissuescomponentsoncl-2f1509.6 → 1.84.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.83.2-fixactorissuescomponentsoncl-2f1509.6+407316d3118",
+    "version": "1.84.1",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.14.0",
+        "@apify/ui-icons": "^1.14.1",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -52,14 +52,10 @@
         "styled-components": "^5.3.3"
     },
     "devDependencies": {
-        "@apify/eslint-config": "^1.0.0",
         "@types/lodash": "^4.14.200",
         "@types/node": "^22.10.5",
         "@types/react": "^18.2.74",
         "@types/styled-components": "^5.1.34",
-        "eslint-plugin-react": "^7.32.2",
-        "eslint-plugin-react-hooks": "^5.2.0",
-        "eslint-plugin-sonarjs": "^1.0.3",
         "recast": "^0.23.9",
         "style-dictionary": "^4.4.0",
         "typescript": "^5.1.6"
@@ -69,5 +65,5 @@
         "src",
         "style"
     ],
-    "gitHead": "407316d311811e7648358e86939a4ba82c503d45"
+    "gitHead": "920722b0b5980f8e199451dbd5c1e21969310eb7"
 }

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -207,7 +206,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                     const commonProps = {
                         className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),
                         'data-test': `code-block-tab-${tab.key}`,
-                        ..._.omit(tab, ['bashCommandsStart', 'content', 'languageOverride']),
+                        onClick: tab.onClick,
                     };
                     const children = (
                         <>
@@ -224,8 +223,10 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                         return (
                             <Link
                                 {...commonProps}
-                                key={tab.key}
                                 to={tab.to}
+                                rel={tab.rel}
+                                target={tab.target}
+                                key={tab.key}
                             >
                                 {children}
                             </Link>

package/src/components/message.tsx

@@ -1,48 +1,87 @@
 import clsx from 'clsx';
+import type { ReactNode } from 'react';
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-import { CheckCircleIcon, CrossIcon, InfoIcon, WarningTriangleIcon } from '@apify/ui-icons';
+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 { Heading } from './text/index.js';
+import { Text } from './text/index.js';
 
 export const messageClassNames = {
     main: 'Message',
     icon: 'icon',
     content: 'content',
     caption: 'caption',
+    description: 'description',
     dismiss: 'dismiss',
+    actionsWrapper: 'actionsWrapper',
 };
 
-const StyledMessage = styled(Box)`
+const StyledMessage = styled(Box)<{ $boxless?: boolean, $hasCaption?: boolean }>`
     display: flex;
+    align-items: center;
     gap: ${theme.space.space8};
 
     border-radius: ${theme.radius.radius8};
     box-shadow: ${theme.shadow.shadow1};
 
-    .${messageClassNames.content} {
-        flex: 1;
-        margin-top: 1px; /* This is to align icon with text (align-items: center not possible - icon should be on top) */
+    .${messageClassNames.icon} {
+        grid-area: iconArea;
+        color: ${theme.color.neutral.icon};
+        /* Icon has 16px but text 20. With this extra margin we make the elements aligned */
+        margin: ${theme.space.space2} 0;
     }
 
     .${messageClassNames.caption} {
-        /* TODO: We should not override the default Heading that is rendered for caption but it doesn't look good without these */
-        line-height: 20px;
-        font-weight: 600;
-        margin-bottom: ${theme.space.space4};
+        grid-area: captionArea;
     }
 
-    .${messageClassNames.dismiss} {
-        background: transparent;
-        height: 20px;
+    .${messageClassNames.description} {
+        grid-area: descriptionArea;
+    }
 
-        svg {
-            color: ${theme.color.neutral.icon}
+    .${messageClassNames.content} {
+        flex: 1;
+        display: grid;
+        gap: ${theme.space.space6} ${theme.space.space8};
+        grid-template-columns: auto 1fr;
+
+        a {
+            color: ${theme.color.neutral.text};
+            text-decoration: underline;
+            ${theme.typography.shared.desktop.bodyMMedium};
         }
+
+        ${({ $hasCaption }) => ($hasCaption
+        ? css`
+            grid-template-areas:
+                'iconArea captionArea'
+                'descriptionArea descriptionArea';
+        ` : css`
+            grid-template-areas:
+                'iconArea descriptionArea';
+        `)}
+    }
+
+
+    ${({ $boxless }) => (!$boxless && css`
+        /* the dismiss button is bigger than text so we apply smaller padding on wrapper & some on the content and icon */
+        padding: ${theme.space.space8} ${theme.space.space16};
+
+        .${messageClassNames.content} {
+            padding: ${theme.space.space4} 0;
+        }
+    `)}
+
+    .${messageClassNames.actionsWrapper} {
+        display: flex;
+        align-items: center;
+        gap: ${theme.space.space8};
     }
 
     &.borderless {
@@ -55,28 +94,36 @@ const StyledMessage = styled(Box)`
         background-color: ${theme.color.neutral.background};
         border: 1px solid ${theme.color.neutral.border};
 
-        .${messageClassNames.icon} { color: ${theme.color.primary.icon}; }
+        .${messageClassNames.icon} {
+            color: ${theme.color.neutral.icon};
+        }
     }
 
     &.success {
         background-color: ${theme.color.success.backgroundSubtle};
         border: 1px solid ${theme.color.success.borderSubtle};
 
-        .${messageClassNames.icon} { color: ${theme.color.success.icon}; }
+        .${messageClassNames.icon} {
+            color: ${theme.color.success.icon};
+        }
     }
 
     &.warning {
         background-color: ${theme.color.warning.backgroundSubtle};
         border: 1px solid ${theme.color.warning.borderSubtle};
 
-        .${messageClassNames.icon} { color: ${theme.color.warning.icon}; }
+        .${messageClassNames.icon} {
+            color: ${theme.color.warning.icon};
+        }
     }
 
     &.danger {
         background-color: ${theme.color.danger.backgroundSubtle};
         border: 1px solid ${theme.color.danger.borderSubtle};
 
-        .${messageClassNames.icon} { color: ${theme.color.danger.icon}; }
+        .${messageClassNames.icon} {
+            color: ${theme.color.danger.icon};
+        }
     }
 `;
 
@@ -84,20 +131,27 @@ export type MessageType = 'info' | 'warning' | 'success' | 'danger';
 
 const typeToIcon: { [key in MessageType]: React.ElementType } = {
     info: InfoIcon,
-    success: CheckCircleIcon,
+    success: CheckIcon,
     warning: WarningTriangleIcon,
-    danger: WarningTriangleIcon,
+    danger: XCircleIcon,
+};
+
+type ActionButtonProps = Omit<ButtonProps, 'children'> & {
+    label: ReactNode,
 };
 
 type MessageProps = BoxProps & {
     type: MessageType,
     caption?: string,
-    icon?: React.ElementType,
+    /** @deprecated Use `Icon` instead. */
+    icon?: IconComponentType,
+    Icon?: IconComponentType,
     onDismissClick?: () => void,
     borderless?: boolean,
     boxless?: boolean,
     as?: React.ElementType,
     dismissTrackingId?: string,
+    actions?: ActionButtonProps[],
 }
 
 /**
@@ -105,6 +159,7 @@ type MessageProps = BoxProps & {
  */
 export const Message: React.FC<MessageProps> = ({
     className,
+    Icon,
     icon,
     caption,
     children,
@@ -113,33 +168,56 @@ export const Message: React.FC<MessageProps> = ({
     borderless = false,
     boxless = false,
     dismissTrackingId,
+    actions = [],
     as,
     ...rest
 }) => {
-    const Icon = icon || typeToIcon[type];
+    const IconComponent = icon || Icon || typeToIcon[type];
+    const hasCaption = !!caption && !!children;
+
     return (
         <StyledMessage
             className={clsx(className, messageClassNames.main, type, borderless && 'borderless')}
             mb={boxless ? 'space8' : 'space16'} // TODO: Export message without margin
-            p={boxless ? 'none' : 'space16'}
             forwardedAs={as}
+            $boxless={boxless}
+            $hasCaption={hasCaption}
             {...rest}
         >
-            <Icon className={messageClassNames.icon} size="20" />
             <div className={messageClassNames.content}>
-                {caption && (<Heading as='div' type='titleM' className={messageClassNames.caption}>{caption}</Heading>)}
-                {children}
+                <IconComponent className={messageClassNames.icon} size='16' />
+                {hasCaption && <Text weight='bold' className={messageClassNames.caption}>{caption}</Text>}
+                <div className={messageClassNames.description}>{children}</div>
             </div>
-            {onDismissClick && (
-                <Button
-                    size='small'
-                    variant='tertiary'
-                    trackingId={dismissTrackingId}
-                    onClick={onDismissClick}
-                    className={messageClassNames.dismiss}
-                >
-                    <CrossIcon size="16" />
-                </Button>
+            {(actions.length > 0 || onDismissClick) && (
+                <div className={messageClassNames.actionsWrapper}>
+                    {actions.length > 0 && (
+                        <>
+                            {actions.map(({ label, ...action }, index) => (
+                                <Button
+                                    key={index}
+                                    size='small'
+                                    variant='primary'
+                                    {...action}
+                                >
+                                    {label}
+                                </Button>
+                            ))}
+                        </>
+                    )}
+                    {onDismissClick && (
+                        <Button
+                            size='small'
+                            variant='tertiary'
+                            trackingId={dismissTrackingId}
+                            onClick={onDismissClick}
+                            className={messageClassNames.dismiss}
+                        >
+                            <CrossIcon size="16" color={theme.color.neutral.icon}/>
+                        </Button>
+                    )}
+
+                </div>
             )}
         </StyledMessage>
     );

package/src/components/readme_renderer/table_of_contents.tsx

@@ -4,7 +4,7 @@ import React, {
     useMemo,
 } from 'react';
 import ReactMarkdown from 'react-markdown';
-import type { AllowElement } from 'react-markdown/lib/rehype-filter';
+import type { AllowElement } from 'react-markdown/lib/rehype-filter.js';
 import remarkToc from 'remark-toc';
 import styled from 'styled-components';
 

package/src/components/readme_renderer/utils.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import type { AllowElement } from 'react-markdown/lib/rehype-filter';
+import type { AllowElement } from 'react-markdown/lib/rehype-filter.js';
 import slugify from 'slugify';
 
 export const slugifyHeadingChildren = (

package/src/components/simple_markdown/simple_markdown.tsx

@@ -2,7 +2,7 @@ import type { Element, Root, Text as TextNode } from 'hast';
 import React, { useCallback, useMemo, useRef } from 'react';
 import type { Components } from 'react-markdown';
 import ReactMarkdown, { uriTransformer } from 'react-markdown';
-import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
+import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown.js';
 import rehypeRaw from 'rehype-raw';
 import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -1,6 +1,6 @@
 import qs from 'query-string';
 import React from 'react';
-import type { CodeProps, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react';
+import type { CodeProps, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react.js';
 import styled from 'styled-components';
 
 import { CheckIcon, LinkIcon } from '@apify/ui-icons';

package/src/components/tag.tsx

@@ -196,6 +196,6 @@ TagWrapper.displayName = 'Tag';
 
 // `forwardRef` can't handle generic types, should be fixable with React 19
 export const Tag = forwardRef(TagWrapper) as <T extends TagNodeType>(
-    // eslint-disable-next-line no-use-before-define -- see comment above 👆
+
     props: TagProps<T> & { ref?: ForwardedRef<TagNodePropsMap[T]['element']> },
 ) => ReturnType<typeof TagWrapper>;

package/src/components/to_consolidate/markdown.tsx

@@ -4,7 +4,7 @@ import qs from 'query-string';
 import React, { useMemo } from 'react';
 import type { Components } from 'react-markdown';
 import ReactMarkdown, { uriTransformer } from 'react-markdown';
-import type { AllowElement, Node } from 'react-markdown/lib/rehype-filter';
+import type { AllowElement, Node } from 'react-markdown/lib/rehype-filter.js';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import styled from 'styled-components';
@@ -266,11 +266,11 @@ const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
         @media (min-width: ${theme.layout.tablet}) {
             ${theme.typography.content.tablet.snippet}
         }
-        
+
         @media (min-width: ${theme.layout.desktop}) {
             ${theme.typography.content.desktop.snippet}
         }
-        
+
         b, strong{
             font-size: inherit !important;
             line-height: inherit !important;

package/src/utils/image_color.ts

@@ -31,6 +31,7 @@ export const useImageColor = () => {
             try {
                 setColor(patchDarknessInfo(await fac.getColorAsync(element)));
             } catch (error) {
+                // eslint-disable-next-line no-console
                 console.error('Failed to determine the image color.', { error });
             }
         };