@revolist/revogrid 4.26.2 → 4.27.1

package/dist/collection/plugins/filter/filter.panel.js

@@ -107,7 +107,7 @@ export class FilterPanel {
     getFilterItemsList() {
         var _a, _b;
         const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
-        if (typeof prop === 'undefined')
+        if (prop === undefined)
             return '';
         const propFilters = (_b = this.filterItems[prop]) !== null && _b !== void 0 ? _b : [];
         const visibleFilterCount = propFilters.filter(filter => !filter.hidden).length;
@@ -131,7 +131,7 @@ export class FilterPanel {
                     'filter-row-dragging': isDragging,
                     'filter-row-drag-over': isDragOver,
                 } }, canReorder ? (h("button", { type: "button", class: "filter-row-drop-target", tabIndex: -1, "aria-label": `${capts.filterCondition} ${index + 1}`, onDragOver: e => this.onFilterDragOver(e, filter.id), onDragLeave: () => this.onFilterDragLeave(filter.id), onDrop: e => this.onFilterDrop(e, prop, filter.id) })) : '', canReorder ? (h(ReorderButton, { ariaLabel: capts.reorderFilter, dragging: isDragging, dragOver: isDragOver, onDragStart: e => this.onFilterDragStart(e, filter.id), onDragEnd: () => this.onFilterDragEnd(), onKeyDown: e => this.onFilterReorderKeyDown(e, prop, filter.id) })) : '', h("div", { class: { 'select-input': true } }, h("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), extra ? h("div", { class: "filter-extra" }, extra) : ''), h("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton, h(TrashButton, { ariaLabel: capts.removeFilter, onClick: () => this.onRemoveFilter(filter.id) })))));
-        })), propFilters.filter(f => !f.hidden).length > 0 ? h("div", { class: "add-filter-divider" }) : ''));
+        })), propFilters.some(f => !f.hidden) ? h("div", { class: "add-filter-divider" }) : ''));
     }
     componentDidRender() {
         this.syncDialog();
@@ -492,7 +492,7 @@ export class FilterPanel {
             top: `${(_d = (_c = this.changes) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0}px`,
         };
         const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
-        return (h(Host, { key: '8859c452eb08838f65f18efecbdde7f65fda2b49' }, h("dialog", { key: 'f603067ff0986a9f344cbbf816388d2bbac198bb', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
+        return (h(Host, { key: 'd0e4ebb408750b11b3965da6a25e581733c968e3' }, h("dialog", { key: '3df36777c931ec1063e8574169ca880a99dbfe41', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
                 e.preventDefault();
                 this.onCancel();
             } }, this.changes && [
@@ -501,16 +501,16 @@ export class FilterPanel {
             ((_g = this.changes) === null || _g === void 0 ? void 0 : _g.hideDefaultFilters) !== true && [
                 h("label", { key: "filter-title" }, capts.title),
                 h("div", { key: "filter-holder", class: "filter-holder" }, this.getFilterItemsList()),
-                h("div", { key: "add-filter", class: "add-filter" }, h("select", { key: '2ec0a66918edf91bdde3962b6ec84c89f6f1c8f1', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+                h("div", { key: "add-filter", class: "add-filter" }, h("select", { key: 'e2a8bd29f2090d3e6c933795427b71ca190b82aa', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
             ],
             h("slot", { key: "default-slot" }),
             ((_j = (_h = this.changes).extraBottomContent) === null || _j === void 0 ? void 0 : _j.call(_h, this.changes)) || '',
             h("div", { key: "filter-actions", class: "filter-actions" }, this.disableDynamicFiltering && [
-                h("button", { key: "save", id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
-                h("button", { key: "cancel", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
+                h("button", { key: "save", type: "button", id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
+                h("button", { key: "cancel", type: "button", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
             ], !this.disableDynamicFiltering && [
-                h("button", { key: "ok", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
-                h("button", { key: "reset", id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
+                h("button", { key: "ok", type: "button", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
+                h("button", { key: "reset", type: "button", id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
             ]),
             h("slot", { key: "footer-slot", slot: "footer" }),
         ])));

package/dist/collection/plugins/filter/filter.plugin.js

@@ -6,8 +6,9 @@ import { h } from "@stencil/core";
 import { BasePlugin } from "../base.plugin";
 import { FILTER_PROP, isFilterBtn } from "./filter.button";
 import { filterCoreFunctionsIndexedByType, filterNames, filterTypes, } from "./filter.indexed";
-import { timeout } from "../../utils";
 import { resolveBlankSemantics } from "./filter.blank";
+import { timeout } from "../../utils";
+import { ASYNC_FILTER_ROW_THRESHOLD, FILTER_CHUNK_SIZE, FILTER_TIME_BUDGET_MS, } from "./filter.constants";
 export * from './filter.types';
 export * from './filter.indexed';
 export * from './filter.blank';
@@ -55,6 +56,7 @@ export class FilterPlugin extends BasePlugin {
         this.filterFunctionsIndexedByType = Object.assign({}, filterCoreFunctionsIndexedByType);
         this.filterProp = FILTER_PROP;
         this.allowDuplicateOperators = true;
+        this.filteringRunId = 0;
         if (config) {
             this.initConfig(config);
         }
@@ -63,7 +65,7 @@ export class FilterPlugin extends BasePlugin {
             ...existingNodes,
             h("revogr-filter-panel", { filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), onResetChange: e => this.onFilterReset(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, closeOnOutsideClick: config === null || config === void 0 ? void 0 : config.closeFilterPanelOnOutsideClick, allowDuplicateOperators: this.allowDuplicateOperators, ref: e => (this.pop = e) }, ' ', this.extraContent()),
         ];
-        const aftersourceset = async () => {
+        const aftersourceset = () => {
             const filterCollectionProps = Object.keys(this.filterCollection);
             if (filterCollectionProps.length > 0) {
                 // handle old way of filtering by reworking FilterCollection to new MultiFilterItem
@@ -80,12 +82,26 @@ export class FilterPlugin extends BasePlugin {
                     }
                 });
             }
-            if (Object.keys(this.multiFilterItems).length === 0) {
+            if (!this.hasActiveFilters()) {
+                this.cancelFiltering();
                 return;
             }
-            await timeout();
-            await this.runFiltering(this.multiFilterItems);
+            void this.runFiltering(this.multiFilterItems);
         };
+        /**
+         * This executes before the data store replaces its source.
+         * For a large source with active filters:
+         * 1. Existing filtering runs are invalidated.
+         * 2. Pending state starts.
+         * 3. Visible rows become empty.
+         * 4. The source is replaced while the DataStore guard prevents it from exposing unfiltered rows.
+         */
+        this.addEventListener('beforesourceset', ({ detail }) => {
+            if (detail.source.length >= ASYNC_FILTER_ROW_THRESHOLD &&
+                this.hasActiveFilters()) {
+                this.deferFiltering();
+            }
+        });
         this.addEventListener('headerclick', e => this.headerclick(e));
         this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
             if (!detail) {
@@ -246,7 +262,7 @@ export class FilterPlugin extends BasePlugin {
         // store the filter items
         this.multiFilterItems = filterItems;
         // run the filtering when the items change
-        this.runFiltering(this.multiFilterItems);
+        await this.runFiltering(this.multiFilterItems);
     }
     onFilterReset(prop) {
         delete this.multiFilterItems[prop !== null && prop !== void 0 ? prop : ''];
@@ -256,6 +272,8 @@ export class FilterPlugin extends BasePlugin {
      * Triggers grid filtering
      */
     async doFiltering(collection, source, columns, filterItems) {
+        // creates the execution token - owns the actual calculation
+        const runId = this.beginFiltering();
         const columnsToUpdate = [];
         /**
          * Loop through the columns and update the columns that need to be updated with the `hasFilter` property.
@@ -280,7 +298,25 @@ export class FilterPlugin extends BasePlugin {
                 column[this.filterProp] = true;
             }
         });
-        const itemsToTrim = this.getRowFilter(source, filterItems, columnByProp);
+        let itemsToTrim;
+        const hasFilters = Object.keys(filterItems).length > 0 || this.hasActiveFilters();
+        const isLargeSource = hasFilters && source.length >= ASYNC_FILTER_ROW_THRESHOLD;
+        if (isLargeSource) {
+            this.providers.data.setItemsPending(true);
+            await timeout();
+        }
+        if (!hasFilters) {
+            itemsToTrim = {};
+        }
+        else if (isLargeSource && this.supportsChunkedFiltering()) {
+            itemsToTrim = await this.getRowFilterInChunks(source, filterItems, columnByProp, runId);
+        }
+        else {
+            itemsToTrim = this.getRowFilter(source, filterItems, columnByProp);
+        }
+        if (!itemsToTrim || runId !== this.filteringRunId) {
+            return;
+        }
         // check is filter event prevented
         const { defaultPrevented, detail } = this.emit('beforefiltertrimmed', {
             collection,
@@ -288,10 +324,12 @@ export class FilterPlugin extends BasePlugin {
             source,
             filterItems,
         });
-        if (defaultPrevented) {
+        if (defaultPrevented || runId !== this.filteringRunId) {
+            this.releaseFiltering(runId);
             return;
         }
         this.providers.data.setTrimmed({ [FILTER_TRIMMED_TYPE]: detail.itemsToFilter });
+        this.releaseFiltering(runId);
         // applies the hasFilter to the columns to show filter icon
         this.providers.column.updateColumns(columnsToUpdate);
         this.emit('afterfilterapply', {
@@ -305,6 +343,10 @@ export class FilterPlugin extends BasePlugin {
         await this.runFiltering(this.multiFilterItems);
     }
     async runFiltering(multiFilterItems) {
+        // runFiltering: First token: "Is this request still valid after event handlers run?"
+        // doFiltering: Second token: "Is this calculation still the newest one?"
+        // creates a preflight token and sets the grid to a pending state
+        const runId = this.beginFiltering();
         const collection = {};
         // handle old filterCollection to return the first filter only (if any) from multiFilterItems
         const filterProps = Object.keys(multiFilterItems);
@@ -328,10 +370,67 @@ export class FilterPlugin extends BasePlugin {
             columns,
             filterItems: this.multiFilterItems,
         });
-        if (defaultPrevented) {
+        if (defaultPrevented || runId !== this.filteringRunId) {
+            this.releaseFiltering(runId);
             return;
         }
-        this.doFiltering(detail.collection, detail.source, detail.columns, detail.filterItems);
+        await this.doFiltering(detail.collection, detail.source, detail.columns, detail.filterItems);
+    }
+    /** Whether this plugin currently owns filter state that must follow a new source. */
+    hasActiveFilters() {
+        return (Object.keys(this.multiFilterItems).length > 0 ||
+            Object.keys(this.filterCollection).length > 0);
+    }
+    /** Preserve whole-source semantics for plugins that override getRowFilter. */
+    supportsChunkedFiltering() {
+        return this.getRowFilter === FilterPlugin.prototype.getRowFilter;
+    }
+    /**
+     * Hide visible rows and invalidate current filtering until a deferred filter
+     * run is ready. Used by filter extensions with their own debounced state.
+     */
+    deferFiltering() {
+        this.beginFiltering(true);
+    }
+    beginFiltering(pending = false) {
+        const runId = ++this.filteringRunId;
+        if (pending) {
+            this.providers.data.setItemsPending(true);
+        }
+        return runId;
+    }
+    releaseFiltering(runId) {
+        if (runId === this.filteringRunId) {
+            this.providers.data.setItemsPending(false);
+        }
+    }
+    cancelFiltering() {
+        this.releaseFiltering(this.beginFiltering());
+    }
+    async getRowFilterInChunks(rows, filterItems, columnByProp, runId) {
+        const trimmed = {};
+        let sliceStarted = performance.now();
+        for (let offset = 0; offset < rows.length; offset += FILTER_CHUNK_SIZE) {
+            if (runId !== this.filteringRunId) {
+                return;
+            }
+            const end = Math.min(offset + FILTER_CHUNK_SIZE, rows.length);
+            const chunkTrimmed = this.getRowFilter(rows.slice(offset, end), filterItems, columnByProp);
+            // filter that chunk
+            for (const chunkIndex in chunkTrimmed) {
+                trimmed[offset + Number(chunkIndex)] = true;
+            }
+            if (end < rows.length &&
+                performance.now() - sliceStarted >= FILTER_TIME_BUDGET_MS) {
+                await timeout();
+                sliceStarted = performance.now();
+            }
+        }
+        return runId === this.filteringRunId ? trimmed : undefined;
+    }
+    destroy() {
+        this.cancelFiltering();
+        super.destroy();
     }
     /**
      * Get trimmed rows based on filter

package/dist/collection/plugins/filter/filter.style.css

@@ -127,6 +127,8 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
   visibility: visible;
   cursor: pointer;
   border-radius: 4px;
+  position: relative;
+  z-index: 1;
 }
 .rgHeaderCell .rv-filter.active {
   color: var(--rg-theme-filter-panel-icon-active);

package/dist/collection/plugins/groupingRow/grouping.const.js

@@ -12,4 +12,5 @@ export const GROUP_COLUMN_PROP = `${GRID_INTERNALS}-prop`;
 export const GROUP_ORIGINAL_INDEX = `${GRID_INTERNALS}-original-index`;
 export const GROUP_EXPAND_BTN = `group-expand`;
 export const GROUP_EXPAND_EVENT = `groupexpandclick`;
+export const BEFORE_GROUPING_APPLY_EVENT = `beforegroupingapply`;
 export const GROUPING_ROW_TYPE = 'rgRow';

package/dist/collection/plugins/groupingRow/grouping.row.plugin.js

@@ -1,26 +1,14 @@
 /*!
  * Built by Revolist OU ❤️
  */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { getPhysical, setItems, columnTypes, } from "../../store/index";
 import { BasePlugin } from "../base.plugin";
 import { FILTER_TRIMMED_TYPE } from "../filter/filter.plugin";
-import { SortingPlugin } from "../sorting/sorting.plugin";
-import { GROUP_EXPAND_EVENT, GROUPING_ROW_TYPE, PSEUDO_GROUP_COLUMN, } from "./grouping.const";
+import { SortingPlugin, hasActiveSorting } from "../sorting/sorting.plugin";
+import { BEFORE_GROUPING_APPLY_EVENT, GROUP_EXPAND_EVENT, GROUPING_ROW_TYPE, PSEUDO_GROUP_COLUMN, PSEUDO_GROUP_ITEM_ID, } from "./grouping.const";
 import { doExpand, doCollapse } from "./grouping.row.expand.service";
 import { gatherGrouping, getExpanded, getSource, isGrouping, isGroupingColumn, } from "./grouping.service";
-import { filterOutEmptyGroupRows, processDoubleConversionTrimmed, TRIMMED_GROUPING, } from "./grouping.trimmed.service";
+import { convertGroupingIndex, filterOutEmptyGroupRows, processDoubleConversionTrimmed, TRIMMED_GROUPING, } from "./grouping.trimmed.service";
 export * from './grouping.const';
 export * from './grouping.row.expand.service';
 export * from './grouping.row.types';
@@ -41,15 +29,16 @@ export class GroupingRowPlugin extends BasePlugin {
     }
     // expand event triggered
     onExpand({ virtualIndex }) {
-        const { source } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'));
-        let newTrimmed = this.getStore().get('trimmed')[TRIMMED_GROUPING];
-        let i = getPhysical(this.getStore(), virtualIndex);
+        const store = this.getStore();
+        const source = store.get('source');
+        let newTrimmed = store.get('trimmed')[TRIMMED_GROUPING];
+        const i = getPhysical(store, virtualIndex);
         const isExpanded = getExpanded(source[i]);
         if (!isExpanded) {
-            const { trimmed, items } = doExpand(virtualIndex, source, this.getStore().get('items'));
+            const { trimmed, items: expandedItems } = doExpand(virtualIndex, source, store.get('items'));
             newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
-            if (items) {
-                setItems(this.getStore(), items);
+            if (expandedItems) {
+                setItems(store, expandedItems);
             }
         }
         else {
@@ -57,7 +46,7 @@ export class GroupingRowPlugin extends BasePlugin {
             newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
             this.revogrid.clearFocus();
         }
-        this.getStore().set('source', source);
+        store.set('source', source);
         this.revogrid.addTrimmed(newTrimmed, TRIMMED_GROUPING);
     }
     setColumnGrouping(cols) {
@@ -79,7 +68,7 @@ export class GroupingRowPlugin extends BasePlugin {
     onDrag(e) {
         const { from, to } = e.detail;
         const isDown = to - from >= 0;
-        const { source } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'));
+        const source = this.getStore().get('source');
         const items = this.getStore().get('items');
         let i = isDown ? from : to;
         const end = isDown ? to : from;
@@ -105,21 +94,13 @@ export class GroupingRowPlugin extends BasePlugin {
         const source = this.getStore().get('source');
         return filterOutEmptyGroupRows(source, trimmed);
     }
-    isSortingRunning() {
-        const sortingPlugin = this.providers.plugins.getByClass(SortingPlugin);
-        return !!(sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.sortingPromise);
-    }
     /**
-     * Returns grouping options for regrouping that must preserve current UI state.
-     *
-     * `expandedAll` and config `prevExpanded` are initial/config instructions.
-     * Reusing them after sorting would reopen groups the user collapsed before
-     * sorting instead of using the current grouped source state.
+     * Sorting changes proxy order without changing the physical source baseline.
+     * Other proxy changes, such as row dragging, are user-authored source order
+     * and must be retained when grouping is rebuilt.
      */
-    getCurrentExpandedOptions() {
-        var _a;
-        const _b = (_a = this.options) !== null && _a !== void 0 ? _a : {}, { expandedAll: _expandedAll, prevExpanded: _prevExpanded } = _b, options = __rest(_b, ["expandedAll", "prevExpanded"]);
-        return options;
+    isSortingActiveOrPending(sortingPlugin) {
+        return !!(sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.sortingPromise) || hasActiveSorting(sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.sorting);
     }
     /**
      * Starts global source update with group clearing and applying new one
@@ -132,7 +113,12 @@ export class GroupingRowPlugin extends BasePlugin {
          * @param newOldIndexMap - provides us mapping with new indexes vs old indexes, we would use it for trimmed mapping
          */
         const store = this.getStore();
-        const { source, prevExpanded, oldNewIndexes } = getSource(store.get('source'), store.get('proxyItems'), true);
+        const sortingPlugin = this.providers.plugins.getByClass(SortingPlugin);
+        const currentSource = store.get('source');
+        const sourceItems = this.isSortingActiveOrPending(sortingPlugin)
+            ? currentSource.map((_, index) => index)
+            : store.get('proxyItems');
+        const { source, prevExpanded, oldNewIndexes } = getSource(currentSource, sourceItems, true);
         const expanded = Object.assign({ prevExpanded }, options);
         /**
          * Group again
@@ -142,8 +128,13 @@ export class GroupingRowPlugin extends BasePlugin {
         const customRenderer = options === null || options === void 0 ? void 0 : options.groupLabelTemplate;
         const cellRenderer = options === null || options === void 0 ? void 0 : options.groupCellTemplate;
         // setup source
+        this.revogrid.dispatchEvent(new CustomEvent(BEFORE_GROUPING_APPLY_EVENT));
         this.providers.data.setData(sourceWithGroups, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer, cellRenderer }, true);
+        this.remapRowDefinitions(oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap, currentSource, sourceWithGroups);
         this.updateTrimmed(trimmed, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap, sourceWithGroups);
+        if (hasActiveSorting(sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.sorting)) {
+            sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.reapplySorting();
+        }
     }
     /**
      * Apply grouping on data set
@@ -152,9 +143,14 @@ export class GroupingRowPlugin extends BasePlugin {
      */
     onDataSet(data) {
         var _a, _b, _c;
+        const currentSource = this.getStore().get('source');
+        const sortingPlugin = this.providers.plugins.getByClass(SortingPlugin);
+        const currentItems = this.isSortingActiveOrPending(sortingPlugin)
+            ? currentSource.map((_, index) => index)
+            : this.getStore().get('proxyItems');
+        const { prevExpanded, oldNewIndexes } = getSource(currentSource, currentItems, true);
         let preservedExpanded = {};
         if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.preserveGroupingOnUpdate) !== false) {
-            let { prevExpanded } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
             preservedExpanded = prevExpanded;
         }
         const source = data.source.filter(s => !isGrouping(s));
@@ -166,7 +162,8 @@ export class GroupingRowPlugin extends BasePlugin {
             customRenderer: options.groupLabelTemplate,
             cellRenderer: options.groupCellTemplate,
         });
-        this.updateTrimmed(trimmed, oldNewIndexMap, undefined, sourceWithGroups);
+        queueMicrotask(() => this.remapRowDefinitions(oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap, currentSource, sourceWithGroups));
+        this.updateTrimmed(trimmed, oldNewIndexMap, undefined, sourceWithGroups, { filterTrimmedMode: 'recompute-after-source-set' });
     }
     /**
      * External call to apply grouping. Called by revogrid when prop changed.
@@ -201,10 +198,6 @@ export class GroupingRowPlugin extends BasePlugin {
             if (!(((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length) && ((_c = detail === null || detail === void 0 ? void 0 : detail.source) === null || _c === void 0 ? void 0 : _c.length))) {
                 return;
             }
-            // if sorting is running don't apply grouping, wait for sorting, then it'll apply in @aftersortingapply
-            if (this.isSortingRunning()) {
-                return;
-            }
             this.onDataSet(detail);
         });
         this.addEventListener('beforecolumnsset', ({ detail }) => {
@@ -219,17 +212,6 @@ export class GroupingRowPlugin extends BasePlugin {
         this.addEventListener('beforefiltertrimmed', ({ detail }) => {
             detail.itemsToFilter = this.beforeFilterTrimmed(detail.itemsToFilter);
         });
-        /**
-         * sorting applied need to clear grouping and apply again
-         * based on new results whole grouping order will changed
-         */
-        this.addEventListener('aftersortingapply', () => {
-            var _a, _b;
-            if (!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length)) {
-                return;
-            }
-            this.doSourceUpdate(this.getCurrentExpandedOptions());
-        });
         /**
          * Apply logic for focus inside of grouping
          * We can't focus on grouping rows, navigation only inside of groups for now
@@ -262,14 +244,69 @@ export class GroupingRowPlugin extends BasePlugin {
             }
         });
         // clear rows
-        const { source, oldNewIndexes } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
+        const store = this.getStore();
+        const sortingPlugin = this.providers.plugins.getByClass(SortingPlugin);
+        const currentSource = store.get('source');
+        const sourceItems = this.isSortingActiveOrPending(sortingPlugin)
+            ? currentSource.map((_, index) => index)
+            : store.get('proxyItems');
+        const { source, oldNewIndexes } = getSource(currentSource, sourceItems, true);
+        this.revogrid.dispatchEvent(new CustomEvent(BEFORE_GROUPING_APPLY_EVENT));
         this.providers.data.setData(source, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, undefined, true);
+        this.remapRowDefinitions(oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, undefined, currentSource, source);
         this.updateTrimmed(undefined, undefined, oldNewIndexes, source);
+        if (hasActiveSorting(sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.sorting)) {
+            sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.reapplySorting();
+        }
+    }
+    remapRowDefinitions(firstLevelMap, secondLevelMap, previousSource, nextSource) {
+        const definitions = this.providers.dimension.getRowDefinitions();
+        const nextGroupIndexes = new Map();
+        nextSource === null || nextSource === void 0 ? void 0 : nextSource.forEach((row, index) => {
+            const groupId = row[PSEUDO_GROUP_ITEM_ID];
+            if (groupId && !nextGroupIndexes.has(groupId)) {
+                nextGroupIndexes.set(groupId, index);
+            }
+        });
+        let changed = false;
+        const remapped = definitions.flatMap(definition => {
+            if (definition.type !== GROUPING_ROW_TYPE) {
+                return [definition];
+            }
+            const previousRow = previousSource === null || previousSource === void 0 ? void 0 : previousSource[definition.index];
+            const groupId = previousRow === null || previousRow === void 0 ? void 0 : previousRow[PSEUDO_GROUP_ITEM_ID];
+            const index = groupId
+                ? nextGroupIndexes.get(groupId)
+                : convertGroupingIndex(definition.index, firstLevelMap, secondLevelMap);
+            if (typeof index !== 'number') {
+                changed = true;
+                return [];
+            }
+            if (index < 0) {
+                changed = true;
+                return [];
+            }
+            if (index === definition.index) {
+                return [definition];
+            }
+            changed = true;
+            return [Object.assign(Object.assign({}, definition), { index })];
+        });
+        if (changed) {
+            this.providers.dimension.setRowDefinitions(remapped);
+        }
     }
-    updateTrimmed(trimmedGroup = {}, firstLevelMap = {}, secondLevelMap, source = this.getStore().get('source')) {
+    updateTrimmed(trimmedGroup = {}, firstLevelMap = {}, secondLevelMap, source = this.getStore().get('source'), { filterTrimmedMode = 'remap', } = {}) {
         // map previously trimmed data
         const trimemedOptionsToUpgrade = processDoubleConversionTrimmed(this.getStore().get('trimmed'), firstLevelMap, secondLevelMap);
         for (let type in trimemedOptionsToUpgrade) {
+            if (filterTrimmedMode === 'recompute-after-source-set' &&
+                type === FILTER_TRIMMED_TYPE) {
+                // The filter plugin recalculates this trim against the installed source
+                // during aftersourceset. Reapplying remapped old indexes afterwards
+                // would overwrite that fresh result.
+                continue;
+            }
             if (type === FILTER_TRIMMED_TYPE) {
                 /** Regrouping changes physical indexes, so filter trim needs fresh group-header state. */
                 trimemedOptionsToUpgrade[type] = filterOutEmptyGroupRows(source, trimemedOptionsToUpgrade[type]);

package/dist/collection/plugins/groupingRow/grouping.row.renderer.js

@@ -88,7 +88,7 @@ export const GroupingRowRenderer = (props) => {
             depth })))));
     }
     return (h(RowRenderer, Object.assign({}, props, groupRowAttrs), hasExpand && [
-        h("button", { class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) }, expandSvgIconVNode(expanded)),
+        h("button", { type: "button", class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) }, expandSvgIconVNode(expanded)),
         String(name),
     ]));
 };

package/dist/collection/plugins/groupingRow/grouping.service.js

@@ -158,7 +158,7 @@ export function isGrouping(rgRow) {
     return typeof (rgRow === null || rgRow === void 0 ? void 0 : rgRow[PSEUDO_GROUP_ITEM]) !== 'undefined';
 }
 export function isGroupingColumn(column) {
-    return typeof (column === null || column === void 0 ? void 0 : column[PSEUDO_GROUP_COLUMN]) !== 'undefined';
+    return (column === null || column === void 0 ? void 0 : column[PSEUDO_GROUP_COLUMN]) !== undefined;
 }
 export function measureEqualDepth(groupA, groupB) {
     const ln = groupA.length;

package/dist/collection/plugins/groupingRow/grouping.sorting.service.js

@@ -0,0 +1,58 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { GROUP_DEPTH } from "./grouping.const";
+import { isGrouping } from "./grouping.service";
+/**
+ * Restores group headers around already-sorted data indexes without rebuilding
+ * the physical source. Group insertion order follows the first sorted member,
+ * matching the order produced by regrouping a sorted source.
+ */
+export function gatherGroupedRowIndexes(source, sortedDataIndexes) {
+    const groupPathByDataIndex = new Map();
+    const currentGroupPath = [];
+    source.forEach((model, physicalIndex) => {
+        if (isGrouping(model)) {
+            const depth = model[GROUP_DEPTH];
+            if (typeof depth !== 'number') {
+                return;
+            }
+            currentGroupPath.length = depth;
+            currentGroupPath[depth] = physicalIndex;
+            return;
+        }
+        if (model != null) {
+            groupPathByDataIndex.set(physicalIndex, [...currentGroupPath]);
+        }
+    });
+    const root = {
+        children: new Map(),
+        items: [],
+    };
+    for (const physicalIndex of sortedDataIndexes) {
+        const groupPath = groupPathByDataIndex.get(physicalIndex);
+        if (!(groupPath === null || groupPath === void 0 ? void 0 : groupPath.length)) {
+            return undefined;
+        }
+        let node = root;
+        for (const groupIndex of groupPath) {
+            let child = node.children.get(groupIndex);
+            if (!child) {
+                child = { children: new Map(), items: [] };
+                node.children.set(groupIndex, child);
+            }
+            node = child;
+        }
+        node.items.push(physicalIndex);
+    }
+    const groupedIndexes = [];
+    const appendNode = (node) => {
+        node.children.forEach((child, groupIndex) => {
+            groupedIndexes.push(groupIndex);
+            appendNode(child);
+        });
+        groupedIndexes.push(...node.items);
+    };
+    appendNode(root);
+    return groupedIndexes;
+}

package/dist/collection/plugins/groupingRow/grouping.trimmed.service.js

@@ -13,8 +13,10 @@ export const TRIMMED_GROUPING = 'grouping';
  * against the grouped physical source can still be remapped. If neither path
  * resolves to a number, the caller drops the stale trim entry.
  */
-function convertTrimmedIndex(initialIndex, firstLevelMap, secondLevelMap) {
-    const sourceIndex = Number.parseInt(initialIndex, 10);
+export function convertGroupingIndex(initialIndex, firstLevelMap, secondLevelMap) {
+    const sourceIndex = typeof initialIndex === 'number'
+        ? initialIndex
+        : Number.parseInt(initialIndex, 10);
     const firstConversionIndex = firstLevelMap[sourceIndex];
     if (!secondLevelMap) {
         return firstConversionIndex;
@@ -47,7 +49,7 @@ export function processDoubleConversionTrimmed(initiallyTrimed, firstLevelMap, s
              * if item exists we find it in collection
              * we support 2 level of conversions
              */
-            const newConversionIndex = convertTrimmedIndex(initialIndex, firstLevelMap, secondLevelMap);
+            const newConversionIndex = convertGroupingIndex(initialIndex, firstLevelMap, secondLevelMap);
             // Group rows do not exist in the ungrouped index map and must not leak into new trims.
             if (typeof newConversionIndex !== 'number') {
                 continue;

package/dist/collection/plugins/index.js

@@ -9,6 +9,7 @@ export * from './export/export.plugin';
 export * from './filter/filter.plugin';
 export * from './groupingRow/grouping.row.plugin';
 export * from './moveColumn/column.drag.plugin';
+export * from './row-resize';
 export * from './sorting/sorting.plugin';
 export * from './sorting/sorting.sign';
 export * from './add-rows-on-paste.plugin';

package/dist/collection/plugins/row-resize/index.js

@@ -0,0 +1,6 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+export * from './row-resize.plugin';
+export * from './row-resize.types';
+export * from './row-resize.utils';