feat(ui): port bbox select to native select

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -387,7 +387,7 @@ export type StagingAreaImage = {
   offsetY: number;
 };
 
-const zAspectRatioID = z.enum(['Free', '16:9', '3:2', '4:3', '1:1', '3:4', '2:3', '9:16']);
+export const zAspectRatioID = z.enum(['Free', '16:9', '3:2', '4:3', '1:1', '3:4', '2:3', '9:16']);
 export type AspectRatioID = z.infer<typeof zAspectRatioID>;
 export const isAspectRatioID = (v: string): v is AspectRatioID => zAspectRatioID.safeParse(v).success;
 

invokeai/frontend/web/src/features/parameters/components/Bbox/BboxAspectRatioSelect.tsx

@@ -1,44 +1,45 @@
-import type { ComboboxOption, SystemStyleObject } from '@invoke-ai/ui-library';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { FormControl, FormLabel, Select } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import type { SingleValue } from 'chakra-react-select';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { bboxAspectRatioIdChanged } from 'features/controlLayers/store/canvasSlice';
 import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { selectAspectRatioID } from 'features/controlLayers/store/selectors';
-import { isAspectRatioID } from 'features/controlLayers/store/types';
-import { ASPECT_RATIO_OPTIONS } from 'features/parameters/components/Bbox/constants';
-import { memo, useCallback, useMemo } from 'react';
+import { isAspectRatioID, zAspectRatioID } from 'features/controlLayers/store/types';
+import type { ChangeEventHandler } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiCaretDownBold } from 'react-icons/pi';
 
 export const BboxAspectRatioSelect = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const id = useAppSelector(selectAspectRatioID);
   const isStaging = useAppSelector(selectIsStaging);
 
-  const onChange = useCallback(
-    (v: SingleValue<ComboboxOption>) => {
-      if (!v || !isAspectRatioID(v.value)) {
+  const onChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
+    (e) => {
+      if (!isAspectRatioID(e.target.value)) {
         return;
       }
-      dispatch(bboxAspectRatioIdChanged({ id: v.value }));
+      dispatch(bboxAspectRatioIdChanged({ id: e.target.value }));
     },
     [dispatch]
   );
 
-  const value = useMemo(() => ASPECT_RATIO_OPTIONS.filter((o) => o.value === id)[0], [id]);
-
   return (
     <FormControl isDisabled={isStaging}>
       <InformationalPopover feature="paramAspect">
         <FormLabel>{t('parameters.aspect')}</FormLabel>
       </InformationalPopover>
-      <Combobox value={value} onChange={onChange} options={ASPECT_RATIO_OPTIONS} sx={selectStyles} />
+      <Select size="sm" value={id} onChange={onChange} cursor="pointer" iconSize="0.75rem" icon={<PiCaretDownBold />}>
+        {zAspectRatioID.options.map((ratio) => (
+          <option key={ratio} value={ratio}>
+            {ratio}
+          </option>
+        ))}
+      </Select>
     </FormControl>
   );
 });
 
 BboxAspectRatioSelect.displayName = 'BboxAspectRatioSelect';
-
-const selectStyles: SystemStyleObject = { minW: 24 };

invokeai/frontend/web/src/features/parameters/components/Bbox/constants.ts

@@ -1,17 +1,5 @@
-import type { ComboboxOption } from '@invoke-ai/ui-library';
 import type { AspectRatioID } from 'features/controlLayers/store/types';
 
-export const ASPECT_RATIO_OPTIONS: ComboboxOption[] = [
-  { label: 'Free' as const, value: 'Free' },
-  { label: '16:9' as const, value: '16:9' },
-  { label: '3:2' as const, value: '3:2' },
-  { label: '4:3' as const, value: '4:3' },
-  { label: '1:1' as const, value: '1:1' },
-  { label: '3:4' as const, value: '3:4' },
-  { label: '2:3' as const, value: '2:3' },
-  { label: '9:16' as const, value: '9:16' },
-] as const;
-
 export const ASPECT_RATIO_MAP: Record<Exclude<AspectRatioID, 'Free'>, { ratio: number; inverseID: AspectRatioID }> = {
   '16:9': { ratio: 16 / 9, inverseID: '9:16' },
   '3:2': { ratio: 3 / 2, inverseID: '2:3' },