@apify/ui-library 1.154.5 → 1.154.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.154.5",
+    "version": "1.154.7",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "066f7bd37a2bd518e2455a2c312fd0253a9c6348"
+    "gitHead": "6d467ed9ed1c4ec3ff91449e9000a9da1d8a5999"
 }

package/src/components/actor_template_card/actor_template_card.test_ids.ts

@@ -0,0 +1 @@
+export const actorTemplateCardTestId = (id: string): string => `actor-template-card-${id}`;

package/src/components/actor_template_card/actor_template_card.tsx

@@ -5,6 +5,7 @@ import { theme } from '../../design_system/theme';
 import { Badge } from '../badge';
 import { TextMarketing } from '../text';
 import { VerticalTile } from '../tile';
+import { actorTemplateCardTestId } from './actor_template_card.test_ids';
 
 interface ActorTemplateCardProps {
     id: string;
@@ -67,7 +68,7 @@ const TemplateCardContentWrapper = styled.div`
 
 export const ActorTemplateCard: React.FC<ActorTemplateCardProps> = ({ id, label, description, icons, useCases }) => {
     const templateCardContent = (
-        <TemplateCardContentWrapper data-test={`actor-template-card-${id}`}>
+        <TemplateCardContentWrapper data-test={actorTemplateCardTestId(id)}>
             <div className={WrapperClasses.TEMPLATE_CARD_IMAGES}>{icons}</div>
             <div className={WrapperClasses.TEMPLATE_CARD_TEXT}>
                 <TextMarketing size="regular" weight="bold">

package/src/components/card/card.test_ids.ts

@@ -0,0 +1,8 @@
+export const cardTestIds = {
+    CARD: 'card',
+    CONTENT: 'card-content',
+    HEADER: 'card-header',
+    CAPTION: 'card-caption',
+    ACTIONS: 'card-actions',
+    DESCRIPTION: 'card-description',
+};

package/src/components/card/card.tsx

@@ -8,6 +8,7 @@ import type { WithTransientProps } from '../../type_utils';
 import type { BoxProps } from '../box';
 import { Box } from '../box';
 import { Text } from '../text';
+import { cardTestIds } from './card.test_ids';
 
 export const cardClassNames = {
     WRAPPER: 'Card',
@@ -114,36 +115,36 @@ export const Card = forwardRef<HTMLElement, CardProps>(
                 $shadowless={shadowless}
                 forwardedAs={as || 'section'}
                 className={clsx(cardClassNames.WRAPPER, className)}
-                data-test="card"
+                data-test={cardTestIds.CARD}
                 {...rest}
                 ref={ref}
             >
                 {(!!caption || !!actions) && (
-                    <header className={cardClassNames.HEADER} data-test="card-header">
+                    <header className={cardClassNames.HEADER} data-test={cardTestIds.HEADER}>
                         {caption && (
                             <Text
                                 as="div"
                                 size="big"
                                 weight="bold"
                                 className={cardClassNames.CAPTION}
-                                data-test="card-caption"
+                                data-test={cardTestIds.CAPTION}
                             >
                                 {caption}
                             </Text>
                         )}
                         {actions && (
-                            <div className={cardClassNames.ACTIONS} data-test="card-actions">
+                            <div className={cardClassNames.ACTIONS} data-test={cardTestIds.ACTIONS}>
                                 {actions}
                             </div>
                         )}
                     </header>
                 )}
                 {description && (
-                    <div className={cardClassNames.DESCRIPTION} data-test="card-description">
+                    <div className={cardClassNames.DESCRIPTION} data-test={cardTestIds.DESCRIPTION}>
                         {description}
                     </div>
                 )}
-                <div className={cardClassNames.CONTENT} data-test="card-content">
+                <div className={cardClassNames.CONTENT} data-test={cardTestIds.CONTENT}>
                     {children}
                 </div>
             </StyledCardWrapper>

package/src/components/code/action_button.test_ids.ts

@@ -0,0 +1,3 @@
+export const actionButtonTestIds = {
+    COPY_TO_CLIPBOARD: 'copy_to_clipboard',
+};

package/src/components/code/action_button.tsx

@@ -7,6 +7,7 @@ import { theme } from '../../design_system/theme';
 import { useSharedUiDependencies } from '../../ui_dependency_provider';
 import { useCopyToClipboard } from '../../utils';
 import { Text } from '../text';
+import { actionButtonTestIds } from './action_button.test_ids';
 
 interface StyledButtonProps {
     $successStyle?: boolean;
@@ -105,7 +106,7 @@ export const CopyButton = ({ code, ...props }: CopyButtonProps) => {
     return (
         <ActionButton
             onClick={async () => copyToClipboard(code)}
-            data-test="copy_to_clipboard"
+            data-test={actionButtonTestIds.COPY_TO_CLIPBOARD}
             aria-label="Copy to clipboard"
             {...props}
         >

package/src/components/code/code_block/code_block.test_ids.ts

@@ -0,0 +1,5 @@
+export const codeBlockTestIds = {
+    HEADER: 'code-block-header',
+};
+
+export const codeBlockTabTestId = (key: string): string => `code-block-tab-${key}`;

package/src/components/code/code_block/code_block.tsx

@@ -10,6 +10,7 @@ import type { SharedTextSize } from '../../text/text_shared';
 import { ActionButton, CopyButton } from '../action_button';
 import { PrismSyntaxHighlighter } from '../prism_highlighter';
 import { CodeBlockWrapper } from './code_block.styled';
+import { codeBlockTabTestId, codeBlockTestIds } from './code_block.test_ids';
 import { getBashLinePrefixes, getNumberLinePrefixes } from './utils';
 
 type CodeTab = {
@@ -57,7 +58,7 @@ const HeaderDots = () => {
 
 const Header = ({ tabs, currentTab, showBashHeader, onTabChange, title }: HeaderProps) => {
     return (
-        <div className="CodeBlock-Header" data-test="code-block-header">
+        <div className="CodeBlock-Header" data-test={codeBlockTestIds.HEADER}>
             {showBashHeader && <HeaderDots />}
             {title && (
                 <Text weight="bold" className="CodeBlock-HeaderTitle">
@@ -69,7 +70,7 @@ const Header = ({ tabs, currentTab, showBashHeader, onTabChange, title }: Header
                     const selected = tab.key === currentTab?.key;
                     const props = {
                         className: clsx('CodeBlock-Tab', { selected }),
-                        'data-test': `code-block-tab-${tab.key}`,
+                        'data-test': codeBlockTabTestId(tab.key),
                         onClick: (e: React.MouseEvent) => onTabChange(tab, e),
                         title: tab.label,
                         id: tab.id ?? tab.key,

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -11,6 +11,7 @@ import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box';
 import { Link, type RegularLinkProps } from '../../link';
 import { HeadingShared } from '../../text/heading_shared';
 import { CodeBlock, type CodeBlockProps } from './code_block';
+import { codeBlockTabTestId } from './code_block.test_ids';
 
 export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi' | 'python' | 'typescript';
 type CodeBlockTabConfig = {
@@ -224,7 +225,7 @@ export const CodeBlockWithTabs = ({
 
                     const commonProps = {
                         className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),
-                        'data-test': `code-block-tab-${tab.key}`,
+                        'data-test': codeBlockTabTestId(tab.key),
                         ..._.omit(tab, ['bashCommandsStart', 'content', 'languageOverride']),
                     };
                     const children = (

package/src/components/code/one_line_code/one_line_code.test_ids.ts

@@ -0,0 +1,3 @@
+export const oneLineCodeTestIds = {
+    TOGGLE_VISIBILITY_BUTTON: 'toggle-visibility-button',
+};

package/src/components/code/one_line_code/one_line_code.tsx

@@ -14,6 +14,7 @@ import type { SyntaxHighlighterBaseStylesWrapperProps } from '../code_block/code
 import { SyntaxHighlighterBaseStylesWrapper } from '../code_block/code_block.styled';
 import { getBashLinePrefixes } from '../code_block/utils';
 import { PrismSyntaxHighlighter } from '../prism_highlighter';
+import { oneLineCodeTestIds } from './one_line_code.test_ids';
 
 export const oneLineCodeClassNames = {
     gradientWrapper: 'OneLineCode-GradientWrapper',
@@ -216,7 +217,7 @@ export function OneLineCode({
                         onClick={() => setShowSecret((prev) => !prev)}
                         trackingId={trackingBundle?.secret?.trackingId}
                         trackingData={trackingBundle?.secret?.trackingData}
-                        data-test="toggle-visibility-button"
+                        data-test={oneLineCodeTestIds.TOGGLE_VISIBILITY_BUTTON}
                     >
                         {showSecret ? <EyeOffIcon size="16" /> : <EyeIcon size="16" />}
                     </ActionButton>

package/src/components/code/prism_highlighter.test_ids.ts

@@ -0,0 +1,3 @@
+export const prismHighlighterTestIds = {
+    CODE: 'code-block-code',
+};

package/src/components/code/prism_highlighter.tsx

@@ -11,6 +11,7 @@ import { useSharedUiDependencies } from '../../ui_dependency_provider';
 import type { SharedTextSize } from '../text';
 import { Text } from '../text';
 import { oneLightTheme } from './one_light_theme';
+import { prismHighlighterTestIds } from './prism_highlighter.test_ids';
 
 (typeof global !== 'undefined' ? global : window).Prism = Prism;
 
@@ -208,7 +209,7 @@ export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlight
                         className={clsx(className, prismClassName)}
                         $hasLinePrefixes={hasLinePrefixes}
                         $isSingleLine={isSingleLine}
-                        data-test="code-block-code"
+                        data-test={prismHighlighterTestIds.CODE}
                         ref={ref}
                     >
                         <Text size={size} type="code" as="code">

package/src/components/collapsible_card/collapsible_card.test_ids.ts

@@ -0,0 +1,3 @@
+export const collapsibleCardTestIds = {
+    TOP_SECTION: 'collapsible-card-top-section',
+};

package/src/components/collapsible_card/collapsible_card.tsx

@@ -8,6 +8,8 @@ import { ChevronDownIcon } from '@apify/ui-icons';
 import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
 import { Box } from '../box';
+import { cardTestIds } from '../card/card.test_ids';
+import { collapsibleCardTestIds } from './collapsible_card.test_ids';
 
 interface TransientWrapperProps {
     hideOuterBorder?: boolean;
@@ -144,7 +146,7 @@ export const CollapsibleCard = ({
             {topSection && (
                 <StyledTopSection
                     className={collapsibleCardClassNames.TOP_SECTION}
-                    data-test="collapsible-card-top-section"
+                    data-test={collapsibleCardTestIds.TOP_SECTION}
                 >
                     {topSection}
                 </StyledTopSection>
@@ -168,7 +170,7 @@ export const CollapsibleCard = ({
                     $noDivider={noDivider}
                     className={collapsibleCardClassNames.COLLAPSIBLE_CONTENT_WRAPPER}
                 >
-                    <StyledCardContent className={collapsibleCardClassNames.CONTENT} data-test="card-content">
+                    <StyledCardContent className={collapsibleCardClassNames.CONTENT} data-test={cardTestIds.CONTENT}>
                         {children}
                     </StyledCardContent>
                 </CollapsibleContent>

package/src/components/dropdown/dropdown.styled.ts

@@ -2,6 +2,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme';
+import { dropdownTestIds } from './dropdown.test_ids';
 
 export const DROPDOWN_ELEMENT_CLASSES = {
     WRAPPER: 'dropdown-wrapper',
@@ -23,7 +24,7 @@ type StyledContentProps = {
 export const StyledContent = styled(DropdownMenu.Content).attrs<
     DropdownMenu.DropdownMenuContentProps & { 'data-test'?: string }
 >((props) => ({
-    'data-test': 'dropdown-wrapper',
+    'data-test': dropdownTestIds.WRAPPER,
     className: [DROPDOWN_ELEMENT_CLASSES.WRAPPER, props.className].filter(Boolean).join(' '),
 }))<StyledContentProps>`
     background: ${theme.color.neutral.background};

package/src/components/dropdown/dropdown.test_ids.ts

@@ -0,0 +1,5 @@
+export const dropdownTestIds = {
+    WRAPPER: 'dropdown-wrapper',
+    ITEM: 'dropdown-item',
+    ITEM_DISABLED: 'dropdown-item-disabled',
+};

package/src/components/dropdown/dropdown.tsx

@@ -26,6 +26,7 @@ import {
     StyledSeparator,
     StyledTagWrapper,
 } from './dropdown.styled';
+import { dropdownTestIds } from './dropdown.test_ids';
 import type { BaseDropdownItemProps } from './dropdown.types';
 import { DropdownRoot } from './dropdown_root';
 
@@ -62,7 +63,7 @@ const DropdownItem = ({
                 disabled={disabled}
                 {...props}
                 className={clsx(DROPDOWN_ELEMENT_CLASSES.ITEM, className, selected && 'dropdown-item-selected')}
-                data-test={disabled ? 'dropdown-item-disabled' : 'dropdown-item'}
+                data-test={disabled ? dropdownTestIds.ITEM_DISABLED : dropdownTestIds.ITEM}
             >
                 <StyledItemRow>
                     {icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
@@ -121,7 +122,7 @@ const DropdownCheckboxItem = ({
                 {...props}
                 onCheckedChange={disabled ? undefined : onCheckedChange}
                 className={clsx(className)}
-                data-test={disabled ? 'dropdown-item-disabled' : 'dropdown-item'}
+                data-test={disabled ? dropdownTestIds.ITEM_DISABLED : dropdownTestIds.ITEM}
             >
                 <StyledItemRow>
                     <StyledCheckboxIconWrapper>

package/src/components/pagination/pagination.test_ids.ts

@@ -0,0 +1,6 @@
+export const paginationTestIds = {
+    PREV_BUTTON: 'page-prev-button',
+    CURRENT_PAGE_BUTTON: 'current-page-button',
+    PAGE_NUMBER_BUTTON: 'page-number-button',
+    NEXT_BUTTON: 'page-next-button',
+};

package/src/components/pagination/pagination.tsx

@@ -7,6 +7,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@apify/ui-icons';
 import { theme } from '../../design_system/theme';
 import { Box } from '../box';
 import { Button } from '../button';
+import { paginationTestIds } from './pagination.test_ids';
 
 const LEADING_THREE_DOTS_PAGE_KEY = -1;
 const TRAILING_THREE_DOTS_PAGE_KEY = -2;
@@ -76,7 +77,7 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({ page, totalPages
     return (
         <StyledPageSelectionButtons>
             <PaginationButtonBase
-                data-test="page-prev-button"
+                data-test={paginationTestIds.PREV_BUTTON}
                 disabled={page <= 0}
                 onClick={() => onPageChange(page - 1)}
                 trackingId="PaginationPrevPage"
@@ -101,7 +102,7 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({ page, totalPages
                     return (
                         <PaginationButtonBase
                             key={pageToDisplay}
-                            data-test="current-page-button"
+                            data-test={paginationTestIds.CURRENT_PAGE_BUTTON}
                             trackingId="PaginationCurrentPage"
                             className="currentPage"
                             onClick={() => undefined}
@@ -113,7 +114,7 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({ page, totalPages
                 return (
                     <PaginationButtonBase
                         key={pageToDisplay}
-                        data-test="page-number-button"
+                        data-test={paginationTestIds.PAGE_NUMBER_BUTTON}
                         onClick={() => onPageChange(pageToDisplay)}
                         trackingId="PaginationNumberedPage"
                     >
@@ -122,7 +123,7 @@ export const PaginationButtons: FC<PaginationButtonsProps> = ({ page, totalPages
                 );
             })}
             <PaginationButtonBase
-                data-test="page-next-button"
+                data-test={paginationTestIds.NEXT_BUTTON}
                 disabled={page >= totalPages - 1}
                 onClick={() => onPageChange(page + 1)}
                 trackingId="PaginationNextPage"

package/src/components/select/select.test_ids.ts

@@ -0,0 +1,2 @@
+// Clear indicator button, keyed by the select's id (or name as a fallback)
+export const selectClearTestId = (idOrName: string | undefined): string => `${idOrName}--clear`;

package/src/components/select/select.tsx

@@ -4,6 +4,7 @@ import type {
     ClearIndicatorProps,
     DropdownIndicatorProps,
     IndicatorsContainerProps,
+    MultiValueGenericProps,
     MultiValueRemoveProps,
     OptionProps,
     StylesConfig,
@@ -16,6 +17,7 @@ import { CaretDownIcon, CaretUpIcon, CrossIcon, XCircleIcon } from '@apify/ui-ic
 import { theme } from '../../design_system/theme';
 import { IconButton } from '../icon_button';
 import { Text } from '../text';
+import { selectClearTestId } from './select.test_ids';
 
 const DEFAULT_Z_INDEX_IN_MODAL = 99;
 const DEFAULT_Z_INDEX_OUTSIDE_MODAL = 9;
@@ -294,7 +296,7 @@ const ClearIndicator: FC<ClearIndicatorProps<SelectOption>> = ({ innerProps, sel
     return (
         <IconButton
             Icon={CrossIcon}
-            data-test={`${selectProps?.id ?? selectProps?.name}--clear`}
+            data-test={selectClearTestId(selectProps?.id ?? selectProps?.name)}
             {...(innerProps as React.HTMLAttributes<Element>)}
         />
     );
@@ -312,6 +314,18 @@ export const SelectMultiValueRemove: FC<Pick<MultiValueRemoveProps<SelectOption>
     <MultiValueRemoveButton Icon={CrossIcon} {...(innerProps as React.HTMLAttributes<Element>)} />
 );
 
+const SelectMultiValueLabel: FC<MultiValueGenericProps<SelectOption>> = ({ innerProps, ...rest }) => (
+    <selectComponents.MultiValueLabel
+        {...rest}
+        innerProps={
+            {
+                ...innerProps,
+                'data-test': `${rest.selectProps?.id ?? rest.selectProps?.name}--multi-value-label`,
+            } as typeof innerProps
+        }
+    />
+);
+
 const IndicatorSeparator = () => null; // we don't display anything
 
 /**
@@ -384,6 +398,7 @@ export const SelectPrimitive = forwardRef<unknown, SelectPrimitiveProps>(
                     ClearIndicator,
                     IndicatorSeparator,
                     MultiValueRemove: SelectMultiValueRemove, // react-select slot name
+                    MultiValueLabel: SelectMultiValueLabel,
                     IndicatorsContainer,
                     Option,
                     Control: StyledControl,

package/src/components/store/store_actor_header.test_ids.ts

@@ -0,0 +1,3 @@
+export const storeActorHeaderTestIds = {
+    HEADER: 'actor-store-item-header',
+};

package/src/components/store/store_actor_header.tsx

@@ -5,6 +5,7 @@ import { StarEmptyIcon, WarningTriangleIcon } from '@apify/ui-icons';
 import { Badge, Box, type BoxProps, Text } from '../../components';
 import { theme } from '../../design_system/theme';
 import { ActorAvatar, actorAvatarClassnames } from '../avatar';
+import { storeActorHeaderTestIds } from './store_actor_header.test_ids';
 
 const storeActorHeaderClassNames = {
     title: 'ActorStoreItem-title',
@@ -93,7 +94,7 @@ export const StoreActorHeader: React.FC<StoreActorHeaderProps & BoxProps> = ({
     ...rest
 }) => {
     return (
-        <StyledStoreActorHeader data-test="actor-store-item-header" $compact={compact} {...rest}>
+        <StyledStoreActorHeader data-test={storeActorHeaderTestIds.HEADER} $compact={compact} {...rest}>
             <ActorAvatarWrapper>
                 <ActorAvatar
                     size={compact ? 20 : avatarSize}

package/src/components/tabs/tab.test_ids.ts

@@ -0,0 +1,3 @@
+export const tabTestIds = {
+    TAB: 'tab',
+};

package/src/components/tabs/tab.tsx

@@ -15,6 +15,7 @@ import type { RegularLinkProps } from '../link';
 import { Link } from '../link';
 import type { SharedTextSize } from '../text';
 import { Text } from '../text';
+import { tabTestIds } from './tab.test_ids';
 
 type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> &
     MarginSpacingProps &
@@ -199,7 +200,7 @@ export const Tab = ({
     const href = typeof to === 'string' ? to : createPath(to);
     return (
         <TabWrapper
-            data-test="tab"
+            data-test={tabTestIds.TAB}
             {...props}
             id={id}
             to={to}

package/src/components/tabs/tabs.test_ids.ts

@@ -0,0 +1,3 @@
+export const tabsTestIds = {
+    WRAPPER: 'tabs-wrapper',
+};

package/src/components/tabs/tabs.tsx

@@ -10,6 +10,7 @@ import type { MarginSpacingProps, RegularBoxProps } from '../box';
 import { Box } from '../box';
 import type { TabData, TabVariant } from './tab';
 import { Tab } from './tab';
+import { tabsTestIds } from './tabs.test_ids';
 
 type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
 export type TabsProps = SharedTabsProps & {
@@ -154,7 +155,7 @@ export const Tabs = ({ variant = 'default', tabs, activeTab, onSelect, ...props
     }, []);
 
     return (
-        <TabsWrapper {...props} data-test="tabs-wrapper" $variant={variant}>
+        <TabsWrapper {...props} data-test={tabsTestIds.WRAPPER} $variant={variant}>
             <div role="cell" aria-hidden={!overflowState?.left} />
             <div ref={ref} role="tablist" onScroll={scrollHandler}>
                 {tabs.map((tab) => (

package/src/test_ids.ts

@@ -1,3 +1,17 @@
 // `./test-ids` subpath barrel. Playwright imports test IDs from here to avoid the
-// React/CSS-heavy root barrel (which breaks non-bundler loaders). Add future modules here.
+// React/CSS-heavy root barrel (which breaks non-bundler loaders).
+// Do not edit directly, this file is generated by `pnpm run generate:test-id-barrels`.
+export { actorTemplateCardTestId } from './components/actor_template_card/actor_template_card.test_ids.js';
+export { cardTestIds } from './components/card/card.test_ids.js';
+export { actionButtonTestIds } from './components/code/action_button.test_ids.js';
+export { codeBlockTabTestId, codeBlockTestIds } from './components/code/code_block/code_block.test_ids.js';
+export { oneLineCodeTestIds } from './components/code/one_line_code/one_line_code.test_ids.js';
+export { prismHighlighterTestIds } from './components/code/prism_highlighter.test_ids.js';
+export { collapsibleCardTestIds } from './components/collapsible_card/collapsible_card.test_ids.js';
+export { dropdownTestIds } from './components/dropdown/dropdown.test_ids.js';
+export { paginationTestIds } from './components/pagination/pagination.test_ids.js';
+export { selectClearTestId } from './components/select/select.test_ids.js';
+export { storeActorHeaderTestIds } from './components/store/store_actor_header.test_ids.js';
 export { tableTestIds } from './components/table/table.test_ids.js';
+export { tabTestIds } from './components/tabs/tab.test_ids.js';
+export { tabsTestIds } from './components/tabs/tabs.test_ids.js';