@apify/ui-library 0.63.2-featcodeblockwithtabs-5a4360.32 → 0.63.2-featcodeblockwithtabs-5a4360.36

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.63.2-featcodeblockwithtabs-5a4360.32+1e905b277d8",
+    "version": "0.63.2-featcodeblockwithtabs-5a4360.36+a49029a0694",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -66,5 +66,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "1e905b277d80c7b4e02e1498fc1bd893de67a91e"
+    "gitHead": "a49029a0694005e89b5f38ad452a1d490d138d99"
 }

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

@@ -3,6 +3,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../../ui_dependency_provider.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box.js';
 import { Link, type RegularLinkProps } from '../../link.js';
 import { HeadingShared } from '../../text/heading_shared.js';
 import { CodeBlock, type CodeBlockProps } from './code_block.js';
@@ -55,16 +57,20 @@ const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig> = {
     },
 };
 
-type SharedCodeBlockProps = Omit<CodeBlockProps, 'content' | 'language' | 'defaultTabKey' | 'onTabChange'>;
+type SharedBoxProps = Omit<RegularBoxProps, 'as' | 'children' | 'onClick'> & MarginSpacingProps;
+
+type SharedCodeBlockProps = Omit<CodeBlockProps, 'bashCommandsStart' | 'content' | 'language' | 'defaultTabKey' | 'onTabChange'>;
 type SharedLinkProps = Pick<RegularLinkProps, 'to' | 'rel' | 'target'>;
 
 export type CodeBlockTabProps = {
     key: CodeBlockTabKey;
+    bashCommandsStart?: number[];
     content: string;
     onClick?: (e: React.MouseEvent) => void;
 } & Partial<SharedLinkProps>;
 
-type CodeBlockWithTabsProps = SharedCodeBlockProps & {
+type CodeBlockWithTabsProps = SharedBoxProps & {
+    codeBlockProps: SharedCodeBlockProps;
     currentTabKey: CodeBlockTabKey;
     tabs: CodeBlockTabProps[];
 };
@@ -76,7 +82,7 @@ export const CODE_BLOCK_WITH_TABS_CLASSNAMES = {
     CONTENT: 'CodeBlockWithTabsContent',
 };
 
-const CodeBlockWithTabsWrapper = styled.div`
+const CodeBlockWithTabsWrapper = styled(Box)`
     .${CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS} {
         min-width: 266px;
         height: 72px;
@@ -129,6 +135,8 @@ const CodeBlockWithTabsWrapper = styled.div`
         }
 
         &.selected {
+            color: ${theme.color.neutral.text};
+
             [role="tabpanel"] {
                 display: block;
             }
@@ -147,21 +155,31 @@ const CodeBlockWithTabsWrapper = styled.div`
     }
 `;
 
-export const CodeBlockWithTabs = ({ currentTabKey, tabs, className, hideBashHeader = true, ...props }: CodeBlockWithTabsProps) => {
-    // Math.Max(0, ) ensures that the index is not negative, in case the currentTabKey is not found in the tabs array
-    const currentTabIndex = Math.max(0, tabs.findIndex((tab) => tab.key === currentTabKey));
-    const currentTab = tabs[currentTabIndex];
+const IMG_RESIZE = {
+    width: 20,
+    height: 20,
+};
+
+export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, tabs, ...props }: CodeBlockWithTabsProps) => {
+    const { generateProxyImageUrl } = useSharedUiDependencies();
+    const currentTab = tabs.find((tab) => tab.key === currentTabKey) ?? tabs[0];
 
     return (
-        <CodeBlockWithTabsWrapper className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className)}>
+        <CodeBlockWithTabsWrapper className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className)} {...props}>
             <div className={CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS}>
                 {tabs.map((tab) => {
                     const { label, src } = CODE_BLOCK_TAB_CATALOG[tab.key];
                     const selected = tab.key === currentTab?.key;
 
+                    const commonProps = {
+                        key: tab.key,
+                        className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),
+                        'data-test': `code-block-tab-${tab.key}`,
+                        onClick: tab.onClick,
+                    };
                     const children = (
                         <>
-                            <img src={src} alt={label} />
+                            <img src={generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src} alt={label} />
                             <HeadingShared type="titleS" as="p">
                                 {label}
                             </HeadingShared>
@@ -173,12 +191,10 @@ export const CodeBlockWithTabs = ({ currentTabKey, tabs, className, hideBashHead
                     if (tab.to) {
                         return (
                             <Link
-                                key={tab.key}
-                                className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected })}
+                                {...commonProps}
                                 to={tab.to}
                                 rel={tab.rel}
                                 target={tab.target}
-                                onClick={tab.onClick}
                             >
                                 {children}
                             </Link>
@@ -187,10 +203,8 @@ export const CodeBlockWithTabs = ({ currentTabKey, tabs, className, hideBashHead
 
                     return (
                         <div
-                            key={tab.key}
-                            className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected })}
+                            {...commonProps}
                             role="button"
-                            onClick={tab.onClick}
                         >
                             {children}
                         </div>
@@ -198,11 +212,12 @@ export const CodeBlockWithTabs = ({ currentTabKey, tabs, className, hideBashHead
                 })}
             </div>
             <CodeBlock
+                bashCommandsStart={currentTab?.bashCommandsStart}
                 content={currentTab?.content ?? ''}
                 language={CODE_BLOCK_TAB_CATALOG[currentTab?.key]?.language}
                 className={CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT}
-                hideBashHeader={hideBashHeader}
-                {...props}
+                hideBashHeader
+                {...codeBlockProps}
             />
         </CodeBlockWithTabsWrapper>
     );