@linzjs/step-ag-grid 1.5.4 → 2.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.5.4",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",

package/src/components/Grid.tsx

@@ -12,7 +12,7 @@ import { GridContext } from "@contexts/GridContext";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
 import { isNotEmpty } from "@utils/util";
 import { GridHeaderSelect } from "./gridHeader/GridHeaderSelect";
-import { UpdatingContext } from "@contexts/UpdatingContext";
+import { GridUpdatingContext } from "@contexts/GridUpdatingContext";
 
 export interface GridBaseRow {
   id: string | number;
@@ -47,7 +47,7 @@ export const Grid = (params: GridProps): JSX.Element => {
     ensureSelectedRowIsVisible,
     sizeColumnsToFit,
   } = useContext(GridContext);
-  const { checkUpdating } = useContext(UpdatingContext);
+  const { checkUpdating } = useContext(GridUpdatingContext);
 
   const [internalQuickFilter, setInternalQuickFilter] = useState("");
   const lastSelectedIds = useRef<number[]>([]);

package/src/components/GridCell.tsx

@@ -1,40 +1,27 @@
-import { ForwardedRef, forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import { forwardRef, useContext } from "react";
 import { GridBaseRow } from "./Grid";
-import { UpdatingContext } from "@contexts/UpdatingContext";
-import { GridContext } from "@contexts/GridContext";
+import { GridUpdatingContext } from "@contexts/GridUpdatingContext";
 import { GenericMultiEditCellClass } from "./GenericCellClass";
-import { GenericCellRendererParams, GridRendererGenericCell } from "./gridRender/GridRenderGenericCell";
+import {
+  GenericCellColDef,
+  GenericCellRendererParams,
+  GridRendererGenericCell,
+} from "./gridRender/GridRenderGenericCell";
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
 import { GridIcon } from "@components/GridIcon";
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { GridPopoverContext } from "@contexts/GridPopoverContext";
+import { GridPopoverContextProvider } from "@contexts/GridPopoverContextProvider";
 
-export interface GridFormProps<RowType extends GridBaseRow> {
-  cellEditorParams: ICellEditorParams;
-  updateValue: (saveFn: (selectedRows: RowType[]) => Promise<boolean>) => Promise<boolean>;
-  saving: boolean;
-  data: RowType;
-  value: any;
-  field: string | undefined;
-  selectedRows: RowType[];
-  formProps: Record<string, any>;
-}
-
-export interface GenericCellEditorParams<RowType extends GridBaseRow> {
+export interface GenericCellEditorProps<E> {
   multiEdit?: boolean;
-  form?: (props: GridFormProps<RowType>) => JSX.Element;
-}
-
-export interface GenericCellEditorColDef<
-  RowType extends GridBaseRow,
-  FormProps extends GenericCellEditorParams<RowType>,
-> extends ColDef {
-  cellEditorParams?: FormProps;
-  cellRendererParams?: GenericCellRendererParams<RowType>;
+  editor?: (editorProps: E) => JSX.Element;
+  editorParams?: E; // Omit<E, keyof CellParams<IFormTestRow>>
 }
 
 export const GridCellRenderer = (props: ICellRendererParams) => {
-  const { checkUpdating } = useContext(UpdatingContext);
+  const { checkUpdating } = useContext(GridUpdatingContext);
   const colDef = props.colDef as ColDef;
 
   const rendererParams = colDef.cellRendererParams as GenericCellRendererParams<any> | undefined;
@@ -56,19 +43,32 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   );
 };
 
-/**
+// This is so that typescript retains the row type to pass to the GridCells
+export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
+  _?: RowType;
+}
+
+/*
  * For editing a text area.
  */
-export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericCellEditorParams<RowType>>(
-  props: GenericCellEditorColDef<RowType, FormProps>,
-): ColDef => {
+export const GridCell = <RowType extends GridBaseRow, Props>(
+  props: GenericCellColDef<RowType>,
+  custom?: {
+    multiEdit?: boolean;
+    editor?: (editorProps: Props) => JSX.Element;
+    editorParams?: Props;
+  },
+): ColDefT<RowType> => {
   return {
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
-    ...(props.cellEditorParams && {
-      cellClass: props?.cellEditorParams?.multiEdit ? GenericMultiEditCellClass : undefined,
-      editable: true,
-      cellEditor: GenericCellEditorComponent,
+    ...(custom?.editor && {
+      cellClass: custom?.multiEdit ? GenericMultiEditCellClass : undefined,
+      editable: props.editable ?? true,
+      cellEditor: GenericCellEditorComponent(custom.editor),
+    }),
+    ...(custom?.editorParams && {
+      cellEditorParams: { ...custom.editorParams, multiEdit: custom.multiEdit },
     }),
     // Default value formatter, otherwise react freaks out on objects
     valueFormatter: (params: ValueFormatterParams) => {
@@ -86,59 +86,37 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
   };
 };
 
-interface GenericCellEditorICellEditorParams<RowType extends GridBaseRow, FormProps extends Record<string, any>>
-  extends ICellEditorParams {
+export interface CellParams<RowType extends GridBaseRow> {
+  value: any;
   data: RowType;
-  colDef: GenericCellEditorColDef<RowType, FormProps>;
+  field: string | undefined;
+  selectedRows: RowType[];
 }
 
-export const GenericCellEditorComponentFr = <RowType extends GridBaseRow, FormProps extends Record<string, any>>(
-  props: GenericCellEditorICellEditorParams<RowType, FormProps>,
-  _: ForwardedRef<any>, // We don't forward the ref, as that's for generic aggrid cell editing
-) => {
-  const { updatingCells, getSelectedRows } = useContext(GridContext);
-
-  const { colDef, data } = props;
-  const { cellEditorParams } = props.colDef;
+// TODO memo?
+export const GenericCellEditorComponent = (editor: (props: any) => JSX.Element) =>
+  forwardRef(function GenericCellEditorComponent2(props: ICellEditorParams, _) {
+    return (
+      <GridPopoverContextProvider>
+        <GenericCellEditorComponent3 {...{ ...props, editor }} />
+      </GridPopoverContextProvider>
+    );
+  });
+
+const GenericCellEditorComponent3 = (props: ICellEditorParams & { editor: (props: any) => JSX.Element }) => {
+  const { setProps, propsRef } = useContext(GridPopoverContext);
+
+  const { colDef } = props;
+  const { cellEditorParams } = colDef;
   const multiEdit = cellEditorParams?.multiEdit ?? false;
-  const field = props.colDef.field ?? "";
-
-  const formProps = colDef.cellEditorParams ?? {};
-  const value = props.value;
-
-  const selectedRows = useMemo(
-    () => (multiEdit ? getSelectedRows<RowType>() : [data]),
-    [data, getSelectedRows, multiEdit],
-  );
 
-  const [saving, setSaving] = useState(false);
-
-  const updateValue = useCallback(
-    async (saveFn: (selectedRows: any[]) => Promise<boolean>): Promise<boolean> => {
-      return !saving && (await updatingCells({ selectedRows, field }, saveFn, setSaving));
-    },
-    [field, saving, selectedRows, updatingCells],
-  );
-
-  if (cellEditorParams == null) return <></>;
+  // TODO don't need all these props in context
+  setProps(props, multiEdit);
 
   return (
     <>
-      <div>{colDef.cellRenderer ? <colDef.cellRenderer {...props} saving={saving} /> : props.value}</div>
-      {cellEditorParams?.form && (
-        <cellEditorParams.form
-          cellEditorParams={props}
-          updateValue={updateValue}
-          saving={saving}
-          formProps={formProps}
-          data={data}
-          value={value}
-          field={field}
-          selectedRows={selectedRows}
-        />
-      )}
+      <div>{colDef.cellRenderer ? <colDef.cellRenderer {...props} /> : props.value}</div>
+      {props?.editor && <props.editor {...cellEditorParams} {...propsRef.current} />}
     </>
   );
 };
-
-export const GenericCellEditorComponent = forwardRef(GenericCellEditorComponentFr);

package/src/components/GridLoadableCell.tsx

@@ -2,6 +2,8 @@ import "./GridLoadableCell.scss";
 
 import { LuiMiniSpinner } from "@linzjs/lui";
 import clsx from "clsx";
+import { useContext } from "react";
+import { GridPopoverContext } from "@contexts/GridPopoverContext";
 
 export const GridLoadableCell = (props: {
   isLoading: boolean;
@@ -9,7 +11,8 @@ export const GridLoadableCell = (props: {
   children: JSX.Element | string;
   className?: string;
 }): JSX.Element => {
-  // console.log(`Rendering LoadableCell - loading: ${props.isLoading}`);
+  const { saving } = useContext(GridPopoverContext);
+
   if (props.isLoading) {
     return (
       <div style={{ display: "flex", alignItems: "center" }}>

package/src/components/GridPopoverHook.tsx

@@ -1,20 +1,17 @@
-import { ICellEditorParams } from "ag-grid-community";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "@contexts/GridContext";
-import { GridFormProps } from "./GridCell";
 import { GridBaseRow } from "./Grid";
 import { ControlledMenu } from "@react-menu3";
+import { GridPopoverContext } from "@contexts/GridPopoverContext";
 
-export const useGridPopoverHook = <RowType extends GridBaseRow>(
-  props: GridFormProps<RowType>,
-  save?: (selectedRows: any[]) => Promise<boolean>,
-) => {
-  const { cellEditorParams, saving, updateValue } = props;
-  const { eGridCell } = cellEditorParams as ICellEditorParams;
+export interface GridPopoverHookProps<RowType> {
+  save?: (selectedRows: RowType[]) => Promise<boolean>;
+}
+
+export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType> = {}) => {
   const { stopEditing } = useContext(GridContext);
+  const { anchorRef, saving, updateValueRef } = useContext(GridPopoverContext);
   const saveButtonRef = useRef<HTMLButtonElement>(null);
-  const anchorRef = useRef(eGridCell);
-  anchorRef.current = eGridCell;
   const [isOpen, setOpen] = useState(false);
 
   useEffect(() => {
@@ -23,12 +20,12 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
 
   const triggerSave = useCallback(
     async (reason?: string) => {
-      if (reason == "cancel" || !save || (await updateValue(save))) {
+      if (reason == "cancel" || !props.save || (updateValueRef.current && (await updateValueRef.current(props.save)))) {
         setOpen(false);
         stopEditing();
       }
     },
-    [save, stopEditing, updateValue],
+    [props, stopEditing, updateValueRef],
   );
 
   const popoverWrapper = useCallback(
@@ -44,7 +41,6 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
               saveButtonRef={saveButtonRef}
               menuClassName={"lui-menu"}
               onClose={(event: { reason: string }) => triggerSave(event.reason).then()}
-              reposition={"initial"}
               viewScroll={"auto"}
               dontShrinkIfDirectionIsTop={true}
             >
@@ -68,7 +64,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
         </>
       );
     },
-    [isOpen, saving, triggerSave],
+    [anchorRef, isOpen, saving, triggerSave],
   );
 
   return {

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,13 +1,13 @@
 import "../../react-menu3/styles/index.scss";
 
-import { MenuItem, MenuDivider, FocusableItem } from "@react-menu3";
+import { MenuItem, MenuDivider, FocusableItem, MenuHeader } from "@react-menu3";
 import { useCallback, useContext, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridContext } from "@contexts/GridContext";
 import { delay } from "lodash-es";
 import debounce from "debounce-promise";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
+import { CellParams } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
@@ -24,10 +24,14 @@ interface FinalSelectOption<ValueType> {
 export const MenuSeparatorString = "_____MENU_SEPARATOR_____";
 export const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
 
+export const MenuHeaderString = "_____MENU_HEADER_____";
+export const MenuHeaderItem = (title: string) => {
+  return { label: title, value: MenuHeaderString };
+};
+
 export type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
 
-export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueType>
-  extends GenericCellEditorParams<RowType> {
+export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueType> {
   filtered?: "local" | "reload";
   filterPlaceholder?: string;
   onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType, ValueType>) => Promise<void>;
@@ -36,12 +40,13 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
     | SelectOption<ValueType>[]
     | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
   optionsRequestCancel?: () => void;
+  maxRows?: number;
 }
 
-export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props: GridFormProps<RowType>) => {
-  const { popoverWrapper } = useGridPopoverHook(props);
-  const formProps = props.formProps as GridFormPopoutDropDownProps<RowType, ValueType>;
-
+export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
+  _props: GridFormPopoutDropDownProps<RowType, ValueType>,
+) => {
+  const props = _props as GridFormPopoutDropDownProps<RowType, ValueType> & CellParams<RowType>;
   const { updatingCells, stopEditing } = useContext(GridContext);
 
   const [filter, setFilter] = useState("");
@@ -55,8 +60,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
       return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
         const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
         if (hasChanged) {
-          if (formProps.onSelectedItem) {
-            await formProps.onSelectedItem({ selectedRows, value });
+          if (props.onSelectedItem) {
+            await props.onSelectedItem({ selectedRows, value });
           } else {
             selectedRows.forEach((row) => (row[field as keyof RowType] = value));
           }
@@ -64,27 +69,27 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         return true;
       });
     },
-    [formProps, props.field, props.selectedRows, updatingCells],
+    [props, updatingCells],
   );
 
   const selectFilterHandler = useCallback(
     async (value: string): Promise<boolean> => {
       const field = props.field;
       return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
-        if (formProps.onSelectFilter) {
-          await formProps.onSelectFilter({ selectedRows, value });
+        if (props.onSelectFilter) {
+          await props.onSelectFilter({ selectedRows, value });
         }
         return true;
       });
     },
-    [formProps, props.field, props.selectedRows, updatingCells],
+    [props, updatingCells],
   );
 
   // Load up options list if it's async function
   useEffect(() => {
     if (options || optionsInitialising.current) return;
     optionsInitialising.current = true;
-    let optionsConf = formProps.options ?? [];
+    let optionsConf = props.options ?? [];
 
     (async () => {
       if (typeof optionsConf == "function") {
@@ -98,7 +103,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         return item;
       }) as any as FinalSelectOption<ValueType>[];
 
-      if (formProps.filtered) {
+      if (props.filtered) {
         // This is needed otherwise when filter input is rendered and sets autofocus
         // the mouse up of the double click edit triggers the cell to cancel editing
         delay(() => setOptions(optionsList), 100);
@@ -107,11 +112,11 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
       }
       optionsInitialising.current = false;
     })();
-  }, [filter, options, formProps.filtered, formProps.options, props.selectedRows]);
+  }, [filter, options, props]);
 
-  // Local filtering
+  // Local filtering.
   useEffect(() => {
-    if (formProps.filtered == "local") {
+    if (props.filtered == "local") {
       if (options == null) return;
       setFilteredValues(
         options
@@ -126,7 +131,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
           .filter((r) => r !== undefined),
       );
     }
-  }, [formProps.filtered, filter, options]);
+  }, [props.filtered, filter, options]);
 
   const researchOnFilterChange = debounce(
     useCallback(() => {
@@ -137,14 +142,14 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
 
   const previousFilter = useRef<string>(filter);
 
-  // Reload filtering
+  // Reload filtering.
   useEffect(() => {
-    if (previousFilter.current != filter && formProps.filtered == "reload") {
+    if (previousFilter.current != filter && props.filtered == "reload") {
       previousFilter.current = filter;
-      formProps.optionsRequestCancel && formProps.optionsRequestCancel();
+      props.optionsRequestCancel && props.optionsRequestCancel();
       researchOnFilterChange().then();
     }
-  }, [filter, formProps, props, researchOnFilterChange]);
+  }, [filter, props, researchOnFilterChange]);
 
   const onFilterKeyDown = useCallback(
     async (e: KeyboardEvent) => {
@@ -154,7 +159,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         if (activeOptions.length == 1) {
           await selectItemHandler(activeOptions[0].value);
           stopEditing();
-        } else if (formProps.onSelectFilter) {
+        } else if (props.onSelectFilter) {
           await selectFilterHandler(filter);
           stopEditing();
         } else {
@@ -163,12 +168,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         }
       }
     },
-    [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, formProps],
+    [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props],
   );
 
+  const maxRowsStyles =
+    props.maxRows !== undefined ? { maxHeight: 62 + 34 * props.maxRows, overFlowY: "auto" } : undefined;
+
+  const { popoverWrapper } = useGridPopoverHook();
   return popoverWrapper(
     <>
-      {formProps.filtered && (
+      {props.filtered && (
         <>
           <FocusableItem className={"filter-item"}>
             {({ ref }: any) => (
@@ -179,7 +188,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
                   style={{ border: "0px" }}
                   ref={ref}
                   type="text"
-                  placeholder={formProps.filterPlaceholder ?? "Placeholder"}
+                  placeholder={props.filterPlaceholder ?? "Placeholder"}
                   data-testid={"filteredMenu-free-text-input"}
                   defaultValue={filter}
                   onChange={(e) => setFilter(e.target.value.toLowerCase())}
@@ -192,11 +201,13 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         </>
       )}
       <ComponentLoadingWrapper loading={!options}>
-        <>
+        <div style={maxRowsStyles}>
           {options && options.length == filteredValues?.length && <MenuItem>[Empty]</MenuItem>}
           {options?.map((item, index) =>
             item.value === MenuSeparatorString ? (
               <MenuDivider key={`$$divider_${index}`} />
+            ) : item.value === MenuHeaderString ? (
+              <MenuHeader>{item.label}</MenuHeader>
             ) : filteredValues.includes(item.value) ? null : (
               <MenuItem
                 key={`${props.field}-${index}`}
@@ -209,7 +220,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
               </MenuItem>
             ),
           )}
-        </>
+        </div>
       </ComponentLoadingWrapper>
     </>,
   );

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -4,19 +4,18 @@ import { useCallback, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "@utils/bearing";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
+import { CellParams } from "@components/GridCell";
 
-export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
-  placeHolder: string;
+export interface GridFormEditBearingProps<RowType extends GridBaseRow> {
+  placeHolder?: string;
   range?: (value: number | null) => string | null;
   onSave?: (selectedRows: RowType[], value: number | null) => Promise<boolean>;
 }
 
-export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormEditBearingProps<RowType>;
+export const GridFormEditBearing = <RowType extends GridBaseRow>(_props: GridFormEditBearingProps<RowType>) => {
+  const props = _props as GridFormEditBearingProps<RowType> & CellParams<RowType>;
   const [value, setValue] = useState<string>(`${props.value ?? ""}`);
-
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
       if (bearingStringValidator(value)) return false;
@@ -25,8 +24,9 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
       if (parsedValue === props.value) {
         return true;
       }
-      if (formProps.onSave) {
-        return await formProps.onSave(selectedRows, parsedValue);
+
+      if (props.onSave) {
+        return await props.onSave(selectedRows, parsedValue);
       } else {
         const field = props.field;
         if (field == null) {
@@ -37,9 +37,9 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
       }
       return true;
     },
-    [formProps, props.field, props.value, value],
+    [props, value],
   );
-  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
+  const { triggerSave, popoverWrapper } = useGridPopoverHook({ save });
 
   return popoverWrapper(
     <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
@@ -50,13 +50,13 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
         }}
         inputProps={{
           autoFocus: true,
-          placeholder: formProps.placeHolder,
+          placeholder: props.placeHolder,
           disabled: false,
           maxLength: 16,
           onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
         }}
-        formatted={bearingStringValidator(value, formProps.range) ? "?" : convertDDToDMS(bearingNumberParser(value))}
-        error={bearingStringValidator(value, formProps.range)}
+        formatted={bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value))}
+        error={bearingStringValidator(value, props.range)}
       />
     </div>,
   );

package/src/components/gridForm/GridFormMessage.tsx

@@ -1,28 +1,23 @@
 import { useEffect, useState } from "react";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
-import { ICellEditorParams } from "ag-grid-community";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridBaseRow } from "../Grid";
 import { useGridPopoverHook } from "../GridPopoverHook";
+import { CellParams } from "@components/GridCell";
 
-export interface GridFormMessageProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
-  message: (
-    selectedRows: RowType[],
-    cellEditorParams: ICellEditorParams,
-  ) => Promise<string | JSX.Element> | string | JSX.Element;
+export interface GridFormMessageProps<RowType extends GridBaseRow> {
+  message: (cellParams: CellParams<RowType>) => Promise<string | JSX.Element> | string | JSX.Element;
 }
 
-export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormMessageProps<RowType>;
-
+export const GridFormMessage = <RowType extends GridBaseRow>(_props: GridFormMessageProps<RowType>) => {
+  const props = _props as GridFormMessageProps<RowType> & CellParams<RowType>;
   const [message, setMessage] = useState<string | JSX.Element | null>(null);
-  const { popoverWrapper } = useGridPopoverHook(props);
+  const { popoverWrapper } = useGridPopoverHook();
 
   useEffect(() => {
     (async () => {
-      setMessage(await formProps.message(props.selectedRows, props.cellEditorParams));
+      setMessage(await props.message(props));
     })().then();
-  }, [formProps, props.selectedRows, props]);
+  }, [props]);
 
   return popoverWrapper(
     <ComponentLoadingWrapper loading={message === null}>