Add command methods and CSS variable types (#3858)

* Add command methods and CSS variable types

* Remove extra fields

Author: amanmahajan7

src/DataGrid.tsx

@@ -1192,28 +1192,26 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
         },
         className
       )}
-      style={
-        {
-          ...style,
-          // set scrollPadding to correctly position non-sticky cells after scrolling
-          scrollPaddingInlineStart:
-            selectedPosition.idx > lastFrozenColumnIndex || scrollToPosition?.idx !== undefined
-              ? `${totalFrozenColumnWidth}px`
-              : undefined,
-          scrollPaddingBlock:
-            isRowIdxWithinViewportBounds(selectedPosition.rowIdx) ||
-            scrollToPosition?.rowIdx !== undefined
-              ? `${headerRowsHeight + topSummaryRowsCount * summaryRowHeight}px ${
-                  bottomSummaryRowsCount * summaryRowHeight
-                }px`
-              : undefined,
-          gridTemplateColumns,
-          gridTemplateRows: templateRows,
-          '--rdg-header-row-height': `${headerRowHeight}px`,
-          '--rdg-scroll-height': `${scrollHeight}px`,
-          ...layoutCssVars
-        } as unknown as React.CSSProperties
-      }
+      style={{
+        ...style,
+        // set scrollPadding to correctly position non-sticky cells after scrolling
+        scrollPaddingInlineStart:
+          selectedPosition.idx > lastFrozenColumnIndex || scrollToPosition?.idx !== undefined
+            ? `${totalFrozenColumnWidth}px`
+            : undefined,
+        scrollPaddingBlock:
+          isRowIdxWithinViewportBounds(selectedPosition.rowIdx) ||
+          scrollToPosition?.rowIdx !== undefined
+            ? `${headerRowsHeight + topSummaryRowsCount * summaryRowHeight}px ${
+                bottomSummaryRowsCount * summaryRowHeight
+              }px`
+            : undefined,
+        gridTemplateColumns,
+        gridTemplateRows: templateRows,
+        '--rdg-header-row-height': `${headerRowHeight}px`,
+        '--rdg-scroll-height': `${scrollHeight}px`,
+        ...layoutCssVars
+      }}
       dir={direction}
       ref={gridRef}
       onScroll={handleScroll}

src/SummaryRow.tsx

@@ -100,13 +100,11 @@ function SummaryRow<R, SR>({
           [bottomSummaryRowClassname]: !isTop
         }
       )}
-      style={
-        {
-          ...getRowStyle(gridRowStart),
-          '--rdg-summary-row-top': top !== undefined ? `${top}px` : undefined,
-          '--rdg-summary-row-bottom': bottom !== undefined ? `${bottom}px` : undefined
-        } as unknown as React.CSSProperties
-      }
+      style={{
+        ...getRowStyle(gridRowStart),
+        '--rdg-summary-row-top': top !== undefined ? `${top}px` : undefined,
+        '--rdg-summary-row-bottom': bottom !== undefined ? `${bottom}px` : undefined
+      }}
     >
       {cells}
     </div>

src/globals.d.ts

@@ -0,0 +1,9 @@
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+  interface CSSProperties {
+    [key: `--${string}`]: string | number | undefined;
+  }
+}
+
+// somehow required to make `declare global` work
+export {};

src/utils/styleUtils.ts

@@ -5,7 +5,7 @@ import type { CalculatedColumn, CalculatedColumnOrColumnGroup } from '../types';
 import { cellClassname, cellFrozenClassname } from '../style/cell';
 
 export function getRowStyle(rowIdx: number): CSSProperties {
-  return { '--rdg-grid-row-start': rowIdx } as unknown as CSSProperties;
+  return { '--rdg-grid-row-start': rowIdx };
 }
 
 export function getHeaderCellStyle<R, SR>(

test/browser/column/resizable.test.tsx

@@ -31,7 +31,6 @@ interface ResizeArgs {
 async function resize({ column, resizeBy }: ResizeArgs) {
   expect(getResizeHandle(column)).toBeInTheDocument();
 
-  // @ts-expect-error
   await commands.resizeColumn(resizeBy);
 }
 

test/browser/dragFill.test.tsx

@@ -66,7 +66,6 @@ test('should allow dragFill if onFill is specified', async () => {
 
 test('should update single row using mouse', async () => {
   setup();
-  // @ts-expect-error
   await commands.dragFill('a1', 'a2');
   await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
   await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a3');
@@ -75,7 +74,6 @@ test('should update single row using mouse', async () => {
 
 test('should update multiple rows using mouse', async () => {
   setup();
-  // @ts-expect-error
   await commands.dragFill('a1', 'a4');
   await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
   await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a1');
@@ -84,7 +82,6 @@ test('should update multiple rows using mouse', async () => {
 
 test('should allow drag up using mouse', async () => {
   setup();
-  // @ts-expect-error
   await commands.dragFill('a4', 'a1');
   await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent('a4');
   await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a4');

test/globals.d.ts

@@ -0,0 +1,9 @@
+declare module '@vitest/browser/context' {
+  interface BrowserCommands {
+    resizeColumn: (resizeBy: number | readonly number[]) => Promise<void>;
+    dragFill: (from: string, to: string) => Promise<void>;
+  }
+}
+
+// somehow required to make `declare global` work
+export {};

tsconfig.lib.json

@@ -6,5 +6,6 @@
     "lib": ["ESNext", "DOM", "DOM.Iterable", "DOM.AsyncIterable"],
     "noCheck": true
   },
-  "files": ["src/index.ts"]
+  "files": ["src/index.ts"],
+  "include": ["src/globals.d.ts"]
 }