[pull] main from Comcast:main

.vscode/settings.json

@@ -1,6 +1,9 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
+    "source.fixAll": "explicit",
+    "source.removeUnusedImports": "explicit",
+    // prevent removal of unreachable code
+    "source.fixAll.ts": "never"
   },
   "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.formatOnSave": true,

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
     }
@@ -89,8 +88,7 @@ export default defineConfig(
           target: 'react',
           generatedRouteTree: 'website/routeTree.gen.ts',
           routesDirectory: 'website/routes',
-          autoCodeSplitting: true,
-          verboseFileRoutes: false
+          autoCodeSplitting: true
         }),
       react({
         exclude: ['./.cache/**/*', './node_modules/**/*', './website/routeTree.gen.ts']

website/root.tsx

@@ -2,37 +2,9 @@ import './root.css';
 
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import {
-  createHashHistory,
-  createRouter,
-  ErrorComponent,
-  RouterProvider
-} from '@tanstack/react-router';
+import { RouterProvider } from '@tanstack/react-router';
 
-import { routeTree } from './routeTree.gen';
-
-const router = createRouter({
-  routeTree,
-  history: createHashHistory(),
-  caseSensitive: true,
-  defaultErrorComponent: ErrorComponent,
-  defaultNotFoundComponent: NotFound,
-  defaultPendingMinMs: 0,
-  defaultPreload: 'intent',
-  defaultStructuralSharing: true,
-  scrollRestoration: true
-});
-
-// Register the router instance for type safety
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router;
-  }
-}
-
-function NotFound() {
-  return 'Nothing to see here';
-}
+import { router } from './router';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

website/routeTree.gen.ts

@@ -8,8 +8,6 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
-import type { CreateFileRoute, FileRoutesByPath } from '@tanstack/react-router'
-
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as VariableRowHeightRouteImport } from './routes/VariableRowHeight'
 import { Route as TreeViewRouteImport } from './routes/TreeView'
@@ -457,196 +455,6 @@ declare module '@tanstack/react-router' {
   }
 }
 
-declare module './routes/index' {
-  const createFileRoute: CreateFileRoute<
-    '/',
-    FileRoutesByPath['/']['parentRoute'],
-    FileRoutesByPath['/']['id'],
-    FileRoutesByPath['/']['path'],
-    FileRoutesByPath['/']['fullPath']
-  >
-}
-declare module './routes/AllFeatures' {
-  const createFileRoute: CreateFileRoute<
-    '/AllFeatures',
-    FileRoutesByPath['/AllFeatures']['parentRoute'],
-    FileRoutesByPath['/AllFeatures']['id'],
-    FileRoutesByPath['/AllFeatures']['path'],
-    FileRoutesByPath['/AllFeatures']['fullPath']
-  >
-}
-declare module './routes/Animation' {
-  const createFileRoute: CreateFileRoute<
-    '/Animation',
-    FileRoutesByPath['/Animation']['parentRoute'],
-    FileRoutesByPath['/Animation']['id'],
-    FileRoutesByPath['/Animation']['path'],
-    FileRoutesByPath['/Animation']['fullPath']
-  >
-}
-declare module './routes/CellNavigation' {
-  const createFileRoute: CreateFileRoute<
-    '/CellNavigation',
-    FileRoutesByPath['/CellNavigation']['parentRoute'],
-    FileRoutesByPath['/CellNavigation']['id'],
-    FileRoutesByPath['/CellNavigation']['path'],
-    FileRoutesByPath['/CellNavigation']['fullPath']
-  >
-}
-declare module './routes/ColumnGrouping' {
-  const createFileRoute: CreateFileRoute<
-    '/ColumnGrouping',
-    FileRoutesByPath['/ColumnGrouping']['parentRoute'],
-    FileRoutesByPath['/ColumnGrouping']['id'],
-    FileRoutesByPath['/ColumnGrouping']['path'],
-    FileRoutesByPath['/ColumnGrouping']['fullPath']
-  >
-}
-declare module './routes/ColumnSpanning' {
-  const createFileRoute: CreateFileRoute<
-    '/ColumnSpanning',
-    FileRoutesByPath['/ColumnSpanning']['parentRoute'],
-    FileRoutesByPath['/ColumnSpanning']['id'],
-    FileRoutesByPath['/ColumnSpanning']['path'],
-    FileRoutesByPath['/ColumnSpanning']['fullPath']
-  >
-}
-declare module './routes/ColumnsReordering' {
-  const createFileRoute: CreateFileRoute<
-    '/ColumnsReordering',
-    FileRoutesByPath['/ColumnsReordering']['parentRoute'],
-    FileRoutesByPath['/ColumnsReordering']['id'],
-    FileRoutesByPath['/ColumnsReordering']['path'],
-    FileRoutesByPath['/ColumnsReordering']['fullPath']
-  >
-}
-declare module './routes/CommonFeatures' {
-  const createFileRoute: CreateFileRoute<
-    '/CommonFeatures',
-    FileRoutesByPath['/CommonFeatures']['parentRoute'],
-    FileRoutesByPath['/CommonFeatures']['id'],
-    FileRoutesByPath['/CommonFeatures']['path'],
-    FileRoutesByPath['/CommonFeatures']['fullPath']
-  >
-}
-declare module './routes/ContextMenu' {
-  const createFileRoute: CreateFileRoute<
-    '/ContextMenu',
-    FileRoutesByPath['/ContextMenu']['parentRoute'],
-    FileRoutesByPath['/ContextMenu']['id'],
-    FileRoutesByPath['/ContextMenu']['path'],
-    FileRoutesByPath['/ContextMenu']['fullPath']
-  >
-}
-declare module './routes/CustomizableRenderers' {
-  const createFileRoute: CreateFileRoute<
-    '/CustomizableRenderers',
-    FileRoutesByPath['/CustomizableRenderers']['parentRoute'],
-    FileRoutesByPath['/CustomizableRenderers']['id'],
-    FileRoutesByPath['/CustomizableRenderers']['path'],
-    FileRoutesByPath['/CustomizableRenderers']['fullPath']
-  >
-}
-declare module './routes/HeaderFilters' {
-  const createFileRoute: CreateFileRoute<
-    '/HeaderFilters',
-    FileRoutesByPath['/HeaderFilters']['parentRoute'],
-    FileRoutesByPath['/HeaderFilters']['id'],
-    FileRoutesByPath['/HeaderFilters']['path'],
-    FileRoutesByPath['/HeaderFilters']['fullPath']
-  >
-}
-declare module './routes/InfiniteScrolling' {
-  const createFileRoute: CreateFileRoute<
-    '/InfiniteScrolling',
-    FileRoutesByPath['/InfiniteScrolling']['parentRoute'],
-    FileRoutesByPath['/InfiniteScrolling']['id'],
-    FileRoutesByPath['/InfiniteScrolling']['path'],
-    FileRoutesByPath['/InfiniteScrolling']['fullPath']
-  >
-}
-declare module './routes/MasterDetail' {
-  const createFileRoute: CreateFileRoute<
-    '/MasterDetail',
-    FileRoutesByPath['/MasterDetail']['parentRoute'],
-    FileRoutesByPath['/MasterDetail']['id'],
-    FileRoutesByPath['/MasterDetail']['path'],
-    FileRoutesByPath['/MasterDetail']['fullPath']
-  >
-}
-declare module './routes/MillionCells' {
-  const createFileRoute: CreateFileRoute<
-    '/MillionCells',
-    FileRoutesByPath['/MillionCells']['parentRoute'],
-    FileRoutesByPath['/MillionCells']['id'],
-    FileRoutesByPath['/MillionCells']['path'],
-    FileRoutesByPath['/MillionCells']['fullPath']
-  >
-}
-declare module './routes/NoRows' {
-  const createFileRoute: CreateFileRoute<
-    '/NoRows',
-    FileRoutesByPath['/NoRows']['parentRoute'],
-    FileRoutesByPath['/NoRows']['id'],
-    FileRoutesByPath['/NoRows']['path'],
-    FileRoutesByPath['/NoRows']['fullPath']
-  >
-}
-declare module './routes/ResizableGrid' {
-  const createFileRoute: CreateFileRoute<
-    '/ResizableGrid',
-    FileRoutesByPath['/ResizableGrid']['parentRoute'],
-    FileRoutesByPath['/ResizableGrid']['id'],
-    FileRoutesByPath['/ResizableGrid']['path'],
-    FileRoutesByPath['/ResizableGrid']['fullPath']
-  >
-}
-declare module './routes/RowGrouping' {
-  const createFileRoute: CreateFileRoute<
-    '/RowGrouping',
-    FileRoutesByPath['/RowGrouping']['parentRoute'],
-    FileRoutesByPath['/RowGrouping']['id'],
-    FileRoutesByPath['/RowGrouping']['path'],
-    FileRoutesByPath['/RowGrouping']['fullPath']
-  >
-}
-declare module './routes/RowsReordering' {
-  const createFileRoute: CreateFileRoute<
-    '/RowsReordering',
-    FileRoutesByPath['/RowsReordering']['parentRoute'],
-    FileRoutesByPath['/RowsReordering']['id'],
-    FileRoutesByPath['/RowsReordering']['path'],
-    FileRoutesByPath['/RowsReordering']['fullPath']
-  >
-}
-declare module './routes/ScrollToCell' {
-  const createFileRoute: CreateFileRoute<
-    '/ScrollToCell',
-    FileRoutesByPath['/ScrollToCell']['parentRoute'],
-    FileRoutesByPath['/ScrollToCell']['id'],
-    FileRoutesByPath['/ScrollToCell']['path'],
-    FileRoutesByPath['/ScrollToCell']['fullPath']
-  >
-}
-declare module './routes/TreeView' {
-  const createFileRoute: CreateFileRoute<
-    '/TreeView',
-    FileRoutesByPath['/TreeView']['parentRoute'],
-    FileRoutesByPath['/TreeView']['id'],
-    FileRoutesByPath['/TreeView']['path'],
-    FileRoutesByPath['/TreeView']['fullPath']
-  >
-}
-declare module './routes/VariableRowHeight' {
-  const createFileRoute: CreateFileRoute<
-    '/VariableRowHeight',
-    FileRoutesByPath['/VariableRowHeight']['parentRoute'],
-    FileRoutesByPath['/VariableRowHeight']['id'],
-    FileRoutesByPath['/VariableRowHeight']['path'],
-    FileRoutesByPath['/VariableRowHeight']['fullPath']
-  >
-}
-
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AllFeaturesRoute: AllFeaturesRoute,