@linzjs/step-ag-grid 17.8.0 → 17.9.0

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

@@ -203,6 +203,9 @@ const GridContext = createContext({
     setOnCellEditingComplete: () => {
         console.error("no context provider for setOnCellEditingComplete");
     },
+    showNoRowsOverlay: () => {
+        console.error("no context provider for showLoadingOverlay");
+    },
 });
 const useGridContext = () => useContext(GridContext);
 
@@ -2339,9 +2342,8 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
  * Wrapper for AgGrid to add commonly used functionality.
  */
 const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : 40, ...params }) => {
-    const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = useContext(GridContext);
+    const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, stopEditing, } = useContext(GridContext);
     const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
-    const { prePopupOps } = useContext(GridContext);
     const gridDivRef = useRef(null);
     const lastSelectedIds = useRef([]);
     const [staleGrid, setStaleGrid] = useState(false);
@@ -2508,7 +2510,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     const columnDefs = useMemo(() => {
         const adjustColDefs = params.columnDefs.map((colDef) => {
             const colDefEditable = colDef.editable;
-            const editable = combineEditables(params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
+            const editable = combineEditables(params.loading !== true && params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
             return {
                 ...colDef,
                 editable,
@@ -2555,6 +2557,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         params.columnDefs,
         params.selectable,
         params.onRowDragEnd,
+        params.loading,
         params.readOnly,
         params.defaultColDef?.editable,
         selectColumnPinned,
@@ -2718,6 +2721,15 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
             });
         }
     }, [autoSizeColumns, getColDef, sizeColumns, updatedDep, updatingCols]);
+    const prevLoading = useRef(false);
+    useEffect(() => {
+        const newLoading = !rowData || params.loading === true;
+        if (newLoading && !prevLoading.current) {
+            stopEditing();
+            showNoRowsOverlay();
+        }
+        prevLoading.current = newLoading;
+    }, [params.loading, rowData, showNoRowsOverlay, stopEditing]);
     /**
      * Resize columns to fit if required on window/container resize
      */
@@ -2792,7 +2804,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                     }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
-                        return (jsx(GridNoRowsOverlay, { loading: !rowData, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
+                        return (jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
                     }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, onRowDragLeave: onRowDragLeave }) })] }));
 };
 
@@ -5025,6 +5037,9 @@ const GridContextProvider = (props) => {
     const isExternalFilterPresent = () => !isEmpty(externalFilters.current);
     const doesExternalFilterPass = (node) => externalFilters.current.every((filter) => filter(node.data, node));
     const getColDef = useCallback((colId) => (!!colId && gridApi?.getColumnDef(colId)) || undefined, [gridApi]);
+    const showNoRowsOverlay = useCallback(() => {
+        gridApi?.showNoRowsOverlay();
+    }, [gridApi]);
     /**
      * Apply column visibility
      */
@@ -5110,6 +5125,7 @@ const GridContextProvider = (props) => {
             doesExternalFilterPass,
             downloadCsv,
             setOnCellEditingComplete,
+            showNoRowsOverlay,
         }, children: props.children }));
 };
 /**