Expandable list remove anchor (#5559)

Deprecate anchorElement on ExpandableList to avoid props drilling. The anchorElement should be the ExpandableList container itself
2024-12-26 13:31:45 +03:00 · 2024-05-24 12:26:42 +02:00 · 2024-05-24 12:26:42 +02:00 · 82ec30c957
commit 82ec30c957
parent 7f7ea59b51
10 changed files with 7 additions and 26 deletions
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx
+++ b/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>
--- a/packages/twenty-front/src/modules/activities/components/ActivityTargetChips.tsx
+++ b/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
--- a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx
+++ b/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}
          />
--- a/packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx
+++ b/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) ? (
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/LinksFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/LinksFieldDisplay.tsx
@ -3,13 +3,11 @@ 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();
@ -17,7 +15,6 @@ export const LinksFieldDisplay = ({
  return (
    <LinksDisplay
      value={fieldValue}
-      anchorElement={cellElement}
      isChipCountDisplayed={isCellSoftFocused}
      withExpandedListBorder={fromTableCell}
    />
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx
+++ b/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}
    >
--- a/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx
+++ b/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}
    >
--- a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx
+++ b/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);
--- a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx
+++ b/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 },
  });

--- a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/stories/ExpandableList.stories.tsx
+++ b/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 },
  },
 };