@linzjs/step-ag-grid 29.11.1 → 29.11.3

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/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(() => {
@@ -2828,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);
                 }
             }
@@ -2836,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);
                 }
             }
@@ -3131,8 +3128,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
@@ -3171,26 +3169,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
      */
@@ -3210,17 +3188,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(() => {
@@ -3357,21 +3335,18 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         selectColumnPinned,
         selectable,
     ]);
+    const onGridSizeChanged = React.useCallback((event) => {
+        if (sizeColumns === 'fit') {
+            event.api.sizeColumnsToFit();
+        }
+    }, [sizeColumns]);
     return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { theme: 'legacy', rowSelection: selectable
                         ? {
                             enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                             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, onGridSizeChanged: onGridSizeChanged, 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
@@ -5347,6 +5322,7 @@ const waitForCondition = async (error, condition, timeoutMs) => {
 
 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.
@@ -5639,22 +5615,34 @@ const GridContextProvider = (props) => {
             return null;
         }
         const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
-        const colStates = gridApi.getColumnState();
-        const relevantCols = colStates?.filter((colState) => {
-            const colId = colState.colId;
-            return (lodashEs.isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
-        });
-        const [flexColumns, nonFlexColumns] = lodashEs.partition(relevantCols, colStateFlexed);
+        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]);
     /**
@@ -6219,6 +6207,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;