@revolist/revogrid 4.26.2 → 4.27.1

package/dist/revo-grid/revo-grid.entry.js

@@ -2,16 +2,16 @@
  * Built by Revolist OU ❤️
  */
 import { h, r as registerInstance, a as createEvent, d as Host, g as getElement } from './index-CtimkLsB.js';
-import { c as columnTypes, J as reduce, C as getColumnType, r as rowTypes, i as isRowType, D as getColumnSizes, a as cropCellToMax, n as nextCell, I as getColumnByProp, F as getColumns } from './column.service-Cfw3L0PN.js';
-import { D as DataStore, b as getSourceItem, f as getSourceItemVirtualIndexByProp, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, a as getVisibleSourceItem, h as gatherTrimmedItems, k as getItemByIndex, R as RESIZE_INTERVAL } from './dimension.helpers-fl4HSSK9.js';
+import { c as columnTypes, K as reduce, D as getColumnType, r as rowTypes, i as isRowType, E as getColumnSizes, a as cropCellToMax, n as nextCell, J as getColumnByProp, H as getColumns } from './column.service-pu_fdQ0S.js';
+import { D as DataStore, b as getSourceItem, f as getSourceItemVirtualIndexByProp, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, h as gatherTrimmedItems, l as getItemByIndex, R as RESIZE_INTERVAL, a as getVisibleSourceItem } from './dimension.helpers-Cln9sALu.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
 import { g as getScrollDimension, v as viewportDataPartition, F as FOOTER_SLOT, C as CONTENT_SLOT, H as HEADER_SLOT, D as DATA_SLOT } from './viewport.helpers-CoCAvmZs.js';
-import { D as DimensionStore, t as themeTokenCssVariables, S as SelectionStore, B as BasePlugin, G as GroupingRowPlugin, a as StretchColumn, i as isStretchPlugin, A as AutoSizeColumnPlugin, f as FilterPlugin, E as ExportFilePlugin, x as SortingPlugin, u as ColumnMovePlugin } from './column.drag.plugin-DDBKeTGI.js';
-import { V as ViewportStore } from './viewport.store-BSXmsiZc.js';
-import { t as timeout } from './index-D24ku9ej.js';
+import { D as DimensionStore, t as themeTokenCssVariables, S as SelectionStore, B as BasePlugin, G as GroupingRowPlugin, a as StretchColumn, i as isStretchPlugin, A as AutoSizeColumnPlugin, f as FilterPlugin, E as ExportFilePlugin, P as SortingPlugin, I as RowResizePlugin, u as ColumnMovePlugin } from './row-resize.plugin-DBOgjLdE.js';
+import { V as ViewportStore } from './viewport.store-DWMKRDSH.js';
+import { t as timeout } from './index-BvMNbQyq.js';
 import { g as getPropertyFromEvent } from './events-BvSmBueA.js';
 import './filter.button-DMhpuAiw.js';
-import './header-cell-renderer-Cqtg1ETB.js';
+import './header-cell-renderer-YCiVIQ2E.js';
 
 class ColumnDataProvider {
     get stores() {
@@ -228,9 +228,15 @@ class DataProvider {
         store.addTrimmed(trimmed);
         this.dimensionProvider.setTrimmed(trimmed, type);
         if (type === 'rgRow') {
-            this.dimensionProvider.setData(getVisibleSourceItem(store.store).length, type);
+            this.dimensionProvider.setData(store.store.get('items').length, type);
         }
     }
+    /** Keep a row source empty until its current asynchronous update is ready. */
+    setItemsPending(pending, type = 'rgRow') {
+        const store = this.stores[type];
+        store.setItemsPending(pending);
+        this.dimensionProvider.setData(store.store.get('items').length, type, type !== 'rgRow');
+    }
 }
 
 const DEFAULT_VIRTUAL_X = ['rgCol'];
@@ -246,7 +252,9 @@ function isVirtualXDimension(type, disableVirtualX = false, virtualX = DEFAULT_V
 class DimensionProvider {
     constructor(viewports, config) {
         this.viewports = viewports;
-        const sizeChanged = debounce((k) => config.realSizeChanged(k), RESIZE_INTERVAL);
+        this.config = config;
+        this.rowDefinitions = [];
+        const sizeChanged = debounce((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));
@@ -264,6 +272,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
@@ -720,7 +742,7 @@ class ViewportService {
         const changedItems = {};
         for (const i of Object.keys(detail || {})) {
             const size = detail[i];
-            const virtualIndex = parseInt(i, 10);
+            const virtualIndex = Number.parseInt(i, 10);
             const item = getSourceItem(store, virtualIndex);
             if (item) {
                 changedItems[virtualIndex] = Object.assign(Object.assign({}, item), { size });
@@ -849,29 +871,25 @@ class GridScrollingService {
         this.elements = {};
     }
     async proxyScroll(e, key, skipEvent) {
-        var _a;
         let newEventPromise;
         let event = e;
-        for (let elKey in (skipEvent ? {} : this.elements)) {
+        for (const elKey in (skipEvent ? {} : this.elements)) {
             // skip
             if (e.dimension === 'rgCol' && elKey === 'headerRow') {
                 continue;
                 // pinned column only
             }
-            else if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
+            if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
                 if (elKey === key || !e.delta) {
                     continue;
                 }
-                for (let el of this.elements[elKey]) {
-                    if (el.changeScroll) {
-                        newEventPromise = el.changeScroll(e);
-                    }
+                const changedEvent = this.changeScroll(this.elements[elKey], e);
+                if (changedEvent) {
+                    newEventPromise = changedEvent;
                 }
             }
             else {
-                for (let el of this.elements[elKey]) {
-                    await ((_a = el.setScroll) === null || _a === void 0 ? void 0 : _a.call(el, e));
-                }
+                await this.setScroll(this.elements[elKey], e);
             }
         }
         const newEvent = await newEventPromise;
@@ -881,12 +899,27 @@ class GridScrollingService {
         this.setViewport(skipEvent && this.isPinnedColumn(key)
             ? Object.assign(Object.assign({}, event), { dimension: key }) : event);
     }
+    changeScroll(elements, e) {
+        let changedEvent;
+        for (const element of elements) {
+            if (element.changeScroll) {
+                changedEvent = element.changeScroll(e);
+            }
+        }
+        return changedEvent;
+    }
+    async setScroll(elements, e) {
+        var _a;
+        for (const element of elements) {
+            await ((_a = element.setScroll) === null || _a === void 0 ? void 0 : _a.call(element, e));
+        }
+    }
     /**
      * Silent scroll update for mobile devices when we have negative scroll top
      */
     async scrollSilentService(e, key) {
         var _a;
-        for (let elKey in this.elements) {
+        for (const elKey in this.elements) {
             // skip same element update
             if (elKey === key) {
                 continue;
@@ -894,7 +927,7 @@ class GridScrollingService {
             if (columnTypes.includes(key) &&
                 (elKey === 'headerRow' ||
                     columnTypes.includes(elKey))) {
-                for (let el of this.elements[elKey]) {
+                for (const el of this.elements[elKey]) {
                     await ((_a = el.changeScroll) === null || _a === void 0 ? void 0 : _a.call(el, e, true));
                 }
                 continue;
@@ -902,7 +935,7 @@ class GridScrollingService {
         }
     }
     isPinnedColumn(key) {
-        return !!key && ['colPinStart', 'colPinEnd'].indexOf(key) > -1;
+        return !!key && ['colPinStart', 'colPinEnd'].includes(key);
     }
     registerElements(els) {
         this.elements = els;
@@ -1183,9 +1216,11 @@ class SelectionStoreConnector {
                     continue;
                 }
                 const lastCell = store.store.get('lastCell');
-                if (lastCell) {
-                    store.setRange({ x: 0, y: 0 }, { x: lastCell.x - 1, y: lastCell.y - 1 });
+                if (!lastCell || lastCell.x <= 0 || lastCell.y <= 0) {
+                    store.setRangeArea(null);
+                    continue;
                 }
+                store.setRange({ x: 0, y: 0 }, { x: lastCell.x - 1, y: lastCell.y - 1 });
             }
         }
     }
@@ -1287,24 +1322,12 @@ 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;
-};
 
 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.
@@ -1348,14 +1371,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)) || {};
@@ -1370,7 +1393,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) => {
@@ -1417,7 +1440,7 @@ class PluginService {
             return;
         }
         // Step 1: Identify plugins to remove, compare new and old plugins
-        const pluginsToRemove = (prevPlugins === null || prevPlugins === void 0 ? void 0 : prevPlugins.filter(prevPlugin => !plugins.some(userPlugin => userPlugin === prevPlugin))) || [];
+        const pluginsToRemove = (prevPlugins === null || prevPlugins === void 0 ? void 0 : prevPlugins.filter(prevPlugin => !plugins.includes(prevPlugin))) || [];
         // Step 2: Remove old plugins
         pluginsToRemove.forEach(plugin => {
             var _a, _b;
@@ -1430,7 +1453,7 @@ class PluginService {
         // Step 3: Register user plugins
         plugins === null || plugins === void 0 ? void 0 : plugins.forEach(userPlugin => {
             // check if plugin already exists, if so, skip
-            const existingPlugin = this.internalPlugins.find(createdPlugin => createdPlugin instanceof userPlugin);
+            const existingPlugin = this.internalPlugins.some(createdPlugin => createdPlugin instanceof userPlugin);
             if (existingPlugin) {
                 return;
             }
@@ -1638,7 +1661,12 @@ const RevoGridComponent = class {
         /** When true, grid in read only mode. */
         this.readonly = false;
         /** When true, columns are resizable. */
-        this.resize = false;
+        this.resize = true;
+        /**
+         * Enables row resizing. Pass a configuration object to customize the
+         * height limits or enable resize edges across the full row.
+         */
+        this.resizeRow = false;
         /**
          * Prevents horizontal scroll state from being mirrored across viewport sections.
          */
@@ -1709,15 +1737,15 @@ const RevoGridComponent = class {
          */
         this.autoSizeColumn = false;
         /**
-         * Enables filter plugin.
+         * Enables filter plugin. Enabled by default; set to `false` to opt out.
          * Can be boolean.
          * Or can be filter collection See `FilterCollection` for more info.
          */
-        this.filter = false;
+        this.filter = true;
         /**
          * Enable column move plugin.
          */
-        this.canMoveColumns = false;
+        this.canMoveColumns = true;
         /**
          * Trimmed rows.
          * Functionality which allows to hide rows from main data set.
@@ -1727,7 +1755,7 @@ const RevoGridComponent = class {
         /**
          * Enable export plugin.
          */
-        this.exporting = false;
+        this.exporting = true;
         /**
          * Stretch strategy for columns by `StretchColumn` plugin.
          * For example if there are more space on the right last column size would be increased.
@@ -1819,7 +1847,7 @@ const RevoGridComponent = class {
         var _a;
         if (this.dataProvider && this.columnProvider && !skipDataUpdate) {
             const columnProp = (_a = this.columnProvider.getColumn(col, colType)) === null || _a === void 0 ? void 0 : _a.prop;
-            if (typeof columnProp !== 'undefined') {
+            if (columnProp !== undefined) {
                 this.dataProvider.setCellData({
                     type: rowType,
                     rowIndex: row,
@@ -2415,29 +2443,31 @@ const RevoGridComponent = class {
             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 = {}) {
@@ -2486,6 +2516,9 @@ const RevoGridComponent = class {
     rowHeadersChange(rowHeaders) {
         this.rowheaderschanged.emit(rowHeaders);
     }
+    resizeRowChanged() {
+        this.syncRowResizeConfig();
+    }
     /**
      * Register external VNodes
      */
@@ -2508,6 +2541,7 @@ const RevoGridComponent = class {
      */
     pluginsChanged(plugins = [], prevPlugins) {
         this.pluginService.addUserPluginsAndCreate(this.element, plugins, prevPlugins, this.getPluginData());
+        this.syncRowResizeConfig();
     }
     // #endregion
     // #region Plugins
@@ -2548,10 +2582,15 @@ const RevoGridComponent = class {
         this.pluginService.add(new SortingPlugin(this.element, pluginData));
         // register grouping plugin
         this.pluginService.add(new GroupingRowPlugin(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;
@@ -2594,6 +2633,9 @@ const RevoGridComponent = class {
         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();
@@ -2784,6 +2826,9 @@ const RevoGridComponent = class {
         "rowHeaders": [{
                 "rowHeadersChange": 0
             }],
+        "resizeRow": [{
+                "resizeRowChanged": 0
+            }],
         "registerVNode": [{
                 "registerOutsideVNodes": 0
             }],

package/dist/revo-grid/revo-grid.esm.js

@@ -47,5 +47,5 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["revo-grid",[[260,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"noHorizontalScrollTransfer":[4,"no-horizontal-scroll-transfer"],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"applyOnClose":[4,"apply-on-close"],"plugins":[16],"columnTypes":[16],"theme":[1537],"themeDefinitions":[16],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"sorting":[16],"focusTemplate":[16],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"additionalData":[16],"disableVirtualX":[4,"disable-virtual-x"],"virtualX":[16],"disableVirtualY":[4,"disable-virtual-y"],"hideAttribution":[4,"hide-attribution"],"jobsBeforeRender":[16],"registerVNode":[16],"accessible":[4],"rtl":[4],"canDrag":[4,"can-drag"],"refresh":[64],"setDataAt":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"setCellsFocus":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getContentSize":[64],"getSelectedRange":[64],"refreshExtraElements":[64],"getProviders":[64]},[[5,"touchstart","mousedownHandle"],[5,"mousedown","mousedownHandle"],[5,"touchend","mouseupHandle"],[5,"mouseup","mouseupHandle"],[0,"rowdragstartinit","onRowDragStarted"],[0,"rowdragendinit","onRowDragEnd"],[0,"roworderchange","onRowOrderChange"],[0,"rowdragmoveinit","onRowDrag"],[0,"rowdragmousemove","onRowMouseMove"],[0,"celleditapply","onCellEdit"],[0,"rangeeditapply","onRangeEdit"],[0,"selectionchangeinit","onRangeChanged"],[0,"rowdropinit","onRowDropped"],[0,"beforeheaderclick","onHeaderClick"],[0,"beforecellfocusinit","onCellFocus"]],{"columnTypes":[{"columnTypesChanged":0}],"columns":[{"columnChanged":0}],"disableVirtualX":[{"disableVirtualXChanged":0}],"virtualX":[{"virtualXChanged":0}],"rowSize":[{"rowSizeChanged":0}],"colSize":[{"colSizeChanged":0}],"theme":[{"themeChanged":0}],"themeDefinitions":[{"themeDefinitionsChanged":0}],"source":[{"dataSourceChanged":0}],"pinnedBottomSource":[{"dataSourceChanged":0}],"pinnedTopSource":[{"dataSourceChanged":0}],"disableVirtualY":[{"disableVirtualYChanged":0}],"rowDefinitions":[{"rowDefChanged":0}],"trimmedRows":[{"trimmedRowsChanged":0}],"grouping":[{"groupingChanged":0}],"stretch":[{"applyStretch":0}],"filter":[{"applyFilter":0}],"sorting":[{"applySorting":0}],"rowHeaders":[{"rowHeadersChange":0}],"registerVNode":[{"registerOutsideVNodes":0}],"additionalData":[{"additionalDataChanged":0}],"rtl":[{"rtlChanged":0}],"plugins":[{"pluginsChanged":0}]}]]],["revogr-filter-panel",[[260,"revogr-filter-panel",{"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"closeOnOutsideClick":[4,"close-on-outside-click"],"allowDuplicateOperators":[4,"allow-duplicate-operators"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"filterItems":[32],"draggedFilterId":[32],"dragOverFilterId":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revogr-clipboard_3",[[0,"revogr-clipboard",{"readonly":[4],"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"],[4,"cut","cutStarted"]]],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16],"saveOnClose":[4,"save-on-close"],"additionalData":[8,"additional-data"],"cancelChanges":[64],"beforeDisconnect":[64]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"rowType":[1,"row-type"],"dragStart":[64],"endOrder":[64],"clearOrder":[64]}]]],["revogr-data_4",[[260,"revogr-data",{"readonly":[4],"range":[4],"rowClass":[1,"row-class"],"additionalData":[8,"additional-data"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16],"type":[513],"colType":[513,"col-type"],"jobsBeforeRender":[16],"providers":[32],"updateCell":[64]},null,{"dataStore":[{"onDataStoreChange":0}],"colData":[{"onColDataChange":0}]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"groups":[16],"groupingDepth":[2,"grouping-depth"],"readonly":[4],"canResize":[4,"can-resize"],"resizeHandler":[16],"colData":[16],"columnFilter":[4,"column-filter"],"type":[1],"additionalData":[8,"additional-data"]}],[260,"revogr-viewport-scroll",{"rowHeader":[4,"row-header"],"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"colType":[1,"col-type"],"noHorizontalScrollTransfer":[4,"no-horizontal-scroll-transfer"],"setScroll":[64],"changeScroll":[64],"applyScroll":[64]},[[0,"mousewheel-vertical","mousewheelVertical"],[0,"mousewheel-horizontal","mousewheelHorizontal"],[0,"scroll-coordinate","scrollApply"]]],[0,"vnode-html",{"redraw":[16]}]]],["revogr-attribution_7",[[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"rowClass":[1,"row-class"],"resize":[4],"rowHeaderColumn":[16],"additionalData":[8,"additional-data"],"jobsBeforeRender":[16]}],[260,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16],"applyChangesOnClose":[4,"apply-changes-on-close"],"additionalData":[8,"additional-data"],"isMobileDevice":[4,"is-mobile-device"]},[[5,"touchmove","onMouseMove"],[5,"mousemove","onMouseMove"],[5,"touchend","onMouseUp"],[5,"mouseup","onMouseUp"],[5,"mouseleave","onMouseUp"],[0,"dragstartcell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]],{"selectionStore":[{"selectionServiceSet":0}],"dimensionRow":[{"createAutoFillService":0}],"dimensionCol":[{"createAutoFillService":0}],"dataStore":[{"columnServiceSet":0}],"colData":[{"columnServiceSet":0}]}],[0,"revogr-attribution"],[260,"revogr-focus",{"colType":[1,"col-type"],"rowType":[1,"row-type"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"focusTemplate":[16]}],[0,"revogr-scroll-virtual",{"dimension":[1],"realSize":[2,"real-size"],"virtualSize":[2,"virtual-size"],"clientSize":[2,"client-size"],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-extra",{"nodes":[16],"update":[32],"refresh":[64]}]]]], options);
+  return bootstrapLazy([["revo-grid",[[260,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"resizeRow":[4,"resize-row"],"noHorizontalScrollTransfer":[4,"no-horizontal-scroll-transfer"],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"applyOnClose":[4,"apply-on-close"],"plugins":[16],"columnTypes":[16],"theme":[1537],"themeDefinitions":[16],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"sorting":[16],"focusTemplate":[16],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"additionalData":[16],"disableVirtualX":[4,"disable-virtual-x"],"virtualX":[16],"disableVirtualY":[4,"disable-virtual-y"],"hideAttribution":[4,"hide-attribution"],"jobsBeforeRender":[16],"registerVNode":[16],"accessible":[4],"rtl":[4],"canDrag":[4,"can-drag"],"refresh":[64],"setDataAt":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"setCellsFocus":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getContentSize":[64],"getSelectedRange":[64],"refreshExtraElements":[64],"getProviders":[64]},[[5,"touchstart","mousedownHandle"],[5,"mousedown","mousedownHandle"],[5,"touchend","mouseupHandle"],[5,"mouseup","mouseupHandle"],[0,"rowdragstartinit","onRowDragStarted"],[0,"rowdragendinit","onRowDragEnd"],[0,"roworderchange","onRowOrderChange"],[0,"rowdragmoveinit","onRowDrag"],[0,"rowdragmousemove","onRowMouseMove"],[0,"celleditapply","onCellEdit"],[0,"rangeeditapply","onRangeEdit"],[0,"selectionchangeinit","onRangeChanged"],[0,"rowdropinit","onRowDropped"],[0,"beforeheaderclick","onHeaderClick"],[0,"beforecellfocusinit","onCellFocus"]],{"columnTypes":[{"columnTypesChanged":0}],"columns":[{"columnChanged":0}],"disableVirtualX":[{"disableVirtualXChanged":0}],"virtualX":[{"virtualXChanged":0}],"rowSize":[{"rowSizeChanged":0}],"colSize":[{"colSizeChanged":0}],"theme":[{"themeChanged":0}],"themeDefinitions":[{"themeDefinitionsChanged":0}],"source":[{"dataSourceChanged":0}],"pinnedBottomSource":[{"dataSourceChanged":0}],"pinnedTopSource":[{"dataSourceChanged":0}],"disableVirtualY":[{"disableVirtualYChanged":0}],"rowDefinitions":[{"rowDefChanged":0}],"trimmedRows":[{"trimmedRowsChanged":0}],"grouping":[{"groupingChanged":0}],"stretch":[{"applyStretch":0}],"filter":[{"applyFilter":0}],"sorting":[{"applySorting":0}],"rowHeaders":[{"rowHeadersChange":0}],"resizeRow":[{"resizeRowChanged":0}],"registerVNode":[{"registerOutsideVNodes":0}],"additionalData":[{"additionalDataChanged":0}],"rtl":[{"rtlChanged":0}],"plugins":[{"pluginsChanged":0}]}]]],["revogr-filter-panel",[[260,"revogr-filter-panel",{"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"closeOnOutsideClick":[4,"close-on-outside-click"],"allowDuplicateOperators":[4,"allow-duplicate-operators"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"filterItems":[32],"draggedFilterId":[32],"dragOverFilterId":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revogr-clipboard_3",[[0,"revogr-clipboard",{"readonly":[4],"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"],[4,"cut","cutStarted"]]],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16],"saveOnClose":[4,"save-on-close"],"additionalData":[8,"additional-data"],"cancelChanges":[64],"beforeDisconnect":[64]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"rowType":[1,"row-type"],"dragStart":[64],"endOrder":[64],"clearOrder":[64]}]]],["revogr-data_4",[[260,"revogr-data",{"readonly":[4],"range":[4],"rowClass":[1,"row-class"],"additionalData":[8,"additional-data"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16],"type":[513],"colType":[513,"col-type"],"jobsBeforeRender":[16],"providers":[32],"updateCell":[64]},null,{"dataStore":[{"onDataStoreChange":0}],"colData":[{"onColDataChange":0}]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"groups":[16],"groupingDepth":[2,"grouping-depth"],"readonly":[4],"canResize":[4,"can-resize"],"resizeHandler":[16],"colData":[16],"columnFilter":[4,"column-filter"],"type":[1],"additionalData":[8,"additional-data"]}],[260,"revogr-viewport-scroll",{"rowHeader":[4,"row-header"],"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"colType":[1,"col-type"],"noHorizontalScrollTransfer":[4,"no-horizontal-scroll-transfer"],"setScroll":[64],"changeScroll":[64],"applyScroll":[64]},[[0,"mousewheel-vertical","mousewheelVertical"],[0,"mousewheel-horizontal","mousewheelHorizontal"],[0,"scroll-coordinate","scrollApply"]]],[0,"vnode-html",{"redraw":[16]}]]],["revogr-attribution_7",[[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"rowClass":[1,"row-class"],"resize":[4],"rowHeaderColumn":[16],"additionalData":[8,"additional-data"],"jobsBeforeRender":[16]}],[260,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16],"applyChangesOnClose":[4,"apply-changes-on-close"],"additionalData":[8,"additional-data"],"isMobileDevice":[4,"is-mobile-device"]},[[5,"touchmove","onMouseMove"],[5,"mousemove","onMouseMove"],[5,"touchend","onMouseUp"],[5,"mouseup","onMouseUp"],[5,"mouseleave","onMouseUp"],[0,"dragstartcell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]],{"selectionStore":[{"selectionServiceSet":0}],"dimensionRow":[{"createAutoFillService":0}],"dimensionCol":[{"createAutoFillService":0}],"dataStore":[{"columnServiceSet":0}],"colData":[{"columnServiceSet":0}]}],[0,"revogr-attribution"],[260,"revogr-focus",{"colType":[1,"col-type"],"rowType":[1,"row-type"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"focusTemplate":[16]}],[0,"revogr-scroll-virtual",{"dimension":[1],"realSize":[2,"real-size"],"virtualSize":[2,"virtual-size"],"clientSize":[2,"client-size"],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-extra",{"nodes":[16],"update":[32],"refresh":[64]}]]]], options);
 });

package/dist/revo-grid/revogr-attribution_7.entry.js

@@ -2,15 +2,15 @@
  * Built by Revolist OU ❤️
  */
 import { r as registerInstance, h, d as Host, a as createEvent, g as getElement } from './index-CtimkLsB.js';
-import { k as getItemByIndex, b as getSourceItem, j as getItemByPosition, F as FOCUS_CLASS, I as codesLetter, R as RESIZE_INTERVAL, y as MOBILE_CLASS, z as CELL_HANDLER_CLASS, S as SELECTION_BORDER_CLASS, D as DataStore, q as ROW_HEADER_TYPE, T as TMP_SELECTION_BG_CLASS } from './dimension.helpers-fl4HSSK9.js';
+import { l as getItemByIndex, b as getSourceItem, k as getItemByPosition, F as FOCUS_CLASS, J as codesLetter, R as RESIZE_INTERVAL, z as MOBILE_CLASS, A as CELL_HANDLER_CLASS, S as SELECTION_BORDER_CLASS, D as DataStore, r as ROW_HEADER_TYPE, T as TMP_SELECTION_BG_CLASS } from './dimension.helpers-Cln9sALu.js';
 import { g as getPropertyFromEvent, v as verifyTouchTarget } from './events-BvSmBueA.js';
-import { g as getRange, M as ColumnService, z as getCellData, N as getCellEditor, b as isRangeSingleCell } from './column.service-Cfw3L0PN.js';
-import { l as isShortcutModifier, m as isEditInput, c as isClear, d as isTab, f as isEnterKeyValue, h as isCopy, g as isCut, j as isPaste, k as isAll } from './edit.utils-4e9fsqOR.js';
-import { t as timeout, g as getScrollbarSize } from './index-D24ku9ej.js';
+import { g as getRange, N as ColumnService, z as getCellData, O as getCellEditor, b as isRangeSingleCell } from './column.service-pu_fdQ0S.js';
+import { l as isShortcutModifier, m as isEditInput, c as isClear, d as isTab, f as isEnterKeyValue, h as isCopy, g as isCut, j as isPaste, k as isAll } from './edit.utils-3ZbhQCv_.js';
+import { t as timeout, g as getScrollbarSize } from './index-BvMNbQyq.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
-import { V as ViewportStore, j as calculateRowHeaderSize } from './viewport.store-BSXmsiZc.js';
+import { V as ViewportStore, j as calculateRowHeaderSize } from './viewport.store-DWMKRDSH.js';
 import { H as HEADER_SLOT } from './viewport.helpers-CoCAvmZs.js';
-import { L as LocalScrollTimer, a as LocalScrollService, g as getContentSize, t as throttle } from './throttle-Cpk1LoGk.js';
+import { L as LocalScrollTimer, a as LocalScrollService, g as getContentSize, t as throttle } from './throttle-3rhqdcLy.js';
 
 const Attribution = class {
     constructor(hostRef) {
@@ -281,6 +281,16 @@ const DIRECTION_CODES = [
 class KeyboardService {
     constructor(sv) {
         this.sv = sv;
+        /** Keep focus transitions in keydown order so rendering can scroll each cell into view. */
+        this.keyChangeQueue = Promise.resolve(false);
+        this.keyChangeGeneration = 0;
+        this.applyingKeyChange = false;
+    }
+    /** Cancel delayed directional input after focus or edit context changes externally. */
+    invalidatePendingChanges() {
+        if (!this.applyingKeyChange) {
+            this.keyChangeGeneration += 1;
+        }
     }
     /**
      * Appends printable key input that arrives after edit mode was requested
@@ -383,13 +393,33 @@ class KeyboardService {
         if (!data) {
             return false;
         }
+        const keyChangeGeneration = this.keyChangeGeneration;
         // this interval needed for several cases
         // grid could be resized before next click
         // at this case to avoid screen jump we use this interval
         await timeout(RESIZE_INTERVAL + 30);
-        const range = this.sv.selectionStore.get('range');
-        const focus = this.sv.selectionStore.get('focus');
-        return this.keyPositionChange(data.changes, range, focus, data.isMulti);
+        const applyKeyChange = async () => {
+            if (keyChangeGeneration !== this.keyChangeGeneration) {
+                return false;
+            }
+            const range = this.sv.selectionStore.get('range');
+            const focus = this.sv.selectionStore.get('focus');
+            this.applyingKeyChange = true;
+            let changed;
+            try {
+                changed = this.keyPositionChange(data.changes, range, focus, data.isMulti);
+            }
+            finally {
+                this.applyingKeyChange = false;
+            }
+            await new Promise(resolve => requestAnimationFrame(() => {
+                requestAnimationFrame(() => resolve());
+            }));
+            return changed;
+        };
+        const queuedChange = this.keyChangeQueue.then(applyKeyChange, applyKeyChange);
+        this.keyChangeQueue = queuedChange.catch(() => false);
+        return queuedChange;
     }
     keyPositionChange(changes, range, focus, isMulti = false) {
         if (!range || !focus) {
@@ -773,6 +803,8 @@ const OverlaySelection = class {
      * Selection & Keyboard
      */
     selectionServiceSet(selectionStore) {
+        var _a;
+        (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.invalidatePendingChanges();
         // clear subscriptions
         this.unsubscribeSelectionStore.forEach(v => v());
         this.unsubscribeSelectionStore.length = 0;
@@ -800,6 +832,7 @@ const OverlaySelection = class {
             getData: () => this.getData(),
             selectAll: () => this.selectAll.emit(),
         });
+        this.unsubscribeSelectionStore.push(selectionStore.onChange('focus', () => { var _a; return (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.invalidatePendingChanges(); }), selectionStore.onChange('edit', () => { var _a; return (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.invalidatePendingChanges(); }));
         this.createAutoFillService();
     }
     /** Autofill */
@@ -836,11 +869,12 @@ const OverlaySelection = class {
         this.selectionServiceSet(this.selectionStore);
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         // clear subscriptions
+        (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.invalidatePendingChanges();
         this.unsubscribeSelectionStore.forEach(v => v());
         this.unsubscribeSelectionStore.length = 0;
-        (_a = this.columnService) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.columnService) === null || _b === void 0 ? void 0 : _b.destroy();
     }
     async componentWillRender() {
         var _a, _b;
@@ -852,9 +886,7 @@ const OverlaySelection = class {
     renderRange(range) {
         const cell = getCell(range, this.dimensionRow.state, this.dimensionCol.state);
         const styles = styleByCellProps(cell);
-        return [
-            h("div", { class: SELECTION_BORDER_CLASS, style: styles }, this.isMobileDevice && (h("div", { class: "range-handlers" }, h("span", { class: MOBILE_CLASS }), h("span", { class: MOBILE_CLASS })))),
-        ];
+        return (h("div", { class: SELECTION_BORDER_CLASS, style: styles }, this.isMobileDevice && (h("div", { class: "range-handlers" }, h("span", { class: MOBILE_CLASS }), h("span", { class: MOBILE_CLASS })))));
     }
     renderEditor() {
         // Check if edit access
@@ -907,7 +939,7 @@ const OverlaySelection = class {
             }
             // Range
             if (range) {
-                nodes.push(...this.renderRange(range));
+                nodes.push(this.renderRange(range));
             }
             // Autofill
             if (focus && !this.readonly && this.range) {
@@ -918,9 +950,9 @@ const OverlaySelection = class {
                 nodes.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (h(Host, { key: '2d8dc4fd40a883fe59b24b2cfac1c370b9f0ac16', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (h(Host, { key: '230e2122c5c7065c072f02019d616a64949d54d0', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '47740a79c605258b4024384510358be927d000b7', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -1117,12 +1149,12 @@ const OverlaySelection = class {
     clearCell() {
         var _a;
         const range = this.selectionStore.get('range');
-        if (range && !isRangeSingleCell(range)) {
+        const focused = this.selectionStore.get('focus');
+        if (range && (!isRangeSingleCell(range) || !focused)) {
             const data = this.columnService.getRangeStaticData(range, '');
             (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(data, range, range);
         }
         else if (this.canEdit()) {
-            const focused = this.selectionStore.get('focus');
             if (!focused) {
                 return;
             }

package/dist/revo-grid/revogr-clipboard_3.entry.js

@@ -2,11 +2,11 @@
  * Built by Revolist OU ❤️
  */
 import { r as registerInstance, a as createEvent, h, d as Host, g as getElement } from './index-CtimkLsB.js';
-import { E as EDIT_INPUT_WR, j as getItemByPosition, b as getSourceItem, A as DRAGG_TEXT } from './dimension.helpers-fl4HSSK9.js';
-import { T as TextEditor } from './text-editor-DlMnLkRK.js';
-import { n as isEditorCtrConstructible } from './edit.utils-4e9fsqOR.js';
+import { E as EDIT_INPUT_WR, k as getItemByPosition, b as getSourceItem, B as DRAGG_TEXT } from './dimension.helpers-Cln9sALu.js';
+import { T as TextEditor } from './text-editor-eHtrwvxH.js';
+import { n as isEditorCtrConstructible } from './edit.utils-3ZbhQCv_.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
-import './index-D24ku9ej.js';
+import './index-BvMNbQyq.js';
 
 const Clipboard = class {
     constructor(hostRef) {