diff --git a/packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx
index 3592a1d2f..683a109b7 100644
--- a/packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx
@@ -5,6 +5,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
import { CommandMenuActionMenuDropdownHotkeyScope } from '@/action-menu/types/CommandMenuActionMenuDropdownHotkeyScope';
import { getRightDrawerActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getRightDrawerActionMenuDropdownIdFromActionMenuId';
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 { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@@ -72,19 +73,21 @@ export const CommandMenuActionMenuDropdown = () => {
setSelectedItemId(selectableItemIdArray[0]);
}}
dropdownComponents={
-
-
- {recordSelectionActions.map((action) => (
-
- ))}
-
-
+
+
+
+ {recordSelectionActions.map((action) => (
+
+ ))}
+
+
+
}
/>
);
diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
index e2aa47b19..669835403 100644
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
@@ -9,6 +9,7 @@ import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDro
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
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 { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@@ -82,39 +83,41 @@ export const RecordIndexActionMenuDropdown = () => {
y: actionMenuDropdownPosition.y ?? 0,
}}
dropdownComponents={
-
-
-
- {recordIndexActions.map((action) => (
-
- ))}
- {
- closeDropdown(dropdownId);
- openCommandMenu();
- }}
+
+
+
+
-
-
-
+ >
+
+
+
+
+
}
/>
);
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMembersChip.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMembersChip.tsx
deleted file mode 100644
index 192b1ed3a..000000000
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMembersChip.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { MessageThreadSubscribersDropdownButton } from '@/activities/emails/components/MessageThreadSubscribersDropdownButton';
-import { MessageThread } from '@/activities/emails/types/MessageThread';
-
-export const EmailThreadMembersChip = ({
- messageThread,
-}: {
- messageThread: MessageThread;
-}) => {
- const subscribers = messageThread.subscribers ?? [];
-
- return (
-
- );
-};
diff --git a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx
deleted file mode 100644
index e78e29159..000000000
--- a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber';
-import { isNonEmptyString } from '@sniptt/guards';
-import { useContext } from 'react';
-import { Chip, ChipVariant } from 'twenty-ui/components';
-import { Avatar, AvatarGroup, IconChevronDown } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-
-const MAX_NUMBER_OF_AVATARS = 3;
-
-export const MessageThreadSubscribersChip = ({
- messageThreadSubscribers,
-}: {
- messageThreadSubscribers: MessageThreadSubscriber[];
-}) => {
- const { theme } = useContext(ThemeContext);
-
- const numberOfMessageThreadSubscribers = messageThreadSubscribers.length;
-
- const isOnlyOneSubscriber = numberOfMessageThreadSubscribers === 1;
-
- const isPrivateThread = isOnlyOneSubscriber;
-
- const privateLabel = 'Private';
-
- const susbcriberAvatarUrls = messageThreadSubscribers
- .map((member) => member.workspaceMember.avatarUrl)
- .filter(isNonEmptyString);
-
- const firstAvatarUrl = susbcriberAvatarUrls[0];
- const firstAvatarColorSeed = messageThreadSubscribers?.[0].workspaceMember.id;
- const firstAvatarPlaceholder =
- messageThreadSubscribers?.[0].workspaceMember.name.firstName;
-
- const subscriberNames = messageThreadSubscribers.map(
- (member) => member.workspaceMember?.name.firstName,
- );
-
- const moreAvatarsLabel =
- numberOfMessageThreadSubscribers > MAX_NUMBER_OF_AVATARS
- ? `+${numberOfMessageThreadSubscribers - MAX_NUMBER_OF_AVATARS}`
- : null;
-
- const label = isPrivateThread ? privateLabel : (moreAvatarsLabel ?? '');
-
- return (
-
- ) : (
- (
-
- ))}
- />
- )
- }
- rightComponent={() => }
- clickable
- />
- );
-};
diff --git a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx
deleted file mode 100644
index 1c35a91a4..000000000
--- a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { offset } from '@floating-ui/react';
-
-import { MessageThreadSubscriberDropdownAddSubscriber } from '@/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriber';
-import { MessageThreadSubscribersChip } from '@/activities/emails/components/MessageThreadSubscribersChip';
-import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber';
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
-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 { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
-import { useState } from 'react';
-import { IconMinus, IconPlus } from 'twenty-ui/display';
-import { MenuItem, MenuItemAvatar } from 'twenty-ui/navigation';
-
-export const MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID =
- 'message-thread-subscriber';
-
-export const MessageThreadSubscribersDropdownButton = ({
- messageThreadSubscribers,
-}: {
- messageThreadSubscribers: MessageThreadSubscriber[];
-}) => {
- const [isAddingSubscriber, setIsAddingSubscriber] = useState(false);
-
- const { closeDropdown } = useDropdown(MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID);
-
- const mockSubscribers = [
- ...messageThreadSubscribers,
- ...messageThreadSubscribers,
- ...messageThreadSubscribers,
- ...messageThreadSubscribers,
- ];
-
- // TODO: implement
- const handleAddSubscriberClick = () => {
- setIsAddingSubscriber(true);
- };
-
- // TODO: implement
- const handleRemoveSubscriber = (_subscriber: MessageThreadSubscriber) => {
- closeDropdown();
- };
-
- useListenRightDrawerClose(() => {
- closeDropdown();
- });
-
- return (
-
- }
- dropdownComponents={
-
- {isAddingSubscriber ? (
-
- ) : (
-
- {messageThreadSubscribers?.map((subscriber) => (
- {
- handleRemoveSubscriber(subscriber);
- }}
- text={
- subscriber.workspaceMember.name.firstName +
- ' ' +
- subscriber.workspaceMember.name.lastName
- }
- avatar={{
- placeholder: subscriber.workspaceMember.name.firstName,
- avatarUrl: subscriber.workspaceMember.avatarUrl,
- placeholderColorSeed: subscriber.workspaceMember.id,
- size: 'md',
- type: 'rounded',
- }}
- iconButtons={[
- {
- Icon: IconMinus,
- onClick: () => {
- handleRemoveSubscriber(subscriber);
- },
- },
- ]}
- />
- ))}
-
-
-
- )}
-
- }
- dropdownHotkeyScope={{ scope: MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID }}
- />
- );
-};
diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
index 4a3bddc56..0d29c1879 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
@@ -1,5 +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 { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import {
IconDotsVertical,
@@ -48,26 +50,27 @@ export const AttachmentDropdown = ({
clickableComponent={
}
- dropdownWidth={160}
dropdownComponents={
-
-
-
-
-
+
+
+
+
+
+
+
}
dropdownHotkeyScope={{ scope: dropdownId }}
/>
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx
index 0b85a8026..c82076fa7 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx
@@ -4,11 +4,11 @@ import { SubTitle } from '@/auth/components/SubTitle';
import { Title } from '@/auth/components/Title';
import { useHandleResendEmailVerificationToken } from '@/auth/sign-in-up/hooks/useHandleResendEmailVerificationToken';
import { useTheme } from '@emotion/react';
-import { AnimatedEaseIn } from 'twenty-ui/utilities';
import { IconMail } from 'twenty-ui/display';
import { Loader } from 'twenty-ui/feedback';
import { MainButton } from 'twenty-ui/input';
import { RGBA } from 'twenty-ui/theme';
+import { AnimatedEaseIn } from 'twenty-ui/utilities';
const StyledMailContainer = styled.div`
align-items: center;
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx
index 928f4c3bf..de32e94c4 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx
@@ -1,14 +1,15 @@
import { COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/command-menu/constants/CommandMenuContextChipGroupsDropdownId';
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 { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { isDefined } from 'twenty-shared/utils';
+import { MenuItem } from 'twenty-ui/navigation';
import {
CommandMenuContextChip,
CommandMenuContextChipProps,
} from './CommandMenuContextChip';
-import { MenuItem } from 'twenty-ui/navigation';
export const CommandMenuContextChipGroups = ({
contextChips,
@@ -53,19 +54,23 @@ export const CommandMenuContextChipGroups = ({
/>
}
dropdownComponents={
-
- {firstChips.map((chip, index) => (
-
+
+
+ {firstChips.map((chip, index) => (
+
+
}
dropdownHotkeyScope={{
scope: AppHotkeyScope.CommandMenu,
diff --git a/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx b/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx
index 10d479c4a..9ed862212 100644
--- a/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx
@@ -1,6 +1,8 @@
import { FavoriteFolderHotkeyScope } from '@/favorites/constants/FavoriteFolderRightIconDropdownHotkeyScope';
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 { IconDotsVertical, IconPencil, IconTrash } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
@@ -40,20 +42,22 @@ export const FavoriteFolderNavigationDrawerItemDropdown = ({
}
dropdownPlacement="bottom-start"
dropdownComponents={
-
-
-
-
+
+
+
+
+
+
}
/>
);
diff --git a/packages/twenty-front/src/modules/favorites/components/PageFavoriteFolderDropdown.tsx b/packages/twenty-front/src/modules/favorites/components/PageFavoriteFolderDropdown.tsx
deleted file mode 100644
index d147ccfdf..000000000
--- a/packages/twenty-front/src/modules/favorites/components/PageFavoriteFolderDropdown.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { PageFavoriteButton } from '@/favorites/components/PageFavoriteButton';
-import { FavoriteFolderPicker } from '@/favorites/favorite-folder-picker/components/FavoriteFolderPicker';
-import { FavoriteFolderPickerEffect } from '@/favorites/favorite-folder-picker/components/FavoriteFolderPickerEffect';
-import { FavoriteFolderPickerComponentInstanceContext } from '@/favorites/favorite-folder-picker/scopes/FavoriteFolderPickerScope';
-import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-
-type PageFavoriteFoldersDropdownProps = {
- dropdownId: string;
- isFavorite: boolean;
- record?: ObjectRecord;
- objectNameSingular: string;
-};
-
-export const PageFavoriteFoldersDropdown = ({
- dropdownId,
- isFavorite,
- record,
- objectNameSingular,
-}: PageFavoriteFoldersDropdownProps) => {
- const { closeDropdown } = useDropdown(dropdownId);
-
- return (
-
-
- }
- dropdownComponents={
- <>
-
-
- >
- }
- dropdownHotkeyScope={{ scope: dropdownId }}
- />
-
-
- );
-};
diff --git a/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPicker.tsx b/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPicker.tsx
index d64b04cbf..b633275d9 100644
--- a/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPicker.tsx
+++ b/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPicker.tsx
@@ -6,7 +6,7 @@ import { FavoriteFolderPickerInstanceContext } from '@/favorites/favorite-folder
import { favoriteFolderSearchFilterComponentState } from '@/favorites/favorite-folder-picker/states/favoriteFoldersSearchFilterComponentState';
import { isFavoriteFolderCreatingState } from '@/favorites/states/isFavoriteFolderCreatingState';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+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 { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -90,7 +90,7 @@ export const FavoriteFolderPicker = ({
);
return (
-
+
@@ -101,6 +101,6 @@ export const FavoriteFolderPicker = ({
-
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx
index b1e75599e..64a0c04f6 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx
@@ -11,6 +11,7 @@ import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { getDefaultSubFieldNameForCompositeFilterableFieldType } from '@/object-record/record-filter/utils/getDefaultSubFieldNameForCompositeFilterableFieldType';
import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
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 { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
@@ -151,20 +152,22 @@ export const AdvancedFilterAddFilterRuleSelect = ({
}
dropdownComponents={
-
-
- {isFilterRuleGroupOptionVisible && (
+
+
- )}
-
+ {isFilterRuleGroupOptionVisible && (
+
+ )}
+
+
}
dropdownHotkeyScope={{ scope: dropdownId }}
dropdownOffset={{ y: 8, x: 0 }}
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx
index f3b6dc5e8..e9bbd0031 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx
@@ -16,6 +16,7 @@ import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object
import { isExpectedSubFieldName } from '@/object-record/object-filter-dropdown/utils/isExpectedSubFieldName';
import { isFilterOnActorSourceSubField } from '@/object-record/object-filter-dropdown/utils/isFilterOnActorSourceSubField';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { FieldMetadataType } from 'twenty-shared/types';
@@ -52,28 +53,24 @@ export const AdvancedFilterDropdownFilterInput = ({
)}
{filterType === 'RELATION' && (
- <>
+
- >
+
)}
{filterType === 'ACTOR' &&
(isActorSourceCompositeFilter ? (
- <>
-
- >
+
) : (
- <>
-
- >
+
))}
{['SELECT', 'MULTI_SELECT'].includes(filterType) && (
- <>
+
- >
+
)}
{filterType === 'BOOLEAN' && }
{filterType === 'CURRENCY' &&
@@ -82,9 +79,7 @@ export const AdvancedFilterDropdownFilterInput = ({
'currencyCode',
recordFilter.subFieldName,
) ? (
- <>
-
- >
+
) : (
<>>
))}
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx
index d949beb88..e8f5d2f91 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectMenu.tsx
@@ -21,6 +21,7 @@ import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/o
import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState';
import { isCompositeFieldType } from '@/object-record/object-filter-dropdown/utils/isCompositeFieldType';
import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@@ -132,7 +133,7 @@ export const AdvancedFilterFieldSelectMenu = ({
];
return (
- <>
+
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx
index 54112cc12..68b643ebb 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx
@@ -4,6 +4,7 @@ import { useUpsertRecordFilterGroup } from '@/object-record/record-filter-group/
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { RecordFilterGroupLogicalOperator } from '@/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator';
import { Select } from '@/ui/input/components/Select';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
type AdvancedFilterLogicalOperatorDropdownProps = {
recordFilterGroup: RecordFilterGroup;
@@ -27,6 +28,7 @@ export const AdvancedFilterLogicalOperatorDropdown = ({
return (
}
dropdownComponents={
-
-
-
+
+
+
+
+
}
dropdownHotkeyScope={{ scope: dropdownId }}
dropdownOffset={{ y: 2, x: 0 }}
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx
index 164f88aa7..537730b90 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx
@@ -6,7 +6,9 @@ import { currentRecordFiltersComponentState } from '@/object-record/record-filte
import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
import { SelectControl } from '@/ui/input/components/SelectControl';
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 { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@@ -94,38 +96,39 @@ export const AdvancedFilterRecordFilterOperandSelect = ({
/>
}
dropdownComponents={
-
- operand,
- )}
- selectableListInstanceId={dropdownId}
- >
- {operandsForFilterType.map((filterOperand, index) => (
- {
- handleOperandChange(filterOperand);
- }}
- >
-
+ ))}
+
+
+
}
dropdownHotkeyScope={{ scope: dropdownId }}
dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET}
dropdownPlacement="bottom-start"
- dropdownWidth={200}
/>
);
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx
index 02dc42d82..c2531ac20 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx
@@ -7,12 +7,13 @@ import { currentRecordFiltersComponentState } from '@/object-record/record-filte
import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset';
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 { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isDefined } from 'twenty-shared/utils';
-import { IconButton } from 'twenty-ui/input';
import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
+import { IconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
type AdvancedFilterRecordFilterOptionsDropdownProps = {
@@ -73,14 +74,16 @@ export const AdvancedFilterRecordFilterOptionsDropdown = ({
/>
}
dropdownComponents={
-
-
-
+
+
+
+
+
}
dropdownHotkeyScope={{ scope: dropdownId }}
dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET}
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx
index 1813fd750..4d0b9d3c5 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx
@@ -2,9 +2,11 @@ import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filt
import { AdvancedFilterRecordFilterGroupRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupRow';
import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
+import { ADVANCED_FILTER_DROPDOWN_CONTENT_WIDTH } from '@/object-record/advanced-filter/constants/AdvancedFilterDropdownContentWidth';
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
import { isRecordFilterGroupChildARecordFilterGroup } from '@/object-record/advanced-filter/utils/isRecordFilterGroupChildARecordFilterGroup';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
@@ -18,7 +20,6 @@ const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(2)};
- min-width: 650px;
`;
export const AdvancedFilterRootRecordFilterGroup = () => {
@@ -37,31 +38,33 @@ export const AdvancedFilterRootRecordFilterGroup = () => {
return (
-
- {childRecordFiltersAndRecordFilterGroups.map(
- (recordFilterGroupChild, recordFilterGroupChildIndex) =>
- isRecordFilterGroupChildARecordFilterGroup(
- recordFilterGroupChild,
- ) ? (
-
- ) : (
-
- ),
- )}
-
-
+
+
+ {childRecordFiltersAndRecordFilterGroups.map(
+ (recordFilterGroupChild, recordFilterGroupChildIndex) =>
+ isRecordFilterGroupChildARecordFilterGroup(
+ recordFilterGroupChild,
+ ) ? (
+
+ ) : (
+
+ ),
+ )}
+
+
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx
index 95cafc345..b967f225d 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx
@@ -16,6 +16,7 @@ import { areCompositeTypeSubFieldsFilterable } from '@/object-record/record-filt
import { isCompositeTypeFilterableByAnySubField } from '@/object-record/record-filter/utils/isCompositeTypeFilterableByAnySubField';
import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsCompositeFieldTypeConfigs';
import { CompositeFieldSubFieldName } from '@/settings/data-model/types/CompositeFieldSubFieldName';
+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 { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@@ -110,7 +111,7 @@ export const AdvancedFilterSubFieldSelectMenu = ({
];
return (
- <>
+
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInput.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInput.tsx
index 7f5a52cc4..106cd1352 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInput.tsx
@@ -133,7 +133,6 @@ export const AdvancedFilterValueInput = ({
dropdownHotkeyScope={{ scope: dropdownId }}
dropdownOffset={dropdownContentOffset}
dropdownPlacement="bottom-start"
- dropdownWidth={280}
onClose={handleFilterValueDropdownClose}
onOpen={handleFilterValueDropdownOpen}
/>
diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/constants/AdvancedFilterDropdownContentWidth.ts b/packages/twenty-front/src/modules/object-record/advanced-filter/constants/AdvancedFilterDropdownContentWidth.ts
new file mode 100644
index 000000000..fc02813fe
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/constants/AdvancedFilterDropdownContentWidth.ts
@@ -0,0 +1 @@
+export const ADVANCED_FILTER_DROPDOWN_CONTENT_WIDTH = 650;
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
index 0f0baf1e3..32706de25 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
@@ -5,6 +5,7 @@ import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-
import { useObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useObjectFilterDropdownFilterValue';
import { SingleRecordPickerHotkeyScope } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerHotkeyScope';
import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
+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 { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@@ -51,27 +52,29 @@ export const ObjectFilterDropdownBooleanSelect = () => {
};
return (
- option.toString())}
- hotkeyScope={SingleRecordPickerHotkeyScope.SingleRecordPicker}
- >
-
- {options.map((option) => (
- handleOptionSelect(option)}
- selected={objectFilterDropdownFilterValue === option.toString()}
- >
-
- {objectFilterDropdownFilterValue === option.toString() && (
-
-
-
- )}
-
- ))}
-
-
+
+ option.toString())}
+ hotkeyScope={SingleRecordPickerHotkeyScope.SingleRecordPicker}
+ >
+
+ {options.map((option) => (
+ handleOptionSelect(option)}
+ selected={objectFilterDropdownFilterValue === option.toString()}
+ >
+
+ {objectFilterDropdownFilterValue === option.toString() && (
+
+
+
+ )}
+
+ ))}
+
+
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCountrySelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCountrySelect.tsx
index feb4693b8..b50ac92db 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCountrySelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCountrySelect.tsx
@@ -5,6 +5,7 @@ import { getCountryFlagMenuItemAvatar } from '@/object-record/object-filter-drop
import { turnCountryIntoSelectableItem } from '@/object-record/object-filter-dropdown/utils/turnCountryIntoSelectableItem';
import { SelectableItem } from '@/object-record/select/types/SelectableItem';
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -18,13 +19,7 @@ import { MenuItem, MenuItemMultiSelectAvatar } from 'twenty-ui/navigation';
export const EMPTY_FILTER_VALUE = '[]';
export const MAX_ITEMS_TO_DISPLAY = 5;
-type ObjectFilterDropdownCountrySelectProps = {
- dropdownWidth?: number;
-};
-
-export const ObjectFilterDropdownCountrySelect = ({
- dropdownWidth,
-}: ObjectFilterDropdownCountrySelectProps) => {
+export const ObjectFilterDropdownCountrySelect = () => {
const [searchText, setSearchText] = useState('');
const objectFilterDropdownCurrentRecordFilter = useRecoilComponentValueV2(
@@ -101,7 +96,7 @@ export const ObjectFilterDropdownCountrySelect = ({
const { t } = useLingui();
return (
- <>
+
-
+
{filteredSelectedItems?.map((item) => {
return (
}
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCurrencySelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCurrencySelect.tsx
index 329330c92..3ccbc45d5 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCurrencySelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCurrencySelect.tsx
@@ -5,9 +5,11 @@ import { turnCurrencyIntoSelectableItem } from '@/object-record/object-filter-dr
import { StyledMultipleSelectDropdownAvatarChip } from '@/object-record/select/components/StyledMultipleSelectDropdownAvatarChip';
import { SelectableItem } from '@/object-record/select/types/SelectableItem';
import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
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 { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useLingui } from '@lingui/react/macro';
import { isNonEmptyString } from '@sniptt/guards';
@@ -95,7 +97,7 @@ export const ObjectFilterDropdownCurrencySelect = () => {
searchText !== '';
return (
- <>
+
{
})}
{showNoResult && }
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx
index 60dbcb755..38d7dd55e 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx
@@ -9,17 +9,16 @@ import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { ObjectFilterDropdownBooleanSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect';
-import { ObjectFilterDropdownCurrencySelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownCurrencySelect';
+import { ObjectFilterDropdownOperandDropdown } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown';
import { ObjectFilterDropdownTextInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput';
import { DATE_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/DateFilterTypes';
+import { DATE_PICKER_DROPDOWN_CONTENT_WIDTH } from '@/object-record/object-filter-dropdown/constants/DatePickerDropdownContentWidth';
import { NUMBER_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/NumberFilterTypes';
import { TEXT_FILTER_TYPES } from '@/object-record/object-filter-dropdown/constants/TextFilterTypes';
import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
-import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
-import { isExpectedSubFieldName } from '@/object-record/object-filter-dropdown/utils/isExpectedSubFieldName';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { FieldMetadataType } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
type ObjectFilterDropdownFilterInputProps = {
@@ -36,11 +35,6 @@ export const ObjectFilterDropdownFilterInput = ({
filterDropdownId,
);
- const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
- subFieldNameUsedInDropdownComponentState,
- filterDropdownId,
- );
-
const selectedOperandInDropdown = useRecoilComponentValueV2(
selectedOperandInDropdownComponentState,
filterDropdownId,
@@ -69,74 +63,52 @@ export const ObjectFilterDropdownFilterInput = ({
fieldMetadataItemUsedInDropdown.type,
);
- const isNotASubFieldFilter = !isDefined(subFieldNameUsedInDropdown);
+ const isDateFilter = DATE_FILTER_TYPES.includes(filterType);
+ const isOnlyOperand = !isConfigurable;
- return (
- <>
- {isConfigurable && selectedOperandInDropdown && (
- <>
- {TEXT_FILTER_TYPES.includes(filterType) && (
-
- )}
- {NUMBER_FILTER_TYPES.includes(filterType) && (
-
- )}
- {filterType === 'RATING' && }
- {DATE_FILTER_TYPES.includes(filterType) && (
-
- )}
- {filterType === 'RELATION' && (
- <>
-
-
-
- >
- )}
- {filterType === 'ACTOR' && (
- <>
-
- >
- )}
- {filterType === 'ADDRESS' &&
- (isNotASubFieldFilter ? (
- <>
-
- >
- ) : (
- <>>
- ))}
- {filterType === 'CURRENCY' &&
- (isExpectedSubFieldName(
- FieldMetadataType.CURRENCY,
- 'currencyCode',
- subFieldNameUsedInDropdown,
- ) ? (
- <>
-
- >
- ) : isExpectedSubFieldName(
- FieldMetadataType.CURRENCY,
- 'amountMicros',
- subFieldNameUsedInDropdown,
- ) ? (
- <>
-
- >
- ) : (
-
- ))}
- {['SELECT', 'MULTI_SELECT'].includes(filterType) && (
- <>
-
-
-
- >
- )}
- {filterType === 'BOOLEAN' && }
- >
- )}
- >
- );
+ if (isOnlyOperand) {
+ return (
+
+
+
+ );
+ } else if (isDateFilter) {
+ return (
+
+
+
+
+ );
+ } else {
+ return (
+
+
+ {TEXT_FILTER_TYPES.includes(filterType) && (
+
+ )}
+ {NUMBER_FILTER_TYPES.includes(filterType) && (
+
+ )}
+ {filterType === 'RATING' && }
+ {filterType === 'RELATION' && (
+ <>
+
+
+
+ >
+ )}
+ {filterType === 'ACTOR' && }
+ {filterType === 'ADDRESS' && }
+ {filterType === 'CURRENCY' && }
+ {['SELECT', 'MULTI_SELECT'].includes(filterType) && (
+ <>
+
+
+
+ >
+ )}
+ {filterType === 'BOOLEAN' && }
+
+ );
+ }
};
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx
index e2dc9a0a0..f7187d1e7 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx
@@ -5,16 +5,20 @@ import { selectedOperandInDropdownComponentState } from '@/object-record/object-
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
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 { getOperandLabel } from '../utils/getOperandLabel';
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,
}: {
@@ -29,21 +33,25 @@ export const ObjectFilterDropdownOperandDropdown = ({
const dropdownId = `${filterDropdownId}-operand-dropdown`;
return (
- }
- >
- {getOperandLabel(selectedOperandInDropdown)}
-
- }
- dropdownComponents={}
- dropdownHotkeyScope={{
- scope: FiltersHotkeyScope.ObjectFilterDropdownOperandDropdown,
- }}
- dropdownOffset={{ x: parseInt(theme.spacing(2), 10) }}
- />
+
+ }
+ >
+ {getOperandLabel(selectedOperandInDropdown)}
+
+ }
+ dropdownComponents={}
+ dropdownHotkeyScope={{
+ scope: FiltersHotkeyScope.ObjectFilterDropdownOperandDropdown,
+ }}
+ dropdownOffset={{ x: parseInt(theme.spacing(2), 10) }}
+ />
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx
index 28c2a20de..f34daebc0 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx
@@ -3,6 +3,7 @@ import { useApplyObjectFilterDropdownOperand } from '@/object-record/object-filt
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 { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -45,17 +46,19 @@ export const ObjectFilterDropdownOperandSelect = () => {
};
return (
-
- {operandsForFilterType.map((filterOperand, index) => (
- {
- handleOperandChange(filterOperand);
- closeDropdown();
- }}
- text={getOperandLabel(filterOperand)}
- />
- ))}
-
+
+
+ {operandsForFilterType.map((filterOperand, index) => (
+ {
+ handleOperandChange(filterOperand);
+ closeDropdown();
+ }}
+ text={getOperandLabel(filterOperand)}
+ />
+ ))}
+
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput.tsx
deleted file mode 100644
index bf4e75e33..000000000
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput';
-import { ObjectFilterDropdownOperandDropdown } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown';
-
-type ObjectFilterOperandSelectAndInputProps = {
- filterDropdownId?: string;
-};
-
-export const ObjectFilterOperandSelectAndInput = ({
- filterDropdownId,
-}: ObjectFilterOperandSelectAndInputProps) => {
- return (
- <>
-
-
- >
- );
-};
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/DatePickerDropdownContentWidth.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/DatePickerDropdownContentWidth.ts
new file mode 100644
index 000000000..32b1e96a0
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/DatePickerDropdownContentWidth.ts
@@ -0,0 +1 @@
+export const DATE_PICKER_DROPDOWN_CONTENT_WIDTH = 280;
diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx
index 60fd25e8d..aad3638bd 100644
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx
@@ -1,13 +1,14 @@
import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard';
import { useObjectOptionsForTable } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForTable';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
+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 { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
import { ViewType } from '@/views/types/ViewType';
import { useLingui } from '@lingui/react/macro';
-import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { IconChevronLeft, IconEyeOff } from 'twenty-ui/display';
import { MenuItemNavigate } from 'twenty-ui/navigation';
@@ -51,7 +52,7 @@ export const ObjectOptionsDropdownFieldsContent = () => {
: handleColumnVisibilityChange;
return (
- <>
+
{
text={t`Hidden Fields`}
/>
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
index 14a868249..416158520 100644
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
@@ -7,17 +7,18 @@ import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdow
import { useObjectOptionsForTable } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForTable';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
import { SettingsPath } from '@/types/SettingsPath';
+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 { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
import { ViewType } from '@/views/types/ViewType';
import { useLingui } from '@lingui/react/macro';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { IconChevronLeft, IconSettings } from 'twenty-ui/display';
import { MenuItem, UndecoratedLink } from 'twenty-ui/navigation';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const ObjectOptionsDropdownHiddenFieldsContent = () => {
const { t } = useLingui();
@@ -61,7 +62,7 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
);
return (
- <>
+
{
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx
index fbd7a3c07..ed12e464b 100644
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx
@@ -8,7 +8,9 @@ import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/use
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector';
import { SettingsPath } from '@/types/SettingsPath';
+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 { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
@@ -16,10 +18,9 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
import { useLingui } from '@lingui/react/macro';
import { useLocation } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { IconChevronLeft, IconSettings } from 'twenty-ui/display';
import { MenuItem, UndecoratedLink } from 'twenty-ui/navigation';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
const { t } = useLingui();
@@ -68,20 +69,17 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
}, [hiddenRecordGroupIds, currentContentId, onContentChange]);
return (
- <>
-
- onContentChange('recordGroups')}
- Icon={IconChevronLeft}
- />
- }
- >
- Hidden {recordGroupFieldMetadata?.label}
-
-
-
+
+ onContentChange('recordGroups')}
+ Icon={IconChevronLeft}
+ />
+ }
+ >
+ Hidden {recordGroupFieldMetadata?.label}
+
{
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx
index 4658a6afb..8ae0c7a74 100644
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx
@@ -5,6 +5,7 @@ import { useSetViewTypeFromLayoutOptionsMenu } from '@/object-record/object-opti
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
+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';
@@ -92,7 +93,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
);
return (
- <>
+
{
)}
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx
index cefa938bb..a53f6193f 100644
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx
@@ -3,6 +3,7 @@ import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hook
import { useUpdateObjectViewOptions } from '@/object-record/object-options-dropdown/hooks/useUpdateObjectViewOptions';
import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
+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';
@@ -38,7 +39,7 @@ export const ObjectOptionsDropdownLayoutOpenInContent = () => {
];
return (
- <>
+
{
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
index 2857d1fc5..b2ddd4240 100644
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
@@ -8,6 +8,7 @@ import { recordGroupFieldMetadataComponentState } from '@/object-record/record-g
import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+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 { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@@ -93,7 +94,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
);
return (
- <>
+
{currentView && (
)}
@@ -121,7 +122,6 @@ export const ObjectOptionsDropdownMenuContent = () => {
-
{
hasSubMenu
/>
-
-
-
+
+
}
onClickOutside={onClickOutside}
onClose={() => {
diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
index eb31e4331..da2c923fe 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@@ -8,6 +8,8 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { SelectControl } from '@/ui/input/components/SelectControl';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
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';
@@ -67,7 +69,7 @@ export const Select = ({
disabled: disabledFromProps,
selectSizeVariant,
dropdownId,
- dropdownWidth = 176,
+ dropdownWidth = GenericDropdownContentWidth.Medium,
dropdownWidthAuto = false,
emptyOption,
fullWidth,
@@ -139,7 +141,6 @@ export const Select = ({
) : (
({
/>
}
dropdownComponents={
- <>
+
{!!withSearchInput && (
({
)}
{!!filteredOptions.length && (
-
+
({
/>
)}
- >
+
}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
/>
diff --git a/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx b/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx
index 674c60c7a..6735d4ff2 100644
--- a/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx
@@ -1,4 +1,4 @@
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -96,7 +96,7 @@ export const SelectInput = ({
);
return (
-
+
setSearchFilter(e.target.value)}
@@ -129,6 +129,6 @@ export const SelectInput = ({
);
})}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/input/components/constants/IconPickerDropdownContentWidth.ts b/packages/twenty-front/src/modules/ui/input/components/constants/IconPickerDropdownContentWidth.ts
new file mode 100644
index 000000000..e8bf30d35
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/input/components/constants/IconPickerDropdownContentWidth.ts
@@ -0,0 +1 @@
+export const ICON_PICKER_DROPDOWN_CONTENT_WIDTH = 176;
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
index de2a5b39a..d8daff03f 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
@@ -1,12 +1,12 @@
import { useMemo, useState } from 'react';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
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 { CURRENCIES } from '@/settings/data-model/constants/Currencies';
import { Currency } from '@/ui/input/components/internal/types/Currency';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui/navigation';
export const CurrencyPickerDropdownSelect = ({
@@ -31,7 +31,7 @@ export const CurrencyPickerDropdownSelect = ({
);
return (
-
+
setSearchFilter(event.target.value)}
@@ -65,6 +65,6 @@ export const CurrencyPickerDropdownSelect = ({
>
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx
index 08b00f2b6..5c020f4e9 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx
@@ -6,6 +6,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 { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import 'react-phone-number-input/style.css';
import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui/navigation';
@@ -46,7 +47,7 @@ export const PhoneCountryPickerDropdownSelect = ({
);
return (
- <>
+
setSearchFilter(event.currentTarget.value)}
@@ -90,6 +91,6 @@ export const PhoneCountryPickerDropdownSelect = ({
>
)}
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
index 3ea583d5f..f1f08ecc4 100644
--- a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
+++ b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
@@ -1,7 +1,7 @@
import { SuggestionMenuProps } from '@blocknote/react';
import styled from '@emotion/styled';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { autoUpdate, useFloating } from '@floating-ui/react';
@@ -46,7 +46,7 @@ export const CustomSlashMenu = (props: CustomSlashMenuProps) => {
>
-
+
{props.items.map((item, index) => (
{
/>
))}
-
+
,
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
index e548de70a..cb2ceff27 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
@@ -1,5 +1,5 @@
-import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownOnToggleEffect } from '@/ui/layout/dropdown/components/DropdownOnToggleEffect';
+import { DropdownInternalContainer } from '@/ui/layout/dropdown/components/internal/DropdownInternalContainer';
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/DropdownComponeInstanceContext';
@@ -52,18 +52,17 @@ export type DropdownProps = {
dropdownHotkeyScope: HotkeyScope;
dropdownId: string;
dropdownPlacement?: Placement;
- dropdownWidth?: Width;
dropdownOffset?: DropdownOffset;
dropdownStrategy?: 'fixed' | 'absolute';
onClickOutside?: () => void;
onClose?: () => void;
onOpen?: () => void;
+ excludedClickOutsideIds?: string[];
};
export const Dropdown = ({
clickableComponent,
dropdownComponents,
- dropdownWidth,
hotkey,
dropdownId,
dropdownHotkeyScope,
@@ -74,6 +73,7 @@ export const Dropdown = ({
onClose,
onOpen,
clickableComponentWidth = 'auto',
+ excludedClickOutsideIds,
}: DropdownProps) => {
const { isDropdownOpen, toggleDropdown } = useDropdown(dropdownId);
@@ -182,9 +182,8 @@ export const Dropdown = ({
)}
{isDropdownOpen && (
-
)}
`
display: flex;
- z-index: ${RootStackingContextZIndices.DropdownPortal};
+
+ flex-direction: column;
+ height: 100%;
+ width: ${({ widthInPixels }) => widthInPixels}px;
`;
-export type DropdownContentProps = {
- dropdownId: string;
- dropdownPlacement: Placement;
- floatingUiRefs: UseFloatingReturn['refs'];
- onClickOutside?: () => void;
- hotkeyScope: HotkeyScope;
- floatingStyles: UseFloatingReturn['floatingStyles'];
- hotkey?: {
- key: Keys;
- scope: string;
- };
- onHotkeyTriggered?: () => void;
- dropdownWidth?: `${string}px` | `${number}%` | 'auto' | number;
- dropdownComponents: React.ReactNode;
- parentDropdownId?: string;
-};
-
-export const DropdownContent = ({
- dropdownId,
- dropdownPlacement,
- floatingUiRefs,
- onClickOutside,
- hotkeyScope,
- floatingStyles,
- hotkey,
- onHotkeyTriggered,
- dropdownWidth,
- dropdownComponents,
-}: DropdownContentProps) => {
- const { isDropdownOpen, closeDropdown, setDropdownPlacement } =
- useDropdown(dropdownId);
-
- const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
-
- const dropdownMaxHeight = useRecoilComponentValueV2(
- dropdownMaxHeightComponentState,
- dropdownId,
- );
-
- const dropdownMaxWidth = useRecoilComponentValueV2(
- dropdownMaxWidthComponentState,
- dropdownId,
- );
-
- useEffect(() => {
- setDropdownPlacement(dropdownPlacement);
- }, [dropdownPlacement, setDropdownPlacement]);
-
- useListenClickOutside({
- refs: [floatingUiRefs.floating, floatingUiRefs.domReference],
- listenerId: dropdownId,
- callback: (event) => {
- if (activeDropdownFocusId !== dropdownId) return;
-
- if (isDropdownOpen) {
- event.stopImmediatePropagation();
- event.preventDefault();
-
- closeDropdown();
- }
-
- onClickOutside?.();
- },
- });
-
- useInternalHotkeyScopeManagement({
- dropdownScopeId: dropdownId,
- dropdownHotkeyScopeFromParent: hotkeyScope,
- });
-
- useScopedHotkeys(
- [Key.Escape],
- () => {
- if (activeDropdownFocusId !== dropdownId) return;
-
- if (isDropdownOpen) {
- closeDropdown();
- }
- },
- hotkeyScope?.scope,
- [closeDropdown, isDropdownOpen],
- );
-
- const dropdownMenuStyles = {
- ...floatingStyles,
- maxHeight: dropdownMaxHeight,
- maxWidth: dropdownMaxWidth,
- };
-
- const { excludedClickOutsideId } = useContext(ClickOutsideListenerContext);
-
- return (
- <>
- {hotkey && onHotkeyTriggered && (
-
- )}
-
-
-
-
-
- {dropdownComponents}
-
-
-
-
- >
- );
-};
+export const DropdownContent = forwardRef(
+ (
+ {
+ children,
+ widthInPixels = GenericDropdownContentWidth.Medium,
+ selectDisabled = false,
+ }: React.PropsWithChildren<{
+ widthInPixels?: number;
+ selectDisabled?: boolean;
+ }>,
+ ref: Ref,
+ ) => {
+ return (
+
+ {children}
+
+ );
+ },
+);
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx
deleted file mode 100644
index 8a77b3a6c..000000000
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from '@emotion/styled';
-import { isDefined } from 'twenty-shared/utils';
-
-const StyledDropdownMenu = styled.div<{
- width?: `${string}px` | `${number}%` | 'auto' | number;
-}>`
- display: flex;
-
- flex-direction: column;
- height: 100%;
- width: ${({ width }) =>
- isDefined(width)
- ? typeof width === 'number'
- ? `${width}px`
- : width
- : 'auto'};
-`;
-
-export const DropdownMenu = StyledDropdownMenu;
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
index 61292af64..b8d2c7704 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
@@ -12,6 +12,9 @@ const StyledHeader = styled.li`
border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
padding: ${({ theme }) => theme.spacing(1)};
+ border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+
+ height: ${({ theme }) => theme.spacing(6)};
user-select: none;
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
index fe991177c..41074adfb 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
@@ -6,7 +6,7 @@ import { isDefined } from 'twenty-shared/utils';
const StyledDropdownMenuItemsExternalContainer = styled.div<{
hasMaxHeight?: boolean;
- width: number | 'auto';
+ width: number | 'auto' | '100%';
}>`
--padding: ${({ theme }) => theme.spacing(1)};
@@ -19,10 +19,13 @@ const StyledDropdownMenuItemsExternalContainer = styled.div<{
padding: var(--padding);
${({ width }) =>
- isDefined(width) &&
- css`
- width: ${width}px;
- `}
+ isDefined(width) && width === '100%'
+ ? css`
+ width: 100%;
+ `
+ : css`
+ width: ${width}px;
+ `}
`;
const StyledDropdownMenuItemsInternalContainer = styled.div`
@@ -31,6 +34,7 @@ const StyledDropdownMenuItemsInternalContainer = styled.div`
flex-direction: column;
gap: 2px;
+
height: 100%;
width: 100%;
`;
@@ -39,20 +43,18 @@ const StyledScrollWrapper = styled(ScrollWrapper)`
width: 100%;
`;
-// TODO: refactor this, the dropdown should handle the max height behavior + scroll with the size middleware
-// We should instead create a DropdownMenuItemsContainerScrollable or take for granted that it is the default behavior
export const DropdownMenuItemsContainer = ({
children,
hasMaxHeight,
className,
- width = 200,
scrollable = true,
+ width = 'auto',
}: {
children: React.ReactNode;
hasMaxHeight?: boolean;
className?: string;
scrollable?: boolean;
- width?: number | 'auto';
+ width?: number | 'auto' | '100%';
}) => {
const id = useId();
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx
index 46ffaad7c..9af6e4df5 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx
@@ -32,7 +32,6 @@ const meta: Meta = {
dropdownHotkeyScope: { scope: 'testDropdownMenu' },
dropdownOffset: { x: 0, y: 8 },
dropdownId: 'test-dropdown-id',
- dropdownWidth: '200px',
},
argTypes: {
clickableComponent: { control: false },
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx
index 6c5ba72d7..c439d8465 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx
@@ -2,10 +2,10 @@ import { Meta, StoryObj } from '@storybook/react';
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+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 { AVATAR_URL_MOCK, ComponentDecorator } from 'twenty-ui/testing';
import {
Avatar,
IconChevronLeft,
@@ -13,6 +13,7 @@ import {
IconPlus,
} from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
+import { AVATAR_URL_MOCK, ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Layout/Dropdown/DropdownMenuHeader',
@@ -64,9 +65,11 @@ export const ContextDropdownAndAvatar: Story = {
dropdownId={'story-dropdown-id-context-menu'}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
dropdownComponents={
-
-
-
+
+
+
+
+
}
/>
),
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/internal/DropdownInternalContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/internal/DropdownInternalContainer.tsx
new file mode 100644
index 000000000..6be81d48c
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/internal/DropdownInternalContainer.tsx
@@ -0,0 +1,153 @@
+import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useInternalHotkeyScopeManagement } from '@/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement';
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { dropdownMaxHeightComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxHeightComponentState';
+import { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxWidthComponentState';
+import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
+import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import styled from '@emotion/styled';
+import {
+ FloatingPortal,
+ Placement,
+ UseFloatingReturn,
+} from '@floating-ui/react';
+import { useContext, useEffect } from 'react';
+import { Keys } from 'react-hotkeys-hook';
+import { useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
+
+export const StyledDropdownContentContainer = styled.div`
+ display: flex;
+ z-index: ${RootStackingContextZIndices.DropdownPortal};
+`;
+
+const StyledDropdownInsideContainer = styled.div`
+ display: flex;
+
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+`;
+
+export type DropdownInternalContainerProps = {
+ dropdownId: string;
+ dropdownPlacement: Placement;
+ floatingUiRefs: UseFloatingReturn['refs'];
+ onClickOutside?: () => void;
+ hotkeyScope: HotkeyScope;
+ floatingStyles: UseFloatingReturn['floatingStyles'];
+ hotkey?: {
+ key: Keys;
+ scope: string;
+ };
+ onHotkeyTriggered?: () => void;
+ dropdownComponents: React.ReactNode;
+ parentDropdownId?: string;
+ excludedClickOutsideIds?: string[];
+};
+
+export const DropdownInternalContainer = ({
+ dropdownId,
+ dropdownPlacement,
+ floatingUiRefs,
+ onClickOutside,
+ hotkeyScope,
+ floatingStyles,
+ hotkey,
+ onHotkeyTriggered,
+ dropdownComponents,
+ excludedClickOutsideIds,
+}: DropdownInternalContainerProps) => {
+ const { isDropdownOpen, closeDropdown, setDropdownPlacement } =
+ useDropdown(dropdownId);
+
+ const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
+
+ const dropdownMaxHeight = useRecoilComponentValueV2(
+ dropdownMaxHeightComponentState,
+ dropdownId,
+ );
+
+ const dropdownMaxWidth = useRecoilComponentValueV2(
+ dropdownMaxWidthComponentState,
+ dropdownId,
+ );
+
+ useEffect(() => {
+ setDropdownPlacement(dropdownPlacement);
+ }, [dropdownPlacement, setDropdownPlacement]);
+
+ useListenClickOutside({
+ refs: [floatingUiRefs.floating, floatingUiRefs.domReference],
+ listenerId: dropdownId,
+ callback: (event) => {
+ if (activeDropdownFocusId !== dropdownId) return;
+
+ if (isDropdownOpen) {
+ event.stopImmediatePropagation();
+ event.preventDefault();
+
+ closeDropdown();
+ }
+
+ onClickOutside?.();
+ },
+ excludedClickOutsideIds,
+ });
+
+ useInternalHotkeyScopeManagement({
+ dropdownScopeId: dropdownId,
+ dropdownHotkeyScopeFromParent: hotkeyScope,
+ });
+
+ useScopedHotkeys(
+ [Key.Escape],
+ () => {
+ if (activeDropdownFocusId !== dropdownId) return;
+
+ if (isDropdownOpen) {
+ closeDropdown();
+ }
+ },
+ hotkeyScope?.scope,
+ [closeDropdown, isDropdownOpen],
+ );
+
+ const dropdownMenuStyles = {
+ ...floatingStyles,
+ maxHeight: dropdownMaxHeight,
+ maxWidth: dropdownMaxWidth,
+ };
+
+ const { excludedClickOutsideId } = useContext(ClickOutsideListenerContext);
+
+ return (
+ <>
+ {hotkey && onHotkeyTriggered && (
+
+ )}
+
+
+
+
+
+ {dropdownComponents}
+
+
+
+
+ >
+ );
+};
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/constants/GenericDropdownContentWidth.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/constants/GenericDropdownContentWidth.ts
new file mode 100644
index 000000000..d03c61fa4
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/constants/GenericDropdownContentWidth.ts
@@ -0,0 +1,6 @@
+export enum GenericDropdownContentWidth {
+ Narrow = 160,
+ Medium = 200,
+ Large = 240,
+ ExtraLarge = 320,
+}
diff --git a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx
index afe78dc8a..090dbf527 100644
--- a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx
@@ -1,12 +1,11 @@
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { StyledDropdownContentContainer } from '@/ui/layout/dropdown/components/internal/DropdownInternalContainer';
+import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import styled from '@emotion/styled';
import { FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
import { ReactNode } from 'react';
-import { StyledDropdownContentContainer } from '@/ui/layout/dropdown/components/DropdownContent';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
-import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-
type ExpandedListDropdownProps = {
anchorElement?: HTMLElement;
children: ReactNode;
@@ -40,6 +39,10 @@ export const ExpandedListDropdown = ({
listenerId: 'expandable-list',
});
+ const dropdownContentWidth = anchorElement
+ ? Math.max(220, anchorElement.getBoundingClientRect().width)
+ : undefined;
+
return (
-
+
{children}
-
+
diff --git a/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx b/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx
index b4e434c24..c4b10bd75 100644
--- a/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx
@@ -9,7 +9,6 @@ export const OverlayContainer = styled.div<{
display: flex;
backdrop-filter: ${({ theme }) => theme.blur.medium};
- width: fit-content;
border-radius: ${({ theme, borderRadius }) =>
theme.border.radius[borderRadius ?? 'md']};
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
deleted file mode 100644
index 0ba5464fb..000000000
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import styled from '@emotion/styled';
-
-import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
-import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID } from '@/ui/layout/show-page/constants/ShowPageAddButtonDropdownId';
-
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { isWorkflowSubObjectMetadata } from '@/object-metadata/utils/isWorkflowSubObjectMetadata';
-import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission';
-import { Dropdown } from '../../dropdown/components/Dropdown';
-import { Button } from 'twenty-ui/input';
-import { IconCheckbox, IconNotes, IconPlus } from 'twenty-ui/display';
-import { MenuItem } from 'twenty-ui/navigation';
-
-const StyledContainer = styled.div`
- z-index: 1;
-`;
-
-export const ShowPageAddButton = ({
- activityTargetObject,
-}: {
- activityTargetObject: ActivityTargetableObject;
-}) => {
- const { closeDropdown } = useDropdown(SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID);
-
- const openNote = useOpenCreateActivityDrawer({
- activityObjectNameSingular: CoreObjectNameSingular.Note,
- });
- const openTask = useOpenCreateActivityDrawer({
- activityObjectNameSingular: CoreObjectNameSingular.Task,
- });
-
- const hasObjectReadOnlyPermission = useHasObjectReadOnlyPermission();
-
- const handleSelect = (objectNameSingular: CoreObjectNameSingular) => {
- if (objectNameSingular === CoreObjectNameSingular.Note) {
- openNote({
- targetableObjects: [activityTargetObject],
- });
- } else if (objectNameSingular === CoreObjectNameSingular.Task) {
- openTask({
- targetableObjects: [activityTargetObject],
- });
- }
-
- closeDropdown();
- };
-
- if (
- activityTargetObject.targetObjectNameSingular ===
- CoreObjectNameSingular.Task ||
- activityTargetObject.targetObjectNameSingular ===
- CoreObjectNameSingular.Note ||
- isWorkflowSubObjectMetadata(activityTargetObject.targetObjectNameSingular)
- ) {
- return;
- }
-
- if (hasObjectReadOnlyPermission) {
- return null;
- }
-
- return (
-
-
- }
- dropdownComponents={
-
- handleSelect(CoreObjectNameSingular.Note)}
- accent="default"
- LeftIcon={IconNotes}
- text="Note"
- />
- handleSelect(CoreObjectNameSingular.Task)}
- accent="default"
- LeftIcon={IconCheckbox}
- text="Task"
- />
-
- }
- dropdownHotkeyScope={{ scope: PageHotkeyScope.ShowPage }}
- />
-
- );
-};
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx
index b03888beb..764425253 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx
@@ -11,6 +11,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+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';
@@ -92,7 +93,7 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
};
return (
- <>
+
{
dropdownId={'multi-workspace-dropdown-context-menu'}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
dropdownComponents={
-
-
-
+
+
+
+
+
}
/>
}
>
{currentWorkspace?.displayName}
-
{workspaces.length > 1 && (
<>
@@ -193,6 +195,6 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx
index 426b50884..2ab08f372 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx
@@ -1,3 +1,4 @@
+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';
@@ -7,7 +8,6 @@ import { useLingui } from '@lingui/react/macro';
import { useSetRecoilState } from 'recoil';
import { IconCheck, IconChevronLeft } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
-import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
export const MultiWorkspaceDropdownThemesComponents = () => {
const { t } = useLingui();
@@ -19,7 +19,7 @@ export const MultiWorkspaceDropdownThemesComponents = () => {
);
return (
- <>
+
{
>
{t`Theme`}
-
{colorSchemeList.map((theme) => (
{
/>
))}
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx
index cb8a4e8bc..bb247cbaf 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx
@@ -2,6 +2,7 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { Workspaces, workspacesState } from '@/auth/states/workspaces';
import { useBuildWorkspaceUrl } from '@/domain-manager/hooks/useBuildWorkspaceUrl';
import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
+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';
@@ -32,7 +33,7 @@ export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
const [searchValue, setSearchValue] = useState('');
return (
- <>
+
{
>
{t`Other workspaces`}
-
{
))}
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx
index d01ac7204..2c63d267c 100644
--- a/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx
@@ -32,7 +32,6 @@ export const AdvancedFilterDropdownButton = () => {
dropdownHotkeyScope={{ scope: ADVANCED_FILTER_DROPDOWN_ID }}
dropdownOffset={{ y: 8, x: 0 }}
dropdownPlacement="bottom-start"
- dropdownWidth="100%"
onOpen={handleOpenAdvancedFilterDropdown}
/>
);
diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
index 1f8116448..f7a12a38c 100644
--- a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
@@ -51,13 +51,14 @@ export const EditableFilterChip = ({
const recordFilterIsEmpty = isRecordFilterConsideredEmpty(recordFilter);
const labelKey = `${fieldNameLabel}${!operandIsEmptiness && !recordFilterIsEmpty ? operandLabelShort : operandIsEmptiness ? ` ${operandLabelShort}` : ''}`;
+ const labelValue = operandIsEmptiness ? '' : recordFilter.displayValue;
return (
}
dropdownComponents={
-
+
}
dropdownHotkeyScope={hotkeyScope}
dropdownOffset={{ y: 8, x: 0 }}
dropdownPlacement="bottom-start"
onClickOutside={handleDropdownClickOutside}
- dropdownWidth={280}
/>
>
);
diff --git a/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx b/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
index 9495135d4..33be2ba16 100644
--- a/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
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 { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -18,8 +19,8 @@ import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPicke
import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
import { t } from '@lingui/core/macro';
-import { Button, ButtonGroup, IconButton } from 'twenty-ui/input';
import { IconChevronDown, IconPlus } from 'twenty-ui/display';
+import { Button, ButtonGroup, IconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
const StyledContainer = styled.div`
@@ -118,13 +119,15 @@ export const UpdateViewButtonGroup = ({
/>
}
dropdownComponents={
-
-
-
+
+
+
+
+
}
/>
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx
index 450417761..6c0d1d3a1 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx
@@ -3,6 +3,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
+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';
@@ -51,6 +52,7 @@ export const ViewBarFilterDropdown = ({
dropdownHotkeyScope={hotkeyScope}
dropdownOffset={{ y: 8 }}
onClickOutside={handleDropdownClickOutside}
+ excludedClickOutsideIds={[OPERAND_DROPDOWN_CLICK_OUTSIDE_ID]}
/>
);
};
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx
index 240e2e832..32dbf9003 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx
@@ -1,7 +1,6 @@
-import { ObjectFilterOperandSelectAndInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput';
+import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput';
import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { ViewBarFilterDropdownAdvancedFilterButton } from '@/views/components/ViewBarFilterDropdownAdvancedFilterButton';
import { ViewBarFilterDropdownFieldSelectMenu } from '@/views/components/ViewBarFilterDropdownFieldSelectMenu';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
@@ -16,14 +15,11 @@ export const ViewBarFilterDropdownContent = () => {
return (
<>
{shouldShowFilterInput ? (
-
) : (
- <>
-
-
- >
+
)}
>
);
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx
index 1d2e7d46b..fad4f0476 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx
@@ -10,7 +10,9 @@ import { SelectableList } from '@/ui/layout/selectable-list/components/Selectabl
import { FILTER_FIELD_LIST_ID } from '@/object-record/object-filter-dropdown/constants/FilterFieldListId';
import { useFilterDropdownSelectableFieldMetadataItems } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdownSelectableFieldMetadataItems';
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { ViewBarFilterDropdownAdvancedFilterButton } from '@/views/components/ViewBarFilterDropdownAdvancedFilterButton';
import { ViewBarFilterDropdownFieldSelectMenuItem } from '@/views/components/ViewBarFilterDropdownFieldSelectMenuItem';
import { useLingui } from '@lingui/react/macro';
@@ -65,7 +67,7 @@ export const ViewBarFilterDropdownFieldSelectMenu = () => {
const { t } = useLingui();
return (
- <>
+
{
selectableItemIdArray={selectableFieldMetadataItemIds}
selectableListInstanceId={FILTER_FIELD_LIST_ID}
>
-
+
{selectableVisibleFieldMetadataItems.map(
(visibleFieldMetadataItem) => (
{
))}
- >
+
+
);
};
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
index 3166ee5c9..03f452593 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
@@ -5,6 +5,7 @@ import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMeta
import { IconPicker } from '@/ui/input/components/IconPicker';
import { Select } from '@/ui/input/components/Select';
import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+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';
@@ -15,13 +16,14 @@ import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
-import { ViewsHotkeyScope } from '@/views/types/ViewsHotkeyScope';
import { ViewType, viewTypeIconMapping } from '@/views/types/ViewType';
+import { ViewsHotkeyScope } from '@/views/types/ViewsHotkeyScope';
import { ViewPickerCreateButton } from '@/views/view-picker/components/ViewPickerCreateButton';
import { ViewPickerIconAndNameContainer } from '@/views/view-picker/components/ViewPickerIconAndNameContainer';
import { ViewPickerSaveButtonContainer } from '@/views/view-picker/components/ViewPickerSaveButtonContainer';
import { ViewPickerSelectContainer } from '@/views/view-picker/components/ViewPickerSelectContainer';
import { VIEW_PICKER_KANBAN_FIELD_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerKanbanFieldDropdownId';
+import { VIEW_PICKER_TYPE_SELECT_OPTIONS } from '@/views/view-picker/constants/ViewPickerTypeSelectOptions';
import { VIEW_PICKER_VIEW_TYPE_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerViewTypeDropdownId';
import { useCreateViewFromCurrentState } from '@/views/view-picker/hooks/useCreateViewFromCurrentState';
import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
@@ -35,7 +37,6 @@ import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPic
import { useLingui } from '@lingui/react/macro';
import { useMemo, useState } from 'react';
import { IconX } from 'twenty-ui/display';
-import { VIEW_PICKER_TYPE_SELECT_OPTIONS } from '@/views/view-picker/constants/ViewPickerTypeSelectOptions';
const StyledNoKanbanFieldAvailableContainer = styled.div`
color: ${({ theme }) => theme.font.color.light};
@@ -130,7 +131,7 @@ export const ViewPickerContentCreateMode = () => {
};
return (
- <>
+
@@ -138,7 +139,6 @@ export const ViewPickerContentCreateMode = () => {
>
{t`Create view`}
-
{
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx
index e7648e9e4..32faaf5ff 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx
@@ -2,6 +2,7 @@ import { Key } from 'ts-key-enum';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+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';
@@ -66,7 +67,7 @@ export const ViewPickerContentEditMode = () => {
};
return (
- <>
+
{
>
Edit view
-
{
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
index 5c2ba7198..2cdc16afd 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
@@ -6,6 +6,7 @@ import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/
import { prefetchViewsFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchViewsFromObjectMetadataItemFamilySelector';
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
+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';
@@ -94,7 +95,7 @@ export const ViewPickerListContent = () => {
);
return (
- <>
+
{
text={t`Add view`}
/>
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerOptionDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerOptionDropdown.tsx
index d9b6431a7..c7ffe2867 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerOptionDropdown.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerOptionDropdown.tsx
@@ -1,5 +1,6 @@
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 { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown';
@@ -81,38 +82,40 @@ export const ViewPickerOptionDropdown = ({
dropdownPlacement="bottom-start"
dropdownId={`view-picker-options-${view.id}`}
dropdownContent={
-
- {isIndexView ? (
-
- ) : (
- <>
+
+
+ {isIndexView ? (
+ ) : (
+ <>
+
- {
- onEdit(event, view.id);
- closeDropdown();
- }}
- />
-
- >
- )}
-
+ {
+ onEdit(event, view.id);
+ closeDropdown();
+ }}
+ />
+
+ >
+ )}
+
+
}
/>
>
diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx
index e6e80c371..ec5858868 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx
@@ -2,6 +2,7 @@ import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilte
import { SelectControl } from '@/ui/input/components/SelectControl';
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+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';
@@ -176,7 +177,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
dropdownComponents={
<>
{isSystemObjectsOpen ? (
- <>
+
))}
- >
+
) : (
- <>
+
)}
- >
+
)}
>
}
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
index d25d2a057..bb317e938 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
@@ -10,6 +10,7 @@ import {
import { isBaseOutputSchema } from '@/workflow/workflow-variables/utils/isBaseOutputSchema';
import { isRecordOutputSchema } from '@/workflow/workflow-variables/utils/isRecordOutputSchema';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { activeTabIdComponentState } from '@/ui/layout/tab/states/activeTabIdComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@@ -117,7 +118,7 @@ export const WorkflowVariablesDropdownFieldItems = ({
: options;
return (
- <>
+
))}
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems.tsx
index 3829e3d84..1b29cdefe 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems.tsx
@@ -8,6 +8,7 @@ import { getStepHeaderLabel } from '@/workflow/workflow-variables/utils/getStepH
import { isBaseOutputSchema } from '@/workflow/workflow-variables/utils/isBaseOutputSchema';
import { isRecordOutputSchema } from '@/workflow/workflow-variables/utils/isRecordOutputSchema';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { useState } from 'react';
import {
@@ -98,7 +99,7 @@ export const WorkflowVariablesDropdownObjectItems = ({
: options;
return (
- <>
+
))}
- >
+
);
};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx
index 69f68a64d..0be3fc421 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx
@@ -1,3 +1,4 @@
+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';
@@ -32,7 +33,7 @@ export const WorkflowVariablesDropdownWorkflowStepItems = ({
);
return (
- <>
+
)}
- >
+
);
};
diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
deleted file mode 100644
index 9c3831776..000000000
--- a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { PageFavoriteButton } from '@/favorites/components/PageFavoriteButton';
-import { PageFavoriteFoldersDropdown } from '@/favorites/components/PageFavoriteFolderDropdown';
-import { FAVORITE_FOLDER_PICKER_DROPDOWN_ID } from '@/favorites/favorite-folder-picker/constants/FavoriteFolderPickerDropdownId';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton';
-import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
-import { useIsMobile } from 'twenty-ui/utilities';
-
-type RecordShowPageBaseHeaderProps = {
- isFavorite: boolean;
- record: ObjectRecord | undefined;
- objectMetadataItem: ObjectMetadataItem;
- objectNameSingular: string;
- handleFavoriteButtonClick: () => void;
-};
-
-export const RecordShowPageBaseHeader = ({
- isFavorite,
- record,
- objectMetadataItem,
- objectNameSingular,
- handleFavoriteButtonClick,
-}: RecordShowPageBaseHeaderProps) => {
- const isMobile = useIsMobile();
-
- return (
- <>
- {!isMobile && (
- <>
- {isFavorite ? (
-
- ) : (
-
- )}
-
- >
- )}
-
- >
- );
-};