@apify/ui-library 0.67.3 → 0.67.5-featoutputschemacomponent-327312.42

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.67.3",
+    "version": "0.67.5-featoutputschemacomponent-327312.42+35425759a07",
     "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": "d98435650b673ceb1c0f683046678525c0760fb5"
+    "gitHead": "35425759a07209a8230bf5afb9bfd6dc28c326d6"
 }

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

package/src/components/simple_markdown/simple_markdown.tsx

@@ -125,8 +125,8 @@ const regularMarkdownSizeComponents: Components = {
     blockquote: ({ children }) => <MarkdownBlockQuote>{children}</MarkdownBlockQuote>,
     table: ({ children }) => <MarkdownTable>{children}</MarkdownTable>,
     ul: ({ children }) => <Box as='ul' pl='space32'>{children}</Box>,
-    ol: ({ children, start }) => <Box as='ol' pl='space32' start={start}>{children}</Box>,
-    li: ({ children }) => <Box as='li' mt='space4'>{children}</Box>,
+    ol: ({ children, start }) => <TextContent as='ol' pl='space32' start={start}>{children}</TextContent>,
+    li: ({ children }) => <TextContent as='li' mt='space4'>{children}</TextContent>,
     a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
     code: ({ children, inline }) => <MarkdownCode inline={inline} size='regular'>{children}</MarkdownCode>,
 };
@@ -145,8 +145,8 @@ const smallMarkdownSizeComponents: Components = {
     blockquote: ({ children }) => <MarkdownBlockQuote>{children}</MarkdownBlockQuote>,
     table: ({ children }) => <MarkdownTable>{children}</MarkdownTable>,
     ul: ({ children }) => <Box as='ul' pl='space32'>{children}</Box>,
-    ol: ({ children, start }) => <Box as='ol' pl='space32' start={start}>{children}</Box>,
-    li: ({ children }) => <Box as='li' mt='space4'>{children}</Box>,
+    ol: ({ children, start }) => <Text as='ol' pl='space32' start={start}>{children}</Text>,
+    li: ({ children }) => <Text as='li' mt='space4'>{children}</Text>,
     a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
     code: ({ children, inline }) => <MarkdownCode inline={inline} size='small'>{children}</MarkdownCode>,
 };