Fix close command menu button (#12282)

Fixes #12280 

The `dataClickOutsideId` and `dataGloballyPreventClickOutside` props
weren't passed to the button components.

This PR fixes this and introduces the type `ClickOutsideAttributes`.



https://github.com/user-attachments/assets/38b1a6f9-8f3a-43d2-aa7b-aaa259ac6737

packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx

@@ -125,9 +125,7 @@ export const PageHeaderToggleCommandMenuButton = () => {
           animatedSvg={
             <AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />
           }
-          data-click-outside-id={
+          dataClickOutsideId={PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID}
-            PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID
-          }
           dataTestId="page-header-command-menu-button"
           size={isMobile ? 'medium' : 'small'}
           variant="secondary"

packages/twenty-ui/src/input/button/components/AnimatedButton.tsx

@@ -31,6 +31,8 @@ const StyledButton = styled.button<
     | 'justify'
     | 'to'
     | 'target'
+    | 'dataClickOutsideId'
+    | 'dataGloballyPreventClickOutside'
   >
 >`
   align-items: center;
@@ -404,6 +406,8 @@ export const AnimatedButton = ({
   ariaLabel,
   animate,
   transition,
+  dataClickOutsideId,
+  dataGloballyPreventClickOutside,
 }: AnimatedButtonProps) => {
   const theme = useTheme();
   const isMobile = useIsMobile();
@@ -428,6 +432,8 @@ export const AnimatedButton = ({
       target={target}
       data-testid={dataTestId}
       aria-label={ariaLabel}
+      data-click-outside-id={dataClickOutsideId}
+      data-globally-prevent-click-outside={dataGloballyPreventClickOutside}
     >
       {Icon && (
         <StyledIconContainer animate={animate} transition={transition}>

packages/twenty-ui/src/input/button/components/Button/Button.tsx

@@ -6,6 +6,7 @@ import { ButtonHotkeys } from '@ui/input/button/components/Button/internal/Butto
 import { ButtonIcon } from '@ui/input/button/components/Button/internal/ButtonIcon';
 import { ButtonSoon } from '@ui/input/button/components/Button/internal/ButtonSoon';
 import { useIsMobile } from '@ui/utilities';
+import { ClickOutsideAttributes } from '@ui/utilities/types/ClickOutsideAttributes';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
@@ -37,7 +38,8 @@ export type ButtonProps = {
   hotkeys?: string[];
   ariaLabel?: string;
   isLoading?: boolean;
-} & React.ComponentProps<'button'>;
+} & Pick<React.ComponentProps<'button'>, 'type'> &
+  ClickOutsideAttributes;
 
 const StyledButton = styled('button', {
   shouldForwardProp: (prop) =>
@@ -434,6 +436,8 @@ export const Button = ({
   to,
   target,
   dataTestId,
+  dataClickOutsideId,
+  dataGloballyPreventClickOutside,
   hotkeys,
   ariaLabel,
   type,
@@ -467,6 +471,8 @@ export const Button = ({
         as={to ? Link : 'button'}
         target={target}
         data-testid={dataTestId}
+        data-click-outside-id={dataClickOutsideId}
+        data-globally-prevent-click-outside={dataGloballyPreventClickOutside}
         aria-label={ariaLabel}
         type={type}
         isLoading={isLoading}

packages/twenty-ui/src/utilities/types/ClickOutsideAttributes.ts

@@ -0,0 +1,4 @@
+export type ClickOutsideAttributes = {
+  dataClickOutsideId?: string;
+  dataGloballyPreventClickOutside?: boolean;
+};