@linzjs/step-ag-grid 28.4.0 → 28.4.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "28.4.0",
+  "version": "28.4.2",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -24,7 +24,7 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
@@ -47,7 +47,7 @@
     "clean": "rimraf dist && mkdirp ./dist",
     "bundle": "rollup -c",
     "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
-    "test": "vitest run",
+    "test": "cross-env NODE_OPTIONS='--no-experimental-global-navigator' vitest run",
     "test:watch": "vitest --watch",
     "lint": "eslint ./src --ext .js,.ts,.tsx --cache --ignore-path .gitignore",
     "lint:fix": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
@@ -81,7 +81,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.1",
-    "@linzjs/lui": "^23.7.2",
+    "@linzjs/lui": "^23.11.1",
     "@linzjs/style": "^5.4.0",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
@@ -95,6 +95,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/debounce-promise": "^3.1.9",
+    "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.17.0",
     "@types/react": "^18.3.23",
@@ -105,7 +106,9 @@
     "ag-grid-community": "^34.1.0",
     "ag-grid-react": "^34.1.0",
     "babel-preset-react-app": "^10.1.0",
+    "canvas": "^3.2.0",
     "chromatic": "^13.1.3",
+    "cross-env": "^10.0.0",
     "css-loader": "^7.1.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-storybook": "^9.1.0",
@@ -135,8 +138,7 @@
     "vite": "^6.3.5",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4",
-    "vitest-canvas-mock": "^0.3.3"
+    "vitest": "^3.2.4"
   },
   "babel": {
     "presets": [

package/src/components/GridCell.test.tsx

@@ -1,35 +1,37 @@
-import { ValueGetterParams } from 'ag-grid-community';
 import { describe, expect, test } from 'vitest';
 
-import { GridBaseRow } from './Grid';
-import { generateFilterGetter } from './GridCell';
+import { defaultValueFormatter, generateFilterGetter } from './GridCell';
 
 describe('GridCell', () => {
-  test('generateFilterGetter returns passed filterValueGetter', () => {
-    const filterValueGetter = () => 'a';
-    expect(generateFilterGetter(undefined, filterValueGetter, () => 'b')).toBe(filterValueGetter);
-    expect(generateFilterGetter('xxx', filterValueGetter, undefined)).toBe(filterValueGetter);
-    expect(generateFilterGetter(undefined, filterValueGetter, undefined)).toBe(filterValueGetter);
+  test('defaultValueFormatter', () => {
+    expect(defaultValueFormatter({ value: null } as any)).toBe('–');
+    expect(defaultValueFormatter({ value: undefined } as any)).toBe('–');
+    expect(defaultValueFormatter({ value: 'a' } as any)).toBe('a');
+    expect(defaultValueFormatter({ value: 1 } as any)).toBe('1');
+    expect(defaultValueFormatter({ value: false } as any)).toBe('false');
+    expect(defaultValueFormatter({ value: { x: 1 } } as any)).toBe('{"x":1}');
   });
 
   test('generateFilterGetter', () => {
-    expect(generateFilterGetter('xxx', undefined, undefined)).toBeUndefined();
-
-    const tests = [
-      { formatted: 'f1', value: 'v1', expected: 'f1 v1' },
-      { formatted: 'f2', value: {}, expected: 'f2' },
-      { formatted: '', value: 'v3', expected: 'v3' },
-    ];
-
-    tests.forEach((test) => {
-      const field = 'xxx';
-      const valueFormatter = test.formatted == null ? undefined : () => test.formatted;
-      const filterGetter = generateFilterGetter(field, undefined, valueFormatter);
-      expect(typeof filterGetter).toBe('function');
-      if (typeof filterGetter !== 'function') return;
-      expect(filterGetter({ getValue: () => test.value } as unknown as ValueGetterParams<GridBaseRow>)).toBe(
-        test.expected,
-      );
+    expect(generateFilterGetter(undefined)).toBeUndefined();
+    expect(generateFilterGetter('x')).toBeUndefined();
+    const fn = generateFilterGetter((props) => {
+      return String(props.value);
     });
+    expect(fn).toBeTypeOf('function');
+    if (typeof fn !== 'function') {
+      return;
+    }
+    expect(
+      fn({
+        value: 'x',
+        colDef: { colId: 'col1' },
+        node: undefined!,
+        data: undefined!,
+        column: undefined!,
+        api: undefined!,
+        context: undefined,
+      }),
+    ).toBe('x');
   });
 });

package/src/components/GridCell.tsx

@@ -1,10 +1,15 @@
-import { ColDef, EditableCallback, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
+import {
+  ColDef,
+  EditableCallback,
+  GetQuickFilterTextParams,
+  ICellEditorParams,
+  ICellRendererParams,
+} from 'ag-grid-community';
 import {
   SuppressKeyboardEventParams,
   ValueFormatterFunc,
   ValueFormatterParams,
   ValueGetterFunc,
-  ValueGetterParams,
 } from 'ag-grid-community';
 import { forwardRef, ReactElement, useContext } from 'react';
 
@@ -32,8 +37,12 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   let warningText = props.data !== undefined && warningFn ? warningFn(props) : undefined;
   const infoFn = rendererParams?.info;
   let infoText = props.data !== undefined && infoFn ? infoFn(props) : undefined;
-  if (Array.isArray(warningText)) warningText = warningText.join('\n');
-  if (Array.isArray(infoText)) infoText = infoText.join('\n');
+  if (Array.isArray(warningText)) {
+    warningText = warningText.join('\n');
+  }
+  if (Array.isArray(infoText)) {
+    infoText = infoText.join('\n');
+  }
 
   return checkUpdating(colDef.field ?? colDef.colId ?? '', props.data.id) ? (
     <GridLoadableCell />
@@ -47,7 +56,7 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
         {colDef.cellRendererParams?.originalCellRenderer ? (
           <colDef.cellRendererParams.originalCellRenderer {...props} />
         ) : (
-          <span title={props.valueFormatted ?? undefined}>{props.valueFormatted}</span>
+          <span title={props.valueFormatted ?? undefined}>{props.valueFormatted || '–'}</span>
         )}
       </div>
       {fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (
@@ -91,25 +100,24 @@ export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
 };
 
 export const generateFilterGetter = <TData extends GridBaseRow, ValueType>(
-  field: string | undefined,
-  filterValueGetter: string | ValueGetterFunc<TData, ValueType> | undefined,
   valueFormatter: string | ValueFormatterFunc<TData, ValueType> | undefined,
-): string | ValueGetterFunc<TData, ValueType> | undefined => {
-  if (filterValueGetter) return filterValueGetter;
+): string | ((params: GetQuickFilterTextParams<TData, ValueType>) => string) | undefined => {
   // aggrid will default to valueGetter
-  if (typeof valueFormatter !== 'function' || !field) return undefined;
+  if (typeof valueFormatter !== 'function') {
+    return undefined;
+  }
 
-  return (params: ValueGetterParams<TData, ValueType>): any => {
-    const value = params.getValue(field);
-    let formattedValue = valueFormatter({ ...params, value });
-    // Search for null values using standard dash
-    if (formattedValue === '–') formattedValue += ' -';
-    // Search by raw value as well as formatted
-    const gotValue = ['string', 'number'].includes(typeof value) ? value : undefined;
-    return (formattedValue + (gotValue != null && formattedValue != gotValue ? ' ' + gotValue : '')) //
-      .replace(/\s+/g, ' ')
-      .trim();
-  };
+  return (params: GetQuickFilterTextParams<TData, ValueType>) => valueFormatter(params);
+};
+
+const stringableValueFormatterTypes = ['number', 'boolean', 'string'];
+export const defaultValueFormatter = ({ value }: ValueFormatterParams) => {
+  if (value == null) {
+    return '–';
+  }
+  return stringableValueFormatterTypes.includes(typeof value) //
+    ? String(value)
+    : JSON.stringify(value);
 };
 
 /*
@@ -128,17 +136,18 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
   // Generate a default filter value getter which uses the formatted value plus
   // the editable value if it's a string and different from the formatted value.
   // This is so that e.g. bearings can be searched for by DMS or raw number.
-  const valueFormatter = props.valueFormatter;
+  const valueFormatter = props.valueFormatter ?? defaultValueFormatter;
   // FIXME
-  const filterValueGetter = generateFilterGetter(props.field, props.filterValueGetter as any, valueFormatter as any);
+  const filterValueGetter = props.filterValueGetter ?? generateFilterGetter(valueFormatter as any);
   const exportable = props.exportable;
   // Can't leave this here ag-grid will complain
   delete props.exportable;
 
   return {
-    colId: props.field ?? props.field,
+    // Will be overridden if specified later
+    colId: props.field,
     headerTooltip: props.headerName,
-    sortable: !!(props?.field || props?.valueGetter),
+    sortable: true,
     resizable: true,
     editable: props.editable ?? false,
     ...(custom?.editor && {
@@ -155,15 +164,9 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
       },
     }),
     // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
-    // FIXME
-    filterValueGetter: filterValueGetter as any,
+    getQuickFilterText: filterValueGetter as any,
     // Default value formatter, otherwise react freaks out on objects
-    valueFormatter: (params: ValueFormatterParams) => {
-      if (params.value == null) return '–';
-      const types = ['number', 'boolean', 'string'];
-      if (types.includes(typeof params.value)) return `${params.value}`;
-      else return JSON.stringify(params.value);
-    },
+    valueFormatter,
     ...props,
     cellRenderer: typeof props.cellRenderer === 'string' ? props.cellRenderer : GridCellRenderer,
     cellRendererParams: {

package/src/components/GridIcon.tsx

@@ -16,6 +16,7 @@ export const GridIcon = (props: {
     alt={props.title}
     size={props.size ?? 'md'}
     className={clsx(
+      `step-ag-grid__alert-icon`,
       `AgGridGenericCellRenderer-${props.icon}Icon`,
       props.className,
       props.disabled && 'GridIcon-disabled',

package/src/styles/Grid.scss

@@ -139,3 +139,8 @@
 div.ag-ltr div.ag-header-cell-resize {
   right: -4px;
 }
+
+.step-ag-grid__alert-icon {
+  max-width: 34px;
+  width: 34px;
+}