@linzjs/step-ag-grid 2.5.0 → 3.0.1

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

@@ -1,6 +1,6 @@
 import { useMemo, useLayoutEffect, useEffect, createContext, memo, forwardRef, useRef, useContext, useState, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
-import { findIndex, isEmpty, castArray, remove, flatten, delay, sortBy, last, difference, xorBy, pickBy, pick } from 'lodash-es';
+import { findIndex, debounce, isEmpty, castArray, remove, flatten, delay, sortBy, last, difference, xorBy, fromPairs, omit, pick, toPairs, isEqual } from 'lodash-es';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { AgGridReact } from 'ag-grid-react';
 import { LuiMiniSpinner, LuiIcon, LuiCheckboxInput, LuiButton } from '@linzjs/lui';
@@ -901,7 +901,7 @@ var positionMenu = function (props) {
 
 var MenuListContext = 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 = createContext({});
 
 var MenuList = function (_a) {
@@ -919,6 +919,7 @@ var MenuList = function (_a) {
     var focusRef = useRef(null);
     var arrowRef = useRef(null);
     var prevOpen = useRef(false);
+    var latestWindowSize = useRef({ width: 0, height: 0 });
     var latestMenuSize = useRef({ width: 0, height: 0 });
     var latestHandlePosition = useRef(function () { });
     var _t = useItems(menuRef, focusRef), hoverItem = _t.hoverItem, dispatch = _t.dispatch, updateItems = _t.updateItems;
@@ -1144,6 +1145,32 @@ var MenuList = function (_a) {
         resizeObserver.observe(observeTarget, { box: "border-box" });
         return function () { return resizeObserver.unobserve(observeTarget); };
     }, [reposition]);
+    // Matt added window resize observer
+    useEffect(function () {
+        if (typeof ResizeObserver !== "function" || reposition === "initial")
+            return;
+        var callback = 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 };
+            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]);
     useEffect(function () {
         if (!isOpen) {
             dispatch(HoverActionTypes.RESET, undefined, 0);
@@ -2625,52 +2652,52 @@ var GridPopoverContext = createContext({
     anchorRef: { current: null },
     saving: false,
     setSaving: function () { },
-    setProps: function () { },
-    propsRef: { current: null }
-});
+    field: "",
+    value: null,
+    data: {},
+    selectedRows: [],
+    updateValue: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, false];
+    }); }); }
+});
+var useGridPopoverContext = function () {
+    return useContext(GridPopoverContext);
+};
 
-var GridPopoverContextProvider = function (props) {
-    var _a = useContext(GridContext), getSelectedRows = _a.getSelectedRows, updatingCells = _a.updatingCells;
-    var anchorRef = useRef();
-    var propsRef = useRef({});
-    var _b = useState(false), saving = _b[0], setSaving = _b[1];
-    var setProps = useCallback(function (props, multiEdit) {
-        var _a, _b;
-        // Then item that is clicked on will always be first in the list
-        var selectedRows = multiEdit
-            ? 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 = useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells;
+    var anchorRef = useRef(props.eGridCell);
+    var _f = useState(false), saving = _f[0], setSaving = _f[1];
+    var colDef = props.colDef;
+    var cellEditorParams = colDef.cellEditorParams;
+    var multiEdit = (_b = cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.multiEdit) !== null && _b !== void 0 ? _b : false;
+    // Then item that is clicked on will always be first in the list
+    var selectedRows = useMemo(function () { return (multiEdit ? sortBy(getSelectedRows(), function (row) { return row.id !== props.data.id; }) : [props.data]); }, [getSelectedRows, multiEdit, props.data]);
+    var field = (_d = (_c = props.colDef) === null || _c === void 0 ? void 0 : _c.field) !== null && _d !== void 0 ? _d : "";
+    var updateValue = useCallback(function (saveFn) { return __awaiter(void 0, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                _a = !saving;
+                if (!_a) return [3 /*break*/, 2];
+                return [4 /*yield*/, updatingCells({ selectedRows: selectedRows, field: field }, saveFn, setSaving)];
+            case 1:
+                _a = (_b.sent());
+                _b.label = 2;
+            case 2: return [2 /*return*/, _a];
+        }
+    }); }); }, [field, saving, selectedRows, updatingCells]);
     return (jsx(GridPopoverContext.Provider, __assign({ value: {
             anchorRef: anchorRef,
             saving: saving,
             setSaving: setSaving,
-            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) {
@@ -2692,7 +2719,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 })
     })), { 
@@ -2707,21 +2734,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 forwardRef(function GenericCellEditorComponent2(props, _) {
-        return (jsx(GridPopoverContextProvider, { children: jsx(GenericCellEditorComponent3, __assign({}, __assign(__assign({}, props), { editor: editor }))) }));
+var GenericCellEditorComponentWrapper = function (custom) {
+    return forwardRef(function GenericCellEditorComponentFr(cellEditorParams, _) {
+        return (jsxs(GridPopoverContextProvider, __assign({ props: cellEditorParams }, { children: [jsx(cellEditorParams.colDef.cellRenderer, __assign({}, cellEditorParams, cellEditorParams.colDef.cellRendererParams)), (custom === null || custom === void 0 ? void 0 : custom.editor) && jsx(custom.editor, __assign({}, cellEditorParams))] })));
     });
-};
-var GenericCellEditorComponent3 = function (props) {
-    var _a;
-    var _b = 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 (jsxs(Fragment$1, { children: [jsx(colDef.cellRenderer, __assign({}, props)), (props === null || props === void 0 ? void 0 : props.editor) && jsx(props.editor, __assign({}, cellEditorParams, propsRef.current))] }));
 };
 
 /**
@@ -2742,7 +2758,7 @@ var ComponentLoadingWrapper = function (props) {
 
 var useGridPopoverHook = function (props) {
     var stopEditing = useContext(GridContext).stopEditing;
-    var _a = useContext(GridPopoverContext), anchorRef = _a.anchorRef, saving = _a.saving, propsRef = _a.propsRef;
+    var _a = useGridPopoverContext(), anchorRef = _a.anchorRef, saving = _a.saving, updateValue = _a.updateValue;
     var saveButtonRef = useRef(null);
     var _b = useState(false), isOpen = _b[0], setOpen = _b[1];
     useEffect(function () {
@@ -2750,22 +2766,20 @@ var useGridPopoverHook = function (props) {
     }, []);
     var triggerSave = 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);
@@ -2774,7 +2788,7 @@ var useGridPopoverHook = function (props) {
                     return [2 /*return*/];
             }
         });
-    }); }, [props, stopEditing, propsRef]);
+    }); }, [props.save, stopEditing, updateValue]);
     var popoverWrapper = useCallback(function (children) {
         return (jsx(Fragment$1, { children: anchorRef.current && (jsxs(ControlledMenu, __assign({ state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: function (event) {
                     triggerSave(event.reason).then();
@@ -2897,66 +2911,60 @@ var MenuHeaderString = "_____MENU_HEADER_____";
 var MenuHeaderItem = function (title) {
     return { label: title, value: MenuHeaderString };
 };
-var GridFormDropDown = function (_props) {
-    var props = _props;
-    var _a = useContext(GridContext), updatingCells = _a.updatingCells, stopEditing = _a.stopEditing;
+var fieldToString = function (field) {
+    return typeof field == "symbol" ? field.toString() : "".concat(field);
+};
+var GridFormDropDown = function (props) {
+    var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, field = _a.field, updateValue = _a.updateValue;
+    var stopEditing = useContext(GridContext).stopEditing;
     var _b = useState(""), filter = _b[0], setFilter = _b[1];
     var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = useRef(false);
     var _d = useState(null), options = _d[0], setOptions = _d[1];
     var _e = useState([]), subComponentValues = _e[0], setSubComponentValues = _e[1];
     var selectItemHandler = 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 = 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
     useEffect(function () {
         var _a;
@@ -2970,7 +2978,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;
@@ -2998,7 +3006,7 @@ var GridFormDropDown = function (_props) {
                 }
             });
         }); })();
-    }, [filter, options, props]);
+    }, [filter, options, props, selectedRows]);
     // Local filtering.
     useEffect(function () {
         if (props.filtered == "local") {
@@ -3063,48 +3071,43 @@ var GridFormDropDown = function (_props) {
                             var _b;
                             var ref = _a.ref;
                             return (jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); }, onKeyDown: function (e) { return onFilterKeyDown(e); } }) })));
-                        } })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (jsx(MenuItem, { children: "[Empty]" }, "".concat(props.field, "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+                        } })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && (jsx(MenuItem, { children: "[Empty]" }, "".concat(fieldToString(field), "-empty"))), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                             var _a;
                             return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : item.value === MenuHeaderString ? (jsx(MenuHeader, { children: item.label }, "$$header_".concat(index))) : filteredValues.includes(item.value) ? null : (jsx("div", { children: !item.subComponent ? (jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () {
-                                        selectItemHandler(item.value);
-                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(props.field, "-").concat(index))) : (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
-                                        return item.subComponent &&
-                                            item.subComponent({
-                                                setValue: function (value) {
-                                                    var localSubComponentValues = __spreadArray([], subComponentValues, true);
-                                                    var subComponentValueIndex = localSubComponentValues.findIndex(function (_a) {
-                                                        var optionValue = _a.optionValue;
-                                                        return optionValue === item.value;
+                                        selectItemHandler(item.value).then();
+                                    } }, { children: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)) }), "".concat(fieldToString(field), "-").concat(index))) : (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (ref) {
+                                        return item.subComponent && (jsx(item.subComponent, { setValue: function (value) {
+                                                var localSubComponentValues = __spreadArray([], subComponentValues, true);
+                                                var subComponentValueIndex = localSubComponentValues.findIndex(function (_a) {
+                                                    var optionValue = _a.optionValue;
+                                                    return optionValue === item.value;
+                                                });
+                                                if (subComponentValueIndex !== -1) {
+                                                    localSubComponentValues[subComponentValueIndex].subComponentValue = value;
+                                                }
+                                                else {
+                                                    localSubComponentValues.push({
+                                                        subComponentValue: value,
+                                                        optionValue: item.value
                                                     });
-                                                    if (subComponentValueIndex !== -1) {
-                                                        localSubComponentValues[subComponentValueIndex].subComponentValue = value;
-                                                    }
-                                                    else {
-                                                        localSubComponentValues.push({
-                                                            subComponentValue: value,
-                                                            optionValue: item.value
-                                                        });
-                                                    }
-                                                    setSubComponentValues(localSubComponentValues);
-                                                },
-                                                keyDown: function (key, event) {
-                                                    var subComponentItem = subComponentValues.find(function (_a) {
-                                                        var optionValue = _a.optionValue;
-                                                        return optionValue === item.value;
+                                                }
+                                                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 () {
+                                                        ref.closeMenu();
+                                                        return true;
                                                     });
-                                                    if ((key === "Enter" || key === "Tab") && subComponentItem) {
-                                                        event.preventDefault();
-                                                        event.stopPropagation();
-                                                        return selectItemHandler(item.value, subComponentItem.subComponentValue).then(function () {
-                                                            ref.closeMenu();
-                                                            return true;
-                                                        });
-                                                    }
-                                                    return false;
-                                                },
-                                                key: "".concat(props.field, "-").concat(index, "_subcomponent_inner")
-                                            }, ref);
-                                    } }), "".concat(props.field, "-").concat(index, "_subcomponent"))) }, "menu-wrapper-".concat(index)));
+                                                }
+                                                return false;
+                                            } }, "".concat(fieldToString(field), "-").concat(index, "_subcomponent_inner")));
+                                    } }), "".concat(fieldToString(field), "-").concat(index, "_subcomponent"))) }, "menu-wrapper-".concat(index)));
                         })] }) }))] }));
 };
 
@@ -3125,40 +3128,48 @@ var GridSubComponentContext = createContext({
 });
 
 var GridFormMultiSelect = function (props) {
-    var selectedRows = props.selectedRows;
-    var initialiseValues = useMemo(function () { return props.initialSelectedValues && props.initialSelectedValues(selectedRows); }, [props, selectedRows]);
+    var selectedRows = useGridPopoverContext().selectedRows;
+    var initialiseValues = useMemo(function () {
+        var r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);
+        // convert array of strings to object<value,null>
+        return Array.isArray(r) ? fromPairs(r.map(function (v) { return [v, null]; })) : r;
+    }, [props, selectedRows]);
     var subComponentIsValid = useRef({});
-    var _a = useState(initialiseValues && !Array.isArray(initialiseValues)
-        ? pickBy(initialiseValues, function (value) { return typeof value !== "boolean"; })
-        : {}), subSelectedValues = _a[0], setSubSelectedValues = _a[1];
-    var _b = useState(function () {
-        return initialiseValues ? (Array.isArray(initialiseValues) ? initialiseValues : Object.keys(initialiseValues)) : [];
-    }), selectedValues = _b[0], setSelectedValues = _b[1];
-    var _c = useState(""), filter = _c[0], setFilter = _c[1];
-    var _d = useState([]), filteredValues = _d[0], setFilteredValues = _d[1];
+    var _a = useState(function () { return initialiseValues !== null && initialiseValues !== void 0 ? initialiseValues : {}; }), selectedValues = _a[0], setSelectedValues = _a[1];
+    var _b = useState(""), filter = _b[0], setFilter = _b[1];
+    var _c = useState([]), filteredValues = _c[0], setFilteredValues = _c[1];
     var optionsInitialising = useRef(false);
-    var _e = useState(), options = _e[0], setOptions = _e[1];
+    var _d = useState(), options = _d[0], setOptions = _d[1];
     var save = 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 = pick(subComponentIsValid.current, selectedValues);
+                    if (!options) {
+                        console.error("options not initialised");
+                        return [2 /*return*/, false];
+                    }
+                    validations = 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 = 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 (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
     useEffect(function () {
         var _a;
@@ -3178,7 +3189,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;
@@ -3211,7 +3222,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 = useCallback(function (item) {
+        var _a;
+        if ("".concat(item.value) in selectedValues) {
+            setSelectedValues(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(jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormMultiSelect-container" }, { children: jsxs(Fragment$1, { children: [options && props.filtered && (jsxs(Fragment$1, { children: [jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
                                 var _b;
                                 var ref = _a.ref;
@@ -3220,29 +3240,19 @@ var GridFormMultiSelect = function (props) {
                         var _a;
                         return item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxs("div", { children: [jsx(MenuItem, __assign({ onClick: function (e) {
                                         e.keepOpen = true;
-                                        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: jsx(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: jsx(LuiCheckboxInput, { isChecked: "".concat(item.value) in selectedValues, value: "".concat(item.value), label: (_a = item.label) !== null && _a !== void 0 ? _a : (item.value == null ? "<".concat(item.value, ">") : "".concat(item.value)), inputProps: {
                                             onClick: function (e) {
                                                 e.preventDefault();
                                                 e.stopPropagation();
@@ -3250,12 +3260,12 @@ var GridFormMultiSelect = function (props) {
                                             }
                                         }, onChange: function () {
                                             /*Do nothing, change handled by menuItem*/
-                                        } }) }), "".concat(index)), selectedValues.includes(item.value) && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+                                        } }) })), "".concat(item.value) in selectedValues && item.subComponent && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
                                         return item.subComponent && (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;
@@ -3279,11 +3289,31 @@ 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 = useContext(GridContext).updatingCells;
+var GridFormPopoverMenu = function (props) {
+    var _a = useGridPopoverContext(), selectedRows = _a.selectedRows, updateValue = _a.updateValue;
     var optionsInitialising = useRef(false);
-    var _a = useState(), options = _a[0], setOptions = _a[1];
+    var _b = useState(), options = _b[0], setOptions = _b[1];
+    // Save triggers during async action processing which triggers another action(), this ref blocks that
+    var actionProcessing = useRef(false);
+    var _c = useState(null), subComponentSelected = _c[0], setSubComponentSelected = _c[1];
+    var subComponentIsValid = useRef(false);
+    var _d = useState(), subSelectedValue = _d[0], setSubSelectedValue = _d[1];
+    var defaultAction = useCallback(function (selectedRows, menuOption) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!props.defaultAction) return [3 /*break*/, 2];
+                    return [4 /*yield*/, props.defaultAction(selectedRows, menuOption)];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    console.error("No action specified for ".concat(menuOption.label, " menu options"));
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [props]);
     // Load up options list if it's async function
     useEffect(function () {
         var _a;
@@ -3292,56 +3322,107 @@ 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;
+            var newOptions, _a, anyOptionsAreMissingAction;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
                         if (!(typeof optionsConf == "function")) return [3 /*break*/, 2];
-                        _a = setOptions;
-                        return [4 /*yield*/, optionsConf(props.selectedRows)];
+                        return [4 /*yield*/, optionsConf(selectedRows)];
                     case 1:
-                        _a.apply(void 0, [_b.sent()]);
+                        _a = _b.sent();
                         return [3 /*break*/, 3];
                     case 2:
-                        setOptions(optionsConf);
+                        _a = optionsConf;
                         _b.label = 3;
                     case 3:
+                        newOptions = _a;
+                        setOptions(newOptions);
+                        if (!props.defaultAction) {
+                            anyOptionsAreMissingAction = newOptions.some(function (option) { return !option.action; });
+                            if (anyOptionsAreMissingAction) {
+                                console.error("There's no default action handler and some Menu options are missing an action handler", {
+                                    invalidMenuOptions: newOptions.filter(function (option) { return !option.action; })
+                                });
+                            }
+                        }
                         optionsInitialising.current = false;
                         return [2 /*return*/];
                 }
             });
         }); })();
-    }, [options, props.options, props.selectedRows]);
+    }, [options, props.defaultAction, props.options, selectedRows]);
     var actionClick = 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;
+                    var _a;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                result = __assign(__assign({}, menuOption), { subValue: subSelectedValue });
+                                return [4 /*yield*/, ((_a = menuOption.action) !== null && _a !== void 0 ? _a : defaultAction)(selectedRows, result)];
+                            case 1:
+                                _b.sent();
+                                actionProcessing.current = false;
+                                return [2 /*return*/, true];
+                        }
+                    });
+                }); })];
         });
-    }); }, [props.field, props.selectedRows, updatingCells]);
-    var selectedRowCount = props.selectedRows.length;
+    }); }, [defaultAction, selectedRows, subSelectedValue, updateValue]);
+    var onMenuItemClick = useCallback(function (e, item) {
+        if (item.subComponent) {
+            subComponentIsValid.current = false;
+            setSubSelectedValue(null);
+            setSubComponentSelected(subComponentSelected === item ? null : item);
+            e.keepOpen = true;
+        }
+        else {
+            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 = 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(jsx(ComponentLoadingWrapper, __assign({ loading: !filteredOptions, className: "GridFormPopupMenu" }, { children: jsx(Fragment$1, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
-                return item.label === PopoutMenuSeparator ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (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 ? (jsx(MenuDivider, {}, "$$divider_".concat(index))) : (!item.hidden && (jsxs(Fragment$1, { children: [jsx(MenuItem, __assign({ onClick: function (e) { return onMenuItemClick(e, item); }, disabled: !!item.disabled || !(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.includes(item)), title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "" }, { children: item.label }), "".concat(item.label)), item.subComponent && subComponentSelected === item && (jsx(FocusableItem, __assign({ className: "LuiDeprecatedForms" }, { children: function (_) {
+                                return item.subComponent && (jsx(GridSubComponentContext.Provider, __assign({ value: {
+                                        value: subSelectedValue,
+                                        setValue: function (value) {
+                                            setSubSelectedValue(value);
+                                        },
+                                        setValid: function (valid) {
+                                            subComponentIsValid.current = valid;
+                                        },
+                                        triggerSave: localTriggerSave
+                                    } }, { children: jsx(item.subComponent, {}) })));
+                            } }), "".concat(item.label, "_subcomponent")))] })));
             }) }) })));
 };
 
@@ -3440,15 +3521,16 @@ var css_248z$2 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#b
 styleInject(css_248z$2);
 
 var TextInputFormatted = function (props) {
-    return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", spellCheck: true, defaultValue: props.value, onChange: props.onChange, onFocus: props.onFocus, onClick: props.onClick }, props.inputProps)), jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsx(LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
+    return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", spellCheck: true, defaultValue: props.value, onChange: props.onChange, onFocus: props.onFocus, onClick: props.onClick, onMouseEnter: function (e) {
+                            e.currentTarget.focus();
+                        } }, props.inputProps)), jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsx(LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
 };
 
-var GridFormEditBearing = function (_props) {
-    var _a;
-    var props = _props;
-    var _b = useState("".concat((_a = props.value) !== null && _a !== void 0 ? _a : "")), value = _b[0], setValue = _b[1];
+var GridFormEditBearing = function (props) {
+    var _a = useGridPopoverContext(), field = _a.field, initialValue = _a.value;
+    var _b = useState("".concat(initialValue !== null && initialValue !== void 0 ? initialValue : "")), value = _b[0], setValue = _b[1];
     var save = 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:
@@ -3456,25 +3538,26 @@ 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) {
+                            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(jsx("div", __assign({ className: "GridFormEditBearing-input Grid-popoverContainer" }, { children: jsx(TextInputFormatted, { value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
                 setValue(e.target.value.trim());
@@ -3527,8 +3610,8 @@ var GridPopoverEditDropDown = function (colDef, props) {
             className: "GridPopoverEditDropDown-containerMedium" }, props.editorParams) }));
 };
 
-var GridFormMessage = function (_props) {
-    var props = _props;
+var GridFormMessage = function (props) {
+    var selectedRows = useGridPopoverContext().selectedRows;
     var _a = useState(null), message = _a[0], setMessage = _a[1];
     var popoverWrapper = useGridPopoverHook({ className: props.className }).popoverWrapper;
     useEffect(function () {
@@ -3538,14 +3621,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(jsx(ComponentLoadingWrapper, __assign({ loading: message === null, className: clsx("GridFormMessage-container", props.className) }, { children: jsx(Fragment$1, { children: message }) })));
 };
 
@@ -3625,13 +3708,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 (jsxs("div", __assign({ className: clsx("LuiTextAreaInput Grid-popoverContainer", ((_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.disabled) ? "isDisabled" : "", (props === null || props === void 0 ? void 0 : props.error) ? "hasError" : "") }, { children: [jsxs("label", __assign({ htmlFor: id }, { children: [props.mandatory && jsx("span", __assign({ className: "LuiTextAreaInput-mandatory" }, { children: "*" })), props.label && jsx("span", __assign({ className: "LuiTextAreaInput-label" }, { children: props.label })), jsxs("div", __assign({ className: "LuiTextAreaInput-wrapper" }, { children: [" ", jsx("textarea", __assign({ id: id, value: props.value, onChange: props.onChange, rows: 5 }, props.inputProps))] }))] })), props.error && (jsxs("span", __assign({ className: "LuiTextAreaInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextAreaInput-error-icon", size: "sm", status: "error" }), props.error] })))] })));
+    return (jsxs("div", __assign({ className: clsx("LuiTextAreaInput Grid-popoverContainer", ((_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.disabled) ? "isDisabled" : "", (props === null || props === void 0 ? void 0 : props.error) ? "hasError" : "") }, { children: [jsxs("label", __assign({ htmlFor: id }, { children: [props.mandatory && jsx("span", __assign({ className: "LuiTextAreaInput-mandatory" }, { children: "*" })), props.label && jsx("span", __assign({ className: "LuiTextAreaInput-label" }, { children: props.label })), jsxs("div", __assign({ className: "LuiTextAreaInput-wrapper" }, { children: [" ", jsx("textarea", __assign({ id: id, value: props.value, onChange: props.onChange, rows: 5 }, props.inputProps, { onMouseEnter: function (e) {
+                                    if (document.activeElement != e.currentTarget) {
+                                        e.currentTarget.focus();
+                                        e.currentTarget.selectionStart = e.currentTarget.value.length;
+                                    }
+                                } }))] }))] })), props.error && (jsxs("span", __assign({ className: "LuiTextAreaInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextAreaInput-error-icon", size: "sm", status: "error" }), props.error] })))] })));
 };
 
-var GridFormTextArea = function (_props) {
-    var _a, _b;
-    var props = _props;
-    var _c = useState((_a = props.value) !== null && _a !== void 0 ? _a : ""), value = _c[0], setValue = _c[1];
+var GridFormTextArea = function (props) {
+    var _a;
+    var _b = useGridPopoverContext(), field = _b.field, initialVale = _b.value;
+    var _c = useState(initialVale != null ? "".concat(initialVale) : ""), value = _c[0], setValue = _c[1];
     var invalid = useCallback(function () {
         if (props.required && value.length == 0) {
             return "Some text is required";
@@ -3645,39 +3733,39 @@ var GridFormTextArea = function (_props) {
         return null;
     }, [props, value]);
     var save = 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];
                     }
-                    selectedRows.forEach(function (row) { return (row[field] = value); });
+                    selectedRows.forEach(function (row) {
+                        row[field] = value;
+                    });
                     return [2 /*return*/, true];
             }
         });
-    }); }, [props, invalid, value]);
+    }); }, [invalid, initialVale, value, props, field]);
     var popoverWrapper = useGridPopoverHook({ className: props.className, save: save }).popoverWrapper;
-    return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 } }, { children: jsx(TextAreaInput, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), inputProps: { placeholder: props.placeholder } }) })));
+    return popoverWrapper(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 } }, { children: jsx(TextAreaInput, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), inputProps: { placeholder: props.placeholder } }) })));
 };
 
 var 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 = useState(initValue), value = _b[0], setValue = _b[1];
+    var _b = useGridPopoverContext(), field = _b.field, data = _b.data, initialVale = _b.value;
+    var initValue = initialVale == null ? "" : "".concat(initialVale);
+    var _c = useState(initValue), value = _c[0], setValue = _c[1];
     var invalid = useCallback(function () {
         var trimmedValue = value.trim();
         if (props.required && trimmedValue.length == 0) {
@@ -3687,12 +3775,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 = 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:
@@ -3705,23 +3793,19 @@ 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];
                     }
-                    selectedRows.forEach(function (row) { return (row[field] = trimmedValue); });
+                    selectedRows.forEach(function (row) {
+                        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(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 }, className: "FormTest" }, { children: jsx(TextInputFormatted, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, 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(jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = props.width) !== null && _a !== void 0 ? _a : 240 }, className: "FormTest" }, { children: jsx(TextInputFormatted, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), formatted: props.units, inputProps: {
                 style: { width: "100%" },
                 placeholder: props.placeholder,
                 onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
@@ -3798,12 +3882,7 @@ var GridSubComponentTextArea = function (props) {
     useEffect(function () {
         setValid(value != null && validate(value) == null);
     }, [setValid, validate, value]);
-    return (jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsx(TextInputFormatted, { className: "free-text-input", value: value, 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 (jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsx(TextInputFormatted, { className: "free-text-input", value: value, onChange: function (e) { return setValue(e.target.value); }, error: validate(value), inputProps: {
                 autoFocus: true,
                 placeholder: props.placeholder,
                 onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
@@ -3924,5 +4003,5 @@ var ActionButton = function (_a) {
                 } })) : (jsx(LuiIcon, { name: icon, alt: (_c = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name) !== null && _c !== void 0 ? _c : "", size: size })), jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_d = (localInProgress ? inProgressName : name)) !== null && _d !== void 0 ? _d : name })), jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
 };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponent, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentTextArea, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponentWrapper, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentTextArea, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map