@linzjs/step-ag-grid 2.5.0 → 3.0.0

package/dist/index.js

@@ -903,7 +903,7 @@ var positionMenu = function (props) {
 
 var MenuListContext = react.createContext({});
 
-// FIXME hacking a default context in here is probably bad
+// FIXME hacking a default context in here is probably bad, but the context is mess
 var SettingsContext = react.createContext({});
 
 var MenuList = function (_a) {
@@ -921,6 +921,7 @@ var MenuList = function (_a) {
     var focusRef = react.useRef(null);
     var arrowRef = react.useRef(null);
     var prevOpen = react.useRef(false);
+    var latestWindowSize = react.useRef({ width: 0, height: 0 });
     var latestMenuSize = react.useRef({ width: 0, height: 0 });
     var latestHandlePosition = react.useRef(function () { });
     var _t = useItems(menuRef, focusRef), hoverItem = _t.hoverItem, dispatch = _t.dispatch, updateItems = _t.updateItems;
@@ -1146,6 +1147,32 @@ var MenuList = function (_a) {
         resizeObserver.observe(observeTarget, { box: "border-box" });
         return function () { return resizeObserver.unobserve(observeTarget); };
     }, [reposition]);
+    // Matt added window resize observer
+    react.useEffect(function () {
+        if (typeof ResizeObserver !== "function" || reposition === "initial")
+            return;
+        var callback = lodashEs.debounce(function () {
+            var _a = menuRef.current.ownerDocument.body.getBoundingClientRect(), width = _a.width, height = _a.height;
+            if (width === 0 || height === 0)
+                return;
+            if (floatEqual(width, latestWindowSize.current.width, 1) &&
+                floatEqual(height, latestWindowSize.current.height, 1)) {
+                return;
+            }
+            latestWindowSize.current = { width: width, height: height };
+            reactDom.flushSync(function () {
+                latestHandlePosition.current();
+                forceReposSubmenu();
+            });
+        }, 250);
+        var resizeObserver = new ResizeObserver(callback);
+        var observeTarget = menuRef.current.ownerDocument.body;
+        resizeObserver.observe(observeTarget, { box: "border-box" });
+        return function () {
+            callback.cancel();
+            resizeObserver.unobserve(observeTarget);
+        };
+    }, [reposition]);
     react.useEffect(function () {
         if (!isOpen) {
             dispatch(HoverActionTypes.RESET, undefined, 0);
@@ -2627,52 +2654,49 @@ var GridPopoverContext = react.createContext({
     anchorRef: { current: null },
     saving: false,
     setSaving: function () { },
-    setProps: function () { },
-    propsRef: { current: null }
+    field: "",
+    value: null,
+    data: null,
+    selectedRows: [],
+    updateValue: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, false];
+    }); }); }
 });
 
-var GridPopoverContextProvider = function (props) {
-    var _a = react.useContext(GridContext), getSelectedRows = _a.getSelectedRows, updatingCells = _a.updatingCells;
-    var anchorRef = react.useRef();
-    var propsRef = react.useRef({});
-    var _b = react.useState(false), saving = _b[0], setSaving = _b[1];
-    var setProps = react.useCallback(function (props, multiEdit) {
-        var _a, _b;
-        // Then item that is clicked on will always be first in the list
-        var selectedRows = multiEdit
-            ? lodashEs.sortBy(getSelectedRows(), function (row) { return row.id !== props.data.id; })
-            : [props.data];
-        var field = (_b = (_a = props.colDef) === null || _a === void 0 ? void 0 : _a.field) !== null && _b !== void 0 ? _b : "";
-        anchorRef.current = props.eGridCell;
-        propsRef.current = {
-            value: props.value,
-            data: props.data,
-            field: field,
-            selectedRows: selectedRows,
-            updateValue: 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];
-                    }
-                });
-            }); }
-        };
-    }, [getSelectedRows, saving, updatingCells]);
+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 anchorRef = react.useRef(props.eGridCell);
+    var _f = react.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 = 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]);
     return (jsxRuntime.jsx(GridPopoverContext.Provider, __assign({ value: {
             anchorRef: anchorRef,
             saving: saving,
             setSaving: setSaving,
-            propsRef: propsRef,
-            setProps: setProps
-        } }, { children: props.children })));
+            selectedRows: selectedRows,
+            field: field,
+            data: props.data,
+            value: props.value,
+            updateValue: updateValue
+        } }, { children: children })));
 };
 
 var GridCellRenderer = function (props) {
@@ -2694,7 +2718,7 @@ var GridCell = function (props, custom) {
     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) && {
         cellClass: (custom === null || custom === void 0 ? void 0 : custom.multiEdit) ? GenericMultiEditCellClass : undefined,
         editable: (_a = props.editable) !== null && _a !== void 0 ? _a : true,
-        cellEditor: GenericCellEditorComponent(custom.editor)
+        cellEditor: GenericCellEditorComponentWrapper(custom)
     })), ((custom === null || custom === void 0 ? void 0 : custom.editorParams) && {
         cellEditorParams: __assign(__assign({}, custom.editorParams), { multiEdit: custom.multiEdit })
     })), { 
@@ -2709,21 +2733,10 @@ var GridCell = function (props, custom) {
                 return JSON.stringify(params.value);
         } }), props), { cellRenderer: GridCellRenderer, cellRendererParams: __assign({ originalCellRenderer: props.cellRenderer }, props.cellRendererParams) });
 };
-// TODO memo?
-var GenericCellEditorComponent = function (editor) {
-    return react.forwardRef(function GenericCellEditorComponent2(props, _) {
-        return (jsxRuntime.jsx(GridPopoverContextProvider, { children: jsxRuntime.jsx(GenericCellEditorComponent3, __assign({}, __assign(__assign({}, props), { editor: editor }))) }));
+var GenericCellEditorComponentWrapper = function (custom) {
+    return react.forwardRef(function GenericCellEditorComponentFr(cellEditorParams, _) {
+        return (jsxRuntime.jsxs(GridPopoverContextProvider, __assign({ props: cellEditorParams }, { children: [jsxRuntime.jsx(cellEditorParams.colDef.cellRenderer, __assign({}, cellEditorParams, cellEditorParams.colDef.cellRendererParams)), (custom === null || custom === void 0 ? void 0 : custom.editor) && jsxRuntime.jsx(custom.editor, __assign({}, cellEditorParams))] })));
     });
-};
-var GenericCellEditorComponent3 = function (props) {
-    var _a;
-    var _b = react.useContext(GridPopoverContext), setProps = _b.setProps, propsRef = _b.propsRef;
-    var colDef = props.colDef;
-    var cellEditorParams = colDef.cellEditorParams;
-    var multiEdit = (_a = cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.multiEdit) !== null && _a !== void 0 ? _a : false;
-    // TODO don't need all these props in context
-    setProps(props, multiEdit);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(colDef.cellRenderer, __assign({}, props)), (props === null || props === void 0 ? void 0 : props.editor) && jsxRuntime.jsx(props.editor, __assign({}, cellEditorParams, propsRef.current))] }));
 };
 
 /**
@@ -2744,7 +2757,7 @@ var ComponentLoadingWrapper = function (props) {
 
 var useGridPopoverHook = function (props) {
     var stopEditing = react.useContext(GridContext).stopEditing;
-    var _a = react.useContext(GridPopoverContext), anchorRef = _a.anchorRef, saving = _a.saving, propsRef = _a.propsRef;
+    var _a = react.useContext(GridPopoverContext), anchorRef = _a.anchorRef, saving = _a.saving, updateValue = _a.updateValue;
     var saveButtonRef = react.useRef(null);
     var _b = react.useState(false), isOpen = _b[0], setOpen = _b[1];
     react.useEffect(function () {
@@ -2752,22 +2765,20 @@ var useGridPopoverHook = function (props) {
     }, []);
     var triggerSave = react.useCallback(function (reason) { return __awaiter(void 0, void 0, void 0, function () {
         var _a, _b;
-        var _c, _d;
-        return __generator(this, function (_e) {
-            switch (_e.label) {
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
-                    _a = reason == "cancel" ||
-                        !props.save;
+                    _a = reason == "cancel" || !props.save;
                     if (_a) return [3 /*break*/, 3];
-                    _b = ((_c = propsRef.current) === null || _c === void 0 ? void 0 : _c.updateValue);
+                    _b = updateValue;
                     if (!_b) return [3 /*break*/, 2];
-                    return [4 /*yield*/, ((_d = propsRef.current) === null || _d === void 0 ? void 0 : _d.updateValue(props.save))];
+                    return [4 /*yield*/, updateValue(props.save)];
                 case 1:
-                    _b = (_e.sent());
-                    _e.label = 2;
+                    _b = (_c.sent());
+                    _c.label = 2;
                 case 2:
                     _a = (_b);
-                    _e.label = 3;
+                    _c.label = 3;
                 case 3:
                     if (_a) {
                         setOpen(false);
@@ -2776,7 +2787,7 @@ var useGridPopoverHook = function (props) {
                     return [2 /*return*/];
             }
         });
-    }); }, [props, stopEditing, propsRef]);
+    }); }, [props.save, stopEditing, updateValue]);
     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) {
                     triggerSave(event.reason).then();
@@ -2899,66 +2910,57 @@ var MenuHeaderString = "_____MENU_HEADER_____";
 var MenuHeaderItem = function (title) {
     return { label: title, value: MenuHeaderString };
 };
-var GridFormDropDown = function (_props) {
-    var props = _props;
-    var _a = react.useContext(GridContext), updatingCells = _a.updatingCells, stopEditing = _a.stopEditing;
+var GridFormDropDown = function (props) {
+    var _a = react.useContext(GridPopoverContext), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue;
+    var stopEditing = react.useContext(GridContext).stopEditing;
     var _b = react.useState(""), filter = _b[0], setFilter = _b[1];
     var _c = react.useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = react.useRef(false);
     var _d = react.useState(null), options = _d[0], setOptions = _d[1];
     var _e = react.useState([]), subComponentValues = _e[0], setSubComponentValues = _e[1];
     var selectItemHandler = react.useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
-        var field;
         return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    field = props.field;
-                    return [4 /*yield*/, updatingCells({ selectedRows: props.selectedRows, field: field }, function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-                            var hasChanged;
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0:
-                                        hasChanged = selectedRows.some(function (row) { return row[field] !== value; });
-                                        if (!hasChanged) return [3 /*break*/, 3];
-                                        if (!props.onSelectedItem) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value, subComponentValue: subComponentValue })];
-                                    case 1:
-                                        _a.sent();
-                                        return [3 /*break*/, 3];
-                                    case 2:
-                                        selectedRows.forEach(function (row) { return (row[field] = value); });
-                                        _a.label = 3;
-                                    case 3: return [2 /*return*/, true];
-                                }
-                            });
-                        }); })];
-                case 1: return [2 /*return*/, _a.sent()];
-            }
+            return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
+                    var hasChanged;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                hasChanged = selectedRows.some(function (row) { return row[field] !== value; });
+                                if (!hasChanged) return [3 /*break*/, 3];
+                                if (!props.onSelectedItem) return [3 /*break*/, 2];
+                                return [4 /*yield*/, props.onSelectedItem({ selectedRows: selectedRows, value: value, subComponentValue: subComponentValue })];
+                            case 1:
+                                _a.sent();
+                                return [3 /*break*/, 3];
+                            case 2:
+                                selectedRows.forEach(function (row) { return (row[field] = value); });
+                                _a.label = 3;
+                            case 3: return [2 /*return*/, true];
+                        }
+                    });
+                }); })];
         });
-    }); }, [props, updatingCells]);
+    }); }, [field, props, updateValue]);
     var selectFilterHandler = react.useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var field;
         return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    field = props.field;
-                    return [4 /*yield*/, updatingCells({ selectedRows: props.selectedRows, field: field }, function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0:
-                                        if (!props.onSelectFilter) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, props.onSelectFilter({ selectedRows: selectedRows, value: value })];
-                                    case 1:
-                                        _a.sent();
-                                        _a.label = 2;
-                                    case 2: return [2 /*return*/, true];
-                                }
-                            });
-                        }); })];
-                case 1: return [2 /*return*/, _a.sent()];
-            }
+            return [2 /*return*/, updateValue(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
+                    var _a;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = props.onSelectFilter;
+                                if (!_a) return [3 /*break*/, 2];
+                                return [4 /*yield*/, props.onSelectFilter({ selectedRows: selectedRows, value: value })];
+                            case 1:
+                                _a = (_b.sent());
+                                _b.label = 2;
+                            case 2:
+                                return [2 /*return*/, true];
+                        }
+                    });
+                }); })];
         });
-    }); }, [props, updatingCells]);
+    }); }, [props, updateValue]);
     // Load up options list if it's async function
     react.useEffect(function () {
         var _a;
@@ -2972,7 +2974,7 @@ var GridFormDropDown = function (_props) {
                 switch (_a.label) {
                     case 0:
                         if (!(typeof optionsConf == "function")) return [3 /*break*/, 2];
-                        return [4 /*yield*/, optionsConf(props.selectedRows, filter)];
+                        return [4 /*yield*/, optionsConf(selectedRows, filter)];
                     case 1:
                         optionsConf = _a.sent();
                         _a.label = 2;
@@ -3000,7 +3002,7 @@ var GridFormDropDown = function (_props) {
                 }
             });
         }); })();
-    }, [filter, options, props]);
+    }, [filter, options, props, selectedRows]);
     // Local filtering.
     react.useEffect(function () {
         if (props.filtered == "local") {
@@ -3065,11 +3067,11 @@ var GridFormDropDown = function (_props) {
                             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(props.field, "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                        } })), 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(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);
-                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(props.field, "-").concat(index))) : (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
+                                        selectItemHandler(item.value).then();
+                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(field, "-").concat(index))) : (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
                                         return item.subComponent &&
                                             item.subComponent({
                                                 setValue: function (value) {
@@ -3104,9 +3106,9 @@ var GridFormDropDown = function (_props) {
                                                     }
                                                     return false;
                                                 },
-                                                key: "".concat(props.field, "-").concat(index, "_subcomponent_inner")
+                                                key: "".concat(field, "-").concat(index, "_subcomponent_inner")
                                             }, ref);
-                                    } }), "".concat(props.field, "-").concat(index, "_subcomponent"))) }, "menu-wrapper-".concat(index)));
+                                    } }), "".concat(field, "-").concat(index, "_subcomponent"))) }, "menu-wrapper-".concat(index)));
                         })] }) }))] }));
 };
 
@@ -3127,40 +3129,48 @@ var GridSubComponentContext = react.createContext({
 });
 
 var GridFormMultiSelect = function (props) {
-    var selectedRows = props.selectedRows;
-    var initialiseValues = react.useMemo(function () { return props.initialSelectedValues && props.initialSelectedValues(selectedRows); }, [props, selectedRows]);
+    var selectedRows = react.useContext(GridPopoverContext).selectedRows;
+    var initialiseValues = react.useMemo(function () {
+        var r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);
+        // convert array of strings to object<value,null>
+        return Array.isArray(r) ? lodashEs.fromPairs(r.map(function (v) { return [v, null]; })) : r;
+    }, [props, selectedRows]);
     var subComponentIsValid = react.useRef({});
-    var _a = react.useState(initialiseValues && !Array.isArray(initialiseValues)
-        ? lodashEs.pickBy(initialiseValues, function (value) { return typeof value !== "boolean"; })
-        : {}), subSelectedValues = _a[0], setSubSelectedValues = _a[1];
-    var _b = react.useState(function () {
-        return initialiseValues ? (Array.isArray(initialiseValues) ? initialiseValues : Object.keys(initialiseValues)) : [];
-    }), selectedValues = _b[0], setSelectedValues = _b[1];
-    var _c = react.useState(""), filter = _c[0], setFilter = _c[1];
-    var _d = react.useState([]), filteredValues = _d[0], setFilteredValues = _d[1];
+    var _a = react.useState(function () { return initialiseValues !== null && initialiseValues !== void 0 ? initialiseValues : {}; }), selectedValues = _a[0], setSelectedValues = _a[1];
+    var _b = react.useState(""), filter = _b[0], setFilter = _b[1];
+    var _c = react.useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = react.useRef(false);
-    var _e = react.useState(), options = _e[0], setOptions = _e[1];
+    var _d = react.useState(), options = _d[0], setOptions = _d[1];
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-        var validations, notValid, selectedOptions, selectedResults;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var validations, notValid, menuOptionSubValueResult;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     if (!props.onSave) return [3 /*break*/, 2];
-                    validations = lodashEs.pick(subComponentIsValid.current, selectedValues);
+                    if (!options) {
+                        console.error("options not initialised");
+                        return [2 /*return*/, false];
+                    }
+                    validations = lodashEs.pick(subComponentIsValid.current, Object.keys(selectedValues));
                     notValid = Object.values(validations).some(function (v) { return !v; });
                     if (notValid)
                         return [2 /*return*/, false];
-                    selectedOptions = (_a = selectedValues.map(function (row) { return (options !== null && options !== void 0 ? options : []).find(function (opt) { return opt.value == row; }); })) !== null && _a !== void 0 ? _a : [];
-                    selectedResults = selectedOptions.map(function (selectedOption) {
-                        return (__assign(__assign({}, selectedOption), { subValue: subSelectedValues["".concat(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)] }));
+                    menuOptionSubValueResult = lodashEs.toPairs(selectedValues).map(function (_a) {
+                        var value = _a[0], subValue = _a[1];
+                        var o = __assign({}, options.find(function (o) { return o.value == value; }));
+                        o.subValue = subValue;
+                        return o;
                     });
-                    return [4 /*yield*/, props.onSave(selectedRows, selectedResults)];
-                case 1: return [2 /*return*/, _b.sent()];
+                    if (lodashEs.isEqual(initialiseValues, selectedValues)) {
+                        // No changes to save
+                        return [2 /*return*/, true];
+                    }
+                    return [4 /*yield*/, props.onSave(selectedRows, menuOptionSubValueResult)];
+                case 1: return [2 /*return*/, _a.sent()];
                 case 2: return [2 /*return*/, true];
             }
         });
-    }); }, [options, props, selectedValues, subSelectedValues]);
+    }); }, [initialiseValues, options, props, selectedValues]);
     // Load up options list if it's async function
     react.useEffect(function () {
         var _a;
@@ -3180,7 +3190,7 @@ var GridFormMultiSelect = function (props) {
                         _a.label = 2;
                     case 2:
                         optionsList = optionsConf === null || optionsConf === void 0 ? void 0 : optionsConf.map(function (item) {
-                            if (item == null || typeof item == "string" || typeof item == "number") {
+                            if (item == null || typeof item === "string" || typeof item === "number") {
                                 item = { value: item, label: item };
                             }
                             return item;
@@ -3213,7 +3223,16 @@ var GridFormMultiSelect = function (props) {
         })
             .filter(function (r) { return r !== undefined; }));
     }, [props.filtered, filter, options]);
-    var _f = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _f.popoverWrapper, triggerSave = _f.triggerSave;
+    var toggleValue = react.useCallback(function (item) {
+        var _a;
+        if ("".concat(item.value) in selectedValues) {
+            setSelectedValues(lodashEs.omit(selectedValues, ["".concat(item.value)]));
+        }
+        else {
+            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;
     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;
@@ -3222,29 +3241,19 @@ var GridFormMultiSelect = function (props) {
                         var _a;
                         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;
-                                        if (selectedValues.includes(item.value)) {
-                                            setSelectedValues(selectedValues.filter(function (value) { return value != item.value; }));
-                                        }
-                                        else {
-                                            setSelectedValues(__spreadArray(__spreadArray([], selectedValues, true), [item.value], false));
-                                        }
+                                        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 === " ") {
-                                                if (selectedValues.includes(item.value)) {
-                                                    setSelectedValues(selectedValues.filter(function (value) { return value != item.value; }));
-                                                }
-                                                else {
-                                                    setSelectedValues(__spreadArray(__spreadArray([], selectedValues, true), [item.value], false));
-                                                }
+                                                toggleValue(item);
                                                 e.preventDefault();
                                                 e.stopPropagation();
                                             }
                                             return [2 /*return*/];
                                         });
-                                    }); } }, { children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: selectedValues.includes(item.value), value: "".concat(item.value), label: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
+                                    }); } }, { 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();
@@ -3252,12 +3261,12 @@ var GridFormMultiSelect = function (props) {
                                             }
                                         }, onChange: function () {
                                             /*Do nothing, change handled by menuItem*/
-                                        } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+                                        } }) })), "".concat(item.value) in selectedValues && item.subComponent && (jsxRuntime.jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
                                         return item.subComponent && (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
-                                                value: subSelectedValues["".concat(item.value)],
+                                                value: selectedValues["".concat(item.value)],
                                                 setValue: function (value) {
-                                                    subSelectedValues["".concat(item.value)] = value;
-                                                    setSubSelectedValues(__assign({}, subSelectedValues));
+                                                    var _a;
+                                                    setSelectedValues(__assign(__assign({}, selectedValues), (_a = {}, _a["".concat(item.value)] = value, _a)));
                                                 },
                                                 setValid: function (valid) {
                                                     subComponentIsValid.current["".concat(item.value)] = valid;
@@ -3281,11 +3290,15 @@ var PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
  * NOTE: If the popout menu doesn't appear on single click when also selecting row it's because
  * you need a useMemo around your columnDefs
  */
-var GridFormPopoverMenu = function (_props) {
-    var props = _props;
-    var updatingCells = react.useContext(GridContext).updatingCells;
+var GridFormPopoverMenu = function (props) {
+    var _a = react.useContext(GridPopoverContext), selectedRows = _a.selectedRows, updateValue = _a.updateValue;
     var optionsInitialising = react.useRef(false);
-    var _a = react.useState(), options = _a[0], setOptions = _a[1];
+    var _b = react.useState(), options = _b[0], setOptions = _b[1];
+    // Save triggers during async action processing which triggers another action(), this ref blocks that
+    var actionProcessing = react.useRef(false);
+    var _c = react.useState(null), subComponentSelected = _c[0], setSubComponentSelected = _c[1];
+    var subComponentIsValid = react.useRef(false);
+    var _d = react.useState(), subSelectedValue = _d[0], setSubSelectedValue = _d[1];
     // Load up options list if it's async function
     react.useEffect(function () {
         var _a;
@@ -3294,56 +3307,102 @@ var GridFormPopoverMenu = function (_props) {
         optionsInitialising.current = true;
         var optionsConf = (_a = props.options) !== null && _a !== void 0 ? _a : [];
         (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
-                        if (!(typeof optionsConf == "function")) return [3 /*break*/, 2];
                         _a = setOptions;
-                        return [4 /*yield*/, optionsConf(props.selectedRows)];
+                        if (!(typeof optionsConf == "function")) return [3 /*break*/, 2];
+                        return [4 /*yield*/, optionsConf(selectedRows)];
                     case 1:
-                        _a.apply(void 0, [_b.sent()]);
+                        _b = _c.sent();
                         return [3 /*break*/, 3];
                     case 2:
-                        setOptions(optionsConf);
-                        _b.label = 3;
+                        _b = optionsConf;
+                        _c.label = 3;
                     case 3:
+                        _a.apply(void 0, [_b]);
                         optionsInitialising.current = false;
                         return [2 /*return*/];
                 }
             });
         }); })();
-    }, [options, props.options, props.selectedRows]);
+    }, [options, props.options, selectedRows]);
     var actionClick = react.useCallback(function (menuOption) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, updatingCells({ selectedRows: props.selectedRows, field: props.field }, function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-                        var _a;
-                        return __generator(this, function (_b) {
-                            switch (_b.label) {
-                                case 0:
-                                    _a = menuOption.action;
-                                    if (!_a) return [3 /*break*/, 2];
-                                    return [4 /*yield*/, menuOption.action(selectedRows)];
-                                case 1:
-                                    _a = (_b.sent());
-                                    _b.label = 2;
-                                case 2:
-                                    return [2 /*return*/, true];
-                            }
-                        });
-                    }); })];
-                case 1: return [2 /*return*/, _a.sent()];
-            }
+            actionProcessing.current = true;
+            return [2 /*return*/, updateValue(function () { return __awaiter(void 0, void 0, void 0, function () {
+                    var result, _a;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                result = __assign(__assign({}, menuOption), { subValue: subSelectedValue });
+                                _a = menuOption.action;
+                                if (!_a) return [3 /*break*/, 2];
+                                return [4 /*yield*/, menuOption.action(selectedRows, result)];
+                            case 1:
+                                _a = (_b.sent());
+                                _b.label = 2;
+                            case 2:
+                                actionProcessing.current = false;
+                                return [2 /*return*/, true];
+                        }
+                    });
+                }); })];
         });
-    }); }, [props.field, props.selectedRows, updatingCells]);
-    var selectedRowCount = props.selectedRows.length;
+    }); }, [selectedRows, subSelectedValue, updateValue]);
+    var onMenuItemClick = react.useCallback(function (e, item) {
+        if (item.subComponent) {
+            subComponentIsValid.current = false;
+            setSubSelectedValue(null);
+            setSubComponentSelected(subComponentSelected === item ? null : item);
+            e.keepOpen = true;
+        }
+        else {
+            setSubComponentSelected(null);
+            actionClick(item).then();
+        }
+    }, [actionClick, subComponentSelected]);
+    var selectedRowCount = selectedRows.length;
     var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (menuOption) {
         return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
     });
-    var 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:
+                    if (!(!actionProcessing.current && subComponentSelected)) return [3 /*break*/, 2];
+                    if (!subComponentIsValid.current)
+                        return [2 /*return*/, false];
+                    return [4 /*yield*/, actionClick(subComponentSelected)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: 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.jsx(MenuItem, __assign({ onClick: function () { return actionClick(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))));
+                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.subComponent && (jsxRuntime.jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                        value: subSelectedValue,
+                                        setValue: function (value) {
+                                            setSubSelectedValue(value);
+                                        },
+                                        setValid: function (valid) {
+                                            subComponentIsValid.current = valid;
+                                        },
+                                        triggerSave: localTriggerSave
+                                    } }, { children: jsxRuntime.jsx(item.subComponent, {}) })));
+                            } }), "".concat(item.label, "_subcomponent")))] })));
             }) }) })));
 };
 
@@ -3442,15 +3501,16 @@ var css_248z$2 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#b
 styleInject(css_248z$2);
 
 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 }, 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] })))] })));
+    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) {
+                            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] })))] })));
 };
 
-var GridFormEditBearing = function (_props) {
-    var _a;
-    var props = _props;
-    var _b = react.useState("".concat((_a = props.value) !== null && _a !== void 0 ? _a : "")), value = _b[0], setValue = _b[1];
+var GridFormEditBearing = function (props) {
+    var _a = react.useContext(GridPopoverContext), field = _a.field, initialValue = _a.value;
+    var _b = react.useState("".concat(initialValue !== null && initialValue !== void 0 ? initialValue : "")), value = _b[0], setValue = _b[1];
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-        var parsedValue, field_1;
+        var parsedValue;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -3458,25 +3518,24 @@ var GridFormEditBearing = function (_props) {
                         return [2 /*return*/, false];
                     parsedValue = bearingNumberParser(value);
                     // Value didn't change so don't save just cancel
-                    if (parsedValue === props.value) {
+                    if (parsedValue === initialValue) {
                         return [2 /*return*/, true];
                     }
                     if (!props.onSave) return [3 /*break*/, 2];
                     return [4 /*yield*/, props.onSave(selectedRows, parsedValue)];
                 case 1: return [2 /*return*/, _a.sent()];
                 case 2:
-                    field_1 = props.field;
-                    if (field_1 == null) {
+                    if (field == null) {
                         console.error("field is not defined in ColDef");
                     }
                     else {
-                        selectedRows.forEach(function (row) { return (row[field_1] = parsedValue); });
+                        selectedRows.forEach(function (row) { return (row[field] = parsedValue); });
                     }
                     _a.label = 3;
                 case 3: return [2 /*return*/, true];
             }
         });
-    }); }, [props, value]);
+    }); }, [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) {
                 setValue(e.target.value.trim());
@@ -3529,8 +3588,8 @@ var GridPopoverEditDropDown = function (colDef, props) {
             className: "GridPopoverEditDropDown-containerMedium" }, props.editorParams) }));
 };
 
-var GridFormMessage = function (_props) {
-    var props = _props;
+var GridFormMessage = function (props) {
+    var selectedRows = react.useContext(GridPopoverContext).selectedRows;
     var _a = react.useState(null), message = _a[0], setMessage = _a[1];
     var popoverWrapper = useGridPopoverHook({ className: props.className }).popoverWrapper;
     react.useEffect(function () {
@@ -3540,14 +3599,14 @@ var GridFormMessage = function (_props) {
                 switch (_b.label) {
                     case 0:
                         _a = setMessage;
-                        return [4 /*yield*/, props.message(props)];
+                        return [4 /*yield*/, props.message(selectedRows)];
                     case 1:
                         _a.apply(void 0, [_b.sent()]);
                         return [2 /*return*/];
                 }
             });
         }); })().then();
-    }, [props]);
+    }, [props, selectedRows]);
     return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: message === null, className: clsx("GridFormMessage-container", props.className) }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: message }) })));
 };
 
@@ -3627,13 +3686,18 @@ var useGenerateOrDefaultId = function (idFromProps) {
 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))] }))] })), 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] })))] })));
+    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 GridFormTextArea = function (_props) {
-    var _a, _b;
-    var props = _props;
-    var _c = react.useState((_a = props.value) !== null && _a !== void 0 ? _a : ""), value = _c[0], setValue = _c[1];
+var GridFormTextArea = function (props) {
+    var _a;
+    var _b = react.useContext(GridPopoverContext), field = _b.field, initialVale = _b.value;
+    var _c = react.useState(initialVale !== null && initialVale !== void 0 ? initialVale : ""), value = _c[0], setValue = _c[1];
     var invalid = react.useCallback(function () {
         if (props.required && value.length == 0) {
             return "Some text is required";
@@ -3647,19 +3711,17 @@ var GridFormTextArea = function (_props) {
         return null;
     }, [props, value]);
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-        var field;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (invalid())
                         return [2 /*return*/, false];
-                    if (props.value === (value !== null && value !== void 0 ? value : ""))
+                    if (initialVale === (value !== null && value !== void 0 ? value : ""))
                         return [2 /*return*/, true];
                     if (!props.onSave) return [3 /*break*/, 2];
                     return [4 /*yield*/, props.onSave(selectedRows, value)];
                 case 1: return [2 /*return*/, _a.sent()];
                 case 2:
-                    field = props.field;
                     if (field == null) {
                         console.error("ColDef has no field set");
                         return [2 /*return*/, false];
@@ -3668,18 +3730,18 @@ var GridFormTextArea = function (_props) {
                     return [2 /*return*/, true];
             }
         });
-    }); }, [props, invalid, value]);
+    }); }, [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: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsxRuntime.jsx(TextAreaInput, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), inputProps: { placeholder: props.placeholder } }) })));
+    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 GridPopoverTextArea = function (colDef, params) { return GridCell(colDef, __assign({ editor: GridFormTextArea }, params)); };
 
-var GridFormTextInput = function (_props) {
+var GridFormTextInput = function (props) {
     var _a;
-    var props = _props;
-    var initValue = props.value == null ? "" : "".concat(props.value);
-    var _b = react.useState(initValue), value = _b[0], setValue = _b[1];
+    var _b = react.useContext(GridPopoverContext), field = _b.field, data = _b.data, initialVale = _b.value;
+    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) {
@@ -3689,12 +3751,12 @@ var GridFormTextInput = function (_props) {
             return "Text must be no longer than ".concat(props.maxLength, " characters");
         }
         if (props.validate) {
-            return props.validate(trimmedValue, props.data);
+            return props.validate(trimmedValue, data);
         }
         return null;
-    }, [props, value]);
+    }, [data, props, value]);
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
-        var trimmedValue, field;
+        var trimmedValue;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -3707,23 +3769,18 @@ var GridFormTextInput = function (_props) {
                     return [4 /*yield*/, props.onSave(selectedRows, trimmedValue)];
                 case 1: return [2 /*return*/, _a.sent()];
                 case 2:
-                    field = props.field;
                     if (field == null) {
                         console.error("ColDef has no field set");
                         return [2 /*return*/, false];
                     }
+                    // @ts-ignore row[field] row is of type any
                     selectedRows.forEach(function (row) { return (row[field] = trimmedValue); });
                     return [2 /*return*/, true];
             }
         });
-    }); }, [invalid, value, initValue, props]);
-    var _c = useGridPopoverHook({ className: props.className, save: save }), popoverWrapper = _c.popoverWrapper, triggerSave = _c.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, onMouseEnter: function (e) {
-                if (document.activeElement != e.currentTarget) {
-                    e.currentTarget.focus();
-                    e.currentTarget.selectionStart = e.currentTarget.value.length;
-                }
-            }, inputProps: {
+    }); }, [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) {
@@ -3800,12 +3857,7 @@ var GridSubComponentTextArea = function (props) {
     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, onMouseEnter: function (e) {
-                if (document.activeElement != e.currentTarget) {
-                    e.currentTarget.focus();
-                    e.currentTarget.selectionStart = e.currentTarget.value.length;
-                }
-            }, onChange: function (e) { return setValue(e.target.value); }, error: validate(value), inputProps: {
+    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) {
@@ -3930,7 +3982,7 @@ exports.ActionButton = ActionButton;
 exports.ComponentLoadingWrapper = ComponentLoadingWrapper;
 exports.ControlledMenu = ControlledMenu;
 exports.FocusableItem = FocusableItem;
-exports.GenericCellEditorComponent = GenericCellEditorComponent;
+exports.GenericCellEditorComponentWrapper = GenericCellEditorComponentWrapper;
 exports.GenericMultiEditCellClass = GenericMultiEditCellClass;
 exports.Grid = Grid;
 exports.GridCell = GridCell;