fix: settings form select menu (#9179)

Closes: #8647 
Closes: #8649 

**Changes & Why**

1. Added a Search Input to `SettingsDataModelFieldAddressForm` &
`SettingsDataModelFieldCurrencyForm` as `Select` component already
accepts it as a prop.
2. Gave a fixed width to the dropdown of both the above components to
ensure it doesn't shrink on search for the menu items with low word
count.
3. Added countries Flag to `SettingsDataModelFieldAddressForm`. 
4. Replaced `MenuItem` with `MenuItemSelect` to get the desired
highlighted background for the selected item with `IconCheck` to
differentiate the current selected item. This is useful across all the
select components throughout the app.
5. I realized that in some components we might not need IconCheck and
only need a highlighted background for the selected item. For ex:
`SettingsDataModelFieldBooleanForm` . Therefore, I created a prop
`needIconCheck` with default as true so it doesn't break the existing
`MenuItemSelect` and we can pass that prop as false wherever needed.

[Screencast from 2024-12-21
12-08-08.webm](https://github.com/user-attachments/assets/4f8070a8-f339-4556-a137-bbbad58b171c)

packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx

@@ -4,8 +4,8 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { addressSchema as addressFieldDefaultValueSchema } from '@/object-record/record-field/types/guards/isFieldAddressValue';
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
 import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
-import { Select } from '@/ui/input/components/Select';
-import { IconMap } from 'twenty-ui';
+import { Select, SelectOption } from '@/ui/input/components/Select';
+import { IconCircleOff, IconComponentProps, IconMap } from 'twenty-ui';
 import { z } from 'zod';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
 import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
@@ -33,13 +33,16 @@ export const SettingsDataModelFieldAddressForm = ({
   const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
   const countries = useCountries()
     .sort((a, b) => a.countryName.localeCompare(b.countryName))
-    .map((country) => ({
-      label: country.countryName,
-      value: country.countryName,
+    .map<SelectOption<string>>(({ countryName, Flag }) => ({
+      label: countryName,
+      value: countryName,
+      Icon: (props: IconComponentProps) =>
+        Flag({ width: props.size, height: props.size }),
     }));
   countries.unshift({
     label: 'No country',
     value: '',
+    Icon: IconCircleOff,
   });
   const defaultDefaultValue = {
     addressStreet1: "''",
@@ -69,7 +72,7 @@ export const SettingsDataModelFieldAddressForm = ({
             description="The default country for new addresses"
           >
             <Select<string>
-              dropdownWidth={'auto'}
+              dropdownWidth={220}
               disabled={disabled}
               dropdownId="selectDefaultCountry"
               value={stripSimpleQuotesFromString(defaultCountry)}
@@ -81,6 +84,7 @@ export const SettingsDataModelFieldAddressForm = ({
               }
               options={countries}
               selectSizeVariant="small"
+              withSearchInput={true}
             />
           </SettingsOptionCardContentSelect>
         );

packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx

@@ -44,6 +44,7 @@ export const SettingsDataModelFieldBooleanForm = ({
             onChange={onChange}
             dropdownId="object-field-default-value-select-boolean"
             dropdownWidth={120}
+            needIconCheck={false}
             options={[
               {
                 value: true,

packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx

@@ -60,13 +60,14 @@ export const SettingsDataModelFieldCurrencyForm = ({
             description="Choose the default currency that will apply"
           >
             <Select<string>
-              dropdownWidth={'auto'}
+              dropdownWidth={220}
               value={value}
               onChange={onChange}
               disabled={disabled}
               dropdownId="object-field-default-value-select-currency"
               options={OPTIONS}
               selectSizeVariant="small"
+              withSearchInput={true}
             />
           </SettingsOptionCardContentSelect>
         )}

packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx

@@ -59,6 +59,7 @@ export const SettingsDataModelFieldNumberForm = ({
                 value={type}
                 onChange={(value) => onChange({ type: value, decimals: count })}
                 disabled={disabled}
+                needIconCheck={false}
                 options={[
                   {
                     Icon: IconNumber9,

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { MouseEvent, useMemo, useRef, useState } from 'react';
-import { IconComponent, MenuItem } from 'twenty-ui';
+import { IconComponent, MenuItem, MenuItemSelect } from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -43,6 +43,7 @@ export type SelectProps<Value extends SelectValue> = {
   options: SelectOption<Value>[];
   value?: Value;
   withSearchInput?: boolean;
+  needIconCheck?: boolean;
   callToActionButton?: CallToActionButton;
 };
 
@@ -73,6 +74,7 @@ export const Select = <Value extends SelectValue>({
   options,
   value,
   withSearchInput,
+  needIconCheck,
   callToActionButton,
 }: SelectProps<Value>) => {
   const selectContainerRef = useRef<HTMLDivElement>(null);
@@ -148,10 +150,12 @@ export const Select = <Value extends SelectValue>({
               {!!filteredOptions.length && (
                 <DropdownMenuItemsContainer hasMaxHeight>
                   {filteredOptions.map((option) => (
-                    <MenuItem
+                    <MenuItemSelect
                       key={`${option.value}-${option.label}`}
                       LeftIcon={option.Icon}
                       text={option.label}
+                      selected={selectedOption.value === option.value}
+                      needIconCheck={needIconCheck}
                       onClick={() => {
                         onChange?.(option.value);
                         onBlur?.();

packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx

@@ -40,6 +40,7 @@ export const StyledMenuItemSelect = styled(StyledMenuItemBase)<{
 type MenuItemSelectProps = {
   LeftIcon?: IconComponent | null | undefined;
   selected: boolean;
+  needIconCheck?: boolean;
   text: string;
   className?: string;
   onClick?: () => void;
@@ -52,6 +53,7 @@ export const MenuItemSelect = ({
   LeftIcon,
   text,
   selected,
+  needIconCheck = true,
   className,
   onClick,
   disabled,
@@ -69,7 +71,7 @@ export const MenuItemSelect = ({
       hovered={hovered}
     >
       <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
-      {selected && <IconCheck size={theme.icon.size.md} />}
+      {selected && needIconCheck && <IconCheck size={theme.icon.size.md} />}
       {hasSubMenu && (
         <IconChevronRight
           size={theme.icon.size.sm}