@linzjs/step-ag-grid 2.4.3 → 2.4.4

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { GridApi } from "ag-grid-community";
+import { GridApi, RowNode } from "ag-grid-community";
 import { GridBaseRow } from "../components/Grid";
 export interface GridContextType {
     gridReady: () => boolean;
@@ -22,5 +22,6 @@ export interface GridContextType {
         selectedRows: GridBaseRow[];
         field?: string;
     }, fnUpdate: (selectedRows: any[]) => Promise<boolean>, setSaving?: (saving: boolean) => void) => Promise<boolean>;
+    redrawRows: (rowNodes?: RowNode[]) => void;
 }
 export declare const GridContext: import("react").Context<GridContextType>;

package/dist/src/lui/ActionButton.d.ts

@@ -1,15 +1,18 @@
 /// <reference types="react" />
 import "./ActionButton.scss";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
 export interface ActionButtonProps {
     icon: IconName;
-    name: string;
+    name?: string;
+    "aria-label"?: string;
     inProgressName?: string;
     title?: string;
     dataTestId?: string;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
     className?: string;
-    onAction: () => Promise<void>;
+    onAction: () => Promise<void> | void;
     externalSetInProgress?: () => void;
+    level?: LuiButtonProps["level"];
 }
-export declare const ActionButton: ({ icon, name, inProgressName, dataTestId, className, title, onAction, externalSetInProgress, size, }: ActionButtonProps) => JSX.Element;
+export declare const ActionButton: ({ icon, name, inProgressName, dataTestId, className, title, onAction, externalSetInProgress, size, level, "aria-label": ariaLabel, }: ActionButtonProps) => JSX.Element;

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

@@ -1866,7 +1866,10 @@ var GridContext = createContext({
             console.error("no context provider for modifyUpdating");
             return [2 /*return*/, false];
         });
-    }); }
+    }); },
+    redrawRows: function () {
+        console.error("no context provider for redrawRows");
+    }
 });
 
 /**
@@ -2120,6 +2123,11 @@ var GridContextProvider = function (props) {
             }
         });
     }); };
+    var redrawRows = function (rowNodes) {
+        gridApiOp(function (gridApi) {
+            gridApi.redrawRows(rowNodes ? { rowNodes: rowNodes } : undefined);
+        });
+    };
     return (jsx(GridContext.Provider, __assign({ value: {
             gridReady: gridReady,
             setGridApi: setGridApi,
@@ -2137,7 +2145,8 @@ var GridContextProvider = function (props) {
             ensureSelectedRowIsVisible: ensureSelectedRowIsVisible,
             sizeColumnsToFit: sizeColumnsToFit,
             stopEditing: stopEditing,
-            updatingCells: updatingCells
+            updatingCells: updatingCells,
+            redrawRows: redrawRows
         } }, { children: props.children })));
 };
 
@@ -2186,6 +2195,7 @@ function clsx () {
  */
 var usePostSortRowsHook = function (_a) {
     var setStaleGrid = _a.setStaleGrid;
+    var redrawRows = useContext(GridContext).redrawRows;
     // On first run we need to init the first backed up sort order
     var initialised = useRef(false);
     // Used to detect sort order has changed since last run
@@ -2201,14 +2211,20 @@ var usePostSortRowsHook = function (_a) {
     var previousQuickFilter = useRef("");
     return useCallback(function (_a) {
         var api = _a.api, columnApi = _a.columnApi, nodes = _a.nodes;
+        // Grid is destroyed
+        if (!api || !columnApi)
+            return;
         var previousRowSortIndex = previousRowSortIndexRef.current;
+        var hashNode = function (node) {
+            return node ? JSON.stringify(node.data) : "";
+        };
         var copyCurrentSortSettings = function () {
             return columnApi.getColumnState().map(function (row) { return ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }); });
         };
         var backupSortOrder = function () {
             for (var x in previousRowSortIndex)
                 delete previousRowSortIndex[x];
-            nodes.forEach(function (row, index) { return (previousRowSortIndex[row.data.id] = index); });
+            nodes.forEach(function (node, index) { return (previousRowSortIndex["".concat(node.data.id)] = { index: index, hash: hashNode(node) }); });
         };
         // Check if column is the first sorted column.  Note: column is preconfigured to sort its sortIndex is null not 1
         var isFirstSortColumn = function (row) { var _a; return row.sort && [0, null].includes((_a = row.sortIndex) !== null && _a !== void 0 ? _a : null); };
@@ -2216,19 +2232,11 @@ var usePostSortRowsHook = function (_a) {
             return col1 && col2 && col1.colId === col2.colId && col1.sort != col2.sort;
         };
         var restorePreviousSortColumnState = function () { return columnApi.applyColumnState({ state: previousColSort.current }); };
-        var hasNewRows = function () { return nodes.some(function (row) { return previousRowSortIndex[row.data.id] == null; }); };
-        var sortIsStale = function () {
-            // If there are new rows we want to them to be at the bottom of the grid, so we treat it as sort not stale
-            if (hasNewRows())
-                return false;
-            // Otherwise check if the stored sort index matches the new sort index
-            return nodes.some(function (node, index) { return previousRowSortIndex[node.data.id] != index; });
-        };
         var sortNodesByPreviousSort = function () {
-            return nodes.sort(function (a, b) {
-                var _a, _b;
-                return ((_a = previousRowSortIndex[a.data.id]) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER) -
-                    ((_b = previousRowSortIndex[b.data.id]) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER);
+            nodes.sort(function (a, b) {
+                var _a, _b, _c, _d;
+                return ((_b = (_a = previousRowSortIndex["".concat(a.data.id)]) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER) -
+                    ((_d = (_c = previousRowSortIndex["".concat(b.data.id)]) === null || _c === void 0 ? void 0 : _c.index) !== null && _d !== void 0 ? _d : Number.MAX_SAFE_INTEGER);
             });
         };
         // On first load copy the current sort
@@ -2243,6 +2251,9 @@ var usePostSortRowsHook = function (_a) {
             previousQuickFilter.current = quickFilter;
             sortOrderChanged = true;
         }
+        if (isEmpty(previousRowSortIndex)) {
+            backupSortOrder();
+        }
         if (sortOrderChanged) {
             var thisFirstCol = copyCurrentSortSettings().find(isFirstSortColumn);
             var previousFirstCol = previousColSort.current.find(isFirstSortColumn);
@@ -2273,22 +2284,72 @@ var usePostSortRowsHook = function (_a) {
             }
         }
         else {
-            if (sortIsStale()) {
+            var firstChangedNodeIndex = -1;
+            var lastNewNode = undefined;
+            var changedRowCount = 0;
+            var newRowCount = 0;
+            var index = 0;
+            for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
+                var node = nodes_1[_i];
+                var psr = previousRowSortIndex["".concat(node.data.id)];
+                if (psr) {
+                    if (psr.hash != hashNode(node)) {
+                        if (firstChangedNodeIndex === -1)
+                            firstChangedNodeIndex = index;
+                        changedRowCount++;
+                    }
+                }
+                else {
+                    lastNewNode = node;
+                    newRowCount++;
+                }
+                index++;
+            }
+            var wasStale = false;
+            if (changedRowCount === 0 && newRowCount === 1) {
+                // insert new row at end
+                var newIndex = index - 1;
+                previousRowSortIndex["".concat(lastNewNode === null || lastNewNode === void 0 ? void 0 : lastNewNode.data.id)] = { index: newIndex, hash: hashNode(lastNewNode) };
+                wasStale = true;
+            }
+            else if (changedRowCount === 2 && newRowCount === 0) {
+                // This must be a swap rows
+                backupSortOrder();
+                wasStale = false;
+            }
+            else if (changedRowCount > 1 && newRowCount === 1) {
+                // This must be a insert so, insert new row near the row that changed
+                previousRowSortIndex["".concat(lastNewNode === null || lastNewNode === void 0 ? void 0 : lastNewNode.data.id)] = {
+                    index: firstChangedNodeIndex + 0.5,
+                    hash: hashNode(lastNewNode)
+                };
+                wasStale = true;
+                // For some reason AgGrid mis-positions the inserted row.
+                lastNewNode && redrawRows();
+            }
+            else if (changedRowCount == 1 && newRowCount === 0) {
+                // User edited one row so, do nothing, retain sort
+                wasStale = true;
+            }
+            else if (changedRowCount !== 0 || newRowCount != 0) {
+                // too many rows changed, resort
+                backupSortOrder();
+            }
+            if (wasStale) {
+                // Check if the sort order the aggrid passed matches our stale sort order
+                var stillStale = Object.keys(previousRowSortIndex).length != nodes.length ||
+                    nodes.some(function (node, index) { var _a; return ((_a = previousRowSortIndex["".concat(node.data.id)]) === null || _a === void 0 ? void 0 : _a.index) !== index; });
                 // If we haven't already processed a stale sort then...
-                if (!sortWasStale.current) {
+                if (stillStale && !sortWasStale.current) {
                     // backup sort state, so we can restore it when sort is clicked on a stale column
                     previousColSort.current = copyCurrentSortSettings();
-                    backupSortOrder();
                     sortWasStale.current = true;
                     setStaleGrid(true);
                 }
-                sortNodesByPreviousSort();
             }
-            // secondary sort backup as there may be new nodes that didn't have their sort registered
-            // which would cause two new rows to sort out of sequence
-            backupSortOrder();
+            sortNodesByPreviousSort();
         }
-    }, [setStaleGrid]);
+    }, [redrawRows, setStaleGrid]);
 };
 
 /**
@@ -3795,38 +3856,44 @@ var useStateDeferred = function (initialValue) {
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
 var minimumInProgressTimeMs = 950;
 var ActionButton = function (_a) {
-    var _b;
-    var _c;
-    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, className = _a.className, title = _a.title, onAction = _a.onAction, externalSetInProgress = _a.externalSetInProgress, _d = _a.size, size = _d === void 0 ? "sm" : _d;
-    var _e = useState(false), inProgress = _e[0], setInProgress = _e[1];
+    var _b, _c, _d;
+    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, className = _a.className, title = _a.title, onAction = _a.onAction, externalSetInProgress = _a.externalSetInProgress, _e = _a.size, size = _e === void 0 ? "sm" : _e, _f = _a.level, level = _f === void 0 ? "tertiary" : _f, ariaLabel = _a["aria-label"];
+    var _g = useState(false), inProgress = _g[0], setInProgress = _g[1];
     var lastInProgress = usePrevious(inProgress !== null && inProgress !== void 0 ? inProgress : false);
-    var _f = useStateDeferred(inProgress), localInProgress = _f[0], setLocalInProgress = _f[1], setLocalInProgressDeferred = _f[2];
+    var _h = useStateDeferred(inProgress), localInProgress = _h[0], setLocalInProgress = _h[1], setLocalInProgressDeferred = _h[2];
     useEffect(function () {
         if (inProgress == lastInProgress)
             return;
         inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
     }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
-    return (jsxs(LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: "tertiary", title: title !== null && title !== void 0 ? title : name, "aria-label": name, className: clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress"), size: "lg", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+    return (jsxs(LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: level, title: (_b = title !== null && title !== void 0 ? title : ariaLabel) !== null && _b !== void 0 ? _b : name, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, className: clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress"), size: "lg", style: name == null ? { padding: "8px 5px" } : {}, onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+            var promise, isPromise;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        promise = onAction();
+                        isPromise = typeof promise !== "undefined";
+                        if (!isPromise) return [3 /*break*/, 3];
                         setInProgress(true);
                         externalSetInProgress && setInProgress(true);
-                        return [4 /*yield*/, onAction()];
+                        if (!isPromise) return [3 /*break*/, 2];
+                        return [4 /*yield*/, promise];
                     case 1:
                         _a.sent();
+                        _a.label = 2;
+                    case 2:
                         externalSetInProgress && setInProgress(false);
                         setInProgress(false);
-                        return [2 /*return*/];
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
                 }
             });
-        }); }, disabled: localInProgress }, { children: [localInProgress ? (jsx(LuiMiniSpinner, { size: 16, divProps: (_b = {
-                        "data-testid": "loading-spinner",
-                        style: { padding: 0, margin: 0, paddingRight: 8 },
-                        role: "status"
-                    },
-                    _b["aria-label"] = "Loading",
-                    _b) })) : (jsx(LuiIcon, { name: icon, alt: name, size: size })), jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_c = (localInProgress ? inProgressName : name)) !== null && _c !== void 0 ? _c : name })), jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
+        }); }, disabled: localInProgress }, { children: [localInProgress ? (jsx(LuiMiniSpinner, { size: 16, divProps: {
+                    "data-testid": "loading-spinner",
+                    style: { margin: 0, paddingRight: 5, paddingLeft: 3, paddingBottom: 0, paddingTop: 0 },
+                    role: "status",
+                    "aria-label": "Loading"
+                } })) : (jsx(LuiIcon, { name: icon, alt: (_c = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name) !== null && _c !== void 0 ? _c : "", size: size })), jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_d = (localInProgress ? inProgressName : name)) !== null && _d !== void 0 ? _d : name })), jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
 };
 
 export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponent, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridFormDropDown, GridFormMultiSelect, GridFormPopoutMenu, GridFormSubComponentTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentTextArea, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };