Refactor/new menu item (#1448)

* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests

front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx

@@ -1,12 +1,12 @@
 import { useRef } from 'react';
 import debounce from 'lodash.debounce';
 
-import { DropdownMenuCheckableItem } from '@/ui/dropdown/components/DropdownMenuCheckableItem';
 import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
-import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+import { MenuItemMultiSelectAvatar } from '@/ui/menu-item/components/MenuItemMultiSelectAvatar';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { Avatar } from '@/users/components/Avatar';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
@@ -81,26 +81,25 @@ export function MultipleEntitySelect<
       <StyledDropdownMenuSeparator />
       <StyledDropdownMenuItemsContainer hasMaxHeight>
         {entitiesInDropdown?.map((entity) => (
-          <DropdownMenuCheckableItem
+          <MenuItemMultiSelectAvatar
             key={entity.id}
-            checked={value[entity.id]}
-            onChange={(newCheckedValue) =>
+            selected={value[entity.id]}
+            onSelectChange={(newCheckedValue) =>
               onChange({ ...value, [entity.id]: newCheckedValue })
             }
-          >
-            <Avatar
-              avatarUrl={entity.avatarUrl}
-              colorId={entity.id}
-              placeholder={entity.name}
-              size="md"
-              type={entity.avatarType ?? 'rounded'}
-            />
-            {entity.name}
-          </DropdownMenuCheckableItem>
+            avatar={
+              <Avatar
+                avatarUrl={entity.avatarUrl}
+                colorId={entity.id}
+                placeholder={entity.name}
+                size="md"
+                type={entity.avatarType ?? 'rounded'}
+              />
+            }
+            text={entity.name}
+          />
         ))}
-        {entitiesInDropdown?.length === 0 && (
-          <DropdownMenuItem>No result</DropdownMenuItem>
-        )}
+        {entitiesInDropdown?.length === 0 && <MenuItem text="No result" />}
       </StyledDropdownMenuItemsContainer>
     </StyledDropdownMenu>
   );

front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx

@@ -1,12 +1,11 @@
 import { useRef } from 'react';
-import { useTheme } from '@emotion/react';
 
 import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
-import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { IconPlus } from '@/ui/icon';
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
@@ -39,8 +38,6 @@ export function SingleEntitySelect<
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const theme = useTheme();
-
   const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
 
   const showCreateButton = isDefined(onCreate) && searchFilter !== '';
@@ -76,10 +73,7 @@ export function SingleEntitySelect<
       {showCreateButton && (
         <>
           <StyledDropdownMenuItemsContainer hasMaxHeight>
-            <DropdownMenuItem onClick={onCreate}>
-              <IconPlus size={theme.icon.size.md} />
-              Add New
-            </DropdownMenuItem>
+            <MenuItem onClick={onCreate} LeftIcon={IconPlus} text="Add New" />
           </StyledDropdownMenuItemsContainer>
           <StyledDropdownMenuSeparator />
         </>

front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx

@@ -1,12 +1,10 @@
 import { useRef } from 'react';
-import { useTheme } from '@emotion/react';
 import { Key } from 'ts-key-enum';
 
-import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { IconBuildingSkyscraper, IconUserCircle } from '@/ui/icon';
-import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+import { MenuItemSelectAvatar } from '@/ui/menu-item/components/MenuItemSelectAvatar';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { Avatar } from '@/users/components/Avatar';
 import { isDefined } from '~/utils/isDefined';
@@ -76,43 +74,44 @@ export function SingleEntitySelectBase<
   entitiesInDropdown = entitiesInDropdown.filter((entity) =>
     isNonEmptyString(entity.name.trim()),
   );
-  const theme = useTheme();
+
+  const NoUserIcon =
+    noUser?.entityType === Entity.User
+      ? IconUserCircle
+      : IconBuildingSkyscraper;
 
   return (
     <StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
       {noUser && (
-        <DropdownMenuItem onClick={() => onEntitySelected(noUser)}>
-          {noUser.entityType === Entity.User ? (
-            <IconUserCircle size={theme.icon.size.md} />
-          ) : (
-            <IconBuildingSkyscraper
-              size={theme.icon.size.md}
-            ></IconBuildingSkyscraper>
-          )}
-          {noUser.name}
-        </DropdownMenuItem>
+        <MenuItem
+          onClick={() => onEntitySelected(noUser)}
+          LeftIcon={NoUserIcon}
+          text={noUser.name}
+        />
       )}
       {entities.loading ? (
         <DropdownMenuSkeletonItem />
       ) : entitiesInDropdown.length === 0 ? (
-        <DropdownMenuItem>No result</DropdownMenuItem>
+        <MenuItem text="No result" />
       ) : (
-        entitiesInDropdown?.map((entity, index) => (
-          <DropdownMenuSelectableItem
+        entitiesInDropdown?.map((entity) => (
+          <MenuItemSelectAvatar
             key={entity.id}
+            testId="menu-item"
             selected={entities.selectedEntity?.id === entity.id}
-            hovered={hoveredIndex === index}
             onClick={() => onEntitySelected(entity)}
-          >
-            <Avatar
-              avatarUrl={entity.avatarUrl}
-              colorId={entity.id}
-              placeholder={entity.name}
-              size="md"
-              type={entity.avatarType ?? 'rounded'}
-            />
-            <OverflowingTextWithTooltip text={entity.name} />
-          </DropdownMenuSelectableItem>
+            text={entity.name}
+            hovered={hoveredIndex === entitiesInDropdown.indexOf(entity)}
+            avatar={
+              <Avatar
+                avatarUrl={entity.avatarUrl}
+                colorId={entity.id}
+                placeholder={entity.name}
+                size="md"
+                type={entity.avatarType ?? 'rounded'}
+              />
+            }
+          />
         ))
       )}
     </StyledDropdownMenuItemsContainer>