@apify/ui-library 1.138.0 → 1.138.1

package/src/components/floating/menu.tsx

@@ -11,24 +11,12 @@ import {
 } from '@floating-ui/react';
 import clsx from 'clsx';
 import type React from 'react';
-import {
-    useCallback,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
-import {
-    Box,
-    type BoxProps,
-} from '../box.js';
+import { Box, type BoxProps } from '../box.js';
 import { Text } from '../text/index.js';
 import { useFloatingMenu } from './menu_common.js';
-import {
-    DropdownMenuBaseComponent,
-    ListMenuComponent,
-    ListMenuItemComponent,
-} from './menu_components.js';
+import { DropdownMenuBaseComponent, ListMenuComponent, ListMenuItemComponent } from './menu_components.js';
 
 export const menuClassNames = {
     WRAPPER: 'menu-wrapper',
@@ -42,28 +30,28 @@ type SelectActionType = 'click' | 'enter' | 'space' | 'type';
 // It might be tempting to define label as ReactNode, but we need to have the string value for keyboard navigation
 // More difficult cases can be handled using renderOption prop
 export interface MenuOption {
-    label: string,
-    value: string,
+    label: string;
+    value: string;
 }
 
 export interface MenuProps<T = MenuOption> {
-    ariaLabel?: string,
-    options: T[],
-    value?: string,
-    onSelect: (newValue: string, selectedBy: SelectActionType) => void,
-    onMenuOpen?: (isOpen: boolean) => void,
-    defaultLabel?: React.ReactNode,
-    closeOnSelect?: boolean,
-    renderOption?: (option: T) => React.ReactNode,
-    placement?: Placement,
+    ariaLabel?: string;
+    options: T[];
+    value?: string;
+    onSelect: (newValue: string, selectedBy: SelectActionType) => void;
+    onMenuOpen?: (isOpen: boolean) => void;
+    defaultLabel?: React.ReactNode;
+    closeOnSelect?: boolean;
+    renderOption?: (option: T) => React.ReactNode;
+    placement?: Placement;
     components?: {
-        MenuBase?: React.ElementType,
-        Menu?: React.ElementType,
-        MenuItem?: React.ElementType,
-    },
+        MenuBase?: React.ElementType;
+        Menu?: React.ElementType;
+        MenuItem?: React.ElementType;
+    };
 }
 
-const defaultRenderOption = ({ label }: MenuOption) => (<Text as='span'>{label}</Text>);
+const defaultRenderOption = ({ label }: MenuOption) => <Text as="span">{label}</Text>;
 
 /**
  * This example is a Select taken from https://floating-ui.com/docs/react-examples
@@ -84,12 +72,15 @@ export const Menu = <T extends MenuOption>({
     ...rest
 }: MenuProps<T> & BoxProps) => {
     const [isOpen, setIsOpenState] = useState(false);
-    const setIsOpen = useCallback((newIsOpen: boolean) => {
-        setIsOpenState(newIsOpen);
-        if (onMenuOpen) {
-            onMenuOpen(newIsOpen);
-        }
-    }, [onMenuOpen]);
+    const setIsOpen = useCallback(
+        (newIsOpen: boolean) => {
+            setIsOpenState(newIsOpen);
+            if (onMenuOpen) {
+                onMenuOpen(newIsOpen);
+            }
+        },
+        [onMenuOpen],
+    );
     const { refs, floatingStyles, context } = useFloatingMenu({
         isOpen,
         setIsOpen,
@@ -131,7 +122,13 @@ export const Menu = <T extends MenuOption>({
         loop: true,
     });
 
-    const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([click, dismiss, role, listNav, typeahead]);
+    const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([
+        click,
+        dismiss,
+        role,
+        listNav,
+        typeahead,
+    ]);
 
     const MenuBaseComponent = components?.MenuBase || DropdownMenuBaseComponent;
     const MenuComponent = components?.Menu || ListMenuComponent;
@@ -140,10 +137,7 @@ export const Menu = <T extends MenuOption>({
     const effectiveRenderOption = renderOption || defaultRenderOption;
 
     return (
-        <Box
-            className={clsx(className, menuClassNames.WRAPPER)}
-            {...rest}
-        >
+        <Box className={clsx(className, menuClassNames.WRAPPER)} {...rest}>
             <MenuBaseComponent
                 aria-label={ariaLabel}
                 aria-labelledby={ariaLabel ? undefined : 'select-label'}
@@ -157,10 +151,7 @@ export const Menu = <T extends MenuOption>({
             </MenuBaseComponent>
             {isOpen && (
                 <FloatingPortal>
-                    <FloatingFocusManager
-                        context={context}
-                        modal={false}
-                    >
+                    <FloatingFocusManager context={context} modal={false}>
                         <MenuComponent
                             ref={refs.setFloating}
                             style={floatingStyles}

package/src/components/floating/menu_common.tsx

@@ -1,36 +1,30 @@
-import type {
-    Placement,
-} from '@floating-ui/react';
-import {
-    autoUpdate,
-    offset,
-    size,
-    useFloating,
-} from '@floating-ui/react';
+import type { Placement } from '@floating-ui/react';
+import { autoUpdate, offset, size, useFloating } from '@floating-ui/react';
 
 export const useFloatingMenu = ({
     isOpen,
     setIsOpen,
     placement = 'bottom-start',
 }: {
-    isOpen: boolean,
-    setIsOpen: (newIsOpen: boolean) => void,
-    placement?: Placement,
-}) => useFloating<Element>({
-    placement,
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-        offset(5),
-        size({
-            apply({ elements, availableHeight }) {
-                Object.assign(elements.floating.style, {
-                    maxHeight: `${availableHeight}px`,
-                    minHeight: '50px',
-                });
-            },
-            padding: 10,
-        }),
-    ],
-});
+    isOpen: boolean;
+    setIsOpen: (newIsOpen: boolean) => void;
+    placement?: Placement;
+}) =>
+    useFloating<Element>({
+        placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(5),
+            size({
+                apply({ elements, availableHeight }) {
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${availableHeight}px`,
+                        minHeight: '50px',
+                    });
+                },
+                padding: 10,
+            }),
+        ],
+    });

package/src/components/floating/menu_components.tsx

@@ -1,7 +1,4 @@
-import {
-    type ReferenceType,
-    type UseFloatingReturn,
-} from '@floating-ui/react';
+import { type ReferenceType, type UseFloatingReturn } from '@floating-ui/react';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
@@ -34,8 +31,8 @@ export const ListMenuComponent = styled(Box).attrs({
 `;
 
 interface SelectableListMenuItemProps {
-    $isActive?: boolean,
-    $isSelected?: boolean,
+    $isActive?: boolean;
+    $isSelected?: boolean;
 }
 
 /**
@@ -49,14 +46,18 @@ export const ListMenuItemComponent = styled(Box).attrs({
     cursor: pointer;
     white-space: nowrap;
 
-    ${({ $isActive }) => $isActive && css`
-        background-color: ${theme.color.neutral.hover};
-    `}
+    ${({ $isActive }) =>
+        $isActive &&
+        css`
+            background-color: ${theme.color.neutral.hover};
+        `}
 
-    ${({ $isSelected }) => $isSelected && css`
-        background-color: ${theme.color.neutral.backgroundSubtle};
-        color: ${theme.color.primary.text};
-    `}
+    ${({ $isSelected }) =>
+        $isSelected &&
+        css`
+            background-color: ${theme.color.neutral.backgroundSubtle};
+            color: ${theme.color.primary.text};
+        `}
 `;
 
 /**
@@ -86,14 +87,13 @@ type DropdownMenuBaseComponentProps = {
 /**
  * Menu base component WITH dropdown icon
  */
-export const DropdownMenuBaseComponent = forwardRef<HTMLElement, DropdownMenuBaseComponentProps>(({
-    children,
-    ...props
-}, ref) => {
-    return (
-        <PlainMenuBaseComponent {...props} ref={ref}>
-            {children}
-            <ChevronDownIcon size="16" color={theme.color.neutral.icon} />
-        </PlainMenuBaseComponent>
-    );
-});
+export const DropdownMenuBaseComponent = forwardRef<HTMLElement, DropdownMenuBaseComponentProps>(
+    ({ children, ...props }, ref) => {
+        return (
+            <PlainMenuBaseComponent {...props} ref={ref}>
+                {children}
+                <ChevronDownIcon size="16" color={theme.color.neutral.icon} />
+            </PlainMenuBaseComponent>
+        );
+    },
+);

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

@@ -6,11 +6,14 @@ 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>;
+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',
@@ -43,77 +46,91 @@ const DefaultStoryWrapper = styled.div`
 `;
 
 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={longTextWithLinks}
-            ><Child /></Tooltip>
-            With everything
-        </div>
-    </DefaultStoryWrapper>
+    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={longTextWithLinks}
+                >
+                    <Child />
+                </Tooltip>
+                With everything
+            </div>
+        </DefaultStoryWrapper>
     );
 };
 
 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>
+    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}/>
-    );
+    return <Tooltip {...args} />;
 };
 Playground.argTypes = {
     content: { control: 'text' },

package/src/components/floating/tooltip.tsx

@@ -1,8 +1,4 @@
-import {
-    useFloating,
-    useHover,
-    useInteractions,
-} from '@floating-ui/react';
+import { useFloating, useHover, useInteractions } from '@floating-ui/react';
 import { type ComponentType, type ElementType, forwardRef, type ReactNode, useState } from 'react';
 import styled, { css } from 'styled-components';
 
@@ -16,17 +12,17 @@ export const TOOLTIP_TEXT_ALIGNS = {
     CENTER: 'center',
 } as const;
 
-export type TooltipTextAlign = typeof TOOLTIP_TEXT_ALIGNS[keyof typeof TOOLTIP_TEXT_ALIGNS];
+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 */
+    LARGE: 'large' /* Previously WIDE */,
+    XLARGE: 'xlarge' /* Previously WIDER */,
 } as const;
 
-export type TooltipSize = typeof TOOLTIP_SIZES[keyof typeof TOOLTIP_SIZES];
+export type TooltipSize = (typeof TOOLTIP_SIZES)[keyof typeof TOOLTIP_SIZES];
 
 export interface TooltipProps extends Omit<FloatingComponentBaseProps, 'isOpen' | 'size'> {
     as?: ElementType;
@@ -60,10 +56,12 @@ const StyledFloatingComponentBase = styled(FloatingComponentBase)<{ $isDarkTheme
         }
     }
 
-    ${({ $isDarkTheme }) => $isDarkTheme && css`
-        box-shadow: ${theme.shadow.shadow2};
-        border: 1px solid ${theme.color.neutral.smallTooltipBorder};
-    `}
+    ${({ $isDarkTheme }) =>
+        $isDarkTheme &&
+        css`
+            box-shadow: ${theme.shadow.shadow2};
+            border: 1px solid ${theme.color.neutral.smallTooltipBorder};
+        `}
 `;
 
 /**
@@ -103,42 +101,37 @@ export const Tooltip = ({
     const tooltipProps = {
         isOpen: open,
         ...rest,
-        content: <TooltipContent
-            content={tooltipSafeHtml(rest.content)}
-            shortcuts={shortcuts}
-            imageUrl={imageUrl}
-            subtleText={subtleText}
-            size={size}
-            textAlign={textAlign}
-        />,
+        content: (
+            <TooltipContent
+                content={tooltipSafeHtml(rest.content)}
+                shortcuts={shortcuts}
+                imageUrl={imageUrl}
+                subtleText={subtleText}
+                size={size}
+                textAlign={textAlign}
+            />
+        ),
     };
 
     return (
-        <TooltipFocusArea
-            as={as}
-            className={className}
-            ref={refs.setReference}
-            {...getReferenceProps()}
-        >
-            <div
-                ref={refs.setFloating}
-                {...getFloatingProps()}
-            >
-                <StyledFloatingComponentBase
-                    {...tooltipProps}
-                    $isDarkTheme={uiTheme === 'DARK'}
-                />
+        <TooltipFocusArea as={as} className={className} ref={refs.setReference} {...getReferenceProps()}>
+            <div ref={refs.setFloating} {...getFloatingProps()}>
+                <StyledFloatingComponentBase {...tooltipProps} $isDarkTheme={uiTheme === 'DARK'} />
             </div>
         </TooltipFocusArea>
     );
 };
 
-export function withTooltip<TProps extends Record<string, unknown> = Record<string, unknown>>(Component: ComponentType<TProps>) {
+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>;
+        return (
+            <Tooltip {...tooltipProps}>
+                <Component {...(rest as unknown as TProps)} ref={ref} />
+            </Tooltip>
+        );
     });
 
     Enhanced.displayName = `WithTooltip:${Component.displayName || Component.name}`;

package/src/components/floating/tooltip_content.tsx

@@ -22,7 +22,7 @@ const TOOLTIP_CLASSNAMES = {
     SHORTCUT_CONTAINER: 'Tooltip-shortcutContainer',
 } as const;
 
-const StyledContent = styled.div<{ $size: TooltipSize, $textAlign: TooltipTextAlign }>`
+const StyledContent = styled.div<{ $size: TooltipSize; $textAlign: TooltipTextAlign }>`
     display: flex;
     flex-direction: column;
     gap: ${theme.space.space8};
@@ -45,13 +45,13 @@ const StyledContent = styled.div<{ $size: TooltipSize, $textAlign: TooltipTextAl
         align-items: ${({ $textAlign }) => ($textAlign === 'center' ? 'center' : 'flex-start')};
 
         /* When there is no child with subtleText class */
-        &:not(:has(.${TOOLTIP_CLASSNAMES.SUBTLE_TEXT})){
+        &: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}){
+        &:has(.${TOOLTIP_CLASSNAMES.SUBTLE_TEXT}) {
             text-align: left;
         }
 
@@ -81,24 +81,16 @@ export const TooltipContent = ({
 }: ContentProps) => {
     return (
         <StyledContent $size={size} $textAlign={textAlign}>
-            {imageUrl && (
-                <img
-                    src={imageUrl}
-                    alt=""
-                    className={TOOLTIP_CLASSNAMES.IMAGE}
-                />
-            )}
+            {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>
-                )}
+                {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>
+                            <Shortcut key={`${shortcut}-${index}`} dark>
+                                {shortcut}
+                            </Shortcut>
                         ))}
                     </div>
                 )}