@linzjs/step-ag-grid 29.15.0 → 29.16.0

package/package.json

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

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -8,6 +8,7 @@ import { createRoot, Root } from 'react-dom/client';
 export interface CheckboxMultiFilterParams extends IFilterParams {
   labels?: Record<string, string>;
   labelFormatter?: (value: string) => string;
+  customOrder?: string[];
 }
 
 export interface CheckboxMultiFilterModel {
@@ -91,9 +92,18 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
       values.add(norm);
     });
 
+    const { customOrder } = this.params;
+    const orderMap = customOrder?.length ? new Map(customOrder.map((val, idx) => [val, idx])) : null;
+
     return Array.from(values).sort((a, b) => {
-      if (a === EMPTY_KEY && b !== EMPTY_KEY) return -1;
-      if (b === EMPTY_KEY && a !== EMPTY_KEY) return 1;
+      if (orderMap) {
+        const aIdx = orderMap.get(a) ?? Infinity;
+        const bIdx = orderMap.get(b) ?? Infinity;
+        if (aIdx !== bIdx) return aIdx - bIdx;
+      }
+
+      if (a === EMPTY_KEY) return b === EMPTY_KEY ? 0 : -1;
+      if (b === EMPTY_KEY) return 1;
       return a.localeCompare(b);
     });
   }
@@ -155,10 +165,14 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   }
 
   isFilterActive(): boolean {
-    return this.selectedValues.size > 0;
+    return this.selectedValues.size !== this.allValues.length;
   }
 
   doesFilterPass(p: IDoesFilterPassParams): boolean {
+    if (this.selectedValues.size === 0) {
+      return false;
+    }
+
     const field = this.params.colDef.field as string;
     if (!p.data || typeof p.data !== 'object') {
       return this.selectedValues.has(EMPTY_KEY);
@@ -170,7 +184,10 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   }
 
   getModel(): CheckboxMultiFilterModel | null {
-    return this.selectedValues.size > 0 ? { values: Array.from(this.selectedValues) } : null;
+    if (this.selectedValues.size !== this.allValues.length) {
+      return { values: Array.from(this.selectedValues) };
+    }
+    return null;
   }
 
   setModel(model: CheckboxMultiFilterModel | null): void {
@@ -189,7 +206,9 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
 export const createCheckboxMultiFilterParams = (
   labels: Record<string, string> = {},
   labelFormatter?: (value: string) => string,
+  customOrder?: string[],
 ): Partial<CheckboxMultiFilterParams> => ({
   labels: { [EMPTY_KEY]: DEFAULT_EMPTY_LABEL, ...labels },
   labelFormatter,
+  customOrder,
 });

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

@@ -57,11 +57,15 @@ const GridFilterColumnsMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (pr
         field: 'position',
         headerName: 'Position',
         filter: GridFilterColumnsMultiSelect,
-        filterParams: createCheckboxMultiFilterParams({
-          Developer: 'FE Dev',
-          Manager: 'Tech Manager',
-          __EMPTY__: 'None',
-        }),
+        filterParams: createCheckboxMultiFilterParams(
+          {
+            Developer: 'FE Dev',
+            Manager: 'Tech Manager',
+            __EMPTY__: 'None',
+          },
+          undefined,
+          ['Manager', 'Developer', '__EMPTY__', 'Tester'],
+        ),
       }),
       GridCell({
         field: 'desc',