feat: Port Canvas Layer Select to IAIMantineSelect

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -2,7 +2,6 @@ import { Box, ButtonGroup, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
-import IAISelect from 'common/components/IAISelect';
 import useImageUploader from 'common/hooks/useImageUploader';
 import { useSingleAndDoubleClick } from 'common/hooks/useSingleAndDoubleClick';
 import {
@@ -25,7 +24,13 @@ import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { isEqual } from 'lodash-es';
 
-import { ChangeEvent } from 'react';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import {
+  canvasCopiedToClipboard,
+  canvasDownloadedAsImage,
+  canvasMerged,
+  canvasSavedToGallery,
+} from 'features/canvas/store/actions';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
@@ -43,12 +48,6 @@ import IAICanvasRedoButton from './IAICanvasRedoButton';
 import IAICanvasSettingsButtonPopover from './IAICanvasSettingsButtonPopover';
 import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions';
 import IAICanvasUndoButton from './IAICanvasUndoButton';
-import {
-  canvasCopiedToClipboard,
-  canvasDownloadedAsImage,
-  canvasMerged,
-  canvasSavedToGallery,
-} from 'features/canvas/store/actions';
 
 export const selector = createSelector(
   [systemSelector, canvasSelector, isStagingSelector],
@@ -197,8 +196,8 @@ const IAICanvasToolbar = () => {
     dispatch(canvasDownloadedAsImage());
   };
 
-  const handleChangeLayer = (e: ChangeEvent<HTMLSelectElement>) => {
+  const handleChangeLayer = (v: string) => {
-    const newLayer = e.target.value as CanvasLayer;
+    const newLayer = v as CanvasLayer;
     dispatch(setLayer(newLayer));
     if (newLayer === 'mask' && !isMaskEnabled) {
       dispatch(setIsMaskEnabled(true));
@@ -214,11 +213,11 @@ const IAICanvasToolbar = () => {
       }}
     >
       <Box w={24}>
-        <IAISelect
+        <IAIMantineSelect
           tooltip={`${t('unifiedCanvas.layer')} (Q)`}
           tooltipProps={{ hasArrow: true, placement: 'top' }}
           value={layer}
-          validValues={LAYER_NAMES_DICT}
+          data={LAYER_NAMES_DICT}
           onChange={handleChangeLayer}
           isDisabled={isStaging}
         />

invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts

@@ -4,8 +4,8 @@ import { RgbaColor } from 'react-colorful';
 import { ImageDTO } from 'services/api';
 
 export const LAYER_NAMES_DICT = [
-  { key: 'Base', value: 'base' },
+  { label: 'Base', value: 'base' },
-  { key: 'Mask', value: 'mask' },
+  { label: 'Mask', value: 'mask' },
 ];
 
 export const LAYER_NAMES = ['base', 'mask'] as const;

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasLayerSelect.tsx

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAISelect from 'common/components/IAISelect';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import {
   canvasSelector,
   isStagingSelector,
@@ -12,7 +12,6 @@ import {
 } from 'features/canvas/store/canvasTypes';
 import { isEqual } from 'lodash-es';
 
-import { ChangeEvent } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
@@ -51,22 +50,23 @@ export default function UnifiedCanvasLayerSelect() {
     [layer]
   );
 
-  const handleChangeLayer = (e: ChangeEvent<HTMLSelectElement>) => {
+  const handleChangeLayer = (v: string) => {
-    const newLayer = e.target.value as CanvasLayer;
+    const newLayer = v as CanvasLayer;
     dispatch(setLayer(newLayer));
     if (newLayer === 'mask' && !isMaskEnabled) {
       dispatch(setIsMaskEnabled(true));
     }
   };
   return (
-    <IAISelect
+    <IAIMantineSelect
       tooltip={`${t('unifiedCanvas.layer')} (Q)`}
       aria-label={`${t('unifiedCanvas.layer')} (Q)`}
       tooltipProps={{ hasArrow: true, placement: 'top' }}
       value={layer}
-      validValues={LAYER_NAMES_DICT}
+      data={LAYER_NAMES_DICT}
       onChange={handleChangeLayer}
       isDisabled={isStaging}
+      w="full"
     />
   );
 }

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx

@@ -2,6 +2,7 @@ import { Flex } from '@chakra-ui/react';
 
 import IAICanvasRedoButton from 'features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton';
 import IAICanvasUndoButton from 'features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton';
+import UnifiedCanvasSettings from './UnifiedCanvasToolSettings/UnifiedCanvasSettings';
 import UnifiedCanvasCopyToClipboard from './UnifiedCanvasToolbar/UnifiedCanvasCopyToClipboard';
 import UnifiedCanvasDownloadImage from './UnifiedCanvasToolbar/UnifiedCanvasDownloadImage';
 import UnifiedCanvasFileUploader from './UnifiedCanvasToolbar/UnifiedCanvasFileUploader';
@@ -13,11 +14,10 @@ import UnifiedCanvasResetCanvas from './UnifiedCanvasToolbar/UnifiedCanvasResetC
 import UnifiedCanvasResetView from './UnifiedCanvasToolbar/UnifiedCanvasResetView';
 import UnifiedCanvasSaveToGallery from './UnifiedCanvasToolbar/UnifiedCanvasSaveToGallery';
 import UnifiedCanvasToolSelect from './UnifiedCanvasToolbar/UnifiedCanvasToolSelect';
-import UnifiedCanvasSettings from './UnifiedCanvasToolSettings/UnifiedCanvasSettings';
 
 const UnifiedCanvasToolbarBeta = () => {
   return (
-    <Flex flexDirection="column" rowGap={2}>
+    <Flex flexDirection="column" rowGap={2} width="min-content">
       <UnifiedCanvasLayerSelect />
       <UnifiedCanvasToolSelect />