@linzjs/step-ag-grid 29.3.2 → 29.3.4

package/package.json

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

package/src/components/Grid.tsx

@@ -26,11 +26,11 @@ import {
 } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import clsx from 'clsx';
-import { defer, difference, isEmpty, last, omit, xorBy } from 'lodash-es';
+import { defer, delay, difference, isEmpty, last, omit, xorBy } from 'lodash-es';
 import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useInterval } from 'usehooks-ts';
 
-import { AutoSizeColumnsResult, useGridContext } from '../contexts/GridContext';
+import { AutoSizeColumnsResult, StartCellEditingProps, useGridContext } from '../contexts/GridContext';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
 import { fnOrVar, isNotEmpty } from '../utils/util';
 import { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';
@@ -170,9 +170,19 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     getColDef,
     showNoRowsOverlay,
     prePopupOps,
-    startCellEditing,
+    startCellEditing: propStartCellEditing,
   } = useGridContext<TData>();
-  const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
+  // CellEditingStop event happens too much for one edit
+  const startedEditRef = useRef(false);
+  const startCellEditing = useCallback(
+    (props: StartCellEditingProps) => {
+      startedEditRef.current = true;
+      return propStartCellEditing(props);
+    },
+    [propStartCellEditing],
+  );
+
+  const { updatedDep, anyUpdating, updatingCols } = useContext(GridUpdatingContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
   const lastSelectedIds = useRef<number[]>([]);
@@ -191,7 +201,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(() => {
@@ -253,11 +263,13 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         // It should be impossible to get here
         console.error('Unknown value returned from hasGridRendered');
       }
+    } else {
+      sizeColumnsToFit();
     }
 
     setAutoSized(true);
     needsAutoSize.current = false;
-  }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns]);
+  }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns, sizeColumnsToFit]);
 
   const lastOwnerDocumentRef = useRef<Document>();
   const wasVisibleRef = useRef(false);
@@ -432,7 +444,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
@@ -445,10 +457,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()),
@@ -456,7 +470,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.
@@ -491,6 +505,28 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     [singleClickEdit, startCellEditing],
   );
 
+  const onCellEditingStopped = useCallback(
+    (event: AgGridEvent<TData>) => {
+      if (!startedEditRef.current) {
+        return;
+      }
+      startedEditRef.current = false;
+      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)
    */
@@ -603,7 +639,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const onGridResize = useCallback(
     (event: AgGridEvent<TData>) => {
-      if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
+      if (sizeColumns === 'fit' || (!hasSetContentSizeEmpty.current && !hasSetContentSize.current)) {
         return;
       }
       if (sizeColumns !== 'none') {
@@ -863,7 +899,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
             // 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;
-              sizeColumnsToFit();
+              delay(() => {
+                sizeColumnsToFit();
+              }, 200);
             }
           }}
           rowHeight={rowHeight}
@@ -874,11 +912,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}