@apify/ui-library 1.154.1 → 1.154.2-choreaddtestidmodulesforrema-560495.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.154.1",
+    "version": "1.154.2-choreaddtestidmodulesforrema-560495.15+ad92fc99dff",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "25ca56b2a2db069c5f60e84f2681e06c211fd50a"
+    "gitHead": "ad92fc99dfff45230a40a68c08a9b13f86486789"
 }

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

@@ -0,0 +1,4 @@
+export const cardTestIds = {
+    CARD: 'card',
+    CONTENT: 'card-content',
+};

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,7 +115,7 @@ 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}
             >
@@ -143,7 +144,7 @@ export const Card = forwardRef<HTMLElement, CardProps>(
                         {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/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/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.tsx

@@ -8,6 +8,7 @@ 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';
 
 interface TransientWrapperProps {
     hideOuterBorder?: boolean;
@@ -168,7 +169,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,4 @@
+export const dropdownTestIds = {
+    WRAPPER: 'dropdown-wrapper',
+    ITEM: 'dropdown-item',
+};

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 ? 'dropdown-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 ? 'dropdown-item-disabled' : dropdownTestIds.ITEM}
             >
                 <StyledItemRow>
                     <StyledCheckboxIconWrapper>

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/test_ids.ts

@@ -1,3 +1,8 @@
 // `./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.
+export { cardTestIds } from './components/card/card.test_ids.js';
+export { codeBlockTabTestId, codeBlockTestIds } from './components/code/code_block/code_block.test_ids.js';
+export { prismHighlighterTestIds } from './components/code/prism_highlighter.test_ids.js';
+export { dropdownTestIds } from './components/dropdown/dropdown.test_ids.js';
+export { storeActorHeaderTestIds } from './components/store/store_actor_header.test_ids.js';
 export { tableTestIds } from './components/table/table.test_ids.js';