@linzjs/step-ag-grid 29.3.1 → 29.3.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.3.1",
+  "version": "29.3.3",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -172,8 +172,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     prePopupOps,
     startCellEditing,
   } = useGridContext<TData>();
-
-  const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
+  const { updatedDep, anyUpdating, updatingCols } = useContext(GridUpdatingContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
   const lastSelectedIds = useRef<number[]>([]);
@@ -192,7 +191,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const hasSetContentSizeEmpty = useRef(false);
   const needsAutoSize = useRef(true);
 
-  const requiresInitialSizeToFitRef = useRef(true);
+  const requiresInitialSizeToFitRef = useRef(false);
   const autoSizeResultRef = useRef<AutoSizeColumnsResult | null>(null);
   const prevRowsVisibleRef = useRef(false);
   const setInitialContentSize = useCallback(() => {
@@ -254,16 +253,8 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         // It should be impossible to get here
         console.error('Unknown value returned from hasGridRendered');
       }
-
-      // If there's no contentSize callback there'll be on onGridResize callback
-      // which is required to run sizeColumnsToFit.
-      // There's also the possibility that the panel was already the right size so didn't trigger onGridResize.
-      delay(() => {
-        if (requiresInitialSizeToFitRef.current) {
-          requiresInitialSizeToFitRef.current = false;
-          sizeColumnsToFit();
-        }
-      }, 50);
+    } else {
+      sizeColumnsToFit();
     }
 
     setAutoSized(true);
@@ -443,7 +434,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const previousRowDataLength = useRef(0);
 
-  const onRowDataChanged = useCallback(() => {
+  const onRowDataUpdated = useCallback(() => {
     const length = rowData?.length ?? 0;
     if (previousRowDataLength.current !== length) {
       // We need to autosize all cells again
@@ -456,10 +447,12 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     lastUpdatedDep.current = updatedDep;
 
     // Don't update while there are spinners
-    if (!isEmpty(updatingCols())) return;
+    if (anyUpdating()) {
+      return;
+    }
 
     const skipHeader = sizeColumns === 'auto-skip-headers';
-    if (hasSetContentSize.current) {
+    if ((sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') && hasSetContentSize.current) {
       autoSizeColumns({
         skipHeader,
         userSizedColIds: new Set(userSizedColIds.current.keys()),
@@ -467,7 +460,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       });
     }
     colIdsEdited.current.clear();
-  }, [autoSizeColumns, rowData?.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
+  }, [autoSizeColumns, rowData?.length, setInitialContentSize, sizeColumns, updatedDep, anyUpdating]);
 
   /**
    * Show/hide no rows overlay when model changes.
@@ -502,6 +495,24 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     [singleClickEdit, startCellEditing],
   );
 
+  const onCellEditingStopped = useCallback(
+    (event: AgGridEvent<TData>) => {
+      const api = event.api;
+      // We need to redraw on fit as the updated row heights aren't visible
+      if (sizeColumns === 'fit') {
+        delay(() => {
+          // Don't update if currently editing, that will stop the edit
+          if (!anyUpdating() && document.querySelectorAll('.szh-menu--state-open').length === 0) {
+            if (!api.isDestroyed()) {
+              api.redrawRows();
+            }
+          }
+        }, 500);
+      }
+    },
+    [anyUpdating, sizeColumns],
+  );
+
   /**
    * If cell has an edit action invoke it (if editable)
    */
@@ -614,6 +625,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const onGridResize = useCallback(
     (event: AgGridEvent<TData>) => {
+      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
@@ -626,7 +640,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
             }),
           ),
         ];
-        requiresInitialSizeToFitRef.current = false;
         defer(() => event.api.sizeColumnsToFit({ columnLimits }));
       }
     },
@@ -651,6 +664,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       if (width == null) {
         return;
       }
+
       switch (e.source) {
         case 'uiColumnResized':
           userSizedColIds.current.set(colId, width);
@@ -863,10 +877,19 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
               ? {
                   enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                   enableClickSelection: params.enableClickSelection ?? false,
-                  mode: rowSelection == 'single' ? 'singleRow' : 'multiRow',
+                  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;
+              delay(() => {
+                sizeColumnsToFit();
+              }, 200);
+            }
+          }}
           rowHeight={rowHeight}
           animateRows={params.animateRows ?? false}
           rowClassRules={params.rowClassRules}
@@ -875,11 +898,12 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           suppressColumnVirtualisation={suppressColumnVirtualization}
           suppressClickEdit={true}
           onColumnVisible={setInitialContentSize}
-          onRowDataUpdated={onRowDataChanged}
+          onRowDataUpdated={onRowDataUpdated}
           onCellFocused={onCellFocused}
           onCellKeyDown={onCellKeyPress}
           onCellClicked={onCellClicked}
           onCellDoubleClicked={onCellDoubleClick}
+          onCellEditingStopped={onCellEditingStopped}
           domLayout={params.domLayout}
           onColumnResized={onColumnResized}
           defaultColDef={defaultColDef}