From 8749f434f68a0fcc4c5f30afa06f798bdec266eb Mon Sep 17 00:00:00 2001
From: Arkadiy Stepanov <arst@equinor.com>
Date: Thu, 14 Nov 2024 14:32:26 +0100
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Expose=20ref=20to=20Datagrid?=
 =?UTF-8?q?=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../eds-data-grid-react/src/EdsDataGrid.tsx   | 133 ++++++++++--------
 1 file changed, 73 insertions(+), 60 deletions(-)

diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.tsx
index 753a55f613..ffa22c3175 100644
--- a/packages/eds-data-grid-react/src/EdsDataGrid.tsx
+++ b/packages/eds-data-grid-react/src/EdsDataGrid.tsx
@@ -22,12 +22,14 @@ import {
 import { useVirtualizer } from '@tanstack/react-virtual'
 import {
   CSSProperties,
+  forwardRef,
   HTMLAttributes,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  ForwardedRef,
 } from 'react'
 import styled from 'styled-components'
 import { TableProvider } from './EdsDataGridContext'
@@ -39,66 +41,70 @@ import {
   addPxSuffixIfInputHasNoPrefix,
   logDevelopmentWarningOfPropUse,
 } from './utils'
+import { mergeRefs } from '@equinor/eds-utils'
 
-export function EdsDataGrid<T>({
-  rows,
-  columns,
-  columnResizeMode,
-  pageSize,
-  rowSelection,
-  enableRowSelection,
-  enableMultiRowSelection,
-  enableSubRowSelection,
-  selectedRows,
-  rowSelectionState,
-  enableColumnFiltering,
-  debug,
-  enablePagination,
-  enableSorting,
-  stickyHeader,
-  stickyFooter,
-  onSelectRow,
-  onRowSelectionChange,
-  caption,
-  enableVirtual,
-  virtualHeight,
-  columnVisibility,
-  columnVisibilityChange,
-  emptyMessage,
-  columnOrder,
-  cellClass,
-  cellStyle,
-  rowClass,
-  rowStyle,
-  headerClass,
-  headerStyle,
-  footerClass,
-  footerStyle,
-  externalPaginator,
-  onSortingChange,
-  manualSorting,
-  sortingState,
-  columnPinState,
-  scrollbarHorizontal,
-  width,
-  minWidth,
-  height,
-  getRowId,
-  rowVirtualizerInstanceRef,
-  tableInstanceRef,
-  columnSizing,
-  onColumnResize,
-  expansionState,
-  setExpansionState,
-  getSubRows,
-  defaultColumn,
-  onRowContextMenu,
-  onRowClick,
-  onCellClick,
-  enableFooter,
-  enableSortingRemoval,
-  ...rest
-}: EdsDataGridProps<T> & HTMLAttributes<HTMLDivElement>) {
+function EdsDataGridInner<T>(
+  {
+    rows,
+    columns,
+    columnResizeMode,
+    pageSize,
+    rowSelection,
+    enableRowSelection,
+    enableMultiRowSelection,
+    enableSubRowSelection,
+    selectedRows,
+    rowSelectionState,
+    enableColumnFiltering,
+    debug,
+    enablePagination,
+    enableSorting,
+    stickyHeader,
+    stickyFooter,
+    onSelectRow,
+    onRowSelectionChange,
+    caption,
+    enableVirtual,
+    virtualHeight,
+    columnVisibility,
+    columnVisibilityChange,
+    emptyMessage,
+    columnOrder,
+    cellClass,
+    cellStyle,
+    rowClass,
+    rowStyle,
+    headerClass,
+    headerStyle,
+    footerClass,
+    footerStyle,
+    externalPaginator,
+    onSortingChange,
+    manualSorting,
+    sortingState,
+    columnPinState,
+    scrollbarHorizontal,
+    width,
+    minWidth,
+    height,
+    getRowId,
+    rowVirtualizerInstanceRef,
+    tableInstanceRef,
+    columnSizing,
+    onColumnResize,
+    expansionState,
+    setExpansionState,
+    getSubRows,
+    defaultColumn,
+    onRowContextMenu,
+    onRowClick,
+    onCellClick,
+    enableFooter,
+    enableSortingRemoval,
+    ...rest
+  }: EdsDataGridProps<T> & HTMLAttributes<HTMLDivElement>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
   logDevelopmentWarningOfPropUse({
     virtualHeight: {
       value: virtualHeight,
@@ -404,7 +410,7 @@ export function EdsDataGrid<T>({
         {...rest}
         className={`table-wrapper ${rest.className ?? ''}`}
         style={{ ...rest.style, ...tableWrapperStyle }}
-        ref={parentRef}
+        ref={mergeRefs(parentRef, ref)}
         $height={height}
         $width={width}
         $scrollbarHorizontal={scrollbarHorizontal}
@@ -567,3 +573,10 @@ const TableWrapper = styled.div<{
   contain: ${({ $height, $width }) =>
     Boolean($height) && Boolean($width) ? 'strict' : 'unset'};
 `
+
+export const EdsDataGrid = forwardRef(EdsDataGridInner) as <T>(
+  props: EdsDataGridProps<T> &
+    HTMLAttributes<HTMLDivElement> & {
+      ref?: ForwardedRef<HTMLDivElement>
+    },
+) => ReturnType<typeof EdsDataGridInner>

From 9db53a27367cb295715d3100b4ebbfe952dc79e1 Mon Sep 17 00:00:00 2001
From: Arkadiy Stepanov <arst@equinor.com>
Date: Fri, 15 Nov 2024 10:10:28 +0100
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=9A=A7=20Requested=20change?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/eds-data-grid-react/src/EdsDataGrid.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.tsx
index ffa22c3175..3dba060c3d 100644
--- a/packages/eds-data-grid-react/src/EdsDataGrid.tsx
+++ b/packages/eds-data-grid-react/src/EdsDataGrid.tsx
@@ -360,6 +360,10 @@ function EdsDataGridInner<T>(
   }
 
   const parentRef = useRef<HTMLDivElement>(null)
+  const combinedRef = useMemo(
+    () => mergeRefs<HTMLDivElement>(parentRef, ref),
+    [parentRef, ref],
+  )
 
   /**
    * Virtualization setup
@@ -410,7 +414,7 @@ function EdsDataGridInner<T>(
         {...rest}
         className={`table-wrapper ${rest.className ?? ''}`}
         style={{ ...rest.style, ...tableWrapperStyle }}
-        ref={mergeRefs(parentRef, ref)}
+        ref={combinedRef}
         $height={height}
         $width={width}
         $scrollbarHorizontal={scrollbarHorizontal}