feat(ui): excise iaimantinesearchableselect

invokeai/frontend/web/package.json

@@ -94,6 +94,7 @@
     "react-konva": "^18.2.10",
     "react-redux": "^9.0.2",
     "react-resizable-panels": "^0.0.55",
+    "react-select": "5.7.7",
     "react-use": "^17.4.2",
     "react-virtuoso": "^4.6.2",
     "reactflow": "^11.10.1",

invokeai/frontend/web/public/locales/en.json

@@ -805,7 +805,8 @@
         "selectLoRA": "Select a LoRA",
         "selectModel": "Select a Model",
         "noLoRAsInstalled": "No LoRAs installed",
-        "noRefinerModelsInstalled": "No SDXL Refiner models installed"
+        "noRefinerModelsInstalled": "No SDXL Refiner models installed",
+        "defaultVAE": "Default VAE"
     },
     "nodes": {
         "addNode": "Add Node",

invokeai/frontend/web/src/common/components/InvCard/theme.ts

@@ -1,6 +1,6 @@
 import { cardAnatomy } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
-import { cardVariantLora } from 'features/lora/components/LoRACollapse/styles';
+import { cardVariantLora } from 'features/lora/components/styles';
 
 const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(
   cardAnatomy.keys

invokeai/frontend/web/src/common/components/InvSelect/CustomComponents.tsx

@@ -22,6 +22,9 @@ type CustomOptionProps = OptionProps<
 
 export const CustomComponents: CustomSelectComponentConfig = {
   Option: ({ children, ...props }: CustomOptionProps) => {
+    delete props.innerProps.onMouseMove;
+    delete props.innerProps.onMouseOver;
+
     if (props.data.icon) {
       return (
         <chakraComponents.Option {...props}>

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

@@ -1,10 +1,22 @@
-import { Select as ChakraReactSelect } from 'chakra-react-select';
+import {
+  Select as ChakraReactSelect,
+  GroupBase,
+  StylesConfig,
+} from 'chakra-react-select';
 import { CustomComponents } from './CustomComponents';
-import { CustomChakraStylesConfig, InvSelectProps } from './types';
-import { useMemo } from 'react';
+import {
+  CustomChakraStylesConfig,
+  InvSelectOption,
+  InvSelectProps,
+} from './types';
+import { memo, useMemo } from 'react';
 
-export const InvSelect = (props: InvSelectProps) => {
-  const { sx, ...rest } = props;
+const styles: StylesConfig<InvSelectOption> = {
+  menuPortal: (provided) => ({ ...provided, zIndex: 999 }),
+};
+
+export const InvSelect = memo((props: InvSelectProps) => {
+  const { sx, selectRef, ...rest } = props;
   const chakraStyles = useMemo<CustomChakraStylesConfig>(
     () => ({
       container: (provided, _state) => ({ ...provided, ...sx }),
@@ -21,14 +33,18 @@ export const InvSelect = (props: InvSelectProps) => {
   );
 
   return (
-    <ChakraReactSelect
+    <ChakraReactSelect<InvSelectOption, false, GroupBase<InvSelectOption>>
+      ref={selectRef}
       menuPortalTarget={document.body}
       colorScheme="base"
       selectedOptionColorScheme="base"
       components={CustomComponents}
       chakraStyles={chakraStyles}
+      styles={styles}
       variant="filled"
       {...rest}
     />
   );
-};
+});
+
+InvSelect.displayName = 'InvSelect';

invokeai/frontend/web/src/common/components/InvSelect/index.ts

@@ -6,3 +6,4 @@ export type {
 } from './types';
 export { InvSelect } from './InvSelect';
 export { InvSelectFallback } from './InvSelectFallback';
+export { useGroupedModelInvSelect } from './useGroupedModelInvSelect';

invokeai/frontend/web/src/common/components/InvSelect/types.ts

@@ -4,6 +4,7 @@ import {
   ChakraStylesConfig,
   GroupBase,
   OptionBase,
+  SelectInstance,
   SingleValue,
 } from 'chakra-react-select';
 import { ReactNode } from 'react';
@@ -15,6 +16,7 @@ export interface InvSelectOption extends OptionBase {
   description?: string;
   icon?: ReactNode;
   tooltip?: string;
+  tags?: string[];
 }
 
 export type InvSelectProps = ChakraReactSelectProps<
@@ -23,8 +25,10 @@ export type InvSelectProps = ChakraReactSelectProps<
   GroupBase<InvSelectOption>
 > & {
   sx?: ChakraProps['sx'];
+  selectRef?: React.RefObject<
+    SelectInstance<InvSelectOption, false, GroupBase<InvSelectOption>>
+  >;
 };
-
 export type CustomChakraStylesConfig = ChakraStylesConfig<
   InvSelectOption,
   false,
@@ -35,4 +39,6 @@ export type InvSelectFallbackProps = {
   label: string;
 };
 
-export type InvSelectOnChange = (v: SingleValue<InvSelectOption>) => void;
+export type InvSelectOnChange = (
+  v: SingleValue<InvSelectOption> | null
+) => void;