@linzjs/step-ag-grid 29.10.0 → 29.11.1

package/dist/GridTheme.scss

@@ -144,7 +144,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   }
 
   .ag-icon-filter {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A292C'%3E%3Cpath d='M6 12.984v-1.969h12v1.969zM3 6h18v2.016H3zm6.984 12v-2.016h4.031V18z'/%3E%3C/svg%3E") !important;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007198'%3E%3Cpath d='M6 12.984v-1.969h12v1.969zM3 6h18v2.016H3zm6.984 12v-2.016h4.031V18z'/%3E%3C/svg%3E") !important;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
@@ -154,6 +154,12 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
       content: none !important;
     }
   }
+  
+  .ag-header-cell-filter-button.ag-has-popup-positioned-under .ag-icon-filter {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6 12.984v-1.969h12v1.969zM3 6h18v2.016H3zm6.984 12v-2.016h4.031V18z'/%3E%3C/svg%3E") !important;
+    background-color: #007198;
+    border-radius: 2px;
+  }
 
   .ag-header-group-cell {
     text-transform: uppercase;

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'),