From a30377777720de7e09deebee299cd42995fdcd93 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 5 Oct 2024 09:29:44 +1000
Subject: [PATCH] fix(ui): image context menu buttons don't close menu

Need to render as a `MenuItem` to trigger the close behaviour
---
 .../components/ImageContextMenu/ImageMenuItemCopy.tsx |  9 +++++++--
 .../ImageContextMenu/ImageMenuItemDelete.tsx          | 11 ++++++++---
 .../ImageContextMenu/ImageMenuItemDownload.tsx        | 11 ++++++++---
 .../ImageContextMenu/ImageMenuItemOpenInNewTab.tsx    |  9 +++++++--
 .../ImageContextMenu/ImageMenuItemOpenInViewer.tsx    | 11 ++++++++---
 .../ImageMenuItemSelectForCompare.tsx                 |  9 +++++++--
 6 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemCopy.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemCopy.tsx
index 1809d16093..8f7741054d 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemCopy.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemCopy.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { IconButton, MenuItem } from '@invoke-ai/ui-library';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { memo, useCallback } from 'react';
@@ -20,12 +20,17 @@ export const ImageMenuItemCopy = memo(() => {
 
   return (
     <IconButton
+      as={MenuItem}
       icon={<PiCopyBold />}
       aria-label={t('parameters.copyImage')}
       tooltip={t('parameters.copyImage')}
       onPointerUpCapture={onPointerUp}
-      variant="ghost"
+      variant="unstyled"
       colorScheme="base"
+      w="min-content"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDelete.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDelete.tsx
index 150248f764..91e5b58832 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDelete.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDelete.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { IconButton, MenuItem } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
@@ -17,12 +17,17 @@ export const ImageMenuItemDelete = memo(() => {
 
   return (
     <IconButton
+      as={MenuItem}
       icon={<PiTrashSimpleBold />}
       onPointerUpCapture={onPointerUp}
       aria-label={t('gallery.deleteImage', { count: 1 })}
       tooltip={t('gallery.deleteImage', { count: 1 })}
-      variant="ghost"
-      colorScheme="red"
+      variant="unstyled"
+      w="min-content"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      isDestructive
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDownload.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDownload.tsx
index 5a1a8d9a99..dd3ba4166f 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDownload.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemDownload.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { IconButton, MenuItem } from '@invoke-ai/ui-library';
 import { useDownloadImage } from 'common/hooks/useDownloadImage';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { memo, useCallback } from 'react';
@@ -16,12 +16,17 @@ export const ImageMenuItemDownload = memo(() => {
 
   return (
     <IconButton
+      as={MenuItem}
       icon={<PiDownloadSimpleBold />}
       aria-label={t('parameters.downloadImage')}
       tooltip={t('parameters.downloadImage')}
-      variant="ghost"
-      colorScheme="base"
       onPointerUp={onPointerUp}
+      variant="unstyled"
+      colorScheme="base"
+      w="min-content"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInNewTab.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInNewTab.tsx
index ad4e1021df..b1a00ae822 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInNewTab.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInNewTab.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { IconButton, MenuItem } from '@invoke-ai/ui-library';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -13,12 +13,17 @@ export const ImageMenuItemOpenInNewTab = memo(() => {
 
   return (
     <IconButton
+      as={MenuItem}
       onPointerUpCapture={onPointerUp}
       aria-label={t('common.openInNewTab')}
       tooltip={t('common.openInNewTab')}
       icon={<PiArrowSquareOutBold />}
-      variant="ghost"
+      variant="unstyled"
       colorScheme="base"
+      w="min-content"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInViewer.tsx
index a4a5dd47f9..c028fe47ab 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemOpenInViewer.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { IconButton, MenuItem } from '@invoke-ai/ui-library';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { memo, useCallback } from 'react';
@@ -15,12 +15,17 @@ export const ImageMenuItemOpenInViewer = memo(() => {
 
   return (
     <IconButton
+      as={MenuItem}
       icon={<PiArrowsOutBold />}
-      onPointerUp={onPointerUp}
+      onPointerUpCapture={onPointerUp}
       aria-label={t('common.openInViewer')}
       tooltip={t('common.openInViewer')}
-      variant="ghost"
+      variant="unstyled"
       colorScheme="base"
+      w="min-content"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemSelectForCompare.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemSelectForCompare.tsx
index c7186f3265..cfaa6e45d1 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemSelectForCompare.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemSelectForCompare.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { IconButton, MenuItem } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
@@ -23,13 +23,18 @@ export const ImageMenuItemSelectForCompare = memo(() => {
 
   return (
     <IconButton
+      as={MenuItem}
       icon={<PiImagesBold />}
       isDisabled={!maySelectForCompare}
       onPointerUp={onPointerUp}
       aria-label={t('gallery.selectForCompare')}
       tooltip={t('gallery.selectForCompare')}
-      variant="ghost"
+      variant="unstyled"
       colorScheme="base"
+      w="min-content"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
     />
   );
 });