feat: display Links field as Expandable List (#5374)

Closes #5114

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
@@ -88,7 +88,6 @@ export const CalendarEventParticipantsResponseStatusField = ({
   ];
 
   const participantsContainerRef = useRef<HTMLDivElement>(null);
-  const [isHovered, setIsHovered] = useState(false);
   const styledChips = orderedParticipants.map((participant, index) => (
     <ParticipantChip key={index} participant={participant} />
   ));
@@ -103,16 +102,11 @@ export const CalendarEventParticipantsResponseStatusField = ({
             <EllipsisDisplay>{responseStatus}</EllipsisDisplay>
           </StyledLabelContainer>
         </StyledLabelAndIconContainer>
-        <StyledDiv
-          ref={participantsContainerRef}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
+        <StyledDiv ref={participantsContainerRef}>
           {isRightDrawerAnimationCompleted && (
             <ExpandableList
-              isHovered={isHovered}
-              reference={participantsContainerRef.current || undefined}
-              forceDisplayHiddenCount
+              anchorElement={participantsContainerRef.current || undefined}
+              isChipCountDisplayed
             >
               {styledChips}
             </ExpandableList>

packages/twenty-front/src/modules/activities/components/ActivityTargetChips.tsx

@@ -2,10 +2,13 @@ import styled from '@emotion/styled';
 
 import { ActivityTargetWithTargetRecord } from '@/activities/types/ActivityTargetObject';
 import { RecordChip } from '@/object-record/components/RecordChip';
-import {
-  ExpandableList,
-  ExpandableListProps,
-} from '@/ui/layout/expandable-list/components/ExpandableList';
+import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
+
+type ActivityTargetChipsProps = {
+  activityTargetObjectRecords: ActivityTargetWithTargetRecord[];
+  anchorElement?: HTMLElement;
+  maxWidth?: number;
+};
 
 const StyledContainer = styled.div<{ maxWidth?: number }>`
   display: flex;
@@ -16,20 +19,12 @@ const StyledContainer = styled.div<{ maxWidth?: number }>`
 
 export const ActivityTargetChips = ({
   activityTargetObjectRecords,
-  isHovered,
-  reference,
+  anchorElement,
   maxWidth,
-}: {
-  activityTargetObjectRecords: ActivityTargetWithTargetRecord[];
-  maxWidth?: number;
-} & ExpandableListProps) => {
+}: ActivityTargetChipsProps) => {
   return (
     <StyledContainer maxWidth={maxWidth}>
-      <ExpandableList
-        isHovered={isHovered}
-        reference={reference}
-        forceDisplayHiddenCount
-      >
+      <ExpandableList anchorElement={anchorElement} isChipCountDisplayed>
         {activityTargetObjectRecords.map(
           (activityTargetObjectRecord, index) => (
             <RecordChip

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx

@@ -53,12 +53,13 @@ export const ActivityTargetsInlineCell = ({
           />
         }
         label="Relations"
-        displayModeContent={
+        displayModeContent={({ cellElement }) => (
           <ActivityTargetChips
+            anchorElement={cellElement}
             activityTargetObjectRecords={activityTargetObjectRecords}
             maxWidth={maxWidth}
           />
-        }
+        )}
         isDisplayModeContentEmpty={activityTargetObjectRecords.length === 0}
       />
     </RecordFieldInputScope>