@linzjs/step-ag-grid 7.12.0 → 7.13.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "7.12.0",
+  "version": "7.13.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -12,7 +12,8 @@
     "react",
     "react-component"
   ],
-  "main": "dist/index.js",
+  "main": "dist/step-ag-grid.esm.js",
+  "type": "module",
   "typings": "dist/src/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",
   "files": [

package/src/components/Grid.tsx

@@ -48,8 +48,10 @@ export const Grid = (params: GridProps): JSX.Element => {
     setQuickFilter,
     ensureRowVisible,
     selectRowsById,
+    focusByRowById,
     ensureSelectedRowIsVisible,
     sizeColumnsToFit,
+    externallySelectedItemsAreInSync,
     setExternallySelectedItemsAreInSync,
   } = useContext(GridContext);
   const { checkUpdating } = useContext(GridUpdatingContext);
@@ -64,12 +66,25 @@ export const Grid = (params: GridProps): JSX.Element => {
    */
   const hasSelectedFirstItem = useRef(false);
   useEffect(() => {
-    if (!gridReady || !params.autoSelectFirstRow || hasSelectedFirstItem.current || !params.rowData) return;
+    if (!gridReady || hasSelectedFirstItem.current || !params.rowData || !externallySelectedItemsAreInSync) return;
     hasSelectedFirstItem.current = true;
     if (isNotEmpty(params.rowData) && isEmpty(params.externalSelectedItems)) {
-      selectRowsById([params.rowData[0].id]);
+      const firstRowId = params.rowData[0].id;
+      if (params.autoSelectFirstRow) {
+        selectRowsById([firstRowId]);
+      } else {
+        focusByRowById(firstRowId);
+      }
     }
-  }, [gridReady, params, params.autoSelectFirstRow, params.rowData, selectRowsById]);
+  }, [
+    externallySelectedItemsAreInSync,
+    focusByRowById,
+    gridReady,
+    params,
+    params.autoSelectFirstRow,
+    params.rowData,
+    selectRowsById,
+  ]);
 
   /**
    * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
@@ -176,7 +191,7 @@ export const Grid = (params: GridProps): JSX.Element => {
             checkboxSelection: true,
             headerComponent: GridHeaderSelect,
             suppressHeaderKeyboardEvent: (e) => {
-              if (e.event.key === "Enter" && !e.event.repeat) {
+              if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
                 const selectedNodeCount = e.api.getSelectedRows().length;
                 if (selectedNodeCount == 0) {
                   e.api.selectAllFiltered();

package/src/components/GridCell.tsx

@@ -6,7 +6,7 @@ import { GenericCellColDef, GenericCellRendererParams } from "./gridRender/GridR
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
 import { GridIcon } from "./GridIcon";
-import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { SuppressKeyboardEventParams, ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridPopoverContextProvider } from "../contexts/GridPopoverContextProvider";
 import { fnOrVar } from "../utils/util";
 
@@ -52,6 +52,20 @@ export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
   editor?: (editorProps: any) => JSX.Element;
 }
 
+export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
+  const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
+  const exec = shortcutKeys[e.event.key];
+  if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
+    const editable = fnOrVar(e.colDef?.editable, e);
+    return editable ? exec(e) ?? true : true;
+  }
+  // It's important that aggrid doesn't trigger edit on enter
+  // as the incorrect selected rows will be returned
+  return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " ", "Home", "End", "PageUp", "PageDown"].includes(
+    e.event.key,
+  );
+};
+
 /*
  * All cells should use this
  */
@@ -68,21 +82,11 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(custom?.editor && {
-      cellClassRules: custom.multiEdit ? GridCellMultiSelectClassRules : undefined,
+      cellClassRules: GridCellMultiSelectClassRules,
       editable: props.editable ?? true,
-      cellEditor: GenericCellEditorComponentWrapper(custom),
+      cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
     }),
-    suppressKeyboardEvent: (e) => {
-      const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
-      const exec = shortcutKeys[e.event.key];
-      if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
-        const editable = fnOrVar(e.colDef?.editable, e);
-        return editable ? exec(e) ?? true : true;
-      }
-      // It's important that aggrid doesn't trigger edit on enter
-      // as the incorrect selected rows will be returned
-      return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " "].includes(e.event.key);
-    },
+    suppressKeyboardEvent: suppressCellKeyboardEvents,
     ...(custom?.editorParams && {
       cellEditorParams: { ...custom.editorParams, multiEdit: custom.multiEdit },
     }),
@@ -106,7 +110,8 @@ export interface CellEditorCommon {
   className?: string | undefined;
 }
 
-export const GenericCellEditorComponentWrapper = (custom?: { editor?: (props: any) => JSX.Element }) => {
+export const GenericCellEditorComponentWrapper = (editor?: (props: any) => JSX.Element) => {
+  const obj = { editor };
   return forwardRef(function GenericCellEditorComponentFr(cellEditorParams: ICellEditorParams, _) {
     const valueFormatted = cellEditorParams.formatValue
       ? cellEditorParams.formatValue(cellEditorParams.value)
@@ -120,7 +125,7 @@ export const GenericCellEditorComponentWrapper = (custom?: { editor?: (props: an
             {...cellEditorParams.colDef.cellRendererParams}
           />
         }
-        {custom?.editor && <custom.editor {...cellEditorParams} />}
+        {obj.editor && <obj.editor {...cellEditorParams} />}
       </GridPopoverContextProvider>
     );
   });

package/src/components/GridCellMultiEditor.tsx

@@ -0,0 +1,52 @@
+import { GridBaseRow } from "./Grid";
+import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
+import { GenericCellColDef } from "./gridRender/GridRenderGenericCell";
+import { CellEditorSelectorResult, ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { ColDefT, GenericCellEditorComponentWrapper, GridCellRenderer, suppressCellKeyboardEvents } from "./GridCell";
+import { ComponentProps } from "react";
+import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
+
+export const Editor = <FN extends (param: any) => JSX.Element>(props: {
+  multiEdit: boolean;
+  editor: FN;
+  editorParams: ComponentProps<FN>;
+}): CellEditorSelectorResult => ({
+  component: GenericCellEditorComponentWrapper(props.editor),
+  params: { ...props.editorParams, multiEdit: props.multiEdit },
+});
+
+export interface RowCellEditorParams<RowType extends GridBaseRow> extends ICellEditorParams {
+  data: RowType;
+}
+
+/*
+ * All cells should use this
+ */
+export const GridCellMultiEditor = <RowType extends GridBaseRow>(
+  props: GenericCellColDef<RowType>,
+  cellEditorSelector: (params: RowCellEditorParams<RowType>) => CellEditorSelectorResult,
+): ColDefT<RowType> => {
+  return {
+    colId: props.colId ?? props.field,
+    field: props.field,
+    sortable: !!(props?.field || props?.valueGetter),
+    resizable: true,
+    editable: props.editable ?? true,
+    cellClassRules: GridCellMultiSelectClassRules,
+    cellEditorSelector,
+    suppressKeyboardEvent: suppressCellKeyboardEvents,
+    // Default value formatter, otherwise react freaks out on objects
+    valueFormatter: (params: ValueFormatterParams) => {
+      if (params.value == null) return "–";
+      const types = ["number", "boolean", "string"];
+      if (types.includes(typeof params.value)) return `${params.value}`;
+      else return JSON.stringify(params.value);
+    },
+    ...props,
+    cellRenderer: GridCellRenderer,
+    cellRendererParams: {
+      originalCellRenderer: props.cellRenderer,
+      ...props.cellRendererParams,
+    },
+  };
+};

package/src/components/GridCellMultiSelectClassRules.tsx

@@ -1,9 +1,20 @@
 import { CellClassParams, CellClassRules } from "ag-grid-community/dist/lib/entities/colDef";
+import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
 
 export const GridCellMultiSelectClassRules: CellClassRules = {
-  "ag-selected-for-edit": ({ api, node, colDef }: CellClassParams) =>
-    api
-      .getSelectedNodes()
-      .map((row) => row.id)
-      .includes(node.id) && api.getEditingCells().some((cell) => cell.column.getColDef() === colDef),
+  "ag-selected-for-edit": (params: CellClassParams) => {
+    const { api, node, colDef } = params;
+    const cep = colDef.cellEditorSelector
+      ? colDef.cellEditorSelector(params as ICellEditorParams)?.params
+      : colDef.cellEditorParams;
+
+    return (
+      cep?.multiEdit &&
+      api
+        .getSelectedNodes()
+        .map((row) => row.id)
+        .includes(node.id) &&
+      api.getEditingCells().some((cell) => cell.column.getColDef() === colDef)
+    );
+  },
 };

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,8 +1,8 @@
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from "../../react-menu3";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { delay, isEmpty } from "lodash-es";
+import { isEmpty } from "lodash-es";
 import debounce from "debounce-promise";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
@@ -49,10 +49,13 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extend
   filtered?: "local" | "reload";
   filterPlaceholder?: string;
   filterHelpText?: string;
+  noOptionsMessage?: string;
   onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
   onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
-  options: SelectOption[] | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption[]> | SelectOption[]);
-  optionsRequestCancel?: () => void;
+  options:
+    | SelectOption[]
+    | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined)
+    | undefined;
 }
 
 const fieldToString = (field: any) => {
@@ -65,7 +68,6 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>();
-  const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<FinalSelectOption[] | null>(null);
   const subComponentIsValid = useRef(false);
   const subComponentInitialValue = useRef<string | null>(null);
@@ -92,33 +94,33 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
 
   // Load up options list if it's async function
   useEffect(() => {
-    if (options || optionsInitialising.current) return;
-    optionsInitialising.current = true;
-    let optionsConf = props.options ?? [];
+    if (options) return;
+    let optionsConf = props.options;
 
     (async () => {
       if (typeof optionsConf == "function") {
         optionsConf = await optionsConf(selectedRows, filter);
       }
+      if (optionsConf !== undefined) {
+        const optionsList = optionsConf?.map((item) =>
+          item == null || typeof item == "string"
+            ? ({
+                value: item,
+                label: item,
+                disabled: false,
+              } as FinalSelectOption)
+            : item,
+        );
 
-      const optionsList = optionsConf?.map((item) =>
-        item == null || typeof item == "string"
-          ? ({
-              value: item,
-              label: item,
-              disabled: false,
-            } as FinalSelectOption)
-          : item,
-      );
-
-      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);
-      } else {
-        setOptions(optionsList);
+        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
+          setOptions(optionsList);
+          //delay(() => setOptions(optionsList), 100);
+        } else {
+          setOptions(optionsList);
+        }
       }
-      optionsInitialising.current = false;
     })();
   }, [filter, options, props, selectedRows]);
 
@@ -141,11 +143,12 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
     }
   }, [props.filtered, filter, options]);
 
-  const researchOnFilterChange = debounce(
-    useCallback(() => {
-      setOptions(null);
-    }, []),
-    500,
+  const researchOnFilterChange = useMemo(
+    () =>
+      debounce(() => {
+        setOptions(null);
+      }, 500),
+    [],
   );
 
   const previousFilter = useRef<string>(filter);
@@ -154,7 +157,6 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   useEffect(() => {
     if (previousFilter.current != filter && props.filtered == "reload") {
       previousFilter.current = filter;
-      props.optionsRequestCancel && props.optionsRequestCancel();
       researchOnFilterChange().then();
     }
   }, [filter, props, researchOnFilterChange]);
@@ -232,7 +234,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
         <>
           {options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (
             <MenuItem key={`${fieldToString(field)}-empty`} className={"GridPopoverEditDropDown-noOptions"}>
-              No Options
+              {props.noOptionsMessage ?? "No Options"}
             </MenuItem>
           )}
           {options?.map((item: FinalSelectOption, index) =>

package/src/components/gridForm/GridFormTextArea.tsx

@@ -15,7 +15,7 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow>
   helpText?: string;
 }
 
-export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>) => {
+export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>): JSX.Element => {
   const { field, value: initialVale, data } = useGridPopoverContext<RowType>();
 
   const initValue = useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -1,14 +1,19 @@
 import { ICellRendererParams } from "ag-grid-community";
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
-import { SuppressKeyboardEventParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { EditableCallbackParams, SuppressKeyboardEventParams } from "ag-grid-community/dist/lib/entities/colDef";
 
 export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
   data: RowType;
 }
 
+export interface RowEditableCallbackParams<RowType extends GridBaseRow> extends EditableCallbackParams {
+  data: RowType;
+}
+
 export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<RowType> {
   cellRendererParams?: GenericCellRendererParams<RowType>;
+  editable?: boolean | ((params: RowEditableCallbackParams<RowType>) => boolean);
 }
 
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {

package/src/contexts/GridContext.tsx

@@ -15,6 +15,7 @@ export interface GridContextType {
   selectRowsByIdWithFlash: (rowIds?: number[]) => void;
   flashRows: (rowIds?: number[]) => void;
   flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
+  focusByRowById: (rowId: number) => void;
   ensureRowVisible: (id: number | string) => boolean;
   ensureSelectedRowIsVisible: () => void;
   sizeColumnsToFit: () => void;
@@ -26,12 +27,14 @@ export interface GridContextType {
     tabDirection?: 1 | 0 | -1,
   ) => Promise<boolean>;
   redrawRows: (rowNodes?: RowNode[]) => void;
+  externallySelectedItemsAreInSync: boolean;
   setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
   waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
 }
 
 export const GridContext = createContext<GridContextType>({
   gridReady: false,
+  externallySelectedItemsAreInSync: false,
   setGridApi: () => {
     console.error("no context provider for setGridApi");
   },
@@ -64,6 +67,9 @@ export const GridContext = createContext<GridContextType>({
   flashRowsDiff: async () => {
     console.error("no context provider for flashRows");
   },
+  focusByRowById: async () => {
+    console.error("no context provider for focusByRowById");
+  },
   ensureRowVisible: () => {
     console.error("no context provider for ensureRowVisible");
     return true;

package/src/contexts/GridContextProvider.tsx

@@ -20,7 +20,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
   const [gridApi, _setGridApi] = useState<GridApi>();
   const [gridReady, setGridReady] = useState(false);
   const idsBeforeUpdate = useRef<number[]>([]);
-  const externallySelectedItemsAreInSync = useRef(false);
+  const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
 
   const setGridApi = useCallback((gridApi: GridApi | undefined) => {
     _setGridApi(gridApi);
@@ -181,10 +181,12 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, true, false),
     [_selectRowsWithOptionalFlash],
   );
+
   const selectRowsByIdWithFlash = useCallback(
     (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, true, true),
     [_selectRowsWithOptionalFlash],
   );
+
   const flashRows = useCallback(
     (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, false, true),
     [_selectRowsWithOptionalFlash],
@@ -217,6 +219,11 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     [_selectRowsWithOptionalFlash, beforeUpdate],
   );
 
+  const focusByRowById = useCallback(
+    (rowId: number) => _selectRowsWithOptionalFlash([rowId], false, false),
+    [_selectRowsWithOptionalFlash],
+  );
+
   const getSelectedRows = useCallback(<T extends unknown>(): T[] => {
     return gridApiOp(
       (gridApi) => gridApi.getSelectedRows(),
@@ -350,16 +357,12 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     [gridApiOp],
   );
 
-  const setExternallySelectedItemsAreInSync = useCallback((inSync: boolean) => {
-    externallySelectedItemsAreInSync.current = inSync;
-  }, []);
-
   const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
     // Wait for up to 5 seconds
-    for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSync.current; i++) {
+    for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSync; i++) {
       await wait(200);
     }
-  }, []);
+  }, [externallySelectedItemsAreInSync]);
 
   return (
     <GridContext.Provider
@@ -373,6 +376,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         selectRowsWithFlashDiff,
         flashRows,
         flashRowsDiff,
+        focusByRowById,
         getSelectedRows,
         getSelectedRowIds,
         editingCells,
@@ -382,6 +386,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         stopEditing,
         updatingCells,
         redrawRows,
+        externallySelectedItemsAreInSync,
         setExternallySelectedItemsAreInSync,
         waitForExternallySelectedItemsToBeInSync,
       }}

package/src/index.ts

@@ -12,6 +12,8 @@ export * from "./contexts/GridSubComponentContext";
 export type { GridBaseRow } from "./components/Grid";
 export { Grid } from "./components/Grid";
 export * from "./components/GridCell";
+export * from "./components/GridCellMultiEditor";
+
 export { GridIcon } from "./components/GridIcon";
 export { ComponentLoadingWrapper } from "./components/ComponentLoadingWrapper";
 export { GridCellMultiSelectClassRules } from "./components/GridCellMultiSelectClassRules";
@@ -34,6 +36,10 @@ export { GridFormSubComponentTextInput } from "./components/gridForm/GridFormSub
 export * from "./components/gridForm/GridFormDropDown";
 export * from "./components/gridForm/GridFormMultiSelect";
 export * from "./components/gridForm/GridFormPopoverMenu";
+export * from "./components/gridForm/GridFormTextInput";
+export * from "./components/gridForm/GridFormTextArea";
+export * from "./components/gridForm/GridFormMessage";
+export * from "./components/gridForm/GridFormEditBearing";
 
 export { GridHeaderSelect } from "./components/gridHeader/GridHeaderSelect";
 

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -16,6 +16,9 @@ import { GridPopoverTextInput } from "../../components/gridPopoverEdit/GridPopov
 import { ActionButton } from "../../lui/ActionButton";
 import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
 import { GridContext } from "../../contexts/GridContext";
+import { Editor, GridCellMultiEditor } from "../../components/GridCellMultiEditor";
+import { GridFormTextArea } from "../../components/gridForm/GridFormTextArea";
+import { GridFormDropDown } from "../../components/gridForm/GridFormDropDown";
 
 export default {
   title: "Components / Grids",
@@ -88,7 +91,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           },
         },
         {
-          multiEdit: true,
+          multiEdit: false,
           editorParams: {
             maxLength: 12,
             placeholder: "Enter distance...",
@@ -119,7 +122,6 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
             required: true,
             maxLength: 32,
             placeholder: "Enter some text...",
-
             invalid: (value: string) => {
               if (value === "never") return "The value 'never' is not allowed";
               return null;
@@ -132,6 +134,32 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           },
         },
       ),
+      GridCellMultiEditor(
+        {
+          colId: "plan2",
+          field: "plan",
+          headerName: "Multi-editor",
+          maxWidth: 140,
+        },
+        (_params) =>
+          _params.rowIndex == 0
+            ? Editor({
+                multiEdit: true,
+                editor: GridFormTextArea,
+                editorParams: {
+                  required: true,
+                  maxLength: 32,
+                  placeholder: "Enter some text...",
+                },
+              })
+            : Editor({
+                multiEdit: false,
+                editor: GridFormDropDown,
+                editorParams: {
+                  options: [{ label: "One", value: 1 }],
+                },
+              }),
+      ),
       GridPopoverMenu(
         {
           headerName: "Delete menu",
@@ -160,7 +188,17 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
 
     const lastRow = rowData[rowData.length - 1];
     await selectRowsWithFlashDiff(async () => {
-      setRowData([...rowData, { id: lastRow.id + 1, name: "?", nameType: "?", numba: "?", plan: "", distance: null }]);
+      setRowData([
+        ...rowData,
+        {
+          id: lastRow.id + 1,
+          name: "?",
+          nameType: "?",
+          numba: "?",
+          plan: "",
+          distance: null,
+        },
+      ]);
     });
   }, [rowData, selectRowsWithFlashDiff]);
 

package/src/styles/GridTheme.scss

@@ -74,10 +74,6 @@
     align-items: center;
   }
 
-  .ag-cell.ag-cell-inline-editing:not(.ag-cell-auto-height) {
-    bottom: 0;
-  }
-
   .ag-cell-wrap-text {
     word-break: break-word;
   }