fix(ui): image context menu buttons don't close menu

Need to render as a `MenuItem` to trigger the close behaviour

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"
     />
   );
 });

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
     />
   );
 });

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"
     />
   );
 });

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"
     />
   );
 });

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"
     />
   );
 });

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"
     />
   );
 });