@apify/ui-library 1.138.2 → 1.138.4-featpublictasks-2f3d3c.48

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.138.2",
+    "version": "1.138.4-featpublictasks-2f3d3c.48+ff8f29a938a",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -27,7 +27,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.38.1",
+        "@apify/ui-icons": "^1.38.2-featpublictasks-2f3d3c.73+ff8f29a938a",
         "@floating-ui/react": "^0.27.19",
         "@floating-ui/react-dom": "^2.1.8",
         "@radix-ui/react-checkbox": "^1.3.3",
@@ -58,7 +58,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.353.2",
+        "@apify-packages/types": "^3.353.4-featpublictasks-2f3d3c.48+ff8f29a938a",
         "@storybook/react-vite": "^10.3.5",
         "@types/hast": "^3.0.4",
         "@types/lodash": "^4.14.200",
@@ -72,5 +72,5 @@
         "src",
         "style"
     ],
-    "gitHead": "6559101d432b8c35bad8dc06c79e0f3236cdefe6"
+    "gitHead": "ff8f29a938ac47851ce5b052bf96594609db7041"
 }

package/src/components/box.tsx

@@ -34,6 +34,7 @@ type SharedBoxProps = {
     style?: React.CSSProperties;
     onClick?: (e: React.MouseEvent) => void;
     id?: string;
+    title?: string;
 };
 
 // This should be renamed - these props are global for any element not just Boxes

package/src/components/browser_window/browser_window.tsx

@@ -0,0 +1,106 @@
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { Badge } from '../badge.js';
+
+const classNames = {
+    ROOT: 'browser-window',
+    HEADER: 'browser-window__header',
+    DOTS: 'browser-window__dots',
+    DOT: 'browser-window__dot',
+    URL: 'browser-window__url',
+    TITLE: 'browser-window__title',
+    CONTAINER: 'browser-window__container',
+    CONTENT: 'browser-window__content',
+} as const;
+
+export { classNames as browserWindowClassNames };
+
+const BrowserWindowWrapper = styled.div`
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    background-color: ${theme.color.neutral.background};
+    overflow: hidden;
+
+    .${classNames.HEADER} {
+        display: flex;
+        align-items: center;
+        gap: ${theme.space.space8};
+        padding: ${theme.space.space6} ${theme.space.space8};
+        border-bottom: 1px solid ${theme.color.neutral.separatorSubtle};
+        background-color: ${theme.color.neutral.backgroundMuted};
+    }
+
+    .${classNames.DOTS} {
+        display: flex;
+        gap: 0.3rem;
+        flex-shrink: 0;
+    }
+
+    .${classNames.DOT} {
+        width: 0.6rem;
+        height: 0.6rem;
+        border-radius: 50%;
+        background-color: ${theme.color.neutral.separatorSubtle};
+    }
+
+    .${classNames.URL} {
+        width: 100%;
+        min-width: 0;
+        justify-content: flex-start;
+        color: ${theme.color.neutral.textSubtle};
+
+        span {
+            min-width: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
+
+    .${classNames.TITLE} {
+        margin-left: auto;
+        flex-shrink: 0;
+    }
+
+    .${classNames.CONTAINER} {
+        min-width: 0;
+        overflow-x: auto;
+    }
+`;
+
+type Props = {
+    title: string;
+    url?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+
+export const BrowserWindow = ({ title, url, children, className }: Props) => {
+    return (
+        <BrowserWindowWrapper className={clsx(classNames.ROOT, className)}>
+            <div className={classNames.HEADER}>
+                {url && (
+                    <>
+                        <div className={classNames.DOTS}>
+                            <span className={classNames.DOT} />
+                            <span className={classNames.DOT} />
+                            <span className={classNames.DOT} />
+                        </div>
+                        <Badge size="extra_small" variant="neutral_subtle" className={classNames.URL}>
+                            {url}
+                        </Badge>
+                    </>
+                )}
+                <Badge size="extra_small" className={classNames.TITLE}>
+                    {title}
+                </Badge>
+            </div>
+            <div className={classNames.CONTAINER}>
+                <div className={classNames.CONTENT}>{children}</div>
+            </div>
+        </BrowserWindowWrapper>
+    );
+};

package/src/components/browser_window/index.ts

@@ -0,0 +1 @@
+export * from './browser_window.js';

package/src/components/chip.tsx

@@ -80,9 +80,34 @@ const chipTypeStyle = {
     `,
 } satisfies Record<CHIP_TYPES, unknown>;
 
+const chipTypeHoverStyle = {
+    [CHIP_TYPES.DEFAULT]: css`
+        background: ${theme.color.neutral.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.PRIMARY]: css`
+        background: ${theme.color.primary.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.SUCCESS]: css`
+        background: ${theme.color.success.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.WARNING]: css`
+        background: ${theme.color.warning.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.DANGER]: css`
+        background: ${theme.color.danger.chipBackgroundHover};
+    `,
+} satisfies Record<CHIP_TYPES, unknown>;
+
 const StyledChip = styled.span<{ size: CHIP_SIZES; type: CHIP_TYPES; clickable: boolean }>`
     ${({ size }) => chipSizeStyle[size]};
     ${({ type }) => chipTypeStyle[type]};
+    ${({ type, clickable }) =>
+        clickable &&
+        css`
+            &:hover {
+                ${chipTypeHoverStyle[type]};
+            }
+        `};
     /* Static styles */
     width: fit-content;
     display: flex;
@@ -111,6 +136,7 @@ export const Chip = forwardRef(
         {
             type = CHIP_TYPES.DEFAULT,
             size = CHIP_SIZES.MEDIUM,
+            clickable = false,
             icon,
             children,
             className,
@@ -118,7 +144,7 @@ export const Chip = forwardRef(
         }: ChipProps,
         ref,
     ) => {
-        const otherProps = { ...passThroughProps, type, size, className: clsx(className, classNames.BODY) };
+        const otherProps = { ...passThroughProps, type, size, clickable, className: clsx(className, classNames.BODY) };
 
         return (
             <StyledChip ref={ref} {...otherProps}>

package/src/components/collapsible_card/collapsible_card.tsx

@@ -1,6 +1,6 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import clsx from 'clsx';
-import { type FC, type ReactNode, useState } from 'react';
+import { type ReactNode, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { ChevronDownIcon } from '@apify/ui-icons';
@@ -27,6 +27,7 @@ export type CollapsibleCardProps = {
     header: ReactNode;
     children: ReactNode;
     isExpanded?: boolean;
+    isExpandedDefault?: boolean;
     onIsExpandedChanged?: (expanded: boolean) => void;
     noChevron?: boolean;
     noDivider?: boolean;
@@ -110,10 +111,11 @@ const CollapsibleContent = styled(Collapsible.Content)<{ $noDivider?: boolean }>
     ${({ $noDivider }) => ($noDivider ? '' : `border-top: 1px solid ${theme.color.neutral.border};`)}
 `;
 
-export const CollapsibleCard: FC<CollapsibleCardProps> = ({
+export const CollapsibleCard = ({
     header,
     children,
     isExpanded,
+    isExpandedDefault = false,
     onIsExpandedChanged,
     noChevron,
     noDivider,
@@ -124,9 +126,9 @@ export const CollapsibleCard: FC<CollapsibleCardProps> = ({
     isHeaderGreyOnHover,
     as: Element,
     ...rest
-}) => {
+}: CollapsibleCardProps) => {
     const isUncontrolled = isExpanded === undefined;
-    const [isOpen, setOpen] = useState(false);
+    const [isOpen, setOpen] = useState(isExpandedDefault);
 
     let onHeaderClick;
     if (isUncontrolled) onHeaderClick = () => setOpen((prevIsOpen) => !prevIsOpen);

package/src/components/floating/floating_component_base.tsx

@@ -44,6 +44,81 @@ export const FLOATING_PLACEMENT = {
 
 export type FloatingPlacement = (typeof FLOATING_PLACEMENT)[keyof typeof FLOATING_PLACEMENT];
 
+type UseFloatingPopupOptions = {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: FloatingPlacement;
+    strategy?: Strategy;
+    autoPlacements?: FloatingPlacement[];
+    offsetPx?: number;
+};
+
+/**
+ * Shared `useFloating` + `useTransitionStyles` setup for popup-style components (`Tooltip`,
+ * `Popover`, the inner positioning of `FloatingComponentBase`). Owns the middleware stack
+ * (`offset` / `flip` | `autoPlacement` / `shift` / `hide`) and the side-aware in/out animation,
+ * so individual consumers don't duplicate these.
+ *
+ * Returns the full `useFloating` result plus `isMounted` and `transitionStyles` from
+ * `useTransitionStyles` — destructure what each consumer needs.
+ */
+export const useFloatingPopup = ({
+    open,
+    onOpenChange,
+    placement = FLOATING_PLACEMENT.TOP,
+    strategy = 'fixed',
+    autoPlacements,
+    offsetPx = 10,
+}: UseFloatingPopupOptions) => {
+    const floating = useFloating({
+        open,
+        onOpenChange,
+        placement,
+        strategy,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(offsetPx),
+            autoPlacements?.length ? autoPlacement({ allowedPlacements: autoPlacements }) : flip(),
+            shift({ padding: 5 }),
+            hide({ strategy: 'referenceHidden' }),
+        ],
+    });
+
+    const { isMounted, styles: transitionStyles } = useTransitionStyles(floating.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 {};
+            }
+        },
+    });
+
+    return { ...floating, isMounted, transitionStyles };
+};
+
+/**
+ * Builds the inline `style` object floating-ui consumers spread onto their popup wrapper:
+ * positioning (`position`/`top`/`left`), `width: 'max-content'`, the `referenceHidden`
+ * visibility toggle, and the in/out transition styles. Centralized so Tooltip / Popover /
+ * `FloatingComponentBase` don't redeclare it.
+ */
+export const getFloatingPopupStyle = (floating: ReturnType<typeof useFloatingPopup>): CSSProperties => ({
+    position: floating.strategy,
+    top: floating.y ?? 0,
+    left: floating.x ?? 0,
+    width: 'max-content',
+    visibility: floating.middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
+    ...floating.transitionStyles,
+});
+
 interface FloatingComponentWrapProps {
     showInPortal?: boolean;
     className?: string;
@@ -67,7 +142,12 @@ export interface FloatingComponentBaseProps {
     showInPortal?: boolean;
 }
 
-const FloatingComponentWrapStyled = styled.span`
+/**
+ * Base styling for any popup that renders via floating-ui (Tooltip, Popover, …). Tooltip extends
+ * this via `styled(...)` to layer on its dark theme + tighter padding without re-declaring the
+ * shared rules.
+ */
+export const FloatingComponentWrapper = styled.span`
     padding: ${theme.space.space16};
     ${theme.typography.shared.mobile.bodyM};
     border-radius: 0.8rem;
@@ -100,7 +180,7 @@ const StyledPopoverBox = styled.div`
 
 const FloatingComponentWrap = forwardRef<HTMLSpanElement, FloatingComponentWrapProps>((props, ref) => {
     const { showInPortal, ...rest } = props;
-    const component = <FloatingComponentWrapStyled {...rest} ref={ref} />;
+    const component = <FloatingComponentWrapper {...rest} ref={ref} />;
     if (showInPortal) {
         return <FloatingPortal>{component}</FloatingPortal>;
     }
@@ -127,43 +207,12 @@ export const FloatingComponentBase = ({
     CloseButtonComponent,
     showInPortal = false,
 }: FloatingComponentBaseProps) => {
-    const {
-        x,
-        y,
-        refs: { setReference, setFloating },
-        strategy: effectiveStrategy,
-        middlewareData: { hide: refHidden },
-        context,
-    } = useFloating({
+    const floating = useFloatingPopup({
         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 {};
-            }
-        },
+        autoPlacements,
+        offsetPx,
     });
 
     if (!content) return <span>{children}</span>;
@@ -171,21 +220,14 @@ export const FloatingComponentBase = ({
     return (
         <>
             {/* Adding className to children for easier identifying in DevTools */}
-            <ChildrenWrap className={clsx(classNames.CHILDREN, contentWrapClassName)} ref={setReference}>
+            <ChildrenWrap className={clsx(classNames.CHILDREN, contentWrapClassName)} ref={floating.refs.setReference}>
                 {children}
             </ChildrenWrap>
-            {isMounted && (
+            {floating.isMounted && (
                 <FloatingComponentWrap
                     className={className}
-                    ref={setFloating}
-                    style={{
-                        position: effectiveStrategy,
-                        top: y ?? 0,
-                        left: x ?? 0,
-                        width: 'max-content',
-                        visibility: refHidden?.referenceHidden ? 'hidden' : 'visible',
-                        ...styles,
-                    }}
+                    ref={floating.refs.setFloating}
+                    style={getFloatingPopupStyle(floating)}
                     onClick={(e) => e.stopPropagation()}
                     showInPortal={showInPortal}
                 >

package/src/components/floating/tooltip.tsx

@@ -1,10 +1,15 @@
-import { useFloating, useHover, useInteractions } from '@floating-ui/react';
+import { FloatingPortal, useHover, useInteractions } from '@floating-ui/react';
 import { type ComponentType, type ElementType, forwardRef, type ReactNode, 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 {
+    type FloatingComponentBaseProps,
+    FloatingComponentWrapper,
+    getFloatingPopupStyle,
+    useFloatingPopup,
+} from './floating_component_base.js';
 import { TooltipContent } from './tooltip_content.js';
 
 export const TOOLTIP_TEXT_ALIGNS = {
@@ -24,7 +29,10 @@ export const TOOLTIP_SIZES = {
 
 export type TooltipSize = (typeof TOOLTIP_SIZES)[keyof typeof TOOLTIP_SIZES];
 
-export interface TooltipProps extends Omit<FloatingComponentBaseProps, 'isOpen' | 'size'> {
+export interface TooltipProps extends Omit<
+    FloatingComponentBaseProps,
+    'isOpen' | 'size' | 'triggerRef' | 'CloseButtonComponent'
+> {
     as?: ElementType;
     className?: string;
     delayShow?: number;
@@ -43,7 +51,7 @@ interface WithTooltipProps {
 // Using a styled component to get access to the `as` prop
 const TooltipFocusArea = styled.span``;
 
-const StyledFloatingComponentBase = styled(FloatingComponentBase)<{ $isDarkTheme?: boolean }>`
+const TooltipPopup = styled(FloatingComponentWrapper)<{ $isDarkTheme?: boolean }>`
     color: ${theme.colorPalette.dark.neutral0};
     background-color: ${theme.colorPalette.dark.neutral900};
     padding: ${theme.space.space8};
@@ -65,7 +73,14 @@ const StyledFloatingComponentBase = styled(FloatingComponentBase)<{ $isDarkTheme
 `;
 
 /**
- * Tooltip appears on hover, for onclick use Popover
+ * Tooltip appears on hover, for onclick use Popover.
+ *
+ * Reference (the trigger wrapper) and floating (the popup) are rendered as separate DOM subtrees
+ * — the popup is portaled (or rendered as a sibling fragment when `showInPortal={false}`), never
+ * nested inside the trigger. floating-ui's `useHover` resolves open/close state by tracking the
+ * cursor across distinct reference and floating elements; nesting them causes their bounding
+ * rects to overlap and the state machine flips unpredictably (see floating-ui docs on the
+ * reference/floating element separation requirement).
  */
 export const Tooltip = ({
     as,
@@ -77,48 +92,61 @@ export const Tooltip = ({
     subtleText,
     size = TOOLTIP_SIZES.SMALL,
     textAlign = TOOLTIP_TEXT_ALIGNS.LEFT,
-    ...rest
+    placement,
+    autoPlacements,
+    strategy,
+    offsetPx,
+    contentWrapClassName,
+    showInPortal = false,
+    content,
+    children,
 }: TooltipProps): ReactNode => {
     const { uiTheme, tooltipSafeHtml } = useSharedUiDependencies();
     const [open, setOpen] = useState(false);
 
-    const { refs, context } = useFloating({
+    const floating = useFloatingPopup({
         open,
         onOpenChange: setOpen,
+        placement,
+        strategy,
+        autoPlacements,
+        offsetPx,
     });
 
-    const hover = useHover(context, {
-        delay: {
-            open: delayShow,
-            close: delayHide,
-        },
+    const hover = useHover(floating.context, {
+        delay: { open: delayShow, close: delayHide },
     });
 
     const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
 
-    if (!rest.content && !shortcuts?.length && !imageUrl && !subtleText) return rest.children;
+    if (!content && !shortcuts?.length && !imageUrl && !subtleText) return children;
 
-    const tooltipProps = {
-        isOpen: open,
-        ...rest,
-        content: (
+    const popup = (
+        <TooltipPopup
+            ref={floating.refs.setFloating}
+            className={contentWrapClassName}
+            $isDarkTheme={uiTheme === 'DARK'}
+            style={getFloatingPopupStyle(floating)}
+            {...getFloatingProps()}
+        >
             <TooltipContent
-                content={tooltipSafeHtml(rest.content)}
+                content={tooltipSafeHtml(content)}
                 shortcuts={shortcuts}
                 imageUrl={imageUrl}
                 subtleText={subtleText}
                 size={size}
                 textAlign={textAlign}
             />
-        ),
-    };
+        </TooltipPopup>
+    );
 
     return (
-        <TooltipFocusArea as={as} className={className} ref={refs.setReference} {...getReferenceProps()}>
-            <div ref={refs.setFloating} {...getFloatingProps()}>
-                <StyledFloatingComponentBase {...tooltipProps} $isDarkTheme={uiTheme === 'DARK'} />
-            </div>
-        </TooltipFocusArea>
+        <>
+            <TooltipFocusArea as={as} className={className} ref={floating.refs.setReference} {...getReferenceProps()}>
+                {children}
+            </TooltipFocusArea>
+            {floating.isMounted && (showInPortal ? <FloatingPortal>{popup}</FloatingPortal> : popup)}
+        </>
     );
 };
 

package/src/components/index.ts

@@ -27,6 +27,7 @@ export * from './icon_button.js';
 export * from './spinner.js';
 export * from './store/index.js';
 export * from './checkbox/index.js';
+export * from './browser_window/index.js';
 export * from './collapsible_card/index.js';
 export * from './select/index.js';
 export * from './switch/index.js';