@linzjs/step-ag-grid 1.3.0 → 1.4.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",
@@ -16,30 +16,20 @@
   "engines": {
     "node": ">=10"
   },
-  "resolutions": {
-    "webpack": "5"
-  },
   "dependencies": {
     "@linzjs/lui": "^17.18.2",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.5.0",
     "ag-grid-community": "^27.3.0",
     "ag-grid-react": "^27.3.0",
     "debounce-promise": "^3.1.2",
     "lodash-es": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "^5.0.1",
-    "uuid": "^9.0.0",
-    "autoprefixer": "^10.0.2",
-    "postcss": "^8.1.7",
-    "postcss-loader": "^4.0.4"
+    "uuid": "^9.0.0"
   },
   "scripts": {
     "build": "rollup -c && npm run",
-    "test": "react-app-rewired test --passWithNoTests",
-    "eject": "react-app-rewired eject",
+    "test": "react-scripts test --passWithNoTests",
+    "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.ts,.tsx --fix --cache",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
@@ -71,47 +61,56 @@
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/cli": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.12",
-    "@types/debounce-promise": "^3.1.4",
-    "@types/jest": "^27.5.2",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "storybook-addon-mock": "^2.4.1",
+    "@storybook/jest": "^0.0.10",
+    "@storybook/react": "6.5.13",
+    "@storybook/test-runner": "^0.9.0",
+    "@storybook/testing-library": "^0.0.13",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/debounce-promise": "^3.1.5",
+    "@types/jest": "^29.2.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^16.18.0",
-    "@types/react": "^17.0.50",
-    "@types/react-dom": "^17.0.17",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.23",
+    "@types/react-dom": "^18.0.7",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/parser": "^5.39.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "babel-jest": "^26.6.3",
     "babel-preset-react-app": "10.0.0",
-    "chromatic": "^6.10.1",
-    "css-loader": "^5.2.7",
+    "chromatic": "^6.11.2",
+    "css-loader": "3.6.0",
     "eslint": "8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-deprecation": "^1.3.2",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.1.5",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-jest": "^27.1.3",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.3.1",
-    "prettier": "^2.2.1",
-    "react-app-rewired": "^2.2.1",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "postcss": "^8.1.7",
+    "postcss-loader": "^4.0.4",
+    "prettier": "^2.7.1",
+    "react-scripts": "^5.0.1",
     "rollup": "^2.56.3",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "sass": "^1.49.9",
-    "sass-loader": "^10.3.1",
+    "sass": "^1.55.0",
+    "sass-loader": "10.1.1",
     "semantic-release": "^19.0.5",
     "style-loader": "^2.0.0",
-    "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.8.4",
-    "webpack": "^5.74.0"
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^4.8.4"
   },
   "babel": {
     "presets": [

package/src/components/Grid.tsx

@@ -8,11 +8,11 @@ import { AgGridEvent, CellClickedEvent, ColDef } from "ag-grid-community";
 import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { difference, last, xorBy } from "lodash-es";
-import { GridContext } from "../contexts/GridContext";
+import { GridContext } from "@contexts/GridContext";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
-import { isNotEmpty } from "../utils/util";
+import { isNotEmpty } from "@utils/util";
 import { GridHeaderSelect } from "./gridHeader/GridHeaderSelect";
-import { UpdatingContext } from "../contexts/UpdatingContext";
+import { UpdatingContext } from "@contexts/UpdatingContext";
 
 export interface GridBaseRow {
   id: string | number;
@@ -24,8 +24,9 @@ export interface GridProps {
   quickFilter?: boolean;
   quickFilterPlaceholder?: string;
   quickFilterValue?: string;
-  externalSelectedItems: any[];
-  setExternalSelectedItems: (items: any[]) => void;
+  domLayout?: GridOptions["domLayout"];
+  externalSelectedItems?: any[];
+  setExternalSelectedItems?: (items: any[]) => void;
   onGridReady?: GridOptions["onGridReady"];
   defaultColDef: GridOptions["defaultColDef"];
   columnDefs: GridOptions["columnDefs"];
@@ -59,16 +60,21 @@ export const Grid = (params: GridProps): JSX.Element => {
   /**
    * Ensure external selected items list is in sync with panel.
    */
-  const synchroniseExternalStateToGridSelection = ({ api }: SelectionChangedEvent) => {
-    const selectedRows = api.getSelectedRows();
-    // We don't want to update selected Items if it hasn't changed to prevent excess renders
-    if (
-      params.externalSelectedItems.length != selectedRows.length ||
-      isNotEmpty(xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))
-    ) {
-      params.setExternalSelectedItems([...selectedRows]);
-    }
-  };
+  const synchroniseExternalStateToGridSelection = useCallback(
+    ({ api }: SelectionChangedEvent) => {
+      if (!params.externalSelectedItems || !params.setExternalSelectedItems) return;
+
+      const selectedRows = api.getSelectedRows();
+      // We don't want to update selected Items if it hasn't changed to prevent excess renders
+      if (
+        params.externalSelectedItems.length != selectedRows.length ||
+        isNotEmpty(xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))
+      ) {
+        params.setExternalSelectedItems([...selectedRows]);
+      }
+    },
+    [params],
+  );
 
   /**
    * Synchronise externally selected items to grid.
@@ -76,6 +82,7 @@ export const Grid = (params: GridProps): JSX.Element => {
    */
   const synchroniseExternallySelectedItemsToGrid = useCallback(() => {
     if (!gridReady()) return;
+    if (!params.externalSelectedItems) return;
 
     const selectedIds = params.externalSelectedItems.map((row) => row.id) as number[];
     const lastNewId = last(difference(selectedIds, lastSelectedIds.current));
@@ -253,6 +260,7 @@ export const Grid = (params: GridProps): JSX.Element => {
         onCellDoubleClicked={onCellDoubleClick}
         onCellEditingStarted={refreshSelectedRows}
         onCellEditingStopped={onCellEditingStopped}
+        domLayout={params.domLayout}
         columnDefs={columnDefs}
         rowData={params.rowData}
         noRowsOverlayComponent={noRowsOverlayComponent}

package/src/components/GridCell.tsx

@@ -1,9 +1,11 @@
 import { useCallback, useContext, useMemo, useState } from "react";
 import { GridBaseRow } from "./Grid";
-import { GridContext } from "../contexts/GridContext";
+import { UpdatingContext } from "@contexts/UpdatingContext";
+import { GridContext } from "@contexts/GridContext";
 import { GenericMultiEditCellClass } from "./GenericCellClass";
 import { GenericCellRendererParams, GridRendererGenericCell } from "./gridRender/GridRenderGenericCell";
-import { ColDef, ICellEditorParams } from "ag-grid-community";
+import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
+import { GridLoadableCell } from "./GridLoadableCell";
 
 export interface GridFormProps<RowType extends GridBaseRow> {
   cellEditorParams: ICellEditorParams;
@@ -28,6 +30,24 @@ export interface GenericCellEditorColDef<
   cellRendererParams?: GenericCellRendererParams;
 }
 
+export const GridCellRenderer = (cellRendererParams: ICellRendererParams) => {
+  const { checkUpdating } = useContext(UpdatingContext);
+  const colDef = cellRendererParams.colDef;
+
+  return colDef?.cellRendererParams?.oldCellRenderer ? (
+    <GridLoadableCell
+      isLoading={checkUpdating(
+        cellRendererParams.colDef?.field ?? cellRendererParams.colDef?.colId ?? "",
+        cellRendererParams.data.id,
+      )}
+    >
+      <colDef.cellRendererParams.oldCellRenderer {...cellRendererParams} />
+    </GridLoadableCell>
+  ) : (
+    <GridRendererGenericCell {...cellRendererParams} />
+  );
+};
+
 /**
  * For editing a text area.
  */
@@ -35,7 +55,7 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
   props: GenericCellEditorColDef<RowType, FormProps>,
 ): ColDef => {
   return {
-    cellRenderer: props.cellRenderer ?? GridRendererGenericCell,
+    cellRenderer: GridCellRenderer,
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(props.cellEditorParams && {
@@ -44,6 +64,10 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
       cellEditor: GenericCellEditorComponent,
     }),
     ...props,
+    cellRendererParams: {
+      originalCellRender: props.cellRenderer,
+      ...props.cellRendererParams,
+    },
   };
 };
 

package/src/components/{GridPopoutHook.tsx → GridPopoverHook.tsx}

@@ -1,12 +1,12 @@
 import { ICellEditorParams } from "ag-grid-community";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { GridContext } from "../contexts/GridContext";
+import { GridContext } from "@contexts/GridContext";
 import { ControlledMenu } from "@szhsin/react-menu";
 import { GridFormProps } from "./GridCell";
-import { hasParentClass } from "../utils/util";
+import { hasParentClass } from "@utils/util";
 import { GridBaseRow } from "./Grid";
 
-export const useGridPopoutHook = <RowType extends GridBaseRow>(
+export const useGridPopoverHook = <RowType extends GridBaseRow>(
   props: GridFormProps<RowType>,
   save?: (selectedRows: any[]) => Promise<boolean>,
 ) => {
@@ -66,16 +66,18 @@ export const useGridPopoutHook = <RowType extends GridBaseRow>(
       document.addEventListener("mousedown", handleScreenMouseDown, true);
       document.addEventListener("mouseup", handleScreenMouseEvent, true);
       document.addEventListener("click", handleScreenMouseEvent, true);
+      document.addEventListener("dblclick", handleScreenMouseEvent, true);
       return () => {
         document.removeEventListener("mousedown", handleScreenMouseDown, true);
         document.removeEventListener("mouseup", handleScreenMouseEvent, true);
         document.removeEventListener("click", handleScreenMouseEvent, true);
+        document.removeEventListener("dblclick", handleScreenMouseEvent, true);
       };
     }
     return () => {};
   }, [handleScreenMouseDown, handleScreenMouseEvent, isOpen]);
 
-  const popoutWrapper = useCallback(
+  const popoverWrapper = useCallback(
     (children: JSX.Element) => {
       return (
         <>
@@ -112,7 +114,7 @@ export const useGridPopoutHook = <RowType extends GridBaseRow>(
   );
 
   return {
-    popoutWrapper,
+    popoverWrapper,
     triggerSave,
   };
 };

package/src/components/gridForm/GridFormDropDown.tsx

@@ -4,11 +4,11 @@ import { MenuItem, MenuDivider, FocusableItem } from "@szhsin/react-menu";
 import { useCallback, useContext, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { GridContext } from "../../contexts/GridContext";
+import { GridContext } from "@contexts/GridContext";
 import { delay } from "lodash-es";
 import debounce from "debounce-promise";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
-import { useGridPopoutHook } from "../GridPopoutHook";
+import { useGridPopoverHook } from "../GridPopoverHook";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
   selectedRows: RowType[];
@@ -18,6 +18,7 @@ export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
 interface FinalSelectOption<ValueType> {
   value: ValueType;
   label?: JSX.Element | string;
+  disabled?: boolean | string;
 }
 
 export const MenuSeparatorString = "_____MENU_SEPARATOR_____";
@@ -37,7 +38,7 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
 }
 
 export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props: GridFormProps<RowType>) => {
-  const { popoutWrapper } = useGridPopoutHook(props);
+  const { popoverWrapper } = useGridPopoverHook(props);
   const formProps = props.formProps as GridFormPopoutDropDownProps<RowType, ValueType>;
 
   const { updatingCells, stopEditing } = useContext(GridContext);
@@ -78,7 +79,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
 
       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, disabled: false } as FinalSelectOption<ValueType>;
         }
         return item;
       }) as any as FinalSelectOption<ValueType>[];
@@ -148,7 +149,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
     [filteredValues, options, selectItemHandler, stopEditing],
   );
 
-  return popoutWrapper(
+  return popoverWrapper(
     <>
       {formProps.filtered && (
         <>
@@ -180,7 +181,13 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
             item.value === MenuSeparatorString ? (
               <MenuDivider key={`$$divider_${index}`} />
             ) : filteredValues.includes(item.value) ? null : (
-              <MenuItem key={`${item.value}`} value={item.value} onClick={() => selectItemHandler(item.value)}>
+              <MenuItem
+                key={`${item.value}`}
+                disabled={!!item.disabled}
+                title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                value={item.value}
+                onClick={() => selectItemHandler(item.value)}
+              >
                 {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
               </MenuItem>
             ),

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -3,12 +3,13 @@ import "./GridFormEditBearing.scss";
 import { useCallback, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
-import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "../../utils/bearing";
+import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "@utils/bearing";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
-import { useGridPopoutHook } from "../GridPopoutHook";
+import { useGridPopoverHook } from "../GridPopoverHook";
 
 export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
   placeHolder: string;
+  range?: (value: number | null) => string | null;
   onSave?: (selectedRows: RowType[], value: number | null) => Promise<boolean>;
 }
 
@@ -38,9 +39,9 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
     },
     [formProps, props.field, props.value, value],
   );
-  const { popoutWrapper, triggerSave } = useGridPopoutHook(props, save);
+  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
 
-  return popoutWrapper(
+  return popoverWrapper(
     <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
       <TextInputFormatted
         value={value ?? ""}
@@ -55,7 +56,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
           onKeyDown: async (e) => e.key === "Enter" && triggerSave().then(),
         }}
         formatted={bearingStringValidator(value) ? "?" : convertDDToDMS(bearingNumberParser(value))}
-        error={bearingStringValidator(value)}
+        error={bearingStringValidator(value, formProps.range)}
       />
     </div>,
   );

package/src/components/gridForm/GridFormMessage.tsx

@@ -3,7 +3,7 @@ import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { ICellEditorParams } from "ag-grid-community";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridBaseRow } from "../Grid";
-import { useGridPopoutHook } from "../GridPopoutHook";
+import { useGridPopoverHook } from "../GridPopoverHook";
 
 export interface GridFormMessageProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
   message: (
@@ -16,7 +16,7 @@ export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormProp
   const formProps = props.formProps as GridFormMessageProps<RowType>;
 
   const [message, setMessage] = useState<string | JSX.Element | null>(null);
-  const { popoutWrapper } = useGridPopoutHook(props);
+  const { popoverWrapper } = useGridPopoverHook(props);
 
   useEffect(() => {
     (async () => {
@@ -24,7 +24,7 @@ export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormProp
     })().then();
   }, [formProps, props.selectedRows, props]);
 
-  return popoutWrapper(
+  return popoverWrapper(
     <ComponentLoadingWrapper loading={message === null}>
       <div style={{ maxWidth: 400 }} className={"Grid-popoverContainer"}>
         {message}

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -7,7 +7,7 @@ import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { delay } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
-import { useGridPopoutHook } from "../GridPopoutHook";
+import { useGridPopoverHook } from "../GridPopoverHook";
 
 interface FinalSelectOption<ValueType> {
   value: ValueType;
@@ -58,7 +58,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
     },
     [formProps, selectedValues],
   );
-  const { popoutWrapper } = useGridPopoutHook(props, save);
+  const { popoverWrapper } = useGridPopoverHook(props, save);
 
   // Load up options list if it's async function
   useEffect(() => {
@@ -105,7 +105,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
     );
   }, [formProps.filtered, filter, options]);
 
-  return popoutWrapper(
+  return popoverWrapper(
     <ComponentLoadingWrapper loading={!options}>
       <div className={"Grid-popoverContainerList"}>
         {options && formProps.filtered && (

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -1,10 +1,10 @@
 import { GridBaseRow } from "../Grid";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { GridContext } from "../../contexts/GridContext";
+import { GridContext } from "@contexts/GridContext";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { MenuDivider, MenuItem } from "@szhsin/react-menu";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
-import { useGridPopoutHook } from "../GridPopoutHook";
+import { useGridPopoverHook } from "../GridPopoverHook";
 
 export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
@@ -19,7 +19,8 @@ interface MenuSeparatorType {
 
 export interface MenuOption<RowType> {
   label: JSX.Element | string | MenuSeparatorType;
-  action: (selectedRows: RowType[]) => Promise<boolean>;
+  action?: (selectedRows: RowType[]) => Promise<boolean>;
+  disabled?: string | boolean;
   multiEdit: boolean;
 }
 
@@ -54,7 +55,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
   const actionClick = useCallback(
     async (menuOption: MenuOption<any>) => {
       return await updatingCells({ selectedRows: props.selectedRows, field: props.field }, async (selectedRows) => {
-        await menuOption.action(selectedRows);
+        menuOption.action && (await menuOption.action(selectedRows));
         return true;
       });
     },
@@ -67,8 +68,8 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
     return menuOption.label === MenuSeparator || selectedRowCount === 1 || menuOption.multiEdit;
   });
 
-  const { popoutWrapper } = useGridPopoutHook(props);
-  return popoutWrapper(
+  const { popoverWrapper } = useGridPopoverHook(props);
+  return popoverWrapper(
     <ComponentLoadingWrapper loading={!filteredOptions}>
       <div className={"Grid-popoverContainerList"}>
         {options?.map((item, index) =>
@@ -78,7 +79,8 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
             <MenuItem
               key={`${item.label}`}
               onClick={() => actionClick(item)}
-              disabled={!filteredOptions?.includes(item)}
+              disabled={!!item.disabled || !filteredOptions?.includes(item)}
+              title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
             >
               {item.label as JSX.Element | string}
             </MenuItem>

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { TextAreaInput } from "../../lui/TextAreaInput";
-import { useGridPopoutHook } from "../GridPopoutHook";
+import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
 
 export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
@@ -28,7 +28,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormPro
       return formProps.validate(value);
     }
     return null;
-  }, [formProps.maxlength, formProps.required, value.length]);
+  }, [formProps, value]);
 
   const save = useCallback(
     async (selectedRows: any[]): Promise<boolean> => {
@@ -50,9 +50,9 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormPro
     },
     [formProps, invalid, props.field, props.value, value],
   );
-  const { popoutWrapper } = useGridPopoutHook(props, save);
+  const { popoverWrapper } = useGridPopoverHook(props, save);
 
-  return popoutWrapper(
+  return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: formProps.width ?? 240 }} className={"FormTest"}>
       <TextAreaInput
         value={value}

package/src/components/gridForm/GridFormTextInput.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
-import { useGridPopoutHook } from "../GridPopoutHook";
+import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
 
 export interface GridFormTextInputProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
@@ -28,7 +28,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
       return formProps.validate(value);
     }
     return null;
-  }, [formProps.maxlength, formProps.required, value.length]);
+  }, [formProps, value]);
 
   const save = useCallback(
     async (selectedRows: any[]): Promise<boolean> => {
@@ -50,9 +50,9 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
     },
     [invalid, props.value, props.field, value, formProps],
   );
-  const { popoutWrapper, triggerSave } = useGridPopoutHook(props, save);
+  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
 
-  return popoutWrapper(
+  return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: formProps.width ?? 240 }} className={"FormTest"}>
       <TextInputFormatted
         value={value}

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -1,5 +1,5 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 import { GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormMultiSelect, GridFormMultiSelectProps } from "../gridForm/GridFormMultiSelect";
@@ -10,7 +10,6 @@ export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType
   GridCell<RowType, GridFormMultiSelectProps<RowType, ValueType>>({
     initialWidth: 65,
     maxWidth: 150,
-    cellRenderer: GridRendererGenericCell,
     cellClass: colDef.cellEditor?.multiEdit ? GenericMultiEditCellClass : undefined,
     ...colDef,
     ...(colDef?.cellEditorParams && {

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -1,18 +1,17 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
-import { bearingValueFormatter } from "../../utils/bearing";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
+import { bearingCorrectionValueFormatter, bearingValueFormatter } from "@utils/bearing";
 import { GridCell } from "../GridCell";
 import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
 import { GridBaseRow } from "../Grid";
 
-export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
+export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType, GridFormEditBearingProps<RowType>>,
 ) =>
   GridCell<RowType, GridFormEditBearingProps<RowType>>({
     initialWidth: 65,
     maxWidth: 150,
     valueFormatter: bearingValueFormatter,
-    cellRenderer: GridRendererGenericCell,
     cellClass: colDef.cellEditorParams?.multiEdit ? GenericMultiEditCellClass : undefined,
     ...colDef,
     ...(colDef?.cellEditorParams && {
@@ -22,3 +21,29 @@ export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
       },
     }),
   });
+
+export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
+  colDef: GenericCellColDef<RowType, GridFormEditBearingProps<RowType>>,
+) => ({
+  ...GridPopoverEditBearingLike(colDef),
+  valueFormatter: 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 GridPopoverEditBearingCorrection = <RowType extends GridBaseRow>(
+  colDef: GenericCellColDef<RowType, GridFormEditBearingProps<RowType>>,
+) => ({
+  ...GridPopoverEditBearingLike(colDef),
+  valueFormatter: bearingCorrectionValueFormatter,
+  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;
+  },
+});