@linzjs/step-ag-grid 1.5.3 → 2.0.0

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -6,46 +6,44 @@ import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { delay, fromPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
+import { MenuSeparatorString } from "@components/gridForm/GridFormDropDown";
+import { CellParams } from "@components/GridCell";
 
-interface FinalSelectOption<ValueType> {
+interface MultiFinalSelectOption<ValueType> {
   value: ValueType;
   label?: JSX.Element | string;
   subComponent?: (props: any, ref: any) => any;
 }
 
-export const MenuSeparatorString = "_____MENU_SEPARATOR_____";
-export const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
-
-export type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
+export type MultiSelectOption<ValueType> = ValueType | MultiFinalSelectOption<ValueType>;
 
 export interface MultiSelectResult<RowType> {
   selectedRows: RowType[];
   values: Record<string, any>;
 }
 
-export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType>
-  extends GenericCellEditorParams<RowType> {
+export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType> {
   filtered?: boolean;
   filterPlaceholder?: string;
   onSave?: (props: MultiSelectResult<RowType>) => Promise<boolean>;
   options:
-    | SelectOption<ValueType>[]
-    | ((selectedRows: RowType[]) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
+    | MultiSelectOption<ValueType>[]
+    | ((selectedRows: RowType[]) => Promise<MultiSelectOption<ValueType>[]> | MultiSelectOption<ValueType>[]);
   initialSelectedValues?: (selectedRows: RowType[]) => any[];
 }
 
-export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormMultiSelectProps<RowType, ValueType>;
-
+export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
+  props: GridFormMultiSelectProps<RowType, ValueType>,
+) => {
+  const { selectedRows } = props as unknown as CellParams<RowType>;
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
   const optionsInitialising = useRef(false);
-  const [options, setOptions] = useState<FinalSelectOption<ValueType>[]>();
+  const [options, setOptions] = useState<MultiFinalSelectOption<ValueType>[]>();
   const subSelectedValues = useRef<Record<string, any>>({});
   const [selectedValues, setSelectedValues] = useState<any[]>(() =>
-    formProps.initialSelectedValues ? formProps.initialSelectedValues(props.selectedRows) : [],
+    props.initialSelectedValues ? props.initialSelectedValues(selectedRows) : [],
   );
 
   const save = useCallback(
@@ -53,34 +51,34 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
       const values: Record<string, any> = fromPairs(
         selectedValues.map((value) => [value, subSelectedValues.current[value] ?? true]),
       );
-      if (formProps.onSave) {
-        return await formProps.onSave({ selectedRows, values });
+      if (props.onSave) {
+        return await props.onSave({ selectedRows, values });
       }
       return true;
     },
-    [formProps, selectedValues],
+    [props, selectedValues],
   );
-  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({ save });
 
   // 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") {
-        optionsConf = await optionsConf(props.selectedRows);
+        optionsConf = await optionsConf(selectedRows);
       }
 
       const optionsList = optionsConf?.map((item) => {
         if (item == null || typeof item == "string" || typeof item == "number") {
-          item = { value: item as ValueType, label: item } as FinalSelectOption<ValueType>;
+          item = { value: item as ValueType, label: item } as MultiFinalSelectOption<ValueType>;
         }
         return item;
-      }) as any as FinalSelectOption<ValueType>[];
+      }) as any as MultiFinalSelectOption<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);
@@ -89,10 +87,10 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
       }
       optionsInitialising.current = false;
     })();
-  }, [formProps.filtered, formProps.options, options, props.selectedRows]);
+  }, [props.filtered, props.options, options, selectedRows]);
 
   useEffect(() => {
-    if (!formProps.filtered || options == null) return;
+    if (!props.filtered || options == null) return;
     setFilteredValues(
       options
         .map((option) => {
@@ -105,12 +103,12 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
         })
         .filter((r) => r !== undefined),
     );
-  }, [formProps.filtered, filter, options]);
+  }, [props.filtered, filter, options]);
 
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!options}>
       <div className={"Grid-popoverContainerList"}>
-        {options && formProps.filtered && (
+        {options && props.filtered && (
           <>
             <FocusableItem className={"filter-item"} key={"filter"}>
               {({ ref }: any) => (
@@ -121,7 +119,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
                     style={{ border: "0px" }}
                     ref={ref}
                     type="text"
-                    placeholder={formProps.filterPlaceholder ?? "Placeholder"}
+                    placeholder={props.filterPlaceholder ?? "Placeholder"}
                     data-testid={"filteredMenu-free-text-input"}
                     defaultValue={""}
                     onChange={(e) => setFilter(e.target.value.toLowerCase())}

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -3,15 +3,15 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "@contexts/GridContext";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { MenuDivider, MenuItem } from "@react-menu3";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
+import { CellParams } from "@components/GridCell";
 
-export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
 }
 
 /** Menu configuration types **/
-export const MenuSeparator = Object.freeze({ __isMenuSeparator__: true });
+export const PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
 
 interface MenuSeparatorType {
   __isMenuSeparator__: boolean;
@@ -29,9 +29,8 @@ export interface MenuOption<RowType> {
  * NOTE: If the popout menu doesn't appear on single click when also selecting row it's because
  * you need a useMemo around your columnDefs
  */
-export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormPopoutMenuProps<RowType>;
-
+export const GridFormPopoutMenu = <RowType extends GridBaseRow>(_props: GridFormPopoutMenuProps<RowType>) => {
+  const props = _props as GridFormPopoutMenuProps<RowType> & CellParams<RowType>;
   const { updatingCells } = useContext(GridContext);
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<MenuOption<RowType>[]>();
@@ -40,7 +39,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
   useEffect(() => {
     if (options || optionsInitialising.current) return;
     optionsInitialising.current = true;
-    const optionsConf = formProps.options ?? [];
+    const optionsConf = props.options ?? [];
 
     (async () => {
       if (typeof optionsConf == "function") {
@@ -51,7 +50,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
 
       optionsInitialising.current = false;
     })();
-  }, [options, formProps.options, props.selectedRows]);
+  }, [options, props.options, props.selectedRows]);
 
   const actionClick = useCallback(
     async (menuOption: MenuOption<any>) => {
@@ -66,15 +65,15 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
   const selectedRowCount = props.selectedRows.length;
 
   const filteredOptions = options?.filter((menuOption) => {
-    return menuOption.label === MenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
+    return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
   });
 
-  const { popoverWrapper } = useGridPopoverHook(props);
+  const { popoverWrapper } = useGridPopoverHook();
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!filteredOptions}>
       <div className={"Grid-popoverContainerList"}>
         {options?.map((item, index) =>
-          item.label === MenuSeparator ? (
+          item.label === PopoutMenuSeparator ? (
             <MenuDivider key={`$$divider_${index}`} />
           ) : (
             !item.hidden && (

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useState } from "react";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { TextAreaInput } from "../../lui/TextAreaInput";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
+import { CellParams } from "@components/GridCell";
 
-export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+export interface GridFormTextAreaProps<RowType extends GridBaseRow> {
   placeholder?: string;
   required?: boolean;
   maxlength?: number;
@@ -13,22 +13,22 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends Gene
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
 }
 
-export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormTextAreaProps<RowType>;
+export const GridFormTextArea = <RowType extends GridBaseRow>(_props: GridFormTextAreaProps<RowType>) => {
+  const props = _props as GridFormTextAreaProps<RowType> & CellParams<RowType>;
   const [value, setValue] = useState(props.value ?? "");
 
   const invalid = useCallback(() => {
-    if (formProps.required && value.length == 0) {
+    if (props.required && value.length == 0) {
       return `Some text is required`;
     }
-    if (formProps.maxlength && value.length > formProps.maxlength) {
-      return `Text must be no longer than ${formProps.maxlength} characters`;
+    if (props.maxlength && value.length > props.maxlength) {
+      return `Text must be no longer than ${props.maxlength} characters`;
     }
-    if (formProps.validate) {
-      return formProps.validate(value);
+    if (props.validate) {
+      return props.validate(value);
     }
     return null;
-  }, [formProps, value]);
+  }, [props, value]);
 
   const save = useCallback(
     async (selectedRows: any[]): Promise<boolean> => {
@@ -36,8 +36,8 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormPro
 
       if (props.value === (value ?? "")) return true;
 
-      if (formProps.onSave) {
-        return await formProps.onSave(selectedRows, value);
+      if (props.onSave) {
+        return await props.onSave(selectedRows, value);
       }
 
       const field = props.field;
@@ -48,17 +48,16 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormPro
       selectedRows.forEach((row) => (row[field] = value));
       return true;
     },
-    [formProps, invalid, props.field, props.value, value],
+    [props, invalid, value],
   );
-  const { popoverWrapper } = useGridPopoverHook(props, save);
-
+  const { popoverWrapper } = useGridPopoverHook({ save });
   return popoverWrapper(
-    <div style={{ display: "flex", flexDirection: "row", width: formProps.width ?? 240 }} className={"FormTest"}>
+    <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }} className={"FormTest"}>
       <TextAreaInput
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
-        inputProps={{ placeholder: formProps.placeholder }}
+        inputProps={{ placeholder: props.placeholder }}
       />
     </div>,
   );

package/src/components/gridForm/GridFormTextInput.tsx

@@ -1,37 +1,38 @@
 import { useCallback, useState } from "react";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
+import { CellParams } from "@components/GridCell";
 
-export interface GridFormTextInputProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
+export interface GridFormTextInputProps<RowType extends GridBaseRow> {
   placeholder?: string;
   units?: string;
   required?: boolean;
   maxlength?: number;
   width?: string | number;
-  validate?: (value: string) => string | null;
+  // Return null for ok, otherwise an error string
+  validate?: (value: string, data: RowType) => string | null;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
 }
 
-export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
-  const formProps = props.formProps as GridFormTextInputProps<RowType>;
+export const GridFormTextInput = <RowType extends GridBaseRow>(_props: GridFormTextInputProps<RowType>) => {
+  const props = _props as GridFormTextInputProps<RowType> & CellParams<RowType>;
   const initValue = props.value == null ? "" : `${props.value}`;
   const [value, setValue] = useState(initValue);
 
   const invalid = useCallback(() => {
     const trimmedValue = value.trim();
-    if (formProps.required && trimmedValue.length == 0) {
+    if (props.required && trimmedValue.length == 0) {
       return `Some text is required`;
     }
-    if (formProps.maxlength && trimmedValue.length > formProps.maxlength) {
-      return `Text must be no longer than ${formProps.maxlength} characters`;
+    if (props.maxlength && trimmedValue.length > props.maxlength) {
+      return `Text must be no longer than ${props.maxlength} characters`;
     }
-    if (formProps.validate) {
-      return formProps.validate(trimmedValue);
+    if (props.validate) {
+      return props.validate(trimmedValue, props.data);
     }
     return null;
-  }, [formProps, value]);
+  }, [props, value]);
 
   const save = useCallback(
     async (selectedRows: any[]): Promise<boolean> => {
@@ -39,8 +40,8 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
       const trimmedValue = value.trim();
       if (initValue === trimmedValue) return true;
 
-      if (formProps.onSave) {
-        return await formProps.onSave(selectedRows, trimmedValue);
+      if (props.onSave) {
+        return await props.onSave(selectedRows, trimmedValue);
       }
 
       const field = props.field;
@@ -51,20 +52,20 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
       selectedRows.forEach((row) => (row[field] = trimmedValue));
       return true;
     },
-    [invalid, value, initValue, formProps, props.field],
+    [invalid, value, initValue, props],
   );
-  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({ save });
 
   return popoverWrapper(
-    <div style={{ display: "flex", flexDirection: "row", width: formProps.width ?? 240 }} className={"FormTest"}>
+    <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }} className={"FormTest"}>
       <TextInputFormatted
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
-        formatted={formProps.units}
+        formatted={props.units}
         inputProps={{
           style: { width: "100%" },
-          placeholder: formProps.placeholder,
+          placeholder: props.placeholder,
           onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
         }}
       />

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -1,21 +1,22 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
-import { GridCell } from "../GridCell";
+import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormMultiSelect, GridFormMultiSelectProps } from "../gridForm/GridFormMultiSelect";
+import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
 
 export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType>(
-  colDef: GenericCellColDef<RowType, GridFormMultiSelectProps<RowType, ValueType>>,
-) =>
-  GridCell<RowType, GridFormMultiSelectProps<RowType, ValueType>>({
-    initialWidth: 65,
-    maxWidth: 150,
-    cellClass: colDef.cellEditor?.multiEdit ? GenericMultiEditCellClass : undefined,
-    ...colDef,
-    ...(colDef?.cellEditorParams && {
-      cellEditorParams: {
-        ...colDef.cellEditorParams,
-        form: GridFormMultiSelect,
-      },
-    }),
-  });
+  colDef: GenericCellColDef<RowType>,
+  props: GenericCellEditorProps<GridFormMultiSelectProps<RowType, ValueType>>,
+): ColDefT<RowType> =>
+  GridCell(
+    {
+      initialWidth: 65,
+      maxWidth: 150,
+      cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined,
+      ...colDef,
+    },
+    {
+      editor: GridFormMultiSelect,
+      ...props,
+    },
+  );

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -1,61 +1,69 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 import { bearingCorrectionValueFormatter, bearingValueFormatter } from "@utils/bearing";
-import { GridCell } from "../GridCell";
+import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
 import { GridBaseRow } from "../Grid";
+import { ColDef } from "ag-grid-community";
 
 export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
-  colDef: GenericCellColDef<RowType, GridFormEditBearingProps<RowType>>,
-) =>
-  GridCell<RowType, GridFormEditBearingProps<RowType>>({
-    initialWidth: 65,
-    maxWidth: 150,
-    valueFormatter: bearingValueFormatter,
-    cellClass: colDef.cellEditorParams?.multiEdit ? GenericMultiEditCellClass : undefined,
-    ...colDef,
-    ...(colDef?.cellEditorParams && {
-      cellEditorParams: {
-        ...colDef.cellEditorParams,
-        form: GridFormEditBearing,
-      },
-    }),
-  });
+  colDef: ColDef,
+  props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
+): ColDefT<RowType> => {
+  return GridCell(
+    {
+      initialWidth: 65,
+      maxWidth: 150,
+      valueFormatter: bearingValueFormatter,
+      cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined,
+      ...colDef,
+    },
+    {
+      editor: GridFormEditBearing,
+      ...props,
+    },
+  );
+};
 
 export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
-  colDef: GenericCellColDef<RowType, GridFormEditBearingProps<RowType>>,
-) => {
-  const init = GridPopoverEditBearingLike(colDef);
-  return {
-    ...init,
-    valueFormatter: bearingValueFormatter,
-    cellEditorParams: {
-      range: (value: number | null) => {
-        if (value === null) return "Bearing is required";
-        if (value >= 360) return "Bearing must be less than 360 degrees";
-        if (value < 0) return "Bearing must not be negative";
-        return null;
+  colDef: ColDef,
+  props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
+): ColDefT<RowType> => {
+  return GridPopoverEditBearingLike(
+    { valueFormatter: bearingValueFormatter, ...colDef },
+    {
+      multiEdit: !!props.multiEdit,
+      editorParams: {
+        placeHolder: "Enter bearing correction",
+        range: (value: number | null) => {
+          if (value === null) return "Bearing correction is required";
+          if (value >= 360) return "Bearing correction must be less than 360 degrees";
+          if (value < 0) return "Bearing correction must not be negative";
+          return null;
+        },
+        ...props.editorParams,
       },
-      ...init.cellEditorParams,
     },
-  };
+  );
 };
 
 export const GridPopoverEditBearingCorrection = <RowType extends GridBaseRow>(
-  colDef: GenericCellColDef<RowType, GridFormEditBearingProps<RowType>>,
-) => {
-  const init = GridPopoverEditBearingLike(colDef);
-  return {
-    ...init,
-    valueFormatter: bearingCorrectionValueFormatter,
-    cellEditorParams: {
-      range: (value: number | null) => {
-        if (value === null) return "Bearing is required";
-        if (value >= 360) return "Bearing must be less than 360 degrees";
-        if (value <= -180) return "Bearing must be greater then -180 degrees";
-        return null;
+  colDef: ColDef,
+  props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
+): ColDefT<RowType> => {
+  return GridPopoverEditBearingLike(
+    { valueFormatter: bearingCorrectionValueFormatter, ...colDef },
+    {
+      multiEdit: !!props.multiEdit,
+      editorParams: {
+        placeHolder: "Enter bearing correction",
+        range: (value: number | null) => {
+          if (value === null) return "Bearing is required";
+          if (value >= 360) return "Bearing must be less than 360 degrees";
+          if (value <= -180) return "Bearing must be greater then -180 degrees";
+          return null;
+        },
+        ...props.editorParams,
       },
-      ...init.cellEditorParams,
     },
-  };
+  );
 };

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -1,21 +1,22 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
-import { GridCell } from "../GridCell";
+import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormDropDown, GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
+import { ColDef } from "ag-grid-community";
 
 export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
-  colDef: GenericCellColDef<RowType, GridFormPopoutDropDownProps<RowType, ValueType>>,
-) =>
-  GridCell<RowType, GridFormPopoutDropDownProps<RowType, ValueType>>({
-    initialWidth: 65,
-    maxWidth: 150,
-    cellClass: colDef.cellEditor?.multiEdit ? GenericMultiEditCellClass : undefined,
-    ...colDef,
-    ...(colDef?.cellEditorParams && {
-      cellEditorParams: {
-        ...colDef.cellEditorParams,
-        form: GridFormDropDown,
-      },
-    }),
-  });
+  colDef: ColDef,
+  props: GenericCellEditorProps<GridFormPopoutDropDownProps<RowType, ValueType>>,
+): ColDefT<RowType> =>
+  GridCell(
+    {
+      initialWidth: 65,
+      maxWidth: 150,
+      cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined,
+      ...colDef,
+    },
+    {
+      editor: GridFormDropDown,
+      ...props,
+    },
+  );

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -4,32 +4,31 @@ import "../../react-menu3/styles/index.scss";
 import { ColDef } from "ag-grid-community";
 import { GenericMultiEditCellClass } from "../GenericCellClass";
 import { GridBaseRow } from "../Grid";
-import { GridCell } from "../GridCell";
+import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormPopoutMenu, GridFormPopoutMenuProps } from "../gridForm/GridFormPopoutMenu";
 import { GridRenderPopoutMenuCell } from "../gridRender/GridRenderPopoutMenuCell";
-import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
 /**
  * Popout burger menu
  */
 export const GridPopoverMenu = <RowType extends GridBaseRow>(
-  colDef: GenericCellColDef<RowType, GridFormPopoutMenuProps<RowType>>,
-): ColDef =>
-  GridCell<RowType, GridFormPopoutMenuProps<RowType>>({
-    maxWidth: 64,
-    editable: colDef.editable != null ? colDef.editable : true,
-    cellRenderer: GridRenderPopoutMenuCell,
-    cellClass: colDef?.cellEditorParams?.multiEdit !== false ? GenericMultiEditCellClass : undefined,
-    ...colDef,
-    cellRendererParams: {
-      // Menus open on single click, this parameter is picked up in Grid.tsx
-      singleClickEdit: true,
-    },
-    ...(colDef?.cellEditorParams && {
-      cellEditorParams: {
-        multiEdit: true,
-        ...colDef.cellEditorParams,
-        form: GridFormPopoutMenu,
+  colDef: ColDef,
+  props: GenericCellEditorProps<GridFormPopoutMenuProps<RowType>>,
+): ColDefT<RowType> =>
+  GridCell<RowType, GridFormPopoutMenuProps<RowType>>(
+    {
+      maxWidth: 64,
+      editable: colDef.editable != null ? colDef.editable : true,
+      cellRenderer: GridRenderPopoutMenuCell,
+      cellClass: colDef?.cellEditorParams?.multiEdit !== false ? GenericMultiEditCellClass : undefined,
+      ...colDef,
+      cellRendererParams: {
+        // Menus open on single click, this parameter is picked up in Grid.tsx
+        singleClickEdit: true,
       },
-    }),
-  });
+    },
+    {
+      editor: GridFormPopoutMenu,
+      ...props,
+    },
+  );