Added logic to hide the copy button when choosing a different version

Author: PreethiPantangi

app/components/CopyToClipboardButton.vue

@@ -12,6 +12,7 @@ const props = defineProps<{
   ariaLabelCopy?: string
   ariaLabelCopied?: string
   buttonAttrs?: HTMLAttributes
+  hideCopyText?: boolean
 }>()
 
 const buttonCopyText = computed(() => props.copyText || $t('common.copy'))
@@ -32,6 +33,7 @@ function handleClick() {
   <div class="group relative" v-bind="$attrs">
     <slot />
     <button
+      v-if="!hideCopyText"
       type="button"
       @click="handleClick"
       class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"

app/components/Package/Header.vue

@@ -21,6 +21,21 @@ const packageHeaderHeight = usePackageHeaderHeight()
 const header = useTemplateRef('header')
 const isHeaderPinned = shallowRef(false)
 const { height: headerHeight } = useElementBounding(header)
+const versionSelectorRef = useTemplateRef('versionSelectorRef')
+const versionSelectorOpen = computed(() => versionSelectorRef.value?.isOpen ?? false)
+const shouldHideCopyText = ref(false)
+let hideTextTimeout: ReturnType<typeof setTimeout> | null = null
+
+watch(versionSelectorOpen, isOpen => {
+  if (isOpen) {
+    shouldHideCopyText.value = true
+    if (hideTextTimeout) clearTimeout(hideTextTimeout)
+  } else {
+    hideTextTimeout = setTimeout(() => {
+      shouldHideCopyText.value = false
+    }, 300)
+  }
+})
 
 function isStickyPinned(el: HTMLElement | null): boolean {
   if (!el) return false
@@ -311,13 +326,15 @@ useShortcuts({
           </template>
           <CopyToClipboardButton
             :copied="copiedPkgVersion"
+            v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
             :copy-text="$t('package.versions.copy_version')"
+            :hide-copy-text="shouldHideCopyText"
             class="inline-flex items-center min-w-0"
             @click="copyPkgVersion()"
           >
             <!-- Version selector -->
             <VersionSelector
-              v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
+              ref="versionSelectorRef"
               :package-name="packageName"
               :current-version="resolvedVersion"
               :versions="pkg.versions"

app/components/VersionSelector.vue

@@ -523,6 +523,11 @@ watch(
     }
   },
 )
+
+// Expose isOpen state to parent components
+defineExpose({
+  isOpen,
+})
 </script>
 
 <template>