fix: Add generics to components

GridFormDropDown
GridButton
GridEditBoolean
GridPopoverEditDropDown

src/components/gridForm/GridFormDropDown.tsx

@@ -14,10 +14,11 @@ import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 
-export interface GridPopoutEditDropDownSelectedItem<TData> {
+export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TValue> {
   // Note the row that was clicked on will be first
   selectedRows: TData[];
-  value: any;
+  selectedRowIds: TData["id"][];
+  value: TValue;
   subComponentValue?: any;
 }
 
@@ -38,7 +39,7 @@ export const MenuHeaderItem = (title: string) => {
 
 export type SelectOption = null | string | FinalSelectOption;
 
-export interface GridFormDropDownProps<TData extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormDropDownProps<TData extends GridBaseRow, TValue> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?:
     | "GridPopoverEditDropDown-containerSmall"
@@ -54,8 +55,8 @@ export interface GridFormDropDownProps<TData extends GridBaseRow> extends CellEd
   filterPlaceholder?: string;
   filterHelpText?: string;
   noOptionsMessage?: string;
-  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData>) => Promise<void>;
-  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData>) => Promise<void>;
+  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void>;
+  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void>;
   options:
     | SelectOption[]
     | ((selectedRows: TData[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined)
@@ -66,7 +67,7 @@ const fieldToString = (field: any) => {
   return typeof field == "symbol" ? field.toString() : `${field}`;
 };
 
-export const GridFormDropDown = <TData extends GridBaseRow>(props: GridFormDropDownProps<TData>) => {
+export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridFormDropDownProps<TData, TValue>) => {
   const { selectedRows, field, data } = useGridPopoverContext<TData>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
@@ -86,7 +87,12 @@ export const GridFormDropDown = <TData extends GridBaseRow>(props: GridFormDropD
         (subComponentValue !== undefined && subComponentInitialValue.current !== JSON.stringify(subComponentValue));
       if (hasChanged) {
         if (props.onSelectedItem) {
-          await props.onSelectedItem({ selectedRows, value, subComponentValue });
+          await props.onSelectedItem({
+            selectedRows,
+            selectedRowIds: selectedRows.map((row) => row.id),
+            value,
+            subComponentValue,
+          });
         } else {
           selectedRows.forEach((row) => (row[field] = value as any));
         }
@@ -167,7 +173,7 @@ export const GridFormDropDown = <TData extends GridBaseRow>(props: GridFormDropD
     if (selectedItem === null) {
       if (props.onSelectFilter) {
         const { onSelectFilter } = props;
-        await onSelectFilter({ selectedRows, value: filter });
+        await onSelectFilter({ selectedRows, selectedRowIds: selectedRows.map((row) => row.id), value: filter as any });
         return true;
       } else {
         if (filteredValues && filteredValues.length === 1) {

src/components/gridPopoverEdit/GridButton.tsx

@@ -5,7 +5,7 @@ import { GridBaseRow } from "../Grid";
 import { LuiButton, LuiIcon } from "@linzjs/lui";
 import { useEffect, useRef } from "react";
 
-const ButtonCellRenderer = (props: SAICellRendererParams) => {
+const ButtonCellRenderer = <TData extends GridBaseRow>(props: SAICellRendererParams<TData>) => {
   const { data, node, column, colDef, api } = props;
   const inputRef = useRef<HTMLButtonElement>(null);
 
@@ -39,9 +39,9 @@ const ButtonCellRenderer = (props: SAICellRendererParams) => {
   );
 };
 
-export interface GridButtonProps<TData> {
+export interface GridButtonProps<TData extends GridBaseRow> {
   visible?: (cellEditorParams: ICellEditorParams) => boolean;
-  onClick?: (props: { selectedRows: TData[]; selectedRowIds: (string | number)[] }) => void;
+  onClick?: (props: { selectedRows: TData[]; selectedRowIds: TData["id"][] }) => void;
 }
 
 export const GridButton = <TData extends GridBaseRow>(

src/components/gridPopoverEdit/GridEditBoolean.tsx

@@ -65,12 +65,8 @@ const BooleanCellRenderer = (props: CustomCellEditorProps) => {
   );
 };
 
-export interface GridEditBooleanEditorProps<TData> extends CellEditorCommon {
-  onClick: (props: {
-    selectedRows: TData[];
-    selectedRowIds: (string | number)[];
-    checked: boolean;
-  }) => Promise<boolean>;
+export interface GridEditBooleanEditorProps<TData extends GridBaseRow> extends CellEditorCommon {
+  onClick: (props: { selectedRows: TData[]; selectedRowIds: TData["id"][]; checked: boolean }) => Promise<boolean>;
 }
 
 export const GridEditBoolean = <TData extends GridBaseRow>(

src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -6,13 +6,13 @@ import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
 export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any>(
   colDef: GenericCellColDef<TData, TValue>,
-  props: GenericCellEditorProps<GridFormDropDownProps<TData>>,
+  props: GenericCellEditorProps<GridFormDropDownProps<TData, TValue>>,
 ): ColDefT<TData, TValue> =>
-  GridCell<TData, TValue, GridFormDropDownProps<TData>>(colDef, {
+  GridCell<TData, TValue, GridFormDropDownProps<TData, TValue>>(colDef, {
     editor: GridFormDropDown,
     ...props,
     editorParams: {
-      ...(props.editorParams as GridFormDropDownProps<TData>),
+      ...(props.editorParams as GridFormDropDownProps<TData, TValue>),
       className: clsx(
         {
           "GridPopoverEditDropDown-containerLarge": !props.editorParams?.className?.includes(