@linzjs/step-ag-grid 20.0.0 → 21.0.0

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfigExport;
+export default _default;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
-    "ag-grid-community": "^30",
-    "ag-grid-react": "^30",
+    "ag-grid-community": "^31",
+    "ag-grid-react": "^31",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
@@ -51,7 +51,6 @@
     "stylelint": "stylelint src/**/*.scss src/**/*.css --fix",
     "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
     "test": "jest",
-    "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -80,18 +79,19 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^1.3.5",
+    "@linzjs/lui": ">=21",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^8.1.0",
-    "@storybook/addon-interactions": "^8.1.0",
-    "@storybook/preset-create-react-app": "^8.1.0",
-    "@storybook/react": "^8.1.0",
-    "@storybook/react-webpack5": "^8.1.0",
-    "@storybook/test": "^8.1.0",
-    "@storybook/test-runner": "^0.18.0",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-vite": "^8.1.1",
+    "@storybook/test": "^8.1.1",
+    "@storybook/test-runner": "^0.18.1",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
@@ -106,6 +106,9 @@
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "ag-grid-community": "^31",
+    "ag-grid-react": "^31",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
     "chromatic": "^11.3.2",
@@ -133,8 +136,9 @@
     "postcss-loader": "^7.3.4",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.2.5",
+    "react": ">=18",
     "react-app-polyfill": "^3.0.0",
-    "react-scripts": "^5.0.1",
+    "react-dom": ">=18",
     "rollup": "^4.17.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -143,7 +147,7 @@
     "sass": "1.77.1",
     "sass-loader": "^14.2.1",
     "semantic-release": "^22.0.12",
-    "storybook": "^8.1.0",
+    "storybook": "^8.1.1",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
     "stylelint": "15.11.0",
@@ -151,13 +155,10 @@
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^4.1.0",
     "stylelint-scss": "^5.3.2",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^4.9.5",
-    "@linzjs/lui": ">=21",
-    "ag-grid-community": "^30",
-    "ag-grid-react": "^30",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-plugin-html": "^3.2.2",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "babel": {
     "presets": [

package/src/components/Grid.tsx

@@ -8,8 +8,8 @@ import {
   RowHighlightPosition,
   RowNode,
 } from "ag-grid-community";
-import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community/dist/lib/entities/colDef";
-import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
+import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community";
+import { GridOptions } from "ag-grid-community";
 import {
   AgGridEvent,
   CellEvent,
@@ -18,7 +18,7 @@ import {
   RowDragEndEvent,
   RowDragMoveEvent,
   SelectionChangedEvent,
-} from "ag-grid-community/dist/lib/events";
+} from "ag-grid-community";
 import { AgGridReact } from "ag-grid-react";
 import clsx from "clsx";
 import { defer, difference, isEmpty, last, omit, xorBy } from "lodash-es";
@@ -687,7 +687,7 @@ export const Grid = ({
       <div style={{ flex: 1 }} ref={gridDivRef}>
         <AgGridReact
           rowHeight={rowHeight}
-          animateRows={params.animateRows}
+          animateRows={params.animateRows ?? false}
           rowClassRules={params.rowClassRules}
           getRowId={(params) => `${params.data.id}`}
           suppressRowClickSelection={true}

package/src/components/GridCell.test.tsx

@@ -1,6 +1,5 @@
 import { GridBaseRow } from "./Grid";
-import { generateFilterGetter } from "./GridCell";
-import { RowValueGetterParams } from "./gridRender/GridRenderGenericCell";
+import { generateFilterGetter, SAValueGetterParams } from "./GridCell";
 
 describe("GridCell", () => {
   test("generateFilterGetter returns passed filterValueGetter", () => {
@@ -25,7 +24,7 @@ describe("GridCell", () => {
       const filterGetter = generateFilterGetter(field, undefined, valueFormatter);
       expect(typeof filterGetter).toBe("function");
       if (typeof filterGetter !== "function") return;
-      expect(filterGetter({ getValue: () => test.value } as any as RowValueGetterParams<GridBaseRow>)).toBe(
+      expect(filterGetter({ getValue: () => test.value } as any as SAValueGetterParams<GridBaseRow>)).toBe(
         test.expected,
       );
     });

package/src/components/GridCell.tsx

@@ -1,6 +1,13 @@
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
-import { SuppressKeyboardEventParams, ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
-import { ReactElement, forwardRef, useContext } from "react";
+import {
+  SuppressKeyboardEventParams,
+  ValueFormatterFunc,
+  ValueFormatterParams,
+  ValueGetterFunc,
+  ValueGetterParams,
+  EditableCallbackParams,
+} from "ag-grid-community";
+import { forwardRef, ReactElement, useContext } from "react";
 
 import { GridPopoverContextProvider } from "../contexts/GridPopoverContextProvider";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
@@ -9,12 +16,7 @@ import { GridBaseRow } from "./Grid";
 import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
 import { GridIcon } from "./GridIcon";
 import { GridLoadableCell } from "./GridLoadableCell";
-import {
-  GenericCellColDef,
-  GenericCellRendererParams,
-  RowValueFormatterParams,
-  RowValueGetterParams,
-} from "./gridRender";
+import { GenericCellColDef, GenericCellRendererParams } from "./gridRender";
 
 export interface GenericCellEditorProps<E> {
   multiEdit?: boolean;
@@ -22,15 +24,20 @@ export interface GenericCellEditorProps<E> {
   editorParams?: E;
 }
 
+export interface SAICellRendererParams<TData = any, TValue = any, TContext = any>
+  extends Omit<ICellRendererParams<TData, TValue, TContext>, "data"> {
+  data: TData;
+}
+
 export const GridCellRenderer = (props: ICellRendererParams) => {
   const { checkUpdating } = useContext(GridUpdatingContext);
   const colDef = props.colDef as ColDef;
 
   const rendererParams = colDef.cellRendererParams as GenericCellRendererParams<any> | undefined;
   const warningFn = rendererParams?.warning;
-  let warningText = warningFn ? warningFn(props) : undefined;
+  let warningText = props.data !== undefined && warningFn ? warningFn(props) : undefined;
   const infoFn = rendererParams?.info;
-  let infoText = infoFn ? infoFn(props) : undefined;
+  let infoText = props.data !== undefined && infoFn ? infoFn(props) : undefined;
   if (Array.isArray(warningText)) warningText = warningText.join("\n");
   if (Array.isArray(infoText)) infoText = infoText.join("\n");
 
@@ -56,9 +63,51 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   );
 };
 
+export interface SAValueGetterParams<TData = any, TValue = any> extends Omit<ValueGetterParams<TData, TValue>, "data"> {
+  data: TData;
+  getValue: (field: string) => any;
+}
+
+export interface SAValueGetterFunc<TData = any, TValue = any> {
+  (params: SAValueGetterParams<TData, TValue>): TValue | null | undefined;
+}
+
+export interface SAEditableCallbackParams<TData = any, TValue = any>
+  extends Omit<EditableCallbackParams<TData, TValue>, "data"> {
+  data: TData;
+}
+
+export interface SAEditableCallback<TData = any, TValue = any> {
+  (params: SAEditableCallbackParams<TData, TValue>): boolean;
+}
+
+export interface SAValueFormatterParams<TData = any, TValue = any>
+  extends Omit<ValueFormatterParams<TData, TValue>, "data" | "value"> {
+  data: TData;
+  value: TValue;
+}
+
+export interface SAValueFormatterFunc<TData = any, TValue = any> {
+  (params: SAValueFormatterParams<TData, TValue>): string;
+}
+
 // This is so that typescript retains the row type to pass to the GridCells
-export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
-  _?: RowType;
+// @ts-ignore
+export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends ColDef<TData, ValueType> {
+  _?: TData;
+  editable?: boolean | SAEditableCallback<TData, ValueType>;
+  valueGetter?: string | SAValueGetterFunc<TData, ValueType>;
+  valueFormatter?: string | SAValueFormatterFunc<TData, ValueType>;
+  cellRenderer?: (props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+  cellRendererParams?: {
+    singleClickEdit?: boolean;
+    rightHoverElement?: ReactElement;
+    originalCellRenderer?: any;
+    editAction?: (selectedRows: TData[]) => void;
+    shortcutKeys?: Record<string, () => void>;
+    warning?: (props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+    info?: (props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+  };
   editor?: (editorProps: any) => ReactElement;
 }
 
@@ -76,16 +125,16 @@ export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
   );
 };
 
-export const generateFilterGetter = <RowType extends GridBaseRow>(
+export const generateFilterGetter = <TData extends GridBaseRow, ValueType>(
   field: string | undefined,
-  filterValueGetter: string | ((params: RowValueGetterParams<RowType>) => string) | undefined,
-  valueFormatter: string | ((params: RowValueFormatterParams<RowType>) => string) | undefined,
-) => {
+  filterValueGetter: string | ValueGetterFunc<TData, ValueType> | undefined,
+  valueFormatter: string | ValueFormatterFunc<TData, ValueType> | undefined,
+): string | SAValueGetterFunc<TData, ValueType> | undefined => {
   if (filterValueGetter) return filterValueGetter;
   // aggrid will default to valueGetter
   if (typeof valueFormatter !== "function" || !field) return undefined;
 
-  return (params: RowValueGetterParams<RowType>) => {
+  return (params: ValueGetterParams<TData, ValueType>): any => {
     const value = params.getValue(field);
     let formattedValue = valueFormatter({ ...params, value });
     // Search for null values using standard dash
@@ -93,7 +142,7 @@ export const generateFilterGetter = <RowType extends GridBaseRow>(
     // Search by raw value as well as formatted
     const gotValue = ["string", "number"].includes(typeof value) ? value : undefined;
     return (formattedValue + (gotValue != null && formattedValue != gotValue ? " " + gotValue : "")) //
-      .replaceAll(/\s+/g, " ")
+      .replace(/\s+/g, " ")
       .trim();
   };
 };
@@ -101,20 +150,22 @@ export const generateFilterGetter = <RowType extends GridBaseRow>(
 /*
  * All cells should use this.
  */
-export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCommon>(
-  props: GenericCellColDef<RowType>,
+export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends CellEditorCommon = any>(
+  props: GenericCellColDef<TData, TValue>,
   custom?: {
     multiEdit?: boolean;
     preventAutoEdit?: boolean;
     editor?: (editorProps: Props) => ReactElement;
     editorParams?: Props;
   },
-): ColDefT<RowType> => {
+): ColDefT<TData, TValue> => {
+  // props.field = ;
   // Generate a default filter value getter which uses the formatted value plus
   // the editable value if it's a string and different from the formatted value.
   // This is so that e.g. bearings can be searched for by DMS or raw number.
   const valueFormatter = props.valueFormatter;
-  const filterValueGetter = generateFilterGetter(props.field, props.filterValueGetter, valueFormatter);
+  // FIXME
+  const filterValueGetter = generateFilterGetter(props.field, props.filterValueGetter as any, valueFormatter as any);
   const exportable = props.exportable;
   // Can't leave this here ag-grid will complain
   delete props.exportable;
@@ -139,7 +190,8 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
       },
     }),
     // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
-    filterValueGetter,
+    // FIXME
+    filterValueGetter: filterValueGetter as any,
     // Default value formatter, otherwise react freaks out on objects
     valueFormatter: (params: ValueFormatterParams) => {
       if (params.value == null) return "–";

package/src/components/GridCellFiller.tsx

@@ -1,10 +1,11 @@
 import { ColDef } from "ag-grid-community";
+import { GridBaseRow } from "./Grid";
 
 export const GridCellFillerColId = "gridCellFiller";
 
 export const isGridCellFiller = (col: ColDef) => col.colId === GridCellFillerColId;
 
-export const GridCellFiller = (): ColDef => ({
+export const GridCellFiller = <TData extends GridBaseRow>(): ColDef<TData, any> => ({
   colId: GridCellFillerColId,
   headerName: "",
   flex: 1,

package/src/components/GridCellMultiEditor.tsx

@@ -1,5 +1,5 @@
-import { CellEditorSelectorResult } from "ag-grid-community/dist/lib/entities/colDef";
-import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
+import { CellEditorSelectorResult } from "ag-grid-community";
+import { ICellEditorParams } from "ag-grid-community";
 import { ComponentProps, ReactElement } from "react";
 
 import { GridBaseRow } from "./Grid";
@@ -16,18 +16,18 @@ export const Editor = <FN extends (param: any) => ReactElement>(props: {
   params: { ...props.editorParams, multiEdit: props.multiEdit },
 });
 
-export interface RowCellEditorParams<RowType extends GridBaseRow> extends ICellEditorParams {
-  data: RowType;
+export interface RowCellEditorParams<TData extends GridBaseRow> extends ICellEditorParams {
+  data: TData;
 }
 
 /**
  * Used to choose between cell editors based in data.
  */
-export const GridCellMultiEditor = <RowType extends GridBaseRow>(
-  props: GenericCellColDef<RowType>,
-  cellEditorSelector: (params: RowCellEditorParams<RowType>) => CellEditorSelectorResult,
-): ColDefT<RowType> =>
-  GridCell({
+export const GridCellMultiEditor = <TData extends GridBaseRow, TValue = any>(
+  props: GenericCellColDef<TData, TValue>,
+  cellEditorSelector: (params: RowCellEditorParams<TData>) => CellEditorSelectorResult,
+): ColDefT<TData, TValue> =>
+  GridCell<TData, TValue>({
     cellClassRules: GridCellMultiSelectClassRules,
     cellEditorSelector,
     editable: props.editable ?? true,

package/src/components/GridCellMultiSelectClassRules.tsx

@@ -1,5 +1,5 @@
-import { CellClassParams, CellClassRules } from "ag-grid-community/dist/lib/entities/colDef";
-import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
+import { CellClassParams, CellClassRules } from "ag-grid-community";
+import { ICellEditorParams } from "ag-grid-community";
 
 export const GridCellMultiSelectClassRules: CellClassRules = {
   "ag-selected-for-edit": (params: CellClassParams) => {
@@ -12,8 +12,8 @@ export const GridCellMultiSelectClassRules: CellClassRules = {
       cep?.multiEdit &&
       api
         .getSelectedNodes()
-        .map((row) => row.id)
-        .includes(node.id) &&
+        ?.map((row) => row.id)
+        ?.includes(node.id) &&
       api.getEditingCells().some((cell) => cell.column.getColDef() === colDef)
     );
   },

package/src/components/GridPopoverHook.tsx

@@ -7,7 +7,7 @@ import { MenuCloseEvent } from "../react-menu3/types";
 import { CloseReason } from "../react-menu3/utils";
 import { GridBaseRow } from "./Grid";
 
-export interface GridPopoverHookProps<RowType> {
+export interface GridPopoverHookProps<TData> {
   className: string | undefined;
   invalid?: () =>
     | Promise<ReactElement | boolean | string | null | undefined>
@@ -16,13 +16,13 @@ export interface GridPopoverHookProps<RowType> {
     | string
     | null
     | undefined;
-  save?: (selectedRows: RowType[]) => Promise<boolean>;
+  save?: (selectedRows: TData[]) => Promise<boolean>;
   dontSaveOnExternalClick?: boolean;
 }
 
-export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {
+export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopoverHookProps<TData>) => {
   const { stopEditing, cancelEdit } = useContext(GridContext);
-  const { anchorRef, saving, updateValue } = useGridPopoverContext<RowType>();
+  const { anchorRef, saving, updateValue } = useGridPopoverContext<TData>();
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setOpen] = useState(false);
 

package/src/components/PostSortRowsHook.ts

@@ -1,6 +1,6 @@
 import { IRowNode } from "ag-grid-community";
-import { ColumnState } from "ag-grid-community/dist/lib/columns/columnModel";
-import { PostSortRowsParams } from "ag-grid-community/dist/lib/interfaces/iCallbackParams";
+import { ColumnState } from "ag-grid-community";
+import { PostSortRowsParams } from "ag-grid-community";
 import { isEmpty } from "lodash-es";
 import { useCallback, useContext, useRef } from "react";
 

package/src/components/gridFilter/GridFilterButtons.tsx

@@ -8,23 +8,23 @@ import { GridFilterExternal } from "../../contexts/GridContext";
 import { GridBaseRow } from "../Grid";
 import { useGridFilter } from "./useGridFilter";
 
-export interface GridFilterButtonsOption<RowType extends GridBaseRow> {
+export interface GridFilterButtonsOption<TData extends GridBaseRow> {
   defaultSelected?: boolean;
-  filter?: GridFilterExternal<RowType>;
+  filter?: GridFilterExternal<TData>;
   label: string;
 }
 
-export type GridFilterButtonsProps<RowType extends GridBaseRow> = {
+export type GridFilterButtonsProps<TData extends GridBaseRow> = {
   className?: ClassValue;
   luiButtonProps?: Partial<LuiButtonProps>;
-  options: GridFilterButtonsOption<RowType>[];
+  options: GridFilterButtonsOption<TData>[];
 };
 
-export const GridFilterButtons = <RowType extends GridBaseRow>({
+export const GridFilterButtons = <TData extends GridBaseRow>({
   className,
   luiButtonProps,
   options,
-}: GridFilterButtonsProps<RowType>): ReactElement => {
+}: GridFilterButtonsProps<TData>): ReactElement => {
   // Select defaultSelected option, otherwise first option.  If no options select none.
   const [selectedOption, setSelectedOption] = useState(options.find((option) => option.defaultSelected) ?? options[0]);
 

package/src/components/gridFilter/GridFilterColumnsToggle.tsx

@@ -6,9 +6,8 @@ import { LuiCheckboxInput, LuiIcon } from "@linzjs/lui";
 import { GridContext } from "../../contexts/GridContext";
 import { Menu, MenuDivider, MenuItem } from "../../react-menu3";
 import { ClickEvent } from "../../react-menu3/types";
-import { GridBaseRow } from "../Grid";
-import { ColDefT } from "../GridCell";
 import { GridFilterHeaderIconButton } from "./GridFilterHeaderIconButton";
+import { ColDef } from "ag-grid-community";
 
 export interface GridFilterColumnsToggleProps {
   saveState?: boolean;
@@ -78,9 +77,7 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
   );
 
   const numericRegExp = /^\d+$/;
-  const isNonManageableColumn = (col: ColDefT<GridBaseRow>) => {
-    return col.lockVisible || col.colId == null || numericRegExp.test(col.colId);
-  };
+  const isNonManageableColumn = (col: ColDef) => col.lockVisible || col.colId == null || numericRegExp.test(col.colId);
 
   return (
     <Menu

package/src/components/gridFilter/GridFilterDownloadCsvButton.tsx

@@ -1,4 +1,4 @@
-import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
+import { CsvExportParams } from "ag-grid-community";
 import { delay } from "lodash-es";
 import { useContext } from "react";
 

package/src/components/gridFilter/useGridFilter.ts

@@ -3,7 +3,7 @@ import { useContext, useEffect } from "react";
 import { GridContext, GridFilterExternal } from "../../contexts/GridContext";
 import { GridBaseRow } from "../Grid";
 
-export const useGridFilter = <RowType extends GridBaseRow>(filter: GridFilterExternal<RowType> | undefined) => {
+export const useGridFilter = <TData extends GridBaseRow>(filter: GridFilterExternal<TData> | undefined) => {
   const { addExternalFilter, removeExternalFilter } = useContext(GridContext);
 
   useEffect(() => {

package/src/components/gridForm/GridFormDropDown.tsx

@@ -14,9 +14,9 @@ import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 
-export interface GridPopoutEditDropDownSelectedItem<RowType> {
+export interface GridPopoutEditDropDownSelectedItem<TData> {
   // Note the row that was clicked on will be first
-  selectedRows: RowType[];
+  selectedRows: TData[];
   value: any;
   subComponentValue?: any;
 }
@@ -38,7 +38,7 @@ export const MenuHeaderItem = (title: string) => {
 
 export type SelectOption = null | string | FinalSelectOption;
 
-export interface GridFormDropDownProps<RowType extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormDropDownProps<TData extends GridBaseRow> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?:
     | "GridPopoverEditDropDown-containerSmall"
@@ -53,11 +53,11 @@ export interface GridFormDropDownProps<RowType extends GridBaseRow> extends Cell
   filterPlaceholder?: string;
   filterHelpText?: string;
   noOptionsMessage?: string;
-  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
-  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
+  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData>) => Promise<void>;
+  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData>) => Promise<void>;
   options:
     | SelectOption[]
-    | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined)
+    | ((selectedRows: TData[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined)
     | undefined;
 }
 
@@ -65,8 +65,8 @@ const fieldToString = (field: any) => {
   return typeof field == "symbol" ? field.toString() : `${field}`;
 };
 
-export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDropDownProps<RowType>) => {
-  const { selectedRows, field, data } = useGridPopoverContext<RowType>();
+export const GridFormDropDown = <TData extends GridBaseRow>(props: GridFormDropDownProps<TData>) => {
+  const { selectedRows, field, data } = useGridPopoverContext<TData>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
   const [filter, setFilter] = useState(props.filterDefaultValue ?? "");
@@ -81,7 +81,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
   const selectItemHandler = useCallback(
     async (value: any, subComponentValue?: any): Promise<boolean> => {
       const hasChanged =
-        selectedRows.some((row) => row[field as keyof RowType] !== value) ||
+        selectedRows.some((row) => row[field as keyof TData] !== value) ||
         (subComponentValue !== undefined && subComponentInitialValue.current !== JSON.stringify(subComponentValue));
       if (hasChanged) {
         if (props.onSelectedItem) {

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -7,15 +7,15 @@ import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 
-export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormEditBearingProps<TData extends GridBaseRow> extends CellEditorCommon {
   formatValue?: (value: any) => string;
   placeHolder?: string;
   range?: (value: number | null) => string | null;
-  onSave?: (props: { selectedRows: RowType[]; value: number | null }) => Promise<boolean>;
+  onSave?: (props: { selectedRows: TData[]; value: number | null }) => Promise<boolean>;
 }
 
-export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormEditBearingProps<RowType>) => {
-  const { field, value: initialValue } = useGridPopoverContext<RowType>();
+export const GridFormEditBearing = <TData extends GridBaseRow>(props: GridFormEditBearingProps<TData>) => {
+  const { field, value: initialValue } = useGridPopoverContext<TData>();
 
   // This clears out any scientific precision
   const defaultValue = useMemo(
@@ -28,7 +28,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
   const invalid = useCallback(() => bearingStringValidator(value, props.range), [props.range, value]);
 
   const save = useCallback(
-    async (selectedRows: RowType[]): Promise<boolean> => {
+    async (selectedRows: TData[]): Promise<boolean> => {
       const parsedValue = bearingNumberParser(value);
       // Value didn't change so don't save just cancel
       if (parsedValue === bearingNumberParser(defaultValue)) {

package/src/components/gridForm/GridFormMessage.tsx

@@ -7,12 +7,12 @@ import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 
-export interface GridFormMessageProps<RowType extends GridBaseRow> extends CellEditorCommon {
-  message: (selectedRows: RowType[]) => Promise<string | ReactElement> | string | ReactElement;
+export interface GridFormMessageProps<TData extends GridBaseRow> extends CellEditorCommon {
+  message: (selectedRows: TData[]) => Promise<string | ReactElement> | string | ReactElement;
 }
 
-export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormMessageProps<RowType>) => {
-  const { selectedRows } = useGridPopoverContext<RowType>();
+export const GridFormMessage = <TData extends GridBaseRow>(props: GridFormMessageProps<TData>): ReactElement => {
+  const { selectedRows } = useGridPopoverContext<TData>();
 
   const [message, setMessage] = useState<string | ReactElement | null>(null);
   const { popoverWrapper } = useGridPopoverHook({ className: props.className });