@linzjs/step-ag-grid 7.12.0 → 7.13.1

package/dist/GridTheme.scss

@@ -74,10 +74,6 @@
     align-items: center;
   }
 
-  .ag-cell.ag-cell-inline-editing:not(.ag-cell-auto-height) {
-    bottom: 0;
-  }
-
   .ag-cell-wrap-text {
     word-break: break-word;
   }

package/dist/src/components/GridCell.d.ts

@@ -2,6 +2,7 @@
 import { GridBaseRow } from "./Grid";
 import { GenericCellColDef } from "./gridRender/GridRenderGenericCell";
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
+import { SuppressKeyboardEventParams } from "ag-grid-community/dist/lib/entities/colDef";
 export interface GenericCellEditorProps<E> {
     multiEdit?: boolean;
     editor?: (editorProps: E) => JSX.Element;
@@ -12,6 +13,7 @@ export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
     _?: RowType;
     editor?: (editorProps: any) => JSX.Element;
 }
+export declare const suppressCellKeyboardEvents: (e: SuppressKeyboardEventParams) => any;
 export declare const GridCell: <RowType extends GridBaseRow, Props extends CellEditorCommon>(props: GenericCellColDef<RowType>, custom?: {
     multiEdit?: boolean | undefined;
     editor?: ((editorProps: Props) => JSX.Element) | undefined;
@@ -20,6 +22,4 @@ export declare const GridCell: <RowType extends GridBaseRow, Props extends CellE
 export interface CellEditorCommon {
     className?: string | undefined;
 }
-export declare const GenericCellEditorComponentWrapper: (custom?: {
-    editor?: ((props: any) => JSX.Element) | undefined;
-} | undefined) => import("react").ForwardRefExoticComponent<ICellEditorParams & import("react").RefAttributes<unknown>>;
+export declare const GenericCellEditorComponentWrapper: (editor?: ((props: any) => JSX.Element) | undefined) => import("react").ForwardRefExoticComponent<ICellEditorParams & import("react").RefAttributes<unknown>>;

package/dist/src/components/GridCellMultiEditor.d.ts

@@ -0,0 +1,15 @@
+import { GridBaseRow } from "./Grid";
+import { GenericCellColDef } from "./gridRender/GridRenderGenericCell";
+import { CellEditorSelectorResult } from "ag-grid-community/dist/lib/entities/colDef";
+import { ColDefT } from "./GridCell";
+import { ComponentProps } from "react";
+import { ICellEditorParams } from "ag-grid-community/dist/lib/interfaces/iCellEditor";
+export declare const Editor: <FN extends (param: any) => JSX.Element>(props: {
+    multiEdit: boolean;
+    editor: FN;
+    editorParams: ComponentProps<FN>;
+}) => CellEditorSelectorResult;
+export interface RowCellEditorParams<RowType extends GridBaseRow> extends ICellEditorParams {
+    data: RowType;
+}
+export declare const GridCellMultiEditor: <RowType extends GridBaseRow>(props: GenericCellColDef<RowType>, cellEditorSelector: (params: RowCellEditorParams<RowType>) => CellEditorSelectorResult) => ColDefT<RowType>;

package/dist/src/components/gridForm/GridFormDropDown.d.ts

@@ -27,10 +27,10 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extend
     filtered?: "local" | "reload";
     filterPlaceholder?: string;
     filterHelpText?: string;
+    noOptionsMessage?: string;
     onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
     onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
-    options: SelectOption[] | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption[]> | SelectOption[]);
-    optionsRequestCancel?: () => void;
+    options: SelectOption[] | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined) | undefined;
 }
 export declare const GridFormDropDown: <RowType extends GridBaseRow>(props: GridFormPopoutDropDownProps<RowType>) => JSX.Element;
 export {};

package/dist/src/components/gridRender/GridRenderGenericCell.d.ts

@@ -2,12 +2,16 @@
 import { ICellRendererParams } from "ag-grid-community";
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
-import { SuppressKeyboardEventParams } from "ag-grid-community/dist/lib/entities/colDef";
+import { EditableCallbackParams, SuppressKeyboardEventParams } from "ag-grid-community/dist/lib/entities/colDef";
 export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
     data: RowType;
 }
+export interface RowEditableCallbackParams<RowType extends GridBaseRow> extends EditableCallbackParams {
+    data: RowType;
+}
 export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<RowType> {
     cellRendererParams?: GenericCellRendererParams<RowType>;
+    editable?: boolean | ((params: RowEditableCallbackParams<RowType>) => boolean);
 }
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {
     singleClickEdit?: boolean;

package/dist/src/contexts/GridContext.d.ts

@@ -14,6 +14,7 @@ export interface GridContextType {
     selectRowsByIdWithFlash: (rowIds?: number[]) => void;
     flashRows: (rowIds?: number[]) => void;
     flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
+    focusByRowById: (rowId: number) => void;
     ensureRowVisible: (id: number | string) => boolean;
     ensureSelectedRowIsVisible: () => void;
     sizeColumnsToFit: () => void;
@@ -23,6 +24,7 @@ export interface GridContextType {
         field?: string;
     }, fnUpdate: (selectedRows: any[]) => Promise<boolean>, setSaving?: (saving: boolean) => void, tabDirection?: 1 | 0 | -1) => Promise<boolean>;
     redrawRows: (rowNodes?: RowNode[]) => void;
+    externallySelectedItemsAreInSync: boolean;
     setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
     waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
 }

package/dist/src/index.d.ts

@@ -10,6 +10,7 @@ export * from "./contexts/GridSubComponentContext";
 export type { GridBaseRow } from "./components/Grid";
 export { Grid } from "./components/Grid";
 export * from "./components/GridCell";
+export * from "./components/GridCellMultiEditor";
 export { GridIcon } from "./components/GridIcon";
 export { ComponentLoadingWrapper } from "./components/ComponentLoadingWrapper";
 export { GridCellMultiSelectClassRules } from "./components/GridCellMultiSelectClassRules";
@@ -30,6 +31,10 @@ export { GridFormSubComponentTextInput } from "./components/gridForm/GridFormSub
 export * from "./components/gridForm/GridFormDropDown";
 export * from "./components/gridForm/GridFormMultiSelect";
 export * from "./components/gridForm/GridFormPopoverMenu";
+export * from "./components/gridForm/GridFormTextInput";
+export * from "./components/gridForm/GridFormTextArea";
+export * from "./components/gridForm/GridFormMessage";
+export * from "./components/gridForm/GridFormEditBearing";
 export { GridHeaderSelect } from "./components/gridHeader/GridHeaderSelect";
 export { TextAreaInput } from "./lui/TextAreaInput";
 export { TextInputFormatted } from "./lui/TextInputFormatted";

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

@@ -1957,6 +1957,7 @@ var MenuRadioGroup = forwardRef(MenuRadioGroupFr);
 
 var GridContext = createContext({
     gridReady: false,
+    externallySelectedItemsAreInSync: false,
     setGridApi: function () {
         console.error("no context provider for setGridApi");
     },
@@ -1998,6 +1999,12 @@ var GridContext = createContext({
             return [2 /*return*/];
         });
     }); },
+    focusByRowById: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.error("no context provider for focusByRowById");
+            return [2 /*return*/];
+        });
+    }); },
     ensureRowVisible: function () {
         console.error("no context provider for ensureRowVisible");
         return true;
@@ -2059,7 +2066,7 @@ var GridContextProvider = function (props) {
     var _a = useState(), gridApi = _a[0], _setGridApi = _a[1];
     var _b = useState(false), gridReady = _b[0], setGridReady = _b[1];
     var idsBeforeUpdate = useRef([]);
-    var externallySelectedItemsAreInSync = useRef(false);
+    var _c = useState(false), externallySelectedItemsAreInSync = _c[0], setExternallySelectedItemsAreInSync = _c[1];
     var setGridApi = useCallback(function (gridApi) {
         _setGridApi(gridApi);
         setGridReady(!!gridApi);
@@ -2224,6 +2231,7 @@ var GridContextProvider = function (props) {
             }
         });
     }); }, [_selectRowsWithOptionalFlash, beforeUpdate]);
+    var focusByRowById = useCallback(function (rowId) { return _selectRowsWithOptionalFlash([rowId], false, false); }, [_selectRowsWithOptionalFlash]);
     var getSelectedRows = useCallback(function () {
         return gridApiOp(function (gridApi) { return gridApi.getSelectedRows(); }, function () { return []; });
     }, [gridApiOp]);
@@ -2337,9 +2345,6 @@ var GridContextProvider = function (props) {
             gridApi.redrawRows(rowNodes ? { rowNodes: rowNodes } : undefined);
         });
     }, [gridApiOp]);
-    var setExternallySelectedItemsAreInSync = useCallback(function (inSync) {
-        externallySelectedItemsAreInSync.current = inSync;
-    }, []);
     var waitForExternallySelectedItemsToBeInSync = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         var i;
         return __generator(this, function (_a) {
@@ -2348,7 +2353,7 @@ var GridContextProvider = function (props) {
                     i = 0;
                     _a.label = 1;
                 case 1:
-                    if (!(i < 5000 / 200 && !externallySelectedItemsAreInSync.current)) return [3 /*break*/, 4];
+                    if (!(i < 5000 / 200 && !externallySelectedItemsAreInSync)) return [3 /*break*/, 4];
                     return [4 /*yield*/, wait$2(200)];
                 case 2:
                     _a.sent();
@@ -2359,7 +2364,7 @@ var GridContextProvider = function (props) {
                 case 4: return [2 /*return*/];
             }
         });
-    }); }, []);
+    }); }, [externallySelectedItemsAreInSync]);
     return (jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
             setGridApi: setGridApi,
@@ -2370,6 +2375,7 @@ var GridContextProvider = function (props) {
             selectRowsWithFlashDiff: selectRowsWithFlashDiff,
             flashRows: flashRows,
             flashRowsDiff: flashRowsDiff,
+            focusByRowById: focusByRowById,
             getSelectedRows: getSelectedRows,
             getSelectedRowIds: getSelectedRowIds,
             editingCells: editingCells,
@@ -2379,6 +2385,7 @@ var GridContextProvider = function (props) {
             stopEditing: stopEditing,
             updatingCells: updatingCells,
             redrawRows: redrawRows,
+            externallySelectedItemsAreInSync: externallySelectedItemsAreInSync,
             setExternallySelectedItemsAreInSync: setExternallySelectedItemsAreInSync,
             waitForExternallySelectedItemsToBeInSync: waitForExternallySelectedItemsToBeInSync
         } }, { children: props.children })));
@@ -2710,7 +2717,7 @@ var GridHeaderSelect = function (_a) {
  */
 var Grid = function (params) {
     var _a, _b, _c;
-    var _d = useContext(GridContext), gridReady = _d.gridReady, setGridApi = _d.setGridApi, setQuickFilter = _d.setQuickFilter, ensureRowVisible = _d.ensureRowVisible, selectRowsById = _d.selectRowsById, ensureSelectedRowIsVisible = _d.ensureSelectedRowIsVisible, sizeColumnsToFit = _d.sizeColumnsToFit, setExternallySelectedItemsAreInSync = _d.setExternallySelectedItemsAreInSync;
+    var _d = useContext(GridContext), gridReady = _d.gridReady, setGridApi = _d.setGridApi, setQuickFilter = _d.setQuickFilter, ensureRowVisible = _d.ensureRowVisible, selectRowsById = _d.selectRowsById, focusByRowById = _d.focusByRowById, ensureSelectedRowIsVisible = _d.ensureSelectedRowIsVisible, sizeColumnsToFit = _d.sizeColumnsToFit, externallySelectedItemsAreInSync = _d.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _d.setExternallySelectedItemsAreInSync;
     var checkUpdating = useContext(GridUpdatingContext).checkUpdating;
     var _e = useState(""), internalQuickFilter = _e[0], setInternalQuickFilter = _e[1];
     var lastSelectedIds = useRef([]);
@@ -2721,13 +2728,27 @@ var Grid = function (params) {
      */
     var hasSelectedFirstItem = useRef(false);
     useEffect(function () {
-        if (!gridReady || !params.autoSelectFirstRow || hasSelectedFirstItem.current || !params.rowData)
+        if (!gridReady || hasSelectedFirstItem.current || !params.rowData || !externallySelectedItemsAreInSync)
             return;
         hasSelectedFirstItem.current = true;
         if (isNotEmpty(params.rowData) && isEmpty(params.externalSelectedItems)) {
-            selectRowsById([params.rowData[0].id]);
+            var firstRowId = params.rowData[0].id;
+            if (params.autoSelectFirstRow) {
+                selectRowsById([firstRowId]);
+            }
+            else {
+                focusByRowById(firstRowId);
+            }
         }
-    }, [gridReady, params, params.autoSelectFirstRow, params.rowData, selectRowsById]);
+    }, [
+        externallySelectedItemsAreInSync,
+        focusByRowById,
+        gridReady,
+        params,
+        params.autoSelectFirstRow,
+        params.rowData,
+        selectRowsById,
+    ]);
     /**
      * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
      * This passes the event to the checkbox when you click anywhere in the cell.
@@ -2822,7 +2843,7 @@ var Grid = function (params) {
                     checkboxSelection: true,
                     headerComponent: GridHeaderSelect,
                     suppressHeaderKeyboardEvent: function (e) {
-                        if (e.event.key === "Enter" && !e.event.repeat) {
+                        if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
                             var selectedNodeCount = e.api.getSelectedRows().length;
                             if (selectedNodeCount == 0) {
                                 e.api.selectAllFiltered();
@@ -2915,12 +2936,18 @@ var Grid = function (params) {
 };
 
 var GridCellMultiSelectClassRules = {
-    "ag-selected-for-edit": function (_a) {
-        var api = _a.api, node = _a.node, colDef = _a.colDef;
-        return api
-            .getSelectedNodes()
-            .map(function (row) { return row.id; })
-            .includes(node.id) && api.getEditingCells().some(function (cell) { return cell.column.getColDef() === colDef; });
+    "ag-selected-for-edit": function (params) {
+        var _a;
+        var api = params.api, node = params.node, colDef = params.colDef;
+        var cep = colDef.cellEditorSelector
+            ? (_a = colDef.cellEditorSelector(params)) === null || _a === void 0 ? void 0 : _a.params
+            : colDef.cellEditorParams;
+        return ((cep === null || cep === void 0 ? void 0 : cep.multiEdit) &&
+            api
+                .getSelectedNodes()
+                .map(function (row) { return row.id; })
+                .includes(node.id) &&
+            api.getEditingCells().some(function (cell) { return cell.column.getColDef() === colDef; }));
     }
 };
 
@@ -2942,27 +2969,28 @@ var GridCellRenderer = function (props) {
     var infoText = infoFn ? infoFn(props) : undefined;
     return (jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_b = (_a = colDef.field) !== null && _a !== void 0 ? _a : colDef.colId) !== null && _b !== void 0 ? _b : "", props.data.id) }, { children: jsxs(Fragment$1, { children: [typeof warningText === "string" && jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsx(GridIcon, { icon: "ic_info", title: infoText }), jsx("div", __assign({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: ((_c = colDef === null || colDef === void 0 ? void 0 : colDef.cellRendererParams) === null || _c === void 0 ? void 0 : _c.originalCellRenderer) ? (jsx(colDef.cellRendererParams.originalCellRenderer, __assign({}, props))) : (jsx("span", __assign({ title: props.valueFormatted }, { children: props.valueFormatted }))) })), fnOrVar((_d = props.colDef) === null || _d === void 0 ? void 0 : _d.editable, props) && (rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.rightHoverElement) && (jsx("div", __assign({ style: { display: "flex", alignItems: "center" } }, { children: rendererParams === null || rendererParams === void 0 ? void 0 : rendererParams.rightHoverElement })))] }) })));
 };
+var suppressCellKeyboardEvents = function (e) {
+    var _a, _b, _c, _d;
+    var shortcutKeys = (_b = (_a = e.colDef.cellRendererParams) === null || _a === void 0 ? void 0 : _a.shortcutKeys) !== null && _b !== void 0 ? _b : {};
+    var exec = shortcutKeys[e.event.key];
+    if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
+        var editable = fnOrVar((_c = e.colDef) === null || _c === void 0 ? void 0 : _c.editable, e);
+        return editable ? (_d = exec(e)) !== null && _d !== void 0 ? _d : true : true;
+    }
+    // It's important that aggrid doesn't trigger edit on enter
+    // as the incorrect selected rows will be returned
+    return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " ", "Home", "End", "PageUp", "PageDown"].includes(e.event.key);
+};
 /*
  * All cells should use this
  */
 var GridCell = function (props, custom) {
     var _a;
     return __assign(__assign(__assign(__assign(__assign(__assign({ colId: props.field, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true }, ((custom === null || custom === void 0 ? void 0 : custom.editor) && {
-        cellClassRules: custom.multiEdit ? GridCellMultiSelectClassRules : undefined,
+        cellClassRules: GridCellMultiSelectClassRules,
         editable: (_a = props.editable) !== null && _a !== void 0 ? _a : true,
-        cellEditor: GenericCellEditorComponentWrapper(custom)
-    })), { suppressKeyboardEvent: function (e) {
-            var _a, _b, _c, _d;
-            var shortcutKeys = (_b = (_a = e.colDef.cellRendererParams) === null || _a === void 0 ? void 0 : _a.shortcutKeys) !== null && _b !== void 0 ? _b : {};
-            var exec = shortcutKeys[e.event.key];
-            if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
-                var editable = fnOrVar((_c = e.colDef) === null || _c === void 0 ? void 0 : _c.editable, e);
-                return editable ? (_d = exec(e)) !== null && _d !== void 0 ? _d : true : true;
-            }
-            // It's important that aggrid doesn't trigger edit on enter
-            // as the incorrect selected rows will be returned
-            return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " "].includes(e.event.key);
-        } }), ((custom === null || custom === void 0 ? void 0 : custom.editorParams) && {
+        cellEditor: GenericCellEditorComponentWrapper(custom === null || custom === void 0 ? void 0 : custom.editor)
+    })), { suppressKeyboardEvent: suppressCellKeyboardEvents }), ((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
@@ -2976,15 +3004,38 @@ var GridCell = function (props, custom) {
                 return JSON.stringify(params.value);
         } }), props), { cellRenderer: GridCellRenderer, cellRendererParams: __assign({ originalCellRenderer: props.cellRenderer }, props.cellRendererParams) });
 };
-var GenericCellEditorComponentWrapper = function (custom) {
+var GenericCellEditorComponentWrapper = function (editor) {
+    var obj = { editor: editor };
     return forwardRef(function GenericCellEditorComponentFr(cellEditorParams, _) {
         var valueFormatted = cellEditorParams.formatValue
             ? cellEditorParams.formatValue(cellEditorParams.value)
             : "Missing formatter";
-        return (jsxs(GridPopoverContextProvider, __assign({ props: cellEditorParams }, { children: [jsx(cellEditorParams.colDef.cellRenderer, __assign({}, cellEditorParams, { valueFormatted: valueFormatted }, cellEditorParams.colDef.cellRendererParams)), (custom === null || custom === void 0 ? void 0 : custom.editor) && jsx(custom.editor, __assign({}, cellEditorParams))] })));
+        return (jsxs(GridPopoverContextProvider, __assign({ props: cellEditorParams }, { children: [jsx(cellEditorParams.colDef.cellRenderer, __assign({}, cellEditorParams, { valueFormatted: valueFormatted }, cellEditorParams.colDef.cellRendererParams)), obj.editor && jsx(obj.editor, __assign({}, cellEditorParams))] })));
     });
 };
 
+var Editor = function (props) { return ({
+    component: GenericCellEditorComponentWrapper(props.editor),
+    params: __assign(__assign({}, props.editorParams), { multiEdit: props.multiEdit })
+}); };
+/*
+ * All cells should use this
+ */
+var GridCellMultiEditor = function (props, cellEditorSelector) {
+    var _a, _b;
+    return __assign(__assign({ colId: (_a = props.colId) !== null && _a !== void 0 ? _a : props.field, field: props.field, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true, editable: (_b = props.editable) !== null && _b !== void 0 ? _b : true, cellClassRules: GridCellMultiSelectClassRules, cellEditorSelector: cellEditorSelector, suppressKeyboardEvent: suppressCellKeyboardEvents, 
+        // Default value formatter, otherwise react freaks out on objects
+        valueFormatter: function (params) {
+            if (params.value == null)
+                return "–";
+            var types = ["number", "boolean", "string"];
+            if (types.includes(typeof params.value))
+                return "".concat(params.value);
+            else
+                return JSON.stringify(params.value);
+        } }, props), { cellRenderer: GridCellRenderer, cellRendererParams: __assign({ originalCellRenderer: props.cellRenderer }, props.cellRendererParams) });
+};
+
 /**
  * If loading is true this returns a loading spinner, otherwise it returns its children.
  */
@@ -3213,17 +3264,17 @@ 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, data = _a.data;
+    var _a;
+    var _b = useGridPopoverContext(), selectedRows = _b.selectedRows, field = _b.field, data = _b.data;
     // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
-    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 _c = useState(""), filter = _c[0], setFilter = _c[1];
+    var _d = useState(), filteredValues = _d[0], setFilteredValues = _d[1];
+    var _e = useState(null), options = _e[0], setOptions = _e[1];
     var subComponentIsValid = useRef(false);
     var subComponentInitialValue = useRef(null);
-    var _e = useState(null), subSelectedValue = _e[0], setSubSelectedValue = _e[1];
+    var _f = useState(null), subSelectedValue = _f[0], setSubSelectedValue = _f[1];
     // Note: null is assumed to be the filter
-    var _f = useState(null), selectedItem = _f[0], setSelectedItem = _f[1];
+    var _g = useState(null), selectedItem = _g[0], setSelectedItem = _g[1];
     var selectItemHandler = useCallback(function (value, subComponentValue) { return __awaiter(void 0, void 0, void 0, function () {
         var hasChanged;
         return __generator(this, function (_a) {
@@ -3246,11 +3297,9 @@ var GridFormDropDown = function (props) {
     }); }, [field, props, selectedRows]);
     // Load up options list if it's async function
     useEffect(function () {
-        var _a;
-        if (options || optionsInitialising.current)
+        if (options)
             return;
-        optionsInitialising.current = true;
-        var optionsConf = (_a = props.options) !== null && _a !== void 0 ? _a : [];
+        var optionsConf = props.options;
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var optionsList;
             return __generator(this, function (_a) {
@@ -3262,24 +3311,26 @@ var GridFormDropDown = function (props) {
                         optionsConf = _a.sent();
                         _a.label = 2;
                     case 2:
-                        optionsList = optionsConf === null || optionsConf === void 0 ? void 0 : optionsConf.map(function (item) {
-                            return item == null || typeof item == "string"
-                                ? {
-                                    value: item,
-                                    label: item,
-                                    disabled: false
-                                }
-                                : 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
-                            delay(function () { return setOptions(optionsList); }, 100);
-                        }
-                        else {
-                            setOptions(optionsList);
+                        if (optionsConf !== undefined) {
+                            optionsList = optionsConf === null || optionsConf === void 0 ? void 0 : optionsConf.map(function (item) {
+                                return item == null || typeof item == "string"
+                                    ? {
+                                        value: item,
+                                        label: item,
+                                        disabled: false
+                                    }
+                                    : 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
+                                setOptions(optionsList);
+                                //delay(() => setOptions(optionsList), 100);
+                            }
+                            else {
+                                setOptions(optionsList);
+                            }
                         }
-                        optionsInitialising.current = false;
                         return [2 /*return*/];
                 }
             });
@@ -3302,15 +3353,16 @@ var GridFormDropDown = function (props) {
                 .filter(function (r) { return r !== undefined; }));
         }
     }, [props.filtered, filter, options]);
-    var researchOnFilterChange = dist$1(useCallback(function () {
-        setOptions(null);
-    }, []), 500);
+    var researchOnFilterChange = useMemo(function () {
+        return dist$1(function () {
+            setOptions(null);
+        }, 500);
+    }, []);
     var previousFilter = useRef(filter);
     // Reload filtering.
     useEffect(function () {
         if (previousFilter.current != filter && props.filtered == "reload") {
             previousFilter.current = filter;
-            props.optionsRequestCancel && props.optionsRequestCancel();
             researchOnFilterChange().then();
         }
     }, [filter, props, researchOnFilterChange]);
@@ -3362,7 +3414,7 @@ var GridFormDropDown = function (props) {
                             var ref = _a.ref;
                             return (jsxs("div", __assign({ style: { display: "flex", flexDirection: "column", width: "100%" } }, { children: [jsx("input", { className: "LuiTextInput-input", ref: ref, type: "text", placeholder: (_b = props.filterPlaceholder) !== null && _b !== void 0 ? _b : "Placeholder", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, "data-allowtabtosave": true, "data-disableenterautosave": !props.onSelectFilter &&
                                             !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: function (e) { return setFilter(e.target.value); } }), props.filterHelpText && isNotEmpty(filter) && (jsx(FormError, { error: null, helpText: props.filterHelpText }))] })));
-                        } })), jsx(MenuDivider, {}, "$$divider_filter")] }))), jsx(ComponentLoadingWrapper, __assign({ loading: !options, className: "GridFormDropDown-options" }, { children: jsxs(Fragment$1, { children: [options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (jsx(MenuItem, __assign({ className: "GridPopoverEditDropDown-noOptions" }, { children: "No Options" }), "".concat(fieldToString(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 && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (jsx(MenuItem, __assign({ className: "GridPopoverEditDropDown-noOptions" }, { children: (_a = props.noOptionsMessage) !== null && _a !== void 0 ? _a : "No Options" }), "".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 || filteredValues.includes(item)) && (jsxs("div", { children: [jsxs(MenuItem, __assign({ disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onFocus: function () {
                                             setSelectedItem(item);
@@ -24743,5 +24795,5 @@ var clickActionButton = function (text, container) { return __awaiter(void 0, vo
     });
 }); };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponentWrapper, Grid, GridCell, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, clickActionButton, clickMenuOption, clickMultiSelectOption, closeMenu, convertDDToDMS, countRows, deselectRow, editCell, findActionButton, findCell, findCellContains, findMenuOption, findMultiSelectOption, findParentWithClass, findRow, fnOrVar, getMultiSelectOptions, hasParentClass, isFloat, isNotEmpty, openAndClickMenuOption, queryMenuOption, queryRow, selectCell, selectRow, stringByteLengthIsInvalid, typeOtherInput, typeOtherTextArea, useDeferredPromise, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait$2 as wait };
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, GenericCellEditorComponentWrapper, Grid, GridCell, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, clickActionButton, clickMenuOption, clickMultiSelectOption, closeMenu, convertDDToDMS, countRows, deselectRow, editCell, findActionButton, findCell, findCellContains, findMenuOption, findMultiSelectOption, findParentWithClass, findRow, fnOrVar, getMultiSelectOptions, hasParentClass, isFloat, isNotEmpty, openAndClickMenuOption, queryMenuOption, queryRow, selectCell, selectRow, stringByteLengthIsInvalid, suppressCellKeyboardEvents, typeOtherInput, typeOtherTextArea, useDeferredPromise, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait$2 as wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map