From a15451dab2e23ad7e707bb4e5cbd79e749aa683a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Mon, 26 May 2025 15:37:46 +0200
Subject: [PATCH] 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
---
 .../components/PageHeaderToggleCommandMenuButton.tsx      | 4 +---
 .../src/input/button/components/AnimatedButton.tsx        | 6 ++++++
 .../src/input/button/components/Button/Button.tsx         | 8 +++++++-
 .../src/utilities/types/ClickOutsideAttributes.ts         | 4 ++++
 4 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 packages/twenty-ui/src/utilities/types/ClickOutsideAttributes.ts

diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
index 2df69e11b..5e0e9d6ad 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
+++ b/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={
-            PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID
-          }
+          dataClickOutsideId={PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID}
           dataTestId="page-header-command-menu-button"
           size={isMobile ? 'medium' : 'small'}
           variant="secondary"
diff --git a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
index 0b97cb3b3..b331ceced 100644
--- a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
+++ b/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}>
diff --git a/packages/twenty-ui/src/input/button/components/Button/Button.tsx b/packages/twenty-ui/src/input/button/components/Button/Button.tsx
index ad08b0d07..8292d413d 100644
--- a/packages/twenty-ui/src/input/button/components/Button/Button.tsx
+++ b/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}
diff --git a/packages/twenty-ui/src/utilities/types/ClickOutsideAttributes.ts b/packages/twenty-ui/src/utilities/types/ClickOutsideAttributes.ts
new file mode 100644
index 000000000..39f538b57
--- /dev/null
+++ b/packages/twenty-ui/src/utilities/types/ClickOutsideAttributes.ts
@@ -0,0 +1,4 @@
+export type ClickOutsideAttributes = {
+  dataClickOutsideId?: string;
+  dataGloballyPreventClickOutside?: boolean;
+};