@apify/ui-library 1.106.2-featurereact19upgrade-8b5553.51 → 1.106.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.106.2-featurereact19upgrade-8b5553.51+26a5e87bb83",
+    "version": "1.106.3",
     "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.21.3-featurereact19upgrade-8b5553.51+26a5e87bb83",
+        "@apify/ui-icons": "^1.21.3",
         "@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": "^10.1.0",
-        "rehype-raw": "^7.0.0",
+        "react-markdown": "^8.0.5",
+        "rehype-raw": "^6.1.1",
         "rehype-sanitize": "^6.0.0",
-        "remark-gfm": "^4.0.1",
-        "remark-toc": "9.0.0",
+        "remark-gfm": "^3.0.1",
+        "remark-toc": "8.0.1",
         "slugify": "^1.6.6",
-        "unist-util-visit": "^5.0.0"
+        "unified": "^10.0.0"
     },
     "peerDependencies": {
-        "react": "17.x || 18.x || 19.x",
-        "react-dom": "17.x || 18.x || 19.x",
-        "styled-components": "^6.1.19"
+        "react": "17.x || 18.x",
+        "react-dom": "17.x || 18.x",
+        "styled-components": "^5.3.3",
+        "unist-util-visit": "^5.0.0"
     },
     "devDependencies": {
         "@storybook/react-vite": "^9.0.16",
-        "@types/hast": "^3.0.4",
         "@types/lodash": "^4.14.200",
-        "@types/react": "19.2.2",
+        "@types/react": "^18.2.74",
+        "@types/styled-components": "^5.1.34",
         "recast": "^0.23.9",
-        "style-dictionary": "^4.4.0",
-        "styled-components": "^6.1.19"
+        "style-dictionary": "^4.4.0"
     },
     "files": [
         "dist",
         "src",
         "style"
     ],
-    "gitHead": "26a5e87bb8316cce32599f1d460708c82fa79d84"
+    "gitHead": "7d292c5fdb03d052a601a8ce7265ce97b5f5b824"
 }

package/src/components/badge.tsx

@@ -1,12 +1,11 @@
 import type React from 'react';
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, type FlattenSimpleInterpolation } 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

@@ -137,7 +137,7 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
     }
 `;
 
-export type OneLineCodeProps = Omit<BoxProps, 'children'> & {
+export type OneLineCodeProps = BoxProps & {
     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;
+    content?: ReactNode | string;
     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, type ElementType, forwardRef, type ReactNode, useState } from 'react';
+import { type ComponentType, forwardRef, 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?: ElementType;
+    as?: keyof JSX.IntrinsicElements | ComponentType<unknown>;
     className?: string;
     delayShow?: number;
     delayHide?: number;
@@ -72,7 +72,7 @@ export const Tooltip = ({
     size = TOOLTIP_SIZES.SMALL,
     textAlign = TOOLTIP_TEXT_ALIGNS.LEFT,
     ...rest
-}: TooltipProps): ReactNode => {
+}: TooltipProps) => {
     const { uiTheme, tooltipSafeHtml } = useSharedUiDependencies();
     const [open, setOpen] = useState(false);
 
@@ -107,7 +107,7 @@ export const Tooltip = ({
 
     return (
         <TooltipFocusArea
-            as={as}
+            as={as as keyof JSX.IntrinsicElements}
             className={className}
             ref={refs.setReference}
             {...getReferenceProps()}

package/src/components/readme_renderer/table_of_contents.tsx

@@ -3,7 +3,8 @@ import React, {
     useCallback,
     useMemo,
 } from 'react';
-import ReactMarkdown, { type AllowElement } from 'react-markdown';
+import ReactMarkdown from 'react-markdown';
+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, { type ReactElement, type ReactNode, useCallback } from 'react';
-import type { AllowElement } from 'react-markdown';
+import React, { useCallback } from 'react';
+import type { AllowElement } from 'react-markdown/lib/rehype-filter.js';
 import slugify from 'slugify';
 
 export const slugifyHeadingChildren = (
@@ -11,12 +11,9 @@ 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)) {
-            const element = child as ReactElement<{ children?: ReactNode }>;
-            if (element.props.children) {
-                const nestedSlugs = slugifyHeadingChildren(element.props.children);
-                if (nestedSlugs) slugs.push(nestedSlugs);
-            }
+        } else if (React.isValidElement(child) && child.props.children) {
+            const nestedSlugs = slugifyHeadingChildren(child.props.children);
+            if (nestedSlugs) slugs.push(nestedSlugs);
         }
     });
 
@@ -38,7 +35,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,11 +1,10 @@
-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?: ElementType;
+    as?: keyof JSX.IntrinsicElements;
     className?: string;
     children: React.ReactNode;
     /* If true, always use dark mode colors */

package/src/components/simple_markdown/simple_markdown.tsx

@@ -1,12 +1,14 @@
 import type { Element, Root, Text as TextNode } from 'hast';
 import type React from 'react';
 import { useCallback, useMemo, useRef } from 'react';
-import type { Components, Options as ReactMarkdownOptions, UrlTransform } from 'react-markdown';
-import ReactMarkdown from 'react-markdown';
+import type { Components } from 'react-markdown';
+import ReactMarkdown, { uriTransformer } from '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';
 import styled from 'styled-components';
+import type { Pluggable, PluggableList } from 'unified';
 import { visit } from 'unist-util-visit';
 
 import { theme } from '../../design_system/theme.js';
@@ -59,7 +61,7 @@ export const defaultAllowedElements = [
     'ul',
 ];
 
-const StyledMarkdownWrapper = styled(Box)`
+const StyledMarkdown = styled(ReactMarkdown)`
     scroll-margin-top: 10px;
 
     overflow: auto;
@@ -99,7 +101,7 @@ const unwrapUnsupportedElement = (node: Element): (Element | TextNode)[] => {
 
 const getUnsupportedRehypeTagsSanitationPlugIn = (
     allowedElements: string[],
-) => () => (tree: Root) => {
+): Pluggable<unknown[]> => () => (tree: Root) => {
     visit(tree, 'element', (node, index, parent) => {
         if (!allowedElements.includes(node.tagName) && parent && typeof index === 'number') {
             // Replace unsupported element with its valid children
@@ -151,7 +153,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, node }) => <MarkdownCode node={node} size='regular'>{children}</MarkdownCode>,
+    code: ({ children, inline }) => <MarkdownCode inline={inline} size='regular'>{children}</MarkdownCode>,
     img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
 };
 
@@ -172,23 +174,17 @@ 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, node }) => <MarkdownCode node={node} size='small'>{children}</MarkdownCode>,
+    code: ({ children, inline }) => <MarkdownCode inline={inline} 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 = Omit<ReactMarkdownOptions, 'urlTransform' | 'children'> & {
-    // @deprecated use urlTransform instead
-    transformLinkUri?: UrlTransform,
-    // @deprecated use urlTransform instead
-    transformImageUri?: UrlTransform,
+export type SimpleMarkdownProps = ReactMarkdownOptions & {
     size?: MarkdownSize,
-    children: string,
-    className?: string,
 }
 
-export const useDefaultUrlTransform = () => {
+const useDefaultUrlTransform = () => {
     const { windowLocationHost } = useSharedUiDependencies();
 
     return useCallback((url: string) => {
@@ -208,9 +204,7 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
     rehypePlugins,
     remarkPlugins,
     transformLinkUri,
-    transformImageUri,
     allowedElements,
-    className,
     ...rest
 }) => {
     const cleanedMarkdown = useMemo(() => cleanMarkdown(markdown), [markdown]);
@@ -222,42 +216,26 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
         ...components,
     });
 
-    const defaultUrlTransform = useDefaultUrlTransform();
-
-    const effectiveRehypePlugins = useMemo(() => {
-        const plugins = rehypePlugins ?? [
-            ...defaultRehypePlugins,
-            getUnsupportedRehypeTagsSanitationPlugIn(effectiveAllowedElements.current as string[]),
-        ];
+    const rehypePluginsRef = useRef<PluggableList>([
+        ...(rehypePlugins || [...defaultRehypePlugins, getUnsupportedRehypeTagsSanitationPlugIn(effectiveAllowedElements.current)]),
+        rehypeSanitize, // lets always sanitize the output
+    ]);
 
-        return [
-            ...plugins,
-            rehypeSanitize,
-        ];
-    }, [rehypePlugins]);
+    const defaultUrlTransform = useDefaultUrlTransform();
 
     return (
-        <StyledMarkdownWrapper className={className}>
-            <ReactMarkdown
-                components={effectiveComponents.current}
-                rehypePlugins={effectiveRehypePlugins}
-                remarkPlugins={remarkPlugins || defaultRemarkPlugins}
-                allowedElements={effectiveAllowedElements.current}
-                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}
-            >
-                {cleanedMarkdown}
-            </ReactMarkdown>
-        </StyledMarkdownWrapper>
+        <StyledMarkdown
+            components={effectiveComponents.current}
+            rehypePlugins={rehypePluginsRef.current}
+            remarkPlugins={remarkPlugins || defaultRemarkPlugins}
+            allowedElements={effectiveAllowedElements.current}
+            transformLinkUri={(href, children, title) => {
+                const transformed = transformLinkUri ? transformLinkUri(href, children, title) : defaultUrlTransform(href);
+                return uriTransformer(transformed);
+            }}
+            {...rest}
+        >
+            {cleanedMarkdown}
+        </StyledMarkdown>
     );
 };

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