update import auto matching (#12552)

<img width="800" alt="Screenshot 2025-06-11 at 17 45 13"
src="https://github.com/user-attachments/assets/ecc04d41-d74a-424a-9f83-14a793cf4268"
/>

closes https://github.com/twentyhq/core-team-issues/issues/905

packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx

@@ -20,6 +20,7 @@ interface MatchColumnToFieldSelectProps {
   onChange: (value: ReadonlyDeep<SelectOption> | null) => void;
   value?: ReadonlyDeep<SelectOption>;
   options: readonly ReadonlyDeep<SelectOption>[];
+  suggestedOptions: readonly ReadonlyDeep<SelectOption>[];
   placeholder?: string;
 }
 
@@ -32,6 +33,7 @@ export const MatchColumnToFieldSelect = ({
   onChange,
   value,
   options,
+  suggestedOptions,
   placeholder,
   columnIndex,
 }: MatchColumnToFieldSelectProps) => {
@@ -83,6 +85,13 @@ export const MatchColumnToFieldSelect = ({
     }
   };
 
+  const handleSelectSuggestedOption = (
+    selectedSuggestedOption: SelectOption,
+  ) => {
+    onChange(selectedSuggestedOption);
+    closeDropdown();
+  };
+
   const handleDoNotImportSelect = () => {
     if (isDefined(doNotImportOption)) {
       onChange(doNotImportOption);
@@ -138,9 +147,11 @@ export const MatchColumnToFieldSelect = ({
           <MatchColumnSelectFieldSelectDropdownContent
             selectedValue={value}
             onSelectFieldMetadataItem={handleFieldMetadataItemSelect}
+            onSelectSuggestedOption={handleSelectSuggestedOption}
             onCancelSelect={handleCancelSelectClick}
             onDoNotImportSelect={handleDoNotImportSelect}
             options={options}
+            suggestedOptions={suggestedOptions}
           />
         )
       }