@linzjs/step-ag-grid 30.1.0 → 30.3.0

package/package.json

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

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -26,6 +26,8 @@ interface FilterUIProps {
 
 const EMPTY_KEY = '__EMPTY__';
 const DEFAULT_EMPTY_LABEL = '-';
+const filterStateMap = new Map<string, boolean>();
+const filterClickCountMap = new Map<string, number>();
 
 const FilterUI: React.FC<FilterUIProps> = ({
   allValues,
@@ -76,7 +78,6 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   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;
@@ -134,13 +135,25 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
 
     if (this.filterButton) {
       this.filterButtonClickListener = (e: Event) => {
-        if (this.hasOpened) {
-          e.stopPropagation();
+        const clickCount = filterClickCountMap.get(columnId) || 0;
+        filterClickCountMap.set(columnId, clickCount + 1);
+
+        if (clickCount === 0) {
+          e.stopImmediatePropagation();
+          e.preventDefault();
+          this.params.api.hidePopupMenu();
+          filterStateMap.set(columnId, false);
+          return;
+        }
+
+        const isOpen = filterStateMap.get(columnId) || false;
+        if (isOpen) {
+          e.stopImmediatePropagation();
           e.preventDefault();
           this.params.api.hidePopupMenu();
-          this.hasOpened = false;
+          filterStateMap.set(columnId, false);
         } else {
-          this.hasOpened = true;
+          filterStateMap.set(columnId, true);
         }
       };
 

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/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;