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

Replaced useDropdown calls by useCloseDropdown, useOpenDropdown and useToggleDropdown (#12958)

Browse Source 
This PR replaces the many calls of useDropdown by the new standalone
hooks : useCloseDropdown, useOpenDropdown and useToggleDropdown.

This will allow to remove useDropdown and then the dropdown recoil
component state v1.

A big round of QA has been made, with some bugs caught along the way.

Closes https://github.com/twentyhq/core-team-issues/issues/1155
Closes https://github.com/twentyhq/core-team-issues/issues/618

## QA

Component|Status|Comment
|---|---|---|
CurrentWorkspaceMemberFavorites|Ok|
FavoriteFolderPickerFooter|Ok|
AdvancedFilterAddFilterRuleSelect|Ok|
AdvancedFilterRecordFilterGroupOptionsDropdown|Ok|
AdvancedFilterRecordFilterOperandSelectContent|Ok|
AdvancedFilterRecordFilterOptionsDropdown|Ok|
useAdvancedFilterFieldSelectDropdown|Ok|
ObjectFilterDropdownBooleanSelect|Ok|
ObjectFilterDropdownOptionSelect|Ok|
ObjectOptionsDropdown|Ok|
ObjectOptionsDropdownLayoutContent|Ok|
ObjectSortDropdownButton|Ok|
useCloseSortDropdown|Ok|
FormDateTimeFieldInput|Ok|Bug detected, cannot select a month or a year,
see issue https://github.com/twentyhq/twenty/issues/12922
FormSingleRecordPicker|Ok|
MultiItemFieldMenuItem|Ok|
RecordDetailRelationRecordsListItem|Ok|
RecordDetailRelationSection|Ok|
RecordDetailRelationSectionDropdownToMany|Ok|
RecordDetailRelationSectionDropdownToOne|Ok|
RecordTableColumnAggregateFooterDropdownSubmenuContent|Ok|
RecordTableColumnAggregateFooterAggregateOperationMenuItems|Ok|
RecordTableColumnAggregateFooterMenuContent|Ok|
RecordTableColumnAggregateFooterValueCell|Ok|
RecordTableColumnHeadDropdownMenu|Ok|
RecordTableHeaderPlusButtonContent|Ok|
useTriggerActionMenuDropdown|Ok|
MultipleSelectDropdown|Ok|
RecordBoardColumnHeaderAggregateDropdownButton|Ok|
SettingsDataModelFieldSelectFormOptionRow|Ok|
SettingsDataModelNewFieldBreadcrumbDropDown|Ok|
SettingsObjectFieldActiveActionDropdown|Ok|
SettingsObjectFieldInactiveActionDropdown|Ok|
SettingsObjectInactiveMenuDropDown|Ok|
SettingsSecurityApprovedAccessDomainRowDropdownMenu|Couldn’t test|
SettingsSecuritySSORowDropdownMenu|Couldn’t test|
SettingsAccountsRowDropdownMenu|Ok|
SettingsRoleAssignment|Ok|
SettingsServerlessFunctionTabEnvironmentVariableTableRow|Couldn’t test|
MatchColumnToFieldSelect|Ok|
SubMatchingSelectDropdownButton|Ok|Removed conflicting duplicate open
dropdown
SubMatchingSelectRowRightDropdown|Ok|
CurrencyPickerDropdownButton|Ok|
IconPicker|Ok|
DateTimePicker|Ok|
PhoneCountryPickerDropdownButton|OK|
Select|Ok|
Dropdown|Ok|Not QAing all dropdowns in the app because the ones of this
QA are enough to show up that Dropdown is behaving correctly on a lot of
use cases
DropdownMenuInnerSelect|Ok|
TabList|Ok|Removed onClickOutside called in dropdown clickable
component, validated with Raph who recently worked on this
DateInput|Ok|
MultiWorkspaceDropdownDefaultComponents|Ok|
AdvancedFilterChip|Ok|
EditableFilterDropdownButton|Ok|
UpdateViewButtonGroup|Ok|
ViewBarDetailsAddFilterButton|Ok|
ViewBarFilterButton|Ok|
ViewBarFilterDropdown|Ok|
ViewBarFilterDropdownAdvancedFilterButton|Ok|
ViewPickerDropdown|Ok|
ViewPickerListContent|Ok|
ViewPickerOptionDropdown|Ok|
WorkflowEditTriggerDatabaseEventForm|Ok|
WorkflowVariablesDropdownWorkflowStepItems|Ok|
AttachmentDropdown|Ok|
SupportDropdown|Ok|

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2025-07-02 18:38:45 +02:00
committed by GitHub
parent a19a73a977
commit a7b9a0710e
70 changed files with 352 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
View File

@ -2,7 +2,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import {
IconDotsVertical,
IconDownload,
@ -27,21 +27,21 @@ export const AttachmentDropdown = ({
}: AttachmentDropdownProps) => {
const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const handleDownload = () => {
onDownload();
closeDropdown();
closeDropdown(dropdownId);
};
const handleDelete = () => {
onDelete();
closeDropdown();
closeDropdown(dropdownId);
};
const handleRename = () => {
onRename();
closeDropdown();
closeDropdown(dropdownId);
};
return (

28
packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
View File

@ -10,7 +10,8 @@ import { openFavoriteFolderIdsState } from '@/favorites/states/openFavoriteFolde
import { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatchingFavorite';
import { ProcessedFavorite } from '@/favorites/utils/sortFavorites';
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
@ -28,6 +29,7 @@ import { useRecoilState } from 'recoil';
import { IconFolder, IconFolderOpen, IconHeartOff } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { AnimatedExpandableContainer } from 'twenty-ui/layout';
type CurrentWorkspaceMemberFavoritesProps = {
folder: {
folderId: string;
@ -68,10 +70,16 @@ export const CurrentWorkspaceMemberFavorites = ({
const { renameFavoriteFolder } = useRenameFavoriteFolder();
const { deleteFavoriteFolder } = useDeleteFavoriteFolder();
const {
closeDropdown: closeFavoriteFolderEditDropdown,
isDropdownOpen: isFavoriteFolderEditDropdownOpen,
} = useDropdown(`favorite-folder-edit-${folder.folderId}`);
const dropdownId = `favorite-folder-edit-${folder.folderId}`;
const isDropdownOpenComponent = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
dropdownId,
);
const { closeDropdown } = useCloseDropdown();
const selectedFavoriteIndex = folder.favorites.findIndex((favorite) =>
isLocationMatchingFavorite(currentPath, currentViewPath, favorite),
);
@ -110,10 +118,10 @@ export const CurrentWorkspaceMemberFavorites = ({
const handleFavoriteFolderDelete = async () => {
if (folder.favorites.length > 0) {
openModal(modalId);
closeFavoriteFolderEditDropdown();
closeDropdown(dropdownId);
} else {
await deleteFavoriteFolder(folder.folderId);
closeFavoriteFolderEditDropdown();
closeDropdown(dropdownId);
}
};
@ -126,7 +134,9 @@ export const CurrentWorkspaceMemberFavorites = ({
folderId={folder.folderId}
onRename={() => setIsFavoriteFolderRenaming(true)}
onDelete={handleFavoriteFolderDelete}
closeDropdown={closeFavoriteFolderEditDropdown}
closeDropdown={() => {
closeDropdown(dropdownId);
}}
/>
);
@ -159,7 +169,7 @@ export const CurrentWorkspaceMemberFavorites = ({
onClick={handleToggle}
rightOptions={rightOptions}
className="navigation-drawer-item"
isRightOptionsDropdownOpen={isFavoriteFolderEditDropdownOpen}
isRightOptionsDropdownOpen={isDropdownOpenComponent}
triggerEvent="CLICK"
/>
</FavoritesDroppable>

6
packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx
View File

@ -1,6 +1,6 @@
import { isFavoriteFolderCreatingState } from '@/favorites/states/isFavoriteFolderCreatingState';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useTheme } from '@emotion/react';
@ -21,7 +21,7 @@ export const FavoriteFolderPickerFooter = ({
);
const { openNavigationSection } = useNavigationSection('Favorites');
const theme = useTheme();
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
return (
<DropdownMenuItemsContainer scrollable={false}>
@ -31,7 +31,7 @@ export const FavoriteFolderPickerFooter = ({
setIsNavigationDrawerExpanded(true);
openNavigationSection();
setIsFavoriteFolderCreating(true);
closeDropdown();
closeDropdown(dropdownId);
}}
text="Add folder"
LeftIcon={() => <IconPlus size={theme.icon.size.md} />}

8
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx
View File

@ -14,7 +14,7 @@ import { getRecordFilterOperands } from '@/object-record/record-filter/utils/get
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { isDefined } from 'twenty-shared/utils';
import { IconLibraryPlus, IconPlus } from 'twenty-ui/display';
@ -44,7 +44,7 @@ export const AdvancedFilterAddFilterRuleSelect = ({
const newPositionInRecordFilterGroup = lastChildPosition + 1;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const { defaultFieldMetadataItemForFilter } =
useDefaultFieldMetadataItemForFilter();
@ -57,7 +57,7 @@ export const AdvancedFilterAddFilterRuleSelect = ({
throw new Error('Missing default field metadata item for filter');
}
closeDropdown();
closeDropdown(dropdownId);
const filterType = getFilterTypeFromFieldType(
defaultFieldMetadataItemForFilter.type,
@ -87,7 +87,7 @@ export const AdvancedFilterAddFilterRuleSelect = ({
};
const handleAddFilterGroup = () => {
closeDropdown();
closeDropdown(dropdownId);
if (!isDefined(defaultFieldMetadataItemForFilter)) {
throw new Error('Missing default field metadata item for filter');

6
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx
View File

@ -6,7 +6,7 @@ import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRe
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
import { IconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
@ -20,7 +20,7 @@ export const AdvancedFilterRecordFilterGroupOptionsDropdown = ({
}: AdvancedFilterRecordFilterGroupOptionsDropdownProps) => {
const dropdownId = `advanced-filter-record-filter-group-options-${recordFilterGroupId}`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const { removeRecordFilter } = useRemoveRecordFilter();
const { removeRecordFilterGroup } = useRemoveRecordFilterGroup();
@ -40,7 +40,7 @@ export const AdvancedFilterRecordFilterGroupOptionsDropdown = ({
removeRootRecordFilterGroupIfEmpty();
closeDropdown();
closeDropdown(dropdownId);
};
return (

6
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelectContent.tsx
View File

@ -10,7 +10,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@ -31,13 +31,13 @@ export const AdvancedFilterRecordFilterOperandSelectContent = ({
}: AdvancedFilterRecordFilterOperandSelectContentProps) => {
const dropdownId = `advanced-filter-view-filter-operand-${recordFilterId}`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const { applyObjectFilterDropdownOperand } =
useApplyObjectFilterDropdownOperand();
const handleOperandChange = (operand: ViewFilterOperand) => {
closeDropdown();
closeDropdown(dropdownId);
applyObjectFilterDropdownOperand(operand);
};

6
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx
View File

@ -9,7 +9,7 @@ import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advance
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isDefined } from 'twenty-shared/utils';
import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
@ -25,7 +25,7 @@ export const AdvancedFilterRecordFilterOptionsDropdown = ({
}: AdvancedFilterRecordFilterOptionsDropdownProps) => {
const dropdownId = `advanced-filter-record-filter-options-${recordFilterId}`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const { removeRecordFilter } = useRemoveRecordFilter();
const { removeRecordFilterGroup } = useRemoveRecordFilterGroup();
@ -47,7 +47,7 @@ export const AdvancedFilterRecordFilterOptionsDropdown = ({
useRemoveRootRecordFilterGroupIfEmpty();
const handleRemove = async () => {
closeDropdown();
closeDropdown(dropdownId);
if (isDefined(currentRecordFilter?.recordFilterGroupId)) {
const isOnlyViewFilterInGroup =

10
packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useAdvancedFilterFieldSelectDropdown.ts
View File

@ -1,11 +1,13 @@
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
export const useAdvancedFilterFieldSelectDropdown = (viewFilterId?: string) => {
const advancedFilterFieldSelectDropdownId = `advanced-filter-view-filter-field-${viewFilterId}`;
const { closeDropdown: closeAdvancedFilterFieldSelectDropdown } = useDropdown(
advancedFilterFieldSelectDropdownId,
);
const { closeDropdown } = useCloseDropdown();
const closeAdvancedFilterFieldSelectDropdown = () => {
closeDropdown(advancedFilterFieldSelectDropdownId);
};
return {
closeAdvancedFilterFieldSelectDropdown,

4
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
View File

@ -8,7 +8,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { IconCheck } from 'twenty-ui/display';
@ -41,7 +41,7 @@ export const ObjectFilterDropdownBooleanSelect = () => {
const { applyObjectFilterDropdownFilterValue } =
useApplyObjectFilterDropdownFilterValue();
const { closeDropdown } = useDropdown();
const { closeDropdown } = useCloseDropdown();
const handleOptionSelect = (newValue: boolean) => {
applyObjectFilterDropdownFilterValue(

53
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx
View File

@ -1,53 +0,0 @@
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { ObjectFilterDropdownOperandSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect';
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconChevronDown } from 'twenty-ui/display';
import { getOperandLabel } from '../utils/getOperandLabel';
const StyledDropdownMenuHeader = styled(DropdownMenuHeader)`
cursor: pointer;
`;
export const OPERAND_DROPDOWN_CLICK_OUTSIDE_ID =
'object-filter-dropdown-operand-dropdown-click-outside-id';
export const ObjectFilterDropdownOperandDropdown = ({
filterDropdownId,
}: {
filterDropdownId?: string;
}) => {
const selectedOperandInDropdown = useRecoilComponentValueV2(
selectedOperandInDropdownComponentState,
);
const theme = useTheme();
const dropdownId = `${filterDropdownId}-operand-dropdown`;
return (
<ClickOutsideListenerContext.Provider
value={{ excludedClickOutsideId: OPERAND_DROPDOWN_CLICK_OUTSIDE_ID }}
>
<Dropdown
dropdownId={dropdownId}
clickableComponent={
<StyledDropdownMenuHeader
key={'selected-filter-operand'}
EndComponent={<IconChevronDown />}
>
{getOperandLabel(selectedOperandInDropdown)}
</StyledDropdownMenuHeader>
}
dropdownComponents={<ObjectFilterDropdownOperandSelect />}
dropdownOffset={{ x: parseInt(theme.spacing(2), 10) }}
/>
</ClickOutsideListenerContext.Provider>
);
};

65
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx
View File

@ -1,65 +0,0 @@
import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { useApplyObjectFilterDropdownOperand } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand';
import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared/utils';
import { MenuItem } from 'twenty-ui/navigation';
import { getOperandLabel } from '../utils/getOperandLabel';
const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
background-color: ${({ theme }) => theme.background.primary};
border-radius: ${({ theme }) => theme.border.radius.md};
`;
export const ObjectFilterDropdownOperandSelect = () => {
const fieldMetadataItemUsedInDropdown = useRecoilComponentValueV2(
fieldMetadataItemUsedInDropdownComponentSelector,
);
const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
subFieldNameUsedInDropdownComponentState,
);
const { applyObjectFilterDropdownOperand } =
useApplyObjectFilterDropdownOperand();
const { closeDropdown } = useDropdown();
const operandsForFilterType = isDefined(fieldMetadataItemUsedInDropdown)
? getRecordFilterOperands({
filterType: getFilterTypeFromFieldType(
fieldMetadataItemUsedInDropdown.type,
),
subFieldName: subFieldNameUsedInDropdown,
})
: [];
const handleOperandChange = (newOperand: ViewFilterOperand) => {
applyObjectFilterDropdownOperand(newOperand);
};
return (
<DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
<StyledDropdownMenuItemsContainer>
{operandsForFilterType.map((filterOperand, index) => (
<MenuItem
key={`select-filter-operand-${index}`}
onClick={() => {
handleOperandChange(filterOperand);
closeDropdown();
}}
text={getOperandLabel(filterOperand)}
/>
))}
</StyledDropdownMenuItemsContainer>
</DropdownContent>
);
};

4
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx
View File

@ -4,7 +4,6 @@ import { Key } from 'ts-key-enum';
import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
import { useOptionsForSelect } from '@/object-record/object-filter-dropdown/hooks/useOptionsForSelect';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@ -15,6 +14,7 @@ import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-recor
import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@ -64,7 +64,7 @@ export const ObjectFilterDropdownOptionSelect = ({
[objectFilterDropdownCurrentRecordFilter?.value],
);
const { closeDropdown } = useDropdown();
const { closeDropdown } = useCloseDropdown();
const { resetSelectedItem } = useSelectableList(componentInstanceId);

9
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx
View File

@ -9,7 +9,8 @@ import { useRecordGroupReorderConfirmationModal } from '@/object-record/record-g
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { DROPDOWN_OFFSET_Y } from '@/ui/layout/dropdown/constants/DropdownOffsetY';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ViewType } from '@/views/types/ViewType';
import { Trans } from '@lingui/react/macro';
@ -27,7 +28,11 @@ export const ObjectOptionsDropdown = ({
const { currentContentId, handleContentChange, handleResetContent } =
useDropdownContextCurrentContentId<ObjectOptionsContentId>();
const { isDropdownOpen } = useDropdown(OBJECT_OPTIONS_DROPDOWN_ID);
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
OBJECT_OPTIONS_DROPDOWN_ID,
);
const {
handleRecordGroupOrderChangeWithModal,
handleRecordGroupReorderConfirmClick,

6
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx
View File

@ -10,7 +10,7 @@ import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@ -62,7 +62,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
const { availableFieldsForKanban, navigateToSelectSettings } =
useGetAvailableFieldsForKanban();
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const handleSelectKanbanViewType = async () => {
if (isDefaultView) {
@ -70,7 +70,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
}
if (availableFieldsForKanban.length === 0) {
navigateToSelectSettings();
closeDropdown();
closeDropdown(dropdownId);
}
if (currentView?.type !== ViewType.Kanban) {
await setAndPersistViewType(ViewType.Kanban);

7
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -26,7 +26,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@ -194,7 +194,10 @@ export const ObjectSortDropdownButton = () => {
setIsRecordSortDirectionMenuUnfolded(false);
};
const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
OBJECT_SORT_DROPDOWN_ID,
);
const { t } = useLingui();

6
packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useCloseSortDropdown.ts
View File

@ -1,14 +1,14 @@
import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
import { useResetSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useResetSortDropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
export const useCloseSortDropdown = () => {
const { resetSortDropdown } = useResetSortDropdown();
const { closeDropdown } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
const { closeDropdown } = useCloseDropdown();
const closeSortDropdown = () => {
closeDropdown();
closeDropdown(OBJECT_SORT_DROPDOWN_ID);
resetSortDropdown();
};

18
packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useToggleSortDropdown.ts
View File

@ -1,18 +0,0 @@
import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
import { useResetSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useResetSortDropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
export const useToggleSortDropdown = () => {
const { toggleDropdown } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
const { resetSortDropdown } = useResetSortDropdown();
const toggleSortDropdown = () => {
toggleDropdown();
resetSortDropdown();
};
return {
toggleSortDropdown,
};
};

10
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx
View File

@ -1,8 +1,9 @@
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import { AppTooltip, TooltipDelay } from 'twenty-ui/display';
import { Tag } from 'twenty-ui/components';
import { AppTooltip, TooltipDelay } from 'twenty-ui/display';
const StyledTag = styled(Tag)`
width: 100%;
@ -21,7 +22,10 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
value?: string | number;
tooltip?: string;
}) => {
const { isDropdownOpen } = useDropdown(dropdownId);
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
dropdownId,
);
return (
<StyledHeader id={dropdownId} isUnfolded={isDropdownOpen}>

14
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
View File

@ -12,7 +12,7 @@ import {
import { MAX_DATE } from '@/ui/input/components/internal/date/constants/MaxDate';
import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate';
import { useDateParser } from '@/ui/input/components/internal/hooks/useDateParser';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
@ -129,12 +129,8 @@ export const FormDateTimeFieldInput = ({
}
};
const { closeDropdown: closeDropdownMonthSelect } = useDropdown(
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
);
const { closeDropdown: closeDropdownYearSelect } = useDropdown(
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
);
const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();
const displayDatePicker =
draftValue.type === 'static' && draftValue.mode === 'edit';
@ -148,8 +144,8 @@ export const FormDateTimeFieldInput = ({
callback: (event) => {
event.stopImmediatePropagation();
closeDropdownYearSelect();
closeDropdownMonthSelect();
closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
handlePickerClickOutside();
},
enabled: displayDatePicker,

8
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx
View File

@ -11,7 +11,7 @@ import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-r
import { InputLabel } from '@/ui/input/components/InputLabel';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import { css, useTheme } from '@emotion/react';
@ -103,7 +103,7 @@ export const FormSingleRecordPicker = ({
const dropdownId = `form-record-picker-${componentId}`;
const variablesDropdownId = `form-record-picker-${componentId}-variables`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const setRecordPickerSearchFilter = useSetRecoilComponentStateV2(
singleRecordPickerSearchFilterComponentState,
@ -118,7 +118,7 @@ export const FormSingleRecordPicker = ({
selectedEntity: SingleRecordPickerRecord | null | undefined,
) => {
onChange?.(selectedEntity?.record?.id ?? '');
closeDropdown();
closeDropdown(dropdownId);
};
const handleVariableTagInsert = (variable: string) => {
@ -193,7 +193,7 @@ export const FormSingleRecordPicker = ({
componentInstanceId={dropdownId}
EmptyIcon={IconForbid}
emptyLabel={'No ' + objectNameSingular}
onCancel={() => closeDropdown()}
onCancel={() => closeDropdown(dropdownId)}
onRecordSelected={handleRecordSelected}
objectNameSingular={objectNameSingular}
recordPickerInstanceId={dropdownId}

16
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx
View File

@ -1,7 +1,9 @@
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import React, { useState } from 'react';
import {
IconBookmark,
@ -33,7 +35,11 @@ export const MultiItemFieldMenuItem = <T,>({
showSetAsPrimaryButton,
}: MultiItemFieldMenuItemProps<T>) => {
const [isHovered, setIsHovered] = useState(false);
const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
dropdownId,
);
const handleMouseEnter = () => setIsHovered(true);
const handleMouseLeave = () => {
@ -44,7 +50,7 @@ export const MultiItemFieldMenuItem = <T,>({
event.stopPropagation();
event.preventDefault();
closeDropdown();
closeDropdown(dropdownId);
setIsHovered(false);
onDelete?.();
};
@ -53,7 +59,7 @@ export const MultiItemFieldMenuItem = <T,>({
event.stopPropagation();
event.preventDefault();
closeDropdown();
closeDropdown(dropdownId);
onSetAsPrimary?.();
};
@ -61,7 +67,7 @@ export const MultiItemFieldMenuItem = <T,>({
event.stopPropagation();
event.preventDefault();
closeDropdown();
closeDropdown(dropdownId);
onEdit?.();
};

14
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
View File

@ -34,10 +34,12 @@ import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { createPortal } from 'react-dom';
import {
@ -159,7 +161,11 @@ export const RecordDetailRelationRecordsListItem = ({
const dropdownScopeId = `record-field-card-menu-${relationFieldMetadataId}-${relationRecord.id}`;
const { closeDropdown, isDropdownOpen } = useDropdown(dropdownScopeId);
const { closeDropdown } = useCloseDropdown();
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
dropdownScopeId,
);
const dropdownId = getRecordFieldCardRelationPickerDropdownId({
fieldDefinition,
@ -171,7 +177,7 @@ export const RecordDetailRelationRecordsListItem = ({
);
const handleDetach = () => {
closeDropdown();
closeDropdown(dropdownScopeId);
const relationFieldMetadataItem = relationObjectMetadataItem.fields.find(
({ id }) => id === relationFieldMetadataId,
@ -196,7 +202,7 @@ export const RecordDetailRelationRecordsListItem = ({
};
const handleDelete = async () => {
closeDropdown();
closeDropdown(dropdownScopeId);
openModal(getDeleteRelationModalId(relationRecord.id));
};

8
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
View File

@ -16,8 +16,9 @@ import { AggregateOperations } from '@/object-record/record-table/constants/Aggr
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector';
import { AppPath } from '@/types/AppPath';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { useLingui } from '@lingui/react/macro';
import { RelationType } from '~/generated-metadata/graphql';
@ -69,7 +70,10 @@ export const RecordDetailRelationSection = ({
recordId,
});
const { isDropdownOpen } = useDropdown(dropdownId);
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
dropdownId,
);
const indexViewId = useRecoilValue(
prefetchIndexViewIdFromObjectMetadataItemFamilySelector({

14
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToMany.tsx
View File

@ -16,7 +16,7 @@ import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/reco
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -52,7 +52,7 @@ export const RecordDetailRelationSectionDropdownToMany = () => {
recordId,
});
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const dropdownPlacement = useRecoilComponentValueV2(
dropdownPlacementComponentStateV2,
@ -125,7 +125,7 @@ export const RecordDetailRelationSectionDropdownToMany = () => {
};
const handleCreateNew = (searchString?: string) => {
closeDropdown();
closeDropdown(dropdownId);
createNewRecordAndOpenRightDrawer?.(searchString);
};
@ -150,8 +150,12 @@ export const RecordDetailRelationSectionDropdownToMany = () => {
componentInstanceId={dropdownId}
onCreate={handleCreateNew}
onChange={updateRelation}
onSubmit={closeDropdown}
onClickOutside={closeDropdown}
onSubmit={() => {
closeDropdown(dropdownId);
}}
onClickOutside={() => {
closeDropdown(dropdownId);
}}
layoutDirection={
dropdownPlacement?.includes('end')
? 'search-bar-on-bottom'

10
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToOne.tsx
View File

@ -16,7 +16,7 @@ import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/reco
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -54,7 +54,7 @@ export const RecordDetailRelationSectionDropdownToOne = () => {
recordId,
});
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const dropdownPlacement = useRecoilComponentValueV2(
dropdownPlacementComponentStateV2,
@ -80,7 +80,7 @@ export const RecordDetailRelationSectionDropdownToOne = () => {
const handleRelationPickerEntitySelected = (
selectedRelationEntity?: SingleRecordPickerRecord,
) => {
closeDropdown();
closeDropdown(dropdownId);
if (!selectedRelationEntity?.id || !relationFieldMetadataItem?.name) return;
@ -107,7 +107,7 @@ export const RecordDetailRelationSectionDropdownToOne = () => {
};
const handleCreateNew = (searchString?: string) => {
closeDropdown();
closeDropdown(dropdownId);
createNewRecordAndOpenRightDrawer?.(searchString);
};
@ -138,7 +138,7 @@ export const RecordDetailRelationSectionDropdownToOne = () => {
onRecordSelected={handleRelationPickerEntitySelected}
objectNameSingular={relationObjectMetadataNameSingular}
recordPickerInstanceId={dropdownId}
onCancel={closeDropdown}
onCancel={() => closeDropdown(dropdownId)}
onCreate={shouldAllowCreateNew ? handleCreateNew : undefined}
layoutDirection={
dropdownPlacement?.includes('end')

10
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts
View File

@ -5,11 +5,12 @@ import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-me
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
export const useTriggerActionMenuDropdown = ({
recordTableId,
}: {
@ -32,7 +33,7 @@ export const useTriggerActionMenuDropdown = ({
actionMenuDropdownId,
);
const { openDropdown } = useDropdown(actionMenuDropdownId);
const { openDropdown } = useOpenDropdown();
const { closeCommandMenu } = useCommandMenu();
@ -57,13 +58,16 @@ export const useTriggerActionMenuDropdown = ({
closeCommandMenu();
openDropdown();
openDropdown({
dropdownComponentInstanceIdFromProps: actionMenuDropdownId,
});
},
[
recordIndexActionMenuDropdownPositionState,
isRowSelectedFamilyState,
closeCommandMenu,
openDropdown,
actionMenuDropdownId,
],
);

6
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateDropdownSubmenuContent.tsx
View File

@ -6,7 +6,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useContext } from 'react';
import { Key } from 'ts-key-enum';
@ -22,13 +22,13 @@ export const RecordTableColumnAggregateFooterDropdownSubmenuContent = ({
const { dropdownId, resetContent } = useContext(
RecordTableColumnAggregateFooterDropdownContext,
);
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
useScopedHotkeys(
[Key.Escape],
() => {
resetContent();
closeDropdown();
closeDropdown(dropdownId);
},
TableOptionsHotkeyScope.Dropdown,
);

9
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterAggregateOperationMenuItems.tsx
View File

@ -2,7 +2,7 @@ import { getAggregateOperationLabel } from '@/object-record/record-board/record-
import { RecordTableColumnAggregateFooterDropdownContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterDropdownContext';
import { useViewFieldAggregateOperation } from '@/object-record/record-table/record-table-footer/hooks/useViewFieldAggregateOperation';
import { ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { ReactNode, useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { IconCheck } from 'twenty-ui/display';
@ -23,7 +23,8 @@ export const RecordTableColumnAggregateFooterAggregateOperationMenuItems = ({
const { dropdownId, resetContent } = useContext(
RecordTableColumnAggregateFooterDropdownContext,
);
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
return (
<>
{aggregateOperations.map((operation) => (
@ -31,7 +32,7 @@ export const RecordTableColumnAggregateFooterAggregateOperationMenuItems = ({
key={operation}
onClick={() => {
updateViewFieldAggregateOperation(operation);
closeDropdown();
closeDropdown(dropdownId);
}}
text={getAggregateOperationLabel(operation)}
RightIcon={
@ -48,7 +49,7 @@ export const RecordTableColumnAggregateFooterAggregateOperationMenuItems = ({
onClick={() => {
updateViewFieldAggregateOperation(null);
resetContent();
closeDropdown();
closeDropdown(dropdownId);
}}
text={'None'}
RightIcon={

8
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterMenuContent.tsx
View File

@ -7,7 +7,7 @@ import { getAvailableAggregateOperationsForFieldMetadataType } from '@/object-re
import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { t } from '@lingui/core/macro';
import { useContext, useMemo } from 'react';
@ -25,13 +25,13 @@ export const RecordTableColumnAggregateFooterMenuContent = () => {
fieldMetadataType,
resetContent,
} = useContext(RecordTableColumnAggregateFooterDropdownContext);
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const { objectMetadataItem } = useRecordTableContextOrThrow();
useScopedHotkeys(
[Key.Escape],
() => {
closeDropdown();
closeDropdown(dropdownId);
},
TableOptionsHotkeyScope.Dropdown,
);
@ -106,7 +106,7 @@ export const RecordTableColumnAggregateFooterMenuContent = () => {
onClick={() => {
updateViewFieldAggregateOperation(null);
resetContent();
closeDropdown();
closeDropdown(dropdownId);
}}
text={t`None`}
RightIcon={

9
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx
View File

@ -3,7 +3,7 @@ import { RECORD_TABLE_TD_WIDTH } from '@/object-record/record-table/record-table
import { RecordTableColumnAggregateFooterCellContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterCellContext';
import { RecordTableColumnAggregateFooterValue } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue';
import { hasAggregateOperationForViewFieldFamilySelector } from '@/object-record/record-table/record-table-footer/states/hasAggregateOperationForViewFieldFamilySelector';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
@ -60,7 +60,12 @@ export const RecordTableColumnAggregateFooterValueCell = ({
isFirstCell: boolean;
}) => {
const [isHovered, setIsHovered] = useState(false);
const { isDropdownOpen } = useDropdown(dropdownId);
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
dropdownId,
);
const theme = useTheme();
const { viewFieldId, fieldMetadataId } = useContext(
RecordTableColumnAggregateFooterCellContext,

8
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx
View File

@ -1,12 +1,12 @@
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useOpenRecordFilterChipFromTableHeader } from '@/object-record/record-table/record-table-header/hooks/useOpenRecordFilterChipFromTableHeader';
import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
@ -54,10 +54,12 @@ export const RecordTableColumnHeadDropdownMenu = ({
const { handleColumnVisibilityChange, handleMoveTableColumn } =
useTableColumns();
const { closeDropdown } = useDropdown(column.fieldMetadataId + '-header');
const dropdownId = column.fieldMetadataId + '-header';
const { closeDropdown } = useCloseDropdown();
const closeDropdownAndToggleScroll = () => {
closeDropdown();
closeDropdown(dropdownId);
toggleScrollXWrapper(true);
toggleScrollYWrapper(false);
};

4
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -11,7 +11,7 @@ import { SettingsPath } from '@/types/SettingsPath';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useLingui } from '@lingui/react/macro';
@ -23,7 +23,7 @@ export const RecordTableHeaderPlusButtonContent = () => {
const { t } = useLingui();
const { objectMetadataItem } = useRecordTableContextOrThrow();
const { closeDropdown } = useDropdown();
const { closeDropdown } = useCloseDropdown();
const hiddenTableColumns = useRecoilComponentValueV2(
hiddenTableColumnsComponentSelector,

4
packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx
View File

@ -4,7 +4,7 @@ import { SelectableItem } from '@/object-record/select/types/SelectableItem';
import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@ -35,7 +35,7 @@ export const MultipleSelectDropdown = ({
) => void;
loadingItems: boolean;
}) => {
const { closeDropdown } = useDropdown();
const { closeDropdown } = useCloseDropdown();
const { resetSelectedItem } = useSelectableList(selectableListId);

12
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
View File

@ -6,7 +6,7 @@ import { SettingsPath } from '@/types/SettingsPath';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { Trans, useLingui } from '@lingui/react/macro';
@ -35,7 +35,7 @@ export const SettingsAccountsRowDropdownMenu = ({
const { openModal } = useModal();
const navigate = useNavigateSettings();
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const { destroyOneRecord } = useDestroyOneRecord({
objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
@ -62,7 +62,7 @@ export const SettingsAccountsRowDropdownMenu = ({
text={t`Emails settings`}
onClick={() => {
navigate(SettingsPath.AccountsEmails);
closeDropdown();
closeDropdown(dropdownId);
}}
/>
<MenuItem
@ -70,7 +70,7 @@ export const SettingsAccountsRowDropdownMenu = ({
text={t`Calendar settings`}
onClick={() => {
navigate(SettingsPath.AccountsCalendars);
closeDropdown();
closeDropdown(dropdownId);
}}
/>
{account.authFailedAt && (
@ -79,7 +79,7 @@ export const SettingsAccountsRowDropdownMenu = ({
text={t`Reconnect`}
onClick={() => {
triggerProviderReconnect(account.provider, account.id);
closeDropdown();
closeDropdown(dropdownId);
}}
/>
)}
@ -88,7 +88,7 @@ export const SettingsAccountsRowDropdownMenu = ({
LeftIcon={IconTrash}
text={t`Remove account`}
onClick={() => {
closeDropdown();
closeDropdown(dropdownId);
openModal(DELETE_ACCOUNT_MODAL_ID);
}}
/>

6
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
View File

@ -3,7 +3,7 @@ import { SettingsPath } from '@/types/SettingsPath';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
@ -66,7 +66,7 @@ const StyledButton = styled(Button)`
export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
const dropdownId = `settings-object-new-field-breadcrumb-dropdown`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const navigate = useNavigateSettings();
const location = useLocation();
const { objectNamePlural = '' } = useParams();
@ -90,7 +90,7 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
fieldType ? { fieldType } : undefined,
);
}
closeDropdown();
closeDropdown(dropdownId);
};
return (

18
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
View File

@ -5,7 +5,7 @@ import { TextInput } from '@/ui/input/components/TextInput';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
@ -82,12 +82,8 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
const SELECT_COLOR_DROPDOWN_ID = `select-color-dropdown-${option.id}`;
const SELECT_ACTIONS_DROPDOWN_ID = `select-actions-dropdown-${option.id}`;
const { closeDropdown: closeColorDropdown } = useDropdown(
SELECT_COLOR_DROPDOWN_ID,
);
const { closeDropdown: closeActionsDropdown } = useDropdown(
SELECT_ACTIONS_DROPDOWN_ID,
);
const { closeDropdown: closeColorDropdown } = useCloseDropdown();
const { closeDropdown: closeActionsDropdown } = useCloseDropdown();
const handleInputEnter = () => {
onInputEnter?.();
@ -126,7 +122,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
key={colorName}
onClick={() => {
onChange({ ...option, color: colorName });
closeColorDropdown();
closeColorDropdown(SELECT_COLOR_DROPDOWN_ID);
}}
color={colorName}
selected={colorName === option.color}
@ -171,7 +167,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
text={t`Remove as default`}
onClick={() => {
onRemoveAsDefault?.();
closeActionsDropdown();
closeActionsDropdown(SELECT_ACTIONS_DROPDOWN_ID);
}}
/>
) : (
@ -180,7 +176,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
text={t`Set as default`}
onClick={() => {
onSetAsDefault?.();
closeActionsDropdown();
closeActionsDropdown(SELECT_ACTIONS_DROPDOWN_ID);
}}
/>
)}
@ -191,7 +187,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
text={t`Remove option`}
onClick={() => {
onRemove();
closeActionsDropdown();
closeActionsDropdown(SELECT_ACTIONS_DROPDOWN_ID);
}}
/>
)}

10
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx
View File

@ -2,7 +2,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { isDefined } from 'twenty-shared/utils';
import {
IconArchive,
@ -31,21 +31,21 @@ export const SettingsObjectFieldActiveActionDropdown = ({
}: SettingsObjectFieldActiveActionDropdownProps) => {
const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const handleEdit = () => {
onEdit();
closeDropdown();
closeDropdown(dropdownId);
};
const handleDeactivate = () => {
onDeactivate?.();
closeDropdown();
closeDropdown(dropdownId);
};
const handleSetAsLabelIdentifier = () => {
onSetAsLabelIdentifier?.();
closeDropdown();
closeDropdown(dropdownId);
};
return (

10
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
View File

@ -2,7 +2,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { t } from '@lingui/core/macro';
import {
IconArchiveOff,
@ -33,21 +33,21 @@ export const SettingsObjectFieldInactiveActionDropdown = ({
}: SettingsObjectFieldInactiveActionDropdownProps) => {
const dropdownId = `${scopeKey}-settings-field-disabled-action-dropdown`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const handleActivate = () => {
onActivate();
closeDropdown();
closeDropdown(dropdownId);
};
const handleDelete = () => {
onDelete();
closeDropdown();
closeDropdown(dropdownId);
};
const handleEdit = () => {
onEdit();
closeDropdown();
closeDropdown(dropdownId);
};
const isDeletable = isCustomField;

8
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx
View File

@ -2,7 +2,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { IconArchiveOff, IconDotsVertical, IconTrash } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
@ -22,16 +22,16 @@ export const SettingsObjectInactiveMenuDropDown = ({
}: SettingsObjectInactiveMenuDropDownProps) => {
const dropdownId = `${scopeKey}-settings-object-inactive-menu-dropdown`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const handleActivate = () => {
onActivate();
closeDropdown();
closeDropdown(dropdownId);
};
const handleDelete = () => {
onDelete();
closeDropdown();
closeDropdown(dropdownId);
};
return (

9
packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignment.tsx
View File

@ -13,7 +13,7 @@ import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDr
import { SettingsPath } from '@/types/SettingsPath';
import { TextInput } from '@/ui/input/components/TextInput';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
import { TableCell } from '@/ui/layout/table/components/TableCell';
@ -92,7 +92,10 @@ export const SettingsRoleAssignment = ({
useState<SettingsRoleAssignmentConfirmationModalSelectedWorkspaceMember | null>(
null,
);
const { closeDropdown } = useDropdown('role-member-select');
const dropdownId = 'role-member-select';
const { closeDropdown } = useCloseDropdown();
const [searchFilter, setSearchFilter] = useState('');
const currentWorkspaceMembers = useRecoilValue(currentWorkspaceMembersState);
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@ -151,7 +154,7 @@ export const SettingsRoleAssignment = ({
role: existingRole,
});
openModal(ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID);
closeDropdown();
closeDropdown(dropdownId);
};
const isModalOpened = useRecoilComponentValueV2(

8
packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx
View File

@ -6,7 +6,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useLingui } from '@lingui/react/macro';
import { UnwrapRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
@ -26,7 +26,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
const { enqueueSnackBar } = useSnackBar();
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const { deleteSSOIdentityProvider } = useDeleteSSOIdentityProvider();
const { updateSSOIdentityProvider } = useUpdateSSOIdentityProvider();
@ -81,7 +81,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
text={SSOIdp.status === 'Active' ? t`Deactivate` : t`Activate`}
onClick={() => {
toggleSSOIdentityProviderStatus(SSOIdp.id);
closeDropdown();
closeDropdown(dropdownId);
}}
/>
<MenuItem
@ -90,7 +90,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
text={t`Delete`}
onClick={() => {
handleDeleteSSOIdentityProvider(SSOIdp.id);
closeDropdown();
closeDropdown(dropdownId);
}}
/>
</DropdownMenuItemsContainer>

6
packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainRowDropdownMenu.tsx
View File

@ -4,7 +4,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { UnwrapRecoilValue, useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
@ -27,7 +27,7 @@ export const SettingsSecurityApprovedAccessDomainRowDropdownMenu = ({
const { enqueueSnackBar } = useSnackBar();
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const [deleteApprovedAccessDomain] = useDeleteApprovedAccessDomainMutation();
@ -70,7 +70,7 @@ export const SettingsSecurityApprovedAccessDomainRowDropdownMenu = ({
text="Delete"
onClick={() => {
handleDeleteApprovedAccessDomain();
closeDropdown();
closeDropdown(dropdownId);
}}
/>
</DropdownMenuItemsContainer>

8
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow.tsx
View File

@ -3,7 +3,7 @@ import { TextInputV2 } from '@/ui/input/components/TextInputV2';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
@ -41,7 +41,7 @@ export const SettingsServerlessFunctionTabEnvironmentVariableTableRow = ({
const [editedEnvVariable, setEditedEnvVariable] = useState(envVariable);
const [editMode, setEditMode] = useState(initialEditMode);
const dropDownId = `settings-environment-variable-dropdown-${envVariable.id}`;
const { closeDropdown } = useDropdown(dropDownId);
const { closeDropdown } = useCloseDropdown();
return editMode ? (
<StyledEditModeTableRow>
@ -117,7 +117,7 @@ export const SettingsServerlessFunctionTabEnvironmentVariableTableRow = ({
LeftIcon={IconPencil}
onClick={() => {
setEditMode(true);
closeDropdown();
closeDropdown(dropDownId);
}}
/>
<MenuItem
@ -125,7 +125,7 @@ export const SettingsServerlessFunctionTabEnvironmentVariableTableRow = ({
LeftIcon={IconTrash}
onClick={() => {
onDelete();
closeDropdown();
closeDropdown(dropDownId);
}}
/>
</DropdownMenuItemsContainer>

12
packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx
View File

@ -8,7 +8,7 @@ import { MatchColumnSelectFieldSelectDropdownContent } from '@/spreadsheet-impor
import { MatchColumnSelectSubFieldSelectDropdownContent } from '@/spreadsheet-import/components/MatchColumnSelectSubFieldSelectDropdownContent';
import { DO_NOT_IMPORT_OPTION_KEY } from '@/spreadsheet-import/constants/DoNotImportOptionKey';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronDown } from 'twenty-ui/display';
@ -39,7 +39,7 @@ export const MatchColumnToFieldSelect = ({
}: MatchColumnToFieldSelectProps) => {
const dropdownId = `match-column-select-v2-dropdown-${columnIndex}`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const [selectedFieldMetadataItem, setSelectedFieldMetadataItem] =
useState<FieldMetadataItem | null>(null);
@ -81,7 +81,7 @@ export const MatchColumnToFieldSelect = ({
setSelectedFieldMetadataItem(null);
onChange(correspondingOption);
closeDropdown();
closeDropdown(dropdownId);
}
};
@ -89,13 +89,13 @@ export const MatchColumnToFieldSelect = ({
selectedSuggestedOption: SelectOption,
) => {
onChange(selectedSuggestedOption);
closeDropdown();
closeDropdown(dropdownId);
};
const handleDoNotImportSelect = () => {
if (isDefined(doNotImportOption)) {
onChange(doNotImportOption);
closeDropdown();
closeDropdown(dropdownId);
}
};
@ -109,7 +109,7 @@ export const MatchColumnToFieldSelect = ({
const handleCancelSelectClick = () => {
setSelectedFieldMetadataItem(null);
closeDropdown();
closeDropdown(dropdownId);
};
const doNotImportOption = options.find(

9
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx
View File

@ -7,7 +7,6 @@ import {
import { SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions';
import { getFieldOptions } from '@/spreadsheet-import/utils/getFieldOptions';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Tag, TagColor } from 'twenty-ui/components';
@ -30,8 +29,6 @@ export const SubMatchingSelectDropdownButton = <T extends string>({
column,
placeholder,
}: SubMatchingSelectDropdownButtonProps<T>) => {
const { openDropdown } = useDropdown();
const { fields } = useSpreadsheetImportInternal<T>();
const options = getFieldOptions(fields, column.value) as SelectOption[];
const value = options.find((opt) => opt.value === option.value);
@ -39,11 +36,7 @@ export const SubMatchingSelectDropdownButton = <T extends string>({
const theme = useTheme();
return (
<SubMatchingSelectControlContainer
cursor="pointer"
onClick={() => openDropdown()}
id="control"
>
<SubMatchingSelectControlContainer cursor="pointer" id="control">
<Tag
text={value?.label ?? placeholder}
color={value?.color as TagColor}

6
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowRightDropdown.tsx
View File

@ -10,7 +10,7 @@ import {
} from '@/spreadsheet-import/types/SpreadsheetColumn';
import { SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import styled from '@emotion/styled';
import { SelectOption } from 'twenty-ui/input';
@ -38,7 +38,7 @@ export const SubMatchingSelectRowRightDropdown = <T extends string>({
}: SubMatchingSelectRowRightDropdownProps<T>) => {
const dropdownId = `sub-matching-select-dropdown-${option.entry}`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const { fields } = useSpreadsheetImportInternal<T>();
const options = getFieldOptions(fields, column.value) as SelectOption[];
@ -46,7 +46,7 @@ export const SubMatchingSelectRowRightDropdown = <T extends string>({
const handleSelect = (selectedOption: SelectOption) => {
onSubChange(selectedOption.value as T, column.index, option.entry ?? '');
closeDropdown();
closeDropdown(dropdownId);
};
return (

8
packages/twenty-front/src/modules/support/components/SupportDropdown.tsx
View File

@ -3,23 +3,23 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { IconHelpCircle, IconMessage } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
export const SupportDropdown = () => {
const dropdownId = `support-field-active-action-dropdown`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const handleTalkToUs = () => {
window.FrontChat?.('show');
closeDropdown();
closeDropdown(dropdownId);
};
const handleUserGuide = () => {
window.open('https://twenty.com/user-guide', '_blank');
closeDropdown();
closeDropdown(dropdownId);
};
return (

22
packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
View File

@ -7,7 +7,7 @@ import {
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
} from '@/ui/input/components/internal/date/components/InternalDatePicker';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { useRecoilCallback } from 'recoil';
import { Nullable } from 'twenty-ui/utilities';
@ -61,23 +61,19 @@ export const DateInput = ({
onSubmit?.(newDate);
};
const { closeDropdown: closeDropdownMonthSelect } = useDropdown(
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
);
const { closeDropdown: closeDropdownYearSelect } = useDropdown(
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
);
const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();
const handleEnter = () => {
closeDropdownYearSelect();
closeDropdownMonthSelect();
closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
onEnter(internalValue);
};
const handleEscape = () => {
closeDropdownYearSelect();
closeDropdownMonthSelect();
closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
onEscape(internalValue);
};
@ -90,8 +86,8 @@ export const DateInput = ({
.getValue();
if (hotkeyScope?.scope === TableHotkeyScope.CellEditMode) {
closeDropdownYearSelect();
closeDropdownMonthSelect();
closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
onEscape(internalValue);
onClickOutside(event, internalValue);
}

8
packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -5,7 +5,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { arrayToChunks } from '~/utils/array/arrayToChunks';
@ -13,6 +12,8 @@ import { arrayToChunks } from '~/utils/array/arrayToChunks';
import { ICON_PICKER_DROPDOWN_CONTENT_WIDTH } from '@/ui/input/components/constants/IconPickerDropdownContentWidth';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
import { useSelectableListListenToEnterHotkeyOnItem } from '@/ui/layout/selectable-list/hooks/useSelectableListListenToEnterHotkeyOnItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -25,7 +26,6 @@ import {
LightIconButton,
} from 'twenty-ui/input';
import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
export type IconPickerProps = {
disabled?: boolean;
@ -137,7 +137,7 @@ export const IconPicker = ({
}
};
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const { getIcons, getIcon } = useIcons();
const icons = getIcons();
@ -242,7 +242,7 @@ export const IconPicker = ({
iconKey={iconKey}
onClick={() => {
onChange({ iconKey, Icon: getIcon(iconKey) });
closeDropdown();
closeDropdown(dropdownId);
}}
selectedIconKey={selectedIconKey}
Icon={getIcon(iconKey)}

8
packages/twenty-front/src/modules/ui/input/components/Select.tsx
View File

@ -5,13 +5,13 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { SelectValue } from '@/ui/input/components/internal/select/types';
import { SelectControl } from '@/ui/input/components/SelectControl';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@ -116,7 +116,7 @@ export const Select = <Value extends SelectValue>({
!isDefined(callToActionButton) &&
(!isDefined(emptyOption) || selectedOption !== emptyOption));
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const dropDownMenuWidth =
dropdownWidthAuto && selectContainerRef.current?.clientWidth
@ -195,7 +195,7 @@ export const Select = <Value extends SelectValue>({
onEnter={() => {
onChange?.(option.value);
onBlur?.();
closeDropdown();
closeDropdown(dropdownId);
}}
>
<MenuItemSelect
@ -207,7 +207,7 @@ export const Select = <Value extends SelectValue>({
onClick={() => {
onChange?.(option.value);
onBlur?.();
closeDropdown();
closeDropdown(dropdownId);
}}
/>
</SelectableListItem>

10
packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx
View File

@ -3,12 +3,12 @@ import styled from '@emotion/styled';
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { CurrencyPickerHotkeyScope } from '../types/CurrencyPickerHotkeyScope';
import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
import { Currency } from '@/ui/input/components/internal/types/Currency';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { IconChevronDown } from 'twenty-ui/display';
import { CurrencyPickerDropdownSelect } from './CurrencyPickerDropdownSelect';
@ -52,13 +52,13 @@ export const CurrencyPickerDropdownButton = ({
}) => {
const theme = useTheme();
const { closeDropdown } = useDropdown(
CurrencyPickerHotkeyScope.CurrencyPicker,
);
const dropdownId = CurrencyPickerHotkeyScope.CurrencyPicker;
const { closeDropdown } = useCloseDropdown();
const handleChange = (currency: Currency) => {
onChange(currency);
closeDropdown();
closeDropdown(dropdownId);
};
const currency = CURRENCIES.find(

15
packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
View File

@ -3,13 +3,12 @@ import { DateTime } from 'luxon';
import { lazy, Suspense, useContext } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { AbsoluteDatePickerHeader } from '@/ui/input/components/internal/date/components/AbsoluteDatePickerHeader';
import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput';
import { RelativeDatePickerHeader } from '@/ui/input/components/internal/date/components/RelativeDatePickerHeader';
import { getHighlightedDates } from '@/ui/input/components/internal/date/utils/getHighlightedDates';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { UserContext } from '@/users/contexts/UserContext';
import {
VariableDateViewFilterValueDirection,
@ -342,12 +341,8 @@ export const DateTimePicker = ({
const { timeZone } = useContext(UserContext);
const theme = useTheme();
const { closeDropdown: closeDropdownMonthSelect } = useDropdown(
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
);
const { closeDropdown: closeDropdownYearSelect } = useDropdown(
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
);
const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();
const handleClear = () => {
closeDropdowns();
@ -355,8 +350,8 @@ export const DateTimePicker = ({
};
const closeDropdowns = () => {
closeDropdownYearSelect();
closeDropdownMonthSelect();
closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
};
const handleClose = (newDate: Date) => {

15
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
View File

@ -1,13 +1,15 @@
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { Country } from '@/ui/input/components/internal/types/Country';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useEffect, useState } from 'react';
import { PhoneCountryPickerDropdownSelect } from './PhoneCountryPickerDropdownSelect';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import 'react-phone-number-input/style.css';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronDown, IconWorld } from 'twenty-ui/display';
@ -75,12 +77,17 @@ export const PhoneCountryPickerDropdownButton = ({
const [selectedCountry, setSelectedCountry] = useState<Country>();
const { isDropdownOpen, closeDropdown } = useDropdown(
'country-picker-dropdown-id',
const dropdownId = 'country-picker-dropdown-id';
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
dropdownId,
);
const { closeDropdown } = useCloseDropdown();
const handleChange = (countryCode: string) => {
closeDropdown();
closeDropdown(dropdownId);
onChange(countryCode);
};

19
packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
View File

@ -3,11 +3,14 @@ import { DropdownInternalContainer } from '@/ui/layout/dropdown/components/inter
import { DROPDOWN_RESIZE_MIN_HEIGHT } from '@/ui/layout/dropdown/constants/DropdownResizeMinHeight';
import { DROPDOWN_RESIZE_MIN_WIDTH } from '@/ui/layout/dropdown/constants/DropdownResizeMinWidth';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { dropdownMaxHeightComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxHeightComponentState';
import { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxWidthComponentState';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import styled from '@emotion/styled';
import {
@ -24,7 +27,6 @@ import { Keys } from 'react-hotkeys-hook';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { useIsMobile } from 'twenty-ui/utilities';
import { useDropdown } from '../hooks/useDropdown';
type Width = `${string}px` | `${number}%` | 'auto' | number;
const StyledDropdownFallbackAnchor = styled.div`
@ -75,7 +77,12 @@ export const Dropdown = ({
excludedClickOutsideIds,
isDropdownInModal = false,
}: DropdownProps) => {
const { isDropdownOpen, toggleDropdown } = useDropdown(dropdownId);
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
dropdownId,
);
const { toggleDropdown } = useToggleDropdown();
const isUsingOffset =
isDefined(dropdownOffset?.x) || isDefined(dropdownOffset?.y);
@ -147,10 +154,12 @@ export const Dropdown = ({
event.stopPropagation();
event.preventDefault();
toggleDropdown(globalHotkeysConfig);
onClickOutside?.();
toggleDropdown({
dropdownComponentInstanceIdFromProps: dropdownId,
globalHotkeysConfig,
});
},
[globalHotkeysConfig, onClickOutside, toggleDropdown],
[globalHotkeysConfig, toggleDropdown, dropdownId],
);
return (

6
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx
View File

@ -1,7 +1,7 @@
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
@ -43,7 +43,7 @@ export const DropdownMenuInnerSelect = ({
}: DropdownMenuInnerSelectProps) => {
const theme = useTheme();
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
return (
<Dropdown
@ -61,7 +61,7 @@ export const DropdownMenuInnerSelect = ({
key={`dropdown-menu-inner-select-item-${selectOption.value}`}
onClick={() => {
onChange(selectOption);
closeDropdown();
closeDropdown(dropdownId);
}}
text={selectOption.label}
disabled={selectOption.disabled}

17
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useToggleDropdown.ts
View File

@ -7,6 +7,11 @@ import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
type ToggleDropdownArgs = {
dropdownComponentInstanceIdFromProps?: string;
globalHotkeysConfig?: Partial<GlobalHotkeysConfig>;
};
export const useToggleDropdown = () => {
const dropdownComponentInstanceIdFromContext =
useAvailableComponentInstanceId(DropdownComponentInstanceContext);
@ -16,15 +21,9 @@ export const useToggleDropdown = () => {
const toggleDropdown = useRecoilCallback(
({ snapshot }) =>
({
dropdownComponentInstanceIdFromProps,
globalHotkeysConfig,
}: {
dropdownComponentInstanceIdFromProps?: string;
globalHotkeysConfig?: Partial<GlobalHotkeysConfig>;
}) => {
(args?: ToggleDropdownArgs | null | undefined) => {
const dropdownComponentInstanceId =
dropdownComponentInstanceIdFromProps ??
args?.dropdownComponentInstanceIdFromProps ??
dropdownComponentInstanceIdFromContext;
if (!isDefined(dropdownComponentInstanceId)) {
@ -44,7 +43,7 @@ export const useToggleDropdown = () => {
} else {
openDropdown({
dropdownComponentInstanceIdFromProps: dropdownComponentInstanceId,
globalHotkeysConfig,
globalHotkeysConfig: args?.globalHotkeysConfig,
});
}
},

6
packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx
View File

@ -1,4 +1,4 @@
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { TAB_LIST_GAP } from '@/ui/layout/tab-list/constants/TabListGap';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
@ -87,7 +87,7 @@ export const TabList = ({
const hasHiddenTabs = hiddenTabsCount > 0;
const dropdownId = `tab-overflow-${componentInstanceId}`;
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const isActiveTabHidden = useMemo(() => {
if (!hasHiddenTabs) return false;
@ -215,7 +215,7 @@ export const TabList = ({
<TabListDropdown
dropdownId={dropdownId}
onClose={() => {
closeDropdown();
closeDropdown(dropdownId);
}}
overflow={{
hiddenTabsCount,

8
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx
View File

@ -16,7 +16,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MultiWorkspaceDropdownId';
import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/states/multiWorkspaceDropdownState';
import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
@ -57,7 +57,7 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
const availableWorkspacesCount =
countAvailableWorkspaces(availableWorkspaces);
const { buildWorkspaceUrl } = useBuildWorkspaceUrl();
const { closeDropdown } = useDropdown(MULTI_WORKSPACE_DROPDOWN_ID);
const { closeDropdown } = useCloseDropdown();
const { signOut } = useAuth();
const { enqueueSnackBar } = useSnackBar();
const { colorScheme, colorSchemeList } = useColorScheme();
@ -195,7 +195,9 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
/>
<UndecoratedLink
to={getSettingsPath(SettingsPath.WorkspaceMembersPage)}
onClick={closeDropdown}
onClick={() => {
closeDropdown(MULTI_WORKSPACE_DROPDOWN_ID);
}}
>
<MenuItem LeftIcon={IconUserPlus} text={t`Invite user`} />
</UndecoratedLink>

6
packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
View File

@ -9,7 +9,7 @@ import { SOFT_DELETE_FILTER_FIELD_NAME } from '@/object-record/record-filter/con
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { getAllRecordFilterDescendantsOfRecordFilterGroup } from '@/object-record/record-filter/utils/getAllRecordFilterDescendantsOfRecordFilterGroup';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
@ -19,7 +19,7 @@ import { isDefined } from 'twenty-shared/utils';
import { IconFilter } from 'twenty-ui/display';
export const AdvancedFilterChip = () => {
const { closeDropdown } = useDropdown(ADVANCED_FILTER_DROPDOWN_ID);
const { closeDropdown } = useCloseDropdown();
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
@ -49,7 +49,7 @@ export const AdvancedFilterChip = () => {
});
const handleRemoveClick = () => {
closeDropdown();
closeDropdown(ADVANCED_FILTER_DROPDOWN_ID);
const viewFilterGroupIds = currentRecordFilterGroups.map(
(recordFilterGroup) => recordFilterGroup.id,

8
packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
View File

@ -2,12 +2,12 @@ import { useCallback } from 'react';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { EditableFilterChip } from '@/views/components/EditableFilterChip';
import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput';
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useSetEditableFilterChipDropdownStates } from '@/views/hooks/useSetEditableFilterChipDropdownStates';
type EditableFilterDropdownButtonProps = {
@ -17,12 +17,14 @@ type EditableFilterDropdownButtonProps = {
export const EditableFilterDropdownButton = ({
recordFilter,
}: EditableFilterDropdownButtonProps) => {
const { closeDropdown } = useDropdown(recordFilter.id);
const dropdownId = recordFilter.id;
const { closeDropdown } = useCloseDropdown();
const { removeRecordFilter } = useRemoveRecordFilter();
const handleRemove = () => {
closeDropdown();
closeDropdown(dropdownId);
removeRecordFilter({ recordFilterId: recordFilter.id });
};

17
packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
View File

@ -4,7 +4,8 @@ import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@ -43,12 +44,8 @@ export const UpdateViewButtonGroup = () => {
contextStoreCurrentViewIdComponentState,
);
const { closeDropdown: closeUpdateViewButtonDropdown } = useDropdown(
UPDATE_VIEW_BUTTON_DROPDOWN_ID,
);
const { openDropdown: openViewPickerDropdown } = useDropdown(
VIEW_PICKER_DROPDOWN_ID,
);
const { closeDropdown: closeUpdateViewButtonDropdown } = useCloseDropdown();
const { openDropdown: openViewPickerDropdown } = useOpenDropdown();
const { currentView } = useGetCurrentViewOnly();
const setViewPickerReferenceViewId = useSetRecoilComponentStateV2(
@ -60,11 +57,13 @@ export const UpdateViewButtonGroup = () => {
return;
}
openViewPickerDropdown();
openViewPickerDropdown({
dropdownComponentInstanceIdFromProps: VIEW_PICKER_DROPDOWN_ID,
});
setViewPickerReferenceViewId(currentViewId);
setViewPickerMode('create-from-current');
closeUpdateViewButtonDropdown();
closeUpdateViewButtonDropdown(UPDATE_VIEW_BUTTON_DROPDOWN_ID);
};
const handleCreateViewClick = () => {

8
packages/twenty-front/src/modules/views/components/ViewBarDetailsAddFilterButton.tsx
View File

@ -1,13 +1,13 @@
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown';
import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown';
import { t } from '@lingui/core/macro';
import { IconPlus } from 'twenty-ui/display';
import { LightButton } from 'twenty-ui/input';
export const ViewBarDetailsAddFilterButton = () => {
const { toggleDropdown } = useDropdown(VIEW_BAR_FILTER_DROPDOWN_ID);
const { toggleDropdown } = useToggleDropdown();
const { resetFilterDropdown } = useResetFilterDropdown(
VIEW_BAR_FILTER_DROPDOWN_ID,
@ -15,7 +15,9 @@ export const ViewBarDetailsAddFilterButton = () => {
const handleClick = () => {
resetFilterDropdown();
toggleDropdown();
toggleDropdown({
dropdownComponentInstanceIdFromProps: VIEW_BAR_FILTER_DROPDOWN_ID,
});
};
return (

8
packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx
View File

@ -1,10 +1,14 @@
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { Trans } from '@lingui/react/macro';
export const ViewBarFilterButton = () => {
const { isDropdownOpen } = useDropdown(VIEW_BAR_FILTER_DROPDOWN_ID);
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
VIEW_BAR_FILTER_DROPDOWN_ID,
);
return (
<StyledHeaderDropdownButton isUnfolded={isDropdownOpen}>

2
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx
View File

@ -3,7 +3,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { useVectorSearchFilterActions } from '@/views/hooks/useVectorSearchFilterActions';
import { OPERAND_DROPDOWN_CLICK_OUTSIDE_ID } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown';
import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty';
@ -53,7 +52,6 @@ export const ViewBarFilterDropdown = () => {
dropdownComponents={<ViewBarFilterDropdownContent />}
dropdownOffset={{ y: 8 }}
onClickOutside={handleDropdownClickOutside}
excludedClickOutsideIds={[OPERAND_DROPDOWN_CLICK_OUTSIDE_ID]}
/>
);
};

17
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
View File

@ -12,7 +12,8 @@ import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDrop
import { useSetRecordFilterUsedInAdvancedFilterDropdownRow } from '@/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow';
import { RecordFilterGroupLogicalOperator } from '@/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator';
import { useCreateEmptyRecordFilterFromFieldMetadataItem } from '@/object-record/record-filter/hooks/useCreateEmptyRecordFilterFromFieldMetadataItem';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
@ -40,13 +41,9 @@ export const ViewBarFilterDropdownAdvancedFilterButton = () => {
VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS.ADVANCED_FILTER,
);
const { openDropdown: openAdvancedFilterDropdown } = useDropdown(
ADVANCED_FILTER_DROPDOWN_ID,
);
const { openDropdown: openAdvancedFilterDropdown } = useOpenDropdown();
const { closeDropdown: closeObjectFilterDropdown } = useDropdown(
VIEW_BAR_FILTER_DROPDOWN_ID,
);
const { closeDropdown: closeObjectFilterDropdown } = useCloseDropdown();
const { currentView } = useGetCurrentViewOnly();
@ -118,8 +115,10 @@ export const ViewBarFilterDropdownAdvancedFilterButton = () => {
setRecordFilterUsedInAdvancedFilterDropdownRow(newRecordFilter);
}
closeObjectFilterDropdown();
openAdvancedFilterDropdown();
closeObjectFilterDropdown(VIEW_BAR_FILTER_DROPDOWN_ID);
openAdvancedFilterDropdown({
dropdownComponentInstanceIdFromProps: ADVANCED_FILTER_DROPDOWN_ID,
});
};
return (

10
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
View File

@ -3,7 +3,8 @@ import styled from '@emotion/styled';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useGetRecordIndexTotalCount } from '@/views/hooks/internal/useGetRecordIndexTotalCount';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { ViewPickerContentCreateMode } from '@/views/view-picker/components/ViewPickerContentCreateMode';
@ -51,7 +52,8 @@ export const ViewPickerDropdown = () => {
const { totalCount } = useGetRecordIndexTotalCount();
const { isDropdownOpen: isViewsListDropdownOpen } = useDropdown(
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
VIEW_PICKER_DROPDOWN_ID,
);
@ -61,7 +63,7 @@ export const ViewPickerDropdown = () => {
const CurrentViewIcon = getIcon(currentView?.icon);
const handleClickOutside = async () => {
if (isViewsListDropdownOpen && viewPickerMode === 'edit') {
if (isDropdownOpen && viewPickerMode === 'edit') {
await updateViewFromCurrentState();
}
setViewPickerMode('list');
@ -74,7 +76,7 @@ export const ViewPickerDropdown = () => {
dropdownPlacement="bottom-start"
onClickOutside={handleClickOutside}
clickableComponent={
<StyledDropdownButtonContainer isUnfolded={isViewsListDropdownOpen}>
<StyledDropdownButtonContainer isUnfolded={isDropdownOpen}>
{currentView && CurrentViewIcon ? (
<CurrentViewIcon size={theme.icon.size.md} />
) : (

6
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
View File

@ -9,7 +9,7 @@ import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableLi
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useChangeView } from '@/views/hooks/useChangeView';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
@ -51,11 +51,11 @@ export const ViewPickerListContent = () => {
const { updateView } = useUpdateView();
const { changeView } = useChangeView();
const { closeDropdown } = useDropdown(VIEW_PICKER_DROPDOWN_ID);
const { closeDropdown } = useCloseDropdown();
const handleViewSelect = (viewId: string) => {
changeView(viewId);
closeDropdown();
closeDropdown(VIEW_PICKER_DROPDOWN_ID);
};
const handleAddViewButtonClick = () => {

12
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerOptionDropdown.tsx
View File

@ -2,7 +2,7 @@ import { useCreateFavorite } from '@/favorites/hooks/useCreateFavorite';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { View } from '@/views/types/View';
@ -33,8 +33,10 @@ export const ViewPickerOptionDropdown = ({
view,
handleViewSelect,
}: ViewPickerOptionDropdownProps) => {
const dropdownId = `view-picker-options-${view.id}`;
const { t } = useLingui();
const { closeDropdown } = useDropdown(`view-picker-options-${view.id}`);
const { closeDropdown } = useCloseDropdown();
const { getIcon } = useIcons();
const [isHovered, setIsHovered] = useState(false);
const { deleteViewFromCurrentState } = useDeleteViewFromCurrentState();
@ -54,7 +56,7 @@ export const ViewPickerOptionDropdown = ({
const handleDelete = () => {
setViewPickerReferenceViewId(view.id);
deleteViewFromCurrentState();
closeDropdown();
closeDropdown(dropdownId);
};
const handleAddToFavorites = () => {
@ -64,7 +66,7 @@ export const ViewPickerOptionDropdown = ({
setViewPickerReferenceViewId(view.id);
setViewPickerMode('favorite-folders-picker');
}
closeDropdown();
closeDropdown(dropdownId);
};
return (
@ -103,7 +105,7 @@ export const ViewPickerOptionDropdown = ({
text={t`Edit`}
onClick={(event) => {
onEdit(event, view.id);
closeDropdown();
closeDropdown(dropdownId);
}}
/>
<MenuItem

8
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx
View File

@ -9,7 +9,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { WorkflowFieldsMultiSelect } from '@/workflow/components/WorkflowEditUpdateEventFieldsMultiSelect';
import { WorkflowDatabaseEventTrigger } from '@/workflow/types/Workflow';
import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
@ -71,7 +71,9 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
const { getIcon } = useIcons();
const [searchInputValue, setSearchInputValue] = useState('');
const [isSystemObjectsOpen, setIsSystemObjectsOpen] = useState(false);
const { closeDropdown } = useDropdown('workflow-edit-trigger-record-type');
const dropdownId = 'workflow-edit-trigger-record-type';
const { closeDropdown } = useCloseDropdown();
const { objectMetadataItems } = useFilteredObjectMetadataItems();
@ -131,7 +133,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
eventName: `${value}.${triggerEvent.event}`,
},
});
closeDropdown();
closeDropdown(dropdownId);
};
const handleFieldsChange = (fields: FieldMultiSelectValue | string) => {

8
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx
View File

@ -4,12 +4,12 @@ import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { StepOutputSchema } from '@/workflow/workflow-variables/types/StepOutputSchema';
import { useState } from 'react';
import { IconX, OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
type WorkflowVariablesDropdownWorkflowStepItemsProps = {
dropdownId: string;
@ -25,7 +25,7 @@ export const WorkflowVariablesDropdownWorkflowStepItems = ({
const { getIcon } = useIcons();
const [searchInputValue, setSearchInputValue] = useState('');
const { closeDropdown } = useDropdown(dropdownId);
const { closeDropdown } = useCloseDropdown();
const availableSteps = steps.filter((step) =>
searchInputValue
@ -38,7 +38,7 @@ export const WorkflowVariablesDropdownWorkflowStepItems = ({
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={closeDropdown}
onClick={() => closeDropdown(dropdownId)}
Icon={IconX}
/>
}