@linzjs/step-ag-grid 3.0.2 → 4.0.1

package/dist/index.js

@@ -1687,7 +1687,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) {
@@ -1709,7 +1712,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
@@ -2203,7 +2206,7 @@ var useGridPopoverContext = function () {
 var GridPopoverContextProvider = function (_a) {
     var _b, _c, _d;
     var props = _a.props, children = _a.children;
-    var _e = react.useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells;
+    var _e = react.useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells, stopEditing = _e.stopEditing;
     var anchorRef = react.useRef(props.eGridCell);
     var _f = react.useState(false), saving = _f[0], setSaving = _f[1];
     var colDef = props.colDef;
@@ -2212,18 +2215,23 @@ var GridPopoverContextProvider = function (_a) {
     // Then item that is clicked on will always be first in the list
     var selectedRows = react.useMemo(function () { return (multiEdit ? lodashEs.sortBy(getSelectedRows(), function (row) { return row.id !== props.data.id; }) : [props.data]); }, [getSelectedRows, multiEdit, props.data]);
     var field = (_d = (_c = props.colDef) === null || _c === void 0 ? void 0 : _c.field) !== null && _d !== void 0 ? _d : "";
-    var updateValue = react.useCallback(function (saveFn) { 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]);
+    var updateValue = react.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 (jsxRuntime.jsx(GridPopoverContext.Provider, __assign({ value: {
             anchorRef: anchorRef,
             saving: saving,
@@ -2622,7 +2630,7 @@ var Grid = function (params) {
             startCellEditing(event);
         }
     }, [startCellEditing]);
-    var onCellKeyDown = react.useCallback(function (e) {
+    var onCellKeyPress = react.useCallback(function (e) {
         if (e.event.key === "Enter")
             startCellEditing(e);
     }, [startCellEditing]);
@@ -2640,7 +2648,7 @@ var Grid = function (params) {
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
     return (jsxRuntime.jsxs("div", __assign({ "data-testid": params.dataTestId, className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale") }, { children: [params.quickFilter && (jsxRuntime.jsx("div", __assign({ className: "Grid-quickFilter" }, { children: jsxRuntime.jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
                         setInternalQuickFilter(event.target.value);
-                    } }) }))), jsxRuntime.jsx(agGridReact.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 })] })));
+                    } }) }))), jsxRuntime.jsx(agGridReact.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) {
@@ -2683,12 +2691,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 (jsxRuntime.jsx("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 22, divProps: { role: "status", "aria-label": "Loading", style: { marginBottom: 4 } } }) })));
@@ -2734,11 +2742,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
@@ -2807,8 +2819,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 = react.useCallback(function (children) {
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: anchorRef.current && (jsxRuntime.jsxs(ControlledMenu, __assign({ state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: function (event) {
+                    // Prevent menu from closing when modals are invoked
+                    if (event.reason === "blur")
+                        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
                     jsxRuntime.jsx("div", { style: {
@@ -2823,7 +2904,10 @@ var useGridPopoverHook = function (props) {
     }, [anchorRef, isOpen, props.className, saving, triggerSave]);
     return {
         popoverWrapper: popoverWrapper,
-        triggerSave: triggerSave
+        triggerSave: triggerSave,
+        onlyInputKeyboardEventHandlers: onlyInputKeyboardEventHandlers,
+        firstInputKeyboardEventHandlers: firstInputKeyboardEventHandlers,
+        lastInputKeyboardEventHandlers: lastInputKeyboardEventHandlers
     };
 };
 
@@ -2846,12 +2930,12 @@ var GridRenderPopoutMenuCell = function (props) {
     return (jsxRuntime.jsx(GridLoadableCell, __assign({ isLoading: isLoading, className: disabled ? "GridPopoutMenu-burgerDisabled" : "GridPopoutMenu-burger" }, { children: jsxRuntime.jsx(lui.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) {
@@ -2939,9 +3023,13 @@ var GridFormDropDown = function (props) {
     var _c = react.useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = react.useRef(false);
     var _d = react.useState(null), options = _d[0], setOptions = _d[1];
-    var _e = react.useState([]), subComponentValues = _e[0], setSubComponentValues = _e[1];
+    var subComponentIsValid = react.useRef(false);
+    var _e = react.useState(), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
+    var _f = react.useState(), selectedSubComponent = _f[0], setSelectedSubComponent = _f[1];
     var selectItemHandler = react.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) {
@@ -3084,48 +3172,58 @@ var GridFormDropDown = function (props) {
             }
         });
     }); }, [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props]);
-    var popoverWrapper = useGridPopoverHook({ className: props.className }).popoverWrapper;
+    var save = react.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(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsxs("div", __assign({ className: "GridFormDropDown-filter" }, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                             var _b;
                             var ref = _a.ref;
                             return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsxRuntime.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); } }) })));
                         } })), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] }))), jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (jsxRuntime.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 ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsx("div", { children: !item.subComponent ? (jsxRuntime.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))) : (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
-                                        return item.subComponent && (jsxRuntime.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 ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsxRuntime.jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs("div", { children: [jsxRuntime.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 && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) { return (jsxRuntime.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 && (jsxRuntime.jsx(item.subComponent, {}, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner"))) }))); } }), "".concat(item.label, "_subcomponent")))] }, "menu-wrapper-".concat(index)));
                         })] }) }))] }));
 };
 
@@ -3233,7 +3331,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(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && props.filtered && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                                 var _b;
                                 var ref = _a.ref;
@@ -3243,18 +3344,7 @@ var GridFormMultiSelect = function (props) {
                         return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs("div", { children: [jsxRuntime.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: jsxRuntime.jsx(lui.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: jsxRuntime.jsx(lui.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();
@@ -3282,8 +3372,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 });
@@ -3381,8 +3471,8 @@ var GridFormPopoverMenu = function (props) {
             e.keepOpen = true;
         }
         else {
-            setSubComponentSelected(null);
             actionClick(item).then();
+            e.keepOpen = true;
         }
     }, [actionClick, subComponentSelected]);
     var selectedRowCount = selectedRows.length;
@@ -3399,21 +3489,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(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !filteredOptions, className: "GridFormPopupMenu" }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
-                return item.label === PopoutMenuSeparator ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+                return item.label === PopoutMenuSeparator ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.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 && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
                                 return item.subComponent && (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
                                         value: subSelectedValue,
                                         setValue: function (value) {
@@ -3422,9 +3507,9 @@ var GridFormPopoverMenu = function (props) {
                                         setValid: function (valid) {
                                             subComponentIsValid.current = valid;
                                         },
-                                        triggerSave: localTriggerSave
+                                        triggerSave: triggerSave
                                     } }, { children: jsxRuntime.jsx(item.subComponent, {}) })));
-                            } }), "".concat(item.label, "_subcomponent")))] })));
+                            } }), "".concat(item.label, "_subcomponent")))] }, "".concat(item.label))));
             }) }) })));
 };
 
@@ -3516,16 +3601,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 (jsxRuntime.jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsxRuntime.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 (jsxRuntime.jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.className) }, { children: [jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsxRuntime.jsx("input", __assign({ type: "text", spellCheck: true, defaultValue: props.value }, lodashEs.omit(props, ["error", "value", "helpText", "formatted", "className"]), { className: "LuiTextInput-input", onMouseEnter: function (e) {
                             e.currentTarget.focus();
-                        } }, props.inputProps)), jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
+                            props.onMouseEnter && props.onMouseEnter(e);
+                        } })), jsxRuntime.jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.helpText && !props.error && (jsxRuntime.jsx("span", __assign({ style: {
+                    fontSize: "0.7rem"
+                } }, { children: props.helpText })))] })));
 };
 
 var GridFormEditBearing = function (props) {
@@ -3560,18 +3648,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(jsxRuntime.jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsxRuntime.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(jsxRuntime.jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsxRuntime.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) {
@@ -3708,32 +3791,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 (jsxRuntime.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: [jsxRuntime.jsxs("label", __assign({ htmlFor: id }, { children: [props.mandatory && jsxRuntime.jsx("span", __assign({ className: "LuiTextAreaInput-mandatory" }, { children: "*" })), props.label && jsxRuntime.jsx("span", __assign({ className: "LuiTextAreaInput-label" }, { children: props.label })), jsxRuntime.jsxs("div", __assign({ className: "LuiTextAreaInput-wrapper" }, { children: [" ", jsxRuntime.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 && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextAreaInput-error" }, { children: [jsxRuntime.jsx(lui.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 (jsxRuntime.jsxs("div", __assign({ className: clsx("LuiTextAreaInput Grid-popoverContainer", props.disabled ? "isDisabled" : "", props.error ? "hasError" : "", props.className) }, { children: [jsxRuntime.jsxs("label", __assign({ htmlFor: id }, { children: [props.mandatory != null && jsxRuntime.jsx("span", __assign({ className: "LuiTextAreaInput-mandatory" }, { children: "*" })), props.label != null && jsxRuntime.jsx("span", __assign({ className: "LuiTextAreaInput-label" }, { children: props.label })), jsxRuntime.jsx("div", __assign({ className: "LuiTextAreaInput-wrapper" }, { children: jsxRuntime.jsx("textarea", __assign({ rows: 5 }, lodashEs.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 && (jsxRuntime.jsxs("span", __assign({ className: "LuiTextAreaInput-error" }, { children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextAreaInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.helpText && !props.error && (jsxRuntime.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 = react.useState(initialVale != null ? "".concat(initialVale) : ""), value = _c[0], setValue = _c[1];
-    var invalid = react.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 = react.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 = react.useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -3757,30 +3852,19 @@ var GridFormTextArea = function (props) {
             }
         });
     }); }, [invalid, initialVale, value, props, field]);
-    var popoverWrapper = useGridPopoverHook({ className: props.className, save: save }).popoverWrapper;
-    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 } }, { children: jsxRuntime.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, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
+    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsxRuntime.jsx(TextAreaInput, __assign({ value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), placeholder: props.placeholder, helpText: helpText }, onlyInputKeyboardEventHandlers)) })));
 };
 
 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 = react.useState(initValue), value = _c[0], setValue = _c[1];
-    var invalid = react.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 = react.useState(initValue), value = _d[0], setValue = _d[1];
+    var invalid = react.useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var trimmedValue;
         return __generator(this, function (_a) {
@@ -3806,90 +3890,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(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 }, className: "FormTest" }, { children: jsxRuntime.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, onlyInputKeyboardEventHandlers = _e.onlyInputKeyboardEventHandlers;
+    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 }, className: "FormTest" }, { children: jsxRuntime.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 })) })));
 };
 
 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 = react.useState(""), inputValue = _b[0], setInputValue = _b[1];
-    return (jsxRuntime.jsxs("div", __assign({ style: {
-            display: "flex",
-            flexDirection: "column",
-            width: "100%",
-            padding: 0
-        } }, { children: [jsxRuntime.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%"
-                    }
-                } }), jsxRuntime.jsx("span", __assign({ style: {
-                    fontSize: "0.7rem"
-                } }, { children: helpText }))] })));
+var GridFormSubComponentTextInput = function (props) {
+    var _a;
+    var _b = react.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
+    react.useEffect(function () {
+        if (value == null)
+            setValue(props.defaultValue);
+    }, [props.defaultValue, setValue, value]);
+    var invalid = react.useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
+    react.useEffect(function () {
+        setValid(value != null && invalid() == null);
+    }, [setValid, invalid, value]);
+    return (jsxRuntime.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: {
+            width: "100%"
+        } }));
 };
 
-var GridSubComponentTextArea = function (props) {
-    var _a = react.useContext(GridSubComponentContext), value = _a.value, setValue = _a.setValue, setValid = _a.setValid, triggerSave = _a.triggerSave;
+var GridFormSubComponentTextArea = function (props) {
+    var _a;
+    var _b = react.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
     react.useEffect(function () {
         if (value == null)
             setValue(props.defaultValue);
     }, [props.defaultValue, setValue, value]);
-    var validate = react.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 = react.useCallback(function () { return TextInputValidator(props, value); }, [props, value]);
     react.useEffect(function () {
-        setValid(value != null && validate(value) == null);
-    }, [setValid, validate, value]);
-    return (jsxRuntime.jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsxRuntime.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 (jsxRuntime.jsx("div", __assign({ className: clsx("FreeTextInput LuiDeprecatedForms", props.className) }, { children: jsxRuntime.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();
+                }
             } }) })));
 };
 
@@ -4019,6 +4085,7 @@ exports.GridContextProvider = GridContextProvider;
 exports.GridFormDropDown = GridFormDropDown;
 exports.GridFormMultiSelect = GridFormMultiSelect;
 exports.GridFormPopoverMenu = GridFormPopoverMenu;
+exports.GridFormSubComponentTextArea = GridFormSubComponentTextArea;
 exports.GridFormSubComponentTextInput = GridFormSubComponentTextInput;
 exports.GridHeaderSelect = GridHeaderSelect;
 exports.GridIcon = GridIcon;
@@ -4036,7 +4103,6 @@ exports.GridPopoverTextInput = GridPopoverTextInput;
 exports.GridRenderPopoutMenuCell = GridRenderPopoutMenuCell;
 exports.GridRendererGenericCell = GridRendererGenericCell;
 exports.GridSubComponentContext = GridSubComponentContext;
-exports.GridSubComponentTextArea = GridSubComponentTextArea;
 exports.GridUpdatingContext = GridUpdatingContext;
 exports.GridUpdatingContextProvider = GridUpdatingContextProvider;
 exports.Menu = Menu;