@linzjs/step-ag-grid 30.0.0 → 30.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "30.0.0",
+  "version": "30.2.0",
   "keywords": [
     "aggrid",
     "ag-grid",

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/components/gridPopoverEdit/{GridPopoverEditDropDown.ts → GridPopoverEditDropDown.tsx}

@@ -2,14 +2,21 @@ import clsx from 'clsx';
 
 import { GenericCellEditorProps, GridCell } from '../GridCell';
 import { GridFormDropDown, GridFormDropDownProps } from '../gridForm/GridFormDropDown';
+import { GridIcon } from '../GridIcon';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
 import { ColDefT, GridBaseRow } from '../types';
 
 export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any, TOptionValue = any>(
   colDef: GenericCellColDef<TData, TValue>,
   props: GenericCellEditorProps<GridFormDropDownProps<TData, TOptionValue>>,
-): ColDefT<TData, TValue> =>
-  GridCell<TData, TValue, GridFormDropDownProps<TData, TOptionValue>>(colDef, {
+): ColDefT<TData, TValue> => {
+  colDef.cellRendererParams = {
+    rightHoverElement: (
+      <GridIcon icon={'ic_arrow_drop_down'} title={''} className={'GridCell-editableIcon GridCell-dropDownIcon'} />
+    ),
+    ...colDef.cellRendererParams,
+  };
+  return GridCell<TData, TValue, GridFormDropDownProps<TData, TOptionValue>>(colDef, {
     editor: GridFormDropDown,
     ...props,
     editorParams: {
@@ -24,3 +31,4 @@ export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any,
       ),
     },
   });
+};

package/src/contexts/GridContextProvider.tsx

@@ -41,9 +41,20 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const enableMultilineBulkEditRef = useRef(false);
   const idsBeforeUpdate = useRef<TData['id'][]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
-  const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
+  const [externallySelectedItemsAreInSync, _setExternallySelectedItemsAreInSync] = useState(false);
   const externalFilters = useRef<GridFilterExternal<TData>[]>([]);
 
+  // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
+  const externallySelectedItemsAreInSyncRef = useRef(false);
+
+  const setExternallySelectedItemsAreInSync = useCallback(
+    (cond: boolean) => {
+      _setExternallySelectedItemsAreInSync(cond);
+      externallySelectedItemsAreInSyncRef.current = cond;
+    },
+    [_setExternallySelectedItemsAreInSync],
+  );
+
   const setQuickFilter = useCallback(
     (filter: string) => {
       // If we don't clear the focused cell focus switches back to grid when typing in the quick filter input
@@ -539,12 +550,6 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     }
   }, [gridApi]);
 
-  // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
-  const externallySelectedItemsAreInSyncRef = useRef(false);
-  useEffect(() => {
-    externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
-  }, [externallySelectedItemsAreInSync]);
-
   const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
     if (!hasExternallySelectedItemsRef.current) {
       externallySelectedItemsAreInSyncRef.current = true;
@@ -613,7 +618,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         startCellEditingInProgressRef.current = false;
       }
     },
-    [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync],
+    [anyUpdating, gridApi, prePopupOps, setExternallySelectedItemsAreInSync, waitForExternallySelectedItemsToBeInSync],
   );
 
   const bulkEditingCompleteCallbackRef = useRef<() => Promise<void> | void>();

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 });

package/src/styles/GridTheme.scss

@@ -190,6 +190,18 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     align-items: center;
   }
 
+  .ag-cell span.GridCell-dropDownIcon {
+    fill: lui.$charcoal;
+    max-width: 26px;
+    width: 26px;
+    visibility: hidden;
+  }
+
+  .ag-cell.ag-cell-inline-editing span.GridCell-dropDownIcon {
+    max-width: 24px;
+    width: 24px;
+  }
+
   .ag-cell .GridCell-editableIcon {
     fill: lui.$silver;
     visibility: hidden;