@linzjs/step-ag-grid 2.0.0 → 2.1.0

package/package.json

@@ -2,7 +2,16 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "2.0.0",
+  "version": "2.1.0",
+  "keywords": [
+    "aggrid",
+    "ag-grid",
+    "react-menu",
+    "grid",
+    "table",
+    "react",
+    "react-component"
+  ],
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",
@@ -20,27 +29,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 +92,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";
@@ -27,7 +24,6 @@ export interface GridProps {
   domLayout?: GridOptions["domLayout"];
   externalSelectedItems?: any[];
   setExternalSelectedItems?: (items: any[]) => void;
-  onGridReady?: GridOptions["onGridReady"];
   defaultColDef?: GridOptions["defaultColDef"];
   columnDefs: GridOptions["columnDefs"];
   rowData: GridOptions["rowData"];
@@ -149,17 +145,14 @@ export const Grid = (params: GridProps): JSX.Element => {
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
       setGridApi(event.api);
-      params.onGridReady && params.onGridReady(event);
       synchroniseExternallySelectedItemsToGrid();
       updateQuickFilter();
     },
-    [params, setGridApi, synchroniseExternallySelectedItemsToGrid, updateQuickFilter],
+    [setGridApi, synchroniseExternallySelectedItemsToGrid, updateQuickFilter],
   );
 
   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

@@ -60,6 +60,7 @@ export const GridCell = <RowType extends GridBaseRow, Props>(
   },
 ): ColDefT<RowType> => {
   return {
+    colId: props.field,
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(custom?.editor && {
@@ -86,6 +87,10 @@ export const GridCell = <RowType extends GridBaseRow, Props>(
   };
 };
 
+export interface CellEditorCommon {
+  className?: string | undefined;
+}
+
 export interface CellParams<RowType extends GridBaseRow> {
   value: any;
   data: RowType;

package/src/components/GridLoadableCell.tsx

@@ -2,8 +2,6 @@ import "./GridLoadableCell.scss";
 
 import { LuiMiniSpinner } from "@linzjs/lui";
 import clsx from "clsx";
-import { useContext } from "react";
-import { GridPopoverContext } from "@contexts/GridPopoverContext";
 
 export const GridLoadableCell = (props: {
   isLoading: boolean;
@@ -11,8 +9,6 @@ export const GridLoadableCell = (props: {
   children: JSX.Element | string;
   className?: string;
 }): JSX.Element => {
-  const { saving } = useContext(GridPopoverContext);
-
   if (props.isLoading) {
     return (
       <div style={{ display: "flex", alignItems: "center" }}>

package/src/components/GridPopoverHook.tsx

@@ -5,12 +5,13 @@ import { ControlledMenu } from "@react-menu3";
 import { GridPopoverContext } from "@contexts/GridPopoverContext";
 
 export interface GridPopoverHookProps<RowType> {
+  className: string | undefined;
   save?: (selectedRows: RowType[]) => Promise<boolean>;
 }
 
-export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType> = {}) => {
+export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {
   const { stopEditing } = useContext(GridContext);
-  const { anchorRef, saving, updateValueRef } = useContext(GridPopoverContext);
+  const { anchorRef, saving, propsRef } = useContext(GridPopoverContext);
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setOpen] = useState(false);
 
@@ -20,12 +21,16 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
 
   const triggerSave = useCallback(
     async (reason?: string) => {
-      if (reason == "cancel" || !props.save || (updateValueRef.current && (await updateValueRef.current(props.save)))) {
+      if (
+        reason == "cancel" ||
+        !props.save ||
+        (propsRef.current?.updateValue && (await propsRef.current?.updateValue(props.save)))
+      ) {
         setOpen(false);
         stopEditing();
       }
     },
-    [props, stopEditing, updateValueRef],
+    [props, stopEditing, propsRef],
   );
 
   const popoverWrapper = useCallback(
@@ -39,12 +44,13 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
               unmountOnClose={true}
               anchorRef={anchorRef}
               saveButtonRef={saveButtonRef}
-              menuClassName={"lui-menu"}
+              menuClassName={"step-ag-grid-react-menu"}
               onClose={(event: { reason: string }) => triggerSave(event.reason).then()}
               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",
@@ -64,7 +70,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
         </>
       );
     },
-    [anchorRef, isOpen, saving, triggerSave],
+    [anchorRef, isOpen, props.className, saving, triggerSave],
   );
 
   return {

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,4 +1,4 @@
-import "../../react-menu3/styles/index.scss";
+import "../../styles/GridFormDropDown.scss";
 
 import { MenuItem, MenuDivider, FocusableItem, MenuHeader } from "@react-menu3";
 import { useCallback, useContext, useEffect, useRef, useState, KeyboardEvent } from "react";
@@ -7,10 +7,11 @@ import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridContext } from "@contexts/GridContext";
 import { delay } from "lodash-es";
 import debounce from "debounce-promise";
-import { CellParams } 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;
 }
@@ -31,7 +32,14 @@ export const MenuHeaderItem = (title: string) => {
 
 export type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
 
-export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueType> {
+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>;
@@ -40,7 +48,6 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
     | SelectOption<ValueType>[]
     | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
   optionsRequestCancel?: () => void;
-  maxRows?: number;
 }
 
 export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
@@ -171,14 +178,11 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
     [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props],
   );
 
-  const maxRowsStyles =
-    props.maxRows !== undefined ? { maxHeight: 62 + 34 * props.maxRows, overFlowY: "auto" } : undefined;
-
-  const { popoverWrapper } = useGridPopoverHook();
+  const { popoverWrapper } = useGridPopoverHook({ className: props.className });
   return popoverWrapper(
     <>
       {props.filtered && (
-        <>
+        <div className={"GridFormDropDown-filter"}>
           <FocusableItem className={"filter-item"}>
             {({ ref }: any) => (
               <div style={{ display: "flex", width: "100%" }}>
@@ -198,10 +202,10 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
             )}
           </FocusableItem>
           <MenuDivider key={`$$divider_filter`} />
-        </>
+        </div>
       )}
-      <ComponentLoadingWrapper loading={!options}>
-        <div style={maxRowsStyles}>
+      <ComponentLoadingWrapper loading={!options} className={"GridFormDropDown-options"}>
+        <>
           {options && options.length == filteredValues?.length && <MenuItem>[Empty]</MenuItem>}
           {options?.map((item, index) =>
             item.value === MenuSeparatorString ? (
@@ -220,7 +224,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
               </MenuItem>
             ),
           )}
-        </div>
+        </>
       </ComponentLoadingWrapper>
     </>,
   );

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -1,13 +1,13 @@
-import "./GridFormEditBearing.scss";
+import "../../styles/GridFormEditBearing.scss";
 
 import { useCallback, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "@utils/bearing";
 import { useGridPopoverHook } from "../GridPopoverHook";
-import { CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 
-export interface GridFormEditBearingProps<RowType extends GridBaseRow> {
+export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeHolder?: string;
   range?: (value: number | null) => string | null;
   onSave?: (selectedRows: RowType[], value: number | null) => Promise<boolean>;
@@ -39,7 +39,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(_props: GridFor
     },
     [props, value],
   );
-  const { triggerSave, popoverWrapper } = useGridPopoverHook({ save });
+  const { triggerSave, popoverWrapper } = useGridPopoverHook({ className: props.className, save });
 
   return popoverWrapper(
     <div className={"GridFormEditBearing-input Grid-popoverContainer"}>

package/src/components/gridForm/GridFormMessage.tsx

@@ -1,17 +1,18 @@
+import clsx from "clsx";
 import { useEffect, useState } from "react";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridBaseRow } from "../Grid";
 import { useGridPopoverHook } from "../GridPopoverHook";
-import { CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 
-export interface GridFormMessageProps<RowType extends GridBaseRow> {
+export interface GridFormMessageProps<RowType extends GridBaseRow> extends CellEditorCommon {
   message: (cellParams: CellParams<RowType>) => Promise<string | JSX.Element> | string | JSX.Element;
 }
 
 export const GridFormMessage = <RowType extends GridBaseRow>(_props: GridFormMessageProps<RowType>) => {
   const props = _props as GridFormMessageProps<RowType> & CellParams<RowType>;
   const [message, setMessage] = useState<string | JSX.Element | null>(null);
-  const { popoverWrapper } = useGridPopoverHook();
+  const { popoverWrapper } = useGridPopoverHook({ className: props.className });
 
   useEffect(() => {
     (async () => {
@@ -20,10 +21,8 @@ export const GridFormMessage = <RowType extends GridBaseRow>(_props: GridFormMes
   }, [props]);
 
   return popoverWrapper(
-    <ComponentLoadingWrapper loading={message === null}>
-      <div style={{ maxWidth: 400 }} className={"Grid-popoverContainer"}>
-        {message}
-      </div>
+    <ComponentLoadingWrapper loading={message === null} className={clsx("GridFormMessage-container", props.className)}>
+      <>{message}</>
     </ComponentLoadingWrapper>,
   );
 };

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,14 +1,15 @@
-import "../../react-menu3/styles/index.scss";
+import "../../styles/GridFormMultiSelect.scss";
 
-import { MenuItem, MenuDivider, FocusableItem, ClickEvent } from "@react-menu3";
-import { Fragment, useCallback, useEffect, useRef, useState, KeyboardEvent } from "react";
+import { MenuItem, MenuDivider, FocusableItem } from "@react-menu3";
+import { useCallback, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { delay, fromPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { MenuSeparatorString } from "@components/gridForm/GridFormDropDown";
-import { CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
+import { ClickEvent } from "../../react-menu3/types";
 
 interface MultiFinalSelectOption<ValueType> {
   value: ValueType;
@@ -23,7 +24,14 @@ export interface MultiSelectResult<RowType> {
   values: Record<string, any>;
 }
 
-export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType> {
+export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType> extends CellEditorCommon {
+  // This overrides CellEditorCommon to provide some common class options
+  className?:
+    | "GridMultiSelect-containerSmall"
+    | "GridMultiSelect-containerMedium"
+    | "GridMultiSelect-containerLarge"
+    | string
+    | undefined;
   filtered?: boolean;
   filterPlaceholder?: string;
   onSave?: (props: MultiSelectResult<RowType>) => Promise<boolean>;
@@ -58,7 +66,6 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
     },
     [props, selectedValues],
   );
-  const { popoverWrapper, triggerSave } = useGridPopoverHook({ save });
 
   // Load up options list if it's async function
   useEffect(() => {
@@ -105,14 +112,15 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
     );
   }, [props.filtered, filter, options]);
 
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({ className: props.className, save });
   return popoverWrapper(
-    <ComponentLoadingWrapper loading={!options}>
-      <div className={"Grid-popoverContainerList"}>
+    <ComponentLoadingWrapper loading={!options} className={"GridFormMultiSelect-container"}>
+      <>
         {options && props.filtered && (
           <>
             <FocusableItem className={"filter-item"} key={"filter"}>
               {({ ref }: any) => (
-                <div style={{ display: "flex", width: "100%" }}>
+                <div style={{ display: "flex", width: "100%" }} className={"GridFormMultiSelect-filter"}>
                   <input
                     autoFocus
                     className={"free-text-input"}
@@ -130,70 +138,72 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
             <MenuDivider key={`$$divider_filter`} />
           </>
         )}
-        {options?.map((item, index) =>
-          item.value === MenuSeparatorString ? (
-            <MenuDivider key={`$$divider_${index}`} />
-          ) : filteredValues.includes(item.value) ? null : (
-            <Fragment key={`${index}`}>
-              <MenuItem
-                key={`${index}`}
-                onClick={(e: ClickEvent) => {
-                  e.keepOpen = true;
-                  if (selectedValues.includes(item.value)) {
-                    setSelectedValues(selectedValues.filter((value) => value != item.value));
-                  } else {
-                    setSelectedValues([...selectedValues, item.value]);
-                  }
-                }}
-                onKeyDown={async (e: KeyboardEvent) => {
-                  if (e.key === "Enter") triggerSave().then();
-                  else if (e.key === " ") {
+        <div className={"GridFormMultiSelect-options"}>
+          {options?.map((item, index) =>
+            item.value === MenuSeparatorString ? (
+              <MenuDivider key={`$$divider_${index}`} />
+            ) : filteredValues.includes(item.value) ? null : (
+              <div key={`${index}`}>
+                <MenuItem
+                  key={`${index}`}
+                  onClick={(e: ClickEvent) => {
+                    e.keepOpen = true;
                     if (selectedValues.includes(item.value)) {
                       setSelectedValues(selectedValues.filter((value) => value != item.value));
                     } else {
                       setSelectedValues([...selectedValues, item.value]);
                     }
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }
-                }}
-              >
-                <LuiCheckboxInput
-                  isChecked={selectedValues.includes(item.value)}
-                  value={`${item.value}`}
-                  label={item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
-                  inputProps={{
-                    onClick: (e) => {
+                  }}
+                  onKeyDown={async (e: KeyboardEvent) => {
+                    if (e.key === "Enter") triggerSave().then();
+                    else if (e.key === " ") {
+                      if (selectedValues.includes(item.value)) {
+                        setSelectedValues(selectedValues.filter((value) => value != item.value));
+                      } else {
+                        setSelectedValues([...selectedValues, item.value]);
+                      }
                       e.preventDefault();
                       e.stopPropagation();
-                      return false;
-                    },
-                  }}
-                  onChange={() => {
-                    /*Do nothing, change handled by menuItem*/
+                    }
                   }}
-                />
-              </MenuItem>
+                >
+                  <LuiCheckboxInput
+                    isChecked={selectedValues.includes(item.value)}
+                    value={`${item.value}`}
+                    label={item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                    inputProps={{
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return false;
+                      },
+                    }}
+                    onChange={() => {
+                      /*Do nothing, change handled by menuItem*/
+                    }}
+                  />
+                </MenuItem>
 
-              {selectedValues.includes(item.value) && item.subComponent && (
-                <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
-                  {(ref: any) =>
-                    item.subComponent &&
-                    item.subComponent(
-                      {
-                        setValue: (value: any) => {
-                          subSelectedValues.current[item.value as string] = value;
+                {selectedValues.includes(item.value) && item.subComponent && (
+                  <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
+                    {(ref: any) =>
+                      item.subComponent &&
+                      item.subComponent(
+                        {
+                          setValue: (value: any) => {
+                            subSelectedValues.current[item.value as string] = value;
+                          },
                         },
-                      },
-                      ref,
-                    )
-                  }
-                </FocusableItem>
-              )}
-            </Fragment>
-          ),
-        )}
-      </div>
+                        ref,
+                      )
+                    }
+                  </FocusableItem>
+                )}
+              </div>
+            ),
+          )}
+        </div>
+      </>
     </ComponentLoadingWrapper>,
   );
 };

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -4,9 +4,9 @@ import { GridContext } from "@contexts/GridContext";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { MenuDivider, MenuItem } from "@react-menu3";
 import { useGridPopoverHook } from "../GridPopoverHook";
-import { CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 
-export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> {
+export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
 }
 
@@ -68,10 +68,10 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(_props: GridForm
     return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
   });
 
-  const { popoverWrapper } = useGridPopoverHook();
+  const { popoverWrapper } = useGridPopoverHook({ className: props.className });
   return popoverWrapper(
-    <ComponentLoadingWrapper loading={!filteredOptions}>
-      <div className={"Grid-popoverContainerList"}>
+    <ComponentLoadingWrapper loading={!filteredOptions} className={"GridFormPopupMenu"}>
+      <>
         {options?.map((item, index) =>
           item.label === PopoutMenuSeparator ? (
             <MenuDivider key={`$$divider_${index}`} />
@@ -88,7 +88,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(_props: GridForm
             )
           ),
         )}
-      </div>
+      </>
     </ComponentLoadingWrapper>,
   );
 };