@linzjs/step-ag-grid 29.11.0 → 29.11.1

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

@@ -6,7 +6,6 @@ export interface AutoSizeColumnsProps {
     skipHeader?: boolean;
     colIds?: Set<string> | string[];
     userSizedColIds?: Set<string>;
-    includeFlex?: boolean;
 }
 export type AutoSizeColumnsResult = {
     width: number;

package/dist/step-ag-grid.cjs

@@ -2814,7 +2814,6 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 autoSizeColumns({
                     skipHeader,
                     userSizedColIds: new Set(userSizedColIds.current.keys()),
-                    includeFlex: true,
                 });
             // Auto-size failed retry later
             if (!autoSizeResult) {
@@ -5346,6 +5345,8 @@ const waitForCondition = async (error, condition, timeoutMs) => {
     return false;
 };
 
+const colStateId = (colState) => colState.colId;
+const colStateFlexed = (colState) => !!colState.flex;
 /**
  * Context for AgGrid operations.
  * Make sure you wrap AgGrid in this.
@@ -5627,20 +5628,30 @@ const GridContextProvider = (props) => {
     }, [gridApiOp]);
     /**
      * Resize columns to fit container
+     *
+     * This is used to calculate the preferred size of columns.
+     * It sizes the flex columns first and then clears the calculated width.
+     * 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, includeFlex } = {}) => {
+    const autoSizeColumns = React.useCallback(({ skipHeader, colIds, userSizedColIds } = {}) => {
         if (!gridApi || !gridApi.getColumnState()) {
             return null;
         }
         const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
-        const colsToResize = gridApi.getColumnState()?.filter?.((colState) => {
+        const colStates = gridApi.getColumnState();
+        const relevantCols = colStates?.filter((colState) => {
             const colId = colState.colId;
-            return ((lodashEs.isEmpty(colIdsSet) || colIdsSet.has(colId)) &&
-                !userSizedColIds?.has(colId) &&
-                (includeFlex || !colState.flex));
+            return (lodashEs.isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
         });
-        if (!lodashEs.isEmpty(colsToResize)) {
-            gridApi.autoSizeColumns(colsToResize.map((colState) => colState.colId), skipHeader);
+        const [flexColumns, nonFlexColumns] = lodashEs.partition(relevantCols, colStateFlexed);
+        // If we don't reset the flex columns auto size it causes issues with random resizing of flex columns
+        if (!lodashEs.isEmpty(flexColumns)) {
+            gridApi.autoSizeColumns(flexColumns.map(colStateId), skipHeader);
+            gridApi.resetColumnState();
+        }
+        if (!lodashEs.isEmpty(nonFlexColumns)) {
+            gridApi.autoSizeColumns(nonFlexColumns.map(colStateId), skipHeader);
         }
         return {
             width: lodashEs.sumBy(gridApi.getColumnState().filter((col) => !col.hide), 'width'),