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={ } - 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 && ( 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, '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; +};