@apify/ui-library 1.92.1-featimprovetooltip-7e1224.86 → 1.93.1-featimprovetooltip-7e1224.59

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.92.1-featimprovetooltip-7e1224.86+42ab7a23a31",
+    "version": "1.93.1-featimprovetooltip-7e1224.59+10162d57e72",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -66,5 +66,5 @@
         "src",
         "style"
     ],
-    "gitHead": "42ab7a23a314c6d9052bbeee53f667f127fa017f"
+    "gitHead": "10162d57e72870723b901e5274c5e8b1d769787f"
 }

package/src/components/floating/tooltip.stories.jsx

@@ -7,6 +7,10 @@ import { Tooltip } from './tooltip.tsx';
 const Child = () => <div style={{ padding: '8px', border: '1px solid black', borderRadius: '4px' }}>Hover me</div>;
 
 const longText = 'This is a tooltip with a longer text. This is a tooltip with a longer text. This is a tooltip with a longer text.';
+const longTextWithLinks = <div style={{ display: 'inline' }}>
+This is a tooltip with a longer text. This is a tooltip with a longer text. This is a tooltip with a longer text and finally we have a{' '}
+    <a href="https://www.example.com">link</a>.
+</div>;
 
 export default {
     title: 'UI-Library/Tooltip',
@@ -72,16 +76,13 @@ export const Default = (args) => {
                 imageUrl='https://picsum.photos/id/1/1024'
                 subtleText="This is some subtle text"
                 placement={FLOATING_PLACEMENT.BOTTOM}
-                content={longText}
+                content={longTextWithLinks}
             ><Child /></Tooltip>
             With everything
         </div>
     </DefaultStoryWrapper>
     );
 };
-Default.args = {
-    persistent: { isOpenOverride: true },
-};
 
 export const Sizes = () => {
     return (<DefaultStoryWrapper>

package/src/components/floating/tooltip.tsx

@@ -28,15 +28,9 @@ export const TOOLTIP_SIZES = {
 
 export type TooltipSize = typeof TOOLTIP_SIZES[keyof typeof TOOLTIP_SIZES];
 
-interface PersistentTooltipProps {
-    isOpenOverride?: boolean;
-    CloseButtonComponent?: ComponentType;
-}
-
 export interface TooltipProps extends Omit<FloatingComponentBaseProps, 'isOpen' | 'size'> {
     as?: keyof JSX.IntrinsicElements | ComponentType<unknown>;
     className?: string;
-    persistent?: PersistentTooltipProps;
     delayShow?: number;
     delayHide?: number;
     shortcuts?: string[];
@@ -70,7 +64,6 @@ const StyledFloatingComponentBase = styled(FloatingComponentBase)<{ $isDarkTheme
 export const Tooltip = ({
     as,
     className,
-    persistent,
     delayShow = 500,
     delayHide = 50,
     shortcuts = [],
@@ -80,8 +73,7 @@ export const Tooltip = ({
     textAlign = TOOLTIP_TEXT_ALIGNS.LEFT,
     ...rest
 }: TooltipProps) => {
-    const { uiTheme } = useSharedUiDependencies();
-    const { isOpenOverride, CloseButtonComponent } = persistent || {};
+    const { uiTheme, tooltipSafeHtml } = useSharedUiDependencies();
     const [open, setOpen] = useState(false);
 
     const { refs, context } = useFloating({
@@ -100,9 +92,9 @@ export const Tooltip = ({
 
     const tooltipProps = {
         ...rest,
-        isOpen: isOpenOverride !== undefined ? isOpenOverride : open,
+        isOpen: open,
         content: <TooltipContent
-            content={rest.content}
+            content={tooltipSafeHtml(rest.content)}
             shortcuts={shortcuts}
             imageUrl={imageUrl}
             subtleText={subtleText}
@@ -124,7 +116,6 @@ export const Tooltip = ({
             >
                 <StyledFloatingComponentBase
                     {...tooltipProps}
-                    CloseButtonComponent={CloseButtonComponent}
                     $isDarkTheme={uiTheme === 'DARK'}
                 />
             </div>

package/src/components/shortcut.stories.jsx

@@ -23,7 +23,7 @@ export const ShortcutComponent = () => {
             <Shortcut>Shift</Shortcut>
         </div>
     Dark:
-        <div style={{ display: 'flex', gap: '4px', backgroundColor: theme.colorPalette.dark.neutral700, padding: '16px' }}>
+        <div style={{ display: 'flex', gap: '4px', backgroundColor: theme.colorPalette.dark.neutral950, padding: '16px' }}>
             <Shortcut dark>F</Shortcut>
             <Shortcut dark>Ctrl / ⌘</Shortcut>
             <Shortcut dark>Shift</Shortcut>

package/src/components/shortcut.tsx

@@ -25,8 +25,8 @@ const darkColors = css`
 `;
 
 const StyledShortcut = styled(Text)<{ $dark?: boolean }>`
-    min-width: 10px; /* 20 - paddings - borders */
-    height: 14px; /* 20 - paddings - borders */
+    min-width: 20px;
+    height: 20px;
     display: inline-flex;
     align-items: center;
     justify-content: center;

package/src/components/simple_markdown/simple_markdown.tsx

@@ -14,6 +14,7 @@ import { visit } from 'unist-util-visit';
 import { theme } from '../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
 import { Box } from '../box.js';
+import { Image } from '../image.js';
 import { isUrlExternal } from '../link.js';
 import { cleanMarkdown } from '../readme_renderer/utils.js';
 import { Heading, HeadingContent, Text, TextContent } from '../text/index.js';
@@ -106,6 +107,28 @@ const getUnsupportedRehypeTagsSanitationPlugIn = (
     });
 };
 
+const MarkdownImage = ({
+    src,
+    alt,
+    height,
+    width,
+}: {
+    src?: string | null;
+    alt?: string;
+    height?: number | string;
+    width?: number | string;
+}) => {
+    if (!src) return null; // If no src, do not render the image
+    return (
+        <Image
+            src={src || ''}
+            alt={alt}
+            height={height ? Number.parseInt(height.toString(), 10) : undefined}
+            width={width ? Number.parseInt(width.toString(), 10) : undefined}
+        />
+    );
+};
+
 export const defaultRehypePlugins = [rehypeRaw];
 export const defaultRemarkPlugins = [remarkGfm];
 
@@ -128,6 +151,7 @@ const regularMarkdownSizeComponents: Components = {
     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>,
+    img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
 };
 
 const smallMarkdownSizeComponents: Components = {
@@ -148,6 +172,7 @@ const smallMarkdownSizeComponents: Components = {
     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>,
+    img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
 };
 
 type MarkdownSize = 'regular' | 'small';

package/src/ui_dependency_provider.tsx

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { ReactNode } from 'react';
 import { createContext, useContext } from 'react';
 
 import type { UiThemeOption } from './design_system/theme.js';
@@ -32,6 +33,8 @@ export interface UiDependencies {
     uiTheme?: UiThemeOption, // Optional - as we can just fallback to light theme on the web
     // TODO: Make required once we add it on the web
     generateProxyImageUrl?: (url: string, options: ImageProxyOptions) => string
+    // Sanitize HTML for tooltips with SafeHtml component
+    tooltipSafeHtml: (content: ReactNode | string) => ReactNode,
 }
 
 interface UiDependencyProviderProps {