@linzjs/step-ag-grid 29.3.2 → 29.3.4

package/dist/step-ag-grid.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiStatusSpinner, LuiIcon, LuiButtonGroup, LuiButton, LuiCheckboxInput } from '@linzjs/lui';
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, compact, pick, groupBy, fromPairs, toPairs, isEqual, pull, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
+import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, delay, omit, sortBy, partition, compact, pick, groupBy, fromPairs, toPairs, isEqual, pull, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
 import React, { useRef, useLayoutEffect, useEffect, createContext, useContext, useState, useMemo, memo, forwardRef, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1, useId } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 
@@ -2761,8 +2761,14 @@ ModuleRegistry.registerModules([AllCommunityModule]);
  * 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, 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 } = useContext(GridUpdatingContext);
+    const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnBulkEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, startCellEditing: propStartCellEditing, } = useGridContext();
+    // CellEditingStop event happens too much for one edit
+    const startedEditRef = useRef(false);
+    const startCellEditing = useCallback((props) => {
+        startedEditRef.current = true;
+        return propStartCellEditing(props);
+    }, [propStartCellEditing]);
+    const { updatedDep, anyUpdating, updatingCols } = useContext(GridUpdatingContext);
     const gridDivRef = useRef(null);
     const lastSelectedIds = useRef([]);
     const [staleGrid, setStaleGrid] = useState(false);
@@ -2776,7 +2782,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const hasSetContentSize = useRef(false);
     const hasSetContentSizeEmpty = useRef(false);
     const needsAutoSize = useRef(true);
-    const requiresInitialSizeToFitRef = useRef(true);
+    const requiresInitialSizeToFitRef = useRef(false);
     const autoSizeResultRef = useRef(null);
     const prevRowsVisibleRef = useRef(false);
     const setInitialContentSize = useCallback(() => {
@@ -2837,9 +2843,12 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 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();
     const wasVisibleRef = useRef(false);
     /**
@@ -2988,7 +2997,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
      * This will resize columns when we have at least one row.
      */
     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
@@ -3000,10 +3009,11 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             return;
         lastUpdatedDep.current = updatedDep;
         // Don't update while there are spinners
-        if (!isEmpty(updatingCols()))
+        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()),
@@ -3011,7 +3021,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             });
         }
         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.
      */
@@ -3036,6 +3046,24 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
         }
     }, [singleClickEdit, startCellEditing]);
+    const onCellEditingStopped = useCallback((event) => {
+        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)
      */
@@ -3136,7 +3164,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
      * Resize columns to fit if required on window/container resize
      */
     const onGridResize = useCallback((event) => {
-        if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
+        if (sizeColumns === 'fit' || (!hasSetContentSizeEmpty.current && !hasSetContentSize.current)) {
             return;
         }
         if (sizeColumns !== 'none') {
@@ -3328,9 +3356,11 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                         // 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, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, onGridSizeChanged: onGridResize, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataChanged, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, 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 }) })] }));
+                    }, 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 }) })] }));
 };
 const quickFilterParser = (filterStr) => {
     // filter is exact matches exactly groups separated by commas