feat(ui): port more comboboxes

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterDepthAnythingDepthEstimation.tsx

@@ -1,7 +1,7 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui-library';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { FormControl, FormLabel, Select } from '@invoke-ai/ui-library';
 import type { DepthAnythingFilterConfig, DepthAnythingModelSize } from 'features/controlLayers/store/filters';
 import { isDepthAnythingModelSize } from 'features/controlLayers/store/filters';
+import type { ChangeEventHandler } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,12 +11,13 @@ type Props = FilterComponentProps<DepthAnythingFilterConfig>;
 
 export const FilterDepthAnythingDepthEstimation = memo(({ onChange, config }: Props) => {
   const { t } = useTranslation();
-  const handleModelSizeChange = useCallback<ComboboxOnChange>(
-    (v) => {
-      if (!isDepthAnythingModelSize(v?.value)) {
+  const handleModelSizeChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
+    (e) => {
+      const model_size = e.target.value;
+      if (!isDepthAnythingModelSize(model_size)) {
         return;
       }
-      onChange({ ...config, model_size: v.value });
+      onChange({ ...config, model_size });
     },
     [config, onChange]
   );
@@ -31,13 +32,17 @@ export const FilterDepthAnythingDepthEstimation = memo(({ onChange, config }: Pr
     [t]
   );
 
-  const value = useMemo(() => options.filter((o) => o.value === config.model_size)[0], [options, config.model_size]);
-
   return (
     <>
       <FormControl>
         <FormLabel m={0}>{t('controlLayers.filter.depth_anything_depth_estimation.model_size')}</FormLabel>
-        <Combobox value={value} options={options} onChange={handleModelSizeChange} isSearchable={false} />
+        <Select size="sm" value={config.model_size} onChange={handleModelSizeChange}>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </Select>
       </FormControl>
     </>
   );

invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterNoise.tsx

@@ -1,8 +1,14 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui-library';
-import { Combobox, CompositeNumberInput, CompositeSlider, FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
+import {
+  CompositeNumberInput,
+  CompositeSlider,
+  FormControl,
+  FormLabel,
+  Select,
+  Switch,
+} from '@invoke-ai/ui-library';
 import type { NoiseFilterConfig, NoiseTypes } from 'features/controlLayers/store/filters';
 import { IMAGE_FILTERS, isNoiseTypes } from 'features/controlLayers/store/filters';
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, ChangeEventHandler } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -13,12 +19,13 @@ const DEFAULTS = IMAGE_FILTERS.img_noise.buildDefaults();
 
 export const FilterNoise = memo(({ onChange, config }: Props) => {
   const { t } = useTranslation();
-  const handleNoiseTypeChange = useCallback<ComboboxOnChange>(
-    (v) => {
-      if (!isNoiseTypes(v?.value)) {
+  const handleNoiseTypeChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
+    (e) => {
+      const noise_type = e.target.value;
+      if (!isNoiseTypes(noise_type)) {
         return;
       }
-      onChange({ ...config, noise_type: v.value });
+      onChange({ ...config, noise_type });
     },
     [config, onChange]
   );
@@ -52,13 +59,17 @@ export const FilterNoise = memo(({ onChange, config }: Props) => {
     [t]
   );
 
-  const value = useMemo(() => options.filter((o) => o.value === config.noise_type)[0], [options, config.noise_type]);
-
   return (
     <>
       <FormControl>
         <FormLabel m={0}>{t('controlLayers.filter.img_noise.noise_type')}</FormLabel>
-        <Combobox value={value} options={options} onChange={handleNoiseTypeChange} isSearchable={false} />
+        <Select size="sm" value={config.noise_type} onChange={handleNoiseTypeChange}>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </Select>
       </FormControl>
       <FormControl>
         <FormLabel m={0}>{t('controlLayers.filter.img_noise.noise_amount')}</FormLabel>

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/FLUXReduxImageInfluence.tsx

@@ -1,7 +1,7 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui-library';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { FormControl, FormLabel, Select } from '@invoke-ai/ui-library';
 import type { FLUXReduxImageInfluence as FLUXReduxImageInfluenceType } from 'features/controlLayers/store/types';
 import { isFLUXReduxImageInfluence } from 'features/controlLayers/store/types';
+import type { ChangeEventHandler } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { assert } from 'tsafe';
@@ -40,19 +40,25 @@ export const FLUXReduxImageInfluence = memo(({ imageInfluence, onChange }: Props
       ] satisfies { label: string; value: FLUXReduxImageInfluenceType }[],
     [t]
   );
-  const _onChange = useCallback<ComboboxOnChange>(
-    (v) => {
-      assert(isFLUXReduxImageInfluence(v?.value));
-      onChange(v.value);
+  const _onChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
+    (e) => {
+      const imageInfluence = e.target.value;
+      assert(isFLUXReduxImageInfluence(imageInfluence));
+      onChange(imageInfluence);
     },
     [onChange]
   );
-  const value = useMemo(() => options.find((o) => o.value === imageInfluence), [options, imageInfluence]);
 
   return (
     <FormControl>
       <FormLabel m={0}>{t('controlLayers.fluxReduxImageInfluence.imageInfluence')}</FormLabel>
-      <Combobox value={value} options={options} onChange={_onChange} />
+      <Select size="sm" value={imageInfluence} onChange={_onChange}>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </Select>
     </FormControl>
   );
 });