@apify/ui-library 1.103.0 → 1.103.2-featurereact19upgrade-8b5553.91

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.103.0",
+    "version": "1.103.2-featurereact19upgrade-8b5553.91+a2cd968604c",
     "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.20.1",
+        "@apify/ui-icons": "^1.21.1-featurereact19upgrade-8b5553.91+a2cd968604c",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -37,32 +37,32 @@
         "prism-react-renderer": "^2.4.1",
         "prismjs": "^1.30.0",
         "query-string": "^8.1.0",
-        "react-markdown": "^8.0.5",
-        "rehype-raw": "^6.1.1",
+        "react-markdown": "^10.1.0",
+        "rehype-raw": "^7.0.0",
         "rehype-sanitize": "^6.0.0",
-        "remark-gfm": "^3.0.1",
-        "remark-toc": "8.0.1",
+        "remark-gfm": "^4.0.1",
+        "remark-toc": "9.0.0",
         "slugify": "^1.6.6",
-        "unified": "^10.0.0",
         "unist-util-visit": "^5.0.0"
     },
     "peerDependencies": {
-        "react": "17.x || 18.x",
-        "react-dom": "17.x || 18.x",
-        "styled-components": "^5.3.3"
+        "react": "17.x || 18.x || 19.x",
+        "react-dom": "17.x || 18.x || 19.x",
+        "styled-components": "^6.1.19"
     },
     "devDependencies": {
         "@storybook/react-vite": "^9.0.16",
+        "@types/hast": "^3.0.4",
         "@types/lodash": "^4.14.200",
-        "@types/react": "^18.2.74",
-        "@types/styled-components": "^5.1.34",
+        "@types/react": "19.2.2",
         "recast": "^0.23.9",
-        "style-dictionary": "^4.4.0"
+        "style-dictionary": "^4.4.0",
+        "styled-components": "^6.1.19"
     },
     "files": [
         "dist",
         "src",
         "style"
     ],
-    "gitHead": "d17760346a13806ba7f2bae7220eaad85e7d1a40"
+    "gitHead": "a2cd968604c50286bf2ed7ba2dc02adede332c2f"
 }

package/src/components/badge.tsx

@@ -1,11 +1,12 @@
 import type React from 'react';
 import { forwardRef } from 'react';
-import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import type { IconComponent, IconSize } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme.js';
 import type { WithTransientProps } from '../type_utils.js';
+import type { FlattenSimpleInterpolation } from '../utils/type_utils.js';
 import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
 import { Text } from './text/index.js';
 import type { SharedTextSize, SharedTextType } from './text/text_shared.js';

package/src/components/code/one_line_code/one_line_code.tsx

@@ -135,7 +135,7 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
     }
 `;
 
-export type OneLineCodeProps = BoxProps & {
+export type OneLineCodeProps = Omit<BoxProps, 'children'> & {
     children: string;
     language?: string;
     size?: SharedTextSize;

package/src/components/floating/floating_component_base.tsx

@@ -49,7 +49,7 @@ export interface FloatingComponentBaseProps {
     placement?: FloatingPlacement;
     autoPlacements?: FloatingPlacement[];
     strategy?: Strategy;
-    content?: ReactNode | string;
+    content?: ReactNode;
     children?: ReactNode;
     isOpen?: boolean;
     triggerRef?: RefObject<HTMLDivElement>;

package/src/components/floating/tooltip.tsx

@@ -3,7 +3,7 @@ import {
     useHover,
     useInteractions,
 } from '@floating-ui/react';
-import { type ComponentType, forwardRef, useState } from 'react';
+import { type ComponentType, type ElementType, forwardRef, type ReactNode, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
@@ -29,7 +29,7 @@ export const TOOLTIP_SIZES = {
 export type TooltipSize = typeof TOOLTIP_SIZES[keyof typeof TOOLTIP_SIZES];
 
 export interface TooltipProps extends Omit<FloatingComponentBaseProps, 'isOpen' | 'size'> {
-    as?: keyof JSX.IntrinsicElements | ComponentType<unknown>;
+    as?: ElementType;
     className?: string;
     delayShow?: number;
     delayHide?: number;
@@ -72,7 +72,7 @@ export const Tooltip = ({
     size = TOOLTIP_SIZES.SMALL,
     textAlign = TOOLTIP_TEXT_ALIGNS.LEFT,
     ...rest
-}: TooltipProps) => {
+}: TooltipProps): ReactNode => {
     const { uiTheme, tooltipSafeHtml } = useSharedUiDependencies();
     const [open, setOpen] = useState(false);
 
@@ -107,7 +107,7 @@ export const Tooltip = ({
 
     return (
         <TooltipFocusArea
-            as={as as keyof JSX.IntrinsicElements}
+            as={as}
             className={className}
             ref={refs.setReference}
             {...getReferenceProps()}

package/src/components/readme_renderer/table_of_contents.tsx

@@ -3,8 +3,7 @@ import React, {
     useCallback,
     useMemo,
 } from 'react';
-import ReactMarkdown from 'react-markdown';
-import type { AllowElement } from 'react-markdown/lib/rehype-filter.js';
+import ReactMarkdown, { type AllowElement } from 'react-markdown';
 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.js';
+import React, { type ReactElement, type ReactNode, useCallback } from 'react';
+import type { AllowElement } from 'react-markdown';
 import slugify from 'slugify';
 
 export const slugifyHeadingChildren = (
@@ -11,9 +11,12 @@ export const slugifyHeadingChildren = (
     React.Children.forEach(headingChildren, (child) => {
         if (typeof child === 'string') {
             slugs.push(slugify(child, { lower: true, strict: true }));
-        } else if (React.isValidElement(child) && child.props.children) {
-            const nestedSlugs = slugifyHeadingChildren(child.props.children);
-            if (nestedSlugs) slugs.push(nestedSlugs);
+        } else if (React.isValidElement(child)) {
+            const element = child as ReactElement<{ children?: ReactNode }>;
+            if (element.props.children) {
+                const nestedSlugs = slugifyHeadingChildren(element.props.children);
+                if (nestedSlugs) slugs.push(nestedSlugs);
+            }
         }
     });
 
@@ -35,7 +38,7 @@ export const cleanMarkdown = (markdown: string, removeFirstH1?: boolean): string
 // This removes the first element if it's a `h1` containing exactly the Actor title
 export const useActorTitleHeadingFilter = (actorTitle: string): AllowElement => {
     return useCallback((element, index, parent) => {
-        if (parent.type === 'root'
+        if (parent?.type === 'root'
             && index === 0
             && element.tagName === 'h1'
             && element.children.length === 1

package/src/components/shortcut.tsx

@@ -1,10 +1,11 @@
+import type { ElementType } from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../design_system/theme.js';
 import { Text } from './text/index.js';
 
 interface ShortcutProps {
-    as?: keyof JSX.IntrinsicElements;
+    as?: ElementType;
     className?: string;
     children: React.ReactNode;
     /* If true, always use dark mode colors */

package/src/components/simple_markdown/simple_markdown.tsx

@@ -1,14 +1,12 @@
 import type { Element, Root, Text as TextNode } from 'hast';
 import type React from 'react';
 import { 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.js';
+import type { Components, Options as ReactMarkdownOptions, UrlTransform } from 'react-markdown';
+import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
 import styled from 'styled-components';
-import type { Pluggable, PluggableList } from 'unified';
 import { visit } from 'unist-util-visit';
 
 import { theme } from '../../design_system/theme.js';
@@ -101,7 +99,7 @@ const unwrapUnsupportedElement = (node: Element): (Element | TextNode)[] => {
 
 const getUnsupportedRehypeTagsSanitationPlugIn = (
     allowedElements: string[],
-): Pluggable<unknown[]> => () => (tree: Root) => {
+) => () => (tree: Root) => {
     visit(tree, 'element', (node, index, parent) => {
         if (!allowedElements.includes(node.tagName) && parent && typeof index === 'number') {
             // Replace unsupported element with its valid children
@@ -153,7 +151,7 @@ const regularMarkdownSizeComponents: Components = {
     ol: ({ children, start }) => <TextContent as='ol' pl='space32' start={start}>{children}</TextContent>,
     li: ({ children }) => <TextContent as='li' mt='space4'>{children}</TextContent>,
     a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
-    code: ({ children, inline }) => <MarkdownCode inline={inline} size='regular'>{children}</MarkdownCode>,
+    code: ({ children, node }) => <MarkdownCode node={node} size='regular'>{children}</MarkdownCode>,
     img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
 };
 
@@ -174,17 +172,23 @@ const smallMarkdownSizeComponents: Components = {
     ol: ({ children, start }) => <Text as='ol' pl='space32' start={start}>{children}</Text>,
     li: ({ children }) => <Text as='li' mt='space4'>{children}</Text>,
     a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
-    code: ({ children, inline }) => <MarkdownCode inline={inline} size='small'>{children}</MarkdownCode>,
+    code: ({ children, node }) => <MarkdownCode node={node} size='small'>{children}</MarkdownCode>,
     img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
 };
 
 type MarkdownSize = 'regular' | 'small';
 
-export type SimpleMarkdownProps = ReactMarkdownOptions & {
+export type SimpleMarkdownProps = Omit<ReactMarkdownOptions, 'urlTransform' | 'children'> & {
+    // @deprecated use urlTransform instead
+    transformLinkUri?: UrlTransform,
+    // @deprecated use urlTransform instead
+    transformImageUri?: UrlTransform,
     size?: MarkdownSize,
+    children: string,
+    className?: string,
 }
 
-const useDefaultUrlTransform = () => {
+export const useDefaultUrlTransform = () => {
     const { windowLocationHost } = useSharedUiDependencies();
 
     return useCallback((url: string) => {
@@ -204,6 +208,7 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
     rehypePlugins,
     remarkPlugins,
     transformLinkUri,
+    transformImageUri,
     allowedElements,
     ...rest
 }) => {
@@ -216,22 +221,36 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
         ...components,
     });
 
-    const rehypePluginsRef = useRef<PluggableList>([
-        ...(rehypePlugins || [...defaultRehypePlugins, getUnsupportedRehypeTagsSanitationPlugIn(effectiveAllowedElements.current)]),
-        rehypeSanitize, // lets always sanitize the output
-    ]);
-
     const defaultUrlTransform = useDefaultUrlTransform();
 
+    const effectiveRehypePlugins = useMemo(() => {
+        const plugins = rehypePlugins ?? [
+            ...defaultRehypePlugins,
+            getUnsupportedRehypeTagsSanitationPlugIn(effectiveAllowedElements.current as string[]),
+        ];
+
+        return [
+            ...plugins,
+            rehypeSanitize,
+        ];
+    }, [rehypePlugins]);
+
     return (
         <StyledMarkdown
             components={effectiveComponents.current}
-            rehypePlugins={rehypePluginsRef.current}
+            rehypePlugins={effectiveRehypePlugins}
             remarkPlugins={remarkPlugins || defaultRemarkPlugins}
             allowedElements={effectiveAllowedElements.current}
-            transformLinkUri={(href, children, title) => {
-                const transformed = transformLinkUri ? transformLinkUri(href, children, title) : defaultUrlTransform(href);
-                return uriTransformer(transformed);
+            urlTransform={(href, children, node) => {
+                if (node.tagName === 'img') {
+                    return transformImageUri ? transformImageUri(href, children, node) : href;
+                }
+
+                if (node.tagName === 'a') {
+                    return transformLinkUri ? transformLinkUri(href, children, node) : defaultUrlTransform(href);
+                }
+
+                return href;
             }}
             {...rest}
         >

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -1,6 +1,6 @@
 import qs from 'query-string';
 import type React from 'react';
-import type { CodeProps, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react.js';
+import type { ExtraProps as MarkdownComponentExtraProps } from 'react-markdown';
 import styled from 'styled-components';
 
 import { CheckIcon, LinkIcon } from '@apify/ui-icons';
@@ -121,15 +121,21 @@ const StyledInlineCode = styled(InlineCode)`
     }
 `;
 
-type MarkdownCodeProps = Pick<CodeProps, 'inline' | 'className' | 'children'>
+type MarkdownCodeProps = {
+    size: SharedTextSize,
+    className?: string,
+    children: React.ReactNode,
+} & MarkdownComponentExtraProps;
 
-export const MarkdownCode: React.FC<MarkdownCodeProps & { size: SharedTextSize }> = ({
-    inline,
+export const MarkdownCode: React.FC<MarkdownCodeProps> = ({
     className,
     children,
     size,
+    node,
 }) => {
-    if (inline) {
+    const isInline = node?.position?.start?.line === node?.position?.end?.line;
+
+    if (isInline) {
         return <StyledInlineCode size={size} className={className}>{children}</StyledInlineCode>;
     }
 
@@ -276,11 +282,11 @@ export const MarkdownTable = styled.table`
 `;
 
 // TODO: This should be used for readmes
-export const MarkdownParagraphContent: React.FC<SharedTextProps & Pick<ReactMarkdownProps, 'node'>> = ({
+export const MarkdownParagraphContent: React.FC<SharedTextProps & MarkdownComponentExtraProps> = async ({
     children,
     node,
 }) => {
-    const child = node.children[0];
+    const child = node?.children[0];
     const isText = child?.type === 'text';
 
     const videoSrc = isText && getVideoSrc(child.value);

package/src/components/tabs/tab.tsx

@@ -1,13 +1,13 @@
 import clsx from 'clsx';
 import { createPath } from 'history';
 import type React from 'react';
-import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
 import type { IconComponent } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils.js';
+import type { FlattenSimpleInterpolation } from '../../utils/type_utils.js';
 import type { BadgeSize } from '../badge.js';
 import { Badge } from '../badge.js';
 import type { MarginSpacingProps, RegularBoxProps } from '../box.js';

package/src/components/tabs/tabs.tsx

@@ -1,11 +1,11 @@
 import type React from 'react';
 import { useCallback, useRef, useState } from 'react';
-import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils.js';
 import { useResizeObserverSsr } from '../../utils/resize_observer.js';
+import type { FlattenSimpleInterpolation } from '../../utils/type_utils.js';
 import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
 import { Box } from '../box.js';
 import type { TabData, TabVariant } from './tab.js';
@@ -77,7 +77,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
         /* Scrollbar */
         -ms-overflow-style: none;
         scrollbar-width: none;
-        
+
         &::-webkit-scrollbar {
             display: none; /* Chrome, Safari, Opera */
         }
@@ -107,7 +107,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
 
         &:first-of-type {
             left: 0;
-            
+
             &::after {
                 left: 0;
                 background: linear-gradient(90deg, ${theme.color.neutral.background} 0%, rgba(255, 255, 255, 0) 100%);
@@ -116,7 +116,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
 
         &:last-of-type {
             right: 0;
-            
+
             &::after {
                 right: 0;
                 background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.background} 100%);

package/src/components/tag.tsx

@@ -1,11 +1,12 @@
 import type React from 'react';
 import { type ForwardedRef, forwardRef } from 'react';
-import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import type { IconComponent, IconSize } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme.js';
 import type { WithTransientProps } from '../type_utils.js';
+import type { FlattenSimpleInterpolation } from '../utils/type_utils.js';
 import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
 import type { RegularButtonProps } from './button.js';
 import { Link, type RegularLinkProps } from './link.js';

package/src/components/text/text_content.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
-import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils.js';
+import type { FlattenSimpleInterpolation } from '../../utils/type_utils.js';
 import type { TextBaseProps } from './text_base.js';
 import { TextBaseComponent } from './text_base.js';
 

package/src/components/text/text_marketing.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
-import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils.js';
+import type { FlattenSimpleInterpolation } from '../../utils/type_utils.js';
 import type { TextBaseProps } from './text_base.js';
 import { TextBaseComponent } from './text_base.js';
 

package/src/components/to_consolidate/markdown.tsx

@@ -1,10 +1,9 @@
 import clsx from 'clsx';
 import _ from 'lodash';
 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.js';
+import React, { type ElementType, useMemo } from 'react';
+import type { AllowElement, Components } from 'react-markdown';
+import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import styled from 'styled-components';
@@ -20,6 +19,7 @@ import { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer/utils.
 
 interface StyledReadmeProps {
     $scrollMarginTopPx: number;
+    className?: string;
 }
 
 const markdownClassNames = {
@@ -31,7 +31,7 @@ const markdownClassNames = {
     INLINE_CODE: 'Markdown-InlineCode',
 } as const;
 
-const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
+const StyledMarkdown = styled(ReactMarkdown)<StyledReadmeProps>`
     @font-face {
         font-family: "ellipsis-font";
         src: local("Courier");
@@ -313,7 +313,7 @@ const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
 
 export interface HeadingRendererProps {
     node: {
-        tagName: keyof JSX.IntrinsicElements;
+        tagName: keyof React.ElementType;
     };
     children: React.ReactNode;
 }
@@ -322,7 +322,7 @@ export interface HeadingRendererProps {
  * Adds ids to headings
  */
 const DefaultHeadingRenderer = ({ node, children }: HeadingRendererProps) => {
-    const Tag = node.tagName;
+    const Tag = node.tagName as ElementType;
     const id = slugifyHeadingChildren(children);
     return <Tag id={id}>{children}</Tag>;
 };
@@ -478,7 +478,7 @@ const DefaultLinkRenderer = ({ node, href, ...props }: LinkRendererProps, { host
 interface ParagraphRendererProps extends React.HTMLAttributes<HTMLParagraphElement> {
     node?: {
         children: {
-            tagName: keyof JSX.IntrinsicElements;
+            tagName: keyof React.ElementType;
             type: string;
             value: string;
             properties: {
@@ -505,7 +505,7 @@ const ParagraphRenderer = ({ node, ...props }: ParagraphRendererProps) => {
 };
 
 const HeadingRendererWithAnchor = ({ node, children }: HeadingRendererProps) => {
-    const Tag = node.tagName;
+    const Tag = node.tagName as ElementType;
     const id = slugifyHeadingChildren(children);
 
     const { isCopied, copyToClipboard } = useCopyToClipboard();
@@ -619,8 +619,17 @@ const Markdown = ({
                     <img {...imageProps} {...(lazyLoadImages ? { loading: 'lazy' } : {})} /> // node is injected by rehype-raw plugin and causing invalid prop
                 ),
             } as unknown as Components}
-            transformLinkUri={(href) => (transformLinkUri ? uriTransformer(transformLinkUri(href)) : uriTransformer(href))}
-            transformImageUri={transformImageUri}
+            urlTransform={(href, children, node) => {
+                if (node.tagName === 'img') {
+                    return transformImageUri ? transformImageUri(href) : href;
+                }
+
+                if (node.tagName === 'a') {
+                    return transformLinkUri ? defaultUrlTransform(transformLinkUri(href)) : defaultUrlTransform(href);
+                }
+
+                return href;
+            }}
         >
             {cleanedMarkdown}
         </StyledMarkdown>

package/src/utils/index.ts

@@ -3,3 +3,4 @@ export * from './sanitization.js';
 export * from './image_color.js';
 export * from './resize_observer.js';
 export * from './css_utils.js';
+export * from './type_utils.js';

package/src/utils/type_utils.ts

@@ -0,0 +1,3 @@
+import type { css } from 'styled-components';
+
+export type FlattenSimpleInterpolation = ReturnType<typeof css>;