diff --git a/ui/src/components/CopyText.tsx b/ui/src/components/CopyText.tsx index fc399fa0443..ff4134f34a9 100644 --- a/ui/src/components/CopyText.tsx +++ b/ui/src/components/CopyText.tsx @@ -1,21 +1,34 @@ -import { useCallback, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; interface CopyTextProps { text: string; /** What to display. Defaults to `text`. */ children?: React.ReactNode; + containerClassName?: string; className?: string; + ariaLabel?: string; + title?: string; /** Tooltip message shown after copying. Default: "Copied!" */ copiedLabel?: string; } -export function CopyText({ text, children, className, copiedLabel = "Copied!" }: CopyTextProps) { +export function CopyText({ + text, + children, + containerClassName, + className, + ariaLabel, + title, + copiedLabel = "Copied!", +}: CopyTextProps) { const [visible, setVisible] = useState(false); const [label, setLabel] = useState(copiedLabel); const timerRef = useRef>(undefined); const triggerRef = useRef(null); + useEffect(() => () => clearTimeout(timerRef.current), []); + const handleClick = useCallback(async () => { try { if (navigator.clipboard && window.isSecureContext) { @@ -45,10 +58,12 @@ export function CopyText({ text, children, className, copiedLabel = "Copied!" }: }, [copiedLabel, text]); return ( - +