Fix CSV import select field matching (#11361)

This PR fixes a bug that prevented to do the matching of an imported CSV
file that contains a SELECT type column.

Fixes https://github.com/twentyhq/twenty/issues/11220

## Stacking context improvement 

During the development it was clear that we lacked a reliable way to
understand our own z indices for components like modal, portaled
dropdown, overlay background, etc.

So in this PR we introduce a new enum RootStackingContextZIndices, this
enum allows to keep track of our root stacking context component
z-index, and because it is an enum, it prevents any conflict.

See
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context
for reference.

## Component cleaning

Components have been reorganized in a SubMatchingSelectRow component

The Dropdown component has been used to replace the SelectInput
component which doesn't fit this use case because we are not in a cell,
we just need a simple standalone dropdown, though it would be
interesting to extract the UI part of the SelectInput, to share it here,
the benefit is not obvious since we already have good shared components
like Tag and Dropdown to implement this specific use case.

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

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

@@ -1,39 +1,26 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import {
-  autoUpdate,
-  flip,
-  offset,
-  size,
-  useFloating,
-} from '@floating-ui/react';
-import React, { useCallback, useId, useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ReadonlyDeep } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
 
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useLingui } from '@lingui/react/macro';
-import { useUpdateEffect } from '~/hooks/useUpdateEffect';
 import { AppTooltip } from 'twenty-ui/display';
-import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
 import { SelectOption } from 'twenty-ui/input';
-
-const StyledFloatingDropdown = styled.div`
-  z-index: ${({ theme }) => theme.lastLayerZIndex};
-`;
+import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
+import { v4 } from 'uuid';
+import { useUpdateEffect } from '~/hooks/useUpdateEffect';
 
 interface MatchColumnSelectProps {
+  columnIndex: string;
   onChange: (value: ReadonlyDeep<SelectOption> | null) => void;
   value?: ReadonlyDeep<SelectOption>;
   options: readonly ReadonlyDeep<SelectOption>[];
   placeholder?: string;
-  name?: string;
 }
 
 export const MatchColumnSelect = ({
@@ -41,30 +28,15 @@ export const MatchColumnSelect = ({
   value,
   options: initialOptions,
   placeholder,
+  columnIndex,
 }: MatchColumnSelectProps) => {
-  const theme = useTheme();
-  const idPrefix = useId();
+  const dropdownId = `match-column-select-dropdown-${columnIndex}`;
 
-  const dropdownContainerRef = useRef<HTMLDivElement>(null);
+  const { closeDropdown } = useDropdown(dropdownId);
 
-  const [isOpen, setIsOpen] = useState(false);
   const [searchFilter, setSearchFilter] = useState('');
   const [options, setOptions] = useState(initialOptions);
 
-  const { refs, floatingStyles } = useFloating({
-    strategy: 'absolute',
-    middleware: [
-      offset(() => {
-        return parseInt(theme.spacing(2), 10);
-      }),
-      flip(),
-      size(),
-    ],
-    whileElementsMounted: autoUpdate,
-    open: isOpen,
-    placement: 'bottom-start',
-  });
-
   const handleSearchFilterChange = useCallback(
     (text: string) => {
       setOptions(
@@ -91,23 +63,11 @@ export const MatchColumnSelect = ({
     debouncedHandleSearchFilter(value);
   };
 
-  const handleDropdownItemClick = () => {
-    setIsOpen(true);
-  };
-
   const handleChange = (option: ReadonlyDeep<SelectOption>) => {
     onChange(option);
-    setIsOpen(false);
+    closeDropdown();
   };
 
-  useListenClickOutside({
-    refs: [dropdownContainerRef],
-    callback: () => {
-      setIsOpen(false);
-    },
-    listenerId: 'match-column-select',
-  });
-
   useUpdateEffect(() => {
     setOptions(initialOptions);
   }, [initialOptions]);
@@ -115,70 +75,64 @@ export const MatchColumnSelect = ({
   const { t } = useLingui();
 
   return (
-    <>
-      <div ref={refs.setReference}>
+    <Dropdown
+      dropdownId={dropdownId}
+      dropdownHotkeyScope={{
+        scope: dropdownId,
+      }}
+      dropdownPlacement="bottom-start"
+      clickableComponent={
         <MenuItem
           LeftIcon={value?.Icon}
-          onClick={handleDropdownItemClick}
           text={value?.label ?? placeholder ?? ''}
           accent={value?.label ? 'default' : 'placeholder'}
         />
-      </div>
-      {isOpen &&
-        createPortal(
-          <StyledFloatingDropdown ref={refs.setFloating} style={floatingStyles}>
-            <OverlayContainer>
-              <DropdownMenu
-                data-select-disable
-                ref={dropdownContainerRef}
-                // width={refs.domReference.current?.clientWidth}
-              >
-                <DropdownMenuSearchInput
-                  value={searchFilter}
-                  onChange={handleFilterChange}
-                  autoFocus
-                />
-                <DropdownMenuSeparator />
-                <DropdownMenuItemsContainer hasMaxHeight>
-                  {options?.map((option, index) => {
-                    const id = `${idPrefix}-option-${index}`;
-                    return (
-                      <React.Fragment key={id}>
-                        <div id={id}>
-                          <MenuItemSelect
-                            selected={value?.label === option.label}
-                            onClick={() => handleChange(option)}
-                            disabled={
-                              option.disabled && value?.value !== option.value
-                            }
-                            LeftIcon={option?.Icon}
-                            text={option.label}
-                          />
-                        </div>
-                        {option.disabled &&
-                          value?.value !== option.value &&
-                          createPortal(
-                            <AppTooltip
-                              key={id}
-                              anchorSelect={`#${id}`}
-                              content={t`You are already importing this column.`}
-                              place="right"
-                              offset={-20}
-                            />,
-                            document.body,
-                          )}
-                      </React.Fragment>
-                    );
-                  })}
-                  {options?.length === 0 && (
-                    <MenuItem key="No results" text={t`No results`} />
-                  )}
-                </DropdownMenuItemsContainer>
-              </DropdownMenu>
-            </OverlayContainer>
-          </StyledFloatingDropdown>,
-          document.body,
-        )}
-    </>
+      }
+      dropdownComponents={
+        <>
+          <DropdownMenuSearchInput
+            value={searchFilter}
+            onChange={handleFilterChange}
+            autoFocus
+          />
+          <DropdownMenuSeparator />
+          <DropdownMenuItemsContainer hasMaxHeight>
+            {options?.map((option) => {
+              const id = `${v4()}-${option.value}`;
+              return (
+                <React.Fragment key={id}>
+                  <div id={id}>
+                    <MenuItemSelect
+                      selected={value?.label === option.label}
+                      onClick={() => handleChange(option)}
+                      disabled={
+                        option.disabled && value?.value !== option.value
+                      }
+                      LeftIcon={option?.Icon}
+                      text={option.label}
+                    />
+                  </div>
+                  {option.disabled &&
+                    value?.value !== option.value &&
+                    createPortal(
+                      <AppTooltip
+                        key={id}
+                        anchorSelect={`#${id}`}
+                        content={t`You are already importing this column.`}
+                        place="right"
+                        offset={-20}
+                      />,
+                      document.body,
+                    )}
+                </React.Fragment>
+              );
+            })}
+            {options?.length === 0 && (
+              <MenuItem key="No results" text={t`No results`} />
+            )}
+          </DropdownMenuItemsContainer>
+        </>
+      }
+    />
   );
 };