@linzjs/step-ag-grid 28.4.0 → 28.4.2

package/dist/index.css

@@ -439,6 +439,11 @@ div.ag-ltr div.ag-header-cell-resize {
   right: -4px;
 }
 
+.step-ag-grid__alert-icon {
+  max-width: 34px;
+  width: 34px;
+}
+
 .GridCell-container {
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/src/components/GridCell.d.ts

@@ -1,5 +1,5 @@
-import { ColDef, EditableCallback, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
-import { SuppressKeyboardEventParams, ValueFormatterFunc, ValueGetterFunc } from 'ag-grid-community';
+import { ColDef, EditableCallback, GetQuickFilterTextParams, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
+import { SuppressKeyboardEventParams, ValueFormatterFunc, ValueFormatterParams, ValueGetterFunc } from 'ag-grid-community';
 import { ReactElement } from 'react';
 import { GridBaseRow } from './Grid';
 import { GenericCellColDef } from './gridRender';
@@ -25,7 +25,8 @@ export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends Col
     editor?: (editorProps: any) => ReactElement;
 }
 export declare const suppressCellKeyboardEvents: (e: SuppressKeyboardEventParams) => any;
-export declare 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;
+export declare const generateFilterGetter: <TData extends GridBaseRow, ValueType>(valueFormatter: string | ValueFormatterFunc<TData, ValueType> | undefined) => string | ((params: GetQuickFilterTextParams<TData, ValueType>) => string) | undefined;
+export declare const defaultValueFormatter: ({ value }: ValueFormatterParams) => string;
 export declare const GridCell: <TData extends GridBaseRow, TValue = any, Props extends CellEditorCommon = any>(props: GenericCellColDef<TData, TValue>, custom?: {
     multiEdit?: boolean;
     preventAutoEdit?: boolean;

package/dist/step-ag-grid.cjs

@@ -3331,7 +3331,7 @@ const GridCellMultiSelectClassRules = {
     },
 };
 
-const GridIcon = (props) => (jsxRuntime.jsx(lui.LuiIcon, { name: props.icon, title: props.title, alt: props.title, size: props.size ?? 'md', className: clsx(`AgGridGenericCellRenderer-${props.icon}Icon`, props.className, props.disabled && 'GridIcon-disabled') }));
+const GridIcon = (props) => (jsxRuntime.jsx(lui.LuiIcon, { name: props.icon, title: props.title, alt: props.title, size: props.size ?? 'md', className: clsx(`step-ag-grid__alert-icon`, `AgGridGenericCellRenderer-${props.icon}Icon`, props.className, props.disabled && 'GridIcon-disabled') }));
 
 const GridLoadableCell = () => (jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 22, divProps: { className: 'GridLoadableCell-container', role: 'status', 'aria-label': 'Loading' } }));
 
@@ -3343,11 +3343,13 @@ const GridCellRenderer = (props) => {
     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))
+    if (Array.isArray(warningText)) {
         warningText = warningText.join('\n');
-    if (Array.isArray(infoText))
+    }
+    if (Array.isArray(infoText)) {
         infoText = infoText.join('\n');
-    return checkUpdating(colDef.field ?? colDef.colId ?? '', props.data.id) ? (jsxRuntime.jsx(GridLoadableCell, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!warningText && (jsxRuntime.jsx(GridIcon, { icon: 'ic_warning_outline', title: typeof warningText === 'string' ? warningText : 'Warning' })), !!infoText && jsxRuntime.jsx(GridIcon, { icon: 'ic_info_outline', title: typeof infoText === 'string' ? infoText : 'Info' }), jsxRuntime.jsx("div", { className: 'GridCell-container', children: colDef.cellRendererParams?.originalCellRenderer ? (jsxRuntime.jsx(colDef.cellRendererParams.originalCellRenderer, { ...props })) : (jsxRuntime.jsx("span", { title: props.valueFormatted ?? undefined, children: props.valueFormatted })) }), fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (jsxRuntime.jsx("div", { className: 'GridCell-hoverRight', children: rendererParams?.rightHoverElement }))] }));
+    }
+    return checkUpdating(colDef.field ?? colDef.colId ?? '', props.data.id) ? (jsxRuntime.jsx(GridLoadableCell, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!warningText && (jsxRuntime.jsx(GridIcon, { icon: 'ic_warning_outline', title: typeof warningText === 'string' ? warningText : 'Warning' })), !!infoText && jsxRuntime.jsx(GridIcon, { icon: 'ic_info_outline', title: typeof infoText === 'string' ? infoText : 'Info' }), jsxRuntime.jsx("div", { className: 'GridCell-container', children: colDef.cellRendererParams?.originalCellRenderer ? (jsxRuntime.jsx(colDef.cellRendererParams.originalCellRenderer, { ...props })) : (jsxRuntime.jsx("span", { title: props.valueFormatted ?? undefined, children: props.valueFormatted || '–' })) }), fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (jsxRuntime.jsx("div", { className: 'GridCell-hoverRight', children: rendererParams?.rightHoverElement }))] }));
 };
 const suppressCellKeyboardEvents = (e) => {
     const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
@@ -3360,24 +3362,21 @@ const suppressCellKeyboardEvents = (e) => {
     // as the incorrect selected rows will be returned
     return !['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp', 'Tab', ' ', 'Home', 'End', 'PageUp', 'PageDown'].includes(e.event.key);
 };
-const generateFilterGetter = (field, filterValueGetter, valueFormatter) => {
-    if (filterValueGetter)
-        return filterValueGetter;
+const generateFilterGetter = (valueFormatter) => {
     // aggrid will default to valueGetter
-    if (typeof valueFormatter !== 'function' || !field)
+    if (typeof valueFormatter !== 'function') {
         return undefined;
-    return (params) => {
-        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) => valueFormatter(params);
+};
+const stringableValueFormatterTypes = ['number', 'boolean', 'string'];
+const defaultValueFormatter = ({ value }) => {
+    if (value == null) {
+        return '–';
+    }
+    return stringableValueFormatterTypes.includes(typeof value) //
+        ? String(value)
+        : JSON.stringify(value);
 };
 /*
  * All cells should use this.
@@ -3387,16 +3386,17 @@ const GridCell = (props, custom) => {
     // 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, valueFormatter);
+    const filterValueGetter = props.filterValueGetter ?? generateFilterGetter(valueFormatter);
     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 && {
@@ -3413,18 +3413,9 @@ const GridCell = (props, custom) => {
             },
         }),
         // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
-        // FIXME
-        filterValueGetter: filterValueGetter,
+        getQuickFilterText: filterValueGetter,
         // Default value formatter, otherwise react freaks out on objects
-        valueFormatter: (params) => {
-            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: {
@@ -5936,6 +5927,7 @@ exports.bearingRangeValidator = bearingRangeValidator;
 exports.bearingStringValidator = bearingStringValidator;
 exports.bearingValueFormatter = bearingValueFormatter;
 exports.convertDDToDMS = convertDDToDMS;
+exports.defaultValueFormatter = defaultValueFormatter;
 exports.downloadCsvUseValueFormattersProcessCellCallback = downloadCsvUseValueFormattersProcessCellCallback;
 exports.findParentWithClass = findParentWithClass;
 exports.fnOrVar = fnOrVar;