@linzjs/step-ag-grid 29.2.3 → 29.3.0

package/README.md

@@ -275,7 +275,6 @@ test("click Delete menu option removes row from the table", async () => {
 If your grid has a data-testid a global will be exposed in window with the helper scrollRowIntoViewById.
 This will throw an exception if the row id is not found.
 
-
 ```tsx
 window.__stepAgGrid.grids[dataTestId].scrollRowIntoViewById("1000")
 ```

package/dist/src/components/Grid.d.ts

@@ -61,6 +61,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.
@@ -88,4 +92,4 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, selectable, onCellFocused: paramsOnCellFocused, ...params }: GridProps<TData>) => ReactElement;
+export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, selectable, onCellFocused: paramsOnCellFocused, maxInitialWidth, ...params }: GridProps<TData>) => ReactElement;

package/dist/src/components/GridWrapper.d.ts

@@ -1,5 +1,7 @@
-import { PropsWithChildren } from 'react';
 export interface GridWrapperProps {
+    className?: string | undefined;
     maxHeight?: number | string;
 }
-export declare const GridWrapper: ({ children, maxHeight }: PropsWithChildren<GridWrapperProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const GridWrapper: import("react").ForwardRefExoticComponent<GridWrapperProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/contexts/GridContext.d.ts

@@ -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 { ColDefT, GridBaseRow } from '../components';
 export type GridFilterExternal<TData extends GridBaseRow> = (data: TData, rowNode: IRowNode) => boolean;
@@ -40,7 +40,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>;
     resetFocusedCellAfterCellEditing: () => void;
     updatingCells: (props: {

package/dist/step-ag-grid.cjs

@@ -2762,7 +2762,7 @@ agGridCommunity.ModuleRegistry.registerModules([agGridCommunity.AllCommunityModu
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, onCellFocused: paramsOnCellFocused, ...params }) => {
+const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, onCellFocused: paramsOnCellFocused, maxInitialWidth, ...params }) => {
     const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnBulkEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, startCellEditing, } = useGridContext();
     const { updatedDep, updatingCols } = React.useContext(GridUpdatingContext);
     const gridDivRef = React.useRef(null);
@@ -2779,6 +2779,8 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const hasSetContentSizeEmpty = React.useRef(false);
     const needsAutoSize = React.useRef(true);
     const lastFullResize = React.useRef();
+    const autoSizeResultRef = React.useRef(null);
+    const prevRowsVisibleRef = React.useRef(false);
     const setInitialContentSize = React.useCallback(() => {
         if (!gridDivRef.current?.clientWidth || rowData == null) {
             // Don't resize grids if they are offscreen as it doesn't work.
@@ -2791,33 +2793,50 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             needsAutoSize.current = true;
             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 {
@@ -2825,12 +2844,13 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 console.error('Unknown value returned from hasGridRendered');
             }
         }
+        // 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 = React.useRef();
     const wasVisibleRef = React.useRef(false);
     /**
@@ -2982,6 +3002,8 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const onRowDataChanged = React.useCallback(() => {
         const length = rowData?.length ?? 0;
         if (previousRowDataLength.current !== length) {
+            // We need to autosize all cells again
+            autoSizeResultRef.current = null;
             setInitialContentSize();
             previousRowDataLength.current = length;
         }
@@ -3124,12 +3146,15 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     /**
      * Resize columns to fit if required on window/container resize
      */
-    const onGridSizeChanged = React.useCallback((event) => {
+    const onGridResize = React.useCallback((event) => {
         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]) => ({
                     key: c,
                     minWidth: w,
+                    maxWidth: w,
                 })),
             ];
             event.api.sizeColumnsToFit({ columnLimits });
@@ -3154,12 +3179,17 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         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 });
     const startDragYRef = React.useRef(null);
     const clearHighlightRowClasses = React.useCallback(() => {
@@ -3256,6 +3286,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         return (jsxRuntime.jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText, noRowsMatchingOverlayText: params.noRowsMatchingOverlayText }));
     }, [columnDefs, params.loading, params.noRowsMatchingOverlayText, params.noRowsOverlayText, rowData, rowHeight]);
     const selectionColumnDef = React.useMemo(() => {
+        // 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,
@@ -3301,7 +3332,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                             enableClickSelection: params.enableClickSelection ?? false,
                             mode: rowSelection == 'single' ? 'singleRow' : 'multiRow',
                         }
-                        : undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataChanged, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, selectionColumnDef: selectionColumnDef, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked, suppressStartEditOnTab: true }) })] }));
+                        : undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, onGridSizeChanged: onGridResize, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataChanged, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, selectionColumnDef: selectionColumnDef, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked, suppressStartEditOnTab: true }) })] }));
 };
 const quickFilterParser = (filterStr) => {
     // filter is exact matches exactly groups separated by commas
@@ -5136,7 +5167,9 @@ const GridPopoverTextInput = (colDef, params) => GridCell(colDef, {
     ...params,
 });
 
-const GridWrapper = ({ children, maxHeight }) => (jsxRuntime.jsx("div", { className: 'Grid-wrapper', style: { maxHeight }, children: children }));
+const GridWrapper = React.forwardRef(function GridWrapperFr({ children, maxHeight, className }, ref) {
+    return (jsxRuntime.jsx("div", { className: clsx('Grid-wrapper', className), style: { maxHeight }, ref: ref, children: children }));
+});
 
 const getColId = (colDef) => colDef.colId ?? '';
 const isFlexColumn = (colDef) => !!colDef.flex && !isGridCellFiller(colDef);
@@ -5456,9 +5489,9 @@ const GridContextProvider = (props) => {
     /**
      * Resize columns to fit container
      */
-    const sizeColumnsToFit = React.useCallback(() => {
+    const sizeColumnsToFit = React.useCallback((paramsOrGridWidth) => {
         if (gridApi && !gridApi?.isDestroyed()) {
-            gridApi.sizeColumnsToFit();
+            gridApi.sizeColumnsToFit(paramsOrGridWidth);
         }
     }, [gridApi]);
     /**