@linzjs/step-ag-grid 29.19.0 → 30.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.19.0",
+  "version": "30.1.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -28,13 +28,13 @@
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
-    "ag-grid-community": "~34.3.1",
-    "ag-grid-react": "~34.3.1",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
   },
   "dependencies": {
+    "ag-grid-community": "34.3.1",
+    "ag-grid-react": "34.3.1",
     "clsx": "^2.1.1",
     "debounce-promise": "^3.1.2",
     "matcher": "^5.0.0",
@@ -87,7 +87,7 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@linzjs/lui": "^24.3.1",
     "@linzjs/style": "^5.4.0",
-    "@linzjs/windows": "^8.3.0",
+    "@linzjs/windows": "^8.6.3",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -107,8 +107,6 @@
     "@types/uuid": "^11.0.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
     "@vitest/ui": "^3.2.4",
-    "ag-grid-community": "34.3.1",
-    "ag-grid-react": "34.3.1",
     "babel-preset-react-app": "^10.1.0",
     "canvas": "^3.2.0",
     "chromatic": "^13.3.4",

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -45,7 +45,6 @@ const FilterUI: React.FC<FilterUIProps> = ({
   return (
     <div className="GridFilterColsMultiSelect">
       <span className="LuiSelect-label-text">Filter column</span>
-
       <LuiCheckboxInput
         className="LuiCheckboxInput-selectAll"
         label={'Select All'}
@@ -75,6 +74,9 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   private gui!: HTMLElement;
   private labelFormatter?: (value: string) => string;
   private reactRoot: Root | null = null;
+  private filterButtonClickListener: ((e: Event) => void) | null = null;
+  private filterButton: Element | null = null;
+  private hasOpened = false;
 
   private normalizeCellValue(value: unknown): string {
     if (typeof value === 'string') return value.trim() === '' ? EMPTY_KEY : value;
@@ -123,11 +125,31 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
     this.gui = document.createElement('div');
     this.reactRoot = createRoot(this.gui);
     this.render();
+    this.setupFilterButtonListener();
+  }
+
+  private setupFilterButtonListener(): void {
+    const columnId = this.params.column.getColId();
+    this.filterButton = document.querySelector(`[col-id="${columnId}"] .ag-header-cell-filter-button`);
+
+    if (this.filterButton) {
+      this.filterButtonClickListener = (e: Event) => {
+        if (this.hasOpened) {
+          e.stopPropagation();
+          e.preventDefault();
+          this.params.api.hidePopupMenu();
+          this.hasOpened = false;
+        } else {
+          this.hasOpened = true;
+        }
+      };
+
+      this.filterButton.addEventListener('click', this.filterButtonClickListener, true);
+    }
   }
 
   private render(): void {
     if (!this.reactRoot) return;
-
     this.reactRoot.render(
       <FilterUI
         allValues={this.allValues}
@@ -196,6 +218,12 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   }
 
   destroy(): void {
+    if (this.filterButtonClickListener && this.filterButton) {
+      this.filterButton.removeEventListener('click', this.filterButtonClickListener, true);
+      this.filterButtonClickListener = null;
+      this.filterButton = null;
+    }
+
     if (this.reactRoot) {
       this.reactRoot.unmount();
       this.reactRoot = null;

package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx

@@ -159,7 +159,11 @@ const filterGridUsingColumnFilter = async (filterString: string): Promise<void>
   });
   const headerCellFilterButton = await findQuick({ classes: `.ag-header-cell-filter-button` });
   await expect(headerCellFilterButton).toBeInTheDocument();
-  await user.click(headerCellFilterButton);
+  // Check if menu is already open
+  const existingMenu = document.querySelector('.ag-menu');
+  if (!existingMenu) {
+    await user.click(headerCellFilterButton);
+  }
   const canvas = within(document.body);
   const regex = new RegExp(filterString, 'i'); // case‑insensitive
   const filterCheckbox = await canvas.findByRole('checkbox', { name: regex });