Use data attributes for click outside instead of classNames (#12228)

We previously used classnames to exclude elements from the click outside
listener.

With this PR we can now use `data-click-outside-id` instead of
`classNames` to target the elements we want to exclude from the click
outside listener.

We can also add `data-globally-prevent-click-outside` to a component to
globally prevent triggering click outside listeners for other
components. This attribute is especially useful for confirmation modals
and snackbar items.

Fixes #11785:


https://github.com/user-attachments/assets/318baa7e-0f82-4e3a-a447-bf981328462d

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx

@@ -1,6 +1,7 @@
 import { ActionComponent } from '@/action-menu/actions/display/components/ActionComponent';
 import { ActionScope } from '@/action-menu/actions/types/ActionScope';
 import { ActionType } from '@/action-menu/actions/types/ActionType';
+import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
@@ -81,7 +82,9 @@ export const RecordIndexActionMenuDropdown = () => {
         y: actionMenuDropdownPosition.y ?? 0,
       }}
       dropdownComponents={
-        <StyledDropdownMenuContainer className="action-menu-dropdown">
+        <StyledDropdownMenuContainer
+          data-click-outside-id={ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
+        >
           <DropdownMenuItemsContainer>
             <SelectableList
               hotkeyScope={ActionMenuDropdownHotkeyScope.ActionMenuDropdown}