@linzjs/step-ag-grid 1.5.4 → 2.0.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.5.4",
+  "version": "2.0.1",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",
@@ -20,27 +20,32 @@
     "@linzjs/lui": ">=17",
     "ag-grid-community": ">=27",
     "ag-grid-react": ">=27",
+    "lodash-es": ">=4",
     "react": ">=17",
     "react-dom": ">=17"
   },
   "dependencies": {
     "@linzjs/lui": ">=17",
-    "ag-grid-community": ">=27",
-    "ag-grid-react": ">=27",
+    "ag-grid-community": "^27",
+    "ag-grid-react": "^27",
     "debounce-promise": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "react": ">=17",
-    "react-dom": ">=17",
+    "react": "^17",
+    "react-dom": "^17",
     "react-transition-state": "^1.1.5",
     "uuid": "^9.0.0"
   },
   "scripts": {
-    "build": "rollup -c && npm run",
-    "test": "react-scripts test --passWithNoTests",
+    "build": "run-s clean stylelint lint css bundle",
+    "clean": "rimraf dist && mkdirp ./dist",
+    "bundle": "rollup -c",
+    "stylelint": "stylelint src/**/*.scss src/**/*.css --fix",
+    "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
+    "test": "react-scripts test",
     "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",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",
     "chromatic": "chromatic --exit-zero-on-changes",
     "semantic-release": "semantic-release"
@@ -78,46 +83,54 @@
     "@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/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/debounce-promise": "^3.1.5",
-    "@types/jest": "^29.2.0",
+    "@types/jest": "^29.2.2",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.11.7",
+    "@types/node": "^18.11.9",
     "@types/react": "^17.0.52",
     "@types/react-dom": "^17.0.18",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/parser": "^5.41.0",
-    "babel-jest": "^26.6.3",
-    "babel-preset-react-app": "10.0.0",
-    "chromatic": "^6.11.2",
-    "css-loader": "3.6.0",
-    "eslint": "8.22.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "babel-jest": "^29.2.2",
+    "babel-preset-react-app": "^10.0.1",
+    "chromatic": "^6.11.4",
+    "eslint": "^8.26.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": "^27.1.3",
+    "eslint-plugin-jest": "^27.1.4",
     "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.9.1",
-    "postcss": "^8.1.7",
-    "postcss-loader": "^4.0.4",
+    "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.18",
+    "postcss-scss": "^4.0.5",
+    "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
     "react-scripts": "^5.0.1",
-    "rollup": "^2.56.3",
+    "rollup": "^3.2.5",
     "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.55.0",
-    "sass-loader": "10.1.1",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "sass": "^1.56.0",
+    "sass-loader": "10.3.1",
     "semantic-release": "^19.0.5",
     "storybook-addon-mock": "^2.4.1",
     "style-loader": "^2.0.0",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "stylelint": "^14.14.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-config-recommended-scss": "^8.0.0",
+    "stylelint-prettier": "^2.0.0",
+    "stylelint-scss": "^4.3.0",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.8.4"
   },
   "babel": {

package/src/components/ComponentLoadingWrapper.tsx

@@ -7,11 +7,12 @@ export const ComponentLoadingWrapper = (props: {
   loading?: boolean;
   saving?: boolean;
   children: JSX.Element | undefined;
+  className: string | undefined;
 }): JSX.Element => {
   return props.loading ? (
     <LuiMiniSpinner size={22} divProps={{ role: "status", ["aria-label"]: "Loading", style: { padding: 16 } }} />
   ) : (
-    <div style={{ maxHeight: 400, overflowY: "auto", pointerEvents: props.saving ? "none" : "inherit" }}>
+    <div style={{ pointerEvents: props.saving ? "none" : "inherit" }} className={props.className}>
       {props.saving && (
         <div
           style={{

package/src/components/Grid.tsx

@@ -1,6 +1,3 @@
-import "./Grid.scss";
-import "./GridTheme.scss";
-
 import clsx from "clsx";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { AgGridReact } from "ag-grid-react";
@@ -12,7 +9,7 @@ import { GridContext } from "@contexts/GridContext";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
 import { isNotEmpty } from "@utils/util";
 import { GridHeaderSelect } from "./gridHeader/GridHeaderSelect";
-import { UpdatingContext } from "@contexts/UpdatingContext";
+import { GridUpdatingContext } from "@contexts/GridUpdatingContext";
 
 export interface GridBaseRow {
   id: string | number;
@@ -47,7 +44,7 @@ export const Grid = (params: GridProps): JSX.Element => {
     ensureSelectedRowIsVisible,
     sizeColumnsToFit,
   } = useContext(GridContext);
-  const { checkUpdating } = useContext(UpdatingContext);
+  const { checkUpdating } = useContext(GridUpdatingContext);
 
   const [internalQuickFilter, setInternalQuickFilter] = useState("");
   const lastSelectedIds = useRef<number[]>([]);
@@ -157,9 +154,7 @@ export const Grid = (params: GridProps): JSX.Element => {
   );
 
   const noRowsOverlayComponent = useCallback(
-    () => (
-      <span className="ag-overlay-no-rows-center">{params.noRowsOverlayText ?? "There are currently no rows"}</span>
-    ),
+    () => <span>{params.noRowsOverlayText ?? "There are currently no rows"}</span>,
     [params.noRowsOverlayText],
   );
 

package/src/components/GridCell.tsx

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

package/src/components/GridLoadableCell.tsx

@@ -9,7 +9,6 @@ export const GridLoadableCell = (props: {
   children: JSX.Element | string;
   className?: string;
 }): JSX.Element => {
-  // console.log(`Rendering LoadableCell - loading: ${props.isLoading}`);
   if (props.isLoading) {
     return (
       <div style={{ display: "flex", alignItems: "center" }}>

package/src/components/GridPopoverHook.tsx

@@ -1,20 +1,18 @@
-import { ICellEditorParams } from "ag-grid-community";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "@contexts/GridContext";
-import { GridFormProps } from "./GridCell";
 import { GridBaseRow } from "./Grid";
 import { ControlledMenu } from "@react-menu3";
+import { GridPopoverContext } from "@contexts/GridPopoverContext";
 
-export const useGridPopoverHook = <RowType extends GridBaseRow>(
-  props: GridFormProps<RowType>,
-  save?: (selectedRows: any[]) => Promise<boolean>,
-) => {
-  const { cellEditorParams, saving, updateValue } = props;
-  const { eGridCell } = cellEditorParams as ICellEditorParams;
+export interface GridPopoverHookProps<RowType> {
+  className: string | undefined;
+  save?: (selectedRows: RowType[]) => Promise<boolean>;
+}
+
+export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {
   const { stopEditing } = useContext(GridContext);
+  const { anchorRef, saving, propsRef } = useContext(GridPopoverContext);
   const saveButtonRef = useRef<HTMLButtonElement>(null);
-  const anchorRef = useRef(eGridCell);
-  anchorRef.current = eGridCell;
   const [isOpen, setOpen] = useState(false);
 
   useEffect(() => {
@@ -23,12 +21,16 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
 
   const triggerSave = useCallback(
     async (reason?: string) => {
-      if (reason == "cancel" || !save || (await updateValue(save))) {
+      if (
+        reason == "cancel" ||
+        !props.save ||
+        (propsRef.current?.updateValue && (await propsRef.current?.updateValue(props.save)))
+      ) {
         setOpen(false);
         stopEditing();
       }
     },
-    [save, stopEditing, updateValue],
+    [props, stopEditing, propsRef],
   );
 
   const popoverWrapper = useCallback(
@@ -42,13 +44,13 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
               unmountOnClose={true}
               anchorRef={anchorRef}
               saveButtonRef={saveButtonRef}
-              menuClassName={"lui-menu"}
+              menuClassName={"step-ag-grid-react-menu"}
               onClose={(event: { reason: string }) => triggerSave(event.reason).then()}
-              reposition={"initial"}
               viewScroll={"auto"}
               dontShrinkIfDirectionIsTop={true}
+              className={props.className}
             >
-              {saving && (
+              {saving && ( // This is the overlay that prevents editing when the editor is saving
                 <div
                   style={{
                     position: "absolute",
@@ -68,7 +70,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
         </>
       );
     },
-    [isOpen, saving, triggerSave],
+    [anchorRef, isOpen, props.className, saving, triggerSave],
   );
 
   return {

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,16 +1,17 @@
-import "../../react-menu3/styles/index.scss";
+import "../../styles/GridFormDropDown.scss";
 
-import { MenuItem, MenuDivider, FocusableItem } from "@react-menu3";
+import { MenuItem, MenuDivider, FocusableItem, MenuHeader } from "@react-menu3";
 import { useCallback, useContext, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridContext } from "@contexts/GridContext";
 import { delay } from "lodash-es";
 import debounce from "debounce-promise";
-import { GenericCellEditorParams, GridFormProps } from "../GridCell";
+import { CellEditorCommon, CellParams } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
+  // Note the row that was clicked on will be first
   selectedRows: RowType[];
   value: ValueType;
 }
@@ -24,10 +25,21 @@ interface FinalSelectOption<ValueType> {
 export const MenuSeparatorString = "_____MENU_SEPARATOR_____";
 export const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
 
+export const MenuHeaderString = "_____MENU_HEADER_____";
+export const MenuHeaderItem = (title: string) => {
+  return { label: title, value: MenuHeaderString };
+};
+
 export type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
 
-export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueType>
-  extends GenericCellEditorParams<RowType> {
+export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueType> extends CellEditorCommon {
+  // This overrides CellEditorCommon to provide some common class options
+  className?:
+    | "GridPopoverEditDropDown-containerSmall"
+    | "GridPopoverEditDropDown-containerMedium"
+    | "GridPopoverEditDropDown-containerLarge"
+    | string
+    | undefined;
   filtered?: "local" | "reload";
   filterPlaceholder?: string;
   onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType, ValueType>) => Promise<void>;
@@ -38,10 +50,10 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
   optionsRequestCancel?: () => void;
 }
 
-export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props: GridFormProps<RowType>) => {
-  const { popoverWrapper } = useGridPopoverHook(props);
-  const formProps = props.formProps as GridFormPopoutDropDownProps<RowType, ValueType>;
-
+export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
+  _props: GridFormPopoutDropDownProps<RowType, ValueType>,
+) => {
+  const props = _props as GridFormPopoutDropDownProps<RowType, ValueType> & CellParams<RowType>;
   const { updatingCells, stopEditing } = useContext(GridContext);
 
   const [filter, setFilter] = useState("");
@@ -55,8 +67,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
       return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
         const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
         if (hasChanged) {
-          if (formProps.onSelectedItem) {
-            await formProps.onSelectedItem({ selectedRows, value });
+          if (props.onSelectedItem) {
+            await props.onSelectedItem({ selectedRows, value });
           } else {
             selectedRows.forEach((row) => (row[field as keyof RowType] = value));
           }
@@ -64,27 +76,27 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         return true;
       });
     },
-    [formProps, props.field, props.selectedRows, updatingCells],
+    [props, updatingCells],
   );
 
   const selectFilterHandler = useCallback(
     async (value: string): Promise<boolean> => {
       const field = props.field;
       return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
-        if (formProps.onSelectFilter) {
-          await formProps.onSelectFilter({ selectedRows, value });
+        if (props.onSelectFilter) {
+          await props.onSelectFilter({ selectedRows, value });
         }
         return true;
       });
     },
-    [formProps, props.field, props.selectedRows, updatingCells],
+    [props, updatingCells],
   );
 
   // Load up options list if it's async function
   useEffect(() => {
     if (options || optionsInitialising.current) return;
     optionsInitialising.current = true;
-    let optionsConf = formProps.options ?? [];
+    let optionsConf = props.options ?? [];
 
     (async () => {
       if (typeof optionsConf == "function") {
@@ -98,7 +110,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         return item;
       }) as any as FinalSelectOption<ValueType>[];
 
-      if (formProps.filtered) {
+      if (props.filtered) {
         // This is needed otherwise when filter input is rendered and sets autofocus
         // the mouse up of the double click edit triggers the cell to cancel editing
         delay(() => setOptions(optionsList), 100);
@@ -107,11 +119,11 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
       }
       optionsInitialising.current = false;
     })();
-  }, [filter, options, formProps.filtered, formProps.options, props.selectedRows]);
+  }, [filter, options, props]);
 
-  // Local filtering
+  // Local filtering.
   useEffect(() => {
-    if (formProps.filtered == "local") {
+    if (props.filtered == "local") {
       if (options == null) return;
       setFilteredValues(
         options
@@ -126,7 +138,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
           .filter((r) => r !== undefined),
       );
     }
-  }, [formProps.filtered, filter, options]);
+  }, [props.filtered, filter, options]);
 
   const researchOnFilterChange = debounce(
     useCallback(() => {
@@ -137,14 +149,14 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
 
   const previousFilter = useRef<string>(filter);
 
-  // Reload filtering
+  // Reload filtering.
   useEffect(() => {
-    if (previousFilter.current != filter && formProps.filtered == "reload") {
+    if (previousFilter.current != filter && props.filtered == "reload") {
       previousFilter.current = filter;
-      formProps.optionsRequestCancel && formProps.optionsRequestCancel();
+      props.optionsRequestCancel && props.optionsRequestCancel();
       researchOnFilterChange().then();
     }
-  }, [filter, formProps, props, researchOnFilterChange]);
+  }, [filter, props, researchOnFilterChange]);
 
   const onFilterKeyDown = useCallback(
     async (e: KeyboardEvent) => {
@@ -154,7 +166,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         if (activeOptions.length == 1) {
           await selectItemHandler(activeOptions[0].value);
           stopEditing();
-        } else if (formProps.onSelectFilter) {
+        } else if (props.onSelectFilter) {
           await selectFilterHandler(filter);
           stopEditing();
         } else {
@@ -163,13 +175,14 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         }
       }
     },
-    [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, formProps],
+    [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props],
   );
 
+  const { popoverWrapper } = useGridPopoverHook({ className: props.className });
   return popoverWrapper(
     <>
-      {formProps.filtered && (
-        <>
+      {props.filtered && (
+        <div className={"GridFormDropDown-filter"}>
           <FocusableItem className={"filter-item"}>
             {({ ref }: any) => (
               <div style={{ display: "flex", width: "100%" }}>
@@ -179,7 +192,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
                   style={{ border: "0px" }}
                   ref={ref}
                   type="text"
-                  placeholder={formProps.filterPlaceholder ?? "Placeholder"}
+                  placeholder={props.filterPlaceholder ?? "Placeholder"}
                   data-testid={"filteredMenu-free-text-input"}
                   defaultValue={filter}
                   onChange={(e) => setFilter(e.target.value.toLowerCase())}
@@ -189,14 +202,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
             )}
           </FocusableItem>
           <MenuDivider key={`$$divider_filter`} />
-        </>
+        </div>
       )}
-      <ComponentLoadingWrapper loading={!options}>
+      <ComponentLoadingWrapper loading={!options} className={"GridFormDropDown-options"}>
         <>
           {options && options.length == filteredValues?.length && <MenuItem>[Empty]</MenuItem>}
           {options?.map((item, index) =>
             item.value === MenuSeparatorString ? (
               <MenuDivider key={`$$divider_${index}`} />
+            ) : item.value === MenuHeaderString ? (
+              <MenuHeader>{item.label}</MenuHeader>
             ) : filteredValues.includes(item.value) ? null : (
               <MenuItem
                 key={`${props.field}-${index}`}