@apify/ui-library 1.154.6 → 1.154.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.154.6",
+    "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": "d43e3d961288a5f6ba6be43e79d10047fc394998"
+    "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

@@ -1,4 +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

@@ -120,27 +120,27 @@ export const Card = forwardRef<HTMLElement, CardProps>(
                 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>
                 )}

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/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/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

@@ -9,6 +9,7 @@ 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;
@@ -145,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>

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

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

package/src/components/dropdown/dropdown.tsx

@@ -63,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' : dropdownTestIds.ITEM}
+                data-test={disabled ? dropdownTestIds.ITEM_DISABLED : dropdownTestIds.ITEM}
             >
                 <StyledItemRow>
                     {icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
@@ -122,7 +122,7 @@ const DropdownCheckboxItem = ({
                 {...props}
                 onCheckedChange={disabled ? undefined : onCheckedChange}
                 className={clsx(className)}
-                data-test={disabled ? 'dropdown-item-disabled' : dropdownTestIds.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/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,8 +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';