@linzjs/step-ag-grid 1.5.3 → 2.0.0

package/dist/index.js

@@ -1640,7 +1640,7 @@ var MenuRadioGroupFr = function (_a, externalRef) {
 };
 var MenuRadioGroup = react.forwardRef(MenuRadioGroupFr);
 
-var UpdatingContext = react.createContext({
+var GridUpdatingContext = react.createContext({
     checkUpdating: function () {
         console.error("Missing UpdatingContext");
         return false;
@@ -1653,7 +1653,7 @@ var UpdatingContext = react.createContext({
     }); }
 });
 
-var UpdatingContextProvider = function (props) {
+var GridUpdatingContextProvider = function (props) {
     var updatingBlocks = react.useRef({});
     var updating = react.useRef({});
     var resetUpdating = function () {
@@ -1685,7 +1685,7 @@ var UpdatingContextProvider = function (props) {
     var checkUpdating = function (fields, id) {
         return lodashEs.castArray(fields).some(function (f) { var _a; return (_a = updating.current[f]) === null || _a === void 0 ? void 0 : _a.includes(id); });
     };
-    return (jsxRuntime.jsx(UpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating } }, { children: props.children })));
+    return (jsxRuntime.jsx(GridUpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating } }, { children: props.children })));
 };
 
 var GridContext = react.createContext({
@@ -1740,6 +1740,9 @@ var GridContext = react.createContext({
     ensureSelectedRowIsVisible: function () {
         console.error("no context provider for ensureSelectedRowIsVisible");
     },
+    sizeColumnsToFit: function () {
+        console.error("no context provider for sizeColumnsToFit");
+    },
     editingCells: function () {
         console.error("no context provider for editingCells");
         return false;
@@ -1761,7 +1764,7 @@ var GridContext = react.createContext({
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
 var GridContextProvider = function (props) {
-    var modifyUpdating = react.useContext(UpdatingContext).modifyUpdating;
+    var modifyUpdating = react.useContext(GridUpdatingContext).modifyUpdating;
     var gridApiRef = react.useRef();
     var idsBeforeUpdate = react.useRef([]);
     /**
@@ -1787,10 +1790,7 @@ var GridContextProvider = function (props) {
             noApiFn = (function () { });
         }
         var gridApi = gridApiRef.current;
-        if (gridApi)
-            return hasApiFn(gridApi);
-        console.error("GridApi not ready");
-        return noApiFn();
+        return gridApi ? hasApiFn(gridApi) : noApiFn();
     };
     /**
      * Set the quick filter value to grid.
@@ -1950,6 +1950,14 @@ var GridContextProvider = function (props) {
             gridApi.ensureNodeVisible(lodashEs.last(selectedNodes));
         });
     };
+    /**
+     * Resize columns to fit container
+     */
+    var sizeColumnsToFit = function () {
+        gridApiOp(function (gridApi) {
+            gridApi.sizeColumnsToFit();
+        });
+    };
     var stopEditing = function () { return gridApiOp(function (gridApi) { return gridApi.stopEditing(); }); };
     var updatingCells = function (props, fnUpdate, setSaving) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -2016,6 +2024,7 @@ var GridContextProvider = function (props) {
             editingCells: editingCells,
             ensureRowVisible: ensureRowVisible,
             ensureSelectedRowIsVisible: ensureSelectedRowIsVisible,
+            sizeColumnsToFit: sizeColumnsToFit,
             stopEditing: stopEditing,
             updatingCells: updatingCells
         } }, { children: props.children })));
@@ -2201,8 +2210,8 @@ var GridHeaderSelect = function (_a) {
  */
 var Grid = function (params) {
     var _a;
-    var _b = react.useContext(GridContext), gridReady = _b.gridReady, setGridApi = _b.setGridApi, setQuickFilter = _b.setQuickFilter, ensureRowVisible = _b.ensureRowVisible, selectRowsById = _b.selectRowsById, ensureSelectedRowIsVisible = _b.ensureSelectedRowIsVisible;
-    var checkUpdating = react.useContext(UpdatingContext).checkUpdating;
+    var _b = react.useContext(GridContext), gridReady = _b.gridReady, setGridApi = _b.setGridApi, setQuickFilter = _b.setQuickFilter, ensureRowVisible = _b.ensureRowVisible, selectRowsById = _b.selectRowsById, ensureSelectedRowIsVisible = _b.ensureSelectedRowIsVisible, sizeColumnsToFit = _b.sizeColumnsToFit;
+    var checkUpdating = react.useContext(GridUpdatingContext).checkUpdating;
     var _c = react.useState(""), internalQuickFilter = _c[0], setInternalQuickFilter = _c[1];
     var lastSelectedIds = react.useRef([]);
     var _d = react.useState(false), staleGrid = _d[0], setStaleGrid = _d[1];
@@ -2300,14 +2309,6 @@ var Grid = function (params) {
         var _a;
         return (jsxRuntime.jsx("span", __assign({ className: "ag-overlay-no-rows-center" }, { children: (_a = params.noRowsOverlayText) !== null && _a !== void 0 ? _a : "There are currently no rows" })));
     }, [params.noRowsOverlayText]);
-    var sizeColumnsToFit = react.useCallback(function (event) {
-        // @ts-ignore (gridBodyCtrl is private)
-        if (event.api.gridBodyCtrl == undefined) {
-            return;
-            // this is here because ag grid was throwing api undefined error when closing POPPED OUT panel
-        }
-        event.api.sizeColumnsToFit();
-    }, []);
     var refreshSelectedRows = react.useCallback(function (event) {
         // Force-refresh all selected rows to re-run class function, to update selection highlighting
         event.api.refreshCells({
@@ -2353,6 +2354,12 @@ var Grid = function (params) {
         var cell = event.api.getFocusedCell();
         cell && event.api.setFocusedCell(cell.rowIndex, cell.column);
     }, [refreshSelectedRows]);
+    // When rows added or removed then resize columns
+    react.useEffect(function () {
+        if (columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length) {
+            sizeColumnsToFit();
+        }
+    }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
     return (jsxRuntime.jsxs("div", __assign({ "data-testid": params.dataTestId, className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale") }, { children: [params.quickFilter && (jsxRuntime.jsx("div", __assign({ className: "Grid-quickFilter" }, { children: jsxRuntime.jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
                         setInternalQuickFilter(event.target.value);
                     } }) }))), jsxRuntime.jsx(agGridReact.AgGridReact, { getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyDown: onCellKeyDown, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
@@ -2377,8 +2384,24 @@ styleInject(css_248z$5);
 var css_248z$4 = ".GridLoadableCell-container {\n  display: flex;\n  align-items: center;\n}";
 styleInject(css_248z$4);
 
+var GridPopoverContext = react.createContext({
+    anchorRef: { current: null },
+    updateValueRef: {
+        current: function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                console.error("Missing GridPopoverContext updateValueRef");
+                return [2 /*return*/, false];
+            });
+        }); }
+    },
+    saving: false,
+    setSaving: function () { },
+    setProps: function () { },
+    propsRef: { current: null }
+});
+
 var GridLoadableCell = function (props) {
-    // console.log(`Rendering LoadableCell - loading: ${props.isLoading}`);
+    react.useContext(GridPopoverContext).saving;
     if (props.isLoading) {
         return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: jsxRuntime.jsx(lui.LuiMiniSpinner, { size: 22, divProps: { role: "status", "aria-label": "Loading", style: { marginBottom: 4 } } }) })));
     }
@@ -2390,7 +2413,7 @@ var GridIcon = function (props) { return (jsxRuntime.jsx(lui.LuiIcon, { name: pr
 
 var GridRendererGenericCell = function (props) {
     var _a, _b, _c;
-    var checkUpdating = react.useContext(UpdatingContext).checkUpdating;
+    var checkUpdating = react.useContext(GridUpdatingContext).checkUpdating;
     var colDef = props.colDef;
     var cellRendererParams = colDef.cellRendererParams;
     var warningFn = cellRendererParams === null || cellRendererParams === void 0 ? void 0 : cellRendererParams.warning;
@@ -2407,9 +2430,57 @@ var GridRendererGenericCell = function (props) {
     return (jsxRuntime.jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_c = (_b = colDef.field) !== null && _b !== void 0 ? _b : colDef.colId) !== null && _c !== void 0 ? _c : "", props.data.id) }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [typeof warningText === "string" && jsxRuntime.jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsxRuntime.jsx(GridIcon, { icon: "ic_info", title: infoText }), jsxRuntime.jsx("span", __assign({ title: formatted }, { children: formatted }))] }) })));
 };
 
+var GridPopoverContextProvider = function (props) {
+    var _a = react.useContext(GridContext), getSelectedRows = _a.getSelectedRows, updatingCells = _a.updatingCells;
+    var anchorRef = react.useRef();
+    var propsRef = react.useRef({});
+    var updateValueRef = react.useRef(function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.error("updateValueRef.current is not set");
+            return [2 /*return*/, false];
+        });
+    }); });
+    var _b = react.useState(false), saving = _b[0], setSaving = _b[1];
+    var setProps = function (props, multiEdit) {
+        var _a, _b;
+        var selectedRows = multiEdit ? getSelectedRows() : [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
+        };
+        updateValueRef.current = 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];
+                }
+            });
+        }); };
+    };
+    return (jsxRuntime.jsx(GridPopoverContext.Provider, __assign({ value: {
+            anchorRef: anchorRef,
+            saving: saving,
+            setSaving: setSaving,
+            updateValueRef: updateValueRef,
+            propsRef: propsRef,
+            setProps: setProps
+        } }, { children: props.children })));
+};
+
 var GridCellRenderer = function (props) {
     var _a, _b, _c;
-    var checkUpdating = react.useContext(UpdatingContext).checkUpdating;
+    var checkUpdating = react.useContext(GridUpdatingContext).checkUpdating;
     var colDef = props.colDef;
     var rendererParams = colDef.cellRendererParams;
     var warningFn = rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.warning;
@@ -2418,15 +2489,17 @@ var GridCellRenderer = function (props) {
     var infoText = infoFn ? infoFn(props) : undefined;
     return ((_a = colDef === null || colDef === void 0 ? void 0 : colDef.cellRendererParams) === null || _a === void 0 ? void 0 : _a.originalCellRenderer) ? (jsxRuntime.jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_c = (_b = colDef.field) !== null && _b !== void 0 ? _b : colDef.colId) !== null && _c !== void 0 ? _c : "", props.data.id) }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [typeof warningText === "string" && jsxRuntime.jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsxRuntime.jsx(GridIcon, { icon: "ic_info", title: infoText }), jsxRuntime.jsx(colDef.cellRendererParams.originalCellRenderer, __assign({}, props))] }) }))) : (jsxRuntime.jsx(GridRendererGenericCell, __assign({}, props)));
 };
-/**
+/*
  * For editing a text area.
  */
-var GridCell = function (props) {
+var GridCell = function (props, custom) {
     var _a;
-    return __assign(__assign(__assign(__assign({ sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true }, (props.cellEditorParams && {
-        cellClass: ((_a = props === null || props === void 0 ? void 0 : props.cellEditorParams) === null || _a === void 0 ? void 0 : _a.multiEdit) ? GenericMultiEditCellClass : undefined,
-        editable: true,
-        cellEditor: GenericCellEditorComponent
+    return __assign(__assign(__assign(__assign(__assign({ 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)
+    })), ((custom === null || custom === void 0 ? void 0 : custom.editorParams) && {
+        cellEditorParams: __assign(__assign({}, custom.editorParams), { multiEdit: custom.multiEdit })
     })), { 
         // Default value formatter, otherwise react freaks out on objects
         valueFormatter: function (params) {
@@ -2439,37 +2512,22 @@ var GridCell = function (props) {
                 return JSON.stringify(params.value);
         } }), props), { cellRenderer: GridCellRenderer, cellRendererParams: __assign({ originalCellRenderer: props.cellRenderer }, props.cellRendererParams) });
 };
-var GenericCellEditorComponentFr = function (props, _) {
-    var _a, _b, _c;
-    var _d = react.useContext(GridContext), updatingCells = _d.updatingCells, getSelectedRows = _d.getSelectedRows;
-    var colDef = props.colDef, data = props.data;
-    var cellEditorParams = props.colDef.cellEditorParams;
-    var multiEdit = (_a = cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.multiEdit) !== null && _a !== void 0 ? _a : false;
-    var field = (_b = props.colDef.field) !== null && _b !== void 0 ? _b : "";
-    var formProps = (_c = colDef.cellEditorParams) !== null && _c !== void 0 ? _c : {};
-    var value = props.value;
-    var selectedRows = react.useMemo(function () { return (multiEdit ? getSelectedRows() : [data]); }, [data, getSelectedRows, multiEdit]);
-    var _e = react.useState(false), saving = _e[0], setSaving = _e[1];
-    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]);
-    if (cellEditorParams == null)
-        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { children: colDef.cellRenderer ? jsxRuntime.jsx(colDef.cellRenderer, __assign({}, props, { saving: saving })) : props.value }), (cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.form) && (jsxRuntime.jsx(cellEditorParams.form, { cellEditorParams: props, updateValue: updateValue, saving: saving, formProps: formProps, data: data, value: value, field: field, selectedRows: selectedRows }))] }));
+// 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 GenericCellEditorComponent = react.forwardRef(GenericCellEditorComponentFr);
+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("div", { children: colDef.cellRenderer ? jsxRuntime.jsx(colDef.cellRenderer, __assign({}, props)) : props.value }), (props === null || props === void 0 ? void 0 : props.editor) && jsxRuntime.jsx(props.editor, __assign({}, cellEditorParams, propsRef.current))] }));
+};
 
 /**
  * If loading is true this returns a loading spinner, otherwise it returns its children.
@@ -2487,29 +2545,32 @@ var ComponentLoadingWrapper = function (props) {
                 } })), props.children] })));
 };
 
-var useGridPopoverHook = function (props, save) {
-    var cellEditorParams = props.cellEditorParams, saving = props.saving, updateValue = props.updateValue;
-    var eGridCell = cellEditorParams.eGridCell;
+var useGridPopoverHook = function (props) {
+    if (props === void 0) { props = {}; }
     var stopEditing = react.useContext(GridContext).stopEditing;
+    var _a = react.useContext(GridPopoverContext), anchorRef = _a.anchorRef, saving = _a.saving, updateValueRef = _a.updateValueRef;
     var saveButtonRef = react.useRef(null);
-    var anchorRef = react.useRef(eGridCell);
-    anchorRef.current = eGridCell;
-    var _a = react.useState(false), isOpen = _a[0], setOpen = _a[1];
+    var _b = react.useState(false), isOpen = _b[0], setOpen = _b[1];
     react.useEffect(function () {
         setOpen(true);
     }, []);
     var triggerSave = react.useCallback(function (reason) { 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:
-                    _a = reason == "cancel" || !save;
-                    if (_a) return [3 /*break*/, 2];
-                    return [4 /*yield*/, updateValue(save)];
+                    _a = reason == "cancel" || !props.save;
+                    if (_a) return [3 /*break*/, 3];
+                    _b = updateValueRef.current;
+                    if (!_b) return [3 /*break*/, 2];
+                    return [4 /*yield*/, updateValueRef.current(props.save)];
                 case 1:
-                    _a = (_b.sent());
-                    _b.label = 2;
+                    _b = (_c.sent());
+                    _c.label = 2;
                 case 2:
+                    _a = (_b);
+                    _c.label = 3;
+                case 3:
                     if (_a) {
                         setOpen(false);
                         stopEditing();
@@ -2517,9 +2578,9 @@ var useGridPopoverHook = function (props, save) {
                     return [2 /*return*/];
             }
         });
-    }); }, [save, stopEditing, updateValue]);
+    }); }, [props, stopEditing, updateValueRef]);
     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: "lui-menu", onClose: function (event) { return triggerSave(event.reason).then(); }, reposition: "initial", viewScroll: "auto", dontShrinkIfDirectionIsTop: true }, { children: [saving && (jsxRuntime.jsx("div", { style: {
+        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: "lui-menu", onClose: function (event) { return triggerSave(event.reason).then(); }, viewScroll: "auto", dontShrinkIfDirectionIsTop: true }, { children: [saving && (jsxRuntime.jsx("div", { style: {
                             position: "absolute",
                             left: 0,
                             top: 0,
@@ -2528,7 +2589,7 @@ var useGridPopoverHook = function (props, save) {
                             backgroundColor: "rgba(64,64,64,0.1)",
                             zIndex: 1000
                         } })), children, jsxRuntime.jsx("button", { ref: saveButtonRef, onClick: function () { return triggerSave().then(); }, style: { display: "none" } })] }))) }));
-    }, [isOpen, saving, triggerSave]);
+    }, [anchorRef, isOpen, saving, triggerSave]);
     return {
         popoverWrapper: popoverWrapper,
         triggerSave: triggerSave
@@ -2537,7 +2598,7 @@ var useGridPopoverHook = function (props, save) {
 
 var GridRenderPopoutMenuCell = function (props) {
     var _a, _b, _c;
-    var checkUpdating = react.useContext(UpdatingContext).checkUpdating;
+    var checkUpdating = react.useContext(GridUpdatingContext).checkUpdating;
     var isLoading = checkUpdating((_b = (_a = props.colDef) === null || _a === void 0 ? void 0 : _a.field) !== null && _b !== void 0 ? _b : "", props.data.id);
     var editable = (_c = props.colDef) === null || _c === void 0 ? void 0 : _c.editable;
     var disabled = !(typeof editable === "function"
@@ -2557,17 +2618,189 @@ var GridRenderPopoutMenuCell = function (props) {
 var css_248z$3 = "@charset \"UTF-8\";\n.szh-menu {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  box-sizing: border-box;\n  width: max-content;\n  z-index: 100;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  background-color: #fff;\n}\n.szh-menu:focus {\n  outline: none;\n}\n.szh-menu__arrow {\n  box-sizing: border-box;\n  width: 0.75rem;\n  height: 0.75rem;\n  background-color: #fff;\n  border: 1px solid transparent;\n  border-left-color: rgba(0, 0, 0, 0.1);\n  border-top-color: rgba(0, 0, 0, 0.1);\n  z-index: -1;\n}\n.szh-menu__arrow--dir-left {\n  right: -0.375rem;\n  transform: translateY(-50%) rotate(135deg);\n}\n.szh-menu__arrow--dir-right {\n  left: -0.375rem;\n  transform: translateY(-50%) rotate(-45deg);\n}\n.szh-menu__arrow--dir-top {\n  bottom: -0.375rem;\n  transform: translateX(-50%) rotate(-135deg);\n}\n.szh-menu__arrow--dir-bottom {\n  top: -0.375rem;\n  transform: translateX(-50%) rotate(45deg);\n}\n.szh-menu__item {\n  cursor: pointer;\n}\n.szh-menu__item:focus {\n  outline: none;\n}\n.szh-menu__item--hover {\n  background-color: #ebebeb;\n}\n.szh-menu__item--focusable {\n  cursor: default;\n  background-color: inherit;\n}\n.szh-menu__item--disabled {\n  cursor: default;\n  color: #aaa;\n}\n.szh-menu__group {\n  box-sizing: border-box;\n}\n.szh-menu__radio-group {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.szh-menu__divider {\n  height: 1px;\n  margin: 0.5rem 0;\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.szh-menu-button {\n  box-sizing: border-box;\n}\n\n.szh-menu {\n  user-select: none;\n  color: #212529;\n  border: none;\n  border-radius: 0.25rem;\n  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1);\n  min-width: 10rem;\n  padding: 0.5rem 0;\n}\n.szh-menu__item {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0.375rem 1.5rem;\n}\n.szh-menu-container--itemTransition .szh-menu__item {\n  transition-property: background-color, color;\n  transition-duration: 0.15s;\n  transition-timing-function: ease-in-out;\n}\n.szh-menu__item--type-radio {\n  padding-left: 2.2rem;\n}\n.szh-menu__item--type-radio::before {\n  content: \"○\";\n  position: absolute;\n  left: 0.8rem;\n  top: 0.55rem;\n  font-size: 0.8rem;\n}\n.szh-menu__item--type-radio.szh-menu__item--checked::before {\n  content: \"●\";\n}\n.szh-menu__item--type-checkbox {\n  padding-left: 2.2rem;\n}\n.szh-menu__item--type-checkbox::before {\n  position: absolute;\n  left: 0.8rem;\n}\n.szh-menu__item--type-checkbox.szh-menu__item--checked::before {\n  content: \"✔\";\n}\n.szh-menu__submenu > .szh-menu__item {\n  padding-right: 2.5rem;\n}\n.szh-menu__submenu > .szh-menu__item::after {\n  content: \"❯\";\n  position: absolute;\n  right: 1rem;\n}\n.szh-menu__header {\n  color: #888;\n  font-size: 0.8rem;\n  padding: 0.2rem 1.5rem;\n  text-transform: uppercase;\n}";
 styleInject(css_248z$3);
 
-var MenuSeparatorString$1 = "_____MENU_SEPARATOR_____";
-Object.freeze({ value: MenuSeparatorString$1 });
+var MenuSeparatorString = "_____MENU_SEPARATOR_____";
+var MenuSeparator = Object.freeze({ value: MenuSeparatorString });
+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 _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 selectItemHandler = 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 () {
+                            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 })];
+                                    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()];
+            }
+        });
+    }); }, [props, updatingCells]);
+    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()];
+            }
+        });
+    }); }, [props, updatingCells]);
+    // Load up options list if it's async function
+    react.useEffect(function () {
+        var _a;
+        if (options || optionsInitialising.current)
+            return;
+        optionsInitialising.current = true;
+        var optionsConf = (_a = props.options) !== null && _a !== void 0 ? _a : [];
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var optionsList;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(typeof optionsConf == "function")) return [3 /*break*/, 2];
+                        return [4 /*yield*/, optionsConf(props.selectedRows, filter)];
+                    case 1:
+                        optionsConf = _a.sent();
+                        _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") {
+                                item = { value: item, label: item, disabled: false };
+                            }
+                            return item;
+                        });
+                        if (props.filtered) {
+                            // This is needed otherwise when filter input is rendered and sets autofocus
+                            // the mouse up of the double click edit triggers the cell to cancel editing
+                            lodashEs.delay(function () { return setOptions(optionsList); }, 100);
+                        }
+                        else {
+                            setOptions(optionsList);
+                        }
+                        optionsInitialising.current = false;
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [filter, options, props]);
+    // Local filtering.
+    react.useEffect(function () {
+        if (props.filtered == "local") {
+            if (options == null)
+                return;
+            setFilteredValues(options
+                .map(function (option) {
+                if (option.label != null && typeof option.label !== "string") {
+                    console.error("Cannot filter non-string labels", option);
+                    return undefined;
+                }
+                var str = option.label || "";
+                return str.toLowerCase().indexOf(filter) === -1 ? option.value : undefined;
+            })
+                .filter(function (r) { return r !== undefined; }));
+        }
+    }, [props.filtered, filter, options]);
+    var researchOnFilterChange = debounce__default["default"](react.useCallback(function () {
+        setOptions(null);
+    }, []), 500);
+    var previousFilter = react.useRef(filter);
+    // Reload filtering.
+    react.useEffect(function () {
+        if (previousFilter.current != filter && props.filtered == "reload") {
+            previousFilter.current = filter;
+            props.optionsRequestCancel && props.optionsRequestCancel();
+            researchOnFilterChange().then();
+        }
+    }, [filter, props, researchOnFilterChange]);
+    var onFilterKeyDown = react.useCallback(function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var activeOptions;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!options)
+                        return [2 /*return*/];
+                    if (!(e.key == "Enter" || e.key == "Tab")) return [3 /*break*/, 5];
+                    activeOptions = options.filter(function (option) { return !filteredValues.includes(option.value); });
+                    if (!(activeOptions.length == 1)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, selectItemHandler(activeOptions[0].value)];
+                case 1:
+                    _a.sent();
+                    stopEditing();
+                    return [3 /*break*/, 5];
+                case 2:
+                    if (!props.onSelectFilter) return [3 /*break*/, 4];
+                    return [4 /*yield*/, selectFilterHandler(filter)];
+                case 3:
+                    _a.sent();
+                    stopEditing();
+                    return [3 /*break*/, 5];
+                case 4:
+                    e.preventDefault();
+                    e.stopPropagation();
+                    _a.label = 5;
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, props]);
+    var maxRowsStyles = props.maxRows !== undefined ? { maxHeight: 62 + 34 * props.maxRows, overFlowY: "auto" } : undefined;
+    var popoverWrapper = useGridPopoverHook().popoverWrapper;
+    return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
+                            var _b;
+                            var ref = _a.ref;
+                            return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsxRuntime.jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, onChange: function (e) { return setFilter(e.target.value.toLowerCase()); }, onKeyDown: function (e) { return onFilterKeyDown(e); } }) })));
+                        } })), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] })), jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options }, { children: jsxRuntime.jsxs("div", __assign({ style: maxRowsStyles }, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && jsxRuntime.jsx(MenuItem, { children: "[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 })) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () { return 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)));
+                        })] })) }))] }));
+};
+
 var GridFormMultiSelect = function (props) {
-    var formProps = props.formProps;
+    var selectedRows = props.selectedRows;
     var _a = react.useState(""), filter = _a[0], setFilter = _a[1];
     var _b = react.useState([]), filteredValues = _b[0], setFilteredValues = _b[1];
     var optionsInitialising = react.useRef(false);
     var _c = react.useState(), options = _c[0], setOptions = _c[1];
     var subSelectedValues = react.useRef({});
     var _d = react.useState(function () {
-        return formProps.initialSelectedValues ? formProps.initialSelectedValues(props.selectedRows) : [];
+        return props.initialSelectedValues ? props.initialSelectedValues(selectedRows) : [];
     }), selectedValues = _d[0], setSelectedValues = _d[1];
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var values;
@@ -2575,28 +2808,28 @@ var GridFormMultiSelect = function (props) {
             switch (_a.label) {
                 case 0:
                     values = lodashEs.fromPairs(selectedValues.map(function (value) { var _a; return [value, (_a = subSelectedValues.current[value]) !== null && _a !== void 0 ? _a : true]; }));
-                    if (!formProps.onSave) return [3 /*break*/, 2];
-                    return [4 /*yield*/, formProps.onSave({ selectedRows: selectedRows, values: values })];
+                    if (!props.onSave) return [3 /*break*/, 2];
+                    return [4 /*yield*/, props.onSave({ selectedRows: selectedRows, values: values })];
                 case 1: return [2 /*return*/, _a.sent()];
                 case 2: return [2 /*return*/, true];
             }
         });
-    }); }, [formProps, selectedValues]);
-    var _e = useGridPopoverHook(props, save), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
+    }); }, [props, selectedValues]);
+    var _e = useGridPopoverHook({ save: save }), popoverWrapper = _e.popoverWrapper, triggerSave = _e.triggerSave;
     // Load up options list if it's async function
     react.useEffect(function () {
         var _a;
         if (options || optionsInitialising.current)
             return;
         optionsInitialising.current = true;
-        var optionsConf = (_a = formProps.options) !== null && _a !== void 0 ? _a : [];
+        var optionsConf = (_a = props.options) !== null && _a !== void 0 ? _a : [];
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var optionsList;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!(typeof optionsConf == "function")) return [3 /*break*/, 2];
-                        return [4 /*yield*/, optionsConf(props.selectedRows)];
+                        return [4 /*yield*/, optionsConf(selectedRows)];
                     case 1:
                         optionsConf = _a.sent();
                         _a.label = 2;
@@ -2607,7 +2840,7 @@ var GridFormMultiSelect = function (props) {
                             }
                             return item;
                         });
-                        if (formProps.filtered) {
+                        if (props.filtered) {
                             // This is needed otherwise when filter input is rendered and sets autofocus
                             // the mouse up of the double click edit triggers the cell to cancel editing
                             lodashEs.delay(function () { return setOptions(optionsList); }, 100);
@@ -2620,9 +2853,9 @@ var GridFormMultiSelect = function (props) {
                 }
             });
         }); })();
-    }, [formProps.filtered, formProps.options, options, props.selectedRows]);
+    }, [props.filtered, props.options, options, selectedRows]);
     react.useEffect(function () {
-        if (!formProps.filtered || options == null)
+        if (!props.filtered || options == null)
             return;
         setFilteredValues(options
             .map(function (option) {
@@ -2634,14 +2867,14 @@ var GridFormMultiSelect = function (props) {
             return str.toLowerCase().indexOf(filter.trim()) === -1 ? option.value : undefined;
         })
             .filter(function (r) { return r !== undefined; }));
-    }, [formProps.filtered, filter, options]);
-    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options }, { children: jsxRuntime.jsxs("div", __assign({ className: "Grid-popoverContainerList" }, { children: [options && formProps.filtered && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
+    }, [props.filtered, filter, options]);
+    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !options }, { children: jsxRuntime.jsxs("div", __assign({ className: "Grid-popoverContainerList" }, { 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;
-                                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 = formProps.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: "", onChange: function (e) { return setFilter(e.target.value.toLowerCase()); } }) })));
+                                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: "", onChange: function (e) { return setFilter(e.target.value.toLowerCase()); } }) })));
                             } }), "filter"), jsxRuntime.jsx(MenuDivider, {}, "$$divider_filter")] })), options === null || options === void 0 ? void 0 : options.map(function (item, index) {
                     var _a;
-                    return item.value === MenuSeparatorString$1 ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(MenuItem, __assign({ onClick: function (e) {
+                    return item.value === MenuSeparatorString ? (jsxRuntime.jsx(MenuDivider, {}, "$$divider_".concat(index))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsxs(react.Fragment, { 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; }));
@@ -2684,24 +2917,21 @@ var GridFormMultiSelect = function (props) {
                 })] })) })));
 };
 
-var GridPopoutEditMultiSelect = function (colDef) {
-    var _a;
-    return GridCell(__assign(__assign({ initialWidth: 65, maxWidth: 150, cellClass: ((_a = colDef.cellEditor) === null || _a === void 0 ? void 0 : _a.multiEdit) ? GenericMultiEditCellClass : undefined }, colDef), ((colDef === null || colDef === void 0 ? void 0 : colDef.cellEditorParams) && {
-        cellEditorParams: __assign(__assign({}, colDef.cellEditorParams), { form: GridFormMultiSelect })
-    })));
+var GridPopoutEditMultiSelect = function (colDef, props) {
+    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined }, colDef), __assign({ editor: GridFormMultiSelect }, props));
 };
 
 var css_248z$2 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.GridPopoutMenu-burger {\n  cursor: pointer;\n}\n.GridPopoutMenu-burger svg {\n  fill: #007198;\n}\n\n.GridPopoutMenu-burgerDisabled svg {\n  fill: #989189;\n}";
 styleInject(css_248z$2);
 
 /** Menu configuration types **/
-var MenuSeparator = Object.freeze({ __isMenuSeparator__: true });
+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 GridFormPopoutMenu = function (props) {
-    var formProps = props.formProps;
+var GridFormPopoutMenu = function (_props) {
+    var props = _props;
     var updatingCells = react.useContext(GridContext).updatingCells;
     var optionsInitialising = react.useRef(false);
     var _a = react.useState(), options = _a[0], setOptions = _a[1];
@@ -2711,7 +2941,7 @@ var GridFormPopoutMenu = function (props) {
         if (options || optionsInitialising.current)
             return;
         optionsInitialising.current = true;
-        var optionsConf = (_a = formProps.options) !== null && _a !== void 0 ? _a : [];
+        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) {
@@ -2732,7 +2962,7 @@ var GridFormPopoutMenu = function (props) {
                 }
             });
         }); })();
-    }, [options, formProps.options, props.selectedRows]);
+    }, [options, props.options, props.selectedRows]);
     var actionClick = react.useCallback(function (menuOption) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -2758,25 +2988,23 @@ var GridFormPopoutMenu = function (props) {
     }); }, [props.field, props.selectedRows, updatingCells]);
     var selectedRowCount = props.selectedRows.length;
     var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (menuOption) {
-        return menuOption.label === MenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
+        return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
     });
-    var popoverWrapper = useGridPopoverHook(props).popoverWrapper;
+    var popoverWrapper = useGridPopoverHook().popoverWrapper;
     return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: !filteredOptions }, { children: jsxRuntime.jsx("div", __assign({ className: "Grid-popoverContainerList" }, { children: options === null || options === void 0 ? void 0 : options.map(function (item, index) {
-                return item.label === MenuSeparator ? (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.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))));
             }) })) })));
 };
 
 /**
  * Popout burger menu
  */
-var GridPopoverMenu = function (colDef) {
+var GridPopoverMenu = function (colDef, props) {
     var _a;
-    return GridCell(__assign(__assign(__assign({ maxWidth: 64, editable: colDef.editable != null ? colDef.editable : true, cellRenderer: GridRenderPopoutMenuCell, cellClass: ((_a = colDef === null || colDef === void 0 ? void 0 : colDef.cellEditorParams) === null || _a === void 0 ? void 0 : _a.multiEdit) !== false ? GenericMultiEditCellClass : undefined }, colDef), { cellRendererParams: {
+    return GridCell(__assign(__assign({ maxWidth: 64, editable: colDef.editable != null ? colDef.editable : true, cellRenderer: GridRenderPopoutMenuCell, cellClass: ((_a = colDef === null || colDef === void 0 ? void 0 : colDef.cellEditorParams) === null || _a === void 0 ? void 0 : _a.multiEdit) !== false ? GenericMultiEditCellClass : undefined }, colDef), { cellRendererParams: {
             // Menus open on single click, this parameter is picked up in Grid.tsx
             singleClickEdit: true
-        } }), ((colDef === null || colDef === void 0 ? void 0 : colDef.cellEditorParams) && {
-        cellEditorParams: __assign(__assign({ multiEdit: true }, colDef.cellEditorParams), { form: GridFormPopoutMenu })
-    })));
+        } }), __assign({ editor: GridFormPopoutMenu }, props));
 };
 
 var bearingValueFormatter = function (params) {
@@ -2867,9 +3095,9 @@ 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", value: props.value, onChange: props.onChange }, 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 GridFormEditBearing = function (_props) {
     var _a;
-    var formProps = props.formProps;
+    var props = _props;
     var _b = react.useState("".concat((_a = props.value) !== null && _a !== void 0 ? _a : "")), 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;
@@ -2883,8 +3111,8 @@ var GridFormEditBearing = function (props) {
                     if (parsedValue === props.value) {
                         return [2 /*return*/, true];
                     }
-                    if (!formProps.onSave) return [3 /*break*/, 2];
-                    return [4 /*yield*/, formProps.onSave(selectedRows, parsedValue)];
+                    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;
@@ -2898,42 +3126,42 @@ var GridFormEditBearing = function (props) {
                 case 3: return [2 /*return*/, true];
             }
         });
-    }); }, [formProps, props.field, props.value, value]);
-    var _c = useGridPopoverHook(props, save), popoverWrapper = _c.popoverWrapper, triggerSave = _c.triggerSave;
+    }); }, [props, value]);
+    var _c = useGridPopoverHook({ 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());
             }, inputProps: {
                 autoFocus: true,
-                placeholder: formProps.placeHolder,
+                placeholder: props.placeHolder,
                 disabled: false,
                 maxLength: 16,
                 onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
                     return [2 /*return*/, e.key === "Enter" && triggerSave().then()];
                 }); }); }
-            }, formatted: bearingStringValidator(value, formProps.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, formProps.range) }) })));
+            }, formatted: bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value)), error: bearingStringValidator(value, props.range) }) })));
 };
 
-var GridPopoverEditBearingLike = function (colDef) {
-    var _a;
-    return GridCell(__assign(__assign({ initialWidth: 65, maxWidth: 150, valueFormatter: bearingValueFormatter, cellClass: ((_a = colDef.cellEditorParams) === null || _a === void 0 ? void 0 : _a.multiEdit) ? GenericMultiEditCellClass : undefined }, colDef), ((colDef === null || colDef === void 0 ? void 0 : colDef.cellEditorParams) && {
-        cellEditorParams: __assign(__assign({}, colDef.cellEditorParams), { form: GridFormEditBearing })
-    })));
+var GridPopoverEditBearingLike = function (colDef, props) {
+    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, valueFormatter: bearingValueFormatter, cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined }, colDef), __assign({ editor: GridFormEditBearing }, props));
 };
-var GridPopoverEditBearing = function (colDef) {
-    var init = GridPopoverEditBearingLike(colDef);
-    return __assign(__assign({}, init), { valueFormatter: bearingValueFormatter, cellEditorParams: __assign({ range: function (value) {
+var GridPopoverEditBearing = function (colDef, props) {
+    return GridPopoverEditBearingLike(__assign({ valueFormatter: bearingValueFormatter }, colDef), {
+        multiEdit: !!props.multiEdit,
+        editorParams: __assign({ placeHolder: "Enter bearing correction", range: function (value) {
                 if (value === null)
-                    return "Bearing is required";
+                    return "Bearing correction is required";
                 if (value >= 360)
-                    return "Bearing must be less than 360 degrees";
+                    return "Bearing correction must be less than 360 degrees";
                 if (value < 0)
-                    return "Bearing must not be negative";
+                    return "Bearing correction must not be negative";
                 return null;
-            } }, init.cellEditorParams) });
+            } }, props.editorParams)
+    });
 };
-var GridPopoverEditBearingCorrection = function (colDef) {
-    var init = GridPopoverEditBearingLike(colDef);
-    return __assign(__assign({}, init), { valueFormatter: bearingCorrectionValueFormatter, cellEditorParams: __assign({ range: function (value) {
+var GridPopoverEditBearingCorrection = function (colDef, props) {
+    return GridPopoverEditBearingLike(__assign({ valueFormatter: bearingCorrectionValueFormatter }, colDef), {
+        multiEdit: !!props.multiEdit,
+        editorParams: __assign({ placeHolder: "Enter bearing correction", range: function (value) {
                 if (value === null)
                     return "Bearing is required";
                 if (value >= 360)
@@ -2941,189 +3169,18 @@ var GridPopoverEditBearingCorrection = function (colDef) {
                 if (value <= -180)
                     return "Bearing must be greater then -180 degrees";
                 return null;
-            } }, init.cellEditorParams) });
-};
-
-var MenuSeparatorString = "_____MENU_SEPARATOR_____";
-Object.freeze({ value: MenuSeparatorString });
-var GridFormDropDown = function (props) {
-    var popoverWrapper = useGridPopoverHook(props).popoverWrapper;
-    var formProps = props.formProps;
-    var _a = react.useContext(GridContext), updatingCells = _a.updatingCells, stopEditing = _a.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 selectItemHandler = 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 () {
-                            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 (!formProps.onSelectedItem) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, formProps.onSelectedItem({ selectedRows: selectedRows, value: value })];
-                                    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()];
-            }
-        });
-    }); }, [formProps, props.field, props.selectedRows, updatingCells]);
-    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 (!formProps.onSelectFilter) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, formProps.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()];
-            }
-        });
-    }); }, [formProps, props.field, props.selectedRows, updatingCells]);
-    // Load up options list if it's async function
-    react.useEffect(function () {
-        var _a;
-        if (options || optionsInitialising.current)
-            return;
-        optionsInitialising.current = true;
-        var optionsConf = (_a = formProps.options) !== null && _a !== void 0 ? _a : [];
-        (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var optionsList;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!(typeof optionsConf == "function")) return [3 /*break*/, 2];
-                        return [4 /*yield*/, optionsConf(props.selectedRows, filter)];
-                    case 1:
-                        optionsConf = _a.sent();
-                        _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") {
-                                item = { value: item, label: item, disabled: false };
-                            }
-                            return item;
-                        });
-                        if (formProps.filtered) {
-                            // This is needed otherwise when filter input is rendered and sets autofocus
-                            // the mouse up of the double click edit triggers the cell to cancel editing
-                            lodashEs.delay(function () { return setOptions(optionsList); }, 100);
-                        }
-                        else {
-                            setOptions(optionsList);
-                        }
-                        optionsInitialising.current = false;
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [filter, options, formProps.filtered, formProps.options, props.selectedRows]);
-    // Local filtering
-    react.useEffect(function () {
-        if (formProps.filtered == "local") {
-            if (options == null)
-                return;
-            setFilteredValues(options
-                .map(function (option) {
-                if (option.label != null && typeof option.label !== "string") {
-                    console.error("Cannot filter non-string labels", option);
-                    return undefined;
-                }
-                var str = option.label || "";
-                return str.toLowerCase().indexOf(filter) === -1 ? option.value : undefined;
-            })
-                .filter(function (r) { return r !== undefined; }));
-        }
-    }, [formProps.filtered, filter, options]);
-    var researchOnFilterChange = debounce__default["default"](react.useCallback(function () {
-        setOptions(null);
-    }, []), 500);
-    var previousFilter = react.useRef(filter);
-    // Reload filtering
-    react.useEffect(function () {
-        if (previousFilter.current != filter && formProps.filtered == "reload") {
-            previousFilter.current = filter;
-            formProps.optionsRequestCancel && formProps.optionsRequestCancel();
-            researchOnFilterChange().then();
-        }
-    }, [filter, formProps, props, researchOnFilterChange]);
-    var onFilterKeyDown = react.useCallback(function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var activeOptions;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!options)
-                        return [2 /*return*/];
-                    if (!(e.key == "Enter" || e.key == "Tab")) return [3 /*break*/, 5];
-                    activeOptions = options.filter(function (option) { return !filteredValues.includes(option.value); });
-                    if (!(activeOptions.length == 1)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, selectItemHandler(activeOptions[0].value)];
-                case 1:
-                    _a.sent();
-                    stopEditing();
-                    return [3 /*break*/, 5];
-                case 2:
-                    if (!formProps.onSelectFilter) return [3 /*break*/, 4];
-                    return [4 /*yield*/, selectFilterHandler(filter)];
-                case 3:
-                    _a.sent();
-                    stopEditing();
-                    return [3 /*break*/, 5];
-                case 4:
-                    e.preventDefault();
-                    e.stopPropagation();
-                    _a.label = 5;
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); }, [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, formProps]);
-    return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [formProps.filtered && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FocusableItem, __assign({ className: "filter-item" }, { children: function (_a) {
-                            var _b;
-                            var ref = _a.ref;
-                            return (jsxRuntime.jsx("div", __assign({ style: { display: "flex", width: "100%" } }, { children: jsxRuntime.jsx("input", { autoFocus: true, className: "free-text-input", style: { border: "0px" }, ref: ref, type: "text", placeholder: (_b = formProps.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 }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && options.length == (filteredValues === null || filteredValues === void 0 ? void 0 : filteredValues.length) && jsxRuntime.jsx(MenuItem, { children: "[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))) : filteredValues.includes(item.value) ? null : (jsxRuntime.jsx(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onClick: function () { return 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)));
-                        })] }) }))] }));
+            } }, props.editorParams)
+    });
 };
 
-var GridPopoverEditDropDown = function (colDef) {
-    var _a;
-    return GridCell(__assign(__assign({ initialWidth: 65, maxWidth: 150, cellClass: ((_a = colDef.cellEditor) === null || _a === void 0 ? void 0 : _a.multiEdit) ? GenericMultiEditCellClass : undefined }, colDef), ((colDef === null || colDef === void 0 ? void 0 : colDef.cellEditorParams) && {
-        cellEditorParams: __assign(__assign({}, colDef.cellEditorParams), { form: GridFormDropDown })
-    })));
+var GridPopoverEditDropDown = function (colDef, props) {
+    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined }, colDef), __assign({ editor: GridFormDropDown }, props));
 };
 
-var GridFormMessage = function (props) {
-    var formProps = props.formProps;
+var GridFormMessage = function (_props) {
+    var props = _props;
     var _a = react.useState(null), message = _a[0], setMessage = _a[1];
-    var popoverWrapper = useGridPopoverHook(props).popoverWrapper;
+    var popoverWrapper = useGridPopoverHook().popoverWrapper;
     react.useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var _a;
@@ -3131,24 +3188,19 @@ var GridFormMessage = function (props) {
                 switch (_b.label) {
                     case 0:
                         _a = setMessage;
-                        return [4 /*yield*/, formProps.message(props.selectedRows, props.cellEditorParams)];
+                        return [4 /*yield*/, props.message(props)];
                     case 1:
                         _a.apply(void 0, [_b.sent()]);
                         return [2 /*return*/];
                 }
             });
         }); })().then();
-    }, [formProps, props.selectedRows, props]);
+    }, [props]);
     return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, __assign({ loading: message === null }, { children: jsxRuntime.jsx("div", __assign({ style: { maxWidth: 400 }, className: "Grid-popoverContainer" }, { children: message })) })));
 };
 
-var GridPopoverMessage = function (colDef) {
-    var _a;
-    return GridCell(__assign(__assign(__assign({ maxWidth: 140 }, colDef), { cellRendererParams: (_a = colDef.cellRendererParams) !== null && _a !== void 0 ? _a : {
-            singleClickEdit: true
-        } }), ((colDef === null || colDef === void 0 ? void 0 : colDef.cellEditorParams) && {
-        cellEditorParams: __assign(__assign({}, colDef.cellEditorParams), { form: GridFormMessage })
-    })));
+var GridPopoverMessage = function (colDef, props) {
+    return GridCell(__assign(__assign({ maxWidth: 140 }, colDef), { cellRendererParams: __assign({ singleClickEdit: true }, colDef.cellRendererParams) }), __assign({ editor: GridFormMessage }, props));
 };
 
 var useGenerateOrDefaultId = function (idFromProps) {
@@ -3161,22 +3213,22 @@ var TextAreaInput = function (props) {
     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] })))] })));
 };
 
-var GridFormTextArea = function (props) {
+var GridFormTextArea = function (_props) {
     var _a, _b;
-    var formProps = props.formProps;
+    var props = _props;
     var _c = react.useState((_a = props.value) !== null && _a !== void 0 ? _a : ""), value = _c[0], setValue = _c[1];
     var invalid = react.useCallback(function () {
-        if (formProps.required && value.length == 0) {
+        if (props.required && value.length == 0) {
             return "Some text is required";
         }
-        if (formProps.maxlength && value.length > formProps.maxlength) {
-            return "Text must be no longer than ".concat(formProps.maxlength, " characters");
+        if (props.maxlength && value.length > props.maxlength) {
+            return "Text must be no longer than ".concat(props.maxlength, " characters");
         }
-        if (formProps.validate) {
-            return formProps.validate(value);
+        if (props.validate) {
+            return props.validate(value);
         }
         return null;
-    }, [formProps, value]);
+    }, [props, value]);
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var field;
         return __generator(this, function (_a) {
@@ -3186,8 +3238,8 @@ var GridFormTextArea = function (props) {
                         return [2 /*return*/, false];
                     if (props.value === (value !== null && value !== void 0 ? value : ""))
                         return [2 /*return*/, true];
-                    if (!formProps.onSave) return [3 /*break*/, 2];
-                    return [4 /*yield*/, formProps.onSave(selectedRows, value)];
+                    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;
@@ -3199,35 +3251,33 @@ var GridFormTextArea = function (props) {
                     return [2 /*return*/, true];
             }
         });
-    }); }, [formProps, invalid, props.field, props.value, value]);
-    var popoverWrapper = useGridPopoverHook(props, save).popoverWrapper;
-    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = formProps.width) !== null && _b !== void 0 ? _b : 240 }, className: "FormTest" }, { children: jsxRuntime.jsx(TextAreaInput, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), inputProps: { placeholder: formProps.placeholder } }) })));
+    }); }, [props, invalid, value]);
+    var popoverWrapper = useGridPopoverHook({ save: save }).popoverWrapper;
+    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_b = props.width) !== null && _b !== void 0 ? _b : 240 }, className: "FormTest" }, { children: jsxRuntime.jsx(TextAreaInput, { value: value, onChange: function (e) { return setValue(e.target.value); }, error: invalid(), inputProps: { placeholder: props.placeholder } }) })));
 };
 
-var GridPopoverTextArea = function (colDef) {
-    return GridCell(__assign(__assign({ maxWidth: 260 }, colDef), ((colDef === null || colDef === void 0 ? void 0 : colDef.cellEditorParams) && {
-        cellEditorParams: __assign(__assign({ width: 260 }, colDef.cellEditorParams), { form: GridFormTextArea })
-    })));
+var GridPopoverTextArea = function (colDef, params) {
+    return GridCell(__assign({ maxWidth: 260 }, colDef), __assign({ editor: GridFormTextArea }, params));
 };
 
-var GridFormTextInput = function (props) {
+var GridFormTextInput = function (_props) {
     var _a;
-    var formProps = props.formProps;
+    var props = _props;
     var initValue = props.value == null ? "" : "".concat(props.value);
     var _b = react.useState(initValue), value = _b[0], setValue = _b[1];
     var invalid = react.useCallback(function () {
         var trimmedValue = value.trim();
-        if (formProps.required && trimmedValue.length == 0) {
+        if (props.required && trimmedValue.length == 0) {
             return "Some text is required";
         }
-        if (formProps.maxlength && trimmedValue.length > formProps.maxlength) {
-            return "Text must be no longer than ".concat(formProps.maxlength, " characters");
+        if (props.maxlength && trimmedValue.length > props.maxlength) {
+            return "Text must be no longer than ".concat(props.maxlength, " characters");
         }
-        if (formProps.validate) {
-            return formProps.validate(trimmedValue);
+        if (props.validate) {
+            return props.validate(trimmedValue, props.data);
         }
         return null;
-    }, [formProps, value]);
+    }, [props, value]);
     var save = react.useCallback(function (selectedRows) { return __awaiter(void 0, void 0, void 0, function () {
         var trimmedValue, field;
         return __generator(this, function (_a) {
@@ -3238,8 +3288,8 @@ var GridFormTextInput = function (props) {
                     trimmedValue = value.trim();
                     if (initValue === trimmedValue)
                         return [2 /*return*/, true];
-                    if (!formProps.onSave) return [3 /*break*/, 2];
-                    return [4 /*yield*/, formProps.onSave(selectedRows, trimmedValue)];
+                    if (!props.onSave) return [3 /*break*/, 2];
+                    return [4 /*yield*/, props.onSave(selectedRows, trimmedValue)];
                 case 1: return [2 /*return*/, _a.sent()];
                 case 2:
                     field = props.field;
@@ -3251,21 +3301,19 @@ var GridFormTextInput = function (props) {
                     return [2 /*return*/, true];
             }
         });
-    }); }, [invalid, value, initValue, formProps, props.field]);
-    var _c = useGridPopoverHook(props, save), popoverWrapper = _c.popoverWrapper, triggerSave = _c.triggerSave;
-    return popoverWrapper(jsxRuntime.jsx("div", __assign({ style: { display: "flex", flexDirection: "row", width: (_a = formProps.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: formProps.units, inputProps: {
+    }); }, [invalid, value, initValue, props]);
+    var _c = useGridPopoverHook({ 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, inputProps: {
                 style: { width: "100%" },
-                placeholder: formProps.placeholder,
+                placeholder: props.placeholder,
                 onKeyDown: function (e) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
                     return [2 /*return*/, e.key === "Enter" && triggerSave().then()];
                 }); }); }
             } }) })));
 };
 
-var GridPopoverTextInput = function (colDef) {
-    return GridCell(__assign(__assign({ maxWidth: 140 }, colDef), ((colDef === null || colDef === void 0 ? void 0 : colDef.cellEditorParams) && {
-        cellEditorParams: __assign(__assign({ width: 240 }, colDef.cellEditorParams), { form: GridFormTextInput })
-    })));
+var GridPopoverTextInput = function (colDef, params) {
+    return GridCell(__assign({ maxWidth: 140 }, colDef), __assign({ editor: GridFormTextInput }, params));
 };
 
 var GridSubComponentTextArea = function (props) {
@@ -3280,7 +3328,6 @@ exports.ComponentLoadingWrapper = ComponentLoadingWrapper;
 exports.ControlledMenu = ControlledMenu;
 exports.FocusableItem = FocusableItem;
 exports.GenericCellEditorComponent = GenericCellEditorComponent;
-exports.GenericCellEditorComponentFr = GenericCellEditorComponentFr;
 exports.GenericMultiEditCellClass = GenericMultiEditCellClass;
 exports.Grid = Grid;
 exports.GridCell = GridCell;
@@ -3308,18 +3355,23 @@ exports.GridPopoverTextInput = GridPopoverTextInput;
 exports.GridRenderPopoutMenuCell = GridRenderPopoutMenuCell;
 exports.GridRendererGenericCell = GridRendererGenericCell;
 exports.GridSubComponentTextArea = GridSubComponentTextArea;
+exports.GridUpdatingContext = GridUpdatingContext;
+exports.GridUpdatingContextProvider = GridUpdatingContextProvider;
 exports.Menu = Menu;
 exports.MenuButton = MenuButton;
 exports.MenuDivider = MenuDivider;
 exports.MenuGroup = MenuGroup;
 exports.MenuHeader = MenuHeader;
+exports.MenuHeaderItem = MenuHeaderItem;
+exports.MenuHeaderString = MenuHeaderString;
 exports.MenuItem = MenuItem;
 exports.MenuRadioGroup = MenuRadioGroup;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuSeparatorString = MenuSeparatorString;
+exports.PopoutMenuSeparator = PopoutMenuSeparator;
 exports.SubMenu = SubMenu;
 exports.TextAreaInput = TextAreaInput;
 exports.TextInputFormatted = TextInputFormatted;
-exports.UpdatingContext = UpdatingContext;
-exports.UpdatingContextProvider = UpdatingContextProvider;
 exports.bearingCorrectionValueFormatter = bearingCorrectionValueFormatter;
 exports.bearingNumberParser = bearingNumberParser;
 exports.bearingStringValidator = bearingStringValidator;