@linzjs/step-ag-grid 29.11.0 → 29.11.2

package/README.md

@@ -18,7 +18,7 @@
   - Custom form
   - Context menu
 
-_Please note this requires React>=18, ag-grid-community >=32.3.3, and SASS._
+_Please note this requires React>=18, ag-grid-community >=34.2.0, and SASS._
 
 ## Install
 

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

@@ -6,7 +6,6 @@ export interface AutoSizeColumnsProps {
     skipHeader?: boolean;
     colIds?: Set<string> | string[];
     userSizedColIds?: Set<string>;
-    includeFlex?: boolean;
 }
 export type AutoSizeColumnsResult = {
     width: number;

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

@@ -1,6 +1,9 @@
-import { ProcessCellForExportParams } from 'ag-grid-community';
+import { ColumnState, ProcessCellForExportParams } from 'ag-grid-community';
 import { PropsWithChildren, ReactElement } from 'react';
 import { GridBaseRow } from '../components';
+export declare const colStateId: (colState: ColumnState) => string;
+export declare const colStateFlexed: (colState: ColumnState) => boolean;
+export declare const colStateNotFlexed: (colState: ColumnState) => boolean;
 /**
  * Context for AgGrid operations.
  * Make sure you wrap AgGrid in this.

package/dist/step-ag-grid.cjs

@@ -2785,7 +2785,6 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const hasSetContentSize = React.useRef(false);
     const hasSetContentSizeEmpty = React.useRef(false);
     const needsAutoSize = React.useRef(true);
-    const requiresInitialSizeToFitRef = React.useRef(false);
     const autoSizeResultRef = React.useRef(null);
     const prevRowsVisibleRef = React.useRef(false);
     const setInitialContentSize = React.useCallback(() => {
@@ -2814,7 +2813,6 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 autoSizeColumns({
                     skipHeader,
                     userSizedColIds: new Set(userSizedColIds.current.keys()),
-                    includeFlex: true,
                 });
             // Auto-size failed retry later
             if (!autoSizeResult) {
@@ -2829,7 +2827,6 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 // 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);
                 }
             }
@@ -2837,7 +2834,6 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 // we have rows now so callback grid size
                 if (!hasSetContentSize.current) {
                     hasSetContentSize.current = true;
-                    requiresInitialSizeToFitRef.current = true;
                     params.onContentSize?.(autoSizeResult);
                 }
             }
@@ -2847,6 +2843,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             }
         }
         else {
+            console.log('sizeColumnsToFit 3');
             sizeColumnsToFit();
         }
         setAutoSized(true);
@@ -3132,8 +3129,9 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
      * When cell editing has completed the colId as needing auto-sizing
      */
     React.useEffect(() => {
-        if (lastUpdatedDep.current === updatedDep)
+        if (lastUpdatedDep.current === updatedDep) {
             return;
+        }
         lastUpdatedDep.current = updatedDep;
         const colIds = updatingCols();
         // Updating possibly completed
@@ -3172,26 +3170,6 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
         prevLoading.current = newLoading;
     }, [params.loading, rowData, showNoRowsOverlay]);
-    /**
-     * Resize columns to fit if required on window/container resize
-     */
-    const onGridResize = React.useCallback((event) => {
-        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]) => ({
-                    key: c,
-                    minWidth: w,
-                    maxWidth: w,
-                })),
-            ];
-            lodashEs.defer(() => event.api.sizeColumnsToFit({ columnLimits }));
-        }
-    }, [sizeColumns]);
     /**
      * Set of column I'd's that are prevented from auto-sizing as they are user set
      */
@@ -3211,17 +3189,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) {
+                /*const colDef = e.column?.getColDef();
+                  if (!colDef?.flex) {
                     onGridResize(e);
-                }
+                  }*/
                 break;
             case 'autosizeColumns':
                 userSizedColIds.current.delete(colId);
-                onGridResize(e);
+                //onGridResize(e);
                 break;
         }
-    }, [onGridResize]);
+    }, []);
     const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
     const startDragYRef = React.useRef(null);
     const clearHighlightRowClasses = React.useCallback(() => {
@@ -3364,15 +3342,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                             enableClickSelection: params.enableClickSelection ?? false,
                             mode: rowSelection === 'single' ? 'singleRow' : 'multiRow',
                         }
-                        : 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;
-                            lodashEs.delay(() => {
-                                sizeColumnsToFit();
-                            }, 200);
-                        }
-                    }, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, onGridSizeChanged: onGridResize, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataUpdated, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, 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, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataUpdated, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, 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
@@ -5346,6 +5316,9 @@ const waitForCondition = async (error, condition, timeoutMs) => {
     return false;
 };
 
+const colStateId = (colState) => colState.colId;
+const colStateFlexed = (colState) => !!colState.flex;
+const colStateNotFlexed = (colState) => !colState.flex;
 /**
  * Context for AgGrid operations.
  * Make sure you wrap AgGrid in this.
@@ -5627,23 +5600,45 @@ const GridContextProvider = (props) => {
     }, [gridApiOp]);
     /**
      * 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 = React.useCallback(({ skipHeader, colIds, userSizedColIds, includeFlex } = {}) => {
+    const autoSizeColumns = React.useCallback(({ skipHeader, colIds, userSizedColIds } = {}) => {
         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 ((lodashEs.isEmpty(colIdsSet) || colIdsSet.has(colId)) &&
-                !userSizedColIds?.has(colId) &&
-                (includeFlex || !colState.flex));
-        });
-        if (!lodashEs.isEmpty(colsToResize)) {
-            gridApi.autoSizeColumns(colsToResize.map((colState) => colState.colId), skipHeader);
+        const getVisibleColStates = () => {
+            const colStates = gridApi.getColumnState();
+            return colStates.filter((colState) => {
+                const colId = colState.colId;
+                return (lodashEs.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 (!lodashEs.isEmpty(flexColumns)) {
+            gridApi.autoSizeColumns(flexColumns.map(colStateId), skipHeader);
+            const flexColumnIds = flexColumns.map(colStateId);
+            flexColumns = getVisibleColStates().filter((colState) => flexColumnIds.includes(colState.colId));
+            width += lodashEs.sumBy(flexColumns.filter((col) => !col.hide), 'width');
+            gridApi.resetColumnState();
+        }
+        let nonFlexColumns = getNonFlexColStates();
+        if (!lodashEs.isEmpty(nonFlexColumns)) {
+            gridApi.autoSizeColumns(nonFlexColumns.map(colStateId), skipHeader);
+            const nonFlexColumnIds = nonFlexColumns.map(colStateId);
+            nonFlexColumns = getVisibleColStates().filter((colState) => nonFlexColumnIds.includes(colState.colId));
+            width += lodashEs.sumBy(nonFlexColumns.filter((col) => !col.hide), 'width');
         }
         return {
-            width: lodashEs.sumBy(gridApi.getColumnState().filter((col) => !col.hide), 'width'),
+            width,
         };
     }, [gridApi]);
     /**
@@ -6208,6 +6203,9 @@ exports.bearingNumberParser = bearingNumberParser;
 exports.bearingRangeValidator = bearingRangeValidator;
 exports.bearingStringValidator = bearingStringValidator;
 exports.bearingValueFormatter = bearingValueFormatter;
+exports.colStateFlexed = colStateFlexed;
+exports.colStateId = colStateId;
+exports.colStateNotFlexed = colStateNotFlexed;
 exports.convertDDToDMS = convertDDToDMS;
 exports.createCheckboxMultiFilterParams = createCheckboxMultiFilterParams;
 exports.defaultValueFormatter = defaultValueFormatter;