@linzjs/step-ag-grid 29.11.0 → 29.11.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.11.0",
+  "version": "29.11.2",
   "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

@@ -14,7 +14,6 @@ import {
   GetRowIdParams,
   GridOptions,
   GridReadyEvent,
-  IColumnLimit,
   ModelUpdatedEvent,
   ModuleRegistry,
   RowClickedEvent,
@@ -203,7 +202,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const hasSetContentSizeEmpty = useRef(false);
   const needsAutoSize = useRef(true);
 
-  const requiresInitialSizeToFitRef = useRef(false);
   const autoSizeResultRef = useRef<AutoSizeColumnsResult | null>(null);
   const prevRowsVisibleRef = useRef(false);
   const setInitialContentSize = useCallback(() => {
@@ -235,7 +233,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) {
@@ -251,14 +248,12 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         // 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;
-          requiresInitialSizeToFitRef.current = true;
           params.onContentSize?.(autoSizeResult);
         }
       } else if (gridRendered === 'rows-visible') {
         // we have rows now so callback grid size
         if (!hasSetContentSize.current) {
           hasSetContentSize.current = true;
-          requiresInitialSizeToFitRef.current = true;
           params.onContentSize?.(autoSizeResult);
         }
       } else {
@@ -266,6 +261,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         console.error('Unknown value returned from hasGridRendered');
       }
     } else {
+      console.log('sizeColumnsToFit 3');
       sizeColumnsToFit();
     }
 
@@ -608,9 +604,10 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    * When cell editing has completed the colId as needing auto-sizing
    */
   useEffect(() => {
-    if (lastUpdatedDep.current === updatedDep) return;
+    if (lastUpdatedDep.current === updatedDep) {
+      return;
+    }
     lastUpdatedDep.current = updatedDep;
-
     const colIds = updatingCols();
     // Updating possibly completed
     if (isEmpty(colIds)) {
@@ -649,32 +646,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     prevLoading.current = newLoading;
   }, [params.loading, rowData, showNoRowsOverlay]);
 
-  /**
-   * Resize columns to fit if required on window/container resize
-   */
-  const onGridResize = useCallback(
-    (event: AgGridEvent<TData>) => {
-      if (sizeColumns === 'fit' || (!hasSetContentSizeEmpty.current && !hasSetContentSize.current)) {
-        return;
-      }
-      if (sizeColumns !== 'none') {
-        // Flex columns can expand to fit after resize, but they cannot shrink less than use resized value
-        // Double click column resize handle to reset this behaviour
-        const columnLimits = [
-          ...userSizedColIds.current.entries().map(
-            ([c, w]): IColumnLimit => ({
-              key: c,
-              minWidth: w,
-              maxWidth: w,
-            }),
-          ),
-        ];
-        defer(() => event.api.sizeColumnsToFit({ columnLimits }));
-      }
-    },
-    [sizeColumns],
-  );
-
   /**
    * Set of column I'd's that are prevented from auto-sizing as they are user set
    */
@@ -683,33 +654,29 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   /**
    * Lock/unlock column width on user edit/reset.
    */
-  const onColumnResized = useCallback(
-    (e: ColumnResizedEvent) => {
-      const colId = e.column?.getColId();
-      if (colId == null) {
-        return;
-      }
-      const width = e.column?.getActualWidth();
-      if (width == null) {
-        return;
-      }
-
-      switch (e.source) {
-        case 'uiColumnResized':
-          userSizedColIds.current.set(colId, width);
-          const colDef = e.column?.getColDef();
+  const onColumnResized = useCallback((e: ColumnResizedEvent) => {
+    const colId = e.column?.getColId();
+    if (colId == null) {
+      return;
+    }
+    const width = e.column?.getActualWidth();
+    if (width == null) {
+      return;
+    }
+    switch (e.source) {
+      case 'uiColumnResized':
+        userSizedColIds.current.set(colId, width);
+        /*const colDef = e.column?.getColDef();
           if (!colDef?.flex) {
             onGridResize(e);
-          }
-          break;
-        case 'autosizeColumns':
-          userSizedColIds.current.delete(colId);
-          onGridResize(e);
-          break;
-      }
-    },
-    [onGridResize],
-  );
+          }*/
+        break;
+      case 'autosizeColumns':
+        userSizedColIds.current.delete(colId);
+        //onGridResize(e);
+        break;
+    }
+  }, []);
 
   const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
 
@@ -910,20 +877,10 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
                 }
               : undefined
           }
-          onDisplayedColumnsChanged={() => {
-            // This happens after an autosize event, if we don't wait for it size columns to fit doesn't work
-            if (requiresInitialSizeToFitRef.current) {
-              requiresInitialSizeToFitRef.current = false;
-              delay(() => {
-                sizeColumnsToFit();
-              }, 200);
-            }
-          }}
           rowHeight={rowHeight}
           animateRows={params.animateRows ?? false}
           rowClassRules={params.rowClassRules}
           getRowId={getRowId}
-          onGridSizeChanged={onGridResize}
           suppressColumnVirtualisation={suppressColumnVirtualization}
           suppressClickEdit={true}
           onColumnVisible={setInitialContentSize}

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,
@@ -20,6 +21,10 @@ import { waitForCondition } from '../utils/waitForCondition';
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from './GridContext';
 import { GridUpdatingContext } from './GridUpdatingContext';
 
+export const colStateId = (colState: ColumnState) => colState.colId;
+export const colStateFlexed = (colState: ColumnState) => !!colState.flex;
+export const colStateNotFlexed = (colState: ColumnState) => !colState.flex;
+
 /**
  * Context for AgGrid operations.
  * Make sure you wrap AgGrid in this.
@@ -422,32 +427,56 @@ 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 colId = colState.colId;
-        return (
-          (isEmpty(colIdsSet) || colIdsSet.has(colId)) &&
-          !userSizedColIds?.has(colId) &&
-          (includeFlex || !colState.flex)
+
+      const getVisibleColStates = () => {
+        const colStates = gridApi.getColumnState();
+        return colStates.filter((colState) => {
+          const colId = colState.colId;
+          return (isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
+        });
+      };
+      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 (!isEmpty(flexColumns)) {
+        gridApi.autoSizeColumns(flexColumns.map(colStateId), skipHeader);
+        const flexColumnIds = flexColumns.map(colStateId);
+        flexColumns = getVisibleColStates().filter((colState) => flexColumnIds.includes(colState.colId));
+        width += sumBy(
+          flexColumns.filter((col) => !col.hide),
+          'width',
         );
-      });
-      if (!isEmpty(colsToResize)) {
-        gridApi.autoSizeColumns(
-          colsToResize.map((colState) => colState.colId),
-          skipHeader,
+        gridApi.resetColumnState();
+      }
+
+      let nonFlexColumns = getNonFlexColStates();
+      if (!isEmpty(nonFlexColumns)) {
+        gridApi.autoSizeColumns(nonFlexColumns.map(colStateId), skipHeader);
+        const nonFlexColumnIds = nonFlexColumns.map(colStateId);
+        nonFlexColumns = getVisibleColStates().filter((colState) => nonFlexColumnIds.includes(colState.colId));
+        width += sumBy(
+          nonFlexColumns.filter((col) => !col.hide),
+          'width',
         );
       }
+
       return {
-        width: sumBy(
-          gridApi.getColumnState().filter((col) => !col.hide),
-          'width',
-        ),
+        width,
       };
     },
     [gridApi],

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

@@ -19,13 +19,11 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1024, height: 400 }}>
-        <GridUpdatingContextProvider>
-          <GridContextProvider>
-            <Story />
-          </GridContextProvider>
-        </GridUpdatingContextProvider>
-      </div>
+      <GridUpdatingContextProvider>
+        <GridContextProvider>
+          <Story />
+        </GridContextProvider>
+      </GridUpdatingContextProvider>
     ),
   ],
 } as Meta<typeof Grid>;
@@ -37,11 +35,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,