@linzjs/step-ag-grid 2.1.1 → 2.1.3

package/README.md

@@ -2,8 +2,6 @@
 
 > Reusable [ag-grid](https://www.ag-grid.com/) component for LINZ / Toitū te whenua.
 
-Storybook deployed at: https://linz.github.io/step-ag-grid/ (private to LINZ)
-
 ## Features
 
 - [ag-grid-community](https://www.npmjs.com/package/ag-grid-community) based grid with custom popover components
@@ -39,6 +37,8 @@ yarn add @linz/step-ag-grid
 npm run storybook
 ```
 
+Storybook demo deployed at: https://linz.github.io/step-ag-grid/
+
 ## Usage
 
 ```tsx

package/dist/index.js

@@ -2218,7 +2218,11 @@ var usePostSortRowsHook = function (_a) {
         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 () {
-            return !hasNewRows() && nodes.some(function (row, index) { var _a; return ![null, index].includes((_a = previousRowSortIndex[row.data.id]) !== null && _a !== void 0 ? _a : null); });
+            // 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) {
@@ -2274,6 +2278,7 @@ var usePostSortRowsHook = function (_a) {
                 if (!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);
                 }
@@ -2323,12 +2328,12 @@ var GridHeaderSelect = function (_a) {
  * Wrapper for AgGrid to add commonly used functionality.
  */
 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, sizeColumnsToFit = _b.sizeColumnsToFit;
+    var _a, _b;
+    var _c = react.useContext(GridContext), gridReady = _c.gridReady, setGridApi = _c.setGridApi, setQuickFilter = _c.setQuickFilter, ensureRowVisible = _c.ensureRowVisible, selectRowsById = _c.selectRowsById, ensureSelectedRowIsVisible = _c.ensureSelectedRowIsVisible, sizeColumnsToFit = _c.sizeColumnsToFit;
     var checkUpdating = react.useContext(GridUpdatingContext).checkUpdating;
-    var _c = react.useState(""), internalQuickFilter = _c[0], setInternalQuickFilter = _c[1];
+    var _d = react.useState(""), internalQuickFilter = _d[0], setInternalQuickFilter = _d[1];
     var lastSelectedIds = react.useRef([]);
-    var _d = react.useState(false), staleGrid = _d[0], setStaleGrid = _d[1];
+    var _e = react.useState(false), staleGrid = _e[0], setStaleGrid = _e[1];
     var postSortRows = usePostSortRowsHook({ setStaleGrid: setStaleGrid });
     /**
      * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
@@ -2472,7 +2477,7 @@ var Grid = function (params) {
     }, [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 })] })));
+                    } }) }))), 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: (_b = params.postSortRows) !== null && _b !== void 0 ? _b : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
 };
 
 var GenericMultiEditCellClass = function (props) {
@@ -2614,7 +2619,7 @@ var GridCellRenderer = function (props) {
     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.
+ * All cells should use this
  */
 var GridCell = function (props, custom) {
     var _a;
@@ -2650,7 +2655,7 @@ var GenericCellEditorComponent3 = function (props) {
     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))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(colDef.cellRenderer, __assign({}, props)), (props === null || props === void 0 ? void 0 : props.editor) && jsxRuntime.jsx(props.editor, __assign({}, cellEditorParams, propsRef.current))] }));
 };
 
 /**
@@ -3114,7 +3119,7 @@ var GridFormMultiSelect = function (props) {
 };
 
 var GridPopoutEditMultiSelect = function (colDef, props) {
-    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined }, colDef), __assign(__assign({ editor: GridFormMultiSelect }, props), { editorParams: __assign({ className: "GridMultiSelect-containerMedium" }, props.editorParams) }));
+    return GridCell(__assign({ initialWidth: 65, maxWidth: 150 }, colDef), __assign(__assign({ editor: GridFormMultiSelect }, props), { editorParams: __assign({ className: "GridMultiSelect-containerMedium" }, props.editorParams) }));
 };
 
 var css_248z$2 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
@@ -3338,7 +3343,7 @@ var GridFormEditBearing = function (_props) {
 };
 
 var GridPopoverEditBearingLike = function (colDef, props) {
-    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, valueFormatter: bearingValueFormatter, cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined }, colDef), __assign({ editor: GridFormEditBearing }, props));
+    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, valueFormatter: bearingValueFormatter }, colDef), __assign({ editor: GridFormEditBearing }, props));
 };
 var GridPopoverEditBearing = function (colDef, props) {
     return GridPopoverEditBearingLike(__assign({ valueFormatter: bearingValueFormatter }, colDef), {
@@ -3370,7 +3375,7 @@ var GridPopoverEditBearingCorrection = function (colDef, props) {
 };
 
 var GridPopoverEditDropDown = function (colDef, props) {
-    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined }, colDef), __assign(__assign({ editor: GridFormDropDown }, props), { editorParams: __assign({ 
+    return GridCell(__assign({ initialWidth: 65, maxWidth: 150 }, colDef), __assign(__assign({ editor: GridFormDropDown }, props), { editorParams: __assign({ 
             // Defaults to medium size container
             className: "GridPopoverEditDropDown-containerMedium" }, props.editorParams) }));
 };