Migrate to twenty-ui - navigation/menu-item (#8213)

This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7536](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7536). --- ### Description Migrate all menu items components to twenty ui and update imports. ```typescript MenuItem MenuItemAvata MenuItemCommand MenuItemCommandHotKeys MenuItemDraggable MenuItemMultiSelect MenuItemMultiSelectAvatar MenuItemMultiSelectTag MenuItemNavigate MenuItemSelect MenuItemSelectAvatar MenuItemSelectColor MenuItemSelectTag MenuItemSuggestion MenuItemToggle ``` \ Also migrate all other dependent components and utilities like `Checkbox` & `Toggle`\ \ Fixes twentyhq/private-issues#82 --------- Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: Lucas Bordeau <[email protected]>
twentyhq · Nov 7, 2024 · 6264d50 · 6264d50
1 parent f9a136a
commit 6264d50
Show file tree

Hide file tree

Showing 106 changed files with 326 additions and 256 deletions.
diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
@@ -10,10 +10,10 @@ import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDro
 import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+import { MenuItem } from 'twenty-ui';
 
 type StyledContainerProps = {
   position: PositionType;

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx
@@ -1,8 +1,7 @@
+import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
-import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
-import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
+import { MOBILE_VIEWPORT, MenuItemAccent } from 'twenty-ui';
 
 type RecordShowActionMenuBarEntryProps = {
   entry: ActionMenuEntry;

diff --git a/...-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx b/...-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx
@@ -8,13 +8,13 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
 import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
-import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
 import { userEvent, waitFor, within } from '@storybook/test';
 import {
   ComponentDecorator,
   IconFileExport,
   IconHeart,
   IconTrash,
+  MenuItemAccent,
 } from 'twenty-ui';
 
 const deleteMock = jest.fn();

diff --git a/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts b/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts
@@ -1,7 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
-import { IconComponent } from 'twenty-ui';
-
-import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
+import { IconComponent, MenuItemAccent } from 'twenty-ui';
 
 export type ActionMenuEntry = {
   type: 'standard' | 'workflow-run';

diff --git a/...les/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx b/...les/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx
@@ -1,9 +1,8 @@
 import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
-import { MenuItemAvatar } from '@/ui/navigation/menu-item/components/MenuItemAvatar';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { IconPlus } from 'twenty-ui';
+import { IconPlus, MenuItemAvatar } from 'twenty-ui';
 
 export const MessageThreadSubscriberDropdownAddSubscriberMenuItem = ({
   workspaceMember,

diff --git a/...front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx b/...front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx
@@ -1,5 +1,5 @@
 import { offset } from '@floating-ui/react';
-import { IconMinus, IconPlus } from 'twenty-ui';
+import { IconMinus, IconPlus, MenuItem, MenuItemAvatar } from 'twenty-ui';
 
 import { MessageThreadSubscriberDropdownAddSubscriber } from '@/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriber';
 import { MessageThreadSubscribersChip } from '@/activities/emails/components/MessageThreadSubscribersChip';
@@ -10,8 +10,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 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 { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemAvatar } from '@/ui/navigation/menu-item/components/MenuItemAvatar';
 import { useState } from 'react';
 
 export const 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
@@ -4,13 +4,13 @@ import {
   IconPencil,
   IconTrash,
   LightIconButton,
+  MenuItem,
 } from 'twenty-ui';
 
 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 { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type AttachmentDropdownProps = {
   onDownload: () => void;

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
@@ -1,9 +1,8 @@
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
-import { IconArrowUpRight, IconComponent } from 'twenty-ui';
+import { IconArrowUpRight, IconComponent, MenuItemCommand } from 'twenty-ui';
 
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItemCommand } from '@/ui/navigation/menu-item/components/MenuItemCommand';
 
 import { useCommandMenu } from '../hooks/useCommandMenu';
 

diff --git a/...rc/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx b/...rc/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx
@@ -4,7 +4,6 @@ import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dr
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
@@ -13,7 +12,13 @@ import { availableFilterDefinitionsComponentState } from '@/views/states/availab
 import { ViewFilterGroup } from '@/views/types/ViewFilterGroup';
 import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator';
 import { useCallback } from 'react';
-import { IconLibraryPlus, IconPlus, isDefined, LightButton } from 'twenty-ui';
+import {
+  IconLibraryPlus,
+  IconPlus,
+  isDefined,
+  LightButton,
+  MenuItem,
+} from 'twenty-ui';
 import { v4 } from 'uuid';
 
 type AdvancedFilterAddFilterRuleSelectProps = {

diff --git a/...rc/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx b/...rc/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx
@@ -4,10 +4,9 @@ import { useCurrentViewViewFilterGroup } from '@/object-record/advanced-filter/h
 import { useDeleteCombinedViewFilterGroup } from '@/object-record/advanced-filter/hooks/useDeleteCombinedViewFilterGroup';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
-import { isDefined } from 'twenty-ui';
+import { isDefined, MenuItem } from 'twenty-ui';
 
 type AdvancedFilterRuleOptionsDropdownProps =
   | {

diff --git a/...odules/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect.tsx b/...odules/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect.tsx
@@ -6,12 +6,11 @@ import { SelectControl } from '@/ui/input/components/SelectControl';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import styled from '@emotion/styled';
-import { isDefined } from 'twenty-ui';
+import { isDefined, MenuItem } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   flex: 1;

diff --git a/...ront/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx b/...ront/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx
@@ -3,16 +3,19 @@ import { useUpsertCombinedViewFilterGroup } from '@/object-record/advanced-filte
 import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
-import { StyledMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator';
 import styled from '@emotion/styled';
-import { IconFilter, Pill } from 'twenty-ui';
+import {
+  IconFilter,
+  MenuItemLeftContent,
+  Pill,
+  StyledMenuItemBase,
+} from 'twenty-ui';
 import { v4 } from 'uuid';
 
 export const StyledContainer = styled.div`

diff --git a/...ject-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx b/...ject-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx
@@ -12,11 +12,16 @@ import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dr
 import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsCompositeFieldTypeConfigs';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { IconApps, IconChevronLeft, isDefined, useIcons } from 'twenty-ui';
+import {
+  IconApps,
+  IconChevronLeft,
+  isDefined,
+  MenuItem,
+  useIcons,
+} from 'twenty-ui';
 
 export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
   const [searchText] = useState('');

diff --git a/...ect-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx b/...ect-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx
@@ -13,11 +13,10 @@ import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dr
 import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useRecoilValue } from 'recoil';
-import { useIcons } from 'twenty-ui';
+import { MenuItemSelect, useIcons } from 'twenty-ui';
 
 export type ObjectFilterDropdownFilterSelectMenuItemProps = {
   filterDefinition: FilterDefinition;

diff --git a/...les/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx b/...les/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx
@@ -3,8 +3,8 @@ import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+import { MenuItem } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';

diff --git a/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx b/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx
@@ -13,10 +13,10 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemMultiSelect } from '@/ui/navigation/menu-item/components/MenuItemMultiSelect';
+
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { MenuItem, MenuItemMultiSelect } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 export const EMPTY_FILTER_VALUE = '';

diff --git a/...cord/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx b/...cord/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx
@@ -1,9 +1,8 @@
-import { IconFilterOff } from 'twenty-ui';
+import { IconFilterOff, MenuItem } from 'twenty-ui';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 export const ObjectFilterDropdownRecordRemoveFilterMenuItem = () => {
   const { emptyFilterButKeepDefinition } = useFilterDropdown();

diff --git a/...nt/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/...nt/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconChevronDown, useIcons } from 'twenty-ui';
+import { IconChevronDown, MenuItem, useIcons } from 'twenty-ui';
 
 import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
 import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
@@ -14,7 +14,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';

diff --git a/...ject-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx b/...ject-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx
@@ -4,8 +4,8 @@ import { useCallback, useRef } from 'react';
 import { useRecordGroupActions } from '@/object-record/record-group/hooks/useRecordGroupActions';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { MenuItem } from 'twenty-ui';
 
 const StyledMenuContainer = styled.div`
   position: absolute;

diff --git a/...rc/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/...rc/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import React, { useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
-import { IconCheck, IconPlus, LightIconButton } from 'twenty-ui';
+import { IconCheck, IconPlus, LightIconButton, MenuItem } from 'twenty-ui';
 
 import { PhoneRecord } from '@/object-record/record-field/types/FieldMetadata';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@@ -11,7 +11,6 @@ import {
 } from '@/ui/layout/dropdown/components/DropdownMenuInput';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

diff --git a/...modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx b/...modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx
@@ -1,13 +1,13 @@
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown';
 import { useState } from 'react';
 import {
   IconBookmark,
   IconBookmarkPlus,
   IconPencil,
   IconTrash,
+  MenuItem,
 } from 'twenty-ui';
 
 type MultiItemFieldMenuItemProps<T> = {

diff --git a/.../modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx b/.../modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx
@@ -12,9 +12,9 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItemMultiSelectTag } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectTag';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { MenuItemMultiSelectTag } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 

diff --git a/...nt/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx b/...nt/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx
@@ -1,8 +1,7 @@
 import { RecordGroupDefinitionType } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { useRecordIndexPageKanbanAddMenuItem } from '@/object-record/record-index/hooks/useRecordIndexPageKanbanAddMenuItem';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import styled from '@emotion/styled';
-import { Tag } from 'twenty-ui';
+import { MenuItem, Tag } from 'twenty-ui';
 
 const StyledMenuItem = styled(MenuItem)`
   width: calc(100% - 2 * var(--horizontal-padding));

diff --git a/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
@@ -9,6 +9,9 @@ import {
   IconRotate2,
   IconSettings,
   IconTag,
+  MenuItem,
+  MenuItemNavigate,
+  MenuItemToggle,
   UndecoratedLink,
   useIcons,
 } from 'twenty-ui';
@@ -36,9 +39,6 @@ import { DropdownMenuHeader } 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 { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
-import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';

diff --git a/...cord/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/...cord/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
@@ -10,6 +10,7 @@ import {
   IconTrash,
   IconUnlink,
   LightIconButton,
+  MenuItem,
 } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -38,7 +39,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 const StyledListItem = styled(RecordDetailRecordsListItem)<{