@linzjs/step-ag-grid 3.0.1 → 4.0.0

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, castArray, remove, flatten, delay, sortBy, last, difference, xorBy, fromPairs, omit, pick, toPairs, isEqual } from 'lodash-es';
+import { findIndex, debounce, isEmpty, delay, sortBy, last, difference, castArray, remove, flatten, xorBy, fromPairs, omit, pick, 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';
@@ -1685,7 +1685,10 @@ var MenuItemFr = function (_a) {
             safeCall(radioGroup.onRadioChange, event);
         eventHandlers.handleClick(event, isCheckBox || isRadio);
     };
-    var handleKeyDown = function (e) {
+    /**
+     * Keyboard events are triggered on up, otherwise sub-components get spaces and enters typed in them
+     */
+    var handleKeyUp = function (e) {
         if (!isHovering)
             return;
         switch (e.key) {
@@ -1707,7 +1710,7 @@ var MenuItemFr = function (_a) {
         checked: isChecked,
         anchor: isAnchor
     }); }, [type, isDisabled, isHovering, isChecked, isAnchor]);
-    var mergedProps = mergeProps(__assign(__assign({}, restStateProps), { onPointerDown: setHover, onKeyDown: handleKeyDown, onClick: handleClick }), restProps);
+    var mergedProps = mergeProps(__assign(__assign({}, restStateProps), { onPointerDown: setHover, 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
@@ -1782,54 +1785,6 @@ var MenuRadioGroupFr = function (_a, externalRef) {
 };
 var MenuRadioGroup = forwardRef(MenuRadioGroupFr);
 
-var GridUpdatingContext = createContext({
-    checkUpdating: function () {
-        console.error("Missing GridUpdatingContext");
-        return false;
-    },
-    modifyUpdating: function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            console.error("Missing GridUpdatingContext");
-            return [2 /*return*/];
-        });
-    }); }
-});
-
-var GridUpdatingContextProvider = function (props) {
-    var updatingBlocks = useRef({});
-    var updating = useRef({});
-    var resetUpdating = function () {
-        var mergedUpdatingBlocks = {};
-        for (var key in updatingBlocks.current) {
-            mergedUpdatingBlocks[key] = flatten(updatingBlocks.current[key]);
-        }
-        updating.current = mergedUpdatingBlocks;
-    };
-    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) {
-                case 0:
-                    fieldUpdatingIds = (_a = updatingBlocks.current[field]) !== null && _a !== void 0 ? _a : (updatingBlocks.current[field] = []);
-                    idRef = __spreadArray([], ids, true);
-                    fieldUpdatingIds.push(idRef);
-                    resetUpdating();
-                    return [4 /*yield*/, fn()];
-                case 1:
-                    _b.sent();
-                    remove(fieldUpdatingIds, function (idList) { return idList === idRef; });
-                    resetUpdating();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    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 })));
-};
-
 var GridContext = createContext({
     gridReady: function () {
         console.error("no context provider for gridReady");
@@ -1903,6 +1858,19 @@ var GridContext = createContext({
     }
 });
 
+var GridUpdatingContext = createContext({
+    checkUpdating: function () {
+        console.error("Missing GridUpdatingContext");
+        return false;
+    },
+    modifyUpdating: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.error("Missing GridUpdatingContext");
+            return [2 /*return*/];
+        });
+    }); }
+});
+
 /**
  * Context for AgGrid operations.
  * Make sure you wrap AgGrid in this.
@@ -2182,6 +2150,114 @@ var GridContextProvider = function (props) {
         } }, { children: props.children })));
 };
 
+var GridUpdatingContextProvider = function (props) {
+    var updatingBlocks = useRef({});
+    var updating = useRef({});
+    var resetUpdating = function () {
+        var mergedUpdatingBlocks = {};
+        for (var key in updatingBlocks.current) {
+            mergedUpdatingBlocks[key] = flatten(updatingBlocks.current[key]);
+        }
+        updating.current = mergedUpdatingBlocks;
+    };
+    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) {
+                case 0:
+                    fieldUpdatingIds = (_a = updatingBlocks.current[field]) !== null && _a !== void 0 ? _a : (updatingBlocks.current[field] = []);
+                    idRef = __spreadArray([], ids, true);
+                    fieldUpdatingIds.push(idRef);
+                    resetUpdating();
+                    return [4 /*yield*/, fn()];
+                case 1:
+                    _b.sent();
+                    remove(fieldUpdatingIds, function (idList) { return idList === idRef; });
+                    resetUpdating();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    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 })));
+};
+
+var GridPopoverContext = createContext({
+    anchorRef: { current: null },
+    saving: false,
+    setSaving: function () { },
+    field: "",
+    value: null,
+    data: {},
+    selectedRows: [],
+    updateValue: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, false];
+    }); }); }
+});
+var useGridPopoverContext = function () {
+    return useContext(GridPopoverContext);
+};
+
+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 anchorRef = useRef(props.eGridCell);
+    var _f = useState(false), saving = _f[0], setSaving = _f[1];
+    var colDef = props.colDef;
+    var cellEditorParams = colDef.cellEditorParams;
+    var multiEdit = (_b = cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.multiEdit) !== null && _b !== void 0 ? _b : false;
+    // 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 result;
+        return __generator(this, function (_a) {
+            switch (_a.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();
+                    _a.label = 2;
+                case 2: return [2 /*return*/, result];
+            }
+        });
+    }); }, [field, saving, selectedRows, stopEditing, updatingCells]);
+    return (jsx(GridPopoverContext.Provider, __assign({ value: {
+            anchorRef: anchorRef,
+            saving: saving,
+            setSaving: setSaving,
+            selectedRows: selectedRows,
+            field: field,
+            data: props.data,
+            value: props.value,
+            updateValue: updateValue
+        } }, { children: children })));
+};
+
+var GridSubComponentContext = createContext({
+    value: "GridSubComponentContext value no context",
+    setValue: function () {
+        console.error("GridSubComponentContext setValue no context");
+    },
+    setValid: function () {
+        console.error("GridSubComponentContext setValid no context");
+    },
+    triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.error("GridSubComponentContext triggerSave no context");
+            return [2 /*return*/];
+        });
+    }); }
+});
+
 function toVal(mix) {
 	var k, y, str='';
 	if (mix) {
@@ -2552,7 +2628,7 @@ var Grid = function (params) {
             startCellEditing(event);
         }
     }, [startCellEditing]);
-    var onCellKeyDown = useCallback(function (e) {
+    var onCellKeyPress = useCallback(function (e) {
         if (e.event.key === "Enter")
             startCellEditing(e);
     }, [startCellEditing]);
@@ -2570,7 +2646,7 @@ var Grid = function (params) {
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
     return (jsxs("div", __assign({ "data-testid": params.dataTestId, className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale") }, { 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, { getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyDown: onCellKeyDown, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_b = params.postSortRows) !== null && _b !== void 0 ? _b : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
+                    } }) }))), jsx(AgGridReact, { getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: "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: (_b = params.postSortRows) !== null && _b !== void 0 ? _b : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
 };
 
 var GenericMultiEditCellClass = function (props) {
@@ -2613,12 +2689,12 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$8 = ".AgGridGenericCellRenderer-icon{margin-right:4px}.AgGridGenericCellRenderer-ic_infoIcon{fill:#3a7cdf;margin-right:4px}.AgGridGenericCellRenderer-ic_warningIcon{fill:#ea6a2e;margin-right:4px}";
-styleInject(css_248z$8);
-
-var css_248z$7 = ".GridLoadableCell-container{align-items:center;display:flex}";
+var css_248z$7 = ".AgGridGenericCellRenderer-icon{margin-right:4px}.AgGridGenericCellRenderer-ic_infoIcon{fill:#3a7cdf;margin-right:4px}.AgGridGenericCellRenderer-ic_warningIcon{fill:#ea6a2e;margin-right:4px}";
 styleInject(css_248z$7);
 
+var css_248z$6 = ".GridLoadableCell-container{align-items:center;display:flex}";
+styleInject(css_248z$6);
+
 var GridLoadableCell = function (props) {
     if (props.isLoading) {
         return (jsx("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: jsx(LuiMiniSpinner, { size: 22, divProps: { role: "status", "aria-label": "Loading", style: { marginBottom: 4 } } }) })));
@@ -2648,58 +2724,6 @@ var GridRendererGenericCell = function (props) {
     return (jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_c = (_b = colDef.field) !== null && _b !== void 0 ? _b : colDef.colId) !== null && _c !== void 0 ? _c : "", props.data.id) }, { children: jsxs(Fragment$1, { children: [typeof warningText === "string" && jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsx(GridIcon, { icon: "ic_info", title: infoText }), jsx("span", __assign({ title: formatted }, { children: formatted }))] }) })));
 };
 
-var GridPopoverContext = createContext({
-    anchorRef: { current: null },
-    saving: false,
-    setSaving: function () { },
-    field: "",
-    value: null,
-    data: {},
-    selectedRows: [],
-    updateValue: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-        return [2 /*return*/, false];
-    }); }); }
-});
-var useGridPopoverContext = function () {
-    return useContext(GridPopoverContext);
-};
-
-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;
-    var anchorRef = useRef(props.eGridCell);
-    var _f = useState(false), saving = _f[0], setSaving = _f[1];
-    var colDef = props.colDef;
-    var cellEditorParams = colDef.cellEditorParams;
-    var multiEdit = (_b = cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.multiEdit) !== null && _b !== void 0 ? _b : false;
-    // 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 _a; return __generator(this, function (_b) {
-        switch (_b.label) {
-            case 0:
-                _a = !saving;
-                if (!_a) return [3 /*break*/, 2];
-                return [4 /*yield*/, updatingCells({ selectedRows: selectedRows, field: field }, saveFn, setSaving)];
-            case 1:
-                _a = (_b.sent());
-                _b.label = 2;
-            case 2: return [2 /*return*/, _a];
-        }
-    }); }); }, [field, saving, selectedRows, updatingCells]);
-    return (jsx(GridPopoverContext.Provider, __assign({ value: {
-            anchorRef: anchorRef,
-            saving: saving,
-            setSaving: setSaving,
-            selectedRows: selectedRows,
-            field: field,
-            data: props.data,
-            value: props.value,
-            updateValue: updateValue
-        } }, { children: children })));
-};
-
 var GridCellRenderer = function (props) {
     var _a, _b, _c;
     var checkUpdating = useContext(GridUpdatingContext).checkUpdating;
@@ -2716,11 +2740,15 @@ var GridCellRenderer = function (props) {
  */
 var GridCell = function (props, custom) {
     var _a;
-    return __assign(__assign(__assign(__assign(__assign({ colId: props.field, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true }, ((custom === null || custom === void 0 ? void 0 : custom.editor) && {
+    return __assign(__assign(__assign(__assign(__assign(__assign({ colId: props.field, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true }, ((custom === null || custom === void 0 ? void 0 : custom.editor) && {
         cellClass: (custom === null || custom === void 0 ? void 0 : custom.multiEdit) ? GenericMultiEditCellClass : undefined,
         editable: (_a = props.editable) !== null && _a !== void 0 ? _a : true,
         cellEditor: GenericCellEditorComponentWrapper(custom)
-    })), ((custom === null || custom === void 0 ? void 0 : custom.editorParams) && {
+    })), { suppressKeyboardEvent: function (e) {
+            // It's important that aggrid doesn't trigger edit on enter
+            // as the incorrect selected rows will be returned
+            return e.event.key === "Enter";
+        } }), ((custom === null || custom === void 0 ? void 0 : custom.editorParams) && {
         cellEditorParams: __assign(__assign({}, custom.editorParams), { multiEdit: custom.multiEdit })
     })), { 
         // Default value formatter, otherwise react freaks out on objects
@@ -2789,8 +2817,77 @@ var useGridPopoverHook = function (props) {
             }
         });
     }); }, [props.save, 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
+                    if (event.reason === "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
                     jsx("div", { style: {
@@ -2805,7 +2902,10 @@ var useGridPopoverHook = function (props) {
     }, [anchorRef, isOpen, props.className, saving, triggerSave]);
     return {
         popoverWrapper: popoverWrapper,
-        triggerSave: triggerSave
+        triggerSave: triggerSave,
+        onlyInputKeyboardEventHandlers: onlyInputKeyboardEventHandlers,
+        firstInputKeyboardEventHandlers: firstInputKeyboardEventHandlers,
+        lastInputKeyboardEventHandlers: lastInputKeyboardEventHandlers
     };
 };
 
@@ -2828,12 +2928,12 @@ var GridRenderPopoutMenuCell = function (props) {
     return (jsx(GridLoadableCell, __assign({ isLoading: isLoading, className: disabled ? "GridPopoutMenu-burgerDisabled" : "GridPopoutMenu-burger" }, { children: jsx(LuiIcon, { name: "ic_more_vert", alt: "More actions", size: "md" }) })));
 };
 
-var css_248z$6 = ".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$6);
-
-var css_248z$5 = ".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$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}";
+styleInject(css_248z$4);
+
 /* global setTimeout, clearTimeout */
 
 var dist = function debounce(fn) {
@@ -2921,9 +3021,13 @@ var GridFormDropDown = function (props) {
     var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = useRef(false);
     var _d = useState(null), options = _d[0], setOptions = _d[1];
-    var _e = useState([]), subComponentValues = _e[0], setSubComponentValues = _e[1];
+    var subComponentIsValid = useRef(false);
+    var _e = useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
+    var _f = useState(), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
     var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
+            if (subComponentValue !== undefined && !subComponentIsValid.current)
+                return [2 /*return*/, false];
             return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
                     var hasChanged;
                     return __generator(this, function (_a) {
@@ -3066,67 +3170,61 @@ var GridFormDropDown = function (props) {
             }
         });
     }); }, [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props]);
-    var popoverWrapper = useGridPopoverHook({ className: props.className }).popoverWrapper;
+    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 (!subComponentIsValid.current)
+                        return [2 /*return*/, false];
+                    return [4 /*yield*/, selectItemHandler(selectedSubComponent.value, subSelectedValue)];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/, true];
+            }
+        });
+    }); }, [selectItemHandler, selectedSubComponent, subSelectedValue]);
+    var popoverWrapper = useGridPopoverHook({ className: props.className, save: save }).popoverWrapper;
     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); } }) })));
                         } })), 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 : (jsx("div", { children: !item.subComponent ? (jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () {
-                                        selectItemHandler(item.value).then();
-                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(fieldToString(field), "-").concat(index))) : (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
-                                        return item.subComponent && (jsx(item.subComponent, { setValue: function (value) {
-                                                var localSubComponentValues = __spreadArray([], subComponentValues, true);
-                                                var subComponentValueIndex = localSubComponentValues.findIndex(function (_a) {
-                                                    var optionValue = _a.optionValue;
-                                                    return optionValue === item.value;
-                                                });
-                                                if (subComponentValueIndex !== -1) {
-                                                    localSubComponentValues[subComponentValueIndex].subComponentValue = value;
+                            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: [jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function (e) {
+                                            if (item.subComponent) {
+                                                if (selectedSubComponent === item) {
+                                                    setSelectedSubComponent(null);
+                                                    subComponentIsValid.current = true;
                                                 }
                                                 else {
-                                                    localSubComponentValues.push({
-                                                        subComponentValue: value,
-                                                        optionValue: item.value
-                                                    });
+                                                    setSelectedSubComponent(item);
                                                 }
-                                                setSubComponentValues(localSubComponentValues);
-                                            }, keyDown: function (key, event) {
-                                                var subComponentItem = subComponentValues.find(function (_a) {
-                                                    var optionValue = _a.optionValue;
-                                                    return optionValue === item.value;
-                                                });
-                                                if ((key === "Enter" || key === "Tab") && subComponentItem) {
-                                                    event.preventDefault();
-                                                    event.stopPropagation();
-                                                    return selectItemHandler(item.value, subComponentItem.subComponentValue).then(function () {
+                                                e.keepOpen = true;
+                                            }
+                                            else {
+                                                selectItemHandler(item.value).then();
+                                            }
+                                        } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(fieldToString(field), "-").concat(index)), item.subComponent && selectedSubComponent === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                                value: subSelectedValue,
+                                                setValue: function (value) {
+                                                    setSubSelectedValue(value);
+                                                },
+                                                setValid: function (valid) {
+                                                    subComponentIsValid.current = valid;
+                                                },
+                                                triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                                    return __generator(this, function (_a) {
                                                         ref.closeMenu();
-                                                        return true;
+                                                        return [2 /*return*/];
                                                     });
-                                                }
-                                                return false;
-                                            } }, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")));
-                                    } }), "".concat(fieldToString(field), "-").concat(index, "_subcomponent"))) }, "menu-wrapper-".concat(index)));
+                                                }); }
+                                            } }, { children: item.subComponent && (jsx(item.subComponent, {}, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner"))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index)));
                         })] }) }))] }));
 };
 
-var GridSubComponentContext = createContext({
-    value: "GridSubComponentContext value no context",
-    setValue: function () {
-        console.error("GridSubComponentContext setValue no context");
-    },
-    setValid: function () {
-        console.error("GridSubComponentContext setValid no context");
-    },
-    triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            console.error("GridSubComponentContext triggerSave no context");
-            return [2 /*return*/];
-        });
-    }); }
-});
-
 var GridFormMultiSelect = function (props) {
     var selectedRows = useGridPopoverContext().selectedRows;
     var initialiseValues = useMemo(function () {
@@ -3231,7 +3329,10 @@ var GridFormMultiSelect = function (props) {
             setSelectedValues(__assign(__assign({}, selectedValues), (_a = {}, _a["".concat(item.value)] = null, _a)));
         }
     }, [selectedValues]);
-    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
+    var _e = useGridPopoverHook({
+        className: props.className,
+        save: save
+    }), popoverWrapper = _e.popoverWrapper, lastInputKeyboardEventHandlers = _e.lastInputKeyboardEventHandlers, triggerSave = _e.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;
@@ -3241,18 +3342,7 @@ var GridFormMultiSelect = function (props) {
                         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);
-                                    }, onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () {
-                                        return __generator(this, function (_a) {
-                                            if (e.key === "Enter")
-                                                triggerSave().then();
-                                            else if (e.key === " ") {
-                                                toggleValue(item);
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                            }
-                                            return [2 /*return*/];
-                                        });
-                                    }); } }, { 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: {
+                                    } }, 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: {
                                             onClick: function (e) {
                                                 e.preventDefault();
                                                 e.stopPropagation();
@@ -3280,8 +3370,8 @@ var GridPopoutEditMultiSelect = function (colDef, props) {
     return GridCell(colDef, __assign(__assign({ editor: GridFormMultiSelect }, props), { editorParams: __assign({ className: "GridMultiSelect-containerMedium" }, props.editorParams) }));
 };
 
-var css_248z$4 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
-styleInject(css_248z$4);
+var css_248z$3 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
+styleInject(css_248z$3);
 
 /** Menu configuration types **/
 var PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
@@ -3379,8 +3469,8 @@ var GridFormPopoverMenu = function (props) {
             e.keepOpen = true;
         }
         else {
-            setSubComponentSelected(null);
             actionClick(item).then();
+            e.keepOpen = true;
         }
     }, [actionClick, subComponentSelected]);
     var selectedRowCount = selectedRows.length;
@@ -3397,21 +3487,16 @@ var GridFormPopoverMenu = function (props) {
                     return [4 /*yield*/, actionClick(subComponentSelected)];
                 case 1:
                     _a.sent();
-                    _a.label = 2;
-                case 2: return [2 /*return*/, true];
+                    return [2 /*return*/, false];
+                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;
-    var localTriggerSave = function (reason) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            if (!subComponentIsValid.current)
-                return [2 /*return*/];
-            return [2 /*return*/, triggerSave(reason)];
-        });
-    }); };
     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$1, { 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 (_) {
+                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 (_) {
                                 return item.subComponent && (jsx(GridSubComponentContext.Provider, __assign({ value: {
                                         value: subSelectedValue,
                                         setValue: function (value) {
@@ -3420,9 +3505,9 @@ var GridFormPopoverMenu = function (props) {
                                         setValid: function (valid) {
                                             subComponentIsValid.current = valid;
                                         },
-                                        triggerSave: localTriggerSave
+                                        triggerSave: triggerSave
                                     } }, { children: jsx(item.subComponent, {}) })));
-                            } }), "".concat(item.label, "_subcomponent")))] })));
+                            } }), "".concat(item.label, "_subcomponent")))] }, "".concat(item.label))));
             }) }) })));
 };
 
@@ -3514,16 +3599,19 @@ var convertDDToDMS = function (dd, showPositiveSymbol, addTrailingZeros) {
     return dmsString;
 };
 
-var css_248z$3 = ".GridFormEditBearing-input{width:320px}";
-styleInject(css_248z$3);
-
-var css_248z$2 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
+var css_248z$2 = ".GridFormEditBearing-input{width:320px}";
 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 TextInputFormatted = function (props) {
-    return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", spellCheck: true, defaultValue: props.value, onChange: props.onChange, onFocus: props.onFocus, onClick: props.onClick, onMouseEnter: function (e) {
+    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.inputProps)), 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.warning && (jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsx(LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
+                            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 })))] })));
 };
 
 var GridFormEditBearing = function (props) {
@@ -3558,18 +3646,13 @@ var GridFormEditBearing = function (props) {
             }
         });
     }); }, [field, initialValue, props, value]);
-    var _c = useGridPopoverHook({ className: props.className, save: save }), triggerSave = _c.triggerSave, popoverWrapper = _c.popoverWrapper;
-    return popoverWrapper(jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsx(TextInputFormatted, { value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
+    var _c = useGridPopoverHook({
+        className: props.className,
+        save: save
+    }), popoverWrapper = _c.popoverWrapper, onlyInputKeyboardEventHandlers = _c.onlyInputKeyboardEventHandlers;
+    return popoverWrapper(jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsx(TextInputFormatted, __assign({ value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
                 setValue(e.target.value.trim());
-            }, inputProps: {
-                autoFocus: true,
-                placeholder: props.placeHolder,
-                disabled: false,
-                maxLength: 16,
-                onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-                    return [2 /*return*/, e.key === "Enter" && triggerSave().then()];
-                }); }); }
-            }, formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range) }) })));
+            }, autoFocus: true, placeholder: props.placeHolder }, onlyInputKeyboardEventHandlers, { formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range) })) })));
 };
 
 var GridPopoverEditBearingLike = function (colDef, props) {
@@ -3706,32 +3789,44 @@ var useGenerateOrDefaultId = function (idFromProps) {
     return id;
 };
 var TextAreaInput = function (props) {
-    var _a, _b;
-    var id = useGenerateOrDefaultId((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.id);
-    return (jsxs("div", __assign({ className: clsx("LuiTextAreaInput Grid-popoverContainer", ((_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.disabled) ? "isDisabled" : "", (props === null || props === void 0 ? void 0 : props.error) ? "hasError" : "") }, { children: [jsxs("label", __assign({ htmlFor: id }, { children: [props.mandatory && jsx("span", __assign({ className: "LuiTextAreaInput-mandatory" }, { children: "*" })), props.label && jsx("span", __assign({ className: "LuiTextAreaInput-label" }, { children: props.label })), jsxs("div", __assign({ className: "LuiTextAreaInput-wrapper" }, { children: [" ", jsx("textarea", __assign({ id: id, value: props.value, onChange: props.onChange, rows: 5 }, props.inputProps, { onMouseEnter: function (e) {
-                                    if (document.activeElement != e.currentTarget) {
-                                        e.currentTarget.focus();
-                                        e.currentTarget.selectionStart = e.currentTarget.value.length;
-                                    }
-                                } }))] }))] })), 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] })))] })));
+    var _a;
+    var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
+    return (jsxs("div", __assign({ className: clsx("LuiTextAreaInput Grid-popoverContainer", props.disabled ? "isDisabled" : "", props.error ? "hasError" : "", props.className) }, { children: [jsxs("label", __assign({ htmlFor: id }, { children: [props.mandatory != null && jsx("span", __assign({ className: "LuiTextAreaInput-mandatory" }, { children: "*" })), props.label != null && jsx("span", __assign({ className: "LuiTextAreaInput-label" }, { children: props.label })), jsx("div", __assign({ className: "LuiTextAreaInput-wrapper" }, { children: jsx("textarea", __assign({ rows: 5 }, omit(props, ["error", "value", "helpText", "formatted", "className"]), { id: id, value: (_a = props.value) !== null && _a !== void 0 ? _a : "", spellCheck: true, onMouseEnter: function (e) {
+                                if (document.activeElement != e.currentTarget) {
+                                    e.currentTarget.focus();
+                                    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 })))] })));
 };
 
-var GridFormTextArea = function (props) {
-    var _a;
-    var _b = useGridPopoverContext(), field = _b.field, initialVale = _b.value;
-    var _c = useState(initialVale != null ? "".concat(initialVale) : ""), value = _c[0], setValue = _c[1];
-    var invalid = useCallback(function () {
-        if (props.required && value.length == 0) {
-            return "Some text is required";
-        }
-        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);
-        }
+var TextInputValidator = function (props, value) {
+    if (value == null)
         return null;
-    }, [props, value]);
+    // This can happen because subcomponent is invoked without type safety
+    if (typeof value !== "string") {
+        console.error("Value is not a string", value);
+    }
+    if (props.required && value.length === 0) {
+        return "Some text is required";
+    }
+    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);
+    }
+    return null;
+};
+
+var GridFormTextArea = function (props) {
+    var _a, _b;
+    var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value;
+    var _d = useState(initialVale != null ? "".concat(initialVale) : ""), value = _d[0], setValue = _d[1];
+    var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press tab to save";
+    var invalid = useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -3755,30 +3850,19 @@ var GridFormTextArea = function (props) {
             }
         });
     }); }, [invalid, initialVale, value, props, field]);
-    var popoverWrapper = useGridPopoverHook({ className: props.className, save: save }).popoverWrapper;
-    return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 } }, { children: jsx(TextAreaInput, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), inputProps: { placeholder: props.placeholder } }) })));
+    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, lastInputKeyboardEventHandlers = _e.lastInputKeyboardEventHandlers;
+    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 }, lastInputKeyboardEventHandlers)) })));
 };
 
 var GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __assign({ editor: GridFormTextArea }, params)); };
 
 var GridFormTextInput = function (props) {
-    var _a;
-    var _b = useGridPopoverContext(), field = _b.field, data = _b.data, initialVale = _b.value;
+    var _a, _b;
+    var _c = useGridPopoverContext(), field = _c.field, initialVale = _c.value;
+    var helpText = (_a = props.helpText) !== null && _a !== void 0 ? _a : "Press enter or tab to save";
     var initValue = initialVale == null ? "" : "".concat(initialVale);
-    var _c = useState(initValue), value = _c[0], setValue = _c[1];
-    var invalid = useCallback(function () {
-        var trimmedValue = value.trim();
-        if (props.required && trimmedValue.length == 0) {
-            return "Some text is required";
-        }
-        if (props.maxLength && trimmedValue.length > props.maxLength) {
-            return "Text must be no longer than ".concat(props.maxLength, " characters");
-        }
-        if (props.validate) {
-            return props.validate(trimmedValue, data);
-        }
-        return null;
-    }, [data, props, value]);
+    var _d = useState(initValue), value = _d[0], setValue = _d[1];
+    var invalid = useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
     var save = useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var trimmedValue;
         return __generator(this, function (_a) {
@@ -3804,90 +3888,72 @@ var GridFormTextInput = function (props) {
             }
         });
     }); }, [invalid, value, initValue, props, field]);
-    var _d = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _d.popoverWrapper, triggerSave = _d.triggerSave;
-    return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 }, className: "FormTest" }, { children: jsx(TextInputFormatted, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, inputProps: {
-                style: { width: "100%" },
-                placeholder: props.placeholder,
-                onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-                    return [2 /*return*/, e.key === "Enter" && triggerSave().then()];
-                }); }); }
-            } }) })));
+    var _e = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _e.popoverWrapper, lastInputKeyboardEventHandlers = _e.lastInputKeyboardEventHandlers;
+    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 }, lastInputKeyboardEventHandlers, { helpText: helpText })) })));
 };
 
 var GridPopoverTextInput = function (colDef, params) {
     return GridCell(colDef, __assign({ editor: GridFormTextInput }, params));
 };
 
-var css_248z$1 = ".GridFormSubComponentTextInput-full-width-input{padding:0;width:100%}";
-styleInject(css_248z$1);
-
-var GridFormSubComponentTextInput = function (_a) {
-    var keyDown = _a.keyDown, placeholder = _a.placeholder, setValue = _a.setValue, className = _a.className, customHelpText = _a.customHelpText;
-    var placeholderText = placeholder || "Other...";
-    var helpText = customHelpText || "Press enter or tab to save";
-    var inputClass = className || "GridFormSubComponentTextInput-full-width-input";
-    var _b = useState(""), inputValue = _b[0], setInputValue = _b[1];
-    return (jsxs("div", __assign({ style: {
-            display: "flex",
-            flexDirection: "column",
-            width: "100%",
-            padding: 0
-        } }, { children: [jsx(TextInputFormatted, { className: inputClass, value: inputValue, onChange: function (e) {
-                    var value = e.target.value;
-                    setValue(value);
-                    setInputValue(value);
-                }, inputProps: {
-                    onKeyDown: function (e) {
-                        return keyDown(e.key, e);
-                    },
-                    placeholder: placeholderText,
-                    onMouseEnter: function (e) {
-                        if (document.activeElement != e.currentTarget) {
-                            e.currentTarget.focus();
-                        }
-                    },
-                    style: {
-                        width: "100%"
-                    }
-                } }), jsx("span", __assign({ style: {
-                    fontSize: "0.7rem"
-                } }, { children: helpText }))] })));
+var GridFormSubComponentTextInput = function (props) {
+    var _a;
+    var _b = useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave;
+    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 () {
+        if (value == null)
+            setValue(props.defaultValue);
+    }, [props.defaultValue, setValue, value]);
+    var invalid = useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
+    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.shiftKey && triggerSave().then();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else if (e.key === "Enter") {
+                triggerSave().then();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }, placeholder: props.placeholder, style: {
+            width: "100%"
+        } }));
 };
 
-var GridSubComponentTextArea = function (props) {
-    var _a = useContext(GridSubComponentContext), value = _a.value, setValue = _a.setValue, setValid = _a.setValid, triggerSave = _a.triggerSave;
+var GridFormSubComponentTextArea = function (props) {
+    var _a;
+    var _b = useContext(GridSubComponentContext), value = _b.value, setValue = _b.setValue, setValid = _b.setValid, triggerSave = _b.triggerSave;
+    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 () {
         if (value == null)
             setValue(props.defaultValue);
     }, [props.defaultValue, setValue, value]);
-    var validate = useCallback(function (value) {
-        if (value == null)
-            return null;
-        // This can happen because subcomponent is invoked without type safety
-        if (typeof value !== "string") {
-            console.error("Value is not a string", value);
-        }
-        if (props.required && value.length === 0) {
-            return "Some text is required";
-        }
-        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);
-        }
-        return null;
-    }, [props]);
+    var invalid = useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
     useEffect(function () {
-        setValid(value != null && validate(value) == null);
-    }, [setValid, validate, value]);
-    return (jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsx(TextInputFormatted, { className: "free-text-input", value: value, onChange: function (e) { return setValue(e.target.value); }, error: validate(value), inputProps: {
-                autoFocus: true,
-                placeholder: props.placeholder,
-                onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-                    return [2 /*return*/, e.key === "Enter" && triggerSave().then()];
-                }); }); }
+        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.shiftKey && triggerSave().then();
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
             } }) })));
 };
 
@@ -4003,5 +4069,5 @@ var ActionButton = function (_a) {
                 } })) : (jsx(LuiIcon, { name: icon, alt: (_c = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name) !== null && _c !== void 0 ? _c : "", size: size })), jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_d = (localInProgress ? inProgressName : name)) !== null && _d !== void 0 ? _d : name })), jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
 };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponentWrapper, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentTextArea, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponentWrapper, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map