@linzjs/step-ag-grid 7.19.6 → 8.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "7.19.6",
+  "version": "8.1.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -27,7 +27,7 @@ export interface GridProps {
   externalSelectedItems?: any[];
   setExternalSelectedItems?: (items: any[]) => void;
   defaultColDef?: GridOptions["defaultColDef"];
-  columnDefs: GridOptions["columnDefs"];
+  columnDefs: ColDef[];
   rowData: GridOptions["rowData"];
   noRowsOverlayText?: string;
   postSortRows?: GridOptions["postSortRows"];
@@ -168,8 +168,8 @@ export const Grid = (params: GridProps): JSX.Element => {
     synchroniseExternallySelectedItemsToGrid();
   }, [synchroniseExternallySelectedItemsToGrid]);
 
-  const columnDefs = useMemo((): GridOptions["columnDefs"] => {
-    const adjustColDefs = (params.columnDefs as ColDef[]).map((colDef) => {
+  const columnDefs = useMemo((): ColDef[] => {
+    const adjustColDefs = params.columnDefs.map((colDef) => {
       return {
         ...colDef,
         editable: params.readOnly ? false : params.defaultColDef?.editable ?? colDef.editable,

package/src/components/gridForm/GridFormDropDown.tsx

@@ -45,8 +45,9 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extend
     | "GridPopoverEditDropDown-containerUnlimited"
     | string
     | undefined;
-  // local means the filter won't change if it's reloaded, reload means it does change
+  // local means the use the local filter, otherwise it's expected options will be passed a function that takes a filter
   filtered?: "local" | "reload";
+  filterDefaultValue?: string;
   filterPlaceholder?: string;
   filterHelpText?: string;
   noOptionsMessage?: string;
@@ -66,7 +67,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   const { selectedRows, field, data } = useGridPopoverContext<RowType>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
-  const [filter, setFilter] = useState("");
+  const [filter, setFilter] = useState(props.filterDefaultValue ?? "");
   const [filteredValues, setFilteredValues] = useState<any[]>();
   const [options, setOptions] = useState<FinalSelectOption[] | null>(null);
   const subComponentIsValid = useRef(false);
@@ -143,7 +144,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
     }
   }, [props.filtered, filter, options]);
 
-  const researchOnFilterChange = useMemo(
+  const reSearchOnFilterChange = useMemo(
     () =>
       debounce(() => {
         setOptions(null);
@@ -157,9 +158,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   useEffect(() => {
     if (previousFilter.current != filter && props.filtered == "reload") {
       previousFilter.current = filter;
-      researchOnFilterChange().then();
+      reSearchOnFilterChange().then();
     }
-  }, [filter, props, researchOnFilterChange]);
+  }, [filter, props, reSearchOnFilterChange]);
 
   /**
    * Saves are wrapped in updateValue and triggered by blur events
@@ -193,6 +194,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
     save,
   });
 
+  let lastHeader: JSX.Element | null = null;
+  let showHeader: JSX.Element | null = null;
+
   return popoverWrapper(
     <>
       {props.filtered && (
@@ -237,76 +241,87 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
               {props.noOptionsMessage ?? "No Options"}
             </MenuItem>
           )}
-          {options?.map((item: FinalSelectOption, index) =>
-            item.value === MenuSeparatorString ? (
-              <MenuDivider key={`$$divider_${index}`} />
-            ) : item.value === MenuHeaderString ? (
-              <MenuHeader key={`$$header_${index}`}>{item.label}</MenuHeader>
-            ) : (
+          {options?.map((item: FinalSelectOption, index) => {
+            showHeader = null;
+            if (item.value === MenuSeparatorString) {
+              return <MenuDivider key={`$$divider_${index}`} />;
+            } else if (item.value === MenuHeaderString) {
+              lastHeader = <MenuHeader key={`$$header_${index}`}>{item.label}</MenuHeader>;
+              return <></>;
+            } else {
+              if (lastHeader) {
+                showHeader = lastHeader;
+                lastHeader = null;
+              }
+            }
+            return (
               (!filteredValues || filteredValues.includes(item)) && (
-                <div key={`menu-wrapper-${index}`}>
-                  <MenuItem
-                    key={`${fieldToString(field)}-${index}`}
-                    disabled={!!item.disabled}
-                    title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-                    value={item.value}
-                    onFocus={() => {
-                      setSelectedItem(item);
-                      if (item.subComponent) {
+                <>
+                  {showHeader}
+                  <div key={`menu-wrapper-${index}`}>
+                    <MenuItem
+                      key={`${fieldToString(field)}-${index}`}
+                      disabled={!!item.disabled}
+                      title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                      value={item.value}
+                      onFocus={() => {
                         setSelectedItem(item);
-                        subComponentIsValid.current = true;
-                        subComponentInitialValue.current = null;
-                      } else {
-                        setSubSelectedValue(null);
-                        subComponentIsValid.current = true;
-                      }
-                    }}
-                    onClick={(e: ClickEvent) => {
-                      if (item.subComponent) {
-                        e.keepOpen = true;
-                      }
-                    }}
-                  >
-                    {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
-                    {item.subComponent ? "..." : ""}
-                  </MenuItem>
+                        if (item.subComponent) {
+                          setSelectedItem(item);
+                          subComponentIsValid.current = true;
+                          subComponentInitialValue.current = null;
+                        } else {
+                          setSubSelectedValue(null);
+                          subComponentIsValid.current = true;
+                        }
+                      }}
+                      onClick={(e: ClickEvent) => {
+                        if (item.subComponent) {
+                          e.keepOpen = true;
+                        }
+                      }}
+                    >
+                      {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                      {item.subComponent ? "..." : ""}
+                    </MenuItem>
 
-                  {item.subComponent && selectedItem === item && (
-                    <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
-                      {(ref: MenuInstance) => (
-                        <GridSubComponentContext.Provider
-                          value={{
-                            context: { options },
-                            data,
-                            value: subSelectedValue,
-                            setValue: (value: any) => {
-                              setSubSelectedValue(value);
-                              if (subComponentInitialValue.current === null) {
-                                // copy the default value of the sub-component so we can change detect on save
-                                subComponentInitialValue.current = JSON.stringify(value);
-                              }
-                            },
-                            setValid: (valid: boolean) => {
-                              subComponentIsValid.current = valid;
-                            },
-                            triggerSave: async () => {
-                              ref.closeMenu();
-                            },
-                          }}
-                        >
-                          {item.subComponent && (
-                            <div className={"subComponent"}>
-                              <item.subComponent key={`${fieldToString(field)}-${index}_subcomponent_inner`} />
-                            </div>
-                          )}
-                        </GridSubComponentContext.Provider>
-                      )}
-                    </FocusableItem>
-                  )}
-                </div>
+                    {item.subComponent && selectedItem === item && (
+                      <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
+                        {(ref: MenuInstance) => (
+                          <GridSubComponentContext.Provider
+                            value={{
+                              context: { options },
+                              data,
+                              value: subSelectedValue,
+                              setValue: (value: any) => {
+                                setSubSelectedValue(value);
+                                if (subComponentInitialValue.current === null) {
+                                  // copy the default value of the subcomponent so we can change detect on save
+                                  subComponentInitialValue.current = JSON.stringify(value);
+                                }
+                              },
+                              setValid: (valid: boolean) => {
+                                subComponentIsValid.current = valid;
+                              },
+                              triggerSave: async () => {
+                                ref.closeMenu();
+                              },
+                            }}
+                          >
+                            {item.subComponent && (
+                              <div className={"subComponent"}>
+                                <item.subComponent key={`${fieldToString(field)}-${index}_subcomponent_inner`} />
+                              </div>
+                            )}
+                          </GridSubComponentContext.Provider>
+                        )}
+                      </FocusableItem>
+                    )}
+                  </div>
+                </>
               )
-            ),
-          )}
+            );
+          })}
         </>
       </ComponentLoadingWrapper>
     </>,

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -7,13 +7,14 @@ import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends CellEditorCommon {
+  formatValue?: (value: any) => string;
   placeHolder?: string;
   range?: (value: number | null) => string | null;
-  onSave?: (selectedRows: RowType[], value: number | null) => Promise<boolean>;
+  onSave?: (props: { selectedRows: RowType[]; value: number | null }) => Promise<boolean>;
 }
 
 export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormEditBearingProps<RowType>) => {
-  const { field, value: initialValue, formatValue } = useGridPopoverContext<RowType>();
+  const { field, value: initialValue } = useGridPopoverContext<RowType>();
 
   // This clears out any scientific precision
   const defaultValue = useMemo(
@@ -34,7 +35,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
       }
 
       if (props.onSave) {
-        return await props.onSave(selectedRows, parsedValue);
+        return await props.onSave({ selectedRows, value: parsedValue });
       } else {
         if (field == null) {
           console.error("field is not defined in ColDef");
@@ -63,7 +64,11 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
         }}
         autoFocus={true}
         placeholder={props.placeHolder}
-        formatted={bearingStringValidator(value, props.range) ? "?" : formatValue(bearingNumberParser(value))}
+        formatted={
+          bearingStringValidator(value, props.range) || !props.formatValue
+            ? "?"
+            : props.formatValue(bearingNumberParser(value))
+        }
         error={bearingStringValidator(value, props.range)}
         helpText={"Press enter or tab to save"}
       />

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -52,8 +52,8 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow> extends C
   filtered?: boolean;
   filterPlaceholder?: string;
   filterHelpText?: string | ((filter: string, options: MultiSelectOption[]) => string | undefined);
-  onSelectFilter?: (filter: string, options: MultiSelectOption[]) => void;
-  onSave?: (selectedRows: RowType[], selectedOptions: MultiSelectOption[]) => Promise<boolean>;
+  onSelectFilter?: (props: { filter: string; options: MultiSelectOption[] }) => void;
+  onSave?: (props: { selectedRows: RowType[]; selectedOptions: MultiSelectOption[] }) => Promise<boolean>;
   headers?: GridFormMultiSelectGroup[];
   options: MultiSelectOption[] | ((selectedRows: RowType[]) => Promise<MultiSelectOption[]> | MultiSelectOption[]);
   invalid?: (selectedRows: RowType[], selectedOptions: MultiSelectOption[]) => boolean;
@@ -90,10 +90,10 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
       // Any changes to save?
       if (initialValues === JSON.stringify(options)) return true;
 
-      return props.onSave(
+      return props.onSave({
         selectedRows,
-        options.filter((o) => o.checked),
-      );
+        selectedOptions: options.filter((o) => o.checked),
+      });
     },
     [initialValues, options, props],
   );
@@ -203,7 +203,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
 const FilterInput = (props: {
   options: MultiSelectOption[];
   setOptions: (options: MultiSelectOption[]) => void;
-  onSelectFilter?: (filter: string, options: MultiSelectOption[]) => void;
+  onSelectFilter?: (props: { filter: string; options: MultiSelectOption[] }) => void;
   filter: string;
   setFilter: Dispatch<SetStateAction<string>>;
   headerGroups: HeaderGroupType;
@@ -259,7 +259,7 @@ const FilterInput = (props: {
     }
 
     const preFilterOptions = JSON.stringify(options);
-    onSelectFilter(filterTrimmed, options);
+    onSelectFilter({ filter: filterTrimmed, options });
     // Detect if options list changed and update
     if (preFilterOptions === JSON.stringify(options)) return;
 

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -8,13 +8,14 @@ import { GridSubComponentContext } from "../../contexts/GridSubComponentContext"
 import { ClickEvent } from "../../react-menu3/types";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
-export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormPopoverMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
-  defaultAction?: (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => Promise<void>;
+  defaultAction?: (props: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => Promise<void>;
 }
 
 /** Menu configuration types **/
-export const PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
+const __isMenuSeparator__ = "__isMenuSeparator__";
+export const PopoutMenuSeparator = Object.freeze({ label: __isMenuSeparator__ });
 
 interface MenuSeparatorType {
   __isMenuSeparator__: boolean;
@@ -26,7 +27,7 @@ export interface SelectedMenuOptionResult<RowType extends GridBaseRow> extends M
 
 export interface MenuOption<RowType extends GridBaseRow> {
   label: JSX.Element | string | MenuSeparatorType;
-  action?: (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => Promise<void>;
+  action?: (props: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => Promise<void>;
   disabled?: string | boolean;
   hidden?: boolean;
   subComponent?: (props: any) => JSX.Element;
@@ -36,7 +37,7 @@ export interface MenuOption<RowType extends GridBaseRow> {
  * 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 GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridFormPopoutMenuProps<RowType>) => {
+export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridFormPopoverMenuProps<RowType>) => {
   const { selectedRows, updateValue, data } = useGridPopoverContext<RowType>();
 
   const optionsInitialising = useRef(false);
@@ -47,9 +48,9 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
   const [subSelectedValue, setSubSelectedValue] = useState<any>();
 
   const defaultAction = useCallback(
-    async (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => {
-      if (props.defaultAction) await props.defaultAction(selectedRows, menuOption);
-      else console.error(`No action specified for ${menuOption.label} menu options`);
+    async (params: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => {
+      if (props.defaultAction) await props.defaultAction(params);
+      else console.error(`No action specified for ${params.menuOption.label} menu options`);
     },
     [props],
   );
@@ -77,8 +78,10 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
 
   const actionClick = useCallback(
     async (menuOption: MenuOption<RowType>) => {
-      const result = { ...menuOption, subValue: subSelectedValue };
-      await (menuOption.action ?? defaultAction)(selectedRows, result);
+      await (menuOption.action ?? defaultAction)({
+        selectedRows,
+        menuOption: { ...menuOption, subValue: subSelectedValue },
+      });
       return true;
     },
     [defaultAction, selectedRows, subSelectedValue],
@@ -117,49 +120,55 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!options} className={"GridFormPopupMenu"}>
       <>
-        {options?.map((item, index) =>
-          item.label === PopoutMenuSeparator ? (
-            <MenuDivider key={`$$divider_${index}`} />
-          ) : (
-            !item.hidden && (
-              <Fragment key={`${item.label}`}>
-                <MenuItem
-                  key={`${item.label}`}
-                  onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
-                  disabled={!!item.disabled}
-                  title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-                >
-                  {item.label as JSX.Element | string}
-                </MenuItem>
-                {item.subComponent && subComponentSelected === item && (
-                  <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
-                    {(_: any) =>
-                      item.subComponent && (
-                        <GridSubComponentContext.Provider
-                          value={{
-                            context: {},
-                            data,
-                            value: subSelectedValue,
-                            setValue: (value: any) => {
-                              setSubSelectedValue(value);
-                            },
-                            setValid: (valid: boolean) => {
-                              subComponentIsValid.current = valid;
-                            },
-                            triggerSave,
-                          }}
-                        >
-                          <div className={"subComponent"}>
-                            <item.subComponent />
-                          </div>
-                        </GridSubComponentContext.Provider>
-                      )
-                    }
-                  </FocusableItem>
-                )}
-              </Fragment>
-            )
-          ),
+        {options?.length === 0 ? (
+          <MenuItem key={`GridPopoverMenu-empty`} className={"GridPopoverMenu-noOptions"} disabled={true}>
+            No actions
+          </MenuItem>
+        ) : (
+          options?.map((item, index) =>
+            item.label === "__isMenuSeparator__" ? (
+              <MenuDivider key={`$$divider_${index}`} />
+            ) : (
+              !item.hidden && (
+                <Fragment key={`${item.label}`}>
+                  <MenuItem
+                    key={`${item.label}`}
+                    onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
+                    disabled={!!item.disabled}
+                    title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                  >
+                    {item.label as JSX.Element | string}
+                  </MenuItem>
+                  {item.subComponent && subComponentSelected === item && (
+                    <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
+                      {(_: any) =>
+                        item.subComponent && (
+                          <GridSubComponentContext.Provider
+                            value={{
+                              context: {},
+                              data,
+                              value: subSelectedValue,
+                              setValue: (value: any) => {
+                                setSubSelectedValue(value);
+                              },
+                              setValid: (valid: boolean) => {
+                                subComponentIsValid.current = valid;
+                              },
+                              triggerSave,
+                            }}
+                          >
+                            <div className={"subComponent"}>
+                              <item.subComponent />
+                            </div>
+                          </GridSubComponentContext.Provider>
+                        )
+                      }
+                    </FocusableItem>
+                  )}
+                </Fragment>
+              )
+            ),
+          )
         )}
       </>
     </ComponentLoadingWrapper>,

package/src/components/gridForm/GridFormTextArea.tsx

@@ -11,7 +11,7 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow>
     CellEditorCommon {
   placeholder?: string;
   width?: string | number;
-  onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
+  onSave?: (props: { selectedRows: RowType[]; value: string }) => Promise<boolean>;
   helpText?: string;
 }
 
@@ -34,7 +34,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
       if (initValue === trimmedValue) return true;
 
       if (props.onSave) {
-        return await props.onSave(selectedRows, trimmedValue);
+        return await props.onSave({ selectedRows, value: trimmedValue });
       }
 
       selectedRows.forEach((row) => (row[field] = trimmedValue as any));

package/src/components/gridForm/GridFormTextInput.tsx

@@ -12,7 +12,7 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow>
   placeholder?: string;
   units?: string;
   width?: string | number;
-  onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
+  onSave?: (props: { selectedRows: RowType[]; value: string }) => Promise<boolean>;
   helpText?: string;
 }
 
@@ -35,7 +35,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
       if (initValue === trimmedValue) return true;
 
       if (props.onSave) {
-        return await props.onSave(selectedRows, trimmedValue);
+        return await props.onSave({ selectedRows, value: trimmedValue });
       }
 
       selectedRows.forEach((row) => (row[field] = trimmedValue as any));

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -3,15 +3,19 @@ import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
 import { GridBaseRow } from "../Grid";
 import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
+import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 
-export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
+const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
-  props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
+  props: GenericCellEditorProps<GridFormEditBearingProps<RowType>> & {
+    editorParams: { formatValue: (value: any) => any };
+  },
 ): ColDefT<RowType> =>
   GridCell(
     {
       initialWidth: 65,
       maxWidth: 150,
+      valueFormatter: (params: ValueFormatterParams) => props.editorParams?.formatValue(params.value) ?? "",
       ...colDef,
     },
     {
@@ -20,44 +24,48 @@ export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
     },
   );
 
+export const GridPopoverEditBearingEditorParams = {
+  placeHolder: "Enter bearing",
+  formatValue: bearingValueFormatter,
+  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;
+  },
+};
+
 export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
 ): ColDefT<RowType> =>
-  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,
-      },
+  GridPopoverEditBearingLike(colDef, {
+    multiEdit: !!props.multiEdit,
+    editorParams: {
+      ...GridPopoverEditBearingEditorParams,
+      ...props.editorParams,
     },
-  );
+  });
+
+export const GridPopoverEditBearingCorrectionEditorParams = {
+  placeHolder: "Enter bearing correction",
+  formatValue: bearingCorrectionValueFormatter,
+  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 <= -180) return "Bearing correction must be greater then -180 degrees";
+    return null;
+  },
+};
 
 export const GridPopoverEditBearingCorrection = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
 ): ColDefT<RowType> =>
-  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,
-      },
+  GridPopoverEditBearingLike(colDef, {
+    multiEdit: !!props.multiEdit,
+    editorParams: {
+      ...GridPopoverEditBearingCorrectionEditorParams,
+      ...props.editorParams,
     },
-  );
+  });

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -1,6 +1,6 @@
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
-import { GridFormPopoverMenu, GridFormPopoutMenuProps } from "../gridForm/GridFormPopoverMenu";
+import { GridFormPopoverMenu, GridFormPopoverMenuProps } from "../gridForm/GridFormPopoverMenu";
 import { GridRenderPopoutMenuCell } from "../gridRender/GridRenderPopoutMenuCell";
 import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
@@ -9,9 +9,9 @@ import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
  */
 export const GridPopoverMenu = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
-  custom: GenericCellEditorProps<GridFormPopoutMenuProps<RowType>>,
+  custom: GenericCellEditorProps<GridFormPopoverMenuProps<RowType>>,
 ): ColDefT<RowType> =>
-  GridCell<RowType, GridFormPopoutMenuProps<RowType>>(
+  GridCell<RowType, GridFormPopoverMenuProps<RowType>>(
     {
       minWidth: 40,
       maxWidth: 40,