Expandable list remove anchor (#5559)

Deprecate anchorElement on ExpandableList to avoid props drilling. The
anchorElement should be the ExpandableList container itself

Author: charlesBochet

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

@@ -104,12 +104,7 @@ export const CalendarEventParticipantsResponseStatusField = ({
         </StyledLabelAndIconContainer>
         <StyledDiv ref={participantsContainerRef}>
           {isRightDrawerAnimationCompleted && (
-            <ExpandableList
-              anchorElement={participantsContainerRef.current || undefined}
-              isChipCountDisplayed
-            >
-              {styledChips}
-            </ExpandableList>
+            <ExpandableList isChipCountDisplayed>{styledChips}</ExpandableList>
           )}
         </StyledDiv>
       </StyledInlineCellBaseContainer>

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

@@ -6,7 +6,6 @@ import { ExpandableList } from '@/ui/layout/expandable-list/components/Expandabl
 
 type ActivityTargetChipsProps = {
   activityTargetObjectRecords: ActivityTargetWithTargetRecord[];
-  anchorElement?: HTMLElement;
   maxWidth?: number;
 };
 
@@ -19,12 +18,11 @@ const StyledContainer = styled.div<{ maxWidth?: number }>`
 
 export const ActivityTargetChips = ({
   activityTargetObjectRecords,
-  anchorElement,
   maxWidth,
 }: ActivityTargetChipsProps) => {
   return (
     <StyledContainer maxWidth={maxWidth}>
-      <ExpandableList anchorElement={anchorElement} isChipCountDisplayed>
+      <ExpandableList isChipCountDisplayed>
         {activityTargetObjectRecords.map(
           (activityTargetObjectRecord, index) => (
             <RecordChip

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

@@ -53,9 +53,8 @@ export const ActivityTargetsInlineCell = ({
           />
         }
         label="Relations"
-        displayModeContent={({ cellElement }) => (
+        displayModeContent={() => (
           <ActivityTargetChips
-            anchorElement={cellElement}
             activityTargetObjectRecords={activityTargetObjectRecords}
             maxWidth={maxWidth}
           />

packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx

@@ -80,7 +80,6 @@ export const FieldDisplay = ({
   ) : isFieldLinks(fieldDefinition) ? (
     <LinksFieldDisplay
       isCellSoftFocused={isCellSoftFocused}
-      cellElement={cellElement}
       fromTableCell={fromTableCell}
     />
   ) : isFieldCurrency(fieldDefinition) ? (

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/LinksFieldDisplay.tsx

@@ -3,21 +3,18 @@ import { LinksDisplay } from '@/ui/field/display/components/LinksDisplay';
 
 type LinksFieldDisplayProps = {
   isCellSoftFocused?: boolean;
-  cellElement?: HTMLElement;
   fromTableCell?: boolean;
 };
 
 export const LinksFieldDisplay = ({
   isCellSoftFocused,
-  cellElement,
   fromTableCell,
 }: LinksFieldDisplayProps) => {
   const { fieldValue } = useLinksField();
 
   return (
     <LinksDisplay
       value={fieldValue}
-      anchorElement={cellElement}
       isChipCountDisplayed={isCellSoftFocused}
       withExpandedListBorder={fromTableCell}
     />

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx

@@ -11,7 +11,6 @@ type MultiSelectFieldDisplayProps = {
 
 export const MultiSelectFieldDisplay = ({
   isCellSoftFocused,
-  cellElement,
   fromTableCell,
 }: MultiSelectFieldDisplayProps) => {
   const { fieldValues, fieldDefinition } = useMultiSelectField();
@@ -26,7 +25,6 @@ export const MultiSelectFieldDisplay = ({
 
   return (
     <ExpandableList
-      anchorElement={cellElement}
       isChipCountDisplayed={isCellSoftFocused}
       withExpandedListBorder={fromTableCell}
     >

packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx

@@ -17,13 +17,12 @@ import { getUrlHostName } from '~/utils/url/getUrlHostName';
 
 type LinksDisplayProps = Pick<
   ExpandableListProps,
-  'anchorElement' | 'isChipCountDisplayed' | 'withExpandedListBorder'
+  'isChipCountDisplayed' | 'withExpandedListBorder'
 > & {
   value?: FieldLinksValue;
 };
 
 export const LinksDisplay = ({
-  anchorElement,
   isChipCountDisplayed,
   withExpandedListBorder,
   value,
@@ -55,7 +54,6 @@ export const LinksDisplay = ({
 
   return (
     <ExpandableList
-      anchorElement={anchorElement}
       isChipCountDisplayed={isChipCountDisplayed}
       withExpandedListBorder={withExpandedListBorder}
     >

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx

@@ -41,7 +41,6 @@ const StyledChipCount = styled(Chip)`
 `;
 
 export type ExpandableListProps = {
-  anchorElement?: HTMLElement;
   isChipCountDisplayed?: boolean;
   withExpandedListBorder?: boolean;
 };
@@ -53,7 +52,6 @@ export type ChildrenProperty = {
 
 export const ExpandableList = ({
   children,
-  anchorElement,
   isChipCountDisplayed: isChipCountDisplayedFromProps,
   withExpandedListBorder = false,
 }: {
@@ -75,10 +73,10 @@ export const ExpandableList = ({
   // @see https://floating-ui.com/docs/useFloating#elements
   const [childrenContainerElement, setChildrenContainerElement] =
     useState<HTMLDivElement | null>(null);
+
   const [previousChildrenContainerWidth, setPreviousChildrenContainerWidth] =
     useState(childrenContainerElement?.clientWidth ?? 0);
 
-  // Used with useListenClickOutside.
   const containerRef = useRef<HTMLDivElement>(null);
 
   const [firstHiddenChildIndex, setFirstHiddenChildIndex] = useState(
@@ -165,7 +163,7 @@ export const ExpandableList = ({
       )}
       {isListExpanded && (
         <ExpandedListDropdown
-          anchorElement={anchorElement ?? childrenContainerElement ?? undefined}
+          anchorElement={containerRef.current ?? undefined}
           onClickOutside={() => {
             resetFirstHiddenChildIndex();
             setIsListExpanded(false);

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx

@@ -42,7 +42,7 @@ export const ExpandedListDropdown = ({
   const { refs, floatingStyles } = useFloating({
     // @ts-expect-error placement accepts 'start' as value even if the typing does not permit it
     placement: 'start',
-    middleware: [offset({ mainAxis: -1, crossAxis: -1 })],
+    middleware: [offset({ mainAxis: -9, crossAxis: -7 })],
     elements: { reference: anchorElement },
   });
 

packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx

@@ -35,7 +35,6 @@ const meta: Meta<typeof ExpandableList> = {
   },
   argTypes: {
     children: { control: false },
-    anchorElement: { control: false },
   },
 };