@linzjs/step-ag-grid 7.11.13 → 7.13.0

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/index.js

@@ -1978,6 +1978,7 @@ var MenuRadioGroup = React.forwardRef(MenuRadioGroupFr);
 
 var GridContext = React.createContext({
     gridReady: false,
+    externallySelectedItemsAreInSync: false,
     setGridApi: function () {
         console.error("no context provider for setGridApi");
     },
@@ -2019,6 +2020,12 @@ var GridContext = React.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;
@@ -2080,7 +2087,7 @@ var GridContextProvider = function (props) {
     var _a = React.useState(), gridApi = _a[0], _setGridApi = _a[1];
     var _b = React.useState(false), gridReady = _b[0], setGridReady = _b[1];
     var idsBeforeUpdate = React.useRef([]);
-    var externallySelectedItemsAreInSync = React.useRef(false);
+    var _c = React.useState(false), externallySelectedItemsAreInSync = _c[0], setExternallySelectedItemsAreInSync = _c[1];
     var setGridApi = React.useCallback(function (gridApi) {
         _setGridApi(gridApi);
         setGridReady(!!gridApi);
@@ -2245,6 +2252,7 @@ var GridContextProvider = function (props) {
             }
         });
     }); }, [_selectRowsWithOptionalFlash, beforeUpdate]);
+    var focusByRowById = React.useCallback(function (rowId) { return _selectRowsWithOptionalFlash([rowId], false, false); }, [_selectRowsWithOptionalFlash]);
     var getSelectedRows = React.useCallback(function () {
         return gridApiOp(function (gridApi) { return gridApi.getSelectedRows(); }, function () { return []; });
     }, [gridApiOp]);
@@ -2358,9 +2366,6 @@ var GridContextProvider = function (props) {
             gridApi.redrawRows(rowNodes ? { rowNodes: rowNodes } : undefined);
         });
     }, [gridApiOp]);
-    var setExternallySelectedItemsAreInSync = React.useCallback(function (inSync) {
-        externallySelectedItemsAreInSync.current = inSync;
-    }, []);
     var waitForExternallySelectedItemsToBeInSync = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         var i;
         return __generator(this, function (_a) {
@@ -2369,7 +2374,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();
@@ -2380,7 +2385,7 @@ var GridContextProvider = function (props) {
                 case 4: return [2 /*return*/];
             }
         });
-    }); }, []);
+    }); }, [externallySelectedItemsAreInSync]);
     return (jsxRuntime.jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
             setGridApi: setGridApi,
@@ -2391,6 +2396,7 @@ var GridContextProvider = function (props) {
             selectRowsWithFlashDiff: selectRowsWithFlashDiff,
             flashRows: flashRows,
             flashRowsDiff: flashRowsDiff,
+            focusByRowById: focusByRowById,
             getSelectedRows: getSelectedRows,
             getSelectedRowIds: getSelectedRowIds,
             editingCells: editingCells,
@@ -2400,6 +2406,7 @@ var GridContextProvider = function (props) {
             stopEditing: stopEditing,
             updatingCells: updatingCells,
             redrawRows: redrawRows,
+            externallySelectedItemsAreInSync: externallySelectedItemsAreInSync,
             setExternallySelectedItemsAreInSync: setExternallySelectedItemsAreInSync,
             waitForExternallySelectedItemsToBeInSync: waitForExternallySelectedItemsToBeInSync
         } }, { children: props.children })));
@@ -2731,7 +2738,7 @@ var GridHeaderSelect = function (_a) {
  */
 var Grid = function (params) {
     var _a, _b, _c;
-    var _d = React.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 = React.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 = React.useContext(GridUpdatingContext).checkUpdating;
     var _e = React.useState(""), internalQuickFilter = _e[0], setInternalQuickFilter = _e[1];
     var lastSelectedIds = React.useRef([]);
@@ -2742,13 +2749,27 @@ var Grid = function (params) {
      */
     var hasSelectedFirstItem = React.useRef(false);
     React.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) && lodashEs.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.
@@ -2843,7 +2864,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();
@@ -2932,16 +2953,22 @@ var Grid = function (params) {
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
     return (jsxRuntime.jsxs("div", __assign({ "data-testid": params["data-testid"], className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { 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, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, defaultColDef: params.defaultColDef, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: (_b = params.rowSelection) !== null && _b !== void 0 ? _b : "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_c = params.postSortRows) !== null && _c !== void 0 ? _c : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
+                    } }) }))), jsxRuntime.jsx(agGridReact.AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, defaultColDef: params.defaultColDef, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: (_b = params.rowSelection) !== null && _b !== void 0 ? _b : "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_c = params.postSortRows) !== null && _c !== void 0 ? _c : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved })] })));
 };
 
 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; }));
     }
 };
 
@@ -2963,27 +2990,28 @@ var GridCellRenderer = function (props) {
     var infoText = infoFn ? infoFn(props) : undefined;
     return (jsxRuntime.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: 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("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) ? (jsxRuntime.jsx(colDef.cellRendererParams.originalCellRenderer, __assign({}, props))) : (jsxRuntime.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) && (jsxRuntime.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
@@ -2997,12 +3025,13 @@ 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 React.forwardRef(function GenericCellEditorComponentFr(cellEditorParams, _) {
         var valueFormatted = cellEditorParams.formatValue
             ? cellEditorParams.formatValue(cellEditorParams.value)
             : "Missing formatter";
-        return (jsxRuntime.jsxs(GridPopoverContextProvider, __assign({ props: cellEditorParams }, { children: [jsxRuntime.jsx(cellEditorParams.colDef.cellRenderer, __assign({}, cellEditorParams, { valueFormatted: valueFormatted }, cellEditorParams.colDef.cellRendererParams)), (custom === null || custom === void 0 ? void 0 : custom.editor) && jsxRuntime.jsx(custom.editor, __assign({}, cellEditorParams))] })));
+        return (jsxRuntime.jsxs(GridPopoverContextProvider, __assign({ props: cellEditorParams }, { children: [jsxRuntime.jsx(cellEditorParams.colDef.cellRenderer, __assign({}, cellEditorParams, { valueFormatted: valueFormatted }, cellEditorParams.colDef.cellRendererParams)), obj.editor && jsxRuntime.jsx(obj.editor, __assign({}, cellEditorParams))] })));
     });
 };
 
@@ -24842,6 +24871,7 @@ exports.queryRow = queryRow;
 exports.selectCell = selectCell;
 exports.selectRow = selectRow;
 exports.stringByteLengthIsInvalid = stringByteLengthIsInvalid;
+exports.suppressCellKeyboardEvents = suppressCellKeyboardEvents;
 exports.typeOtherInput = typeOtherInput;
 exports.typeOtherTextArea = typeOtherTextArea;
 exports.useDeferredPromise = useDeferredPromise;