@apify/ui-library 0.67.4 → 0.67.5-featoutputschemacomponent-327312.55

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.67.4",
+    "version": "0.67.5-featoutputschemacomponent-327312.55+a115a4da8fe",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -65,5 +65,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "af227cdbfc1a11191ff86f231d11e80d215d611b"
+    "gitHead": "a115a4da8fe789c5ede403ec8548ff22e1b16c29"
 }

package/src/components/code/inline_code/inline_code.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
+import { CheckIcon, CopyIcon } from '@apify/ui-icons';
+
 import { theme } from '../../../design_system/theme.js';
+import { useCopyToClipboard } from '../../../utils/copy_to_clipboard.js';
 import type { RegularBoxProps } from '../../box.js';
 import { Text } from '../../text/index.js';
 import type { SharedTextSize } from '../../text/text_shared.js';
@@ -15,6 +18,20 @@ export const inlineCodeStyles = css`
     border: 1px solid ${theme.color.neutral.border};
 `;
 
+const CopyButtonWrapper = styled.div`
+    display: inline-flex;
+    cursor: pointer;
+    vertical-align: text-top;
+    margin-left: ${theme.space.space4};
+`;
+
+const CopyButton: React.FC<{ text: string }> = ({ text }) => {
+    const [isCopied, copyToClipboard] = useCopyToClipboard({ text });
+    return <CopyButtonWrapper role='button' onClick={copyToClipboard} title='Copy to clipboard'>
+        {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
+    </CopyButtonWrapper>;
+};
+
 const Wrapper = styled.span`
     code {
         ${inlineCodeStyles}
@@ -24,21 +41,22 @@ const Wrapper = styled.span`
 export type InlineCodeProps = RegularBoxProps & {
     children: React.ReactNode,
     size?: SharedTextSize,
+    withCopyButton?: boolean,
 }
 
 // This might be just a Chip component
 export const InlineCode: React.FC<InlineCodeProps> = ({
     children,
     size,
+    withCopyButton,
     ...props
-}) => (
-    <Wrapper {...props}>
-        <Text
-            type="code"
-            as="code"
-            size={size}
-        >
-            {children}
-        </Text>
-    </Wrapper>
-);
+}) => <Wrapper {...props}>
+    <Text
+        type="code"
+        as="code"
+        size={size}
+    >
+        {children}
+        {withCopyButton && <CopyButton text={children?.toString() ?? ''} />}
+    </Text>
+</Wrapper>;