@linzjs/step-ag-grid 8.4.3 → 9.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "8.4.3",
+  "version": "9.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -81,76 +81,76 @@
     ]
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@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-interactions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/jest": "^0.0.10",
-    "@storybook/react": "6.5.13",
-    "@storybook/test-runner": "^0.9.0",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.16",
+    "@storybook/test-runner": "^0.9.4",
     "@storybook/testing-library": "^0.0.13",
-    "@testing-library/dom": "^8.19.0",
+    "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
-    "@types/debounce-promise": "^3.1.5",
-    "@types/jest": "^29.2.2",
+    "@types/debounce-promise": "^3.1.6",
+    "@types/jest": "^29.4.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.11.9",
-    "@types/react": "^17.0.52",
+    "@types/node": "^18.13.0",
+    "@types/react": "^17.0.53",
     "@types/react-dom": "^17.0.18",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/parser": "^5.42.0",
-    "babel-jest": "^29.2.2",
+    "@types/uuid": "^9.0.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "babel-jest": "^29.4.2",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^6.11.4",
+    "chromatic": "^6.17.0",
     "conventional-changelog-conventionalcommits": "^5.0.0",
-    "eslint": "^8.27.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.6.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.4",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-deprecation": "^1.3.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.9.1",
-    "jest": "^29.3.1",
+    "eslint-plugin-testing-library": "^5.10.1",
+    "jest": "^29.4.2",
     "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest-environment-jsdom": "^29.4.2",
     "jest-expect-message": "^1.1.3",
-    "mkdirp": "^1.0.4",
+    "mkdirp": "^2.1.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.18",
-    "postcss-loader": "^7.0.1",
-    "postcss-scss": "^4.0.5",
-    "prettier": "^2.7.1",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.0.2",
+    "postcss-scss": "^4.0.6",
+    "prettier": "^2.8.4",
     "react-app-polyfill": "^3.0.0",
     "react-scripts": "^5.0.1",
-    "rollup": "^3.2.5",
+    "rollup": "^3.14.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
-    "sass": "^1.56.0",
-    "sass-loader": "10.3.1",
+    "sass": "^1.58.0",
+    "sass-loader": "^13.2.0",
     "semantic-release": "^19.0.5",
-    "storybook-addon-mock": "^2.4.1",
-    "style-loader": "2.0.0",
-    "stylelint": "^14.14.1",
-    "stylelint-config-prettier": "^9.0.3",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-recommended-scss": "^8.0.0",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-prettier": "^2.0.0",
     "stylelint-scss": "^4.3.0",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.5"
   },
   "babel": {
     "presets": [

package/src/components/Grid.tsx

@@ -340,33 +340,35 @@ export const Grid = (params: GridProps): JSX.Element => {
           />
         </div>
       )}
-      <AgGridReact
-        animateRows={params.animateRows}
-        rowClassRules={params.rowClassRules}
-        defaultColDef={params.defaultColDef}
-        getRowId={(params) => `${params.data.id}`}
-        suppressRowClickSelection={true}
-        rowSelection={params.rowSelection ?? "multiple"}
-        suppressBrowserResizeObserver={true}
-        colResizeDefault={"shift"}
-        onFirstDataRendered={sizeColumnsToFit}
-        onGridSizeChanged={sizeColumnsToFit}
-        suppressClickEdit={true}
-        onCellKeyPress={onCellKeyPress}
-        onCellClicked={onCellClicked}
-        onCellDoubleClicked={onCellDoubleClick}
-        onCellEditingStarted={refreshSelectedRows}
-        domLayout={params.domLayout}
-        columnDefs={columnDefs}
-        rowData={params.rowData}
-        noRowsOverlayComponent={noRowsOverlayComponent}
-        onGridReady={onGridReady}
-        onSortChanged={ensureSelectedRowIsVisible}
-        postSortRows={params.postSortRows ?? postSortRows}
-        onSelectionChanged={synchroniseExternalStateToGridSelection}
-        onColumnMoved={params.onColumnMoved}
-        alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}
-      />
+      <div style={{ flex: 1 }}>
+        <AgGridReact
+          animateRows={params.animateRows}
+          rowClassRules={params.rowClassRules}
+          defaultColDef={params.defaultColDef}
+          getRowId={(params) => `${params.data.id}`}
+          suppressRowClickSelection={true}
+          rowSelection={params.rowSelection ?? "multiple"}
+          suppressBrowserResizeObserver={true}
+          colResizeDefault={"shift"}
+          onFirstDataRendered={sizeColumnsToFit}
+          onGridSizeChanged={sizeColumnsToFit}
+          suppressClickEdit={true}
+          onCellKeyPress={onCellKeyPress}
+          onCellClicked={onCellClicked}
+          onCellDoubleClicked={onCellDoubleClick}
+          onCellEditingStarted={refreshSelectedRows}
+          domLayout={params.domLayout}
+          columnDefs={columnDefs}
+          rowData={params.rowData}
+          noRowsOverlayComponent={noRowsOverlayComponent}
+          onGridReady={onGridReady}
+          onSortChanged={ensureSelectedRowIsVisible}
+          postSortRows={params.postSortRows ?? postSortRows}
+          onSelectionChanged={synchroniseExternalStateToGridSelection}
+          onColumnMoved={params.onColumnMoved}
+          alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}
+        />
+      </div>
     </div>
   );
 };

package/src/components/gridForm/GridFormDropDown.tsx

@@ -11,6 +11,7 @@ import { GridSubComponentContext } from "../../contexts/GridSubComponentContext"
 import { ClickEvent } from "../../react-menu3/types";
 import { FormError } from "../../lui/FormError";
 import { isNotEmpty } from "../../utils/util";
+import { textMatch } from "../../utils/textMatcher";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType> {
   // Note the row that was clicked on will be first
@@ -136,8 +137,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
               console.error("Cannot filter non-string labels", option);
               return undefined;
             }
-            const str = (option.label as string) || "";
-            return str.toLowerCase().indexOf(filter.toLowerCase()) !== -1 ? option : undefined;
+            return textMatch((option.label as string) || "", filter) ? option : undefined;
           })
           .filter((r) => r !== undefined),
       );

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -41,6 +41,11 @@ export interface GridFormMultiSelectGroup {
   filter?: string;
 }
 
+export interface GridFormMultiSelectSaveProps<RowType extends GridBaseRow> {
+  selectedRows: RowType[];
+  selectedOptions: MultiSelectOption[];
+}
+
 export interface GridFormMultiSelectProps<RowType extends GridBaseRow> extends CellEditorCommon {
   className?:
     | "GridMultiSelect-containerSmall"
@@ -54,7 +59,7 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow> extends C
   filterHelpText?: string | ((filter: string, options: MultiSelectOption[]) => string | undefined);
   noOptionsMessage?: string;
   onSelectFilter?: (props: { filter: string; options: MultiSelectOption[] }) => void;
-  onSave?: (props: { selectedRows: RowType[]; selectedOptions: MultiSelectOption[] }) => Promise<boolean>;
+  onSave?: (props: GridFormMultiSelectSaveProps<RowType>) => Promise<boolean>;
   headers?: GridFormMultiSelectGroup[];
   options: MultiSelectOption[] | ((selectedRows: RowType[]) => Promise<MultiSelectOption[]> | MultiSelectOption[]);
   invalid?: (selectedRows: RowType[], selectedOptions: MultiSelectOption[]) => boolean;
@@ -164,11 +169,12 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
               filterPlaceholder={props.filterPlaceholder}
             />
           )}
-          {headerGroups && (isEmpty(headerGroups) || !toPairs(headerGroups).some(([_, options]) => !isEmpty(options))) && (
-            <MenuItem key={"noOptions"} className={"GridMultiSelect-noOptions"} disabled={true}>
-              {props.noOptionsMessage ?? "No Options"}
-            </MenuItem>
-          )}
+          {headerGroups &&
+            (isEmpty(headerGroups) || !toPairs(headerGroups).some(([_, options]) => !isEmpty(options))) && (
+              <MenuItem key={"noOptions"} className={"GridMultiSelect-noOptions"} disabled={true}>
+                {props.noOptionsMessage ?? "No Options"}
+              </MenuItem>
+            )}
           {headerGroups && !isEmpty(headerGroups) && (
             <div className={"GridFormMultiSelect-options"}>
               {headers.map((header, index) => {

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -42,7 +42,6 @@ export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
         helpText={helpText}
-        autoFocus={true}
         placeholder={props.placeholder}
         allowTabToSave={true}
       />

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -38,7 +38,6 @@ export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
       error={invalid()}
       onChange={(e) => setValue(e.target.value)}
       helpText={helpText}
-      autoFocus={true}
       placeholder={props.placeholder}
       style={{ width: "100%" }}
       allowTabToSave={true}

package/src/lui/TextAreaInput.tsx

@@ -40,7 +40,7 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
           {/* wrapper div used for error styling */}
           <textarea
             rows={5}
-            {...omit(props, ["error", "value", "helpText", "formatted", "className"])}
+            {...omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"])}
             id={id}
             value={props.value ?? ""}
             spellCheck={true}

package/src/lui/TextInputFormatted.tsx

@@ -26,7 +26,7 @@ export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
           type={"text"}
           spellCheck={true}
           defaultValue={props.value}
-          {...omit(props, ["error", "value", "helpText", "formatted", "className"])}
+          {...omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"])}
           className={"LuiTextInput-input"}
           onMouseEnter={(e) => {
             e.currentTarget.focus();

package/src/react-menu3/components/ControlledMenu.tsx

@@ -127,6 +127,25 @@ export const ControlledMenuFr = (
         return;
       }
 
+      const invokeSave = (reason: string) => {
+        if (!saveButtonRef?.current) return;
+        saveButtonRef.current?.setAttribute("data-reason", reason);
+        saveButtonRef?.current?.click();
+      };
+
+      const allowTabToSave = activeElement.getAttribute("data-allowtabtosave") == "true";
+      if (allowTabToSave) {
+        if (isDown) {
+          ev.preventDefault();
+          ev.stopPropagation();
+          lastTabDownEl.current = activeElement;
+        } else {
+          lastTabDownEl.current == activeElement &&
+            invokeSave(ev.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD);
+        }
+        return;
+      }
+
       const inputElsIterator = thisDocument.querySelectorAll<HTMLElement>(".szh-menu--state-open input,textarea");
       let inputEls: HTMLElement[] = [];
       inputElsIterator.forEach((el) => inputEls.push(el));
@@ -138,12 +157,6 @@ export const ControlledMenuFr = (
 
       const isTextArea = activeElement.nodeName === "TEXTAREA";
       const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") == "true" || isTextArea;
-      const allowTabToSave = activeElement.getAttribute("data-allowtabtosave") == "true";
-      const invokeSave = (reason: string) => {
-        if (!saveButtonRef?.current) return;
-        saveButtonRef.current?.setAttribute("data-reason", reason);
-        saveButtonRef?.current?.click();
-      };
 
       switch (activeElement.nodeName) {
         case "TEXTAREA":

package/src/stories/grid/GridKeyboardInteractions.stories.tsx

@@ -0,0 +1,261 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+import "../../styles/index.scss";
+import "../../styles/GridTheme.scss";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
+import { useMemo, useState } from "react";
+import { wait } from "../../utils/util";
+import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
+import { ColDefT, GridCell } from "../../components/GridCell";
+import { GridPopoverMessage } from "../../components/gridPopoverEdit/GridPopoverMessage";
+import { MenuOption } from "../../components/gridForm/GridFormPopoverMenu";
+import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
+import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
+import { GridIcon } from "../../components/GridIcon";
+import { userEvent, waitFor } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    quickFilter: true,
+    quickFilterValue: "",
+    quickFilterPlaceholder: "Quick filter...",
+    selectable: false,
+    rowSelection: "single",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1024, height: 400 }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string;
+  age: number;
+  desc: string;
+  dd: string;
+}
+
+const multiEditAction = jest.fn().mockImplementation(async () => {
+  await wait(500);
+});
+
+const eAction = jest.fn<boolean, []>().mockReturnValue(true);
+
+const GridKeyboardInteractionsTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+        initialWidth: 65,
+        maxWidth: 150,
+        cellRendererParams: {
+          warning: (props) => props.value === "Tester" && "Testers are testing",
+          info: (props) => props.value === "Developer" && "Developers are awesome",
+        },
+      }),
+      GridCell({
+        field: "age",
+        headerName: "Age",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridCell({
+        field: "desc",
+        headerName: "Description",
+        initialWidth: 150,
+        maxWidth: 200,
+      }),
+      GridPopoverMessage(
+        {
+          headerName: "Popout message",
+          maxWidth: 150,
+          cellRenderer: () => <>Single Click me!</>,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            message: async (selectedRows): Promise<string> => {
+              await wait(1000);
+              return `There are ${selectedRows.length} row(s) selected`;
+            },
+          },
+        },
+      ),
+      GridCell({
+        headerName: "Custom edit",
+        maxWidth: 100,
+        editable: true,
+        valueFormatter: () => "Press E",
+        cellRendererParams: {
+          rightHoverElement: (
+            <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />
+          ),
+          editAction: () => {
+            //
+          },
+          shortcutKeys: {
+            e: eAction,
+          },
+        },
+      }),
+      GridPopoverMenu(
+        {},
+        {
+          multiEdit: true,
+          editorParams: {
+            defaultAction: async ({ menuOption }) => {
+              // eslint-disable-next-line no-console
+              console.log("clicked", { menuOption });
+            },
+            options: async (selectedItems) => {
+              // Just doing a timeout here to demonstrate deferred loading
+              await wait(500);
+              return [
+                {
+                  label: "Single edit only",
+                  action: async () => {
+                    //
+                  },
+                  disabled: selectedItems.length > 1,
+                },
+                {
+                  label: "Multi-edit",
+                  action: multiEditAction,
+                },
+                {
+                  label: "Disabled item",
+                  disabled: "Disabled for test",
+                },
+                {
+                  label: "Developer Only",
+                  hidden: selectedItems.some((x) => x.position != "Developer"),
+                },
+                {
+                  label: "Other (TextInput)",
+                  action: async () => {
+                    //
+                  },
+                  subComponent: () => (
+                    <GridFormSubComponentTextInput placeholder={"Other"} maxLength={5} required defaultValue={""} />
+                  ),
+                },
+                {
+                  label: "Other (TextArea)",
+                  action: async ({ menuOption }) => {
+                    // eslint-disable-next-line no-console
+                    console.log(`Sub selected value was ${JSON.stringify(menuOption.subValue)}`);
+                    await wait(500);
+                  },
+                  subComponent: () => (
+                    <GridFormSubComponentTextArea placeholder={"Other"} maxLength={5} required defaultValue={""} />
+                  ),
+                },
+              ] as MenuOption<ITestRow>[];
+            },
+          },
+        },
+      ),
+      GridPopoverMenu(
+        {
+          editable: () => false,
+        },
+        {
+          editorParams: {
+            options: async () => {
+              return [];
+            },
+          },
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
+    { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
+    { id: 1002, position: "Manager", age: 65, desc: "Manages", dd: "3" },
+  ]);
+
+  return (
+    <Grid
+      {...props}
+      selectable={true}
+      externalSelectedItems={externalSelectedItems}
+      setExternalSelectedItems={setExternalSelectedItems}
+      columnDefs={columnDefs}
+      rowData={rowData}
+      domLayout={"autoHeight"}
+      autoSelectFirstRow={true}
+    />
+  );
+};
+
+export const GridKeyboardInteractions = GridKeyboardInteractionsTemplate.bind({});
+GridKeyboardInteractions.play = async ({ canvasElement }) => {
+  // Ensure first row/cell is selected on render
+  await waitFor(async () => {
+    const activeCell = canvasElement.ownerDocument.activeElement;
+    expect(activeCell).toHaveClass("ag-cell-focus");
+    expect(activeCell).toHaveAttribute("aria-colindex", "1");
+    expect(activeCell?.parentElement).toHaveAttribute("row-index", "0");
+  });
+  userEvent.keyboard("{arrowdown}{arrowdown}");
+  userEvent.keyboard("{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}");
+
+  // Test enter post focus
+  const test = async (fn: () => any, colId: string, rowId: string) => {
+    userEvent.keyboard("{Enter}");
+    await wait(1000);
+    userEvent.keyboard("{arrowdown}{arrowdown}");
+    fn();
+    await waitFor(async () => {
+      expect(multiEditAction).toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      const activeCell = canvasElement.ownerDocument.activeElement;
+      expect(activeCell).toHaveClass("ag-cell-focus");
+      expect(activeCell).toHaveAttribute("aria-colindex", colId);
+      expect(activeCell?.parentElement).toHaveAttribute("row-index", rowId);
+    });
+    await wait(1000);
+  };
+
+  await test(() => userEvent.keyboard("{Enter}"), "8", "2");
+  await test(() => userEvent.tab(), "9", "2");
+  userEvent.tab({ shift: true });
+  await test(() => userEvent.tab({ shift: true }), "7", "2");
+
+  userEvent.keyboard("{Enter}");
+  await wait(250);
+  expect(eAction).not.toHaveBeenCalled();
+
+  userEvent.keyboard("e");
+  await waitFor(async () => {
+    expect(eAction).toHaveBeenCalled();
+  });
+};

package/src/stories/grid/{GridPopoutBearing.stories.tsx → GridPopoverEditBearing.stories.tsx}

@@ -42,7 +42,7 @@ interface ITestRow {
   bearing: string | number | null;
 }
 
-const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridPopoverEditBearingTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
@@ -57,8 +57,8 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
           field: "bearingCorrection",
           headerName: "Bearing correction",
           cellRendererParams: {
-            warning: (props) => props.data.id == 1002 && "Testers are testing",
-            info: (props) => props.data.id == 1001 && "Developers are developing",
+            warning: ({ data }) => data.id == 1002 && "Testers are testing",
+            info: ({ data }) => data.id == 1001 && "Developers are developing",
           },
         },
         {
@@ -108,4 +108,4 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   );
 };
 
-export const Bearings = GridReadOnlyTemplate.bind({});
+export const _GridPopoverEditBearing = GridPopoverEditBearingTemplate.bind({});

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.stories.tsx

@@ -24,7 +24,9 @@ const updateValue = jest
   .fn<void, [saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1]>()
   .mockImplementation((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
 
-const onSelectedItem = jest.fn<Promise<void>, [GridPopoutEditDropDownSelectedItem<any>]>().mockResolvedValue(undefined);
+const onSelectedItem = jest
+  .fn<Promise<void>, [GridPopoutEditDropDownSelectedItem<any>]>()
+  .mockImplementation(async () => undefined);
 
 const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
   const config: GridFormDropDownProps<any> = {
@@ -125,4 +127,11 @@ GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
   userEvent.clear(textInput);
   userEvent.type(textInput, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
+
+  // Test filter
+  const filterText = await canvas.findByPlaceholderText("Filter...");
+  userEvent.type(filterText, "ena");
+  expect(canvas.queryByText("Enabled")).toBeInTheDocument();
+  expect(canvas.queryByText("Disabled")).not.toBeInTheDocument();
+  expect(canvas.queryByText("Sub menu...")).not.toBeInTheDocument();
 };

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -24,7 +24,7 @@ const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
   return (
     <div className={"react-menu-inline-test"}>
       <GridContextProvider>
-        <h6 ref={anchorRef}>Test</h6>
+        <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={
             {