fix(ui): add custom label to IAIMantineSelects

needed to have their label styles match chakras

invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx

@@ -1,17 +1,25 @@
-import { Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
 import { MultiSelect, MultiSelectProps } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
 import { useMantineMultiSelectStyles } from 'mantine-theme/hooks/useMantineMultiSelectStyles';
 import { KeyboardEvent, RefObject, memo, useCallback } from 'react';
 
-type IAIMultiSelectProps = MultiSelectProps & {
+type IAIMultiSelectProps = Omit<MultiSelectProps, 'label'> & {
   tooltip?: string;
   inputRef?: RefObject<HTMLInputElement>;
+  label?: string;
 };
 
 const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
-  const { searchable = true, tooltip, inputRef, ...rest } = props;
+  const {
+    searchable = true,
+    tooltip,
+    inputRef,
+    label,
+    disabled,
+    ...rest
+  } = props;
   const dispatch = useAppDispatch();
 
   const handleKeyDown = useCallback(
@@ -37,7 +45,15 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
   return (
     <Tooltip label={tooltip} placement="top" hasArrow isOpen={true}>
       <MultiSelect
+        label={
+          label ? (
+            <FormControl isDisabled={disabled}>
+              <FormLabel>{label}</FormLabel>
+            </FormControl>
+          ) : undefined
+        }
         ref={inputRef}
+        disabled={disabled}
         onKeyDown={handleKeyDown}
         onKeyUp={handleKeyUp}
         searchable={searchable}

invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
@@ -11,13 +11,22 @@ export type IAISelectDataType = {
   tooltip?: string;
 };
 
-type IAISelectProps = SelectProps & {
+type IAISelectProps = Omit<SelectProps, 'label'> & {
   tooltip?: string;
+  label?: string;
   inputRef?: RefObject<HTMLInputElement>;
 };
 
 const IAIMantineSearchableSelect = (props: IAISelectProps) => {
-  const { searchable = true, tooltip, inputRef, onChange, ...rest } = props;
+  const {
+    searchable = true,
+    tooltip,
+    inputRef,
+    onChange,
+    label,
+    disabled,
+    ...rest
+  } = props;
   const dispatch = useAppDispatch();
 
   const [searchValue, setSearchValue] = useState('');
@@ -61,6 +70,14 @@ const IAIMantineSearchableSelect = (props: IAISelectProps) => {
     <Tooltip label={tooltip} placement="top" hasArrow>
       <Select
         ref={inputRef}
+        label={
+          label ? (
+            <FormControl isDisabled={disabled}>
+              <FormLabel>{label}</FormLabel>
+            </FormControl>
+          ) : undefined
+        }
+        disabled={disabled}
         searchValue={searchValue}
         onSearchChange={setSearchValue}
         onChange={handleChange}

invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { useMantineSelectStyles } from 'mantine-theme/hooks/useMantineSelectStyles';
 import { RefObject, memo } from 'react';
@@ -9,19 +9,32 @@ export type IAISelectDataType = {
   tooltip?: string;
 };
 
-type IAISelectProps = SelectProps & {
+type IAISelectProps = Omit<SelectProps, 'label'> & {
   tooltip?: string;
   inputRef?: RefObject<HTMLInputElement>;
+  label?: string;
 };
 
 const IAIMantineSelect = (props: IAISelectProps) => {
-  const { tooltip, inputRef, ...rest } = props;
+  const { tooltip, inputRef, label, disabled, ...rest } = props;
 
   const styles = useMantineSelectStyles();
 
   return (
     <Tooltip label={tooltip} placement="top" hasArrow>
-      <Select ref={inputRef} styles={styles} {...rest} />
+      <Select
+        label={
+          label ? (
+            <FormControl isDisabled={disabled}>
+              <FormLabel>{label}</FormLabel>
+            </FormControl>
+          ) : undefined
+        }
+        disabled={disabled}
+        ref={inputRef}
+        styles={styles}
+        {...rest}
+      />
     </Tooltip>
   );
 };