Fix dropdown (#12126)

In this PR:
- deprecating listenClickOutside ComparePixel mode as this is not
accurate. We were using to avoid portal issue with CompareHtmlRef mode
but this is still an issue when portalled content overflows the
container.
- add ClickOutsideContext to specify excluded className so portal
children can use it easily (part of the tooling)
- fix stories
- remove avoidPortal from dropdown as this was not used

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx

@@ -9,6 +9,7 @@ import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContaine
 import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
@@ -17,7 +18,7 @@ import {
   Placement,
   UseFloatingReturn,
 } from '@floating-ui/react';
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { Keys } from 'react-hotkeys-hook';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
@@ -28,7 +29,6 @@ export const StyledDropdownContentContainer = styled.div`
 `;
 
 export type DropdownContentProps = {
-  className?: string;
   dropdownId: string;
   dropdownPlacement: Placement;
   floatingUiRefs: UseFloatingReturn['refs'];
@@ -43,11 +43,9 @@ export type DropdownContentProps = {
   dropdownWidth?: `${string}px` | `${number}%` | 'auto' | number;
   dropdownComponents: React.ReactNode;
   parentDropdownId?: string;
-  avoidPortal?: boolean;
 };
 
 export const DropdownContent = ({
-  className,
   dropdownId,
   dropdownPlacement,
   floatingUiRefs,
@@ -58,7 +56,6 @@ export const DropdownContent = ({
   onHotkeyTriggered,
   dropdownWidth,
   dropdownComponents,
-  avoidPortal,
 }: DropdownContentProps) => {
   const { isDropdownOpen, closeDropdown, setDropdownPlacement } =
     useDropdown(dropdownId);
@@ -121,30 +118,16 @@ export const DropdownContent = ({
     maxWidth: dropdownMaxWidth,
   };
 
+  const { excludeClassName } = useContext(ClickOutsideListenerContext);
+
   return (
     <>
       {hotkey && onHotkeyTriggered && (
         <HotkeyEffect hotkey={hotkey} onHotkeyTriggered={onHotkeyTriggered} />
       )}
-      {avoidPortal ? (
-        <StyledDropdownContentContainer
-          ref={floatingUiRefs.setFloating}
-          style={dropdownMenuStyles}
-          role="listbox"
-          id={`${dropdownId}-options`}
-        >
-          <OverlayContainer>
-            <DropdownMenu
-              className={className}
-              width={dropdownWidth}
-              data-select-disable
-            >
-              {dropdownComponents}
-            </DropdownMenu>
-          </OverlayContainer>
-        </StyledDropdownContentContainer>
-      ) : (
-        <FloatingPortal>
+
+      <FloatingPortal>
+        <div className={excludeClassName}>
           <StyledDropdownContentContainer
             ref={floatingUiRefs.setFloating}
             style={dropdownMenuStyles}
@@ -154,7 +137,6 @@ export const DropdownContent = ({
             <OverlayContainer>
               <DropdownMenu
                 id={dropdownId}
-                className={className}
                 width={dropdownWidth}
                 data-select-disable
               >
@@ -162,8 +144,8 @@ export const DropdownContent = ({
               </DropdownMenu>
             </OverlayContainer>
           </StyledDropdownContentContainer>
-        </FloatingPortal>
-      )}
+        </div>
+      </FloatingPortal>
     </>
   );
 };