@apify/ui-library 1.109.0 → 1.109.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.109.0",
+    "version": "1.109.2",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -64,5 +64,5 @@
         "src",
         "style"
     ],
-    "gitHead": "a53c82a8136684f79742ff9360f27494a8944d61"
+    "gitHead": "a7edf97e472d4cf7b799c8d2e1d6e15d2a613599"
 }

package/src/components/code/action_button.tsx

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import { CheckIcon, CopyIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
 import { useCopyToClipboard } from '../../utils/index.js';
 import { Text } from '../text/index.js';
 
@@ -62,19 +63,33 @@ const StyledButton = styled.button<StyledButtonProps>`
 
 interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     successStyle?: boolean;
+    trackingId?: string;
+    trackingData?: Record<string, unknown>;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 export const ActionButton = ({
     successStyle,
     children,
+    trackingId,
+    trackingData,
+    onClick,
     ...props
 }: ActionButtonProps) => {
     const hasText = typeof children === 'string';
 
+    const { trackClick } = useSharedUiDependencies();
+
+    const trackedOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (trackClick && trackingId) trackClick(trackingId, trackingData);
+        if (onClick) onClick(e);
+    };
+
     return (
         <StyledButton
             $successStyle={successStyle}
             $hasText={hasText}
+            onClick={trackedOnClick}
             {...props}
         >
             {hasText ? <Text weight="bold">{children}</Text> : children}
@@ -84,12 +99,18 @@ export const ActionButton = ({
 
 interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     code: string;
+    trackingId?: string;
+    trackingData?: Record<string, unknown>;
 }
 
 export const CopyButton = ({ code, ...props }: CopyButtonProps) => {
     const { isCopied, copyToClipboard } = useCopyToClipboard();
     return (
-        <ActionButton onClick={async () => copyToClipboard(code)} data-test='copy_to_clipboard' aria-label="Copy to clipboard" {...props}>
+        <ActionButton
+            onClick={async () => copyToClipboard(code)}
+            data-test='copy_to_clipboard'
+            aria-label="Copy to clipboard"
+            {...props}>
             {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
         </ActionButton>
     );

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

@@ -137,6 +137,16 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
     }
 `;
 
+export type TrackingBundleDataObject = {
+    trackingId: string;
+    trackingData?: Record<string, unknown>;
+};
+
+export type OneLineCodeTrackingBundle = Record<
+    'secret' | 'copy' | 'action',
+    TrackingBundleDataObject
+>;
+
 export type OneLineCodeProps = BoxProps & {
     children: string;
     language?: string;
@@ -149,6 +159,7 @@ export type OneLineCodeProps = BoxProps & {
     secret?: string;
     disabled?: boolean;
     hideCopyButton?: boolean;
+    trackingBundle?: OneLineCodeTrackingBundle;
 }
 
 export function OneLineCode({
@@ -163,6 +174,7 @@ export function OneLineCode({
     secret,
     disabled,
     hideCopyButton,
+    trackingBundle,
     ...rest
 }: OneLineCodeProps) {
     const hasSecret = secret !== undefined;
@@ -209,6 +221,8 @@ export function OneLineCode({
                 {hasSecret && (
                     <ActionButton
                         onClick={() => setShowSecret((prev) => !prev)}
+                        trackingId={trackingBundle?.secret?.trackingId}
+                        trackingData={trackingBundle?.secret?.trackingData}
                         data-test='toggle-visibility-button'
                     >
                         {showSecret ? (
@@ -218,9 +232,19 @@ export function OneLineCode({
                         )}
                     </ActionButton>
                 )}
-                {!hideCopyButton && <CopyButton code={codeWithSecret} />}
+                {!hideCopyButton && (
+                    <CopyButton
+                        code={codeWithSecret}
+                        trackingId={trackingBundle?.copy?.trackingId}
+                        trackingData={trackingBundle?.copy?.trackingData}
+                    />
+                )}
                 {!!onActionButtonClick && (
-                    <ActionButton onClick={onActionButtonClick}>
+                    <ActionButton
+                        onClick={onActionButtonClick}
+                        trackingId={trackingBundle?.action?.trackingId}
+                        trackingData={trackingBundle?.action?.trackingData}
+                    >
                         {actionButtonLabel}
                     </ActionButton>
                 )}