@linzjs/step-ag-grid 7.10.2 → 7.11.1

package/README.md

@@ -41,6 +41,8 @@ Storybook demo deployed at: https://linz.github.io/step-ag-grid/
 
 ## Usage
 
+Check `src\stories` for more usage examples
+
 ```tsx
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
@@ -133,4 +135,49 @@ const GridDemo = () => {
 };
 ```
 
-Check `src\stories` for more usage examples
+## Writing tests
+
+The following testing calls can be imported from step-ag-grid:
+
+- findRow
+- queryRow
+- selectRow
+- deselectRow
+- findCell
+- selectCell
+- editCell
+- findOpenMenu
+- queryMenuOption
+- findMenuOption
+- clickMenuOption
+- openAndClickMenuOption
+- getMultiSelectOptions
+- findMultiSelectOption
+- clickMultiSelectOption
+- typeOtherInput
+- typeOtherTextArea
+- closeMenu
+- findActionButton
+- clickActionButton
+
+```tsx
+import { render, screen } from "@testing-library/react";
+import { waitFor } from "@testing-library/react";
+import { findRow, GridUpdatingContextProvider, openAndClickMenuOption } from "@linzjs/step-ag-grid";
+
+const TestComponent = (): JSX.Element => {
+  return (
+    <GridUpdatingContextProvider>
+      <MyGrid />
+    </GridUpdatingContextProvider>
+  );
+};
+
+test("click Delete menu option removes row from the table", async () => {
+  await render(<TestComponent />);
+  await screen.findByText("My component header");
+  expect((await findRow(12345)).getAttribute("row-index")).toBe("1");
+  await openAndClickMenuOption(12345, "actions", "Delete");
+  await waitFor(async () => expect((await queryRow(12345)).not.toBeDefined());
+});
+```

package/dist/index.js

@@ -1975,10 +1975,7 @@ var MenuRadioGroupFr = function (_a, externalRef) {
 var MenuRadioGroup = React.forwardRef(MenuRadioGroupFr);
 
 var GridContext = React.createContext({
-    gridReady: function () {
-        console.error("no context provider for gridReady");
-        return false;
-    },
+    gridReady: false,
     setGridApi: function () {
         console.error("no context provider for setGridApi");
     },
@@ -2045,7 +2042,16 @@ var GridContext = React.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 = React.createContext({
@@ -2069,19 +2075,13 @@ var GridUpdatingContext = React.createContext({
  */
 var GridContextProvider = function (props) {
     var modifyUpdating = React.useContext(GridUpdatingContext).modifyUpdating;
-    var gridApiRef = React.useRef();
+    var _a = React.useState(), gridApi = _a[0], _setGridApi = _a[1];
+    var _b = React.useState(false), gridReady = _b[0], setGridReady = _b[1];
     var idsBeforeUpdate = React.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 = React.useRef(false);
+    var setGridApi = function (gridApi) {
+        _setGridApi(gridApi);
+        setGridReady(!!gridApi);
     };
     /**
      * Wraps things that require gridApi in common handling, for when gridApi not present.
@@ -2093,7 +2093,6 @@ var GridContextProvider = function (props) {
         if (!noApiFn) {
             noApiFn = (function () { });
         }
-        var gridApi = gridApiRef.current;
         return gridApi ? hasApiFn(gridApi) : noApiFn();
     };
     /**
@@ -2151,7 +2150,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();
@@ -2343,6 +2342,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 (jsxRuntime.jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
             setGridApi: setGridApi,
@@ -2361,7 +2383,9 @@ var GridContextProvider = function (props) {
             sizeColumnsToFit: sizeColumnsToFit,
             stopEditing: stopEditing,
             updatingCells: updatingCells,
-            redrawRows: redrawRows
+            redrawRows: redrawRows,
+            setExternallySelectedItemsAreInSync: setExternallySelectedItemsAreInSync,
+            waitForExternallySelectedItemsToBeInSync: waitForExternallySelectedItemsToBeInSync
         } }, { children: props.children })));
 };
 
@@ -2691,12 +2715,29 @@ var GridHeaderSelect = function (_a) {
  */
 var Grid = function (params) {
     var _a, _b, _c;
-    var _d = React.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 = React.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 = React.useContext(GridUpdatingContext).checkUpdating;
     var _e = React.useState(""), internalQuickFilter = _e[0], setInternalQuickFilter = _e[1];
     var lastSelectedIds = React.useRef([]);
     var _f = React.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 = React.useRef(false);
+    React.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.
@@ -2713,36 +2754,45 @@ var Grid = function (params) {
      */
     var synchroniseExternalStateToGridSelection = React.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(lodashEs.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 = React.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 = lodashEs.last(lodashEs.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 = React.useCallback(function () {
-        if (!gridReady())
+        if (!gridReady)
             return;
         if (params.quickFilter) {
             setQuickFilter(internalQuickFilter);
@@ -2856,7 +2906,7 @@ var Grid = function (params) {
             sizeColumnsToFit();
         }
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
-    return (jsxRuntime.jsxs("div", __assign({ "data-testid": params["data-testid"], className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale") }, { children: [params.quickFilter && (jsxRuntime.jsx("div", __assign({ className: "Grid-quickFilter" }, { children: jsxRuntime.jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
+    return (jsxRuntime.jsxs("div", __assign({ "data-testid": params["data-testid"], className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: [params.quickFilter && (jsxRuntime.jsx("div", __assign({ className: "Grid-quickFilter" }, { children: jsxRuntime.jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
                         setInternalQuickFilter(event.target.value);
                     } }) }))), jsxRuntime.jsx(agGridReact.AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, defaultColDef: params.defaultColDef, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: (_b = params.rowSelection) !== null && _b !== void 0 ? _b : "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_c = params.postSortRows) !== null && _c !== void 0 ? _c : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
 };
@@ -24451,17 +24501,36 @@ var _selectRow = function (select, rowId, within) { return __awaiter(void 0, voi
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0: return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var row, isSelected;
+                    var row, isSelected, cell;
                     return __generator(this, function (_a) {
                         switch (_a.label) {
                             case 0: return [4 /*yield*/, findRow(rowId, within)];
                             case 1:
                                 row = _a.sent();
-                                isSelected = !row.className.includes("ag-row-selected");
-                                if (select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected)) {
-                                    userEvent.click(row);
-                                }
-                                return [2 /*return*/];
+                                isSelected = row.className.includes("ag-row-selected");
+                                if (!(select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected))) return [3 /*break*/, 4];
+                                return [4 /*yield*/, findCell(rowId, "selection", within)];
+                            case 2:
+                                cell = _a.sent();
+                                userEvent.click(cell);
+                                return [4 /*yield*/, waitForWrapper(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                        var row, nowSelected;
+                                        return __generator(this, function (_a) {
+                                            switch (_a.label) {
+                                                case 0: return [4 /*yield*/, findRow(rowId, within)];
+                                                case 1:
+                                                    row = _a.sent();
+                                                    nowSelected = row.className.includes("ag-row-selected");
+                                                    if (nowSelected == isSelected)
+                                                        throw "Row ".concat(rowId, " won't select");
+                                                    return [2 /*return*/];
+                                            }
+                                        });
+                                    }); })];
+                            case 3:
+                                _a.sent();
+                                _a.label = 4;
+                            case 4: return [2 /*return*/];
                         }
                     });
                 }); })];
@@ -24532,22 +24601,25 @@ var selectCell = function (rowId, colId, within) { return __awaiter(void 0, void
 var editCell = function (rowId, colId, within) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var cell;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0: return [4 /*yield*/, findCell(rowId, colId, within)];
-                            case 1:
-                                cell = _a.sent();
-                                userEvent.dblClick(cell);
-                                return [2 /*return*/];
-                        }
-                    });
-                }); })];
+            case 0: return [4 /*yield*/, selectRow(rowId, within)];
             case 1:
                 _a.sent();
-                return [4 /*yield*/, findOpenMenu()];
+                return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        var cell;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, findCell(rowId, colId, within)];
+                                case 1:
+                                    cell = _a.sent();
+                                    userEvent.dblClick(cell);
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); })];
             case 2:
+                _a.sent();
+                return [4 /*yield*/, waitForWrapper(findOpenMenu)];
+            case 3:
                 _a.sent();
                 return [2 /*return*/];
         }
@@ -24588,27 +24660,25 @@ var findMenuOption = function (menuOptionText) { return __awaiter(void 0, void 0
                                 return [2 /*return*/, menuOption];
                         }
                     });
-                }); }, { timeout: 10000 })];
+                }); }, { timeout: 5000 })];
             case 1: return [2 /*return*/, _a.sent()];
         }
     });
 }); };
 var clickMenuOption = function (menuOptionText) { return __awaiter(void 0, void 0, void 0, function () {
+    var menuOption;
     return __generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var menuOption;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0: return [4 /*yield*/, findMenuOption(menuOptionText)];
-                            case 1:
-                                menuOption = _a.sent();
-                                menuOption && userEvent.click(menuOption);
-                                return [2 /*return*/];
-                        }
-                    });
-                }); })];
+            case 0: return [4 /*yield*/, findMenuOption(menuOptionText)];
             case 1:
+                menuOption = _a.sent();
+                return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            userEvent.click(menuOption);
+                            return [2 /*return*/];
+                        });
+                    }); })];
+            case 2:
                 _a.sent();
                 return [2 /*return*/];
         }
@@ -24619,12 +24689,9 @@ var openAndClickMenuOption = function (rowId, colId, menuOptionText, within) { r
         switch (_a.label) {
             case 0: return [4 /*yield*/, editCell(rowId, colId, within)];
             case 1:
-                _a.sent();
-                return [4 /*yield*/, wait$2(100)];
-            case 2:
                 _a.sent();
                 return [4 /*yield*/, clickMenuOption(menuOptionText)];
-            case 3:
+            case 2:
                 _a.sent();
                 return [2 /*return*/];
         }