@linzjs/step-ag-grid 13.5.1 → 14.0.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "13.5.1",
+  "version": "14.0.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -24,7 +24,7 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "peerDependencies": {
     "@linzjs/lui": ">=17",
@@ -82,10 +82,10 @@
     ]
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@semantic-release/changelog": "^6.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
@@ -96,62 +96,62 @@
     "@storybook/react": "^6.5.16",
     "@storybook/test-runner": "^0.9.4",
     "@storybook/testing-library": "^0.0.13",
-    "@testing-library/dom": "^8.20.0",
+    "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/debounce-promise": "^3.1.6",
-    "@types/jest": "^29.4.0",
-    "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.13.0",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.18",
-    "@types/uuid": "^9.0.0",
-    "@typescript-eslint/parser": "^5.51.0",
-    "babel-jest": "^29.4.2",
+    "@types/jest": "^29.5.1",
+    "@types/lodash-es": "^4.17.7",
+    "@types/node": "^20.2.3",
+    "@types/react": "^17.0.59",
+    "@types/react-dom": "^17.0.20",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/parser": "^5.59.7",
+    "babel-jest": "^29.5.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^6.17.0",
+    "chromatic": "^6.17.4",
     "conventional-changelog-conventionalcommits": "^5.0.0",
-    "eslint": "^8.33.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-deprecation": "^1.3.3",
+    "eslint-plugin-deprecation": "^1.4.1",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.10.1",
-    "jest": "^29.4.2",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.4.2",
+    "eslint-plugin-testing-library": "^5.11.0",
+    "jest": "^29.5.0",
+    "jest-canvas-mock": "^2.5.1",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-expect-message": "^1.1.3",
-    "mkdirp": "^2.1.3",
+    "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.21",
-    "postcss-loader": "^7.0.2",
+    "postcss": "^8.4.23",
+    "postcss-loader": "^7.3.0",
     "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.8",
     "react-app-polyfill": "^3.0.0",
     "react-scripts": "^5.0.1",
-    "rollup": "^3.14.0",
+    "rollup": "^3.23.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
-    "sass": "^1.58.0",
-    "sass-loader": "^13.2.0",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.3.0",
     "semantic-release": "^19.0.5",
-    "style-loader": "^3.3.1",
+    "style-loader": "^3.3.3",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-recommended-scss": "^8.0.0",
     "stylelint-config-standard": "^29.0.0",
-    "stylelint-prettier": "^2.0.0",
-    "stylelint-scss": "^4.3.0",
-    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "stylelint-prettier": "3.0.0",
+    "stylelint-scss": "5.0.0",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
     "typescript": "^4.9.5"
   },
   "babel": {

package/src/components/ComponentLoadingWrapper.tsx

@@ -13,19 +13,7 @@ export const ComponentLoadingWrapper = (props: {
     <LuiMiniSpinner size={22} divProps={{ role: "status", ["aria-label"]: "Loading", style: { padding: 16 } }} />
   ) : (
     <div style={{ pointerEvents: props.saving ? "none" : "inherit" }} className={props.className}>
-      {props.saving && (
-        <div
-          style={{
-            position: "absolute",
-            left: 0,
-            top: 0,
-            bottom: 0,
-            right: 0,
-            backgroundColor: "rgba(64,64,64,0.1)",
-            zIndex: 1000,
-          }}
-        />
-      )}
+      {props.saving && <div className={"ComponentLoadingWrapper-saveOverlay"} />}
       {props.children}
     </div>
   );

package/src/components/Grid.tsx

@@ -1,7 +1,13 @@
 import { CellClickedEvent, ColDef, ModelUpdatedEvent } from "ag-grid-community";
 import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
-import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
+import {
+  CellEvent,
+  FirstDataRenderedEvent,
+  GridReadyEvent,
+  GridSizeChangedEvent,
+  SelectionChangedEvent,
+} from "ag-grid-community/dist/lib/events";
 import { AgGridReact } from "ag-grid-react";
 import clsx from "clsx";
 import { difference, isEmpty, last, xorBy } from "lodash-es";
@@ -40,6 +46,24 @@ export interface GridProps {
   onGridSizeChanged?: GridOptions["onGridSizeChanged"];
   onFirstDataRendered?: GridOptions["onFirstDataRendered"];
   suppressColumnVirtualization?: GridOptions["suppressColumnVirtualisation"];
+  /**
+   * When the grid is rendered using sizeColumns=="auto" this is called initially with the required container size to fit all content.
+   * This allows you set the size of the panel to fit perfectly.
+   */
+  onContentSize?: (props: { width: number }) => void;
+  /**
+   * <ul>
+   * <li>"none" to use aggrid defaults.</li>
+   * <li>"fit" will adjust columns to fit within panel via min/max/initial sizing.
+   * <b>Note:</b> This is only really needed if you have auto-height columns which prevents "auto" from working.
+   * </li>
+   * <li>"auto" (default) will size columns based on their content but still obeying min/max sizing.</li>
+   * <li>"auto-skip-headers" same as auto but does not take headers into account.</li>
+   * </ul>
+   *
+   * If you want to stretch to container width if width is greater than the container add a flex column.
+   */
+  sizeColumns?: "fit" | "auto" | "auto-skip-headers" | "none";
 }
 
 /**
@@ -50,6 +74,7 @@ export const Grid = ({
   rowSelection = "multiple",
   suppressColumnVirtualization = true,
   theme = "ag-theme-alpine",
+  sizeColumns = "auto",
   ...params
 }: GridProps): JSX.Element => {
   const {
@@ -60,6 +85,7 @@ export const Grid = ({
     selectRowsById,
     focusByRowById,
     ensureSelectedRowIsVisible,
+    autoSizeAllColumns,
     sizeColumnsToFit,
     externallySelectedItemsAreInSync,
     setExternallySelectedItemsAreInSync,
@@ -72,6 +98,27 @@ export const Grid = ({
   const [staleGrid, setStaleGrid] = useState(false);
   const postSortRows = usePostSortRowsHook({ setStaleGrid });
 
+  const setInitialContentSize = useCallback(() => {
+    const skipHeaders = sizeColumns === "auto-skip-headers";
+    if (sizeColumns === "auto" || skipHeaders) {
+      // If we aren't skipping headers and there's no data, then don't skip headers
+      const result = autoSizeAllColumns({ skipHeader: skipHeaders && !isEmpty(params.rowData) });
+      params.onContentSize && result && params.onContentSize(result);
+    }
+
+    if (sizeColumns !== "none") {
+      sizeColumnsToFit();
+    }
+  }, [autoSizeAllColumns, params, sizeColumns, sizeColumnsToFit]);
+
+  const onFirstDataRendered = useCallback(
+    (event: FirstDataRenderedEvent) => {
+      params.onFirstDataRendered && params.onFirstDataRendered(event);
+      setInitialContentSize();
+    },
+    [params, setInitialContentSize],
+  );
+
   /**
    * On data load select the first row of the grid if required.
    */
@@ -187,11 +234,10 @@ export const Grid = ({
             colId: "selection",
             editable: false,
             minWidth: 42,
+            maxWidth: 42,
             headerComponentParams: {
               exportable: false,
             },
-            maxWidth: 42,
-            suppressSizeToFit: true,
             checkboxSelection: true,
             headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
             suppressHeaderKeyboardEvent: (e) => {
@@ -227,6 +273,21 @@ export const Grid = ({
     [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid],
   );
 
+  /**
+   * When the grid is being initialized the data may be empty.
+   * This will resize columns when we have at least one row.
+   */
+  const previousRowDataLength = useRef(0);
+  useEffect(() => {
+    const length = params.rowData?.length ?? 0;
+    if (previousRowDataLength.current !== length) {
+      if (previousRowDataLength.current === 0 && length > 0) {
+        setInitialContentSize();
+      }
+      previousRowDataLength.current = length;
+    }
+  }, [params.rowData?.length, setInitialContentSize]);
+
   const onModelUpdated = useCallback((event: ModelUpdatedEvent) => {
     event.api.getDisplayedRowCount() === 0 ? event.api.showNoRowsOverlay() : event.api.hideOverlay();
   }, []);
@@ -299,12 +360,26 @@ export const Grid = ({
     [startCellEditing],
   );
 
-  // When rows added or removed then resize columns
-  useEffect(() => {
-    if (columnDefs?.length) {
-      sizeColumnsToFit();
-    }
-  }, [columnDefs?.length, sizeColumnsToFit]);
+  const onGridSizeChanged = useCallback(
+    (event: GridSizeChangedEvent) => {
+      params.onGridSizeChanged && params.onGridSizeChanged(event);
+      sizeColumns !== "none" && sizeColumnsToFit();
+    },
+    [params, sizeColumns, sizeColumnsToFit],
+  );
+
+  /**
+   * Once the grid has auto-sized we want to run fit to fit the grid in its container,
+   * but we don't want the non-flex auto-sized columns to "fit" size, so suppressSizeToFit is set to true.
+   */
+  const columnDefsAdjusted = useMemo(
+    () =>
+      columnDefs.map((colDef) => ({
+        ...colDef,
+        suppressSizeToFit: (sizeColumns === "auto" || sizeColumns === "auto-skip-headers") && !colDef.flex,
+      })),
+    [columnDefs, sizeColumns],
+  );
 
   return (
     <div
@@ -324,9 +399,8 @@ export const Grid = ({
           suppressRowClickSelection={true}
           rowSelection={rowSelection}
           suppressBrowserResizeObserver={true}
-          colResizeDefault={"shift"}
-          onFirstDataRendered={params.onFirstDataRendered ?? sizeColumnsToFit}
-          onGridSizeChanged={params.onGridSizeChanged ?? sizeColumnsToFit}
+          onFirstDataRendered={onFirstDataRendered}
+          onGridSizeChanged={onGridSizeChanged}
           suppressColumnVirtualisation={suppressColumnVirtualization}
           suppressClickEdit={true}
           onCellKeyPress={onCellKeyPress}
@@ -334,7 +408,7 @@ export const Grid = ({
           onCellDoubleClicked={onCellDoubleClick}
           onCellEditingStarted={refreshSelectedRows}
           domLayout={params.domLayout}
-          columnDefs={columnDefs}
+          columnDefs={columnDefsAdjusted}
           rowData={params.rowData}
           noRowsOverlayComponent={GridNoRowsOverlay}
           noRowsOverlayComponentParams={{ rowData: params.rowData, noRowsOverlayText: params.noRowsOverlayText }}

package/src/components/GridCell.tsx

@@ -34,25 +34,25 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   if (Array.isArray(warningText)) warningText = warningText.join("\n");
   if (Array.isArray(infoText)) infoText = infoText.join("\n");
 
-  return (
-    <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>
-      <>
-        {!!warningText && (
-          <GridIcon icon={"ic_warning_outline"} title={typeof warningText === "string" ? warningText : "Warning"} />
+  return checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id) ? (
+    <GridLoadableCell />
+  ) : (
+    <>
+      {!!warningText && (
+        <GridIcon icon={"ic_warning_outline"} title={typeof warningText === "string" ? warningText : "Warning"} />
+      )}
+      {!!infoText && <GridIcon icon={"ic_info_outline"} title={typeof infoText === "string" ? infoText : "Info"} />}
+      <div className={"GridCell-container"}>
+        {colDef.cellRendererParams?.originalCellRenderer ? (
+          <colDef.cellRendererParams.originalCellRenderer {...props} />
+        ) : (
+          <span title={props.valueFormatted ?? undefined}>{props.valueFormatted}</span>
         )}
-        {!!infoText && <GridIcon icon={"ic_info_outline"} title={typeof infoText === "string" ? infoText : "Info"} />}
-        <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
-          {colDef.cellRendererParams?.originalCellRenderer ? (
-            <colDef.cellRendererParams.originalCellRenderer {...props} />
-          ) : (
-            <span title={props.valueFormatted ?? undefined}>{props.valueFormatted}</span>
-          )}
-        </div>
-        {fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (
-          <div style={{ display: "flex", alignItems: "center" }}>{rendererParams?.rightHoverElement}</div>
-        )}
-      </>
-    </GridLoadableCell>
+      </div>
+      {fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (
+        <div className={"GridCell-hoverRight"}>{rendererParams?.rightHoverElement}</div>
+      )}
+    </>
   );
 };
 
@@ -119,9 +119,10 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
   delete props.exportable;
 
   return {
-    colId: props.field,
+    colId: props.field ?? props.field,
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
+    minWidth: props.flex ? 150 : 48,
     editable: props.editable ?? false,
     ...(custom?.editor && {
       cellClassRules: GridCellMultiSelectClassRules,

package/src/components/GridCellMultiEditor.tsx

@@ -1,11 +1,11 @@
-import { CellEditorSelectorResult, ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { CellEditorSelectorResult } from "ag-grid-community/dist/lib/entities/colDef";
 import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
 import { ComponentProps } from "react";
 
 import { GridBaseRow } from "./Grid";
-import { ColDefT, GenericCellEditorComponentWrapper, GridCellRenderer, suppressCellKeyboardEvents } from "./GridCell";
+import { ColDefT, GenericCellEditorComponentWrapper, GridCell } from "./GridCell";
 import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
-import { GenericCellColDef } from "./gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "./gridRender";
 
 export const Editor = <FN extends (param: any) => JSX.Element>(props: {
   multiEdit: boolean;
@@ -20,34 +20,16 @@ export interface RowCellEditorParams<RowType extends GridBaseRow> extends ICellE
   data: RowType;
 }
 
-/*
- * All cells should use this
+/**
+ * Used to choose between cell editors based in data.
  */
 export const GridCellMultiEditor = <RowType extends GridBaseRow>(
   props: GenericCellColDef<RowType>,
   cellEditorSelector: (params: RowCellEditorParams<RowType>) => CellEditorSelectorResult,
-): ColDefT<RowType> => {
-  return {
-    colId: props.colId ?? props.field,
-    field: props.field,
-    sortable: !!(props?.field || props?.valueGetter),
-    resizable: true,
-    editable: props.editable ?? true,
+): ColDefT<RowType> =>
+  GridCell({
     cellClassRules: GridCellMultiSelectClassRules,
     cellEditorSelector,
-    suppressKeyboardEvent: suppressCellKeyboardEvents,
-    // Default value formatter, otherwise react freaks out on objects
-    valueFormatter: (params: ValueFormatterParams) => {
-      if (params.value == null) return "–";
-      const types = ["number", "boolean", "string"];
-      if (types.includes(typeof params.value)) return `${params.value}`;
-      else return JSON.stringify(params.value);
-    },
+    editable: props.editable ?? true,
     ...props,
-    cellRenderer: GridCellRenderer,
-    cellRendererParams: {
-      originalCellRenderer: props.cellRenderer,
-      ...props.cellRendererParams,
-    },
-  };
-};
+  });

package/src/components/GridLoadableCell.tsx

@@ -1,13 +1,8 @@
-import clsx from "clsx";
-
 import { LuiMiniSpinner } from "@linzjs/lui";
 
-export const GridLoadableCell = (props: { isLoading: boolean; children: JSX.Element | string; className?: string }) => (
-  <div className={clsx("GridLoadableCell-container", props.className)}>
-    {props.isLoading ? (
-      <LuiMiniSpinner size={22} divProps={{ role: "status", "aria-label": "Loading", style: { marginBottom: 4 } }} />
-    ) : (
-      props.children
-    )}
-  </div>
+export const GridLoadableCell = () => (
+  <LuiMiniSpinner
+    size={22}
+    divProps={{ className: "GridLoadableCell-container", role: "status", "aria-label": "Loading" }}
+  />
 );

package/src/components/GridPopoverHook.tsx

@@ -81,17 +81,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
               closeMenuExclusionClassName={"ReactModal__Content"}
             >
               {saving && ( // This is the overlay that prevents editing when the editor is saving
-                <div
-                  style={{
-                    position: "absolute",
-                    left: 0,
-                    top: 0,
-                    bottom: 0,
-                    right: 0,
-                    backgroundColor: "rgba(64,64,64,0.1)",
-                    zIndex: 1000,
-                  }}
-                />
+                <div className={"ComponentLoadingWrapper-saveOverlay"} />
               )}
               {children}
               <button

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -1,3 +1,4 @@
+import { isEmpty } from "lodash-es";
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
@@ -123,7 +124,7 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!options} className={"GridFormPopupMenu"}>
       <>
-        {options?.length === 0 ? (
+        {isEmpty(options) ? (
           <MenuItem key={`GridPopoverMenu-empty`} className={"GridPopoverMenu-noOptions"} disabled={true}>
             No actions
           </MenuItem>

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -19,8 +19,6 @@ const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
 ): ColDefT<RowType> =>
   GridCell(
     {
-      initialWidth: 65,
-      maxWidth: 150,
       valueFormatter: (params: ValueFormatterParams) => props.editorParams?.formatValue(params.value) ?? "",
       ...colDef,
     },

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -18,7 +18,7 @@ export const GridPopoverMenu = <RowType extends GridBaseRow>(
       width: 40,
       editable: colDef.editable != null ? colDef.editable : true,
       exportable: false,
-      cellStyle: { justifyContent: "center" },
+      cellStyle: { flex: 1, justifyContent: "center" },
       cellRenderer: GridRenderPopoutMenuCell,
       ...colDef,
       cellRendererParams: {

package/src/components/gridRender/GridRenderPopoutMenuCell.tsx

@@ -1,4 +1,5 @@
 import { ICellRendererParams } from "ag-grid-community";
+import clsx from "clsx";
 
 import { LuiIcon } from "@linzjs/lui";
 
@@ -12,7 +13,7 @@ export const GridRenderPopoutMenuCell = (props: ICellRendererParams) => {
       name={"ic_more_vert"}
       alt={"More actions"}
       size={"md"}
-      className={disabled ? `GridPopoutMenu-burgerDisabled` : `GridPopoutMenu-burger`}
+      className={clsx("GridPopoutMenu-burger", disabled && "GridPopoutMenu-burgerDisabled")}
     />
   );
 };

package/src/contexts/GridContext.tsx

@@ -25,6 +25,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
   focusByRowById: (rowId: number) => void;
   ensureRowVisible: (id: number | string) => boolean;
   ensureSelectedRowIsVisible: () => void;
+  autoSizeAllColumns: (props?: { skipHeader?: boolean }) => { width: number } | null;
   sizeColumnsToFit: () => void;
   stopEditing: () => void;
   updatingCells: (
@@ -111,8 +112,13 @@ export const GridContext = createContext<GridContextType<any>>({
   ensureSelectedRowIsVisible: () => {
     console.error("no context provider for ensureSelectedRowIsVisible");
   },
+  autoSizeAllColumns: () => {
+    console.error("no context provider for autoSizeAllColumns");
+    return null;
+  },
   sizeColumnsToFit: () => {
-    console.error("no context provider for sizeColumnsToFit");
+    console.error("no context provider for autoSizeAllColumns");
+    return null;
   },
   editingCells: () => {
     console.error("no context provider for editingCells");

package/src/contexts/GridContextProvider.tsx

@@ -2,7 +2,8 @@ import { ColDef, ColumnApi, GridApi, RowNode } from "ag-grid-community";
 import { CellPosition } from "ag-grid-community/dist/lib/entities/cellPosition";
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { CsvExportParams, ProcessCellForExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
-import { compact, debounce, defer, delay, difference, isEmpty, last, remove, sortBy } from "lodash-es";
+import debounce from "debounce-promise";
+import { compact, defer, delay, difference, isEmpty, last, remove, sortBy, sumBy } from "lodash-es";
 import { ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import { ColDefT, GridBaseRow } from "../components";
@@ -326,15 +327,25 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     });
   }, [gridApiOp]);
 
+  /**
+   * Resize columns to fit container
+   */
+  const autoSizeAllColumns = useCallback((): { width: number } | null => {
+    if (columnApi) {
+      columnApi.autoSizeAllColumns();
+      return { width: sumBy(columnApi.getColumnState(), "width") };
+    }
+    return null;
+  }, [columnApi]);
+
   /**
    * Resize columns to fit container
    */
   const sizeColumnsToFit = useCallback((): void => {
-    gridApiOp((gridApi) => {
-      // Hide size columns to fit errors in tests
-      document.body.clientWidth && gridApi.sizeColumnsToFit();
-    });
-  }, [gridApiOp]);
+    if (gridApi) {
+      gridApi.sizeColumnsToFit();
+    }
+  }, [gridApi]);
 
   const stopEditing = useCallback((): void => {
     if (prePopupFocusedCell.current) {
@@ -523,6 +534,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         ensureRowVisible,
         ensureSelectedRowIsVisible,
         sizeColumnsToFit,
+        autoSizeAllColumns,
         stopEditing,
         updatingCells,
         redrawRows,

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -66,13 +66,19 @@ const GridFilterButtonsTemplate: ComponentStory<typeof Grid> = (props: GridProps
       GridCell({
         field: "desc",
         headerName: "Description",
+        flex: 1,
       }),
     ],
     [],
   );
 
   const [rowData] = useState([
-    { id: 1000, position: "Tester", age: 30, desc: "Integration tester" },
+    {
+      id: 1000,
+      position: "Tester",
+      age: 30,
+      desc: "Integration tester - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lectus neque. Nunc congue magna ut lorem pretium, vitae congue lorem malesuada. Etiam eget eleifend sapien, sed egestas felis. Aliquam ac augue sapien.",
+    },
     { id: 1001, position: "Developer", age: 12, desc: "Frontend developer" },
     { id: 1002, position: "Manager", age: 65, desc: "Technical Manager" },
     { id: 1003, position: "Tester", age: 30, desc: "E2E tester" },
@@ -102,7 +108,7 @@ const GridFilterButtonsTemplate: ComponentStory<typeof Grid> = (props: GridProps
           ]}
         />
       </GridFilters>
-      <Grid {...props} columnDefs={columnDefs} rowData={rowData} />
+      <Grid {...props} columnDefs={columnDefs} rowData={rowData} sizeColumns={"auto-skip-headers"} />
     </GridWrapper>
   );
 };

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -60,14 +60,10 @@ const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProp
       GridCell({
         field: "id",
         headerName: "Id",
-        initialWidth: 65,
-        maxWidth: 85,
       }),
       GridPopoverEditDropDown(
         {
           field: "position",
-          initialWidth: 65,
-          maxWidth: 150,
           headerName: "Position",
         },
         {
@@ -82,15 +78,11 @@ const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProp
       GridCell({
         field: "age",
         headerName: "Age",
-        initialWidth: 65,
-        maxWidth: 85,
       }),
       GridPopoverTextArea(
         {
           field: "desc",
           headerName: "Description",
-          initialWidth: 150,
-          maxWidth: 200,
         },
         {},
       ),