@linzjs/step-ag-grid 29.2.2 → 29.2.4

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/GridCell.d.ts

@@ -13,6 +13,7 @@ export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends Col
     editable?: boolean | EditableCallback<TData, ValueType>;
     valueGetter?: string | ValueGetterFunc<TData, ValueType>;
     valueFormatter?: string | ValueFormatterFunc<TData, ValueType>;
+    maxInitialWidth?: number;
     cellRenderer?: ((props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined) | string;
     cellRendererParams?: {
         rightHoverElement?: ReactElement;

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);
@@ -2802,6 +2802,10 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 needsAutoSize.current = true;
                 return;
             }
+            // Default max intial width is 256x initial visible column count, max of 80% window width
+            const maxWidth = maxInitialWidth ||
+                lodashEs.sum(params.columnDefs.map((c) => (!c.hide ? c.maxInitialWidth || 128 : 0)));
+            result.width = Math.min(result.width, maxWidth);
             if (gridRendered === 'empty') {
                 if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
                     hasSetContentSizeEmpty.current = true;
@@ -2830,7 +2834,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
         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);
     /**
@@ -2839,7 +2843,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
      */
     useInterval(() => {
         // If grid has become visible after previously being hidden, then refocus the last focused cell.
-        const visible = !!gridDivRef.current?.checkVisibility();
+        const visible = !!gridDivRef.current?.checkVisibility?.();
         if (visible && !wasVisibleRef.current) {
             wasVisibleRef.current = true;
             const el = window.__stepaggrid_lastfocuseventtarget;
@@ -5456,9 +5460,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]);
     /**