@linzjs/step-ag-grid 29.9.0 → 29.11.0

package/package.json

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

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -23,6 +23,9 @@ interface FilterUIProps {
   onToggleOne: (value: string, checked: boolean) => void;
 }
 
+const EMPTY_KEY = '__EMPTY__';
+const DEFAULT_EMPTY_LABEL = '-';
+
 const FilterUI: React.FC<FilterUIProps> = ({
   allValues,
   selected,
@@ -34,8 +37,8 @@ const FilterUI: React.FC<FilterUIProps> = ({
   const allChecked = allValues.length > 0 && selected.size === allValues.length;
 
   const getDisplayLabel = (raw: string): string => {
-    const mapped = labels[raw] ?? raw;
-    return labelFormatter ? labelFormatter(mapped) : mapped;
+    const base = raw === EMPTY_KEY ? (labels[EMPTY_KEY] ?? DEFAULT_EMPTY_LABEL) : (labels[raw] ?? raw);
+    return labelFormatter ? labelFormatter(base) : base;
   };
 
   return (
@@ -72,26 +75,27 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
   private labelFormatter?: (value: string) => string;
   private reactRoot: Root | null = null;
 
+  private normalizeCellValue(value: unknown): string {
+    if (typeof value === 'string') return value.trim() === '' ? EMPTY_KEY : value;
+    return EMPTY_KEY;
+  }
+
   private loadFieldValues(): string[] {
     const field = this.params.colDef.field as string;
     const values = new Set<string>();
 
     this.params.api.forEachNode((node) => {
-      const data = node.data;
-      const cellValue = data?.[field];
-      if (
-        data &&
-        typeof data === 'object' &&
-        field in data &&
-        typeof cellValue === 'string' &&
-        cellValue !== undefined &&
-        cellValue !== null
-      ) {
-        values.add(cellValue);
-      }
+      const data = node.data ?? {};
+      const raw = (data as Record<string, unknown>)[field];
+      const norm = this.normalizeCellValue(raw);
+      values.add(norm);
     });
 
-    return Array.from(values).sort();
+    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;
+      return a.localeCompare(b);
+    });
   }
 
   init(params: CheckboxMultiFilterParams): void {
@@ -99,6 +103,10 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
     this.labels = { ...params.labels };
     this.labelFormatter = params.labelFormatter;
 
+    if (!(EMPTY_KEY in this.labels)) {
+      this.labels[EMPTY_KEY] = DEFAULT_EMPTY_LABEL;
+    }
+
     this.allValues = this.loadFieldValues();
     this.selectedValues = new Set(this.allValues);
 
@@ -150,18 +158,15 @@ export class GridFilterColumnsMultiSelect implements IFilterComp {
     return this.selectedValues.size > 0;
   }
 
-  doesFilterPass(params: IDoesFilterPassParams): boolean {
+  doesFilterPass(p: IDoesFilterPassParams): boolean {
     const field = this.params.colDef.field as string;
-    if (!params.data || typeof params.data !== 'object' || !(field in params.data)) {
-      return false;
-    }
-
-    const cellValue = (params.data as Record<string, unknown>)[field];
-    if (typeof cellValue !== 'string') {
-      return false;
+    if (!p.data || typeof p.data !== 'object') {
+      return this.selectedValues.has(EMPTY_KEY);
     }
 
-    return this.selectedValues.has(cellValue);
+    const raw = (p.data as Record<string, unknown>)[field];
+    const norm = this.normalizeCellValue(raw);
+    return this.selectedValues.has(norm);
   }
 
   getModel(): CheckboxMultiFilterModel | null {
@@ -185,6 +190,6 @@ export const createCheckboxMultiFilterParams = (
   labels: Record<string, string> = {},
   labelFormatter?: (value: string) => string,
 ): Partial<CheckboxMultiFilterParams> => ({
-  labels,
+  labels: { [EMPTY_KEY]: DEFAULT_EMPTY_LABEL, ...labels },
   labelFormatter,
 });

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

@@ -60,6 +60,7 @@ const GridFilterColumnsMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (pr
         filterParams: createCheckboxMultiFilterParams({
           Developer: 'FE Dev',
           Manager: 'Tech Manager',
+          __EMPTY__: 'None',
         }),
       }),
       GridCell({
@@ -81,7 +82,7 @@ const GridFilterColumnsMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (pr
     { id: 1001, position: 'Developer', age: 12, desc: 'Frontend developer' },
     { id: 1002, position: 'Manager', age: 65, desc: 'Technical Manager' },
     { id: 1003, position: 'Tester', age: 30, desc: 'E2E tester' },
-    { id: 1004, position: 'Developer', age: 12, desc: 'Fullstack Developer' },
+    { id: 1004, age: 12, desc: 'Fullstack Developer' },
     { id: 1005, position: 'Developer', age: 13, desc: 'Backend Developer' },
     { id: 1006, position: 'Architect', age: 30, desc: 'Architect' },
   ]);

package/src/styles/GridTheme.scss

@@ -144,7 +144,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   }
 
   .ag-icon-filter {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A292C'%3E%3Cpath d='M6 12.984v-1.969h12v1.969zM3 6h18v2.016H3zm6.984 12v-2.016h4.031V18z'/%3E%3C/svg%3E") !important;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007198'%3E%3Cpath d='M6 12.984v-1.969h12v1.969zM3 6h18v2.016H3zm6.984 12v-2.016h4.031V18z'/%3E%3C/svg%3E") !important;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
@@ -154,6 +154,12 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
       content: none !important;
     }
   }
+  
+  .ag-header-cell-filter-button.ag-has-popup-positioned-under .ag-icon-filter {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6 12.984v-1.969h12v1.969zM3 6h18v2.016H3zm6.984 12v-2.016h4.031V18z'/%3E%3C/svg%3E") !important;
+    background-color: #007198;
+    border-radius: 2px;
+  }
 
   .ag-header-group-cell {
     text-transform: uppercase;