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/ui/feedback/dialog-manager/components/Dialog.tsx

@@ -4,6 +4,7 @@ import { Key } from 'ts-key-enum';
 
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
+import { DIALOG_CLICK_OUTSIDE_ID } from '@/ui/feedback/dialog-manager/constants/DialogClickOutsideId';
 import { DIALOG_LISTENER_ID } from '@/ui/feedback/dialog-manager/constants/DialogListenerId';
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@@ -138,6 +139,7 @@ export const Dialog = ({
       animate="open"
       exit="closed"
       className={className}
+      data-click-outside-id={DIALOG_CLICK_OUTSIDE_ID}
     >
       <StyledDialogContainer
         variants={containerVariants}

packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/DialogManager.tsx

@@ -15,7 +15,6 @@ export const DialogManager = ({ children }: React.PropsWithChildren) => {
       {dialogInternal.queue.map(({ buttons, children, id, message, title }) => (
         <Dialog
           key={id}
-          className="dialog-manager-dialog"
           {...{ title, message, buttons, id, children }}
           onClose={() => closeDialog(id)}
         />

packages/twenty-front/src/modules/ui/feedback/dialog-manager/constants/DialogClickOutsideId.ts

@@ -0,0 +1 @@
+export const DIALOG_CLICK_OUTSIDE_ID = 'dialog-manager-dialog';

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -203,6 +203,7 @@ export const SnackBar = ({
       onMouseLeave={handleMouseLeave}
       title={message || defaultAriaLabelByVariant[variant]}
       {...{ className, id, role, variant }}
+      data-globally-prevent-click-outside
     >
       <StyledProgressBar
         barColor={theme.snackBar[variant].backgroundColor}