@revolist/revogrid 4.27.0 → 4.27.1

package/hydrate/index.js

@@ -13079,6 +13079,7 @@ const GROUP_COLUMN_PROP = `${GRID_INTERNALS}-prop`;
 const GROUP_ORIGINAL_INDEX = `${GRID_INTERNALS}-original-index`;
 const GROUP_EXPAND_BTN = `group-expand`;
 const GROUP_EXPAND_EVENT = `groupexpandclick`;
+const BEFORE_GROUPING_APPLY_EVENT = `beforegroupingapply`;
 const GROUPING_ROW_TYPE = 'rgRow';
 
 function getGroupValueDefault(item, prop, emptyGroupValue) {
@@ -15375,7 +15376,9 @@ function isVirtualXDimension(type, disableVirtualX = false, virtualX = DEFAULT_V
 class DimensionProvider {
     constructor(viewports, config) {
         this.viewports = viewports;
-        const sizeChanged = debounce$1((k) => config.realSizeChanged(k), RESIZE_INTERVAL);
+        this.config = config;
+        this.rowDefinitions = [];
+        const sizeChanged = debounce$1((k) => this.config.realSizeChanged(k), RESIZE_INTERVAL);
         this.stores = [...rowTypes, ...columnTypes].reduce((sources, t) => {
             sources[t] = new DimensionStore(t);
             sources[t].store.onChange('realSize', () => sizeChanged(t));
@@ -15393,6 +15396,20 @@ class DimensionProvider {
         this.viewports.stores[t].setOriginalSizes(this.stores[t].store.get('originItemSize'));
         this.setItemCount(count, t);
     }
+    getRowDefinitions() {
+        return this.rowDefinitions;
+    }
+    syncRowDefinitions(definitions) {
+        this.rowDefinitions = definitions;
+    }
+    setRowDefinitions(definitions) {
+        var _a, _b;
+        if (definitions === this.rowDefinitions) {
+            return;
+        }
+        this.syncRowDefinitions(definitions);
+        (_b = (_a = this.config).rowDefinitionsChanged) === null || _b === void 0 ? void 0 : _b.call(_a, definitions);
+    }
     /**
      * Apply new custom sizes to dimension and view port
      * @param type - dimension type
@@ -16923,6 +16940,60 @@ function allAndConditionsSatisfied(pendingResults) {
     return !pendingResults.includes(true);
 }
 
+/**
+ * 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.
+ */
+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;
+}
+
 /**
  * Checks whether a sorting map contains at least one active order.
  *
@@ -17171,18 +17242,6 @@ const SortingSign = ({ column }) => {
 function getSortableRowIndexes(indexes, source) {
     return indexes.filter(index => !isGrouping(source[index]));
 }
-function mergeSortedRowsWithGroups(indexes, source, sortedRows) {
-    if (sortedRows.length === indexes.length) {
-        return sortedRows;
-    }
-    let rowIndex = 0;
-    return indexes.map(index => {
-        if (isGrouping(source[index])) {
-            return index;
-        }
-        return sortedRows[rowIndex++];
-    });
-}
 /**
  * Lifecycle
  * 1. @event `beforesorting` - Triggered when sorting just starts. Nothing has happened yet. This can be triggered from a column or from the source. If the type is from rows, the column will be undefined.
@@ -17342,6 +17401,7 @@ class SortingPlugin extends BasePlugin {
         storeService.setData({ proxyItems: newItemsOrder });
     }
     applySortingForStore(type, sorting, sortingFunc, sortingColumns, sortingOrder, ignoreViewportUpdate) {
+        var _a;
         const storeService = this.providers.data.stores[type];
         // row data
         const source = storeService.store.get('source');
@@ -17349,7 +17409,10 @@ class SortingPlugin extends BasePlugin {
         const proxyItems = storeService.store.get('proxyItems');
         const sortItems = getSortableRowIndexes(proxyItems, source);
         const sortedItems = sortIndexByItems([...sortItems], source, sortingFunc, sorting, sortingColumns, sortingOrder);
-        const newItemsOrder = mergeSortedRowsWithGroups(proxyItems, source, sortedItems);
+        const hasGroupingRows = sortedItems.length !== proxyItems.length;
+        const newItemsOrder = hasGroupingRows
+            ? (_a = gatherGroupedRowIndexes(source, sortedItems)) !== null && _a !== void 0 ? _a : proxyItems
+            : sortedItems;
         // take row indexes before trim applied and proxy items
         const prevItems = storeService.store.get('items');
         storeService.setData({
@@ -17375,6 +17438,16 @@ class SortingPlugin extends BasePlugin {
         }
         this.postponeSort(order, sortingFunc, sortingColumns, sortingOrder, ignoreViewportUpdate);
     }
+    /**
+     * Schedules the current active sort again after another plugin rebuilds row
+     * proxy indexes while keeping the physical source unchanged.
+     */
+    reapplySorting() {
+        if (!hasActiveSorting(this.sorting) || !this.sortingFunc) {
+            return;
+        }
+        this.startSorting(this.sorting, this.sortingFunc, this.sortingColumns, this.sortingOrder);
+    }
     /**
      * Applies sorting requested by a sortable header click.
      *
@@ -17893,8 +17966,10 @@ 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);
+function convertGroupingIndex(initialIndex, firstLevelMap, secondLevelMap) {
+    const sourceIndex = typeof initialIndex === 'number'
+        ? initialIndex
+        : Number.parseInt(initialIndex, 10);
     const firstConversionIndex = firstLevelMap[sourceIndex];
     if (!secondLevelMap) {
         return firstConversionIndex;
@@ -17927,7 +18002,7 @@ function processDoubleConversionTrimmed(initiallyTrimed, firstLevelMap, secondLe
              * 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;
@@ -17988,7 +18063,7 @@ function filterOutEmptyGroupRows(source, filterTrimmed) {
     return trimmed;
 }
 
-var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
+var __rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s)
         if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -18002,7 +18077,7 @@ var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
 };
 const PADDING_DEPTH = 10;
 const RowRenderer = (_a, cells) => {
-    var { rowClass, index, size, start, depth, groupingLevel } = _a, attrs = __rest$1(_a, ["rowClass", "index", "size", "start", "depth", "groupingLevel"]);
+    var { rowClass, index, size, start, depth, groupingLevel } = _a, attrs = __rest(_a, ["rowClass", "index", "size", "start", "depth", "groupingLevel"]);
     const props = Object.assign(Object.assign(Object.assign({}, attrs), { [DATA_ROW]: index }), (typeof groupingLevel === 'number'
         ? { 'data-level': groupingLevel }
         : {}));
@@ -18102,18 +18177,6 @@ const expandSvgIconVNode = (expanded = false) => {
     return (hAsync("svg", { "aria-hidden": "true", style: { transform: `rotate(${!expanded ? -90 : 0}deg)` }, focusable: "false", viewBox: "0 0 448 512" }, hAsync("path", { fill: "currentColor", d: "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" })));
 };
 
-var __rest = (undefined && undefined.__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;
-};
 class GroupingRowPlugin extends BasePlugin {
     getStore(type = GROUPING_ROW_TYPE) {
         return this.providers.data.stores[type].store;
@@ -18129,15 +18192,16 @@ 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 {
@@ -18145,7 +18209,7 @@ 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) {
@@ -18167,7 +18231,7 @@ 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;
@@ -18193,21 +18257,13 @@ 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 : {}, 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
@@ -18220,7 +18276,12 @@ 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
@@ -18230,8 +18291,13 @@ 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
@@ -18240,9 +18306,14 @@ 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));
@@ -18254,6 +18325,7 @@ class GroupingRowPlugin extends BasePlugin {
             customRenderer: options.groupLabelTemplate,
             cellRenderer: options.groupCellTemplate,
         });
+        queueMicrotask(() => this.remapRowDefinitions(oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap, currentSource, sourceWithGroups));
         this.updateTrimmed(trimmed, oldNewIndexMap, undefined, sourceWithGroups, { filterTrimmedMode: 'recompute-after-source-set' });
     }
     /**
@@ -18289,10 +18361,6 @@ 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 }) => {
@@ -18307,17 +18375,6 @@ 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
@@ -18350,9 +18407,57 @@ 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'), { filterTrimmedMode = 'remap', } = {}) {
         // map previously trimmed data
@@ -19204,19 +19309,6 @@ const rowDefinitionByType = (newVal = []) => {
     }
     return result;
 };
-const rowDefinitionRemoveByType = (oldVal = []) => {
-    const result = {};
-    for (const v of oldVal) {
-        let rowDefs = result[v.type];
-        if (!rowDefs) {
-            rowDefs = result[v.type] = [];
-        }
-        if (typeof v.size === 'number') {
-            rowDefs.push(v.index);
-        }
-    }
-    return result;
-};
 
 const COLUMN_DRAG_CLASS = 'column-drag-start';
 class ColumnOrderHandler {
@@ -19776,6 +19868,7 @@ function isMobileDevice() {
     return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
 }
 
+const toAriaIndex = (index) => `${index + 1}`;
 /**
  * WCAG Plugin is responsible for enhancing the accessibility features of the RevoGrid component.
  * It ensures that the grid is fully compliant with Web Content Accessibility Guidelines (WCAG) 2.1.
@@ -19819,14 +19912,14 @@ class WCAGPlugin extends BasePlugin {
                 column.columnProperties = (...args) => {
                     const result = (columnProperties === null || columnProperties === void 0 ? void 0 : columnProperties(...args)) || {};
                     result.role = 'columnheader';
-                    result['aria-colindex'] = `${index}`;
+                    result['aria-colindex'] = toAriaIndex(index);
                     return result;
                 };
                 column.cellProperties = (...args) => {
                     const wcagProps = {
                         ['role']: 'gridcell',
-                        ['aria-colindex']: `${index}`,
-                        ['aria-rowindex']: `${args[0].rowIndex}`,
+                        ['aria-colindex']: toAriaIndex(index),
+                        ['aria-rowindex']: toAriaIndex(args[0].rowIndex),
                         ['tabindex']: -1,
                     };
                     const columnProps = (cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties(...args)) || {};
@@ -19841,7 +19934,7 @@ class WCAGPlugin extends BasePlugin {
             revogrid.setAttribute('aria-rowcount', `${detail.source.length}`);
         });
         this.addEventListener('beforerowrender', ({ detail, }) => {
-            detail.node.$attrs$ = Object.assign(Object.assign({}, detail.node.$attrs$), { role: 'row', ['aria-rowindex']: detail.item.itemIndex });
+            detail.node.$attrs$ = Object.assign(Object.assign({}, detail.node.$attrs$), { role: 'row', ['aria-rowindex']: toAriaIndex(detail.item.itemIndex) });
         });
         // focuscell
         this.addEventListener('afterfocus', async (e) => {
@@ -20099,18 +20192,14 @@ const ROW_RESIZE_EVENT = 'rowresize';
 const AFTER_ROW_RESIZE_EVENT = 'afterrowresize';
 const ROW_RESIZE_CANCEL_EVENT = 'rowresizecancel';
 class RowResizePlugin extends BasePlugin {
-    static fromGridProperty(revogrid, providers) {
-        const plugin = new RowResizePlugin(revogrid, providers);
-        plugin.controlFromGridProperty();
-        return plugin;
-    }
     constructor(revogrid, providers, config = {}) {
         super(revogrid, providers);
         this.enabled = false;
-        this.gridResizeRow = false;
-        this.gridPlugins = [];
-        this.committedSizes = new Map();
-        this.appliedIndexes = new Map();
+        this.appliedDefinitionIndexes = new Map();
+        this.pendingBottomAnchor = false;
+        this.keepBottomAnchor = false;
+        this.rowDefinitionRemapQueued = false;
+        this.pendingSourceCounts = new Map();
         this.previousBodyCursor = '';
         this.decorateRow = ({ detail, }) => {
             if (!this.enabled ||
@@ -20174,22 +20263,72 @@ class RowResizePlugin extends BasePlugin {
             }
         };
         this.onWindowBlur = () => this.cancel('blur');
-        this.reapplyCommittedSizes = () => this.applyCommittedSizes(false);
-        this.rebuildCommittedSizes = () => this.applyCommittedSizes(true);
-        this.syncAppliedIndexes = () => {
-            for (const [rowType, committed] of this.committedSizes) {
+        this.updateBottomAnchorState = ({ detail, }) => {
+            if (detail.dimension !== 'rgRow') {
+                return;
+            }
+            this.keepBottomAnchor = this.isMainViewportAtBottom(detail.coordinate);
+        };
+        this.applyPendingBottomAnchor = () => {
+            if (!this.pendingBottomAnchor) {
+                return;
+            }
+            this.pendingBottomAnchor = false;
+            const dimension = this.providers.dimension.stores.rgRow.store;
+            // Scroll surfaces have slightly different client sizes. Give the shared
+            // scrolling service the content end and let each surface clamp to its own
+            // exact bottom coordinate.
+            void this.revogrid.scrollToCoordinate({ y: dimension.get('realSize') });
+        };
+        this.scheduleRowDefinitionRemap = () => {
+            if (this.rowDefinitionRemapQueued) {
+                return;
+            }
+            this.rowDefinitionRemapQueued = true;
+            queueMicrotask(() => {
+                if (!this.rowDefinitionRemapQueued) {
+                    return;
+                }
+                this.pruneRowDefinitions();
+                this.reapplyRowDefinitionSizes();
+                this.rowDefinitionRemapQueued = false;
+            });
+        };
+        /** Map source-indexed row definitions back onto the current virtual order. */
+        this.reapplyRowDefinitionSizes = () => {
+            const rowDefinitions = this.providers.dimension.getRowDefinitions();
+            for (const rowType of rowTypes) {
                 const items = this.providers.data.stores[rowType].store.get('items');
+                const definitions = new Map(rowDefinitions
+                    .filter(definition => definition.type === rowType)
+                    .map(definition => [definition.index, definition.size]));
+                const appliedIndexes = this.appliedDefinitionIndexes.get(rowType);
+                if (!definitions.size && !(appliedIndexes === null || appliedIndexes === void 0 ? void 0 : appliedIndexes.size)) {
+                    continue;
+                }
+                const dimension = this.providers.dimension.stores[rowType];
+                const currentSizes = dimension.store.get('sizes');
+                const sizes = Object.assign({}, currentSizes);
+                for (const index of appliedIndexes || []) {
+                    delete sizes[index];
+                }
                 const indexes = new Set();
                 items.forEach((physicalIndex, virtualIndex) => {
-                    if (committed.has(physicalIndex)) {
+                    const size = definitions.get(physicalIndex);
+                    if (size !== undefined) {
+                        sizes[virtualIndex] = size;
                         indexes.add(virtualIndex);
                     }
                 });
-                this.appliedIndexes.set(rowType, indexes);
+                this.appliedDefinitionIndexes.set(rowType, indexes);
+                const sizeKeys = Object.keys(sizes);
+                if (sizeKeys.length !== Object.keys(currentSizes).length ||
+                    sizeKeys.some(index => sizes[index] !== currentSizes[index])) {
+                    this.providers.dimension.setCustomSizes(rowType, sizes);
+                }
             }
         };
         this.config = resolveRowResizeConfig(config);
-        this.rowDefinitionsRef = revogrid.rowDefinitions;
         if (new.target !== RowResizePlugin) {
             this.enabled = true;
             this.registerEventListeners();
@@ -20197,77 +20336,53 @@ class RowResizePlugin extends BasePlugin {
     }
     registerEventListeners() {
         this.addEventListener('beforerowrender', this.decorateRow);
-        this.addEventListener('beforeanysource', ({ detail }) => {
+        this.addEventListener('beforeanysource', () => {
             this.cancel('data-change');
-            const committed = this.committedSizes.get(detail.type);
-            if (!committed) {
-                return;
-            }
-            const removedIndexes = new Set();
-            for (const index of committed.keys()) {
-                if (index >= detail.source.length) {
-                    committed.delete(index);
-                    removedIndexes.add(index);
-                }
-            }
-            if (removedIndexes.size) {
-                const rowDefinitions = this.revogrid.rowDefinitions.filter(definition => definition.type !== detail.type ||
-                    !removedIndexes.has(definition.index));
-                this.rowDefinitionsRef = rowDefinitions;
-                this.revogrid.rowDefinitions = rowDefinitions;
-            }
+            this.keepBottomAnchor = false;
+        });
+        this.addEventListener('afteranysource', ({ detail }) => {
+            this.pendingSourceCounts.set(detail.type, detail.source.length);
+            this.scheduleRowDefinitionRemap();
         });
-        this.addEventListener('afteranysource', this.rebuildCommittedSizes);
         this.addEventListener('beforesourcesortingapply', this.cancelForDataChange);
-        this.addEventListener('aftersortingapply', this.reapplyCommittedSizes);
+        this.addEventListener('beforesortingapply', this.cancelForDataChange);
+        this.addEventListener('sortingconfigchanged', this.cancelForDataChange);
+        this.addEventListener(BEFORE_GROUPING_APPLY_EVENT, this.cancelForDataChange);
+        this.addEventListener('aftersortingapply', this.scheduleRowDefinitionRemap);
         this.addEventListener('beforefilterapply', this.cancelForDataChange);
-        this.addEventListener('beforerowdefinition', ({ detail }) => {
+        this.addEventListener('afterfilterapply', this.scheduleRowDefinitionRemap);
+        this.addEventListener('beforerowdefinition', () => {
             this.cancel('data-change');
-            if (detail.vals !== this.rowDefinitionsRef) {
-                this.committedSizes.clear();
-                this.appliedIndexes.clear();
-                this.rowDefinitionsRef = detail.vals;
-            }
-        });
-        this.addEventListener('afterthemechanged', this.reapplyCommittedSizes);
-        this.addEventListener('aftertrimmed', this.syncAppliedIndexes);
-        this.addEventListener('roworderchange', () => {
-            queueMicrotask(this.reapplyCommittedSizes);
+            this.scheduleRowDefinitionRemap();
         });
+        this.addEventListener('afterthemechanged', this.scheduleRowDefinitionRemap);
+        this.addEventListener('aftertrimmed', this.scheduleRowDefinitionRemap);
+        this.addEventListener('roworderchange', this.scheduleRowDefinitionRemap);
         this.addEventListener(GROUP_EXPAND_EVENT, () => {
-            queueMicrotask(this.reapplyCommittedSizes);
+            if (this.keepBottomAnchor) {
+                this.pendingBottomAnchor = true;
+            }
+            this.scheduleRowDefinitionRemap();
         });
+        this.addEventListener('aftergridrender', this.applyPendingBottomAnchor);
+        this.addEventListener('viewportscroll', this.updateBottomAnchorState);
         this.addEventListener('rowheaderschanged', ({ detail }) => {
             if (!detail && !this.config.fullRow) {
                 this.cancel('row-headers-hidden');
             }
         });
     }
-    controlFromGridProperty() {
-        this.gridResizeRow = this.revogrid.resizeRow;
-        this.gridPlugins = this.revogrid.plugins;
-        this.syncGridProperty(false);
-        this.watch('resizeRow', value => {
-            this.gridResizeRow = value;
-            this.syncGridProperty();
-        });
-        this.watch('plugins', value => {
-            this.gridPlugins = value || [];
-            this.syncGridProperty();
-        });
-    }
-    syncGridProperty(refresh = true) {
-        const hasConfiguredPlugin = this.gridPlugins.some(plugin => plugin !== RowResizePlugin &&
+    syncGridConfig(refresh = true) {
+        const { plugins = [], resizeRow } = this.revogrid;
+        const isCorePlugin = this.constructor === RowResizePlugin;
+        const hasConfiguredPlugin = plugins.some(plugin => plugin !== RowResizePlugin &&
             plugin.prototype instanceof RowResizePlugin);
-        const explicitlyEnabled = this.gridPlugins.includes(RowResizePlugin);
-        const enabled = hasConfiguredPlugin
-            ? false
-            : explicitlyEnabled || !!this.gridResizeRow;
-        const config = resolveRowResizeConfig(!hasConfiguredPlugin &&
-            !explicitlyEnabled &&
-            typeof this.gridResizeRow === 'object'
-            ? this.gridResizeRow
-            : undefined);
+        const enabled = !isCorePlugin ||
+            (!hasConfiguredPlugin && !!resizeRow);
+        const resizeConfig = typeof resizeRow === 'object' ? resizeRow : undefined;
+        const config = isCorePlugin
+            ? resolveRowResizeConfig(resizeConfig)
+            : this.config;
         const configChanged = config.minHeight !== this.config.minHeight ||
             config.maxHeight !== this.config.maxHeight ||
             config.fullRow !== this.config.fullRow;
@@ -20279,10 +20394,13 @@ class RowResizePlugin extends BasePlugin {
         if (enabled !== this.enabled) {
             this.enabled = enabled;
             if (enabled) {
-                this.rowDefinitionsRef = this.revogrid.rowDefinitions;
                 this.registerEventListeners();
             }
             else {
+                this.pendingBottomAnchor = false;
+                this.keepBottomAnchor = false;
+                this.rowDefinitionRemapQueued = false;
+                this.pendingSourceCounts.clear();
                 this.clearSubscriptions();
             }
         }
@@ -20301,6 +20419,7 @@ class RowResizePlugin extends BasePlugin {
         }
         const dimension = this.providers.dimension.stores[rowType];
         const dimensionState = dimension.getCurrentState();
+        const viewport = this.providers.viewport.stores[rowType];
         const item = getItemByIndex(dimensionState, index);
         const focusedStore = this.providers.selection.focusedStore;
         const selectedRowType = focusedStore
@@ -20332,16 +20451,23 @@ class RowResizePlugin extends BasePlugin {
             currentHeight: startHeight,
             previousSizes,
             originalCustomSizes: Object.assign({}, dimensionState.sizes),
-            startEvent: event,
+            bottomAnchored: rowType === 'rgRow' &&
+                this.isMainViewportAtBottom(viewport.lastCoordinate),
             lastEvent: event,
         };
+        this.active = active;
         const beforeEvent = this.emit(BEFORE_ROW_RESIZE_EVENT, this.eventDetail(active, event, startHeight));
         if (beforeEvent.defaultPrevented) {
+            if (this.active === active) {
+                this.active = undefined;
+            }
+            return;
+        }
+        if (!this.enabled || this.active !== active) {
             return;
         }
         event.preventDefault();
         event.stopPropagation();
-        this.active = active;
         const doc = this.revogrid.ownerDocument;
         this.previousBodyCursor = ((_a = doc.body) === null || _a === void 0 ? void 0 : _a.style.cursor) || '';
         if (doc.body) {
@@ -20364,6 +20490,7 @@ class RowResizePlugin extends BasePlugin {
             return;
         }
         this.providers.dimension.setCustomSizes(active.rowType, createRowResizePatch(active.indexes, size), true);
+        this.requestBottomAnchor(active);
         active.currentHeight = size;
         this.emit(ROW_RESIZE_EVENT, this.eventDetail(active, active.lastEvent, size));
     }
@@ -20382,7 +20509,8 @@ class RowResizePlugin extends BasePlugin {
             }
         }
         this.providers.dimension.setCustomSizes(active.rowType, currentSizes);
-        const detail = Object.assign(Object.assign({}, this.eventDetail(active, active.lastEvent || active.startEvent, active.startHeight)), { reason });
+        this.requestBottomAnchor(active);
+        const detail = Object.assign(Object.assign({}, this.eventDetail(active, active.lastEvent, active.startHeight)), { reason });
         this.finishGesture();
         this.emit(ROW_RESIZE_CANCEL_EVENT, detail);
     }
@@ -20401,51 +20529,44 @@ class RowResizePlugin extends BasePlugin {
             return;
         }
         const items = this.providers.data.stores[active.rowType].store.get('items');
-        let committed = this.committedSizes.get(active.rowType);
-        if (!committed) {
-            committed = new Map();
-            this.committedSizes.set(active.rowType, committed);
-        }
-        let applied = this.appliedIndexes.get(active.rowType);
-        if (!applied) {
-            applied = new Set();
-            this.appliedIndexes.set(active.rowType, applied);
-        }
         const physicalIndexes = active.indexes.reduce((result, index) => {
             const physicalIndex = items[index];
             if (physicalIndex !== undefined) {
-                committed.set(physicalIndex, active.currentHeight);
-                applied.add(index);
                 result.push(physicalIndex);
             }
             return result;
         }, []);
         if (physicalIndexes.length) {
-            const rowDefinitions = mergeRowResizeDefinitions(this.revogrid.rowDefinitions, active.rowType, physicalIndexes, active.currentHeight);
-            this.rowDefinitionsRef = rowDefinitions;
-            this.revogrid.rowDefinitions = rowDefinitions;
+            const rowDefinitions = mergeRowResizeDefinitions(this.providers.dimension.getRowDefinitions(), active.rowType, physicalIndexes, active.currentHeight);
+            this.providers.dimension.setRowDefinitions(rowDefinitions);
+            this.scheduleRowDefinitionRemap();
+            this.keepBottomAnchor = active.bottomAnchored;
+            this.requestBottomAnchor(active);
         }
     }
-    applyCommittedSizes(clearAppliedIndexes) {
-        for (const [rowType, committed] of this.committedSizes) {
-            const dimension = this.providers.dimension.stores[rowType];
-            const sizes = Object.assign({}, dimension.store.get('sizes'));
-            if (clearAppliedIndexes) {
-                for (const index of this.appliedIndexes.get(rowType) || []) {
-                    delete sizes[index];
-                }
-            }
-            const items = this.providers.data.stores[rowType].store.get('items');
-            const indexes = new Set();
-            items.forEach((physicalIndex, virtualIndex) => {
-                const size = committed.get(physicalIndex);
-                if (size !== undefined) {
-                    sizes[virtualIndex] = size;
-                    indexes.add(virtualIndex);
-                }
-            });
-            this.appliedIndexes.set(rowType, indexes);
-            this.providers.dimension.setCustomSizes(rowType, sizes);
+    requestBottomAnchor(active) {
+        if (active.bottomAnchored) {
+            this.pendingBottomAnchor = true;
+        }
+    }
+    isMainViewportAtBottom(coordinate) {
+        const dimension = this.providers.dimension.stores.rgRow.getCurrentState();
+        const viewport = this.providers.viewport.stores.rgRow.store.state;
+        return (dimension.realSize > viewport.clientSize &&
+            coordinate >= getViewportMaxCoordinate(dimension, viewport.virtualSize));
+    }
+    pruneRowDefinitions() {
+        if (!this.pendingSourceCounts.size) {
+            return;
+        }
+        const definitions = this.providers.dimension.getRowDefinitions();
+        const rowDefinitions = definitions.filter(definition => {
+            const count = this.pendingSourceCounts.get(definition.type);
+            return count === undefined || definition.index < count;
+        });
+        this.pendingSourceCounts.clear();
+        if (rowDefinitions.length !== definitions.length) {
+            this.providers.dimension.setRowDefinitions(rowDefinitions);
         }
     }
     finishGesture() {
@@ -20468,6 +20589,9 @@ class RowResizePlugin extends BasePlugin {
     }
     destroy() {
         this.cancel('destroy');
+        this.keepBottomAnchor = false;
+        this.rowDefinitionRemapQueued = false;
+        this.pendingSourceCounts.clear();
         super.destroy();
     }
 }
@@ -21344,29 +21468,31 @@ class RevoGridComponent {
             vals: after,
             oldVals: before,
         });
-        // apply new values
+        this.dimensionProvider.syncRowDefinitions(newVal);
         const newRows = rowDefinitionByType(newVal);
-        // clear current defs
-        if (oldVal) {
-            const remove = rowDefinitionRemoveByType(oldVal);
-            // clear all old data and drop sizes
-            for (const t in remove) {
-                if (remove.hasOwnProperty(t)) {
-                    const type = t;
-                    const store = this.dataProvider.stores[type];
-                    const sourceLength = store.store.get('source').length;
-                    this.dimensionProvider.clearSize(type, sourceLength);
-                }
-            }
-        }
-        // set new sizes
+        const oldRows = rowDefinitionByType(oldVal);
+        const dataProvider = this.dataProvider;
+        const dimensionProvider = this.dimensionProvider;
         rowTypes.forEach((t) => {
-            var _a;
             const newSizes = newRows[t];
-            // apply new sizes or force update
-            if (newSizes || forceUpdate) {
-                (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(t, (newSizes === null || newSizes === void 0 ? void 0 : newSizes.sizes) || {});
+            const oldSizes = oldRows[t];
+            if (!newSizes && !oldSizes && !forceUpdate) {
+                return;
             }
+            const sizes = Object.assign({}, dimensionProvider.stores[t].store.get('sizes'));
+            const definitionSizes = (newSizes === null || newSizes === void 0 ? void 0 : newSizes.sizes) || {};
+            const previousDefinitionSizes = (oldSizes === null || oldSizes === void 0 ? void 0 : oldSizes.sizes) || {};
+            const items = dataProvider.stores[t].store.get('items');
+            items.forEach((physicalIndex, virtualIndex) => {
+                if (Object.hasOwn(previousDefinitionSizes, physicalIndex) &&
+                    sizes[virtualIndex] === previousDefinitionSizes[physicalIndex]) {
+                    delete sizes[virtualIndex];
+                }
+                if (Object.hasOwn(definitionSizes, physicalIndex)) {
+                    sizes[virtualIndex] = definitionSizes[physicalIndex];
+                }
+            });
+            dimensionProvider.setCustomSizes(t, sizes);
         });
     }
     trimmedRowsChanged(newVal = {}) {
@@ -21415,6 +21541,9 @@ class RevoGridComponent {
     rowHeadersChange(rowHeaders) {
         this.rowheaderschanged.emit(rowHeaders);
     }
+    resizeRowChanged() {
+        this.syncRowResizeConfig();
+    }
     /**
      * Register external VNodes
      */
@@ -21437,6 +21566,7 @@ class RevoGridComponent {
      */
     pluginsChanged(plugins = [], prevPlugins) {
         this.pluginService.addUserPluginsAndCreate(this.element, plugins, prevPlugins, this.getPluginData());
+        this.syncRowResizeConfig();
     }
     // #endregion
     // #region Plugins
@@ -21477,11 +21607,15 @@ class RevoGridComponent {
         this.pluginService.add(new SortingPlugin(this.element, pluginData));
         // register grouping plugin
         this.pluginService.add(new GroupingRowPlugin(this.element, pluginData));
-        this.pluginService.add(RowResizePlugin.fromGridProperty(this.element, pluginData));
+        this.pluginService.add(new RowResizePlugin(this.element, pluginData));
         if (this.canMoveColumns) {
             this.pluginService.add(new ColumnMovePlugin(this.element, pluginData));
         }
     }
+    syncRowResizeConfig() {
+        const plugin = this.pluginService.getByClass(RowResizePlugin);
+        plugin === null || plugin === void 0 ? void 0 : plugin.syncGridConfig();
+    }
     getPluginData() {
         if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider || !this.selectionStoreConnector) {
             return;
@@ -21524,6 +21658,9 @@ class RevoGridComponent {
         this.themeService.setDefinitions(this.themeDefinitions);
         this.dimensionProvider = new DimensionProvider(this.viewportProvider, {
             realSizeChanged: (k) => this.contentsizechanged.emit(k),
+            rowDefinitionsChanged: definitions => {
+                this.rowDefinitions = definitions;
+            },
         });
         this.dimensionProvider.setSettings({ originItemSize: getColumnSize(this.colSize) }, 'rgCol');
         this.columnProvider = new ColumnDataProvider();
@@ -21714,6 +21851,9 @@ class RevoGridComponent {
         "rowHeaders": [{
                 "rowHeadersChange": 0
             }],
+        "resizeRow": [{
+                "resizeRowChanged": 0
+            }],
         "registerVNode": [{
                 "registerOutsideVNodes": 0
             }],