admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Raphaël Bosi
2025-05-22 18:10:51 +02:00
committed by GitHub
parent 45c89a46d6
commit 051f0fc83f
28 changed files with 104 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/.storybook/preview.tsx
View File

@ -7,10 +7,10 @@ import { useDarkMode } from 'storybook-dark-mode';
import { RootDecorator } from '../src/testing/decorators/RootDecorator';
import { mockedUserJWT } from '../src/testing/mock-data/jwt';
import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
import 'react-loading-skeleton/dist/skeleton.css';
import 'twenty-ui/style.css';
import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme';
import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
initialize({
onUnhandledRequest: async (request: Request) => {
@ -48,7 +48,7 @@ const preview: Preview = {
<ThemeProvider theme={theme}>
<ThemeContextProvider theme={theme}>
<ClickOutsideListenerContext.Provider
value={{ excludeClassName: undefined }}
value={{ excludedClickOutsideId: undefined }}
>
<Story />
</ClickOutsideListenerContext.Provider>

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

@ -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}

1
packages/twenty-front/src/modules/action-menu/constants/ActionMenuDropdownClickOutsideId.ts Normal file
View File

@ -0,0 +1 @@
export const ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID = 'action-menu-dropdown';

2
packages/twenty-front/src/modules/app/components/App.tsx
View File

@ -30,7 +30,7 @@ export const App = () => {
<ExceptionHandlerProvider>
<HelmetProvider>
<ClickOutsideListenerContext.Provider
value={{ excludeClassName: undefined }}
value={{ excludedClickOutsideId: undefined }}
>
<AppRouter />
</ClickOutsideListenerContext.Provider>

7
packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx
View File

@ -15,6 +15,7 @@ import { useExecuteTasksOnAnyLocationChange } from '@/app/hooks/useExecuteTasksO
import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
import { isCaptchaRequiredForPath } from '@/captcha/utils/isCaptchaRequiredForPath';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
@ -89,6 +90,12 @@ export const PageChangeEffect = () => {
const { executeTasksOnAnyLocationChange } =
useExecuteTasksOnAnyLocationChange();
const { closeCommandMenu } = useCommandMenu();
useEffect(() => {
closeCommandMenu();
}, [location.pathname, closeCommandMenu]);
useEffect(() => {
if (!previousLocation || previousLocation !== location.pathname) {
setPreviousLocation(location.pathname);

6
packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx
View File

@ -1,8 +1,10 @@
import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants';
import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useTheme } from '@emotion/react';
@ -62,14 +64,14 @@ export const CommandMenuOpenContainer = ({
refs: [commandMenuRef],
callback: handleClickOutside,
listenerId: 'COMMAND_MENU_LISTENER_ID',
excludeClassNames: ['page-header-command-menu-button'],
excludedClickOutsideIds: [PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID],
});
return (
<StyledCommandMenu
data-testid="command-menu"
data-click-outside-id={COMMAND_MENU_CLICK_OUTSIDE_ID}
ref={commandMenuRef}
className="command-menu"
animate={targetVariantForAnimation}
initial="closed"
exit="closed"

1
packages/twenty-front/src/modules/command-menu/constants/CommandMenuClickOutsideId.ts Normal file
View File

@ -0,0 +1 @@
export const COMMAND_MENU_CLICK_OUTSIDE_ID = 'command-menu';

18
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
View File

@ -3,7 +3,9 @@ import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atla
import { useContext, useRef } from 'react';
import { useRecoilCallback } from 'recoil';
import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
import { RecordBoardHeader } from '@/object-record/record-board/components/RecordBoardHeader';
import { RecordBoardScrollToFocusedCardEffect } from '@/object-record/record-board/components/RecordBoardScrollToFocusedCardEffect';
import { RecordBoardStickyHeaderEffect } from '@/object-record/record-board/components/RecordBoardStickyHeaderEffect';
@ -13,6 +15,7 @@ import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/use
import { useFocusedRecordBoardCard } from '@/object-record/record-board/hooks/useFocusedRecordBoardCard';
import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection';
import { RecordBoardDeactivateBoardCardEffect } from '@/object-record/record-board/record-board-card/components/RecordBoardDeactivateBoardCardEffect';
import { RECORD_BOARD_CARD_CLICK_OUTSIDE_ID } from '@/object-record/record-board/record-board-card/constants/RecordBoardCardClickOutsideId';
import { RecordBoardColumn } from '@/object-record/record-board/record-board-column/components/RecordBoardColumn';
import { RecordBoardScope } from '@/object-record/record-board/scopes/RecordBoardScope';
import { RecordBoardComponentInstanceContext } from '@/object-record/record-board/states/contexts/RecordBoardComponentInstanceContext';
@ -24,7 +27,9 @@ import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@ -104,13 +109,12 @@ export const RecordBoard = () => {
);
useListenClickOutside({
excludeClassNames: [
'bottom-bar',
'action-menu-dropdown',
'command-menu',
'modal-backdrop',
'page-action-container',
'record-board-card',
excludedClickOutsideIds: [
ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
COMMAND_MENU_CLICK_OUTSIDE_ID,
MODAL_BACKDROP_CLICK_OUTSIDE_ID,
PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID,
RECORD_BOARD_CARD_CLICK_OUTSIDE_ID,
],
listenerId: RECORD_BOARD_CLICK_OUTSIDE_LISTENER_ID,
refs: [],

3
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
View File

@ -13,6 +13,7 @@ import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDro
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { RecordBoardCardBody } from '@/object-record/record-board/record-board-card/components/RecordBoardCardBody';
import { RecordBoardCardHeader } from '@/object-record/record-board/record-board-card/components/RecordBoardCardHeader';
import { RECORD_BOARD_CARD_CLICK_OUTSIDE_ID } from '@/object-record/record-board/record-board-card/constants/RecordBoardCardClickOutsideId';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
import { AppPath } from '@/types/AppPath';
@ -197,7 +198,7 @@ export const RecordBoardCard = () => {
return (
<StyledBoardCardWrapper
className="record-board-card"
data-click-outside-id={RECORD_BOARD_CARD_CLICK_OUTSIDE_ID}
onContextMenu={handleActionMenuDropdown}
>
<InView>

1
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardDraggableContainer.tsx
View File

@ -50,7 +50,6 @@ export const RecordBoardCardDraggableContainer = ({
{...draggableProvided?.dragHandleProps}
// eslint-disable-next-line react/jsx-props-no-spreading
{...draggableProvided?.draggableProps}
className="record-board-card"
data-selectable-id={recordId}
data-select-disable
>

1
packages/twenty-front/src/modules/object-record/record-board/record-board-card/constants/RecordBoardCardClickOutsideId.ts Normal file
View File

@ -0,0 +1 @@
export const RECORD_BOARD_CARD_CLICK_OUTSIDE_ID = 'record-board-card';

15
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx
View File

@ -1,8 +1,12 @@
import { ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/action-menu/constants/ActionMenuDropdownClickOutsideId';
import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId';
import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@ -23,12 +27,11 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
const setHotkeyScope = useSetHotkeyScope();
useListenClickOutside({
excludeClassNames: [
'bottom-bar',
'action-menu-dropdown',
'command-menu',
'modal-backdrop',
'page-action-container',
excludedClickOutsideIds: [
ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
COMMAND_MENU_CLICK_OUTSIDE_ID,
PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID,
MODAL_BACKDROP_CLICK_OUTSIDE_ID,
],
listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
refs: [tableBodyRef],

2
packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx
View File

@ -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}

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

@ -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)}
/>

1
packages/twenty-front/src/modules/ui/feedback/dialog-manager/constants/DialogClickOutsideId.ts Normal file
View File

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

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

@ -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}

38
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx
View File

@ -79,7 +79,6 @@ export const DropdownContent = ({
useListenClickOutside({
refs: [floatingUiRefs.floating, floatingUiRefs.domReference],
listenerId: dropdownId,
excludeClassNames: ['confirmation-modal'],
callback: (event) => {
if (activeDropdownFocusId !== dropdownId) return;
@ -118,7 +117,7 @@ export const DropdownContent = ({
maxWidth: dropdownMaxWidth,
};
const { excludeClassName } = useContext(ClickOutsideListenerContext);
const { excludedClickOutsideId } = useContext(ClickOutsideListenerContext);
return (
<>
@ -127,24 +126,23 @@ export const DropdownContent = ({
)}
<FloatingPortal>
<div className={excludeClassName}>
<StyledDropdownContentContainer
ref={floatingUiRefs.setFloating}
style={dropdownMenuStyles}
role="listbox"
id={`${dropdownId}-options`}
>
<OverlayContainer>
<DropdownMenu
id={dropdownId}
width={dropdownWidth}
data-select-disable
>
{dropdownComponents}
</DropdownMenu>
</OverlayContainer>
</StyledDropdownContentContainer>
</div>
<StyledDropdownContentContainer
ref={floatingUiRefs.setFloating}
style={dropdownMenuStyles}
role="listbox"
id={`${dropdownId}-options`}
data-click-outside-id={excludedClickOutsideId}
>
<OverlayContainer>
<DropdownMenu
id={dropdownId}
width={dropdownWidth}
data-select-disable
>
{dropdownComponents}
</DropdownMenu>
</OverlayContainer>
</StyledDropdownContentContainer>
</FloatingPortal>
</>
);

2
packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
View File

@ -119,7 +119,7 @@ export const ConfirmationModal = ({
isClosable={true}
padding="large"
modalVariant={modalVariant}
className="confirmation-modal"
data-globally-prevent-click-outside
>
<StyledCenteredTitle>
<H1Title title={title} fontColor={H1TitleFontColor.Primary} />

8
packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
View File

@ -4,7 +4,8 @@ import { ModalHotkeyScope } from '@/ui/layout/modal/components/types/ModalHotkey
import { ModalComponentInstanceContext } from '@/ui/layout/modal/contexts/ModalComponentInstanceContext';
import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME } from '@/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName';
import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId';
import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID } from '@/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -229,8 +230,7 @@ export const Modal = ({
>
<ClickOutsideListenerContext.Provider
value={{
excludeClassName:
MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME,
excludedClickOutsideId: MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID,
}}
>
<ModalHotkeysAndClickOutsideEffect
@ -242,7 +242,7 @@ export const Modal = ({
/>
<StyledBackDrop
data-testid="modal-backdrop"
className="modal-backdrop"
data-click-outside-id={MODAL_BACKDROP_CLICK_OUTSIDE_ID}
onMouseDown={stopEventPropagation}
modalVariant={modalVariant}
>

9
packages/twenty-front/src/modules/ui/layout/modal/components/ModalHotkeysAndClickOutsideEffect.tsx
View File

@ -1,5 +1,6 @@
import { DIALOG_CLICK_OUTSIDE_ID } from '@/ui/feedback/dialog-manager/constants/DialogClickOutsideId';
import { ModalHotkeyScope } from '@/ui/layout/modal/components/types/ModalHotkeyScope';
import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME } from '@/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName';
import { MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID } from '@/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { Key } from 'ts-key-enum';
@ -45,9 +46,9 @@ export const ModalHotkeysAndClickOutsideEffect = ({
useListenClickOutside({
refs: [modalRef],
excludeClassNames: [
MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME,
'dialog-manager-dialog',
excludedClickOutsideIds: [
MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID,
DIALOG_CLICK_OUTSIDE_ID,
],
listenerId: `MODAL_CLICK_OUTSIDE_LISTENER_ID_${modalId}`,
callback: () => {

1
packages/twenty-front/src/modules/ui/layout/modal/constants/ModalBackdropClickOutsideId.ts Normal file
View File

@ -0,0 +1 @@
export const MODAL_BACKDROP_CLICK_OUTSIDE_ID = 'modal-backdrop';

2
packages/twenty-front/src/modules/ui/layout/modal/constants/ModalClickOutsideListenerExcludedClassName.ts
View File

@ -1,2 +1,2 @@
export const MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_CLASS_NAME =
export const MODAL_CLICK_OUTSIDE_LISTENER_EXCLUDED_ID =
'modal-click-outside-listener-excluded';

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

@ -1,6 +1,7 @@
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { i18n } from '@lingui/core';
@ -124,7 +125,9 @@ export const PageHeaderToggleCommandMenuButton = () => {
animatedSvg={
<AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />
}
className="page-header-command-menu-button"
data-click-outside-id={
PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID
}
dataTestId="page-header-command-menu-button"
size={isMobile ? 'medium' : 'small'}
variant="secondary"

2
packages/twenty-front/src/modules/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId.ts Normal file
View File

@ -0,0 +1,2 @@
export const PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID =
'page-header-command-menu-button';

5
packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
View File

@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil';
import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import {
@ -144,7 +145,9 @@ export const PageHeader = ({
</StyledTopBarIconStyledTitleContainer>
</StyledLeftContainer>
<StyledPageActionContainer className="page-action-container">
<StyledPageActionContainer
data-click-outside-id={PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID}
>
{children}
</StyledPageActionContainer>
</StyledTopBarContainer>

1
packages/twenty-front/src/modules/ui/layout/page/constants/PageActionContainerClickOutsideId.ts Normal file
View File

@ -0,0 +1 @@
export const PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID = 'page-action-container';

4
packages/twenty-front/src/modules/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext.tsx
View File

@ -1,10 +1,10 @@
import { createContext } from 'react';
type ClickOutsideListenerContextType = {
excludeClassName: string | undefined;
excludedClickOutsideId: string | undefined;
};
export const ClickOutsideListenerContext =
createContext<ClickOutsideListenerContextType>({
excludeClassName: undefined,
excludedClickOutsideId: undefined,
});

21
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts
View File

@ -4,12 +4,13 @@ import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilit
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import React, { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
const CLICK_OUTSIDE_DEBUG_MODE = false;
export type ClickOutsideListenerProps<T extends Element> = {
refs: Array<React.RefObject<T>>;
excludeClassNames?: string[];
excludedClickOutsideIds?: string[];
callback: (event: MouseEvent | TouchEvent) => void;
listenerId: string;
enabled?: boolean;
@ -17,7 +18,7 @@ export type ClickOutsideListenerProps<T extends Element> = {
export const useListenClickOutside = <T extends Element>({
refs,
excludeClassNames,
excludedClickOutsideIds,
callback,
listenerId,
enabled = true,
@ -90,12 +91,18 @@ export const useListenClickOutside = <T extends Element>({
let currentElement: HTMLElement | null = clickedElement;
while (currentElement) {
const currentClassList = currentElement.classList;
const currentDataAttributes = currentElement.dataset;
const isGloballyExcluded =
currentDataAttributes?.globallyPreventClickOutside === 'true';
const clickOutsideId = currentDataAttributes?.clickOutsideId;
isClickedOnExcluded =
excludeClassNames?.some((className) =>
currentClassList.contains(className),
) ?? false;
isGloballyExcluded ||
(isDefined(clickOutsideId) &&
isDefined(excludedClickOutsideIds) &&
excludedClickOutsideIds.includes(clickOutsideId));
if (isClickedOnExcluded) {
break;
@ -140,7 +147,7 @@ export const useListenClickOutside = <T extends Element>({
clickOutsideListenerIsMouseDownInsideState,
clickOutsideListenerMouseDownHappenedState,
refs,
excludeClassNames,
excludedClickOutsideIds,
callback,
listenerId,
],