diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx index d925e3b2b6f9..fb636e7038c6 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx +++ b/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(); const countries = useCountries() .sort((a, b) => a.countryName.localeCompare(b.countryName)) - .map((country) => ({ - label: country.countryName, - value: country.countryName, + .map>(({ 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" > - dropdownWidth={'auto'} + dropdownWidth={220} disabled={disabled} dropdownId="selectDefaultCountry" value={stripSimpleQuotesFromString(defaultCountry)} @@ -81,6 +84,7 @@ export const SettingsDataModelFieldAddressForm = ({ } options={countries} selectSizeVariant="small" + withSearchInput={true} /> ); diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx index 8190c975f823..5aa54fdf03c7 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx index 627ddee86a32..21ee1a6537d5 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx +++ b/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" > - dropdownWidth={'auto'} + dropdownWidth={220} value={value} onChange={onChange} disabled={disabled} dropdownId="object-field-default-value-select-currency" options={OPTIONS} selectSizeVariant="small" + withSearchInput={true} /> )} diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx index 43879f93f4dd..1412ec28b7a3 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx index 929eed1c02b1..d94cc00d6cab 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx +++ b/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 = { options: SelectOption[]; value?: Value; withSearchInput?: boolean; + needIconCheck?: boolean; callToActionButton?: CallToActionButton; }; @@ -73,6 +74,7 @@ export const Select = ({ options, value, withSearchInput, + needIconCheck, callToActionButton, }: SelectProps) => { const selectContainerRef = useRef(null); @@ -148,10 +150,12 @@ export const Select = ({ {!!filteredOptions.length && ( {filteredOptions.map((option) => ( - { onChange?.(option.value); onBlur?.(); diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx index a90fe43890d4..98f8eb7157a0 100644 --- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx +++ b/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} > - {selected && } + {selected && needIconCheck && } {hasSubMenu && (