@linzjs/step-ag-grid 4.0.3 → 5.0.1

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

@@ -1,6 +1,6 @@
 import { useMemo, useLayoutEffect, useEffect, createContext, memo, forwardRef, useRef, useContext, useState, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
-import { findIndex, debounce, isEmpty, delay, sortBy, last, difference, castArray, remove, flatten, xorBy, fromPairs, omit, pick, toPairs, isEqual } from 'lodash-es';
+import { findIndex, debounce, isEmpty, delay, sortBy, last, difference, castArray, remove, flatten, xorBy, fromPairs, pick, omit, toPairs, isEqual } from 'lodash-es';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { AgGridReact } from 'ag-grid-react';
 import { LuiMiniSpinner, LuiIcon, LuiCheckboxInput, LuiButton } from '@linzjs/lui';
@@ -69,6 +69,7 @@ var subMenuClass = "submenu";
 var radioGroupClass = "radio-group";
 var Keys = Object.freeze({
     ENTER: "Enter",
+    TAB: "Tab",
     ESC: "Escape",
     SPACE: " ",
     HOME: "Home",
@@ -92,7 +93,9 @@ var CloseReason = Object.freeze({
     CLICK: "click",
     CANCEL: "cancel",
     BLUR: "blur",
-    SCROLL: "scroll"
+    SCROLL: "scroll",
+    TAB_FORWARD: "tab_forward",
+    TAB_BACKWARD: "tab_backward"
 });
 var FocusPositions = Object.freeze({
     FIRST: "first",
@@ -1364,14 +1367,120 @@ var ControlledMenuFr = function (_a, externalRef) {
             ev.stopPropagation();
         }
     }, [isWithinMenu]);
+    var lastTabDownEl = useRef();
+    var lastEnterDownEl = useRef();
+    var handleKeyboardTabAndEnter = useCallback(function (isDown) { return function (ev) {
+        var thisDocument = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current.ownerDocument : document;
+        var activeElement = thisDocument.activeElement;
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) || !activeElement)
+            return;
+        if (ev.key !== "Tab" && ev.key !== "Enter")
+            return;
+        if (ev.repeat) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            return;
+        }
+        var inputElsIterator = thisDocument.querySelectorAll(".szh-menu--state-open input,textarea");
+        var inputEls = [];
+        inputElsIterator.forEach(function (el) { return inputEls.push(el); });
+        inputEls = inputEls.filter(function (el) { return !el.disabled; });
+        if (inputEls.length === 0)
+            return;
+        var firstInputEl = inputEls[0];
+        var lastInputEl = inputEls[inputEls.length - 1];
+        if (activeElement !== firstInputEl && activeElement !== lastInputEl)
+            return;
+        var suppressAutoSaveEvents = activeElement.getAttribute("data-suppressAutoSaveEvents");
+        var invokeSave = function (reason) {
+            var _a, _b;
+            if (!(saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current) || suppressAutoSaveEvents)
+                return;
+            (_a = saveButtonRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-reason", reason);
+            (_b = saveButtonRef === null || saveButtonRef === void 0 ? void 0 : saveButtonRef.current) === null || _b === void 0 ? void 0 : _b.click();
+        };
+        var isTextArea = activeElement.nodeName === "TEXTAREA";
+        switch (activeElement.nodeName) {
+            case "TEXTAREA":
+            case "INPUT": {
+                if (activeElement === lastInputEl && activeElement === firstInputEl) {
+                    if (ev.key === "Tab") {
+                        // Can't forward/backwards tab out of popup
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (isDown) {
+                            lastTabDownEl.current = activeElement;
+                        }
+                        else {
+                            lastTabDownEl.current == activeElement &&
+                                invokeSave(ev.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD);
+                        }
+                    }
+                    if (ev.key === "Enter" && !isTextArea) {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (isDown) {
+                            lastEnterDownEl.current = activeElement;
+                        }
+                        else {
+                            lastEnterDownEl.current == activeElement && invokeSave(CloseReason.CLICK);
+                        }
+                    }
+                }
+                else if (activeElement === lastInputEl) {
+                    if (ev.key === "Tab" && !ev.shiftKey) {
+                        // Can't backward tab out of popup
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (isDown) {
+                            lastTabDownEl.current = activeElement;
+                        }
+                        else {
+                            lastTabDownEl.current == activeElement && invokeSave(CloseReason.TAB_FORWARD);
+                        }
+                    }
+                    if (ev.key === "Enter" && !isTextArea) {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (isDown) {
+                            lastEnterDownEl.current = activeElement;
+                        }
+                        else {
+                            lastEnterDownEl.current == activeElement && invokeSave(CloseReason.CLICK);
+                        }
+                    }
+                }
+                else if (activeElement === firstInputEl) {
+                    if (ev.key === "Tab" && ev.shiftKey) {
+                        // Can't backward tab out of popup
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (isDown) {
+                            lastTabDownEl.current = activeElement;
+                        }
+                        else {
+                            lastTabDownEl.current == activeElement && invokeSave(CloseReason.TAB_BACKWARD);
+                        }
+                    }
+                }
+                break;
+            }
+        }
+    }; }, [anchorRef, saveButtonRef]);
+    var handleKeydownTabAndEnter = useMemo(function () { return handleKeyboardTabAndEnter(true); }, [handleKeyboardTabAndEnter]);
+    var handleKeyupTabAndEnter = useMemo(function () { return handleKeyboardTabAndEnter(false); }, [handleKeyboardTabAndEnter]);
     useEffect(function () {
         if (isMenuOpen(state)) {
             var thisDocument_1 = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current.ownerDocument : document;
+            thisDocument_1.addEventListener("keydown", handleKeydownTabAndEnter, true);
+            thisDocument_1.addEventListener("keyup", handleKeyupTabAndEnter, true);
             thisDocument_1.addEventListener("mousedown", handleScreenEventForSave, true);
             thisDocument_1.addEventListener("mouseup", handleScreenEventForCancel, true);
             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("mousedown", handleScreenEventForSave, true);
                 thisDocument_1.removeEventListener("mouseup", handleScreenEventForCancel, true);
                 thisDocument_1.removeEventListener("click", handleScreenEventForCancel, true);
@@ -1379,7 +1488,14 @@ var ControlledMenuFr = function (_a, externalRef) {
             };
         }
         return function () { };
-    }, [handleScreenEventForSave, handleScreenEventForCancel, state, anchorRef]);
+    }, [
+        handleScreenEventForSave,
+        handleScreenEventForCancel,
+        state,
+        anchorRef,
+        handleKeydownTabAndEnter,
+        handleKeyupTabAndEnter,
+    ]);
     var itemSettings = useMemo(function () { return ({
         submenuOpenDelay: submenuOpenDelay,
         submenuCloseDelay: submenuCloseDelay
@@ -1399,7 +1515,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
                 });
             }
         },
@@ -1674,8 +1795,11 @@ var MenuItemFr = function (_a) {
             value: value,
             syntheticEvent: e
         };
-        if (e.key !== undefined)
-            event.key = e.key;
+        if (e.key !== undefined) {
+            var ke = e;
+            event.key = ke.key;
+            event.shiftKey = ke.shiftKey;
+        }
         if (isCheckBox)
             event.checked = !isChecked;
         if (isRadio)
@@ -1685,6 +1809,13 @@ var MenuItemFr = function (_a) {
             safeCall(radioGroup.onRadioChange, event);
         eventHandlers.handleClick(event, isCheckBox || isRadio);
     };
+    var handleKeyDown = function (e) {
+        // if tab is allowed the handleKeyUp event can't process the tab
+        if (e.key === "Tab") {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
     /**
      * Keyboard events are triggered on up, otherwise sub-components get spaces and enters typed in them
      */
@@ -1693,7 +1824,10 @@ var MenuItemFr = function (_a) {
             return;
         switch (e.key) {
             case Keys.ENTER:
+            case Keys.TAB:
             case Keys.SPACE:
+                e.preventDefault();
+                e.stopPropagation();
                 if (isAnchor) {
                     (menuItemRef === null || menuItemRef === void 0 ? void 0 : menuItemRef.current) && menuItemRef.current.click();
                 }
@@ -1710,7 +1844,7 @@ var MenuItemFr = function (_a) {
         checked: isChecked,
         anchor: isAnchor
     }); }, [type, isDisabled, isHovering, isChecked, isAnchor]);
-    var mergedProps = mergeProps(__assign(__assign({}, restStateProps), { onPointerDown: setHover, onKeyUp: handleKeyUp, onClick: handleClick }), restProps);
+    var mergedProps = mergeProps(__assign(__assign({}, restStateProps), { onPointerDown: setHover, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick }), restProps);
     // Order of props overriding (same in all components):
     // 1. Preset props adhering to WAI-ARIA Authoring Practices.
     // 2. Merged outer and local props
@@ -1855,6 +1989,9 @@ var GridContext = createContext({
     }); },
     redrawRows: function () {
         console.error("no context provider for redrawRows");
+    },
+    selectNextCell: function () {
+        console.error("no context provider for selectNextCell");
     }
 });
 
@@ -1868,7 +2005,8 @@ var GridUpdatingContext = createContext({
             console.error("Missing GridUpdatingContext");
             return [2 /*return*/];
         });
-    }); }
+    }); },
+    updatedDep: 0
 });
 
 /**
@@ -2128,6 +2266,15 @@ var GridContextProvider = function (props) {
             gridApi.redrawRows(rowNodes ? { rowNodes: rowNodes } : undefined);
         });
     };
+    var selectNextCell = function (tabDirection) {
+        if (tabDirection === void 0) { tabDirection = 0; }
+        gridApiOp(function (gridApi) {
+            if (tabDirection == 1)
+                gridApi.tabToNextCell();
+            if (tabDirection == -1)
+                gridApi.tabToPreviousCell();
+        });
+    };
     return (jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
             setGridApi: setGridApi,
@@ -2146,34 +2293,42 @@ var GridContextProvider = function (props) {
             sizeColumnsToFit: sizeColumnsToFit,
             stopEditing: stopEditing,
             updatingCells: updatingCells,
-            redrawRows: redrawRows
+            redrawRows: redrawRows,
+            selectNextCell: selectNextCell
         } }, { children: props.children })));
 };
 
 var GridUpdatingContextProvider = function (props) {
     var updatingBlocks = useRef({});
     var updating = useRef({});
+    var _a = useState(0), updatedDep = _a[0], setUpdatedDep = _a[1];
     var resetUpdating = function () {
         var mergedUpdatingBlocks = {};
         for (var key in updatingBlocks.current) {
             mergedUpdatingBlocks[key] = flatten(updatingBlocks.current[key]);
         }
         updating.current = mergedUpdatingBlocks;
+        setUpdatedDep(function (updatedDep) { return updatedDep + 1; });
     };
-    var modifyUpdating = function (field, ids, fn) { return __awaiter(void 0, void 0, void 0, function () {
-        var fieldUpdatingIds, idRef;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+    var modifyUpdating = function (fields, ids, fn) { return __awaiter(void 0, void 0, void 0, function () {
+        var idRef;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
-                    fieldUpdatingIds = (_a = updatingBlocks.current[field]) !== null && _a !== void 0 ? _a : (updatingBlocks.current[field] = []);
                     idRef = __spreadArray([], ids, true);
-                    fieldUpdatingIds.push(idRef);
+                    castArray(fields).forEach(function (field) {
+                        var _a;
+                        var fieldUpdatingIds = (_a = updatingBlocks.current[field]) !== null && _a !== void 0 ? _a : (updatingBlocks.current[field] = []);
+                        fieldUpdatingIds.push(idRef);
+                    });
                     resetUpdating();
                     return [4 /*yield*/, fn()];
                 case 1:
-                    _b.sent();
-                    remove(fieldUpdatingIds, function (idList) { return idList === idRef; });
+                    _a.sent();
+                    castArray(fields).forEach(function (field) {
+                        var fieldUpdatingIds = updatingBlocks.current[field];
+                        remove(fieldUpdatingIds, function (idList) { return idList === idRef; });
+                    });
                     resetUpdating();
                     return [2 /*return*/];
             }
@@ -2182,7 +2337,7 @@ var GridUpdatingContextProvider = function (props) {
     var checkUpdating = function (fields, id) {
         return castArray(fields).some(function (f) { var _a; return (_a = updating.current[f]) === null || _a === void 0 ? void 0 : _a.includes(id); });
     };
-    return (jsx(GridUpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating } }, { children: props.children })));
+    return (jsx(GridUpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating, updatedDep: updatedDep } }, { children: props.children })));
 };
 
 var GridPopoverContext = createContext({
@@ -2204,7 +2359,7 @@ var useGridPopoverContext = function () {
 var GridPopoverContextProvider = function (_a) {
     var _b, _c, _d;
     var props = _a.props, children = _a.children;
-    var _e = useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells, stopEditing = _e.stopEditing;
+    var _e = useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells, stopEditing = _e.stopEditing, selectNextCell = _e.selectNextCell;
     var anchorRef = useRef(props.eGridCell);
     var _f = useState(false), saving = _f[0], setSaving = _f[1];
     var colDef = props.colDef;
@@ -2213,7 +2368,7 @@ var GridPopoverContextProvider = function (_a) {
     // Then item that is clicked on will always be first in the list
     var selectedRows = useMemo(function () { return (multiEdit ? 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 = useCallback(function (saveFn) { return __awaiter(void 0, void 0, void 0, function () {
+    var updateValue = useCallback(function (saveFn, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
         var result;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -2223,13 +2378,15 @@ var GridPopoverContextProvider = function (_a) {
                     return [4 /*yield*/, updatingCells({ selectedRows: selectedRows, field: field }, saveFn, setSaving)];
                 case 1:
                     result = _a.sent();
-                    if (result)
+                    if (result) {
                         stopEditing();
+                        tabDirection && selectNextCell(tabDirection);
+                    }
                     _a.label = 2;
                 case 2: return [2 /*return*/, result];
             }
         });
-    }); }, [field, saving, selectedRows, stopEditing, updatingCells]);
+    }); }, [field, saving, selectNextCell, selectedRows, stopEditing, updatingCells]);
     return (jsx(GridPopoverContext.Provider, __assign({ value: {
             anchorRef: anchorRef,
             saving: saving,
@@ -2259,43 +2416,7 @@ var GridSubComponentContext = createContext({
     }); }
 });
 
-function toVal(mix) {
-	var k, y, str='';
-	if (mix) {
-		if (typeof mix === 'object') {
-			if (Array.isArray(mix)) {
-				for (k=0; k < mix.length; k++) {
-					if (mix[k] && (y = toVal(mix[k]))) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			} else {
-				for (k in mix) {
-					if (mix[k] && (y = toVal(k))) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			}
-		} else if (typeof mix !== 'boolean' && !mix.call) {
-			str && (str += ' ');
-			str += mix;
-		}
-	}
-	return str;
-}
-
-function clsx () {
-	var i=0, x, str='';
-	while (i < arguments.length) {
-		if (x = toVal(arguments[i++])) {
-			str && (str += ' ');
-			str += x;
-		}
-	}
-	return str;
-}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 /**
  * Retains last sort order from via <AgGrid postRowSort>.
@@ -2812,7 +2933,7 @@ var useGridPopoverHook = function (props) {
                     // forms that don't provide an invalid fn must wait until they have saved to close
                     if (props.invalid)
                         stopEditing();
-                    return [4 /*yield*/, updateValue(props.save)];
+                    return [4 /*yield*/, updateValue(props.save, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
                 case 2:
                     if (_a.sent()) {
                         if (!props.invalid)
@@ -2823,72 +2944,6 @@ var useGridPopoverHook = function (props) {
             }
         });
     }); }, [props, stopEditing, updateValue]);
-    var onlyInputKeyboardEventHandlers = {
-        onKeyUp: function (e) {
-            var isTextArea = e.currentTarget.type === "textarea";
-            if (e.key === "Enter" && !isTextArea) {
-                e.preventDefault();
-                e.stopPropagation();
-                triggerSave().then();
-            }
-            else if (e.key === "Tab") {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        },
-        onKeyDown: function (e) {
-            var isTextArea = e.currentTarget.type === "textarea";
-            if (e.key === "Enter" && !isTextArea) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            else if (e.key === "Tab") {
-                e.preventDefault();
-                e.stopPropagation();
-                !e.shiftKey && triggerSave().then();
-            }
-        }
-    };
-    var firstInputKeyboardEventHandlers = {
-        onKeyUp: function (e) {
-            if (e.key === "Tab" && e.shiftKey) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        },
-        onKeyDown: function (e) {
-            if (e.key === "Tab" && e.shiftKey) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
-    };
-    var lastInputKeyboardEventHandlers = {
-        onKeyUp: function (e) {
-            var isTextArea = e.currentTarget.type === "textarea";
-            if (e.key === "Enter" && !isTextArea) {
-                e.preventDefault();
-                e.stopPropagation();
-                triggerSave().then();
-            }
-            else if (e.key === "Tab" && !e.shiftKey) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        },
-        onKeyDown: function (e) {
-            var isTextArea = e.currentTarget.type === "textarea";
-            if (e.key === "Enter" && !isTextArea) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            else if (e.key === "Tab" && !e.shiftKey) {
-                e.preventDefault();
-                e.stopPropagation();
-                triggerSave().then();
-            }
-        }
-    };
     var popoverWrapper = useCallback(function (children) {
         return (jsx(Fragment$1, { children: anchorRef.current && (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
@@ -2904,16 +2959,14 @@ var useGridPopoverHook = function (props) {
                             right: 0,
                             backgroundColor: "rgba(64,64,64,0.1)",
                             zIndex: 1000
-                        } })), children, jsx("button", { ref: saveButtonRef, onClick: function () {
-                            triggerSave().then();
+                        } })), children, jsx("button", { ref: saveButtonRef, "data-reason": "", onClick: function (e) {
+                            var _a;
+                            triggerSave((_a = e.currentTarget.getAttribute("data-reason")) !== null && _a !== void 0 ? _a : undefined).then();
                         }, style: { display: "none" } })] }))) }));
     }, [anchorRef, isOpen, props.className, saving, triggerSave]);
     return {
         popoverWrapper: popoverWrapper,
-        triggerSave: triggerSave,
-        onlyInputKeyboardEventHandlers: onlyInputKeyboardEventHandlers,
-        firstInputKeyboardEventHandlers: firstInputKeyboardEventHandlers,
-        lastInputKeyboardEventHandlers: lastInputKeyboardEventHandlers
+        triggerSave: triggerSave
     };
 };
 
@@ -2939,7 +2992,7 @@ var GridRenderPopoutMenuCell = function (props) {
 var css_248z$5 = ".GridMultiSelect-containerSmall .GridFormMultiSelect-options{max-height:130px;overflow-y:auto}.GridMultiSelect-containerMedium .GridFormMultiSelect-options{max-height:190px;overflow-y:auto}.GridMultiSelect-containerLarge .GridFormMultiSelect-options{max-height:320px;overflow-y:auto}.GridMultiSelect-containerUnlimited .GridFormMultiSelect-options{overflow-y:auto}";
 styleInject(css_248z$5);
 
-var css_248z$4 = ".GridPopoverEditDropDown-containerSmall .GridFormDropDown-options{max-height:120px;overflow-y:auto}.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options{max-height:200px;overflow-y:auto}.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options{max-height:400px;overflow-y:auto}.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options{overflow-y:auto}";
+var css_248z$4 = ".GridPopoverEditDropDown-containerSmall .GridFormDropDown-options{max-height:120px;overflow-y:auto}.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options{max-height:220px;overflow-y:auto}.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options{max-height:400px;overflow-y:auto}.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options{overflow-y:auto}";
 styleInject(css_248z$4);
 
 /* global setTimeout, clearTimeout */
@@ -3024,7 +3077,6 @@ var fieldToString = function (field) {
 };
 var GridFormDropDown = function (props) {
     var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue, data = _a.data;
-    var stopEditing = useContext(GridContext).stopEditing;
     // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
     var hasSubmitted = useRef(false);
     var _b = useState(""), filter = _b[0], setFilter = _b[1];
@@ -3034,7 +3086,7 @@ var GridFormDropDown = function (props) {
     var subComponentIsValid = useRef(false);
     var _e = useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
     var _f = useState(null), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
-    var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
+    var selectItemHandler = useCallback(function (value, subComponentValue, reason) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             if (hasSubmitted.current || (subComponentValue !== undefined && !subComponentIsValid.current))
                 return [2 /*return*/, false];
@@ -3057,7 +3109,7 @@ var GridFormDropDown = function (props) {
                             case 3: return [2 /*return*/, true];
                         }
                     });
-                }); })];
+                }); }, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
         });
     }); }, [field, props, updateValue]);
     var selectFilterHandler = useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
@@ -3077,7 +3129,7 @@ var GridFormDropDown = function (props) {
                                 return [2 /*return*/, true];
                         }
                     });
-                }); })];
+                }); }, 0)];
         });
     }); }, [props, updateValue]);
     // Load up options list if it's async function
@@ -3151,52 +3203,48 @@ var GridFormDropDown = function (props) {
             researchOnFilterChange().then();
         }
     }, [filter, props, researchOnFilterChange]);
-    var onFilterKeyDown = useCallback(function (e) { return __awaiter(void 0, void 0, void 0, function () {
+    var save = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         var activeOptions;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!options)
-                        return [2 /*return*/];
-                    if (!(e.key == "Enter" || e.key == "Tab")) return [3 /*break*/, 5];
+                        return [2 /*return*/, true];
                     activeOptions = options.filter(function (option) { return !filteredValues.includes(option.value); });
-                    if (!(activeOptions.length == 1)) return [3 /*break*/, 2];
+                    if (!(activeOptions.length === 1)) return [3 /*break*/, 2];
                     return [4 /*yield*/, selectItemHandler(activeOptions[0].value)];
                 case 1:
                     _a.sent();
-                    stopEditing();
-                    return [3 /*break*/, 5];
+                    return [3 /*break*/, 6];
                 case 2:
-                    if (!props.onSelectFilter) return [3 /*break*/, 4];
+                    if (!(activeOptions.length === 0 && props.onSelectFilter)) return [3 /*break*/, 4];
                     return [4 /*yield*/, selectFilterHandler(filter)];
                 case 3:
                     _a.sent();
-                    stopEditing();
-                    return [3 /*break*/, 5];
+                    return [3 /*break*/, 6];
                 case 4:
-                    e.preventDefault();
-                    e.stopPropagation();
-                    _a.label = 5;
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); }, [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props]);
-    var save = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
                     // Handler for sub-selected value
                     if (!selectedSubComponent)
                         return [2 /*return*/, true];
                     if (selectedSubComponent.subComponent && !subComponentIsValid.current)
                         return [2 /*return*/, false];
                     return [4 /*yield*/, selectItemHandler(selectedSubComponent.value, subSelectedValue)];
-                case 1:
+                case 5:
                     _a.sent();
-                    return [2 /*return*/, true];
+                    _a.label = 6;
+                case 6: return [2 /*return*/, true];
             }
         });
-    }); }, [selectItemHandler, selectedSubComponent, subSelectedValue]);
+    }); }, [
+        filter,
+        filteredValues,
+        options,
+        props.onSelectFilter,
+        selectFilterHandler,
+        selectItemHandler,
+        selectedSubComponent,
+        subSelectedValue,
+    ]);
     var popoverWrapper = useGridPopoverHook({
         className: props.className,
         invalid: function () { return !!(selectedSubComponent && !subComponentIsValid.current); },
@@ -3205,7 +3253,7 @@ var GridFormDropDown = function (props) {
     return popoverWrapper(jsxs(Fragment$1, { children: [props.filtered && (jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                             var _b;
                             var ref = _a.ref;
-                            return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); }, onKeyDown: function (e) { return onFilterKeyDown(e); } }) })));
+                            return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); } }) })));
                         } })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (jsx(MenuItem, { children: "[Empty]" }, "".concat(fieldToString(field), "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                             var _a;
                             return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
@@ -3222,7 +3270,11 @@ var GridFormDropDown = function (props) {
                                                 e.keepOpen = true;
                                             }
                                             else {
-                                                selectItemHandler(item.value).then();
+                                                selectItemHandler(item.value, undefined, e.key === "Tab"
+                                                    ? e.shiftKey
+                                                        ? CloseReason.TAB_BACKWARD
+                                                        : CloseReason.TAB_FORWARD
+                                                    : CloseReason.CLICK).then();
                                             }
                                         } }, { children: [(_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), item.subComponent ? "..." : ""] }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
                                                 data: data,
@@ -3256,6 +3308,10 @@ var GridFormMultiSelect = function (props) {
     var _d = useState([]), filteredValues = _d[0], setFilteredValues = _d[1];
     var optionsInitialising = useRef(false);
     var _e = useState(), options = _e[0], setOptions = _e[1];
+    var invalid = useCallback(function () {
+        var validations = pick(subComponentIsValid.current, Object.keys(selectedValues));
+        return Object.values(validations).some(function (v) { return !v; });
+    }, [selectedValues]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var validations, notValid, menuOptionSubValueResult;
         return __generator(this, function (_a) {
@@ -3349,8 +3405,9 @@ var GridFormMultiSelect = function (props) {
     }, [selectedValues]);
     var _f = useGridPopoverHook({
         className: props.className,
+        invalid: invalid,
         save: save
-    }), popoverWrapper = _f.popoverWrapper, lastInputKeyboardEventHandlers = _f.lastInputKeyboardEventHandlers, triggerSave = _f.triggerSave;
+    }), popoverWrapper = _f.popoverWrapper, triggerSave = _f.triggerSave;
     return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: jsxs(Fragment$1, { children: [options && props.filtered && (jsxs(Fragment$1, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                                 var _b;
                                 var ref = _a.ref;
@@ -3358,9 +3415,12 @@ var GridFormMultiSelect = function (props) {
                             } }), "filter"), jsx(MenuDivider, {}, "$$divider_filter")] })), jsx("div", __assign({ className: "GridFormMultiSelect-options" }, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                         var _a;
                         return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsx(MenuItem, __assign({ onClick: function (e) {
-                                        e.keepOpen = true;
-                                        toggleValue(item);
-                                    } }, lastInputKeyboardEventHandlers, { children: jsx(LuiCheckboxInput, { isChecked: "".concat(item.value) in selectedValues, value: "".concat(item.value), label: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
+                                        // Global react-menu MenuItem handler handles tabs
+                                        if (e.key !== "Tab") {
+                                            e.keepOpen = true;
+                                            toggleValue(item);
+                                        }
+                                    } }, { children: jsx(LuiCheckboxInput, { isChecked: "".concat(item.value) in selectedValues, value: "".concat(item.value), label: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
                                             onClick: function (e) {
                                                 e.preventDefault();
                                                 e.stopPropagation();
@@ -3460,7 +3520,7 @@ var GridFormPopoverMenu = function (props) {
             });
         }); })();
     }, [options, props.defaultAction, props.options, selectedRows]);
-    var actionClick = useCallback(function (menuOption) { return __awaiter(void 0, void 0, void 0, function () {
+    var actionClick = 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 () {
@@ -3477,25 +3537,27 @@ var GridFormPopoverMenu = function (props) {
                                 return [2 /*return*/, true];
                         }
                     });
-                }); })];
+                }); }, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)];
         });
     }); }, [defaultAction, selectedRows, subSelectedValue, updateValue]);
-    var onMenuItemClick = useCallback(function (e, item) {
-        if (item.subComponent) {
-            subComponentIsValid.current = false;
-            setSubSelectedValue(null);
-            setSubComponentSelected(subComponentSelected === item ? null : item);
-            e.keepOpen = true;
-        }
-        else {
-            actionClick(item).then();
-            e.keepOpen = true;
-        }
-    }, [actionClick, subComponentSelected]);
-    var selectedRowCount = selectedRows.length;
-    var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (menuOption) {
-        return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
-    });
+    var onMenuItemClick = useCallback(function (e, item) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!item.subComponent) return [3 /*break*/, 1];
+                    subComponentIsValid.current = false;
+                    setSubSelectedValue(null);
+                    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 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [actionClick, subComponentSelected]);
     var save = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -3503,19 +3565,23 @@ var GridFormPopoverMenu = function (props) {
                     if (!(!actionProcessing.current && subComponentSelected)) return [3 /*break*/, 2];
                     if (!subComponentIsValid.current)
                         return [2 /*return*/, false];
-                    return [4 /*yield*/, actionClick(subComponentSelected)];
+                    return [4 /*yield*/, actionClick(subComponentSelected, "click")];
                 case 1:
                     _a.sent();
-                    return [2 /*return*/, false];
+                    return [2 /*return*/, true];
                 case 2: 
                 // Otherwise assume it's a cancel, either way we close the menu
                 return [2 /*return*/, true];
             }
         });
     }); }, [actionClick, subComponentSelected]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
-    return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !filteredOptions, className: "GridFormPopupMenu" }, { children: jsx(Fragment$1, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
-                return item.label === PopoutMenuSeparator ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxs(Fragment, { children: [jsx(MenuItem, __assign({ onClick: function (e) { return onMenuItemClick(e, item); }, disabled: !!item.disabled || !(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.includes(item)), title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "" }, { children: item.label }), "".concat(item.label)), item.subComponent && subComponentSelected === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+    var _e = useGridPopoverHook({
+        className: props.className,
+        invalid: function () { return subComponentSelected && !subComponentIsValid.current; },
+        save: save
+    }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
+    return popoverWrapper(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormPopupMenu" }, { children: jsx(Fragment$1, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                return item.label === PopoutMenuSeparator ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxs(Fragment, { children: [jsx(MenuItem, __assign({ onClick: function (e) { return onMenuItemClick(e, item); }, disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "" }, { children: item.label }), "".concat(item.label)), item.subComponent && subComponentSelected === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
                                 return item.subComponent && (jsx(GridSubComponentContext.Provider, __assign({ value: {
                                         data: data,
                                         value: subSelectedValue,
@@ -3625,13 +3691,17 @@ styleInject(css_248z$2);
 var css_248z$1 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
 styleInject(css_248z$1);
 
+var FormError = function (props) {
+    return (jsxs(Fragment$1, { children: [props.error && (jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.helpText && !props.error && (jsx("span", __assign({ style: {
+                    fontSize: "0.7rem"
+                } }, { children: props.helpText })))] }));
+};
+
 var TextInputFormatted = function (props) {
     return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", spellCheck: true, defaultValue: props.value }, omit(props, ["error", "value", "helpText", "formatted", "className"]), { className: "LuiTextInput-input", onMouseEnter: function (e) {
                             e.currentTarget.focus();
                             props.onMouseEnter && props.onMouseEnter(e);
-                        } })), jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.helpText && !props.error && (jsx("span", __assign({ style: {
-                    fontSize: "0.7rem"
-                } }, { children: props.helpText })))] })));
+                        } })), jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), jsx(FormError, { error: props.error, helpText: props.helpText })] })));
 };
 
 var GridFormEditBearing = function (props) {
@@ -3667,14 +3737,14 @@ var GridFormEditBearing = function (props) {
             }
         });
     }); }, [defaultValue, field, props, value]);
-    var _c = useGridPopoverHook({
+    var popoverWrapper = useGridPopoverHook({
         className: props.className,
         invalid: invalid,
         save: save
-    }), popoverWrapper = _c.popoverWrapper, onlyInputKeyboardEventHandlers = _c.onlyInputKeyboardEventHandlers;
-    return popoverWrapper(jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsx(TextInputFormatted, __assign({ value: defaultValue, onChange: function (e) {
+    }).popoverWrapper;
+    return popoverWrapper(jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsx(TextInputFormatted, { value: defaultValue, onChange: function (e) {
                 setValue(e.target.value.trim());
-            }, autoFocus: true, placeholder: props.placeHolder }, onlyInputKeyboardEventHandlers, { formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range), helpText: "Press enter or tab to save" })) })));
+            }, autoFocus: true, placeholder: props.placeHolder, formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range), helpText: "Press enter or tab to save" }) })));
 };
 
 var GridPopoverEditBearingLike = function (colDef, props) {
@@ -3819,9 +3889,7 @@ var TextAreaInput = function (props) {
                                     e.currentTarget.selectionStart = e.currentTarget.value.length;
                                 }
                                 props.onMouseEnter && props.onMouseEnter(e);
-                            } }, { children: props.value })) }))] })), props.error && (jsxs("span", __assign({ className: "LuiTextAreaInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextAreaInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.helpText && !props.error && (jsx("span", __assign({ style: {
-                    fontSize: "0.7rem"
-                } }, { children: props.helpText })))] })));
+                            } }, { children: props.value })) }))] })), jsx(FormError, { error: props.error, helpText: props.helpText })] })));
 };
 
 var TextInputValidator = function (props, value, data) {
@@ -3870,19 +3938,18 @@ var GridFormTextArea = function (props) {
             }
         });
     }); }, [initialVale, value, props, field]);
-    var _e = useGridPopoverHook({
+    var popoverWrapper = useGridPopoverHook({
         className: props.className,
         invalid: invalid,
         save: save
-    }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
-    return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsx(TextAreaInput, __assign({ value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), placeholder: props.placeholder, helpText: helpText }, onlyInputKeyboardEventHandlers)) })));
+    }).popoverWrapper;
+    return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsx(TextAreaInput, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), placeholder: props.placeholder, helpText: helpText }) })));
 };
 
 var GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __assign({ editor: GridFormTextArea }, params)); };
 
 var GridFormTextInput = function (props) {
     var _a, _b;
-    var stopEditing = useContext(GridContext).stopEditing;
     var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value, data = _c.data;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
     var initValue = useMemo(function () { return (initialVale == null ? "" : "".concat(initialVale)); }, [initialVale]);
@@ -3895,7 +3962,6 @@ var GridFormTextInput = function (props) {
                 case 0:
                     if (invalid())
                         return [2 /*return*/, false];
-                    stopEditing();
                     trimmedValue = value.trim();
                     if (initValue === trimmedValue)
                         return [2 /*return*/, true];
@@ -3913,13 +3979,13 @@ var GridFormTextInput = function (props) {
                     return [2 /*return*/, true];
             }
         });
-    }); }, [invalid, stopEditing, value, initValue, props, field]);
-    var _e = useGridPopoverHook({
+    }); }, [invalid, value, initValue, props, field]);
+    var popoverWrapper = useGridPopoverHook({
         className: props.className,
         invalid: invalid,
         save: save
-    }), popoverWrapper = _e.popoverWrapper, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
-    return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 }, className: "FormTest" }, { children: jsx(TextInputFormatted, __assign({ value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, style: { width: "100%" }, placeholder: props.placeholder }, onlyInputKeyboardEventHandlers, { helpText: helpText })) })));
+    }).popoverWrapper;
+    return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 }, className: "FormTest" }, { children: jsx(TextInputFormatted, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, style: { width: "100%" }, placeholder: props.placeholder, helpText: helpText }) })));
 };
 
 var GridPopoverTextInput = function (colDef, params) {
@@ -3928,7 +3994,7 @@ var GridPopoverTextInput = function (colDef, params) {
 
 var GridFormSubComponentTextInput = function (props) {
     var _a;
-    var _b = useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave, data = _b.data;
+    var _b = useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, data = _b.data;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
     // If is not initialised yet as it's just been created then set the default value
     useEffect(function () {
@@ -3939,30 +4005,14 @@ var GridFormSubComponentTextInput = function (props) {
     useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
-    return (jsx(TextInputFormatted, { value: value, error: invalid(), onChange: function (e) { return setValue(e.target.value); }, helpText: helpText, autoFocus: true, onKeyDown: function (e) {
-            if (e.key === "Tab" || e.key === "Enter") {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }, onKeyUp: function (e) {
-            if (e.key === "Tab") {
-                e.preventDefault();
-                e.stopPropagation();
-                !e.shiftKey && triggerSave().then();
-            }
-            else if (e.key === "Enter") {
-                triggerSave().then();
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }, placeholder: props.placeholder, style: {
+    return (jsx(TextInputFormatted, { value: value, error: invalid(), onChange: function (e) { return setValue(e.target.value); }, helpText: helpText, autoFocus: true, placeholder: props.placeholder, style: {
             width: "100%"
         } }));
 };
 
 var GridFormSubComponentTextArea = function (props) {
     var _a;
-    var _b = useContext(GridSubComponentContext), value = _b.value, data = _b.data, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave;
+    var _b = useContext(GridSubComponentContext), value = _b.value, data = _b.data, setValue = _b.setValue, setValid = _b.setValid;
     var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press tab to save";
     // If is not initialised yet as it's just been created then set the default value
     useEffect(function () {
@@ -3973,18 +4023,7 @@ var GridFormSubComponentTextArea = function (props) {
     useEffect(function () {
         setValid(value != null && invalid() == null);
     }, [setValid, invalid, value]);
-    return (jsx("div", __assign({ className: clsx("FreeTextInput LuiDeprecatedForms", props.className) }, { children: jsx(TextAreaInput, { className: "free-text-input", value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), helpText: helpText, autoFocus: true, placeholder: props.placeholder, onKeyDown: function (e) {
-                if (e.key === "Tab") {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-            }, onKeyUp: function (e) {
-                if (e.key === "Tab") {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    !e.shiftKey && triggerSave().then();
-                }
-            } }) })));
+    return (jsx("div", __assign({ className: clsx("FreeTextInput LuiDeprecatedForms", props.className) }, { children: jsx(TextAreaInput, { className: "free-text-input", value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), helpText: helpText, autoFocus: true, placeholder: props.placeholder }) })));
 };
 
 var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton .LuiIcon{margin:0 4px!important}.ActionButton-minimalArea{position:relative}.ActionButton-minimalAreaDisplay{position:absolute}.ActionButton-minimalAreaExpand{visibility:hidden}.ActionButton-inProgress{background-color:#e2f3f7!important;color:#007198!important;cursor:progress}.ActionButton-inProgress svg *{fill:#0000!important}";