Expandable list remove anchor (#5559)

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

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 },
   },
 };