@linzjs/step-ag-grid 7.10.2 → 7.11.0

package/dist/src/components/Grid.d.ts

@@ -21,6 +21,7 @@ export interface GridProps {
     animateRows?: boolean;
     rowClassRules?: GridOptions["rowClassRules"];
     rowSelection?: "single" | "multiple";
+    autoSelectFirstRow?: boolean;
 }
 /**
  * Wrapper for AgGrid to add commonly used functionality.

package/dist/src/contexts/GridContext.d.ts

@@ -2,7 +2,7 @@
 import { GridApi, RowNode } from "ag-grid-community";
 import { GridBaseRow } from "../components/Grid";
 export interface GridContextType {
-    gridReady: () => boolean;
+    gridReady: boolean;
     setGridApi: (gridApi: GridApi | undefined) => void;
     setQuickFilter: (quickFilter: string) => void;
     editingCells: () => boolean;
@@ -23,5 +23,7 @@ export interface GridContextType {
         field?: string;
     }, fnUpdate: (selectedRows: any[]) => Promise<boolean>, setSaving?: (saving: boolean) => void, tabDirection?: 1 | 0 | -1) => Promise<boolean>;
     redrawRows: (rowNodes?: RowNode[]) => void;
+    setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
+    waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
 }
 export declare const GridContext: import("react").Context<GridContextType>;

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

@@ -1954,10 +1954,7 @@ var MenuRadioGroupFr = function (_a, externalRef) {
 var MenuRadioGroup = forwardRef(MenuRadioGroupFr);
 
 var GridContext = createContext({
-    gridReady: function () {
-        console.error("no context provider for gridReady");
-        return false;
-    },
+    gridReady: false,
     setGridApi: function () {
         console.error("no context provider for setGridApi");
     },
@@ -2024,7 +2021,16 @@ var GridContext = createContext({
     }); },
     redrawRows: function () {
         console.error("no context provider for redrawRows");
-    }
+    },
+    setExternallySelectedItemsAreInSync: function () {
+        console.error("no context provider for setExternallySelectedItemsAreInSync");
+    },
+    waitForExternallySelectedItemsToBeInSync: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.error("no context provider for waitForExternallySelectedItemsToBeInSync");
+            return [2 /*return*/];
+        });
+    }); }
 });
 
 var GridUpdatingContext = createContext({
@@ -2048,19 +2054,13 @@ var GridUpdatingContext = createContext({
  */
 var GridContextProvider = function (props) {
     var modifyUpdating = useContext(GridUpdatingContext).modifyUpdating;
-    var gridApiRef = useRef();
+    var _a = useState(), gridApi = _a[0], _setGridApi = _a[1];
+    var _b = useState(false), gridReady = _b[0], setGridReady = _b[1];
     var idsBeforeUpdate = useRef([]);
-    /**
-     * Has Grid api has been set?
-     * Some ops in components may occur before onGridReady has been called,
-     * and thus will need to check grid is ready before calling.
-     */
-    var gridReady = function () { return gridApiRef.current != null; };
-    /**
-     * Set current ref to grid api.
-     */
-    var setGridApi = function (_gridApi) {
-        gridApiRef.current = _gridApi;
+    var externallySelectedItemsAreInSync = useRef(false);
+    var setGridApi = function (gridApi) {
+        _setGridApi(gridApi);
+        setGridReady(!!gridApi);
     };
     /**
      * Wraps things that require gridApi in common handling, for when gridApi not present.
@@ -2072,7 +2072,6 @@ var GridContextProvider = function (props) {
         if (!noApiFn) {
             noApiFn = (function () { });
         }
-        var gridApi = gridApiRef.current;
         return gridApi ? hasApiFn(gridApi) : noApiFn();
     };
     /**
@@ -2130,7 +2129,7 @@ var GridContextProvider = function (props) {
      * @param retryCount Table updates may not be present when this is called, so retry is needed.
      */
     var _selectRowsWithOptionalFlash = function (rowIds, select, flash, retryCount) {
-        if (retryCount === void 0) { retryCount = 5; }
+        if (retryCount === void 0) { retryCount = 15; }
         return gridApiOp(function (gridApi) {
             var _a;
             var rowNodes = rowIds ? _rowIdsToNodes(rowIds) : _getNewNodes();
@@ -2322,6 +2321,29 @@ var GridContextProvider = function (props) {
                 gridApi.tabToPreviousCell();
         });
     };
+    var setExternallySelectedItemsAreInSync = function (inSync) {
+        externallySelectedItemsAreInSync.current = inSync;
+    };
+    var waitForExternallySelectedItemsToBeInSync = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var i;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    i = 0;
+                    _a.label = 1;
+                case 1:
+                    if (!(i < 5000 / 200 && !externallySelectedItemsAreInSync.current)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, wait$2(200)];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3:
+                    i++;
+                    return [3 /*break*/, 1];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
     return (jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
             setGridApi: setGridApi,
@@ -2340,7 +2362,9 @@ var GridContextProvider = function (props) {
             sizeColumnsToFit: sizeColumnsToFit,
             stopEditing: stopEditing,
             updatingCells: updatingCells,
-            redrawRows: redrawRows
+            redrawRows: redrawRows,
+            setExternallySelectedItemsAreInSync: setExternallySelectedItemsAreInSync,
+            waitForExternallySelectedItemsToBeInSync: waitForExternallySelectedItemsToBeInSync
         } }, { children: props.children })));
 };
 
@@ -2670,12 +2694,29 @@ var GridHeaderSelect = function (_a) {
  */
 var Grid = function (params) {
     var _a, _b, _c;
-    var _d = useContext(GridContext), gridReady = _d.gridReady, setGridApi = _d.setGridApi, setQuickFilter = _d.setQuickFilter, ensureRowVisible = _d.ensureRowVisible, selectRowsById = _d.selectRowsById, ensureSelectedRowIsVisible = _d.ensureSelectedRowIsVisible, sizeColumnsToFit = _d.sizeColumnsToFit;
+    var _d = useContext(GridContext), gridReady = _d.gridReady, setGridApi = _d.setGridApi, setQuickFilter = _d.setQuickFilter, ensureRowVisible = _d.ensureRowVisible, selectRowsById = _d.selectRowsById, ensureSelectedRowIsVisible = _d.ensureSelectedRowIsVisible, sizeColumnsToFit = _d.sizeColumnsToFit, setExternallySelectedItemsAreInSync = _d.setExternallySelectedItemsAreInSync;
     var checkUpdating = useContext(GridUpdatingContext).checkUpdating;
     var _e = useState(""), internalQuickFilter = _e[0], setInternalQuickFilter = _e[1];
     var lastSelectedIds = useRef([]);
     var _f = useState(false), staleGrid = _f[0], setStaleGrid = _f[1];
     var postSortRows = usePostSortRowsHook({ setStaleGrid: setStaleGrid });
+    /**
+     * On data load select the first row of the grid if required.
+     */
+    var hasSelectedFirstItem = useRef(false);
+    useEffect(function () {
+        if (!gridReady || !params.autoSelectFirstRow || hasSelectedFirstItem.current || !params.rowData)
+            return;
+        hasSelectedFirstItem.current = true;
+        if (isNotEmpty(params.rowData)) {
+            if (params.setExternalSelectedItems) {
+                params.setExternalSelectedItems([params.rowData[0]]);
+            }
+            else {
+                selectRowsById([params.rowData[0].id]);
+            }
+        }
+    }, [gridReady, params, params.autoSelectFirstRow, params.rowData, selectRowsById]);
     /**
      * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
      * This passes the event to the checkbox when you click anywhere in the cell.
@@ -2692,36 +2733,45 @@ var Grid = function (params) {
      */
     var synchroniseExternalStateToGridSelection = useCallback(function (_a) {
         var api = _a.api;
-        if (!params.externalSelectedItems || !params.setExternalSelectedItems)
+        if (!params.externalSelectedItems || !params.setExternalSelectedItems) {
+            setExternallySelectedItemsAreInSync(true);
             return;
+        }
         var selectedRows = api.getSelectedRows();
         // We don't want to update selected Items if it hasn't changed to prevent excess renders
         if (params.externalSelectedItems.length != selectedRows.length ||
             isNotEmpty(xorBy(selectedRows, params.externalSelectedItems, function (row) { return row.id; }))) {
+            setExternallySelectedItemsAreInSync(false);
             params.setExternalSelectedItems(__spreadArray([], selectedRows, true));
         }
-    }, [params]);
+        else {
+            setExternallySelectedItemsAreInSync(true);
+        }
+    }, [params, setExternallySelectedItemsAreInSync]);
     /**
      * Synchronise externally selected items to grid.
      * If new ids are selected scroll them into view.
      */
     var synchroniseExternallySelectedItemsToGrid = useCallback(function () {
-        if (!gridReady())
+        if (!gridReady)
             return;
-        if (!params.externalSelectedItems)
+        if (!params.externalSelectedItems) {
+            setExternallySelectedItemsAreInSync(true);
             return;
+        }
         var selectedIds = params.externalSelectedItems.map(function (row) { return row.id; });
         var lastNewId = last(difference(selectedIds, lastSelectedIds.current));
         if (lastNewId != null)
             ensureRowVisible(lastNewId);
         lastSelectedIds.current = selectedIds;
         selectRowsById(selectedIds);
-    }, [params.externalSelectedItems, ensureRowVisible, gridReady, selectRowsById]);
+        setExternallySelectedItemsAreInSync(true);
+    }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
     /**
      * Synchronise quick filter to grid
      */
     var updateQuickFilter = useCallback(function () {
-        if (!gridReady())
+        if (!gridReady)
             return;
         if (params.quickFilter) {
             setQuickFilter(internalQuickFilter);