@linzjs/step-ag-grid 8.2.0 → 8.2.2

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

@@ -4,6 +4,7 @@ import { GridBaseRow } from "../components/Grid";
 export interface GridContextType {
     gridReady: boolean;
     setGridApi: (gridApi: GridApi | undefined) => void;
+    prePopupOps: () => void;
     setQuickFilter: (quickFilter: string) => void;
     editingCells: () => boolean;
     getSelectedRows: <T extends GridBaseRow>() => T[];

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

@@ -1962,6 +1962,9 @@ var MenuRadioGroup = forwardRef(MenuRadioGroupFr);
 
 var GridContext = createContext({
     gridReady: false,
+    prePopupOps: function () {
+        console.error("no context provider for prePopupOps");
+    },
     externallySelectedItemsAreInSync: false,
     setGridApi: function () {
         console.error("no context provider for setGridApi");
@@ -2071,6 +2074,7 @@ var GridContextProvider = function (props) {
     var _a = useState(), gridApi = _a[0], _setGridApi = _a[1];
     var _b = useState(false), gridReady = _b[0], setGridReady = _b[1];
     var idsBeforeUpdate = useRef([]);
+    var prePopupFocusedCell = useRef();
     var _c = useState(false), externallySelectedItemsAreInSync = _c[0], setExternallySelectedItemsAreInSync = _c[1];
     var setGridApi = useCallback(function (gridApi) {
         _setGridApi(gridApi);
@@ -2088,6 +2092,13 @@ var GridContextProvider = function (props) {
         }
         return gridApi ? hasApiFn(gridApi) : noApiFn();
     }, [gridApi]);
+    /**
+     * Before a popup record the currently focused cell.
+     */
+    var prePopupOps = useCallback(function () {
+        var _a;
+        prePopupFocusedCell.current = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getFocusedCell()) !== null && _a !== void 0 ? _a : undefined;
+    }, [gridApi]);
     /**
      * Set the quick filter value to grid.
      */
@@ -2273,7 +2284,12 @@ var GridContextProvider = function (props) {
             document.body.clientWidth && gridApi.sizeColumnsToFit();
         });
     }, [gridApiOp]);
-    var stopEditing = useCallback(function () { return gridApiOp(function (gridApi) { return gridApi.stopEditing(); }); }, [gridApiOp]);
+    var stopEditing = useCallback(function () {
+        if (prePopupFocusedCell.current) {
+            gridApi === null || gridApi === void 0 ? void 0 : gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+        }
+        gridApiOp(function (gridApi) { return gridApi.stopEditing(); });
+    }, [gridApi, gridApiOp]);
     var selectNextCell = useCallback(function (tabDirection) {
         if (tabDirection === void 0) { tabDirection = 0; }
         gridApiOp(function (gridApi) {
@@ -2289,12 +2305,11 @@ var GridContextProvider = function (props) {
                 case 0:
                     setSaving && setSaving(true);
                     return [4 /*yield*/, gridApiOp(function (gridApi) { return __awaiter(void 0, void 0, void 0, function () {
-                            var preOpCell, selectedRows, ok, cell, postOpCell;
+                            var selectedRows, ok, cell, postPopupFocusedCell;
                             var _a;
                             return __generator(this, function (_b) {
                                 switch (_b.label) {
                                     case 0:
-                                        preOpCell = gridApi.getFocusedCell();
                                         selectedRows = props.selectedRows;
                                         ok = false;
                                         return [4 /*yield*/, modifyUpdating((_a = props.field) !== null && _a !== void 0 ? _a : "", selectedRows.map(function (data) { return data.id; }), function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -2329,12 +2344,12 @@ var GridContextProvider = function (props) {
                                             // Don't set saving if ok as the form has already closed
                                             setSaving && setSaving(false);
                                         }
-                                        postOpCell = gridApi.getFocusedCell();
+                                        postPopupFocusedCell = gridApi.getFocusedCell();
                                         if (tabDirection &&
-                                            preOpCell &&
-                                            postOpCell &&
-                                            preOpCell.rowIndex == postOpCell.rowIndex &&
-                                            preOpCell.column.getColId() == postOpCell.column.getColId()) {
+                                            prePopupFocusedCell.current &&
+                                            postPopupFocusedCell &&
+                                            prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
+                                            prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()) {
                                             selectNextCell(tabDirection);
                                         }
                                         return [2 /*return*/, ok];
@@ -2372,6 +2387,7 @@ var GridContextProvider = function (props) {
     }); }, [externallySelectedItemsAreInSync]);
     return (jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
+            prePopupOps: prePopupOps,
             setGridApi: setGridApi,
             setQuickFilter: setQuickFilter,
             selectRowsById: selectRowsById,
@@ -2722,7 +2738,7 @@ 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, focusByRowById = _d.focusByRowById, ensureSelectedRowIsVisible = _d.ensureSelectedRowIsVisible, sizeColumnsToFit = _d.sizeColumnsToFit, externallySelectedItemsAreInSync = _d.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _d.setExternallySelectedItemsAreInSync;
+    var _d = useContext(GridContext), gridReady = _d.gridReady, setGridApi = _d.setGridApi, prePopupOps = _d.prePopupOps, setQuickFilter = _d.setQuickFilter, ensureRowVisible = _d.ensureRowVisible, selectRowsById = _d.selectRowsById, focusByRowById = _d.focusByRowById, ensureSelectedRowIsVisible = _d.ensureSelectedRowIsVisible, sizeColumnsToFit = _d.sizeColumnsToFit, externallySelectedItemsAreInSync = _d.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _d.setExternallySelectedItemsAreInSync;
     var checkUpdating = useContext(GridUpdatingContext).checkUpdating;
     var _e = useState(""), internalQuickFilter = _e[0], setInternalQuickFilter = _e[1];
     var lastSelectedIds = useRef([]);
@@ -2888,6 +2904,7 @@ var Grid = function (params) {
     }, []);
     var startCellEditing = useCallback(function (event) {
         var _a;
+        prePopupOps();
         if (!event.node.isSelected()) {
             event.node.setSelected(true, true);
         }
@@ -2901,7 +2918,7 @@ var Grid = function (params) {
                 colKey: event.column.getColId()
             });
         }
-    }, [checkUpdating]);
+    }, [checkUpdating, prePopupOps]);
     var onCellDoubleClick = useCallback(function (event) {
         if (!invokeEditAction(event))
             startCellEditing(event);
@@ -2932,12 +2949,6 @@ var Grid = function (params) {
                 startCellEditing(e);
         }
     }, [startCellEditing]);
-    var onCellEditingStopped = useCallback(function (event) {
-        refreshSelectedRows(event);
-        // The grid loses cell focus after editing
-        var cell = event.api.getFocusedCell();
-        cell && event.api.setFocusedCell(cell.rowIndex, cell.column);
-    }, [refreshSelectedRows]);
     // When rows added or removed then resize columns
     useEffect(function () {
         if (columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length) {
@@ -2946,7 +2957,7 @@ var Grid = function (params) {
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
     return (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 && (jsx("div", __assign({ className: "Grid-quickFilter" }, { children: 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);
-                    } }) }))), jsx(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, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll })] })));
+                    } }) }))), jsx(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, 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, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll })] })));
 };
 
 var GridCellMultiSelectClassRules = {
@@ -3955,9 +3966,12 @@ var GridFormPopoverMenu = function (props) {
                     setSubComponentSelected(subComponentSelected === item ? null : item);
                     e.keepOpen = true;
                     return [3 /*break*/, 3];
-                case 1: return [4 /*yield*/, updateValue(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-                        return [2 /*return*/, actionClick(item)];
-                    }); }); }, e.key === "Tab" ? (e.shiftKey ? -1 : 1) : 0)];
+                case 1:
+                    subComponentIsValid.current = true;
+                    setSubSelectedValue(null);
+                    return [4 /*yield*/, updateValue(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                            return [2 /*return*/, actionClick(item)];
+                        }); }); }, e.key === "Tab" ? (e.shiftKey ? -1 : 1) : 0)];
                 case 2:
                     _a.sent();
                     _a.label = 3;