@apify/ui-library 1.95.0 → 1.97.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.95.0",
+    "version": "1.97.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.18.1",
+        "@apify/ui-icons": "^1.18.2",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -54,17 +54,15 @@
     "devDependencies": {
         "@storybook/react-vite": "^9.0.16",
         "@types/lodash": "^4.14.200",
-        "@types/node": "^22.10.5",
         "@types/react": "^18.2.74",
         "@types/styled-components": "^5.1.34",
         "recast": "^0.23.9",
-        "style-dictionary": "^4.4.0",
-        "typescript": "^5.1.6"
+        "style-dictionary": "^4.4.0"
     },
     "files": [
         "dist",
         "src",
         "style"
     ],
-    "gitHead": "4e6b487ae68936e626d6c4309e646823125e4ad5"
+    "gitHead": "c7f6cc1c7b3913d392aab255e763280983256dc5"
 }

package/src/components/code/action_button.tsx

@@ -87,9 +87,9 @@ interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
 }
 
 export const CopyButton = ({ code, ...props }: CopyButtonProps) => {
-    const [isCopied, handleClick] = useCopyToClipboard({ text: code });
+    const { isCopied, copyToClipboard } = useCopyToClipboard();
     return (
-        <ActionButton onClick={handleClick} 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/inline_code/inline_code.tsx

@@ -26,8 +26,8 @@ const CopyButtonWrapper = styled.div`
 `;
 
 const CopyButton: React.FC<{ text: string }> = ({ text }) => {
-    const [isCopied, copyToClipboard] = useCopyToClipboard({ text });
-    return <CopyButtonWrapper role='button' onClick={copyToClipboard} title='Copy to clipboard'>
+    const { isCopied, copyToClipboard } = useCopyToClipboard();
+    return <CopyButtonWrapper role='button' onClick={async () => copyToClipboard(text)} title='Copy to clipboard'>
         {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
     </CopyButtonWrapper>;
 };

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -71,15 +71,13 @@ export const MarkdownHeadingWrapper: React.FC<HeadingSharedProps> = ({
 }) => {
     const id = slugifyHeadingChildren(children);
 
-    const [isCopied, handleClick] = useCopyToClipboard({
-        text: id ?? '',
-        // We want the whole URL to be copied, not just the ID
-        transform: (text) => {
-            const url = new URL(window.location.href);
-            url.hash = `#${text}`;
-            return url.toString();
-        },
-    });
+    const { isCopied, copyToClipboard } = useCopyToClipboard();
+
+    async function handleClick() {
+        const url = new URL(window.location.href);
+        url.hash = `#${id ?? ''}`;
+        await copyToClipboard(url.toString());
+    }
 
     return (
         <StyledMarkdownHeading

package/src/components/to_consolidate/markdown.tsx

@@ -94,7 +94,7 @@ const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
             &.isCopied {
                 opacity: 1;
                 pointer-events: none;
-                
+
                 &::after {
                     content: 'Copied!';
                     opacity: 1;
@@ -513,15 +513,13 @@ const HeadingRendererWithAnchor = ({ node, children }: HeadingRendererProps) =>
     const Tag = node.tagName;
     const id = slugifyHeadingChildren(children);
 
-    const [isCopied, handleClick] = useCopyToClipboard({
-        text: id ?? '',
-        // We want the whole URL to be copied, not just the ID
-        transform: (text) => {
-            const url = new URL(window.location.href);
-            url.hash = `#${text}`;
-            return url.toString();
-        },
-    });
+    const { isCopied, copyToClipboard } = useCopyToClipboard();
+
+    async function handleClick() {
+        const url = new URL(window.location.href);
+        url.hash = `#${id ?? ''}`;
+        await copyToClipboard(url.toString());
+    }
 
     return (
         <Tag id={id}>

package/src/utils/copy_to_clipboard.ts

@@ -1,24 +1,33 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-interface UseCopyToClipboardProps {
-    text: string;
-    transform?: (text: string) => string;
+interface UseCopyToClipboard {
+    isCopied: boolean;
+    copyToClipboard(textToCopy: string): Promise<void>;
 }
 
-export const useCopyToClipboard = ({ text, transform }: UseCopyToClipboardProps): [boolean, () => void] => {
-    const [toCopy, setToCopy] = useState(text);
-    const [isCopied, setCopied] = useState(false);
+export function useCopyToClipboard(timeoutMs = 1000): UseCopyToClipboard {
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const [isCopied, setIsCopied] = useState<boolean>(false);
 
-    const handleClick = async () => {
-        await navigator.clipboard.writeText(toCopy);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1000);
-    };
+    async function copyToClipboard(textToCopy: string) {
+        await navigator.clipboard.writeText(textToCopy);
+        setIsCopied(true);
+
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+        timeoutRef.current = setTimeout(() => {
+            setIsCopied(false);
+            timeoutRef.current = null;
+        }, timeoutMs);
+    }
 
-    // Need the useEffect because of SSR on web
     useEffect(() => {
-        setToCopy(transform ? transform(text) : text);
-    }, [text, transform]);
+        return () => {
+            if (!timeoutRef.current) return;
 
-    return [isCopied, handleClick];
-};
+            clearTimeout(timeoutRef.current);
+        };
+    }, []);
+
+    return { copyToClipboard, isCopied };
+}