@linzjs/step-ag-grid 29.2.3 → 29.3.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.2.3",
+  "version": "29.3.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -83,7 +83,7 @@
     "@chromatic-com/storybook": "^4.1.1",
     "@linzjs/lui": "^23.11.1",
     "@linzjs/style": "^5.4.0",
-    "@linzjs/windows": "^5.5.1",
+    "@linzjs/windows": "^5.6.0",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",

package/src/components/Grid.tsx

@@ -14,7 +14,6 @@ import {
   GetRowIdParams,
   GridOptions,
   GridReadyEvent,
-  GridSizeChangedEvent,
   IColumnLimit,
   ModelUpdatedEvent,
   ModuleRegistry,
@@ -31,7 +30,7 @@ import { defer, difference, isEmpty, last, omit, xorBy } from 'lodash-es';
 import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useInterval } from 'usehooks-ts';
 
-import { useGridContext } from '../contexts/GridContext';
+import { AutoSizeColumnsResult, useGridContext } from '../contexts/GridContext';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
 import { fnOrVar, isNotEmpty } from '../utils/util';
 import { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';
@@ -99,6 +98,10 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
    * 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';
+  /**
+   * On first don't return a content size larger than this.
+   */
+  maxInitialWidth?: number;
   /**
    * When pressing tab whilst editing the grid will select and edit the next cell if available.
    * Once the last cell to edit closes this callback is called.
@@ -145,6 +148,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40,
   selectable,
   onCellFocused: paramsOnCellFocused,
+  maxInitialWidth,
   ...params
 }: GridProps<TData>): ReactElement => {
   const {
@@ -190,6 +194,8 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
 
   const lastFullResize = useRef<number>();
 
+  const autoSizeResultRef = useRef<AutoSizeColumnsResult | null>(null);
+  const prevRowsVisibleRef = useRef(false);
   const setInitialContentSize = useCallback(() => {
     if (!gridDivRef.current?.clientWidth || rowData == null) {
       // Don't resize grids if they are offscreen as it doesn't work.
@@ -204,31 +210,50 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       return;
     }
 
-    const skipHeader = sizeColumns === 'auto-skip-headers' && gridRendered === 'rows-visible';
-    if (sizeColumns === 'auto' || skipHeader) {
-      const result = autoSizeColumns({
-        skipHeader,
-        userSizedColIds: new Set(userSizedColIds.current.keys()),
-        includeFlex: true,
-      });
-      if (!result) {
+    // 1. First we autosize to get the size of the columns on an infinite grid.
+    if (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') {
+      // You can't skip headers until the grid has content
+      const rowsVisible = gridRendered === 'rows-visible';
+      const skipHeader = sizeColumns === 'auto-skip-headers' && rowsVisible;
+      // If grid was empty and now has content we need to autosize
+      if (rowsVisible !== prevRowsVisibleRef.current && rowsVisible) {
+        prevRowsVisibleRef.current = rowsVisible;
+        autoSizeResultRef.current = null;
+      }
+      const autoSizeResult =
+        autoSizeResultRef.current ??
+        autoSizeColumns({
+          skipHeader,
+          userSizedColIds: new Set(userSizedColIds.current.keys()),
+        });
+      // Auto-size failed retry later
+      if (!autoSizeResult) {
         needsAutoSize.current = true;
         return;
       }
+
+      autoSizeResultRef.current = autoSizeResult;
+      // Calculate the auto-sized width, limit it to maxInitialWidth
+      autoSizeResult.width = maxInitialWidth ? Math.min(autoSizeResult.width, maxInitialWidth) : autoSizeResult.width;
       if (gridRendered === 'empty') {
+        // If the grid is empty we still do an onContentSize callback, we will do another callback when grid has data
+        // 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;
-          params.onContentSize?.(result);
+          params.onContentSize?.(autoSizeResult);
         }
       } else if (gridRendered === 'rows-visible') {
+        // we have rows now so callback grid size
         if (!hasSetContentSize.current) {
-          if (lastFullResize.current === result.width) {
+          // Only callback if grid size has settled
+          if (lastFullResize.current === autoSizeResult.width) {
             hasSetContentSize.current = true;
-            params.onContentSize?.(result);
+            params.onContentSize?.(autoSizeResult);
           } else {
-            needsAutoSize.current = true;
+            // Need to retry callback when size has settelled
+            lastFullResize.current = autoSizeResult.width;
+            return;
           }
-          lastFullResize.current = result.width;
         }
       } else {
         // It should be impossible to get here
@@ -236,12 +261,13 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       }
     }
 
+    // 2. Now we size columns to fit the grid width
     if (sizeColumns !== 'none') {
       sizeColumnsToFit();
     }
     setAutoSized(true);
     needsAutoSize.current = false;
-  }, [autoSizeColumns, gridRenderState, params, rowData, sizeColumns, sizeColumnsToFit]);
+  }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns, sizeColumnsToFit]);
 
   const lastOwnerDocumentRef = useRef<Document>();
   const wasVisibleRef = useRef(false);
@@ -419,6 +445,8 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const onRowDataChanged = useCallback(() => {
     const length = rowData?.length ?? 0;
     if (previousRowDataLength.current !== length) {
+      // We need to autosize all cells again
+      autoSizeResultRef.current = null;
       setInitialContentSize();
       previousRowDataLength.current = length;
     }
@@ -583,14 +611,17 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   /**
    * Resize columns to fit if required on window/container resize
    */
-  const onGridSizeChanged = useCallback(
-    (event: GridSizeChangedEvent<TData>) => {
+  const onGridResize = useCallback(
+    (event: AgGridEvent<TData>) => {
       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,
             }),
           ),
         ];
@@ -608,24 +639,32 @@ 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);
-        break;
-      case 'autosizeColumns':
-        userSizedColIds.current.delete(colId);
-        break;
-    }
-  }, []);
+  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],
+  );
 
   const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
 
@@ -762,6 +801,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   );
 
   const selectionColumnDef = useMemo((): SelectionColumnDef => {
+    // Note this has to be 1 for hidden otherwise ag-grid does crazy things whilst resizing
     const selectWidth = params.hideSelectColumn ? 0 : selectable && params.onRowDragEnd ? 76 : 48;
     return {
       suppressNavigable: params.hideSelectColumn,
@@ -829,7 +869,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           animateRows={params.animateRows ?? false}
           rowClassRules={params.rowClassRules}
           getRowId={getRowId}
-          onGridSizeChanged={onGridSizeChanged}
+          onGridSizeChanged={onGridResize}
           suppressColumnVirtualisation={suppressColumnVirtualization}
           suppressClickEdit={true}
           onColumnVisible={setInitialContentSize}

package/src/components/GridWrapper.tsx

@@ -1,11 +1,18 @@
-import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import { forwardRef, PropsWithChildren } from 'react';
 
 export interface GridWrapperProps {
+  className?: string | undefined;
   maxHeight?: number | string;
 }
 
-export const GridWrapper = ({ children, maxHeight }: PropsWithChildren<GridWrapperProps>) => (
-  <div className={'Grid-wrapper'} style={{ maxHeight }}>
-    {children}
-  </div>
-);
+export const GridWrapper = forwardRef<HTMLDivElement, PropsWithChildren<GridWrapperProps>>(function GridWrapperFr(
+  { children, maxHeight, className },
+  ref,
+) {
+  return (
+    <div className={clsx('Grid-wrapper', className)} style={{ maxHeight }} ref={ref}>
+      {children}
+    </div>
+  );
+});

package/src/contexts/GridContext.tsx

@@ -1,4 +1,4 @@
-import { ColDef, GridApi, IRowNode } from 'ag-grid-community';
+import { ColDef, GridApi, IRowNode, ISizeColumnsToFitParams } from 'ag-grid-community';
 import { CsvExportParams } from 'ag-grid-community';
 import { createContext, useContext } from 'react';
 
@@ -47,7 +47,7 @@ export interface GridContextType<TData extends GridBaseRow> {
   ensureSelectedRowIsVisible: () => void;
   getFirstRowId: () => number;
   autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
-  sizeColumnsToFit: () => void;
+  sizeColumnsToFit: (paramsOrGridWidth?: ISizeColumnsToFitParams) => void;
   startCellEditing: ({ rowId, colId }: StartCellEditingProps) => Promise<void>;
   // Restores the previous focus after cell editing
   resetFocusedCellAfterCellEditing: () => void;

package/src/contexts/GridContextProvider.tsx

@@ -4,6 +4,7 @@ import {
   CsvExportParams,
   GridApi,
   IRowNode,
+  ISizeColumnsToFitParams,
   ProcessCellForExportParams,
   RowNode,
 } from 'ag-grid-community';
@@ -455,11 +456,14 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   /**
    * Resize columns to fit container
    */
-  const sizeColumnsToFit = useCallback((): void => {
-    if (gridApi && !gridApi?.isDestroyed()) {
-      gridApi.sizeColumnsToFit();
-    }
-  }, [gridApi]);
+  const sizeColumnsToFit = useCallback(
+    (paramsOrGridWidth?: ISizeColumnsToFitParams): void => {
+      if (gridApi && !gridApi?.isDestroyed()) {
+        gridApi.sizeColumnsToFit(paramsOrGridWidth);
+      }
+    },
+    [gridApi],
+  );
 
   /**
    *

package/src/stories/grid/gridAutosize/ShowPanelResizingAgGrid/ShowPanelResizingStepAgGrid.tsx

@@ -71,7 +71,7 @@ interface ITestRow {
 // Note: Resize can only be used from within the panel content.
 export const PanelContentsWithResize = () => {
   // This is the first important bit
-  const { resizePanel } = useContext(PanelContext);
+  const { initialResizePanel } = useContext(PanelContext);
 
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
@@ -151,7 +151,13 @@ export const PanelContentsWithResize = () => {
   const [rowData] = useState([
     /* Your grid row data */
     /* exclude */
-    { id: 1000, position: 'Tester', age: 30, desc: 'Tests application', dd: '1' },
+    {
+      id: 1000,
+      position: 'Tester',
+      age: 30,
+      desc: 'Tests application',
+      dd: '1',
+    },
     { id: 1001, position: 'Developer', age: 12, desc: 'Develops application', dd: '2' },
     { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
     /* exclude */
@@ -161,7 +167,12 @@ export const PanelContentsWithResize = () => {
     <GridUpdatingContextProvider>
       <GridContextProvider>
         <GridWrapper>
-          <Grid columnDefs={columnDefs} rowData={rowData} onContentSize={resizePanel} />
+          <Grid
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onContentSize={initialResizePanel}
+            sizeColumns={'auto-skip-headers'}
+          />
         </GridWrapper>
       </GridContextProvider>
     </GridUpdatingContextProvider>