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

package/src/components/floating/floating_component_base.tsx

@@ -1,199 +0,0 @@
-import {
-    autoPlacement,
-    autoUpdate,
-    flip,
-    FloatingPortal,
-    hide,
-    offset,
-    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 } from 'react';
-import styled from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-
-export const classNames = {
-    CHILDREN: 'FloatingComponent-children',
-};
-
-export const FLOATING_PLACEMENT = {
-    TOP: 'top',
-    TOP_START: 'top-start',
-    TOP_END: 'top-end',
-    RIGHT: 'right',
-    RIGHT_START: 'right-start',
-    RIGHT_END: 'right-end',
-    BOTTOM: 'bottom',
-    BOTTOM_START: 'bottom-start',
-    BOTTOM_END: 'bottom-end',
-    LEFT: 'left',
-    LEFT_START: 'left-start',
-    LEFT_END: 'left-end',
-} as const;
-
-export type FloatingPlacement = typeof FLOATING_PLACEMENT[keyof typeof FLOATING_PLACEMENT];
-
-interface FloatingComponentWrapProps {
-    showInPortal?: boolean;
-    className?: string;
-    style?: CSSProperties;
-    onClick?: (e: MouseEvent<HTMLElement>) => void;
-    children: ReactNode;
-}
-
-export interface FloatingComponentBaseProps {
-    placement?: FloatingPlacement;
-    autoPlacements?: FloatingPlacement[];
-    strategy?: Strategy;
-    content?: ReactNode | string;
-    children?: ReactNode;
-    isOpen?: boolean;
-    triggerRef?: RefObject<HTMLDivElement>;
-    className?: string;
-    offsetPx?: number;
-    contentWrapClassName?: string;
-    CloseButtonComponent?: ComponentType;
-    showInPortal?: boolean;
-}
-
-const FloatingComponentWrapStyled = styled.span`
-    padding: ${theme.space.space16};
-    ${theme.typography.shared.mobile.bodyM};
-    border-radius: 0.8rem;
-    z-index: 999;
-    white-space: normal;
-    word-break: break-word;
-    cursor: default;
-
-    @media ${theme.device.tablet} {
-        ${theme.typography.shared.tablet.bodyM};
-    }
-
-    @media ${theme.device.desktop} {
-        ${theme.typography.shared.desktop.bodyM};
-    }
-`;
-
-const ChildrenWrap = styled.div`
-    width: fit-content;
-`;
-
-const StyledPopoverBox = styled.div`
-    display: flex;
-    align-items: center;
-    gap: ${theme.space.space4};
-    button {
-        color: inherit;
-    }
-`;
-
-const FloatingComponentWrap = forwardRef<HTMLSpanElement, FloatingComponentWrapProps>((props, ref) => {
-    const { showInPortal, ...rest } = props;
-    const component = <FloatingComponentWrapStyled {...rest} ref={ref} />;
-    if (showInPortal) {
-        return <FloatingPortal>{component}</FloatingPortal>;
-    }
-    return component;
-});
-
-FloatingComponentWrap.displayName = 'FloatingComponentWrap';
-
-/**
- * This is just the base component for Tooltips and Popovers.
- * Don't use this - use Tooltip/HelpPopover instead.
- */
-export const FloatingComponentBase = ({
-    placement = FLOATING_PLACEMENT.TOP,
-    autoPlacements,
-    strategy = 'fixed',
-    content,
-    children,
-    isOpen = false,
-    triggerRef,
-    className,
-    offsetPx = 10,
-    contentWrapClassName,
-    CloseButtonComponent,
-    showInPortal = false,
-}: FloatingComponentBaseProps) => {
-    const {
-        x,
-        y,
-        refs: { setReference, setFloating },
-        strategy: effectiveStrategy,
-        middlewareData: {
-            hide: refHidden,
-        },
-        context,
-    } = useFloating({
-        open: isOpen,
-        placement,
-        strategy,
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            offset(offsetPx),
-            autoPlacements?.length ? autoPlacement({ allowedPlacements: autoPlacements }) : flip(),
-            shift({ padding: 5 }),
-            hide({
-                strategy: 'referenceHidden',
-            }),
-        ],
-    });
-
-    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>;
-
-    return (
-        <>
-            {/* Adding className to children for easier identifying in DevTools */}
-            <ChildrenWrap className={clsx(classNames.CHILDREN, contentWrapClassName)} ref={setReference}>
-                {children}
-            </ChildrenWrap>
-            { isMounted && (
-                <FloatingComponentWrap
-                    className={className}
-                    ref={setFloating}
-                    style={{
-                        position: effectiveStrategy,
-                        top: y ?? 0,
-                        left: x ?? 0,
-                        width: 'max-content',
-                        visibility: refHidden?.referenceHidden ? 'hidden' : 'visible',
-                        ...styles,
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                    showInPortal={showInPortal}
-                >
-                    <div ref={triggerRef}>
-                        {CloseButtonComponent
-                            ? <StyledPopoverBox>
-                                {content}
-                                <CloseButtonComponent />
-                            </StyledPopoverBox>
-                            : content}
-                    </div>
-                </FloatingComponentWrap>
-            )}
-        </>
-    );
-};

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

@@ -1,130 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { FLOATING_PLACEMENT } from './floating_component_base.tsx';
-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.';
-
-export default {
-    title: 'UI-Library/Tooltip',
-    component: Tooltip,
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=5236-98464&p=f&m=dev',
-        },
-    },
-    decorators: [
-        (Story) => (
-            <div style={{ margin: '5em', width: 'fit-content' }}>
-                <Story />
-            </div>
-        ),
-    ],
-    args: {
-        children: <Child />,
-        content: 'This is a tooltip',
-        isDarkTheme: false,
-    },
-};
-
-const DefaultStoryWrapper = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 10em;
-    row-gap: 20em;
-`;
-
-export const Default = (args) => {
-    return (<DefaultStoryWrapper>
-        <div>
-            <Tooltip {...args}/>
-            Default
-        </div>
-        <div>
-            <Tooltip shortcuts={['Ctrl / ⌘', 'F']} {...args}/>
-            With shortcuts
-        </div>
-        <div>
-            <Tooltip subtleText="This is some subtle text" {...args} />
-            With subtleText
-        </div>
-        <div>
-            <Tooltip imageUrl='https://picsum.photos/id/1/1024' {...args} />
-            With image
-        </div>
-        <div>
-            <Tooltip
-                persistent={{ isOpenOverride: true }}
-                shortcuts={['Ctrl / ⌘', 'F']}
-                content={longText}
-                textAlign='center'
-            ><Child /></Tooltip>
-            With shortcuts and long centered text
-        </div>
-        <div>
-            <Tooltip
-                persistent={{ isOpenOverride: true }}
-                shortcuts={['Ctrl / ⌘', 'F']}
-                imageUrl='https://picsum.photos/id/1/1024'
-                subtleText="This is some subtle text"
-                placement={FLOATING_PLACEMENT.BOTTOM}
-                content={longText}
-            ><Child /></Tooltip>
-            With everything
-        </div>
-    </DefaultStoryWrapper>
-    );
-};
-Default.args = {
-    persistent: { isOpenOverride: true },
-};
-
-export const Sizes = () => {
-    return (<DefaultStoryWrapper>
-        <div>
-            Xsmall:
-            <Tooltip size="xsmall" content={longText}><Child /></Tooltip>
-        </div>
-        <div>
-            Small (default):
-            <Tooltip size="small" content={longText}><Child /></Tooltip>
-        </div>
-        <div>
-            Medium:
-            <Tooltip size="medium" content={longText}><Child /></Tooltip>
-        </div>
-        <div>
-            Large:
-            <Tooltip size="large" content={longText}><Child /></Tooltip>
-        </div>
-        <div>
-            Xlarge:
-            <Tooltip size="xlarge" content={longText}><Child /></Tooltip>
-        </div>
-    </DefaultStoryWrapper>
-    );
-};
-
-export const Playground = (args) => {
-    return (
-        <Tooltip {...args}/>
-    );
-};
-Playground.argTypes = {
-    content: { control: 'text' },
-    shortcuts: { control: 'array' },
-    imageUrl: { control: 'text' },
-    subtleText: { control: 'text' },
-    size: {
-        control: 'select',
-        options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
-    },
-    placement: {
-        control: 'select',
-        options: Object.values(FLOATING_PLACEMENT),
-    },
-};

package/src/components/floating/tooltip.tsx

@@ -1,146 +0,0 @@
-import {
-    useFloating,
-    useHover,
-    useInteractions,
-} from '@floating-ui/react';
-import { type ComponentType, forwardRef, useState } from 'react';
-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',
-    MEDIUM: 'medium',
-    LARGE: 'large', /* Previously WIDE */
-    XLARGE: 'xlarge', /* Previously WIDER */
-} as const;
-
-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[];
-    imageUrl?: string;
-    subtleText?: string;
-    size?: TooltipSize;
-    textAlign?: TooltipTextAlign;
-}
-
-interface WithTooltipProps {
-    tooltipProps?: TooltipProps;
-}
-
-// Using a styled component to get access to the `as` prop
-const TooltipFocusArea = styled.span``;
-
-const StyledFloatingComponentBase = styled(FloatingComponentBase)<{ $isDarkTheme?: boolean }>`
-    color: ${theme.colorPalette.dark.neutral0};
-    background-color: ${theme.colorPalette.dark.neutral900};
-    padding: ${theme.space.space8};
-
-    ${({ $isDarkTheme }) => $isDarkTheme && css`
-        box-shadow: ${theme.shadow.shadow2};
-        border: 1px solid ${theme.color.neutral.smallTooltipBorder};
-    `}
-`;
-
-/**
- * Tooltip appears on hover, for onclick use Popover
- */
-export const Tooltip = ({
-    as,
-    className,
-    persistent,
-    delayShow = 500,
-    delayHide = 50,
-    shortcuts = [],
-    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);
-
-    const { refs, context } = useFloating({
-        open,
-        onOpenChange: setOpen,
-    });
-
-    const hover = useHover(context, {
-        delay: {
-            open: delayShow,
-            close: delayHide,
-        },
-    });
-
-    const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
-
-    const tooltipProps = {
-        ...rest,
-        isOpen: isOpenOverride !== undefined ? isOpenOverride : open,
-        content: <TooltipContent
-            content={rest.content}
-            shortcuts={shortcuts}
-            imageUrl={imageUrl}
-            subtleText={subtleText}
-            size={size}
-            textAlign={textAlign}
-        />,
-    };
-
-    return (
-        <TooltipFocusArea
-            as={as as keyof JSX.IntrinsicElements}
-            className={className}
-            ref={refs.setReference}
-            {...getReferenceProps()}
-        >
-            <div
-                ref={refs.setFloating}
-                {...getFloatingProps()}
-            >
-                <StyledFloatingComponentBase
-                    {...tooltipProps}
-                    CloseButtonComponent={CloseButtonComponent}
-                    $isDarkTheme={uiTheme === 'DARK'}
-                />
-            </div>
-        </TooltipFocusArea>
-    );
-};
-
-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 TProps)} ref={ref} />
-        </Tooltip>;
-    });
-
-    Enhanced.displayName = `WithTooltip:${Component.displayName || Component.name}`;
-
-    return Enhanced;
-}

package/src/components/floating/tooltip_content.tsx

@@ -1,103 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import { Shortcut } from '../shortcut.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' | 'textAlign'>;
-
-const TOOLTIP_SIZES_VALUES: Record<TooltipSize, string> = {
-    xsmall: '24rem',
-    small: '32rem',
-    medium: '40rem',
-    large: '48rem',
-    xlarge: '64rem',
-};
-
-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_CLASSNAMES.IMAGE} {
-        max-width: 100%;
-        max-height: 150px;
-        border-radius: 4px;
-        object-fit: contain;
-    }
-
-    .${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_CLASSNAMES.SUBTLE_TEXT})){
-            flex-direction: row;
-            flex-wrap: wrap;
-        }
-
-        /* 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_CLASSNAMES.SHORTCUT_CONTAINER} {
-            display: flex;
-            gap: ${theme.space.space4};
-        }
-    }
-`;
-
-export const TooltipContent = ({
-    content,
-    shortcuts = [],
-    imageUrl,
-    subtleText,
-    size = TOOLTIP_SIZES.SMALL,
-    textAlign = TOOLTIP_TEXT_ALIGNS.LEFT,
-}: ContentProps) => {
-    return (
-        <StyledContent $size={size} $textAlign={textAlign}>
-            {imageUrl && (
-                <img
-                    src={imageUrl}
-                    alt=""
-                    className={TOOLTIP_CLASSNAMES.IMAGE}
-                />
-            )}
-            <div className={TOOLTIP_CLASSNAMES.TEXT_CONTENT}>
-                {content}
-                {subtleText && (
-                    <div className={TOOLTIP_CLASSNAMES.SUBTLE_TEXT}>
-                        {subtleText}
-                    </div>
-                )}
-                {shortcuts.length > 0 && (
-                    <div className={TOOLTIP_CLASSNAMES.SHORTCUT_CONTAINER}>
-                        {shortcuts.map((shortcut, index) => (
-                            <Shortcut key={`${shortcut}-${index}`} dark>{shortcut}</Shortcut>
-                        ))}
-                    </div>
-                )}
-            </div>
-        </StyledContent>
-    );
-};

package/src/components/shortcut.stories.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import { theme } from '../design_system/theme.ts';
-import { Shortcut } from './shortcut.tsx';
-
-export default {
-    title: 'UI-Library/Shortcut',
-    component: Shortcut,
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=5236-100844&m=dev',
-        },
-    },
-};
-
-export const ShortcutComponent = () => {
-    return (<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-    Default:
-        <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', backgroundColor: theme.colorPalette.dark.neutral700, padding: '16px' }}>
-            <Shortcut dark>F</Shortcut>
-            <Shortcut dark>Ctrl / ⌘</Shortcut>
-            <Shortcut dark>Shift</Shortcut>
-        </div>
-    </div>);
-};
-
-export const Playground = (args) => {
-    return (<Shortcut {...args}/>);
-};
-Playground.args = {
-    children: 'F',
-    dark: false,
-    as: 'div',
-};
-Playground.argTypes = {
-    dark: {
-        control: 'boolean',
-        defaultValue: false,
-    },
-    as: {
-        control: 'text',
-        defaultValue: 'div',
-    },
-    children: {
-        control: 'text',
-        defaultValue: 'F',
-    },
-    className: {
-        control: 'text',
-    },
-};

package/src/components/shortcut.tsx

@@ -1,55 +0,0 @@
-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;
-    className?: string;
-    children: React.ReactNode;
-    /* If true, always use dark mode colors */
-    dark?: boolean;
-}
-
-const adaptiveColors = css`
-    background-color: ${theme.color.neutral.backgroundSubtle};
-    border: 1px solid ${theme.color.neutral.border};
-    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};
-    color: ${theme.colorPalette.dark.neutral400};
-`;
-
-const StyledShortcut = styled(Text)<{ $dark?: boolean }>`
-    min-width: 10px; /* 20 - paddings - borders */
-    height: 14px; /* 20 - paddings - borders */
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: ${theme.radius.radius4};
-    padding: ${theme.space.space2} ${theme.space.space4};
-    ${({ $dark }) => ($dark ? darkColors : adaptiveColors)}
-`;
-
-export const Shortcut = ({
-    as,
-    className,
-    children,
-    dark = false,
-}: ShortcutProps) => {
-    return (
-        <StyledShortcut
-            forwardedAs={as}
-            className={className}
-            $dark={dark}
-            type='code'
-            size='small'
-            weight='medium'>
-            {children}
-        </StyledShortcut>
-    );
-};