@linzjs/step-ag-grid 29.11.3 → 29.12.0

package/dist/src/contexts/GridContext.d.ts

@@ -38,7 +38,7 @@ export interface GridContextType<TData extends GridBaseRow> {
     ensureRowVisible: (id: number | string) => boolean;
     ensureSelectedRowIsVisible: () => void;
     getFirstRowId: () => number;
-    autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
+    autoSizeColumns: (props?: AutoSizeColumnsProps) => Promise<AutoSizeColumnsResult>;
     sizeColumnsToFit: (paramsOrGridWidth?: ISizeColumnsToFitParams) => void;
     startCellEditing: ({ rowId, colId }: StartCellEditingProps) => Promise<void>;
     resetFocusedCellAfterCellEditing: () => void;

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

@@ -509,9 +509,9 @@ const GridContext = React.createContext({
         console.error('no context provider for getFirstRowId');
         return -1;
     },
-    autoSizeColumns: () => {
+    autoSizeColumns: async () => {
         console.error('no context provider for autoSizeColumns');
-        return null;
+        return Promise.resolve(null);
     },
     sizeColumnsToFit: () => {
         console.error('no context provider for autoSizeAllColumns');
@@ -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.
@@ -2787,66 +2926,77 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const needsAutoSize = React.useRef(true);
     const autoSizeResultRef = React.useRef(null);
     const prevRowsVisibleRef = React.useRef(false);
-    const setInitialContentSize = React.useCallback(() => {
-        if (!gridDivRef.current?.clientWidth || rowData == null) {
-            // Don't resize grids if they are offscreen as it doesn't work.
-            needsAutoSize.current = true;
-            return;
-        }
-        const gridRendered = gridRenderState();
-        if (gridRendered === null) {
-            // Don't resize until grid has rendered, or it has 0 rows.
-            needsAutoSize.current = true;
+    const initialContentSizeInProgressRef = React.useRef(false);
+    const setInitialContentSize = React.useCallback(async () => {
+        if (initialContentSizeInProgressRef.current) {
             return;
         }
-        // 1. First we autosize to get the size of the columns on an infinite grid.
-        if (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') {
-            // You can't skip headers until the grid has content
-            const rowsVisible = gridRendered === 'rows-visible';
-            const skipHeader = sizeColumns === 'auto-skip-headers' && rowsVisible;
-            // If grid was empty and now has content we need to autosize
-            if (rowsVisible !== prevRowsVisibleRef.current && rowsVisible) {
-                prevRowsVisibleRef.current = rowsVisible;
-                autoSizeResultRef.current = null;
+        initialContentSizeInProgressRef.current = true;
+        try {
+            needsAutoSize.current = false;
+            if (!gridDivRef.current?.clientWidth || rowData == null) {
+                // Don't resize grids if they are offscreen as it doesn't work.
+                needsAutoSize.current = true;
+                return;
             }
-            const autoSizeResult = autoSizeResultRef.current ??
-                autoSizeColumns({
-                    skipHeader,
-                    userSizedColIds: new Set(userSizedColIds.current.keys()),
-                });
-            // Auto-size failed retry later
-            if (!autoSizeResult) {
+            const gridRendered = gridRenderState();
+            if (gridRendered === null) {
+                // Don't resize until grid has rendered, or it has 0 rows.
                 needsAutoSize.current = true;
                 return;
             }
-            autoSizeResultRef.current = autoSizeResult;
-            // Calculate the auto-sized width, limit it to maxInitialWidth
-            autoSizeResult.width = maxInitialWidth ? Math.min(autoSizeResult.width, maxInitialWidth) : autoSizeResult.width;
-            if (gridRendered === 'empty') {
-                // If the grid is empty we still do an onContentSize callback, we will do another callback when grid has data
-                // We don't do this callback if we have previously had row data, or have already called back for empty
-                if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
-                    hasSetContentSizeEmpty.current = true;
-                    params.onContentSize?.(autoSizeResult);
+            // 1. First we autosize to get the size of the columns on an infinite grid.
+            if (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') {
+                // You can't skip headers until the grid has content
+                const rowsVisible = gridRendered === 'rows-visible';
+                const skipHeader = sizeColumns === 'auto-skip-headers' && rowsVisible;
+                // If grid was empty and now has content we need to autosize
+                if (rowsVisible !== prevRowsVisibleRef.current && rowsVisible) {
+                    prevRowsVisibleRef.current = rowsVisible;
+                    autoSizeResultRef.current = null;
                 }
-            }
-            else if (gridRendered === 'rows-visible') {
-                // we have rows now so callback grid size
-                if (!hasSetContentSize.current) {
-                    hasSetContentSize.current = true;
-                    params.onContentSize?.(autoSizeResult);
+                const autoSizeResult = autoSizeResultRef.current ??
+                    (await autoSizeColumns({
+                        skipHeader,
+                        userSizedColIds: new Set(userSizedColIds.current.keys()),
+                    }));
+                // Auto-size failed retry later
+                if (!autoSizeResult) {
+                    needsAutoSize.current = true;
+                    return;
+                }
+                autoSizeResultRef.current = autoSizeResult;
+                // Calculate the auto-sized width, limit it to maxInitialWidth
+                autoSizeResult.width = maxInitialWidth ? Math.min(autoSizeResult.width, maxInitialWidth) : autoSizeResult.width;
+                if (gridRendered === 'empty') {
+                    // If the grid is empty we still do an onContentSize callback, we will do another callback when grid has data
+                    // We don't do this callback if we have previously had row data, or have already called back for empty
+                    if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
+                        hasSetContentSizeEmpty.current = true;
+                        params.onContentSize?.(autoSizeResult);
+                    }
+                }
+                else if (gridRendered === 'rows-visible') {
+                    // we have rows now so callback grid size
+                    if (!hasSetContentSize.current) {
+                        hasSetContentSize.current = true;
+                        params.onContentSize?.(autoSizeResult);
+                    }
+                }
+                else {
+                    // It should be impossible to get here
+                    console.error('Unknown value returned from hasGridRendered');
                 }
             }
             else {
-                // It should be impossible to get here
-                console.error('Unknown value returned from hasGridRendered');
+                sizeColumnsToFit();
             }
+            setAutoSized(true);
+            needsAutoSize.current = false;
         }
-        else {
-            sizeColumnsToFit();
+        finally {
+            initialContentSizeInProgressRef.current = false;
         }
-        setAutoSized(true);
-        needsAutoSize.current = false;
     }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns, sizeColumnsToFit]);
     const lastOwnerDocumentRef = React.useRef();
     const wasVisibleRef = React.useRef(false);
@@ -2880,8 +3030,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
         if (needsAutoSize.current ||
             (!hasSetContentSize.current && (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers'))) {
-            needsAutoSize.current = false;
-            setInitialContentSize();
+            void setInitialContentSize();
         }
     }, 200);
     /**
@@ -3010,11 +3159,13 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         if (previousRowDataLength.current !== length) {
             // We need to autosize all cells again
             autoSizeResultRef.current = null;
-            setInitialContentSize();
             previousRowDataLength.current = length;
+            void setInitialContentSize();
+            return;
         }
-        if (lastUpdatedDep.current === updatedDep || lodashEs.isEmpty(colIdsEdited.current))
+        if (lastUpdatedDep.current === updatedDep || lodashEs.isEmpty(colIdsEdited.current)) {
             return;
+        }
         lastUpdatedDep.current = updatedDep;
         // Don't update while there are spinners
         if (anyUpdating()) {
@@ -3022,7 +3173,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
         const skipHeader = sizeColumns === 'auto-skip-headers';
         if ((sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') && hasSetContentSize.current) {
-            autoSizeColumns({
+            void autoSizeColumns({
                 skipHeader,
                 userSizedColIds: new Set(userSizedColIds.current.keys()),
                 colIds: colIdsEdited.current,
@@ -3112,11 +3263,51 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             ...colDef,
             children: colDef.children.map((colDef) => adjustColDefOrGroup(colDef)),
         });
-        const adjustColDef = (colDef) => ({
-            ...colDef,
-            suppressSizeToFit: (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') && !colDef.flex,
-            sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
-        });
+        const adjustColDef = (colDef) => {
+            const flex = colDef.flex ?? (sizeColumns === 'fit' ? 1 : undefined);
+            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,
+                ...(!!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,
+                comparator,
+            };
+            return adjustedColDef;
+        };
         return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
     }, [columnDefs, params.defaultColDef?.sortable, sizeColumns]);
     /**
@@ -3141,7 +3332,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 if (sizeColumns === 'auto' || skipHeader) {
                     lodashEs.defer(() => {
                         if (hasSetContentSize.current) {
-                            autoSizeColumns({
+                            void autoSizeColumns({
                                 skipHeader,
                                 userSizedColIds: new Set(userSizedColIds.current.keys()),
                                 colIds: colIdsEdited.current,
@@ -3296,7 +3487,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     }, [columnDefs, params.loading, params.noRowsMatchingOverlayText, params.noRowsOverlayText, rowData, rowHeight]);
     const selectionColumnDef = React.useMemo(() => {
         // Note this has to be 1 for hidden otherwise ag-grid does crazy things whilst resizing
-        const selectWidth = params.hideSelectColumn ? 0 : selectable && params.onRowDragEnd ? 76 : 48;
+        const selectWidth = params.onRowDragEnd ? 76 : 48;
         return {
             suppressNavigable: params.hideSelectColumn,
             rowDrag: !!params.onRowDragEnd,
@@ -3306,6 +3497,8 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             headerComponentParams: {
                 exportable: false,
             },
+            suppressAutoSize: true,
+            suppressSizeToFit: true,
             headerClass: clsx('ag-header-hide-default-select', params.onRowDragEnd && 'ag-header-select-draggable'),
             headerComponent: rowSelection == 'multiple' ? GridHeaderSelect : undefined,
             suppressHeaderKeyboardEvent: (e) => {
@@ -3336,7 +3529,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         selectable,
     ]);
     const onGridSizeChanged = React.useCallback((event) => {
-        if (sizeColumns === 'fit') {
+        if (sizeColumns === 'fit' || (['auto', 'auto-skip-headers'].includes(sizeColumns) && hasSetContentSize.current)) {
             event.api.sizeColumnsToFit();
         }
     }, [sizeColumns]);
@@ -3345,13 +3538,26 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                             enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                             enableClickSelection: params.enableClickSelection ?? false,
                             mode: rowSelection === 'single' ? 'singleRow' : 'multiRow',
+                            ...(params.hideSelectColumn && {
+                                checkboxes: false,
+                                headerCheckbox: false,
+                            }),
                         }
-                        : undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onGridSizeChanged: onGridSizeChanged, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataUpdated, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, selectionColumnDef: selectionColumnDef, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked, suppressStartEditOnTab: true }) })] }));
+                        : undefined, selectionColumnDef: selectionColumnDef, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onGridSizeChanged: onGridSizeChanged, onColumnVisible: () => void setInitialContentSize(), onRowDataUpdated: onRowDataUpdated, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked, suppressStartEditOnTab: true }) })] }));
 };
 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 },
@@ -5610,40 +5816,57 @@ const GridContextProvider = (props) => {
      * If you don't clear flex column widths ag-grid gets confused and does random sizing's.
      * Then we size the flexed columns.
      */
-    const autoSizeColumns = React.useCallback(({ skipHeader, colIds, userSizedColIds } = {}) => {
+    const autoSizeColumns = React.useCallback(async ({ skipHeader, colIds, userSizedColIds } = {}) => {
         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);
-        // If we don't reset the flex columns auto size it causes issues with random resizing of flex columns
-        let flexColumns = getFlexColStates();
-        let width = 0;
-        if (!lodashEs.isEmpty(flexColumns)) {
-            gridApi.autoSizeColumns(flexColumns.map(colStateId), skipHeader);
-            const flexColumnIds = flexColumns.map(colStateId);
-            flexColumns = getVisibleColStates().filter((colState) => flexColumnIds.includes(colState.colId));
-            width += lodashEs.sumBy(flexColumns.filter((col) => !col.hide), 'width');
-            gridApi.resetColumnState();
-        }
-        let nonFlexColumns = getNonFlexColStates();
-        if (!lodashEs.isEmpty(nonFlexColumns)) {
-            gridApi.autoSizeColumns(nonFlexColumns.map(colStateId), skipHeader);
+            const nonFlexColumns = getNonFlexColStates();
             const nonFlexColumnIds = nonFlexColumns.map(colStateId);
-            nonFlexColumns = getVisibleColStates().filter((colState) => nonFlexColumnIds.includes(colState.colId));
-            width += lodashEs.sumBy(nonFlexColumns.filter((col) => !col.hide), 'width');
+            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;
         }
-        return {
-            width,
-        };
     }, [gridApi]);
     /**
      * Resize columns to fit container
@@ -6210,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;