Generics

src/components/Grid.tsx

@@ -5,30 +5,21 @@ import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-commun
 import { AgGridReact } from "ag-grid-react";
 import clsx from "clsx";
 import { defer, difference, isEmpty, last, omit, xorBy } from "lodash-es";
-import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import { GridContext } from "../contexts/GridContext";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
 import { useIntervalHook } from "../lui/timeoutHook";
-import { IFormTestRow } from "../stories/grid/FormTest";
 import { fnOrVar, isNotEmpty } from "../utils/util";
 import { GridNoRowsOverlay } from "./GridNoRowsOverlay";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
 import { GridHeaderSelect } from "./gridHeader";
-import { useGridContextMenu } from "./gridHook";
+import { GridContextMenuComponent, useGridContextMenu } from "./gridHook";
 
 export interface GridBaseRow {
   id: string | number;
 }
 
-export interface GridContextMenuComponentProps {
-  selectedRows: IFormTestRow[];
-  colDef: ColDef;
-  close: () => void;
-}
-
-export type GridContextMenuComponent = (props: GridContextMenuComponentProps) => ReactElement | null;
-
 export interface GridProps {
   readOnly?: boolean; // set all editables to false when read only, make all styles black, otherwise style is gray for not editable
   selectable?: boolean;
@@ -81,7 +72,7 @@ export interface GridProps {
   /**
    * Context menu definition if required.
    */
-  contextMenu?: GridContextMenuComponent;
+  contextMenu?: GridContextMenuComponent<any>;
 
   /**
    * Whether to select row on context menu.

src/components/gridHook/useGridContextMenu.tsx

@@ -1,17 +1,27 @@
 import { ColDef } from "ag-grid-community";
 import { CellContextMenuEvent } from "ag-grid-community/dist/lib/events";
-import { useCallback, useContext, useRef, useState } from "react";
+import { ReactElement, useCallback, useContext, useRef, useState } from "react";
 
 import { GridContext } from "../../contexts/GridContext";
 import { ControlledMenu } from "../../react-menu3";
-import { GridContextMenuComponent } from "../Grid";
+import { GridBaseRow } from "../Grid";
 
-export const useGridContextMenu = ({
+export interface GridContextMenuComponentProps<RowType extends GridBaseRow> {
+  selectedRows: RowType[];
+  colDef: ColDef;
+  close: () => void;
+}
+
+export type GridContextMenuComponent<RowType extends GridBaseRow> = (
+  props: GridContextMenuComponentProps<RowType>,
+) => ReactElement | null;
+
+export const useGridContextMenu = <RowType extends GridBaseRow>({
   contextMenuSelectRow,
   contextMenu: ContextMenu,
 }: {
   contextMenuSelectRow: boolean;
-  contextMenu?: GridContextMenuComponent;
+  contextMenu?: GridContextMenuComponent<RowType>;
 }) => {
   const { redrawRows, prePopupOps, postPopupOps, getSelectedRows } = useContext(GridContext);
 
@@ -20,7 +30,6 @@ export const useGridContextMenu = ({
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const clickedColDefRef = useRef<ColDef>(null!);
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const selectedRowsRef = useRef<any[]>([]);
 
   const openMenu = useCallback(

src/stories/grid/GridPopoutContextMenu.stories.tsx

@@ -41,7 +41,7 @@ export default {
   ],
 } as ComponentMeta<typeof Grid>;
 
-const ContextMenu = ({ selectedRows, colDef, close }: GridContextMenuComponentProps): ReactElement => {
+const ContextMenu = ({ selectedRows, colDef, close }: GridContextMenuComponentProps<IFormTestRow>): ReactElement => {
   const onClick = useCallback(() => {
     selectedRows.forEach((row) => {
       switch (colDef.field) {