@linzjs/step-ag-grid 29.10.0 → 29.11.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.10.0",
+  "version": "29.11.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
-    "ag-grid-community": "^34.2.0",
-    "ag-grid-react": "^34.2.0",
+    "ag-grid-community": "~34.2.0",
+    "ag-grid-react": "~34.2.0",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
@@ -39,7 +39,8 @@
     "debounce-promise": "^3.1.2",
     "matcher": "^5.0.0",
     "react-transition-state": "^2.3.1",
-    "usehooks-ts": "^3.1.1"
+    "usehooks-ts": "^3.1.1",
+    "uuid": "^13.0.0"
   },
   "scripts": {
     "build": "run-s clean lint css bundle",
@@ -76,14 +77,14 @@
     ]
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.52.4",
-    "@swc/core-linux-x64-gnu": "^1.13.20"
+    "@rollup/rollup-linux-x64-gnu": "^4.53.2",
+    "@swc/core-linux-x64-gnu": "^1.15.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^4.1.2",
     "@linzjs/lui": "^23.14.2",
     "@linzjs/style": "^5.4.0",
-    "@linzjs/windows": "^5.7.0",
+    "@linzjs/windows": "^8.1.0",
     "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -101,13 +102,14 @@
     "@types/node": "^22.17.0",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
+    "@types/uuid": "^11.0.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
     "@vitest/ui": "^3.2.4",
-    "ag-grid-community": "^34.2.0",
-    "ag-grid-react": "^34.2.0",
+    "ag-grid-community": "34.2.0",
+    "ag-grid-react": "34.2.0",
     "babel-preset-react-app": "^10.1.0",
     "canvas": "^3.2.0",
-    "chromatic": "^13.3.0",
+    "chromatic": "^13.3.3",
     "cross-env": "^10.1.0",
     "css-loader": "^7.1.2",
     "eslint-plugin-react": "^7.37.5",
@@ -122,20 +124,20 @@
     "react": ">=18",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.52.4",
+    "rimraf": "^6.1.0",
+    "rollup": "^4.53.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
-    "sass": "^1.93.2",
-    "sass-loader": "^16.0.5",
+    "sass": "^1.94.0",
+    "sass-loader": "^16.0.6",
     "semantic-release": "^24.2.9",
     "storybook": "^9.1.12",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
     "typescript": "^5.9.3",
-    "vite": "^7.1.10",
+    "vite": "^7.2.2",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"

package/src/components/Grid.tsx

@@ -235,7 +235,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         autoSizeColumns({
           skipHeader,
           userSizedColIds: new Set(userSizedColIds.current.keys()),
-          includeFlex: true,
         });
       // Auto-size failed retry later
       if (!autoSizeResult) {

package/src/contexts/GridContext.tsx

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

package/src/contexts/GridContextProvider.tsx

@@ -1,6 +1,7 @@
 import {
   CellPosition,
   ColDef,
+  ColumnState,
   CsvExportParams,
   GridApi,
   IRowNode,
@@ -9,7 +10,20 @@ import {
   RowNode,
 } from 'ag-grid-community';
 import debounce from 'debounce-promise';
-import { compact, defer, delay, difference, filter, isEmpty, last, pull, remove, sortBy, sumBy } from 'lodash-es';
+import {
+  compact,
+  defer,
+  delay,
+  difference,
+  filter,
+  isEmpty,
+  last,
+  partition,
+  pull,
+  remove,
+  sortBy,
+  sumBy,
+} from 'lodash-es';
 import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ColDefT, GridBaseRow } from '../components';
@@ -20,6 +34,9 @@ import { waitForCondition } from '../utils/waitForCondition';
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from './GridContext';
 import { GridUpdatingContext } from './GridUpdatingContext';
 
+const colStateId = (colState: ColumnState) => colState.colId;
+const colStateFlexed = (colState: ColumnState) => !!colState.flex;
+
 /**
  * Context for AgGrid operations.
  * Make sure you wrap AgGrid in this.
@@ -422,26 +439,33 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
 
   /**
    * 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 = useCallback(
-    ({ skipHeader, colIds, userSizedColIds, includeFlex }: AutoSizeColumnsProps = {}): AutoSizeColumnsResult => {
+    ({ skipHeader, colIds, userSizedColIds }: AutoSizeColumnsProps = {}): AutoSizeColumnsResult => {
       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 (
-          (isEmpty(colIdsSet) || colIdsSet.has(colId)) &&
-          !userSizedColIds?.has(colId) &&
-          (includeFlex || !colState.flex)
-        );
+        return (isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
       });
-      if (!isEmpty(colsToResize)) {
-        gridApi.autoSizeColumns(
-          colsToResize.map((colState) => colState.colId),
-          skipHeader,
-        );
+      const [flexColumns, nonFlexColumns] = partition(relevantCols, colStateFlexed);
+      // If we don't reset the flex columns auto size it causes issues with random resizing of flex columns
+      if (!isEmpty(flexColumns)) {
+        gridApi.autoSizeColumns(flexColumns.map(colStateId), skipHeader);
+        gridApi.resetColumnState();
+      }
+
+      if (!isEmpty(nonFlexColumns)) {
+        gridApi.autoSizeColumns(nonFlexColumns.map(colStateId), skipHeader);
       }
       return {
         width: sumBy(

package/src/stories/grid/GridPopoutEditGeneric.stories.tsx

@@ -37,11 +37,13 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props
       GridCell({
         field: 'id',
         headerName: 'Id',
+        flex: 2,
       }),
       GridCell(
         {
           field: 'name',
           headerName: 'Popout Generic Edit',
+          flex: 1,
         },
         {
           multiEdit: true,

package/src/styles/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;