Remove --rdg-scroll-height (#3980)

* Remove `--rdg-scroll-height`

* increase actionTimeout?

Author: nstepien

src/DataGrid.tsx

@@ -340,7 +340,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     [columnWidths]
   );
 
-  const [gridRef, gridWidth, gridHeight, horizontalScrollbarHeight] = useGridDimensions();
+  const [gridRef, gridWidth, gridHeight] = useGridDimensions();
   const {
     columns,
     colSpanColumns,
@@ -461,8 +461,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   const maxColIdx = columns.length - 1;
   const selectedCellIsWithinSelectionBounds = isCellWithinSelectionBounds(selectedPosition);
   const selectedCellIsWithinViewportBounds = isCellWithinViewportBounds(selectedPosition);
-  const scrollHeight =
-    headerRowHeight + totalRowHeight + summaryRowsHeight + horizontalScrollbarHeight;
 
   /**
    * The identity of the wrapper function is stable so it won't break memoization
@@ -1189,7 +1187,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
         gridTemplateColumns,
         gridTemplateRows: templateRows,
         '--rdg-header-row-height': `${headerRowHeight}px`,
-        '--rdg-scroll-height': `${scrollHeight}px`,
         ...layoutCssVars
       }}
       dir={direction}

src/hooks/useGridDimensions.ts

@@ -5,7 +5,6 @@ export function useGridDimensions() {
   const gridRef = useRef<HTMLDivElement>(null);
   const [inlineSize, setInlineSize] = useState(1);
   const [blockSize, setBlockSize] = useState(1);
-  const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState(0);
 
   useLayoutEffect(() => {
     const { ResizeObserver } = window;
@@ -14,25 +13,18 @@ export function useGridDimensions() {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (ResizeObserver == null) return;
 
-    const { clientWidth, clientHeight, offsetWidth, offsetHeight } = gridRef.current!;
-    const { width, height } = gridRef.current!.getBoundingClientRect();
-    const initialHorizontalScrollbarHeight = offsetHeight - clientHeight;
-    const initialWidth = width - offsetWidth + clientWidth;
-    const initialHeight = height - initialHorizontalScrollbarHeight;
+    const { clientWidth, clientHeight } = gridRef.current!;
 
-    setInlineSize(initialWidth);
-    setBlockSize(initialHeight);
-    setHorizontalScrollbarHeight(initialHorizontalScrollbarHeight);
+    setInlineSize(clientWidth);
+    setBlockSize(clientHeight);
 
     const resizeObserver = new ResizeObserver((entries) => {
       const size = entries[0].contentBoxSize[0];
-      const { clientHeight, offsetHeight } = gridRef.current!;
 
       // we use flushSync here to avoid flashing scrollbars
       flushSync(() => {
         setInlineSize(size.inlineSize);
         setBlockSize(size.blockSize);
-        setHorizontalScrollbarHeight(offsetHeight - clientHeight);
       });
     });
     resizeObserver.observe(gridRef.current!);
@@ -42,5 +34,5 @@ export function useGridDimensions() {
     };
   }, []);
 
-  return [gridRef, inlineSize, blockSize, horizontalScrollbarHeight] as const;
+  return [gridRef, inlineSize, blockSize] as const;
 }

vite.config.ts

@@ -1,6 +1,6 @@
 import { tanstackRouter } from '@tanstack/router-plugin/vite';
 import react from '@vitejs/plugin-react';
-import { playwright } from '@vitest/browser-playwright';
+import { playwright, type PlaywrightProviderOptions } from '@vitest/browser-playwright';
 import { ecij } from 'ecij/plugin';
 import { defineConfig, type ViteUserConfig } from 'vitest/config';
 import type { BrowserCommand, BrowserInstanceOption } from 'vitest/node';
@@ -43,27 +43,26 @@ const viewport = { width: 1920, height: 1080 } as const;
 
 // vitest modifies the instance objects, so we cannot rely on static objects
 function getInstances(): BrowserInstanceOption[] {
+  const opts: PlaywrightProviderOptions = {
+    actionTimeout: 2000,
+    contextOptions: {
+      viewport
+    }
+  };
+
   return [
     {
       browser: 'chromium',
       provider: playwright({
-        actionTimeout: 1000,
-        contextOptions: {
-          viewport
-        },
+        ...opts,
         launchOptions: {
           channel: 'chromium'
         }
       })
     },
     {
       browser: 'firefox',
-      provider: playwright({
-        actionTimeout: 1000,
-        contextOptions: {
-          viewport
-        }
-      }),
+      provider: playwright(opts),
       // TODO: remove when FF tests are stable
       fileParallelism: false
     }