@linzjs/step-ag-grid 5.0.0 → 6.0.0

package/dist/index.js

@@ -1347,8 +1347,10 @@ var ControlledMenuFr = function (_a, externalRef) {
             // the cell doesn't refresh during update if save is invoked from a native event
             // This doesn't happen in React18
             // To work around it, I invoke the save by clicking on a passed in invisible button ref
-            if (saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current)
+            if (saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current) {
+                saveButtonRef.current.setAttribute("data-reason", CloseReason.BLUR);
                 saveButtonRef.current.click();
+            }
             else
                 safeCall(onClose, { reason: CloseReason.BLUR });
             // If a user clicks on the menu button when a menu is open, we need to close the menu.
@@ -1481,8 +1483,8 @@ var ControlledMenuFr = function (_a, externalRef) {
             thisDocument_1.addEventListener("click", handleScreenEventForCancel, true);
             thisDocument_1.addEventListener("dblclick", handleScreenEventForCancel, true);
             return function () {
-                thisDocument_1.addEventListener("keydown", handleKeydownTabAndEnter, true);
-                thisDocument_1.addEventListener("keyup", handleKeyupTabAndEnter, true);
+                thisDocument_1.removeEventListener("keydown", handleKeydownTabAndEnter, true);
+                thisDocument_1.removeEventListener("keyup", handleKeyupTabAndEnter, true);
                 thisDocument_1.removeEventListener("mousedown", handleScreenEventForSave, true);
                 thisDocument_1.removeEventListener("mouseup", handleScreenEventForCancel, true);
                 thisDocument_1.removeEventListener("click", handleScreenEventForCancel, true);
@@ -1517,7 +1519,12 @@ var ControlledMenuFr = function (_a, externalRef) {
                 safeCall(onClose, {
                     value: event.value,
                     key: event.key,
-                    reason: CloseReason.CLICK
+                    shiftKey: event.shiftKey,
+                    reason: event.key === "Tab"
+                        ? event.shiftKey
+                            ? CloseReason.TAB_BACKWARD
+                            : CloseReason.TAB_FORWARD
+                        : CloseReason.CLICK
                 });
             }
         },
@@ -1986,9 +1993,6 @@ var GridContext = react.createContext({
     }); },
     redrawRows: function () {
         console.error("no context provider for redrawRows");
-    },
-    selectNextCell: function () {
-        console.error("no context provider for selectNextCell");
     }
 });
 
@@ -2208,17 +2212,18 @@ var GridContextProvider = function (props) {
         });
     };
     var stopEditing = function () { return gridApiOp(function (gridApi) { return gridApi.stopEditing(); }); };
-    var updatingCells = function (props, fnUpdate, setSaving) { return __awaiter(void 0, void 0, void 0, function () {
+    var updatingCells = function (props, fnUpdate, setSaving, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     setSaving && setSaving(true);
                     return [4 /*yield*/, gridApiOp(function (gridApi) { return __awaiter(void 0, void 0, void 0, function () {
-                            var selectedRows, ok, cell;
+                            var preOpCell, selectedRows, ok, cell, postOpCell;
                             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 () {
@@ -2250,6 +2255,14 @@ var GridContextProvider = function (props) {
                                             // Don't set saving if ok as the form has already closed
                                             setSaving && setSaving(false);
                                         }
+                                        postOpCell = gridApi.getFocusedCell();
+                                        if (tabDirection &&
+                                            preOpCell &&
+                                            postOpCell &&
+                                            preOpCell.rowIndex == postOpCell.rowIndex &&
+                                            preOpCell.column.getColId() == postOpCell.column.getColId()) {
+                                            selectNextCell(tabDirection);
+                                        }
                                         return [2 /*return*/, ok];
                                 }
                             });
@@ -2290,8 +2303,7 @@ var GridContextProvider = function (props) {
             sizeColumnsToFit: sizeColumnsToFit,
             stopEditing: stopEditing,
             updatingCells: updatingCells,
-            redrawRows: redrawRows,
-            selectNextCell: selectNextCell
+            redrawRows: redrawRows
         } }, { children: props.children })));
 };
 
@@ -2356,8 +2368,9 @@ var useGridPopoverContext = function () {
 var GridPopoverContextProvider = function (_a) {
     var _b, _c, _d;
     var props = _a.props, children = _a.children;
-    var _e = react.useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells, stopEditing = _e.stopEditing, selectNextCell = _e.selectNextCell;
+    var _e = react.useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells;
     var anchorRef = react.useRef(props.eGridCell);
+    var hasSaved = react.useRef(false);
     var _f = react.useState(false), saving = _f[0], setSaving = _f[1];
     var colDef = props.colDef;
     var cellEditorParams = colDef.cellEditorParams;
@@ -2366,24 +2379,27 @@ var GridPopoverContextProvider = function (_a) {
     var selectedRows = react.useMemo(function () { return (multiEdit ? lodashEs.sortBy(getSelectedRows(), function (row) { return row.id !== props.data.id; }) : [props.data]); }, [getSelectedRows, multiEdit, props.data]);
     var field = (_d = (_c = props.colDef) === null || _c === void 0 ? void 0 : _c.field) !== null && _d !== void 0 ? _d : "";
     var updateValue = react.useCallback(function (saveFn, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
-        var result;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var r, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
-                    result = false;
-                    if (!!saving) return [3 /*break*/, 2];
-                    return [4 /*yield*/, updatingCells({ selectedRows: selectedRows, field: field }, saveFn, setSaving)];
-                case 1:
-                    result = _a.sent();
-                    if (result) {
-                        stopEditing();
-                        tabDirection && selectNextCell(tabDirection);
-                    }
-                    _a.label = 2;
-                case 2: return [2 /*return*/, result];
+                    if (hasSaved.current)
+                        return [2 /*return*/, true];
+                    hasSaved.current = true;
+                    if (!saving) return [3 /*break*/, 1];
+                    _a = false;
+                    return [3 /*break*/, 3];
+                case 1: return [4 /*yield*/, updatingCells({ selectedRows: selectedRows, field: field }, saveFn, setSaving, tabDirection)];
+                case 2:
+                    _a = _b.sent();
+                    _b.label = 3;
+                case 3:
+                    r = _a;
+                    //if (r) stopEditing();
+                    return [2 /*return*/, r];
             }
         });
-    }); }, [field, saving, selectNextCell, selectedRows, stopEditing, updatingCells]);
+    }); }, [field, saving, selectedRows, updatingCells]);
     return (jsxRuntime.jsx(GridPopoverContext.Provider, __assign({ value: {
             anchorRef: anchorRef,
             saving: saving,
@@ -2915,7 +2931,7 @@ var useGridPopoverHook = function (props) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (reason == "cancel") {
+                    if (reason == CloseReason.CANCEL) {
                         stopEditing();
                         return [2 /*return*/];
                     }
@@ -2944,7 +2960,7 @@ var useGridPopoverHook = function (props) {
     var popoverWrapper = react.useCallback(function (children) {
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: anchorRef.current && (jsxRuntime.jsxs(ControlledMenu, __assign({ state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: function (event) {
                     // Prevent menu from closing when modals are invoked
-                    if (event.reason === "blur")
+                    if (event.reason === CloseReason.BLUR)
                         return;
                     triggerSave(event.reason).then();
                 }, viewScroll: "auto", dontShrinkIfDirectionIsTop: true, className: props.className, closeMenuExclusionClassName: "ReactModal__Content" }, { children: [saving && ( // This is the overlay that prevents editing when the editor is saving
@@ -3075,7 +3091,6 @@ var fieldToString = function (field) {
 var GridFormDropDown = function (props) {
     var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue, data = _a.data;
     // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
-    var hasSubmitted = react.useRef(false);
     var _b = react.useState(""), filter = _b[0], setFilter = _b[1];
     var _c = react.useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = react.useRef(false);
@@ -3083,32 +3098,39 @@ var GridFormDropDown = function (props) {
     var subComponentIsValid = react.useRef(false);
     var _e = react.useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
     var _f = react.useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
-    var selectItemHandler = react.useCallback(function (value, subComponentValue, reason) { return __awaiter(void 0, void 0, void 0, function () {
+    var selectItemHandler = react.useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
+        var hasChanged;
         return __generator(this, function (_a) {
-            if (hasSubmitted.current || (subComponentValue !== undefined && !subComponentIsValid.current))
+            switch (_a.label) {
+                case 0:
+                    hasChanged = selectedRows.some(function (row) { return row[field] !== value; });
+                    if (!hasChanged) return [3 /*break*/, 3];
+                    if (!props.onSelectedItem) return [3 /*break*/, 2];
+                    return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value, subComponentValue: subComponentValue })];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    selectedRows.forEach(function (row) { return (row[field] = value); });
+                    _a.label = 3;
+                case 3: return [2 /*return*/, true];
+            }
+        });
+    }); }, [field, props, selectedRows]);
+    var clickItemHandler = react.useCallback(function (value, subComponentValue, reason) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (subComponentValue !== undefined && !subComponentIsValid.current)
                 return [2 /*return*/, false];
-            hasSubmitted.current = true;
-            return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-                    var hasChanged;
+            return [2 /*return*/, updateValue(function () { return __awaiter(void 0, void 0, void 0, function () {
                     return __generator(this, function (_a) {
                         switch (_a.label) {
-                            case 0:
-                                hasChanged = selectedRows.some(function (row) { return row[field] !== value; });
-                                if (!hasChanged) return [3 /*break*/, 3];
-                                if (!props.onSelectedItem) return [3 /*break*/, 2];
-                                return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value, subComponentValue: subComponentValue })];
-                            case 1:
-                                _a.sent();
-                                return [3 /*break*/, 3];
-                            case 2:
-                                selectedRows.forEach(function (row) { return (row[field] = value); });
-                                _a.label = 3;
-                            case 3: return [2 /*return*/, true];
+                            case 0: return [4 /*yield*/, selectItemHandler(value, subComponentValue)];
+                            case 1: return [2 /*return*/, _a.sent()];
                         }
                     });
                 }); }, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
         });
-    }); }, [field, props, updateValue]);
+    }); }, [selectItemHandler, updateValue]);
     var selectFilterHandler = react.useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
@@ -3148,14 +3170,13 @@ var GridFormDropDown = function (props) {
                         _a.label = 2;
                     case 2:
                         optionsList = optionsConf === null || optionsConf === void 0 ? void 0 : optionsConf.map(function (item) {
-                            if (item == null || typeof item == "string" || typeof item == "number") {
-                                item = {
+                            return item == null || typeof item == "string"
+                                ? {
                                     value: item,
                                     label: item,
                                     disabled: false
-                                };
-                            }
-                            return item;
+                                }
+                                : item;
                         });
                         if (props.filtered) {
                             // This is needed otherwise when filter input is rendered and sets autofocus
@@ -3200,6 +3221,9 @@ var GridFormDropDown = function (props) {
             researchOnFilterChange().then();
         }
     }, [filter, props, researchOnFilterChange]);
+    /**
+     * Saves are wrapped in updateValue and triggered by blur events
+     */
     var save = react.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         var activeOptions;
         return __generator(this, function (_a) {
@@ -3267,7 +3291,7 @@ var GridFormDropDown = function (props) {
                                                 e.keepOpen = true;
                                             }
                                             else {
-                                                selectItemHandler(item.value, undefined, e.key === "Tab"
+                                                clickItemHandler(item.value, undefined, e.key === "Tab"
                                                     ? e.shiftKey
                                                         ? CloseReason.TAB_BACKWARD
                                                         : CloseReason.TAB_FORWARD
@@ -3459,8 +3483,6 @@ var GridFormPopoverMenu = function (props) {
     var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, updateValue = _a.updateValue, data = _a.data;
     var optionsInitialising = react.useRef(false);
     var _b = react.useState(), options = _b[0], setOptions = _b[1];
-    // Save triggers during async action processing which triggers another action(), this ref blocks that
-    var actionProcessing = react.useRef(false);
     var _c = react.useState(null), subComponentSelected = _c[0], setSubComponentSelected = _c[1];
     var subComponentIsValid = react.useRef(false);
     var _d = react.useState(), subSelectedValue = _d[0], setSubSelectedValue = _d[1];
@@ -3517,26 +3539,20 @@ var GridFormPopoverMenu = function (props) {
             });
         }); })();
     }, [options, props.defaultAction, props.options, selectedRows]);
-    var actionClick = react.useCallback(function (menuOption, reason) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            actionProcessing.current = true;
-            return [2 /*return*/, updateValue(function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var result;
-                    var _a;
-                    return __generator(this, function (_b) {
-                        switch (_b.label) {
-                            case 0:
-                                result = __assign(__assign({}, menuOption), { subValue: subSelectedValue });
-                                return [4 /*yield*/, ((_a = menuOption.action) !== null && _a !== void 0 ? _a : defaultAction)(selectedRows, result)];
-                            case 1:
-                                _b.sent();
-                                actionProcessing.current = false;
-                                return [2 /*return*/, true];
-                        }
-                    });
-                }); }, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
+    var actionClick = react.useCallback(function (menuOption) { return __awaiter(void 0, void 0, void 0, function () {
+        var result;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    result = __assign(__assign({}, menuOption), { subValue: subSelectedValue });
+                    return [4 /*yield*/, ((_a = menuOption.action) !== null && _a !== void 0 ? _a : defaultAction)(selectedRows, result)];
+                case 1:
+                    _b.sent();
+                    return [2 /*return*/, true];
+            }
         });
-    }); }, [defaultAction, selectedRows, subSelectedValue, updateValue]);
+    }); }, [defaultAction, selectedRows, subSelectedValue]);
     var onMenuItemClick = react.useCallback(function (e, item) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -3547,27 +3563,29 @@ var GridFormPopoverMenu = function (props) {
                     setSubComponentSelected(subComponentSelected === item ? null : item);
                     e.keepOpen = true;
                     return [3 /*break*/, 3];
-                case 1: return [4 /*yield*/, actionClick(item, e.key === "Tab" ? (e.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD) : CloseReason.CLICK).then()];
+                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 2:
                     _a.sent();
                     _a.label = 3;
                 case 3: return [2 /*return*/];
             }
         });
-    }); }, [actionClick, subComponentSelected]);
+    }); }, [actionClick, subComponentSelected, updateValue]);
     var save = react.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!(!actionProcessing.current && subComponentSelected)) return [3 /*break*/, 2];
+                    if (!subComponentSelected) return [3 /*break*/, 2];
                     if (!subComponentIsValid.current)
                         return [2 /*return*/, false];
-                    return [4 /*yield*/, actionClick(subComponentSelected, "click")];
+                    return [4 /*yield*/, actionClick(subComponentSelected)];
                 case 1:
                     _a.sent();
-                    return [2 /*return*/, true];
+                    _a.label = 2;
                 case 2: 
-                // Otherwise assume it's a cancel, either way we close the menu
+                // Close the menu
                 return [2 /*return*/, true];
             }
         });
@@ -3627,7 +3645,7 @@ var bearingNumberParser = function (value) {
     return parseFloat(value);
 };
 var validMaskForDmsBearing = /^((-)?\d+)?(\.([0-5](\d([0-5](\d(\d+)?)?)?)?)?)?$/;
-var bearingStringValidator = function (value, customValidate) {
+var bearingStringValidator = function (value, customInvalid) {
     value = value.trim();
     if (value === "")
         return null;
@@ -3639,7 +3657,7 @@ var bearingStringValidator = function (value, customValidate) {
         return "Bearing has a maximum of 5 decimal places";
     }
     var bearing = parseFloat(value);
-    return customValidate ? customValidate(bearing) : null;
+    return customInvalid ? customInvalid(bearing) : null;
 };
 // Decimal-ish degrees to Degrees Minutes Seconds converter
 var convertDDToDMS = function (dd, showPositiveSymbol, addTrailingZeros) {
@@ -3902,8 +3920,11 @@ var TextInputValidator = function (props, value, data) {
     if (props.maxLength && value.length > props.maxLength) {
         return "Text must be no longer than ".concat(props.maxLength, " characters");
     }
-    if (props.validate) {
-        return props.validate(value, data);
+    if (props.maxBytes && new TextEncoder().encode(value).length > props.maxBytes) {
+        return "Text must be no longer than ".concat(props.maxLength, " bytes");
+    }
+    if (props.invalid) {
+        return props.invalid(value, data);
     }
     return null;
 };