@linzjs/step-ag-grid 30.0.0 → 30.2.0

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

package/dist/src/components/gridFilter/GridFilterColumnsMultiSelect.d.ts

@@ -16,9 +16,13 @@ export declare class GridFilterColumnsMultiSelect implements IFilterComp {
     private gui;
     private labelFormatter?;
     private reactRoot;
+    private filterButtonClickListener;
+    private filterButton;
+    private hasOpened;
     private normalizeCellValue;
     private loadFieldValues;
     init(params: CheckboxMultiFilterParams): void;
+    private setupFilterButtonListener;
     private render;
     private handleToggleAll;
     private handleToggleOne;

package/dist/step-ag-grid.cjs

@@ -62084,6 +62084,9 @@ class GridFilterColumnsMultiSelect {
     gui;
     labelFormatter;
     reactRoot = null;
+    filterButtonClickListener = null;
+    filterButton = null;
+    hasOpened = false;
     normalizeCellValue(value) {
         if (typeof value === 'string')
             return value.trim() === '' ? EMPTY_KEY : value;
@@ -62126,6 +62129,25 @@ class GridFilterColumnsMultiSelect {
         this.gui = document.createElement('div');
         this.reactRoot = client.createRoot(this.gui);
         this.render();
+        this.setupFilterButtonListener();
+    }
+    setupFilterButtonListener() {
+        const columnId = this.params.column.getColId();
+        this.filterButton = document.querySelector(`[col-id="${columnId}"] .ag-header-cell-filter-button`);
+        if (this.filterButton) {
+            this.filterButtonClickListener = (e) => {
+                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);
+        }
     }
     render() {
         if (!this.reactRoot)
@@ -62181,6 +62203,11 @@ class GridFilterColumnsMultiSelect {
         this.render();
     }
     destroy() {
+        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;
@@ -63795,16 +63822,22 @@ const GridPopoverEditBearingCorrection = (colDef, props) => GridPopoverEditBeari
     },
 });
 
-const GridPopoverEditDropDown = (colDef, props) => GridCell(colDef, {
-    editor: GridFormDropDown,
-    ...props,
-    editorParams: {
-        ...props.editorParams,
-        className: clsx({
-            'GridPopoverEditDropDown-containerLarge': !props.editorParams?.className?.includes('GridPopoverEditDropDown-container'),
-        }, props.editorParams?.className),
-    },
-});
+const GridPopoverEditDropDown = (colDef, props) => {
+    colDef.cellRendererParams = {
+        rightHoverElement: (jsxRuntime.jsx(GridIcon, { icon: 'ic_arrow_drop_down', title: '', className: 'GridCell-editableIcon GridCell-dropDownIcon' })),
+        ...colDef.cellRendererParams,
+    };
+    return GridCell(colDef, {
+        editor: GridFormDropDown,
+        ...props,
+        editorParams: {
+            ...props.editorParams,
+            className: clsx({
+                'GridPopoverEditDropDown-containerLarge': !props.editorParams?.className?.includes('GridPopoverEditDropDown-container'),
+            }, props.editorParams?.className),
+        },
+    });
+};
 
 const GridRenderPopoutMenuCell = (props) => {
     const disabled = !fnOrVar(props.colDef?.editable, props);
@@ -63887,8 +63920,14 @@ const GridContextProvider = (props) => {
     const enableMultilineBulkEditRef = React13.useRef(false);
     const idsBeforeUpdate = React13.useRef([]);
     const prePopupFocusedCell = React13.useRef();
-    const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = React13.useState(false);
+    const [externallySelectedItemsAreInSync, _setExternallySelectedItemsAreInSync] = React13.useState(false);
     const externalFilters = React13.useRef([]);
+    // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
+    const externallySelectedItemsAreInSyncRef = React13.useRef(false);
+    const setExternallySelectedItemsAreInSync = React13.useCallback((cond) => {
+        _setExternallySelectedItemsAreInSync(cond);
+        externallySelectedItemsAreInSyncRef.current = cond;
+    }, [_setExternallySelectedItemsAreInSync]);
     const setQuickFilter = React13.useCallback((filter) => {
         // If we don't clear the focused cell focus switches back to grid when typing in the quick filter input
         gridApi?.clearFocusedCell();
@@ -64235,11 +64274,6 @@ const GridContextProvider = (props) => {
             });
         }
     }, [gridApi]);
-    // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
-    const externallySelectedItemsAreInSyncRef = React13.useRef(false);
-    React13.useEffect(() => {
-        externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
-    }, [externallySelectedItemsAreInSync]);
     const waitForExternallySelectedItemsToBeInSync = React13.useCallback(async () => {
         if (!hasExternallySelectedItemsRef.current) {
             externallySelectedItemsAreInSyncRef.current = true;
@@ -64295,7 +64329,7 @@ const GridContextProvider = (props) => {
         finally {
             startCellEditingInProgressRef.current = false;
         }
-    }, [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync]);
+    }, [anyUpdating, gridApi, prePopupOps, setExternallySelectedItemsAreInSync, waitForExternallySelectedItemsToBeInSync]);
     const bulkEditingCompleteCallbackRef = React13.useRef();
     const onBulkEditingComplete = React13.useCallback(async () => {
         await bulkEditingCompleteCallbackRef.current?.();