refactor: use portal inside datagrid to ensure scoped styles still apply

- misc cleanup
elastic · Sep 13, 2024 · 2ccfb4d · 2ccfb4d
1 parent c57438e
commit 2ccfb4d
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 9 deletions.
diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx
@@ -52,6 +52,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
   gridStyles,
   className,
   columnDragDrop,
+  wrapperRef,
 }) => {
   /**
    * Columns & widths
@@ -107,6 +108,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
     schemaDetectors,
     gridStyles,
     columnDragDrop,
+    wrapperRef,
   });
 
   const { footerRow } = useDataGridFooter({

diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx
@@ -202,6 +202,7 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
         schemaDetectors,
         gridStyles,
         columnDragDrop,
+        wrapperRef,
       });
 
       const { footerRow, footerRowHeight } = useDataGridFooter({

diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts
@@ -62,8 +62,8 @@ export const euiDataGridHeaderCellStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     euiDataGridHeaderCellDraggable: css`
-      // override internal styling from @hello-pangea/dnd to ensure positioning
-      ${logicalCSS('top', '0 !important;')}
+      /* override internal styling from @hello-pangea/dnd to ensure positioning */
+      ${logicalCSS('top', '0 !important')}
       display: 'flex';
       ${logicalCSS('width', '100%')}
     `,
@@ -73,11 +73,10 @@ export const euiDataGridHeaderCellStyles = (euiThemeContext: UseEuiTheme) => {
       align-items: center;
       gap: ${euiTheme.size.xs};
       border-radius: ${euiTheme.border.radius.small};
-      // font-weight: $euiFontWeightBold;
       outline: none;
 
       svg {
-        flex: 0 0 auto; // Ensure icon doesn't shrink
+        flex: 0 0 auto; /* Ensure icon doesn't shrink */
         display: flex;
         align-items: center;
         justify-content: center;

diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.test.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.test.tsx
@@ -46,6 +46,7 @@ describe('EuiDataGridHeaderCell', () => {
     setColumnWidth: jest.fn(),
     setVisibleColumns: jest.fn(),
     switchColumnPos: jest.fn(),
+    wrapperRef: { current: null },
   };
 
   it('renders', () => {

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
@@ -57,6 +57,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
       schema,
       schemaDetectors,
       columnDragDrop,
+      wrapperRef,
     }) => {
       const { id, display, displayAsText, displayHeaderCellProps } = column;
       const title = displayAsText || id;
@@ -346,7 +347,18 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
                * 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;
+              return isDragging ? (
+                <EuiPortal
+                  insert={{
+                    sibling: wrapperRef.current!, // using portal inside DataGrid to ensure styles are applied in scope
+                    position: 'after',
+                  }}
+                >
+                  {content}
+                </EuiPortal>
+              ) : (
+                content
+              );
             }}
           </EuiDraggable>
         </EuiFlexGroup>

diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.styles.ts b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.styles.ts
@@ -50,7 +50,7 @@ export const euiDataGridHeaderStyles = (euiThemeContext: UseEuiTheme) => {
     shade: css`
       background-color: ${euiTheme.colors.lightestShade};
 
-      // ensure correct background on drag
+      /* ensure correct background on drag */
       .euiDataGridHeaderCellDraggable .euiDataGridHeaderCell {
         background-color: ${euiTheme.colors.lightestShade};
       }

diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.test.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.test.tsx
@@ -21,6 +21,7 @@ describe('EuiDataGridHeaderRow', () => {
     setVisibleColumns: jest.fn(),
     switchColumnPos: jest.fn(),
     gridStyles: { header: 'shade' as const },
+    wrapperRef: { current: null },
   };
 
   it('renders', () => {

diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.tsx
@@ -8,11 +8,9 @@
 
 import classnames from 'classnames';
 import React, { forwardRef, memo, useContext, useMemo } from 'react';
-
-import { useEuiMemoizedStyles } from '../../../../services';
 import { OnDragEndResponder } from '@hello-pangea/dnd';
 
-import { useGeneratedHtmlId } from '../../../../services';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../../services';
 import { EuiDragDropContext, EuiDroppable } from '../../../drag_and_drop';
 import { DataGridFocusContext } from '../../utils/focus';
 import {
@@ -40,6 +38,7 @@ const EuiDataGridHeaderRow = memo(
       schema,
       schemaDetectors,
       gridStyles,
+      wrapperRef,
       columnDragDrop,
       ...rest
     } = props;
@@ -94,6 +93,7 @@ const EuiDataGridHeaderRow = memo(
             schema={schema}
             schemaDetectors={schemaDetectors}
             columnDragDrop={columnDragDrop}
+            wrapperRef={wrapperRef}
           />
         )),
       [
@@ -108,6 +108,7 @@ const EuiDataGridHeaderRow = memo(
         setVisibleColumns,
         sorting,
         switchColumnPos,
+        wrapperRef,
       ]
     );
 

diff --git a/packages/eui/src/components/datagrid/data_grid_types.ts b/packages/eui/src/components/datagrid/data_grid_types.ts
@@ -142,6 +142,7 @@ export interface EuiDataGridHeaderRowPropsSpecificProps {
   setColumnWidth: (columnId: string, width: number) => void;
   setVisibleColumns: (columnId: string[]) => void;
   switchColumnPos: (colFromId: string, colToId: string) => void;
+  wrapperRef: MutableRefObject<HTMLDivElement | null>;
   gridStyles: EuiDataGridStyle;
   columnDragDrop?: boolean;
 }