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

package/package.json

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

package/src/components/floating/floating_component_base.tsx

@@ -1,5 +1,4 @@
 import {
-    arrow,
     autoPlacement,
     autoUpdate,
     flip,
@@ -9,15 +8,15 @@ import {
     shift,
     type Strategy,
     useFloating,
+    useTransitionStyles,
 } from '@floating-ui/react';
 import clsx from 'clsx';
-import { type ComponentType, type CSSProperties, forwardRef, type MouseEvent, type ReactNode, type RefObject, useMemo, useRef } from 'react';
-import styled, { keyframes } from 'styled-components';
+import { type ComponentType, type CSSProperties, forwardRef, type MouseEvent, type ReactNode, type RefObject } from 'react';
+import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 
 export const classNames = {
-    ARROW: 'FloatingComponent-arrow',
     CHILDREN: 'FloatingComponent-children',
 };
 
@@ -38,18 +37,7 @@ export const FLOATING_PLACEMENT = {
 
 export type FloatingPlacement = typeof FLOATING_PLACEMENT[keyof typeof FLOATING_PLACEMENT];
 
-interface FadeInProps {
-    children: ReactNode;
-    duration?: number;
-    delay?: number;
-    $minHeight?: string;
-}
-
-interface FloatingComponentWrapStyledProps {
-    arrowRotationDegs: number;
-}
-
-interface FloatingComponentWrapProps extends FloatingComponentWrapStyledProps {
+interface FloatingComponentWrapProps {
     showInPortal?: boolean;
     className?: string;
     style?: CSSProperties;
@@ -72,28 +60,7 @@ export interface FloatingComponentBaseProps {
     showInPortal?: boolean;
 }
 
-const fadeIn = keyframes`
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-`;
-
-const FadeIn = styled.div<FadeInProps>`
-    @media (prefers-reduced-motion: no-preference) {
-        animation-name: ${fadeIn};
-        animation-fill-mode: backwards;
-        animation-duration: ${(props) => `${props.duration || 240}ms`};
-        animation-delay: ${(props) => `${props.delay || 0}ms`};
-    }
-
-    min-height: ${({ $minHeight }) => $minHeight || 'unset'};
-`;
-
-const FloatingComponentWrapStyled = styled.span<FloatingComponentWrapStyledProps>`
-    box-shadow: ${theme.shadow.shadow2};
+const FloatingComponentWrapStyled = styled.span`
     padding: ${theme.space.space16};
     ${theme.typography.shared.mobile.bodyM};
     border-radius: 0.8rem;
@@ -101,17 +68,6 @@ const FloatingComponentWrapStyled = styled.span<FloatingComponentWrapStyledProps
     white-space: normal;
     word-break: break-word;
     cursor: default;
-    text-align: left;
-
-    .${classNames.ARROW} {
-        position: absolute;
-        background-color: inherit;
-        border: inherit;
-        width: 10px;
-        height: 10px;
-        transform: ${({ arrowRotationDegs }) => `rotate(${arrowRotationDegs}deg)`} ;
-        z-index:-1;
-    }
 
     @media ${theme.device.tablet} {
         ${theme.typography.shared.tablet.bodyM};
@@ -164,19 +120,17 @@ export const FloatingComponentBase = ({
     CloseButtonComponent,
     showInPortal = false,
 }: FloatingComponentBaseProps) => {
-    const arrowRef = useRef<HTMLDivElement>(null);
-
     const {
         x,
         y,
         refs: { setReference, setFloating },
-        placement: effectivePlacement,
         strategy: effectiveStrategy,
         middlewareData: {
-            arrow: { x: arrowX, y: arrowY } = {},
             hide: refHidden,
         },
+        context,
     } = useFloating({
+        open: isOpen,
         placement,
         strategy,
         whileElementsMounted: autoUpdate,
@@ -184,40 +138,28 @@ export const FloatingComponentBase = ({
             offset(offsetPx),
             autoPlacements?.length ? autoPlacement({ allowedPlacements: autoPlacements }) : flip(),
             shift({ padding: 5 }),
-            arrow({ element: arrowRef, padding: 9 }),
             hide({
                 strategy: 'referenceHidden',
             }),
         ],
     });
 
-    const arrowStyle = useMemo(() => {
-        const staticSide = {
-            top: 'bottom',
-            right: 'left',
-            bottom: 'top',
-            left: 'right',
-        }[effectivePlacement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left'];
-
-        let borderNone: CSSProperties = { borderLeft: 0, borderTop: 0 };
-        if (staticSide === 'bottom') borderNone = { borderRight: 0, borderBottom: 0 };
-        if (staticSide === 'right') borderNone = { borderLeft: 0, borderBottom: 0 };
-        if (staticSide === 'left') borderNone = { borderRight: 0, borderTop: 0 };
-
-        const style: CSSProperties = {
-            left: arrowX != null ? `${arrowX}px` : '',
-            top: arrowY != null ? `${arrowY}px` : '',
-            ...borderNone,
-        };
-
-        if (staticSide) {
-            (style as Record<string, string | number>)[staticSide] = '-6px';
-        }
-
-        return style;
-    }, [arrowX, arrowY, effectivePlacement]);
-
-    const arrowRotationDegs = effectivePlacement.includes(FLOATING_PLACEMENT.TOP) || effectivePlacement.includes(FLOATING_PLACEMENT.BOTTOM) ? 225 : 45;
+    const { isMounted, styles } = useTransitionStyles(context, {
+        initial: ({ side }) => {
+            switch (side) {
+                case 'top':
+                    return { opacity: 0, scale: '0.9', transform: 'translateY(10px)' };
+                case 'bottom':
+                    return { opacity: 0, scale: '0.9', transform: 'translateY(-10px)' };
+                case 'left':
+                    return { opacity: 0, scale: '0.9', transform: 'translateX(10px)' };
+                case 'right':
+                    return { opacity: 0, scale: '0.9', transform: 'translateX(-10px)' };
+                default:
+                    return {};
+            }
+        },
+    });
 
     if (!content) return <span>{children}</span>;
 
@@ -227,8 +169,8 @@ export const FloatingComponentBase = ({
             <ChildrenWrap className={clsx(classNames.CHILDREN, contentWrapClassName)} ref={setReference}>
                 {children}
             </ChildrenWrap>
-            {isOpen && (
-                <FloatingComponentWrap arrowRotationDegs={arrowRotationDegs}
+            { isMounted && (
+                <FloatingComponentWrap
                     className={className}
                     ref={setFloating}
                     style={{
@@ -237,23 +179,19 @@ export const FloatingComponentBase = ({
                         left: x ?? 0,
                         width: 'max-content',
                         visibility: refHidden?.referenceHidden ? 'hidden' : 'visible',
+                        ...styles,
                     }}
                     onClick={(e) => e.stopPropagation()}
                     showInPortal={showInPortal}
                 >
-                    <FadeIn delay={60} ref={triggerRef}>
+                    <div ref={triggerRef}>
                         {CloseButtonComponent
                             ? <StyledPopoverBox>
                                 {content}
                                 <CloseButtonComponent />
                             </StyledPopoverBox>
                             : content}
-                    </FadeIn>
-                    <div
-                        ref={arrowRef}
-                        className={classNames.ARROW}
-                        style={arrowStyle}
-                    />
+                    </div>
                 </FloatingComponentWrap>
             )}
         </>

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

@@ -19,7 +19,7 @@ export default {
     },
     decorators: [
         (Story) => (
-            <div style={{ margin: '3em', width: 'fit-content' }}>
+            <div style={{ margin: '5em', width: 'fit-content' }}>
                 <Story />
             </div>
         ),
@@ -27,6 +27,7 @@ export default {
     args: {
         children: <Child />,
         content: 'This is a tooltip',
+        isDarkTheme: false,
     },
 };
 
@@ -40,31 +41,31 @@ const DefaultStoryWrapper = styled.div`
 export const Default = (args) => {
     return (<DefaultStoryWrapper>
         <div>
-            Default:
             <Tooltip {...args}/>
+            Default
         </div>
         <div>
-            With shortcuts:
             <Tooltip shortcuts={['Ctrl / ⌘', 'F']} {...args}/>
+            With shortcuts
         </div>
         <div>
-            With shortcuts and long text:
-            <Tooltip
-                persistent={{ isOpenOverride: true }}
-                shortcuts={['Ctrl / ⌘', 'F']}
-                content={longText}
-            ><Child /></Tooltip>
+            <Tooltip subtleText="This is some subtle text" {...args} />
+            With subtleText
         </div>
         <div>
-            With image:
             <Tooltip imageUrl='https://picsum.photos/id/1/1024' {...args} />
+            With image
         </div>
         <div>
-            With subtleText:
-            <Tooltip subtleText="This is some subtle text" {...args} />
+            <Tooltip
+                persistent={{ isOpenOverride: true }}
+                shortcuts={['Ctrl / ⌘', 'F']}
+                content={longText}
+                textAlign='center'
+            ><Child /></Tooltip>
+            With shortcuts and long centered text
         </div>
         <div>
-            With everything:
             <Tooltip
                 persistent={{ isOpenOverride: true }}
                 shortcuts={['Ctrl / ⌘', 'F']}
@@ -73,6 +74,7 @@ export const Default = (args) => {
                 placement={FLOATING_PLACEMENT.BOTTOM}
                 content={longText}
             ><Child /></Tooltip>
+            With everything
         </div>
     </DefaultStoryWrapper>
     );

package/src/components/floating/tooltip.tsx

@@ -4,12 +4,20 @@ import {
     useInteractions,
 } from '@floating-ui/react';
 import { type ComponentType, forwardRef, useState } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
 import { FloatingComponentBase, type FloatingComponentBaseProps } from './floating_component_base.js';
 import { TooltipContent } from './tooltip_content.js';
 
+export const TOOLTIP_TEXT_ALIGNS = {
+    LEFT: 'left',
+    CENTER: 'center',
+} as const;
+
+export type TooltipTextAlign = typeof TOOLTIP_TEXT_ALIGNS[keyof typeof TOOLTIP_TEXT_ALIGNS];
+
 export const TOOLTIP_SIZES = {
     XSMALL: 'xsmall',
     SMALL: 'small',
@@ -35,6 +43,7 @@ export interface TooltipProps extends Omit<FloatingComponentBaseProps, 'isOpen'
     imageUrl?: string;
     subtleText?: string;
     size?: TooltipSize;
+    textAlign?: TooltipTextAlign;
 }
 
 interface WithTooltipProps {
@@ -44,11 +53,15 @@ interface WithTooltipProps {
 // Using a styled component to get access to the `as` prop
 const TooltipFocusArea = styled.span``;
 
-const StyledFloatingComponentBase = styled(FloatingComponentBase)`
+const StyledFloatingComponentBase = styled(FloatingComponentBase)<{ $isDarkTheme?: boolean }>`
     color: ${theme.colorPalette.dark.neutral0};
     background-color: ${theme.colorPalette.dark.neutral900};
-    border: 1px solid ${theme.color.neutral.smallTooltipBorder};
     padding: ${theme.space.space8};
+
+    ${({ $isDarkTheme }) => $isDarkTheme && css`
+        box-shadow: ${theme.shadow.shadow2};
+        border: 1px solid ${theme.color.neutral.smallTooltipBorder};
+    `}
 `;
 
 /**
@@ -64,8 +77,10 @@ export const Tooltip = ({
     imageUrl,
     subtleText,
     size = TOOLTIP_SIZES.SMALL,
+    textAlign = TOOLTIP_TEXT_ALIGNS.LEFT,
     ...rest
 }: TooltipProps) => {
+    const { uiTheme } = useSharedUiDependencies();
     const { isOpenOverride, CloseButtonComponent } = persistent || {};
     const [open, setOpen] = useState(false);
 
@@ -86,7 +101,14 @@ export const Tooltip = ({
     const tooltipProps = {
         ...rest,
         isOpen: isOpenOverride !== undefined ? isOpenOverride : open,
-        content: <TooltipContent content={rest.content} shortcuts={shortcuts} imageUrl={imageUrl} subtleText={subtleText} size={size} />,
+        content: <TooltipContent
+            content={rest.content}
+            shortcuts={shortcuts}
+            imageUrl={imageUrl}
+            subtleText={subtleText}
+            size={size}
+            textAlign={textAlign}
+        />,
     };
 
     return (
@@ -100,17 +122,21 @@ export const Tooltip = ({
                 ref={refs.setFloating}
                 {...getFloatingProps()}
             >
-                <StyledFloatingComponentBase {...tooltipProps} CloseButtonComponent={CloseButtonComponent} />
+                <StyledFloatingComponentBase
+                    {...tooltipProps}
+                    CloseButtonComponent={CloseButtonComponent}
+                    $isDarkTheme={uiTheme === 'DARK'}
+                />
             </div>
         </TooltipFocusArea>
     );
 };
 
-export function withTooltip<T extends Record<string, unknown> = Record<string, unknown>>(Component: ComponentType<T>) {
-    const Enhanced = forwardRef<HTMLElement, T & WithTooltipProps>(({ tooltipProps, ...rest }, ref) => {
-        if (!tooltipProps) return <Component {...(rest as unknown as T)} ref={ref} />;
+export function withTooltip<TProps extends Record<string, unknown> = Record<string, unknown>>(Component: ComponentType<TProps>) {
+    const Enhanced = forwardRef<HTMLElement, TProps & WithTooltipProps>(({ tooltipProps, ...rest }, ref) => {
+        if (!tooltipProps) return <Component {...(rest as unknown as TProps)} ref={ref} />;
         return <Tooltip {...tooltipProps}>
-            <Component {...(rest as unknown as T)} ref={ref} />
+            <Component {...(rest as unknown as TProps)} ref={ref} />
         </Tooltip>;
     });
 

package/src/components/floating/tooltip_content.tsx

@@ -2,9 +2,10 @@ import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import { Shortcut } from '../shortcut.js';
-import { TOOLTIP_SIZES, type TooltipProps, type TooltipSize } from './tooltip.js';
+import type { TooltipProps, TooltipSize, TooltipTextAlign } from './tooltip.js';
+import { TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS } from './tooltip.js';
 
-type ContentProps = Pick<TooltipProps, 'content' | 'shortcuts' | 'imageUrl' | 'subtleText' | 'size'>;
+type ContentProps = Pick<TooltipProps, 'content' | 'shortcuts' | 'imageUrl' | 'subtleText' | 'size' | 'textAlign'>;
 
 const TOOLTIP_SIZES_VALUES: Record<TooltipSize, string> = {
     xsmall: '24rem',
@@ -14,61 +15,83 @@ const TOOLTIP_SIZES_VALUES: Record<TooltipSize, string> = {
     xlarge: '64rem',
 };
 
-const StyledContent = styled.div<{ $size: TooltipSize }>`
+const TOOLTIP_CLASSNAMES = {
+    IMAGE: 'Tooltip-image',
+    TEXT_CONTENT: 'Tooltip-textContent',
+    SUBTLE_TEXT: 'Tooltip-subtleText',
+    SHORTCUT_CONTAINER: 'Tooltip-shortcutContainer',
+} as const;
+
+const StyledContent = styled.div<{ $size: TooltipSize, $textAlign: TooltipTextAlign }>`
     display: flex;
     flex-direction: column;
     gap: ${theme.space.space8};
     /* Size - (tooltip padding + border) * 2 */
     max-width: ${({ $size }) => css`calc(${TOOLTIP_SIZES_VALUES[$size]} - (${theme.space.space8} + 1px) * 2)`};
+    text-align: ${({ $textAlign }) => $textAlign || 'left'};
+    align-items: ${({ $textAlign }) => ($textAlign === 'center' ? 'center' : 'flex-start')};
 
-    .Tooltip-image {
+    .${TOOLTIP_CLASSNAMES.IMAGE} {
         max-width: 100%;
         max-height: 150px;
         border-radius: 4px;
         object-fit: contain;
     }
 
-    .Tooltip-textContent {
+    .${TOOLTIP_CLASSNAMES.TEXT_CONTENT} {
         display: flex;
         flex-direction: column;
         gap: ${theme.space.space8};
+        align-items: ${({ $textAlign }) => ($textAlign === 'center' ? 'center' : 'flex-start')};
 
         /* When there is no child with subtleText class */
-        &:not(:has(.Tooltip-subtleText)){
+        &:not(:has(.${TOOLTIP_CLASSNAMES.SUBTLE_TEXT})){
             flex-direction: row;
             flex-wrap: wrap;
         }
 
-        .Tooltip-subtleText {
+        /* When there is a child with subtleText class */
+        &:has(.${TOOLTIP_CLASSNAMES.SUBTLE_TEXT}){
+            text-align: left;
+        }
+
+        .${TOOLTIP_CLASSNAMES.SUBTLE_TEXT} {
             color: ${theme.colorPalette.dark.neutral500};
         }
 
-        .Tooltip-shortcutContainer{
+        .${TOOLTIP_CLASSNAMES.SHORTCUT_CONTAINER} {
             display: flex;
             gap: ${theme.space.space4};
         }
     }
 `;
 
-export const TooltipContent = ({ content, shortcuts = [], imageUrl, subtleText, size = TOOLTIP_SIZES.SMALL }: ContentProps) => {
+export const TooltipContent = ({
+    content,
+    shortcuts = [],
+    imageUrl,
+    subtleText,
+    size = TOOLTIP_SIZES.SMALL,
+    textAlign = TOOLTIP_TEXT_ALIGNS.LEFT,
+}: ContentProps) => {
     return (
-        <StyledContent $size={size}>
+        <StyledContent $size={size} $textAlign={textAlign}>
             {imageUrl && (
                 <img
                     src={imageUrl}
                     alt=""
-                    className="Tooltip-image"
+                    className={TOOLTIP_CLASSNAMES.IMAGE}
                 />
             )}
-            <div className="Tooltip-textContent">
+            <div className={TOOLTIP_CLASSNAMES.TEXT_CONTENT}>
                 {content}
                 {subtleText && (
-                    <div className="Tooltip-subtleText">
+                    <div className={TOOLTIP_CLASSNAMES.SUBTLE_TEXT}>
                         {subtleText}
                     </div>
                 )}
                 {shortcuts.length > 0 && (
-                    <div className='Tooltip-shortcutContainer'>
+                    <div className={TOOLTIP_CLASSNAMES.SHORTCUT_CONTAINER}>
                         {shortcuts.map((shortcut, index) => (
                             <Shortcut key={`${shortcut}-${index}`} dark>{shortcut}</Shortcut>
                         ))}

package/src/components/shortcut.stories.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { theme } from '../design_system/theme.ts';
 import { Shortcut } from './shortcut.tsx';
 
 export default {
@@ -16,13 +17,13 @@ export default {
 export const ShortcutComponent = () => {
     return (<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
     Default:
-        <div style={{ display: 'flex', gap: '4px' }}>
+        <div style={{ display: 'flex', gap: '4px', padding: '16px' }}>
             <Shortcut>F</Shortcut>
             <Shortcut>Ctrl / ⌘</Shortcut>
             <Shortcut>Shift</Shortcut>
         </div>
     Dark:
-        <div style={{ display: 'flex', gap: '4px' }}>
+        <div style={{ display: 'flex', gap: '4px', backgroundColor: theme.colorPalette.dark.neutral700, padding: '16px' }}>
             <Shortcut dark>F</Shortcut>
             <Shortcut dark>Ctrl / ⌘</Shortcut>
             <Shortcut dark>Shift</Shortcut>

package/src/components/shortcut.tsx

@@ -17,6 +17,7 @@ const adaptiveColors = css`
     color: ${theme.color.neutral.textSubtle};
 `;
 
+/* Tooltips with shortcuts use dark mode styles */
 const darkColors = css`
     background-color: ${theme.colorPalette.dark.neutral800};
     border: 1px solid ${theme.colorPalette.dark.neutral700};