refactor: use portal for dragged items

- this reparenting approach is required due to transform context of datagrid which interfers with the positioning of dragged items
elastic · Sep 12, 2024 · 517cf26 · 517cf26
1 parent 579ece5
commit 517cf26
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/packages/eui/src/components/datagrid/body/header/_data_grid_header_row.scss b/packages/eui/src/components/datagrid/body/header/_data_grid_header_row.scss
@@ -180,6 +180,11 @@
  }
 }
 
+.euiDataGridHeaderCell--isDragging {
+ // required to ensure background is set on cloned item when dragging
+ background: tintOrShade($euiColorLightestShade, 0%, 10%);
+}
+
 @include euiDataGridStyles(headerShade, bordersAll) {
  @include euiDataGridHeaderCell {
  border-right: $euiBorderThin;
@@ -189,10 +194,6 @@
  &:not(.euiDraggable__item):first-of-type {
  border-left: $euiBorderThin;
  }
-
- &.euiDataGridHeaderCell--isDragging {
- border: $euiBorderThin;
- }
  }
 
  // this will become simpler in Emotion

diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
@@ -31,6 +31,7 @@ import { EuiPopover } from '../../../popover';
 import { _emptyHoverStyles } from '../../../button/button_icon/button_icon.styles';
 import { EuiDraggable } from '../../../drag_and_drop';
 import { EuiFlexGroup } from '../../../flex';
+import { EuiPortal } from '../../../portal';
 import { DataGridFocusContext } from '../../utils/focus';
 import {
  EuiDataGridHeaderCellProps,
@@ -308,14 +309,15 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
  {/* keep the resizer outside of Draggable to ensure both are working independently */}
  {columnResizer}
  <EuiDraggable
+ key={`draggable-${id}`}
  draggableId={id}
  className="euiDataGridHeaderDraggable"
  index={index}
  customDragHandle="custom"
  // override internal styling from @hello-pangea/dnd
  css={{ display: 'flex', top: '0 !important' }}
  >
- {({ dragHandleProps }, { isDragging }) => {
+ {({ draggableProps, dragHandleProps }, { isDragging }) => {
  const {
  role,
  'aria-describedby': ariaDescribedby,
@@ -328,16 +330,28 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
  'aria-describedby': `${contentProps['aria-describedby']} ${ariaDescribedby}`,
  };
 
- return (
+ const dragProps = isDragging && draggableProps;
+
+ const content = (
  <EuiDataGridHeaderCellWrapper
+ key={id}
  isDragging={isDragging}
  onBlur={handleOnBlur}
  onMouseDown={handleOnMouseDown}
+ {...dragProps}
  {...dragContentProps}
  >
  {renderContent}
  </EuiDataGridHeaderCellWrapper>
  );
+
+ /**
+ * Requires reparenting of the draggable item into a portal while dragging to ensure
+ * correct positioning inside transform context. The recommended cloningAPI would require
+ * code duplication, using our own portal in place is cleaner.
+ * https://github.com/hello-pangea/dnd/blob/8f8cc785171bf67f660f7306d16666a1945e29a6/docs/guides/reparenting.md
+ */
+ return isDragging ? <EuiPortal>{content}</EuiPortal> : content;
  }}
  </EuiDraggable>
  </EuiFlexGroup>