fix(copy-feedback): reset timeout after repeated copies (#823)

Author: nocdn

.changeset/code-highlighted-copy-feedback.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Keep transient copy feedback visible until the final repeated copy click settles across Kumo copy controls.

packages/kumo-docs-astro/src/components/demos/CloudflareLogoDemo.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   CloudflareLogo,
   PoweredByCloudflare,
@@ -12,6 +12,8 @@ import {
   ArrowSquareOutIcon,
 } from "@phosphor-icons/react";
 
+const COPIED_FEEDBACK_MS = 2000;
+
 export function CloudflareLogoBasicDemo() {
   return <CloudflareLogo className="w-72" />;
 }
@@ -60,11 +62,42 @@ export function CloudflareLogoSizesDemo() {
 
 export function CloudflareLogoCopyDemo() {
   const [copied, setCopied] = useState<string | null>(null);
+  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const copyAttemptRef = useRef(0);
+
+  useEffect(() => {
+    return () => {
+      copyAttemptRef.current += 1;
+      if (resetTimeoutRef.current !== null) {
+        clearTimeout(resetTimeoutRef.current);
+        resetTimeoutRef.current = null;
+      }
+    };
+  }, []);
 
   const copyToClipboard = async (text: string, label: string) => {
-    await navigator.clipboard.writeText(text);
-    setCopied(label);
-    setTimeout(() => setCopied(null), 2000);
+    const attempt = ++copyAttemptRef.current;
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+      resetTimeoutRef.current = null;
+    }
+
+    try {
+      await navigator.clipboard.writeText(text);
+      if (copyAttemptRef.current !== attempt) return;
+
+      setCopied(label);
+      resetTimeoutRef.current = setTimeout(() => {
+        if (copyAttemptRef.current !== attempt) return;
+        setCopied(null);
+        resetTimeoutRef.current = null;
+      }, COPIED_FEEDBACK_MS);
+    } catch (error) {
+      if (copyAttemptRef.current !== attempt) return;
+
+      setCopied(null);
+      console.error("Failed to copy logo SVG:", error);
+    }
   };
 
   return (

packages/kumo-docs-astro/src/components/docs/CopyPageButton.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button, DropdownMenu } from "@cloudflare/kumo";
 import {
   CopySimpleIcon,
@@ -15,8 +15,22 @@ interface CopyPageButtonProps {
   align?: "start" | "center" | "end";
 }
 
+const COPIED_FEEDBACK_MS = 2000;
+
 export function CopyPageButton({ align = "end" }: CopyPageButtonProps) {
   const [copied, setCopied] = useState(false);
+  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const copyAttemptRef = useRef(0);
+
+  useEffect(() => {
+    return () => {
+      copyAttemptRef.current += 1;
+      if (resetTimeoutRef.current !== null) {
+        clearTimeout(resetTimeoutRef.current);
+        resetTimeoutRef.current = null;
+      }
+    };
+  }, []);
 
   const getMarkdownUrl = () => {
     const url = new URL(window.location.href);
@@ -29,23 +43,37 @@ export function CopyPageButton({ align = "end" }: CopyPageButtonProps) {
     return `${url.origin}${path}.md`;
   };
 
-  const onCopySuccess = () => {
-    setCopied(true);
+  const onCopySuccess = (attempt: number) => {
+    if (copyAttemptRef.current !== attempt) return;
 
-    setTimeout(() => setCopied(false), 2000); // 2 seconds
+    setCopied(true);
+    resetTimeoutRef.current = setTimeout(() => {
+      if (copyAttemptRef.current !== attempt) return;
+      setCopied(false);
+      resetTimeoutRef.current = null;
+    }, COPIED_FEEDBACK_MS);
   };
 
   const handleCopyMarkdown = async () => {
-    onCopySuccess();
+    const attempt = ++copyAttemptRef.current;
+    if (resetTimeoutRef.current !== null) {
+      clearTimeout(resetTimeoutRef.current);
+      resetTimeoutRef.current = null;
+    }
 
     try {
       const markdownUrl = getMarkdownUrl();
       const response = await fetch(markdownUrl);
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
       const markdown = await response.text();
+      if (copyAttemptRef.current !== attempt) return;
 
       await navigator.clipboard.writeText(markdown);
+      onCopySuccess(attempt);
     } catch (error) {
+      if (copyAttemptRef.current !== attempt) return;
+
+      setCopied(false);
       console.error("Failed to copy page as Markdown:", error);
     }
   };

packages/kumo/src/blocks/delete-resource/delete-resource.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vite-plus/test";
+import { DeleteResource } from "./delete-resource";
+
+describe("DeleteResource", () => {
+  it("renders a copy control for the resource name", () => {
+    render(
+      <DeleteResource
+        open
+        onOpenChange={() => {}}
+        resourceType="Worker"
+        resourceName="my-worker"
+        onDelete={() => {}}
+      />,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Copy my-worker to clipboard" }),
+    ).toBeDefined();
+  });
+});

packages/kumo/src/blocks/delete-resource/delete-resource.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import {
   Dialog,
   DialogRoot,
@@ -15,6 +15,7 @@ import {
   XIcon,
 } from "@phosphor-icons/react";
 import { Banner } from "../../components/banner";
+import { useCopyFeedback } from "../../utils/use-copy-feedback";
 
 export const KUMO_DELETE_RESOURCE_VARIANTS = {
   size: {
@@ -77,14 +78,16 @@ export function DeleteResource({
   className,
 }: DeleteResourceProps) {
   const [confirmationInput, setConfirmationInput] = useState("");
-  const [copied, setCopied] = useState(false);
+  const { copied, runCopy, reset: resetCopyFeedback } = useCopyFeedback(1500);
+  const openRef = useRef(open);
+  openRef.current = open;
 
   useEffect(() => {
     if (!open) {
+      resetCopyFeedback();
       setConfirmationInput("");
-      setCopied(false);
     }
-  }, [open]);
+  }, [open, resetCopyFeedback]);
 
   const normalizeForComparison = useCallback(
     (str: string) => (caseSensitive ? str : str.toLowerCase()),
@@ -101,10 +104,13 @@ export function DeleteResource({
   }, [isConfirmed, isDeleting, onDelete]);
 
   const handleCopy = useCallback(async () => {
-    await navigator.clipboard.writeText(resourceName);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  }, [resourceName]);
+    if (!openRef.current) return;
+
+    await runCopy(
+      () => navigator.clipboard.writeText(resourceName),
+      (error) => console.warn("Clipboard copy failed", error),
+    );
+  }, [resourceName, runCopy]);
 
   return (
     <DialogRoot open={open} onOpenChange={onOpenChange}>

packages/kumo/src/code/code-highlighted.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import React, { useState, useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { cn } from "../utils/cn";
+import { useCopyFeedback } from "../utils/use-copy-feedback";
 import { Button } from "../components/button";
 import { useShikiHighlighter } from "./use-shiki-highlighter";
 import type { CodeHighlightedProps } from "./types";
@@ -47,7 +48,7 @@ export function CodeHighlighted({
     error,
     labels: providerLabels,
   } = useShikiHighlighter();
-  const [copied, setCopied] = useState(false);
+  const { copied, runCopy } = useCopyFeedback();
 
   // Merge provider labels with component-level overrides
   const labels = useMemo(
@@ -56,14 +57,15 @@ export function CodeHighlighted({
   );
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("[Kumo CodeHighlighted] Failed to copy to clipboard:", err);
-    }
-  }, [code]);
+    await runCopy(
+      () => navigator.clipboard.writeText(code),
+      (error) =>
+        console.error(
+          "[Kumo CodeHighlighted] Failed to copy to clipboard:",
+          error,
+        ),
+    );
+  }, [code, runCopy]);
 
   // Memoized so unrelated rerenders (e.g. copy state) don't re-highlight
   const html = useMemo(() => highlight(code, lang), [highlight, code, lang]);

packages/kumo/src/components/breadcrumbs/breadcrumbs.tsx

@@ -2,8 +2,6 @@ import {
   Children,
   cloneElement,
   isValidElement,
-  useEffect,
-  useState,
   type PropsWithChildren,
   type ReactElement,
   type ReactNode,
@@ -14,6 +12,7 @@ import { SkeletonLine } from "../../components/loader/skeleton-line";
 import { useLinkComponent } from "../../utils/link-provider";
 import { cn } from "../../utils/cn";
 import { resolveVariant } from "../../utils/resolve-variant";
+import { useCopyFeedback } from "../../utils/use-copy-feedback";
 
 /** Breadcrumbs size variant definitions. */
 export const KUMO_BREADCRUMBS_VARIANTS = {
@@ -144,24 +143,15 @@ function MobileEllipsis() {
 }
 
 function Clipboard({ text }: { text: string }) {
-  const [isCopied, setIsCopied] = useState(false);
-
-  useEffect(() => {
-    if (!isCopied) return;
-
-    const timeoutId = setTimeout(() => setIsCopied(false), 2000);
-    return () => clearTimeout(timeoutId);
-  }, [isCopied]);
+  const { copied: isCopied, runCopy } = useCopyFeedback();
 
   const handleCopyDeeplink = async () => {
     if (!text) return;
 
-    try {
-      await navigator.clipboard.writeText(text);
-      setIsCopied(true);
-    } catch (err) {
-      console.error("Failed to copy deeplink:", err);
-    }
+    await runCopy(
+      () => navigator.clipboard.writeText(text),
+      (error) => console.error("Failed to copy deeplink:", error),
+    );
   };
 
   return (

packages/kumo/src/components/empty/empty.tsx

@@ -1,9 +1,10 @@
 import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
-import { useState } from "react";
+import { useCallback } from "react";
 import { Button } from "../../components/button";
 import { Text } from "../../components/text";
 import { cn } from "../../utils/cn";
 import { resolveVariant } from "../../utils/resolve-variant";
+import { useCopyFeedback } from "../../utils/use-copy-feedback";
 
 /** Empty state size variant definitions mapping sizes to their Tailwind classes. */
 export const KUMO_EMPTY_VARIANTS = {
@@ -98,7 +99,16 @@ export function Empty({
   size = "base",
   className,
 }: EmptyProps) {
-  const [emptyStateCopied, setEmptyStateCopied] = useState<boolean>(false);
+  const { copied: emptyStateCopied, runCopy } = useCopyFeedback(1000);
+
+  const handleCopy = useCallback(async () => {
+    if (!commandLine) return;
+
+    await runCopy(
+      () => navigator.clipboard.writeText(commandLine),
+      (error) => console.warn("Clipboard copy failed", error),
+    );
+  }, [commandLine, runCopy]);
 
   return (
     <div className={cn(emptyVariants({ size }), className)}>
@@ -143,13 +153,7 @@ export function Empty({
             variant="ghost"
             shape="square"
             aria-label="Copy command"
-            onClick={async () => {
-              setEmptyStateCopied(true);
-              setTimeout(() => {
-                setEmptyStateCopied(false);
-              }, 1000);
-              await navigator.clipboard.writeText(commandLine);
-            }}
+            onClick={handleCopy}
           >
             {emptyStateCopied ? (
               <CheckIcon