From e4cc8ef50944cd4858eb79fcc191457a1ed6d816 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 15 Jan 2025 12:59:24 -0800
Subject: [PATCH] Fix typescript for OverflowMenu (#3139)

* Fix typescript for OverflowMenu

* Revert Discover content dropdown change to non-hoverable OverflowMenu

* Lint
---
 .../ui/src/components/base/OverflowMenu.vue   | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/base/OverflowMenu.vue b/packages/ui/src/components/base/OverflowMenu.vue
index cf0b04f84..59316c5f8 100644
--- a/packages/ui/src/components/base/OverflowMenu.vue
+++ b/packages/ui/src/components/base/OverflowMenu.vue
@@ -10,7 +10,7 @@
     <template #menu>
       <template v-for="(option, index) in options.filter((x) => x.shown === undefined || x.shown)">
         <div
-          v-if="option.divider"
+          v-if="isDivider(option)"
           :key="`divider-${index}`"
           class="h-px mx-3 my-2 bg-button-bg"
         ></div>
@@ -25,15 +25,15 @@
           :v-close-popper="!option.remainOnClick"
           :action="
             option.action
-              ? (event) => {
-                  option.action(event)
+              ? (event: MouseEvent) => {
+                  option.action?.(event)
                   if (!option.remainOnClick) {
                     close()
                   }
                 }
-              : null
+              : undefined
           "
-          :link="option.link ? option.link : null"
+          :link="option.link ? option.link : undefined"
           :external="option.external ? option.external : false"
           :disabled="option.disabled"
           @click="
@@ -67,7 +67,7 @@ interface Divider extends BaseOption {
 
 interface Item extends BaseOption {
   id: string
-  action?: () => void
+  action?: (event?: MouseEvent) => void
   link?: string
   external?: boolean
   color?:
@@ -99,8 +99,8 @@ withDefaults(
   {
     options: () => [],
     disabled: false,
-    dropdownId: null,
-    tooltip: null,
+    dropdownId: undefined,
+    tooltip: undefined,
   },
 )
 
@@ -118,6 +118,10 @@ const open = () => {
   dropdown.value?.show()
 }
 
+function isDivider(option: BaseOption): option is Divider {
+  return 'divider' in option
+}
+
 defineExpose({ open, close })
 </script>