@linzjs/step-ag-grid 29.11.4 → 29.12.0

package/dist/src/utils/__tests__/storybookTestUtil.ts

@@ -1,4 +1,31 @@
-import { expect, waitFor } from 'storybook/test';
+import { sortBy } from 'lodash-es';
+import { expect, userEvent, waitFor } from 'storybook/test';
+
+import { findQuick, getAllQuick } from './testQuick';
 
 export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
   waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });
+
+export const waitForGridRows = async (props?: { grid?: HTMLElement; timeout?: number }) =>
+  waitFor(() => expect(getAllQuick({ classes: '.ag-row' }, props?.grid).length > 0).toBe(true), {
+    timeout: props?.timeout ?? 4000,
+  });
+
+export const clickColumnHeaderToSort = async (colId: string, within: HTMLElement): Promise<void> => {
+  const user = userEvent.setup({
+    delay: 100,
+  });
+  const header = await findQuick({ selector: `.ag-header-cell[col-id="${colId}"]` }, within);
+  await expect(header).toBeInTheDocument();
+  // For some reason clicks in storybook don't trigger ag-grid, but manual clicks do
+  await user.click(header);
+  await user.keyboard('{Enter}');
+};
+
+export const gridColumnValues = (colId: string, within: HTMLElement): string[] => {
+  return sortBy(
+    getAllQuick({ tagName: `[col-id="${colId}"]`, classes: `.ag-cell` }, within),
+    // @ts-expect-error css style type
+    (el) => el.parentElement?.attributeStyleMap.get('transform')?.[0]?.y.value,
+  ).map((cell) => cell.innerText);
+};

package/dist/src/utils/__tests__/testQuick.ts

@@ -25,6 +25,7 @@ export interface IQueryQuick {
   role?: string;
   classes?: string;
   child?: IQueryQuick;
+  selector?: string;
 }
 
 const escapeSelectorParam = (param: string): string => param.replace(/["\\]/g, '\\$&');
@@ -51,6 +52,7 @@ const quickSelector = <T extends HTMLElement>(
   let lastIQueryQuick = props;
   for (let loop: IQueryQuick | undefined = props; loop; loop = loop.child) {
     lastIQueryQuick = loop;
+    loop.selector && (selector += loop.selector);
     loop.tagName && (selector += loop.tagName);
     loop.ariaLabel && (selector += `[aria-label='${escapeSelectorParam(loop.ariaLabel)}']`);
     loop.role && (selector += `[role="${escapeSelectorParam(loop.role)}"]`);

package/dist/src/utils/util.d.ts

@@ -6,3 +6,4 @@ export declare const hasParentClass: (className: string, child: Node) => boolean
 export declare const stringByteLengthIsInvalid: (str: string, maxBytes: number) => boolean;
 export declare const fnOrVar: (fn: any, param?: any) => any;
 export declare const sanitiseFileName: (filename: string) => string;
+export declare const compareNaturalInsensitive: (a?: object | string | number | null, b?: object | string | number | null) => number;

package/dist/step-ag-grid.cjs

@@ -592,6 +592,131 @@ const GridUpdatingContext = React.createContext({
     updatedDep: 0,
 });
 
+var lib = {};
+
+var hasRequiredLib;
+
+function requireLib () {
+	if (hasRequiredLib) return lib;
+	hasRequiredLib = 1;
+	Object.defineProperty(lib, "__esModule", { value: true });
+	function natsort(options) {
+	    if (options === void 0) { options = {}; }
+	    var ore = /^0/;
+	    var sre = /\s+/g;
+	    var tre = /^\s+|\s+$/g;
+	    // unicode
+	    var ure = /[^\x00-\x80]/;
+	    // hex
+	    var hre = /^0x[0-9a-f]+$/i;
+	    // numeric
+	    var nre = /(0x[\da-fA-F]+|(^[\+\-]?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?(?=\D|\s|$))|\d+)/g;
+	    // datetime
+	    var dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/; // tslint:disable-line
+	    var toLowerCase = String.prototype.toLocaleLowerCase || String.prototype.toLowerCase;
+	    var GREATER = options.desc ? -1 : 1;
+	    var SMALLER = -GREATER;
+	    var normalize = options.insensitive
+	        ? function (s) { return toLowerCase.call("" + s).replace(tre, ''); }
+	        : function (s) { return ("" + s).replace(tre, ''); };
+	    function tokenize(s) {
+	        return s.replace(nre, '\0$1\0')
+	            .replace(/\0$/, '')
+	            .replace(/^\0/, '')
+	            .split('\0');
+	    }
+	    function parse(s, l) {
+	        // normalize spaces; find floats not starting with '0',
+	        // string or 0 if not defined (Clint Priest)
+	        return (!s.match(ore) || l === 1)
+	            && parseFloat(s)
+	            || s.replace(sre, ' ').replace(tre, '')
+	            || 0;
+	    }
+	    return function (a, b) {
+	        // trim pre-post whitespace
+	        var aa = normalize(a);
+	        var bb = normalize(b);
+	        // return immediately if at least one of the values is empty.
+	        // empty string < any others
+	        if (!aa && !bb) {
+	            return 0;
+	        }
+	        if (!aa && bb) {
+	            return SMALLER;
+	        }
+	        if (aa && !bb) {
+	            return GREATER;
+	        }
+	        // tokenize: split numeric strings and default strings
+	        var aArr = tokenize(aa);
+	        var bArr = tokenize(bb);
+	        // hex or date detection
+	        var aHex = aa.match(hre);
+	        var bHex = bb.match(hre);
+	        var av = (aHex && bHex) ? parseInt(aHex[0], 16) : (aArr.length !== 1 && Date.parse(aa));
+	        var bv = (aHex && bHex)
+	            ? parseInt(bHex[0], 16)
+	            : av && bb.match(dre) && Date.parse(bb) || null;
+	        // try and sort Hex codes or Dates
+	        if (bv) {
+	            if (av === bv) {
+	                return 0;
+	            }
+	            if (av < bv) {
+	                return SMALLER;
+	            }
+	            if (av > bv) {
+	                return GREATER;
+	            }
+	        }
+	        var al = aArr.length;
+	        var bl = bArr.length;
+	        // handle numeric strings and default strings
+	        for (var i = 0, l = Math.max(al, bl); i < l; i += 1) {
+	            var af = parse(aArr[i] || '', al);
+	            var bf = parse(bArr[i] || '', bl);
+	            // handle numeric vs string comparison.
+	            // numeric < string
+	            if (isNaN(af) !== isNaN(bf)) {
+	                return isNaN(af) ? GREATER : SMALLER;
+	            }
+	            // if unicode use locale comparison
+	            if (ure.test(af + bf) && af.localeCompare) {
+	                var comp = af.localeCompare(bf);
+	                if (comp > 0) {
+	                    return GREATER;
+	                }
+	                if (comp < 0) {
+	                    return SMALLER;
+	                }
+	                if (i === l - 1) {
+	                    return 0;
+	                }
+	            }
+	            if (af < bf) {
+	                return SMALLER;
+	            }
+	            if (af > bf) {
+	                return GREATER;
+	            }
+	            if ("" + af < "" + bf) {
+	                return SMALLER;
+	            }
+	            if ("" + af > "" + bf) {
+	                return GREATER;
+	            }
+	        }
+	        return 0;
+	    };
+	}
+	lib.default = natsort;
+	return lib;
+}
+
+var libExports = requireLib();
+var natsort = /*@__PURE__*/getDefaultExportFromCjs(libExports);
+
 const isNotEmpty = lodashEs.negate(lodashEs.isEmpty);
 const wait = (timeoutMs) => new Promise((resolve) => {
     setTimeout(resolve, timeoutMs);
@@ -643,6 +768,20 @@ const sanitiseFileName = (filename) => {
         return valid.slice().slice(0, 64);
     return valid.slice(0, -fileExt.length - 1).slice(0, 64) + '.' + fileExt;
 };
+const naturalSortInsensitive = natsort({ insensitive: true });
+const santitizeNaturalValue = (v) => {
+    if (v === '–' || v === '-' || v == null) {
+        return '';
+    }
+    return String(v);
+};
+const compareNaturalInsensitive = (a, b) => {
+    if ((a !== null && typeof a === 'object') || (b !== null && typeof b === 'object')) {
+        // We can't compare objects
+        return 0;
+    }
+    return naturalSortInsensitive(santitizeNaturalValue(a), santitizeNaturalValue(b));
+};
 
 /**
  * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
@@ -3126,18 +3265,48 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         });
         const adjustColDef = (colDef) => {
             const flex = colDef.flex ?? (sizeColumns === 'fit' ? 1 : undefined);
-            return {
+            const valueFormatter = colDef.valueFormatter;
+            const sortable = colDef.sortable && params.defaultColDef?.sortable !== false;
+            let comparator = colDef.comparator;
+            if (sortable && !comparator) {
+                comparator = (value1, value2, node1, node2) => {
+                    let r = 0;
+                    if (typeof valueFormatter === 'function') {
+                        r = compareNaturalInsensitive(valueFormatter({
+                            data: node1.data,
+                            value: value1,
+                            node: node1,
+                            colDef: adjustedColDef,
+                            ...NotAGridValueFormatterCall,
+                        }), valueFormatter({
+                            data: node2.data,
+                            value: value2,
+                            node: node2,
+                            colDef: adjustedColDef,
+                            ...NotAGridValueFormatterCall,
+                        }));
+                    }
+                    else {
+                        r = compareNaturalInsensitive(value1, value2);
+                    }
+                    // secondary compare as primary sort column rows are equal
+                    return r === 0 ? compareNaturalInsensitive(node1.data?.id, node2.data?.id) : r;
+                };
+            }
+            const adjustedColDef = {
                 ...colDef,
                 // You cannot pass a width to a flex
                 width: !!colDef.flex ? undefined : colDef.width,
-                flexAutoSizeWidth: colDef.width,
+                ...(!!colDef.flex && { flexAutoSizeWidth: colDef.width }),
                 // If this is allowed flex columns don't size based on flex
                 suppressSizeToFit: true,
                 // Auto-sizing flex columns breaks everything
                 flex,
                 suppressAutoSize: !!flex,
-                sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
+                sortable,
+                comparator,
             };
+            return adjustedColDef;
         };
         return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
     }, [columnDefs, params.defaultColDef?.sortable, sizeColumns]);
@@ -3380,6 +3549,15 @@ const quickFilterParser = (filterStr) => {
     // filter is exact matches exactly groups separated by commas
     return filterStr.split(',').map((str) => str.trim());
 };
+/**
+ * Columns to indicate to user when they debug why things are broken in the default comparator if their valueFormatter
+ * is too complicated.
+ */
+const NotAGridValueFormatterCall = {
+    column: 'Default comparator has no access to column, write your own comparator',
+    api: 'Default comparator has no access to api, write your own comparator',
+    context: 'Default comparator has no access to context, write your own comparator',
+};
 
 const GridPopoverContext = React.createContext({
     anchorRef: { current: null },
@@ -5642,47 +5820,53 @@ const GridContextProvider = (props) => {
         if (!gridApi || !gridApi.getColumnState()) {
             return null;
         }
-        const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
-        const getVisibleColStates = () => {
-            const colStates = gridApi.getColumnState();
-            return colStates.filter((colState) => {
-                const colId = colState.colId;
-                return (lodashEs.isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
+        try {
+            const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
+            const getVisibleColStates = () => {
+                const colStates = gridApi.getColumnState();
+                return colStates.filter((colState) => {
+                    const colId = colState.colId;
+                    return (lodashEs.isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
+                });
+            };
+            const getFlexColStates = () => getVisibleColStates().filter(colStateFlexed);
+            const getNonFlexColStates = () => getVisibleColStates().filter(colStateNotFlexed);
+            // You cannot autosize flex columns it will break layout randomly
+            // So, a flex column is assumed to be 150 wide, unless width is provided
+            const flexColumns = getFlexColStates().map(colStateId);
+            let width = 0;
+            flexColumns.forEach((colId) => {
+                const colDef = gridApi.getColumnDef(colId);
+                width += colDef?.flexAutoSizeWidth ?? 200;
             });
-        };
-        const getFlexColStates = () => getVisibleColStates().filter(colStateFlexed);
-        const getNonFlexColStates = () => getVisibleColStates().filter(colStateNotFlexed);
-        // You cannot autosize flex columns it will break layout randomly
-        // So, a flex column is assumed to be 150 wide, unless width is provided
-        const flexColumns = getFlexColStates().map(colStateId);
-        let width = 0;
-        flexColumns.forEach((colId) => {
-            const colDef = gridApi.getColumnDef(colId);
-            width += colDef?.flexAutoSizeWidth ?? 200;
-        });
-        const nonFlexColumns = getNonFlexColStates();
-        const nonFlexColumnIds = nonFlexColumns.map(colStateId);
-        gridApi.autoSizeColumns({ colIds: nonFlexColumnIds, skipHeader });
-        const calcSubWidth = () => {
-            const updatedFlexColumns = getVisibleColStates().filter((colState) => nonFlexColumnIds.includes(colState.colId));
-            return lodashEs.sumBy(updatedFlexColumns.filter((col) => !col.hide), 'width');
-        };
-        // ag-grid updates widths asynchronously, so we wait here for the default calculated width to change
-        let lastSubWidth = calcSubWidth();
-        const endTime = Date.now() + 1000;
-        while (Date.now() < endTime) {
-            await wait(40);
-            const newSubWidth = calcSubWidth();
-            if (lastSubWidth !== newSubWidth) {
-                lastSubWidth = newSubWidth;
-                break;
+            const nonFlexColumns = getNonFlexColStates();
+            const nonFlexColumnIds = nonFlexColumns.map(colStateId);
+            gridApi.autoSizeColumns({ colIds: nonFlexColumnIds, skipHeader });
+            const calcSubWidth = () => {
+                const updatedFlexColumns = getVisibleColStates().filter((colState) => nonFlexColumnIds.includes(colState.colId));
+                return lodashEs.sumBy(updatedFlexColumns.filter((col) => !col.hide), 'width');
+            };
+            // ag-grid updates widths asynchronously, so we wait here for the default calculated width to change
+            let lastSubWidth = calcSubWidth();
+            const endTime = Date.now() + 1000;
+            while (Date.now() < endTime) {
+                await wait(40);
+                const newSubWidth = calcSubWidth();
+                if (lastSubWidth !== newSubWidth) {
+                    lastSubWidth = newSubWidth;
+                    break;
+                }
             }
+            width += lastSubWidth;
+            gridApi.sizeColumnsToFit();
+            return {
+                width,
+            };
+        }
+        catch (ex) {
+            console.info('autosize failed', ex);
+            return null;
         }
-        width += lastSubWidth;
-        gridApi.sizeColumnsToFit();
-        return {
-            width,
-        };
     }, [gridApi]);
     /**
      * Resize columns to fit container
@@ -6249,6 +6433,7 @@ exports.bearingValueFormatter = bearingValueFormatter;
 exports.colStateFlexed = colStateFlexed;
 exports.colStateId = colStateId;
 exports.colStateNotFlexed = colStateNotFlexed;
+exports.compareNaturalInsensitive = compareNaturalInsensitive;
 exports.convertDDToDMS = convertDDToDMS;
 exports.createCheckboxMultiFilterParams = createCheckboxMultiFilterParams;
 exports.defaultValueFormatter = defaultValueFormatter;