@apify/ui-library 1.138.2-featpublictasks-2f3d3c.52 → 1.138.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.138.2-featpublictasks-2f3d3c.52+68e3cd48a51",
+    "version": "1.138.3",
     "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.2-featpublictasks-2f3d3c.52+68e3cd48a51",
+        "@apify/ui-icons": "^1.38.1",
         "@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-featpublictasks-2f3d3c.52+68e3cd48a51",
+        "@apify-packages/types": "^3.353.3",
         "@storybook/react-vite": "^10.3.5",
         "@types/hast": "^3.0.4",
         "@types/lodash": "^4.14.200",
@@ -72,5 +72,5 @@
         "src",
         "style"
     ],
-    "gitHead": "68e3cd48a5189a18f916ad456f1f15d2767d3382"
+    "gitHead": "e0a71e5f378976ee3b84a9be8fe75ba712d42ac1"
 }

package/src/components/chip.tsx

@@ -80,34 +80,9 @@ 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;
@@ -136,7 +111,6 @@ export const Chip = forwardRef(
         {
             type = CHIP_TYPES.DEFAULT,
             size = CHIP_SIZES.MEDIUM,
-            clickable = false,
             icon,
             children,
             className,
@@ -144,7 +118,7 @@ export const Chip = forwardRef(
         }: ChipProps,
         ref,
     ) => {
-        const otherProps = { ...passThroughProps, type, size, clickable, className: clsx(className, classNames.BODY) };
+        const otherProps = { ...passThroughProps, type, size, 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 ReactNode, useState } from 'react';
+import { type FC, type ReactNode, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { ChevronDownIcon } from '@apify/ui-icons';
@@ -27,7 +27,6 @@ export type CollapsibleCardProps = {
     header: ReactNode;
     children: ReactNode;
     isExpanded?: boolean;
-    isExpandedDefault?: boolean;
     onIsExpandedChanged?: (expanded: boolean) => void;
     noChevron?: boolean;
     noDivider?: boolean;
@@ -111,11 +110,10 @@ const CollapsibleContent = styled(Collapsible.Content)<{ $noDivider?: boolean }>
     ${({ $noDivider }) => ($noDivider ? '' : `border-top: 1px solid ${theme.color.neutral.border};`)}
 `;
 
-export const CollapsibleCard = ({
+export const CollapsibleCard: FC<CollapsibleCardProps> = ({
     header,
     children,
     isExpanded,
-    isExpandedDefault = false,
     onIsExpandedChanged,
     noChevron,
     noDivider,
@@ -126,9 +124,9 @@ export const CollapsibleCard = ({
     isHeaderGreyOnHover,
     as: Element,
     ...rest
-}: CollapsibleCardProps) => {
+}) => {
     const isUncontrolled = isExpanded === undefined;
-    const [isOpen, setOpen] = useState(isExpandedDefault);
+    const [isOpen, setOpen] = useState(false);
 
     let onHeaderClick;
     if (isUncontrolled) onHeaderClick = () => setOpen((prevIsOpen) => !prevIsOpen);

package/src/components/floating/floating_component_base.tsx

@@ -44,81 +44,6 @@ 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;
@@ -142,12 +67,7 @@ export interface FloatingComponentBaseProps {
     showInPortal?: boolean;
 }
 
-/**
- * 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`
+const FloatingComponentWrapStyled = styled.span`
     padding: ${theme.space.space16};
     ${theme.typography.shared.mobile.bodyM};
     border-radius: 0.8rem;
@@ -180,7 +100,7 @@ const StyledPopoverBox = styled.div`
 
 const FloatingComponentWrap = forwardRef<HTMLSpanElement, FloatingComponentWrapProps>((props, ref) => {
     const { showInPortal, ...rest } = props;
-    const component = <FloatingComponentWrapper {...rest} ref={ref} />;
+    const component = <FloatingComponentWrapStyled {...rest} ref={ref} />;
     if (showInPortal) {
         return <FloatingPortal>{component}</FloatingPortal>;
     }
@@ -207,12 +127,43 @@ export const FloatingComponentBase = ({
     CloseButtonComponent,
     showInPortal = false,
 }: FloatingComponentBaseProps) => {
-    const floating = useFloatingPopup({
+    const {
+        x,
+        y,
+        refs: { setReference, setFloating },
+        strategy: effectiveStrategy,
+        middlewareData: { hide: refHidden },
+        context,
+    } = useFloating({
         open: isOpen,
         placement,
         strategy,
-        autoPlacements,
-        offsetPx,
+        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>;
@@ -220,14 +171,21 @@ export const FloatingComponentBase = ({
     return (
         <>
             {/* Adding className to children for easier identifying in DevTools */}
-            <ChildrenWrap className={clsx(classNames.CHILDREN, contentWrapClassName)} ref={floating.refs.setReference}>
+            <ChildrenWrap className={clsx(classNames.CHILDREN, contentWrapClassName)} ref={setReference}>
                 {children}
             </ChildrenWrap>
-            {floating.isMounted && (
+            {isMounted && (
                 <FloatingComponentWrap
                     className={className}
-                    ref={floating.refs.setFloating}
-                    style={getFloatingPopupStyle(floating)}
+                    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}
                 >

package/src/components/floating/tooltip.tsx

@@ -1,15 +1,10 @@
-import { FloatingPortal, 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';
 
 import { theme } from '../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import {
-    type FloatingComponentBaseProps,
-    FloatingComponentWrapper,
-    getFloatingPopupStyle,
-    useFloatingPopup,
-} from './floating_component_base.js';
+import { FloatingComponentBase, type FloatingComponentBaseProps } from './floating_component_base.js';
 import { TooltipContent } from './tooltip_content.js';
 
 export const TOOLTIP_TEXT_ALIGNS = {
@@ -29,10 +24,7 @@ export const TOOLTIP_SIZES = {
 
 export type TooltipSize = (typeof TOOLTIP_SIZES)[keyof typeof TOOLTIP_SIZES];
 
-export interface TooltipProps extends Omit<
-    FloatingComponentBaseProps,
-    'isOpen' | 'size' | 'triggerRef' | 'CloseButtonComponent'
-> {
+export interface TooltipProps extends Omit<FloatingComponentBaseProps, 'isOpen' | 'size'> {
     as?: ElementType;
     className?: string;
     delayShow?: number;
@@ -51,7 +43,7 @@ interface WithTooltipProps {
 // Using a styled component to get access to the `as` prop
 const TooltipFocusArea = styled.span``;
 
-const TooltipPopup = styled(FloatingComponentWrapper)<{ $isDarkTheme?: boolean }>`
+const StyledFloatingComponentBase = styled(FloatingComponentBase)<{ $isDarkTheme?: boolean }>`
     color: ${theme.colorPalette.dark.neutral0};
     background-color: ${theme.colorPalette.dark.neutral900};
     padding: ${theme.space.space8};
@@ -73,14 +65,7 @@ const TooltipPopup = styled(FloatingComponentWrapper)<{ $isDarkTheme?: boolean }
 `;
 
 /**
- * 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).
+ * Tooltip appears on hover, for onclick use Popover
  */
 export const Tooltip = ({
     as,
@@ -92,61 +77,48 @@ export const Tooltip = ({
     subtleText,
     size = TOOLTIP_SIZES.SMALL,
     textAlign = TOOLTIP_TEXT_ALIGNS.LEFT,
-    placement,
-    autoPlacements,
-    strategy,
-    offsetPx,
-    contentWrapClassName,
-    showInPortal = false,
-    content,
-    children,
+    ...rest
 }: TooltipProps): ReactNode => {
     const { uiTheme, tooltipSafeHtml } = useSharedUiDependencies();
     const [open, setOpen] = useState(false);
 
-    const floating = useFloatingPopup({
+    const { refs, context } = useFloating({
         open,
         onOpenChange: setOpen,
-        placement,
-        strategy,
-        autoPlacements,
-        offsetPx,
     });
 
-    const hover = useHover(floating.context, {
-        delay: { open: delayShow, close: delayHide },
+    const hover = useHover(context, {
+        delay: {
+            open: delayShow,
+            close: delayHide,
+        },
     });
 
     const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
 
-    if (!content && !shortcuts?.length && !imageUrl && !subtleText) return children;
+    if (!rest.content && !shortcuts?.length && !imageUrl && !subtleText) return rest.children;
 
-    const popup = (
-        <TooltipPopup
-            ref={floating.refs.setFloating}
-            className={contentWrapClassName}
-            $isDarkTheme={uiTheme === 'DARK'}
-            style={getFloatingPopupStyle(floating)}
-            {...getFloatingProps()}
-        >
+    const tooltipProps = {
+        isOpen: open,
+        ...rest,
+        content: (
             <TooltipContent
-                content={tooltipSafeHtml(content)}
+                content={tooltipSafeHtml(rest.content)}
                 shortcuts={shortcuts}
                 imageUrl={imageUrl}
                 subtleText={subtleText}
                 size={size}
                 textAlign={textAlign}
             />
-        </TooltipPopup>
-    );
+        ),
+    };
 
     return (
-        <>
-            <TooltipFocusArea as={as} className={className} ref={floating.refs.setReference} {...getReferenceProps()}>
-                {children}
-            </TooltipFocusArea>
-            {floating.isMounted && (showInPortal ? <FloatingPortal>{popup}</FloatingPortal> : popup)}
-        </>
+        <TooltipFocusArea as={as} className={className} ref={refs.setReference} {...getReferenceProps()}>
+            <div ref={refs.setFloating} {...getFloatingProps()}>
+                <StyledFloatingComponentBase {...tooltipProps} $isDarkTheme={uiTheme === 'DARK'} />
+            </div>
+        </TooltipFocusArea>
     );
 };
 

package/src/components/index.ts

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

package/dist/src/components/actor_example/actor_example.utils.d.ts

@@ -1,17 +0,0 @@
-import type { IconComponent } from '@apify/ui-icons';
-import type { ActorExampleSchemaFieldType } from '@apify-packages/types';
-export type ActorExampleSchemaPropertyConfig = {
-    Icon: IconComponent;
-    title: string;
-    backgroundColor: string;
-    textColor: string;
-};
-/**
- * Per-type display config used by the schema field components (badge icon, hover tooltip,
- * background/text colors). The `var(--actor-schema-field-*)` references are declared on the
- * `ActorExampleSchemaFieldBadgeWrapper` styled component itself (with a dark-mode override via
- * `html[data-theme='dark'] &`), so the vars are scoped to the badge — no globals are injected.
- */
-export declare const actorExampleSchemaPropertyMap: Record<ActorExampleSchemaFieldType, ActorExampleSchemaPropertyConfig>;
-export declare const actorExampleSchemaPropertyDefaultIcon: ({ size, className, title, titleId, ...props }: import("@apify/ui-icons").IconProps) => React.JSX.Element;
-//# sourceMappingURL=actor_example.utils.d.ts.map

package/dist/src/components/actor_example/actor_example.utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"actor_example.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAEzE,MAAM,MAAM,gCAAgC,GAAG;IAC3C,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,EAAE,MAAM,CAAC,2BAA2B,EAAE,gCAAgC,CA+B/G,CAAC;AAEF,eAAO,MAAM,qCAAqC,2GAAU,CAAC"}

package/dist/src/components/actor_example/actor_example.utils.js

@@ -1,41 +0,0 @@
-import { AnyIcon, BooleanIcon, MenuIcon, NumberIcon, ObjectIcon, TextIcon } from '@apify/ui-icons';
-/**
- * Per-type display config used by the schema field components (badge icon, hover tooltip,
- * background/text colors). The `var(--actor-schema-field-*)` references are declared on the
- * `ActorExampleSchemaFieldBadgeWrapper` styled component itself (with a dark-mode override via
- * `html[data-theme='dark'] &`), so the vars are scoped to the badge — no globals are injected.
- */
-export const actorExampleSchemaPropertyMap = {
-    string: {
-        Icon: TextIcon,
-        title: 'Text',
-        backgroundColor: 'var(--actor-schema-field-string-background)',
-        textColor: 'var(--actor-schema-field-string-text)',
-    },
-    number: {
-        Icon: NumberIcon,
-        title: 'Number',
-        backgroundColor: 'var(--actor-schema-field-number-background)',
-        textColor: 'var(--actor-schema-field-number-text)',
-    },
-    boolean: {
-        Icon: BooleanIcon,
-        title: 'Boolean',
-        backgroundColor: 'var(--actor-schema-field-boolean-background)',
-        textColor: 'var(--actor-schema-field-boolean-text)',
-    },
-    array: {
-        Icon: MenuIcon,
-        title: 'List',
-        backgroundColor: 'var(--actor-schema-field-array-background)',
-        textColor: 'var(--actor-schema-field-array-text)',
-    },
-    object: {
-        Icon: ObjectIcon,
-        title: 'Object',
-        backgroundColor: 'var(--actor-schema-field-object-background)',
-        textColor: 'var(--actor-schema-field-object-text)',
-    },
-};
-export const actorExampleSchemaPropertyDefaultIcon = AnyIcon;
-//# sourceMappingURL=actor_example.utils.js.map

package/dist/src/components/actor_example/actor_example.utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"actor_example.utils.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAWnG;;;;;GAKG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAA0E;IAChH,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,6CAA6C;QAC9D,SAAS,EAAE,uCAAuC;KACrD;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,QAAQ;QACf,eAAe,EAAE,6CAA6C;QAC9D,SAAS,EAAE,uCAAuC;KACrD;IACD,OAAO,EAAE;QACL,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,SAAS;QAChB,eAAe,EAAE,8CAA8C;QAC/D,SAAS,EAAE,wCAAwC;KACtD;IACD,KAAK,EAAE;QACH,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,4CAA4C;QAC7D,SAAS,EAAE,sCAAsC;KACpD;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,QAAQ;QACf,eAAe,EAAE,6CAA6C;QAC9D,SAAS,EAAE,uCAAuC;KACrD;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,qCAAqC,GAAG,OAAO,CAAC"}

package/dist/src/components/actor_example/actor_example_avatar.d.ts

@@ -1,13 +0,0 @@
-export declare const actorExampleAvatarClassNames: {
-    ROOT: string;
-};
-export type ActorExampleAvatarProps = {
-    title?: string;
-    name: string;
-    pictureUrl?: string;
-    fallbackPictureUrl: string;
-    size?: number;
-    className?: string;
-};
-export declare const ActorExampleAvatar: ({ title, name, pictureUrl, fallbackPictureUrl, size, className, }: ActorExampleAvatarProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=actor_example_avatar.d.ts.map

package/dist/src/components/actor_example/actor_example_avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"actor_example_avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_avatar.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,4BAA4B;;CAExC,CAAC;AAOF,MAAM,MAAM,uBAAuB,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,mEAOhC,uBAAuB,4CAkCzB,CAAC"}

package/dist/src/components/actor_example/actor_example_avatar.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { clsx } from 'clsx';
-import { useCallback, useMemo } from 'react';
-import styled from 'styled-components';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-const DEFAULT_SIZE = 36;
-export const actorExampleAvatarClassNames = {
-    ROOT: 'actor-example-avatar',
-};
-const ActorExampleAvatarWrapper = styled.img `
-    flex-shrink: 0;
-    object-fit: cover;
-`;
-export const ActorExampleAvatar = ({ title, name, pictureUrl, fallbackPictureUrl, size = DEFAULT_SIZE, className, }) => {
-    const { generateProxyImageUrl } = useSharedUiDependencies();
-    // Mirrors apify-web's `<Image defaultSrc=…>` behaviour: if the primary src fails to load,
-    // swap in the fallback so the `<img>` element is always present.
-    const handlePictureError = useCallback((event) => {
-        if (!event.currentTarget.src.endsWith(fallbackPictureUrl)) {
-            // eslint-disable-next-line no-param-reassign
-            event.currentTarget.src = fallbackPictureUrl;
-            // eslint-disable-next-line no-param-reassign
-            event.currentTarget.srcset = fallbackPictureUrl;
-        }
-    }, [fallbackPictureUrl]);
-    const proxyPictureUrl = useMemo(() => {
-        if (!generateProxyImageUrl || !pictureUrl)
-            return pictureUrl;
-        return generateProxyImageUrl(pictureUrl, { resize: { height: size * 2, width: size * 2 } });
-    }, [pictureUrl, generateProxyImageUrl, size]);
-    const src = proxyPictureUrl || fallbackPictureUrl;
-    return (_jsx(ActorExampleAvatarWrapper, { src: src, alt: title ?? name, width: size, height: size, className: clsx(actorExampleAvatarClassNames.ROOT, className), onError: handlePictureError }));
-};
-//# sourceMappingURL=actor_example_avatar.js.map

package/dist/src/components/actor_example/actor_example_avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"actor_example_avatar.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAE1E,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,MAAM,CAAC,MAAM,4BAA4B,GAAG;IACxC,IAAI,EAAE,sBAAsB;CAC/B,CAAC;AAEF,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG3C,CAAC;AAWF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,UAAU,EACV,kBAAkB,EAClB,IAAI,GAAG,YAAY,EACnB,SAAS,GACa,EAAE,EAAE;IAC1B,MAAM,EAAE,qBAAqB,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAE5D,0FAA0F;IAC1F,iEAAiE;IACjE,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,KAA6C,EAAE,EAAE;QAC9C,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACxD,6CAA6C;YAC7C,KAAK,CAAC,aAAa,CAAC,GAAG,GAAG,kBAAkB,CAAC;YAC7C,6CAA6C;YAC7C,KAAK,CAAC,aAAa,CAAC,MAAM,GAAG,kBAAkB,CAAC;QACpD,CAAC;IACL,CAAC,EACD,CAAC,kBAAkB,CAAC,CACvB,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,qBAAqB,IAAI,CAAC,UAAU;YAAE,OAAO,UAAU,CAAC;QAC7D,OAAO,qBAAqB,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;IAChG,CAAC,EAAE,CAAC,UAAU,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAC;IAE9C,MAAM,GAAG,GAAG,eAAe,IAAI,kBAAkB,CAAC;IAElD,OAAO,CACH,KAAC,yBAAyB,IACtB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,IAAI,IAAI,EAClB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,IAAI,CAAC,4BAA4B,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7D,OAAO,EAAE,kBAAkB,GAC7B,CACL,CAAC;AACN,CAAC,CAAC"}

package/dist/src/components/actor_example/actor_example_card.d.ts

@@ -1,28 +0,0 @@
-export declare const actorExampleCardClassNames: {
-    ROOT: string;
-    CONTENT: string;
-    BADGE: string;
-    TITLE: string;
-    FOOTER: string;
-    RUN_BUTTON: string;
-    DETAIL_BUTTON: string;
-};
-export type ActorExampleCardProps = {
-    title: string;
-    badge?: string;
-    /** Owning actor's id — flows into the run button's analytics event. */
-    actorId: string;
-    runUrl: string;
-    runLabel: string;
-    /**
-     * Tracking element id for the run button (e.g. `actorInfo.examples.run`). The card's
-     * `title` is forwarded as `cardTitle` automatically.
-     */
-    runTrackingElement: string;
-    detailUrl?: string;
-    detailLabel: string;
-    detailOpensInNewTab?: boolean;
-    className?: string;
-};
-export declare const ActorExampleCard: ({ title, badge, actorId, runUrl, runLabel, runTrackingElement, detailUrl, detailLabel, detailOpensInNewTab, className, }: ActorExampleCardProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=actor_example_card.d.ts.map

package/dist/src/components/actor_example/actor_example_card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"actor_example_card.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_card.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,0BAA0B;;;;;;;;CAQtC,CAAC;AA6DF,MAAM,MAAM,qBAAqB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,0HAW9B,qBAAqB,4CAsCvB,CAAC"}