@linzjs/step-ag-grid 14.3.2 → 14.4.0

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnApi, GridApi, RowNode } from "ag-grid-community";
+import { ColDef, ColumnApi, GridApi, RowNode } from "ag-grid-community";
 import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { ColDefT, GridBaseRow } from "../components";
 export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: RowNode) => boolean;
@@ -13,6 +13,8 @@ export type AutoSizeColumnsResult = {
 } | null;
 export interface GridContextType<RowType extends GridBaseRow> {
     gridReady: boolean;
+    getColDef: (colId?: string) => ColDef | undefined;
+    getColumns: () => ColDefT<RowType>[];
     setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
     prePopupOps: () => void;
     setQuickFilter: (quickFilter: string) => void;
@@ -34,6 +36,10 @@ export interface GridContextType<RowType extends GridBaseRow> {
     autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
     sizeColumnsToFit: () => void;
     cancelEdit: () => void;
+    startCellEditing: ({ rowId, colId }: {
+        rowId: number;
+        colId: string;
+    }) => void;
     stopEditing: () => void;
     updatingCells: (props: {
         selectedRows: GridBaseRow[];
@@ -47,7 +53,6 @@ export interface GridContextType<RowType extends GridBaseRow> {
     removeExternalFilter: (filter: GridFilterExternal<RowType>) => void;
     isExternalFilterPresent: () => boolean;
     doesExternalFilterPass: (node: RowNode) => boolean;
-    getColumns: () => ColDefT<RowType>[];
     invisibleColumnIds: string[];
     setInvisibleColumnIds: (colIds: string[]) => void;
     downloadCsv: (csvExportParams?: CsvExportParams) => void;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export type GridUpdatingContextType = {
     checkUpdating: (fields: string | string[], id: number | string) => boolean;
-    isUpdating: () => boolean;
     modifyUpdating: (fields: string | string[], ids: (number | string)[], fn: () => void | Promise<void>) => Promise<void>;
     updatedDep: number;
+    updatingCols: () => string[];
 };
 export declare const GridUpdatingContext: import("react").Context<GridUpdatingContextType>;

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

@@ -123,6 +123,10 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
 
 var GridContext = createContext({
     gridReady: false,
+    getColDef: function () {
+        console.error("no context provider for getColDef");
+        return undefined;
+    },
     getColumns: function () {
         console.error("no context provider for getColumns");
         return [];
@@ -216,6 +220,9 @@ var GridContext = createContext({
     cancelEdit: function () {
         console.error("no context provider for cancelEdit");
     },
+    startCellEditing: function () {
+        console.error("no context provider for startCellEditing");
+    },
     stopEditing: function () {
         console.error("no context provider for stopEditing");
     },
@@ -265,9 +272,9 @@ var GridUpdatingContext = createContext({
         console.error("Missing GridUpdatingContext");
         return false;
     },
-    isUpdating: function () {
+    updatingCols: function () {
         console.error("Missing GridUpdatingContext");
-        return false;
+        return [];
     },
     modifyUpdating: function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -714,8 +721,9 @@ var GridHeaderSelect = function (_a) {
 var Grid = function (_a) {
     var _b, _c, _d;
     var dataTestId = _a["data-testid"], _e = _a.rowSelection, rowSelection = _e === void 0 ? "multiple" : _e, _f = _a.suppressColumnVirtualization, suppressColumnVirtualization = _f === void 0 ? true : _f, _g = _a.theme, theme = _g === void 0 ? "ag-theme-alpine" : _g, _h = _a.sizeColumns, sizeColumns = _h === void 0 ? "auto" : _h, _j = _a.selectColumnPinned, selectColumnPinned = _j === void 0 ? null : _j, params = __rest(_a, ["data-testid", "rowSelection", "suppressColumnVirtualization", "theme", "sizeColumns", "selectColumnPinned"]);
-    var _k = useContext(GridContext), gridReady = _k.gridReady, setApis = _k.setApis, prePopupOps = _k.prePopupOps, ensureRowVisible = _k.ensureRowVisible, getFirstRowId = _k.getFirstRowId, selectRowsById = _k.selectRowsById, focusByRowById = _k.focusByRowById, ensureSelectedRowIsVisible = _k.ensureSelectedRowIsVisible, autoSizeColumns = _k.autoSizeColumns, sizeColumnsToFit = _k.sizeColumnsToFit, externallySelectedItemsAreInSync = _k.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _k.setExternallySelectedItemsAreInSync, isExternalFilterPresent = _k.isExternalFilterPresent, doesExternalFilterPass = _k.doesExternalFilterPass, setOnCellEditingComplete = _k.setOnCellEditingComplete;
-    var _l = useContext(GridUpdatingContext), checkUpdating = _l.checkUpdating, updatedDep = _l.updatedDep, isUpdating = _l.isUpdating;
+    var _k = useContext(GridContext), gridReady = _k.gridReady, setApis = _k.setApis, ensureRowVisible = _k.ensureRowVisible, getFirstRowId = _k.getFirstRowId, selectRowsById = _k.selectRowsById, focusByRowById = _k.focusByRowById, ensureSelectedRowIsVisible = _k.ensureSelectedRowIsVisible, autoSizeColumns = _k.autoSizeColumns, sizeColumnsToFit = _k.sizeColumnsToFit, externallySelectedItemsAreInSync = _k.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _k.setExternallySelectedItemsAreInSync, isExternalFilterPresent = _k.isExternalFilterPresent, doesExternalFilterPass = _k.doesExternalFilterPass, setOnCellEditingComplete = _k.setOnCellEditingComplete, getColDef = _k.getColDef;
+    var _l = useContext(GridUpdatingContext), updatedDep = _l.updatedDep, updatingCols = _l.updatingCols;
+    var gridContext = useContext(GridContext);
     var gridDivRef = useRef(null);
     var lastSelectedIds = useRef([]);
     var _m = useState(false), staleGrid = _m[0], setStaleGrid = _m[1];
@@ -944,12 +952,12 @@ var Grid = function (_a) {
             return;
         lastUpdatedDep.current = updatedDep;
         // Don't update while there are spinners
-        if (isUpdating())
+        if (!isEmpty(updatingCols()))
             return;
         var skipHeader = sizeColumns === "auto-skip-headers";
         autoSizeColumns({ skipHeader: skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
         colIdsEdited.current.clear();
-    }, [autoSizeColumns, isUpdating, (_c = params.rowData) === null || _c === void 0 ? void 0 : _c.length, setInitialContentSize, sizeColumns, updatedDep]);
+    }, [autoSizeColumns, (_c = params.rowData) === null || _c === void 0 ? void 0 : _c.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
     /**
      * Show/hide no rows overlay when model changes.
      */
@@ -981,22 +989,12 @@ var Grid = function (_a) {
      * Make sure node is selected for editing and start edit
      */
     var startCellEditing = useCallback(function (event) {
-        var _a;
-        prePopupOps();
-        if (!event.node.isSelected()) {
-            event.node.setSelected(true, true);
-        }
-        // Cell already being edited, so don't re-edit until finished
-        if (checkUpdating([(_a = event.colDef.field) !== null && _a !== void 0 ? _a : ""], event.data.id)) {
-            return;
-        }
-        if (event.rowIndex !== null) {
-            event.api.startEditingCell({
-                rowIndex: event.rowIndex,
-                colKey: event.column.getColId()
+        event.data.id &&
+            gridContext.startCellEditing({
+                rowId: event.data.id,
+                colId: event.column.getColId()
             });
-        }
-    }, [checkUpdating, prePopupOps]);
+    }, [gridContext]);
     /**
      * Handle double click edit
      */
@@ -1050,42 +1048,40 @@ var Grid = function (_a) {
      * Set of colIds that need auto-sizing.
      */
     var colIdsEdited = useRef(new Set());
+    var lastUpdatedDep = useRef(updatedDep);
     /**
-     * When cell editing has completed tag the colId as needing auto-sizing
+     * When cell editing has completed the colId as needing auto-sizing
      */
-    var onCellEditingStopped = useCallback(function (e) {
-        var skipHeader = sizeColumns === "auto-skip-headers";
-        if (sizeColumns === "auto" || skipHeader) {
-            // This may be wrong as the cell update hasn't completed?
-            var colId = e.colDef.colId;
-            if (colId && !e.colDef.flex) {
-                // This auto-sizes based on updatingContext completing
-                colIdsEdited.current.add(colId);
-                // This auto-sizes immediately in case it was an in place update
-                !isUpdating() &&
+    useEffect(function () {
+        if (lastUpdatedDep.current === updatedDep)
+            return;
+        lastUpdatedDep.current = updatedDep;
+        var colIds = updatingCols();
+        // Updating possibly completed
+        if (isEmpty(colIds)) {
+            // Columns to resize?
+            if (!isEmpty(colIdsEdited.current)) {
+                var skipHeader = sizeColumns === "auto-skip-headers";
+                if (sizeColumns === "auto" || skipHeader) {
                     autoSizeColumns({
                         skipHeader: skipHeader,
                         userSizedColIds: userSizedColIds.current,
-                        colIds: [colId]
+                        colIds: colIdsEdited.current
                     });
+                }
+                colIdsEdited.current.clear();
             }
         }
-    }, [autoSizeColumns, isUpdating, sizeColumns]);
-    var lastUpdatedDep = useRef(updatedDep);
-    /**
-     * If columns are edited, wait for the updating context to complete then auto-size them.
-     */
-    useEffect(function () {
-        if (lastUpdatedDep.current === updatedDep || isEmpty(colIdsEdited.current))
-            return;
-        lastUpdatedDep.current = updatedDep;
-        // Don't update while there are spinners
-        if (isUpdating())
-            return;
-        var skipHeader = sizeColumns === "auto-skip-headers";
-        autoSizeColumns({ skipHeader: skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
-        colIdsEdited.current.clear();
-    }, [autoSizeColumns, updatedDep, sizeColumns, isUpdating]);
+        else {
+            // Updates not complete, add them to a list of columns needing resize
+            colIds.forEach(function (colId) {
+                var _a;
+                if (colId && !((_a = getColDef(colId)) === null || _a === void 0 ? void 0 : _a.flex)) {
+                    colIdsEdited.current.add(colId);
+                }
+            });
+        }
+    }, [autoSizeColumns, getColDef, sizeColumns, updatedDep, updatingCols]);
     /**
      * Resize columns to fit if required on window/container resize
      */
@@ -1118,7 +1114,7 @@ var Grid = function (_a) {
     setOnCellEditingComplete(params.onCellEditingComplete);
     return (jsx("div", __assign({ "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: jsx("div", __assign({ style: { flex: 1 }, ref: gridDivRef }, { children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: function () {
                     setInitialContentSize();
-                }, onRowDataChanged: onRowDataChanged, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onCellEditingStopped: onCellEditingStopped, onColumnResized: onColumnResized, defaultColDef: __assign({ minWidth: 48 }, omit(params.defaultColDef, ["editable"])), columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: {
+                }, onRowDataChanged: onRowDataChanged, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: __assign({ minWidth: 48 }, omit(params.defaultColDef, ["editable"])), columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: {
                     rowData: params.rowData,
                     noRowsOverlayText: params.noRowsOverlayText
                 }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_d = params.postSortRows) !== null && _d !== void 0 ? _d : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true }) })) })));
@@ -4645,16 +4641,16 @@ var GridWrapper = function (_a) {
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
 var GridContextProvider = function (props) {
-    var modifyUpdating = useContext(GridUpdatingContext).modifyUpdating;
-    var _a = useState(), gridApi = _a[0], setGridApi = _a[1];
-    var _b = useState(), columnApi = _b[0], setColumnApi = _b[1];
-    var _c = useState(false), gridReady = _c[0], setGridReady = _c[1];
-    var _d = useState(""), quickFilter = _d[0], setQuickFilter = _d[1];
-    var _e = useState([]), invisibleColumnIds = _e[0], setInvisibleColumnIds = _e[1];
+    var _a = useContext(GridUpdatingContext), modifyUpdating = _a.modifyUpdating, checkUpdating = _a.checkUpdating;
+    var _b = useState(), gridApi = _b[0], setGridApi = _b[1];
+    var _c = useState(), columnApi = _c[0], setColumnApi = _c[1];
+    var _d = useState(false), gridReady = _d[0], setGridReady = _d[1];
+    var _e = useState(""), quickFilter = _e[0], setQuickFilter = _e[1];
+    var _f = useState([]), invisibleColumnIds = _f[0], setInvisibleColumnIds = _f[1];
     var testId = useRef();
     var idsBeforeUpdate = useRef([]);
     var prePopupFocusedCell = useRef();
-    var _f = useState(false), externallySelectedItemsAreInSync = _f[0], setExternallySelectedItemsAreInSync = _f[1];
+    var _g = useState(false), externallySelectedItemsAreInSync = _g[0], setExternallySelectedItemsAreInSync = _g[1];
     var externalFilters = useRef([]);
     /**
      * Set quick filter directly on grid, based on previously save quickFilter state.
@@ -4939,6 +4935,43 @@ var GridContextProvider = function (props) {
         }
         gridApi.stopEditing();
     }, [gridApi]);
+    var startCellEditing = useCallback(function (_a) {
+        var rowId = _a.rowId, colId = _a.colId;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var colDef, rowNode, rowIndex, focusAndEdit;
+            var _b;
+            return __generator(this, function (_c) {
+                if (!gridApi)
+                    return [2 /*return*/];
+                colDef = gridApi.getColumnDef(colId);
+                if (!colDef)
+                    return [2 /*return*/];
+                // Cell already being edited, so don't re-edit until finished
+                if (checkUpdating([(_b = colDef.field) !== null && _b !== void 0 ? _b : ""], rowId)) {
+                    return [2 /*return*/];
+                }
+                rowNode = gridApi.getRowNode("".concat(rowId));
+                if (!rowNode) {
+                    return [2 /*return*/];
+                }
+                if (!rowNode.isSelected()) {
+                    rowNode.setSelected(true, true);
+                }
+                prePopupOps();
+                rowIndex = rowNode.rowIndex;
+                if (rowIndex != null) {
+                    focusAndEdit = function () {
+                        gridApi.startEditingCell({
+                            rowIndex: rowIndex,
+                            colKey: colId
+                        });
+                    };
+                    defer$1(focusAndEdit);
+                }
+                return [2 /*return*/];
+            });
+        });
+    }, [checkUpdating, gridApi, prePopupOps]);
     /**
      * This differs from stopEdit in that it will also invoke cellEditingCompleteCallback
      */
@@ -5101,6 +5134,7 @@ var GridContextProvider = function (props) {
     var doesExternalFilterPass = function (node) {
         return externalFilters.current.every(function (filter) { return filter(node.data, node); });
     };
+    var getColDef = useCallback(function (colId) { return (!!colId && (gridApi === null || gridApi === void 0 ? void 0 : gridApi.getColumnDef(colId))) || undefined; }, [gridApi]);
     var getColumns = useCallback(function () { var _a; return (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getColumnDefs()) !== null && _a !== void 0 ? _a : []; }, [gridApi]);
     useEffect(function () {
         if (columnApi) {
@@ -5123,6 +5157,7 @@ var GridContextProvider = function (props) {
         gridApi.exportDataAsCsv(__assign(__assign({ columnKeys: columnKeys, processCellCallback: downloadCsvUseValueFormattersProcessCellCallback }, csvExportParams), { fileName: fileName }));
     }, [columnApi, gridApi]);
     return (jsx(GridContext.Provider, __assign({ value: {
+            getColDef: getColDef,
             getColumns: getColumns,
             invisibleColumnIds: invisibleColumnIds,
             setInvisibleColumnIds: setInvisibleColumnIds,
@@ -5147,6 +5182,7 @@ var GridContextProvider = function (props) {
             ensureSelectedRowIsVisible: ensureSelectedRowIsVisible,
             sizeColumnsToFit: sizeColumnsToFit,
             autoSizeColumns: autoSizeColumns,
+            startCellEditing: startCellEditing,
             stopEditing: stopEditing,
             cancelEdit: cancelEdit,
             updatingCells: updatingCells,
@@ -5222,7 +5258,7 @@ var GridUpdatingContextProvider = function (props) {
         updating.current = mergedUpdatingBlocks;
         setUpdatedDep(function (updatedDep) { return updatedDep + 1; });
     };
-    var isUpdating = function () { return !isEmpty(updating.current); };
+    var updatingCols = function () { return Object.keys(updating.current); };
     var modifyUpdating = function (fields, ids, fn) { return __awaiter(void 0, void 0, void 0, function () {
         var idRef;
         return __generator(this, function (_a) {
@@ -5250,7 +5286,7 @@ var GridUpdatingContextProvider = function (props) {
     var checkUpdating = function (fields, id) {
         return castArray(fields).some(function (f) { var _a; return (_a = updating.current[f]) === null || _a === void 0 ? void 0 : _a.includes(id); });
     };
-    return (jsx(GridUpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating, isUpdating: isUpdating, updatedDep: updatedDep } }, { children: props.children })));
+    return (jsx(GridUpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating, updatingCols: updatingCols, updatedDep: updatedDep } }, { children: props.children })));
 };
 
 var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton-minimal.lui-button-lg.lui-button-icon-right{padding-right:38px}.ActionButton.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight) .LuiIcon{margin:0 4px}.ActionButton.ActionButton-tight.lui-button-lg.lui-button-icon-right .LuiIcon{margin:0}.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight){padding:8px 5px}.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right.ActionButton-tight{padding:0}.ActionButton-minimalArea{position:relative}.ActionButton-minimalAreaDisplay{position:absolute}.ActionButton-minimalAreaExpand{visibility:hidden}.ActionButton-inProgress.lui-button-lg.lui-button-icon-right{background-color:#e2f3f7;color:#007198;cursor:progress}.ActionButton-inProgress.lui-button-lg.lui-button-icon-right svg *{fill:#0000}.ActionButton-fill{justify-content:center;width:100%}";