@revolist/revogrid 4.22.0 → 4.23.0

package/dist/cjs/viewport.helpers-BND76K2j.js

@@ -0,0 +1,140 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+'use strict';
+
+const FALLBACK_MAX_SCROLL_SIZE = 16000000;
+const SCROLL_SIZE_GUARD = 1000000;
+let detectedMaxScrollSize;
+function getMaxScrollSize(doc = typeof document === 'undefined' ? undefined : document) {
+    if (typeof detectedMaxScrollSize === 'number') {
+        return detectedMaxScrollSize;
+    }
+    const body = doc === null || doc === void 0 ? void 0 : doc.body;
+    if (body) {
+        const ownerDocument = body.ownerDocument;
+        const element = ownerDocument.createElement('div');
+        element.style.cssText = [
+            'height:1px',
+            'left:-10000px',
+            'overflow:scroll',
+            'position:absolute',
+            'top:-10000px',
+            'visibility:hidden',
+            'width:1px',
+        ].join(';');
+        const content = ownerDocument.createElement('div');
+        content.style.height = `${FALLBACK_MAX_SCROLL_SIZE * 4}px`;
+        element.appendChild(content);
+        body.appendChild(element);
+        detectedMaxScrollSize = Math.max(0, Math.min(element.scrollHeight, FALLBACK_MAX_SCROLL_SIZE * 4) - SCROLL_SIZE_GUARD);
+        element.remove();
+        if (detectedMaxScrollSize > SCROLL_SIZE_GUARD) {
+            return detectedMaxScrollSize;
+        }
+        detectedMaxScrollSize = FALLBACK_MAX_SCROLL_SIZE;
+        return detectedMaxScrollSize;
+    }
+    return FALLBACK_MAX_SCROLL_SIZE;
+}
+function getScrollDimension({ contentSize, clientSize, virtualSize = 0, maxScrollSize = getMaxScrollSize(), }) {
+    const safeContentSize = Math.max(0, maxScrollSize - SCROLL_SIZE_GUARD);
+    const size = Math.max(0, contentSize);
+    const client = Math.max(0, clientSize);
+    const viewport = Math.max(0, virtualSize || client);
+    const logicalScrollSize = Math.max(0, size - viewport);
+    const maxPhysicalScrollSize = Math.max(0, safeContentSize - client);
+    const physicalScrollSize = Math.min(logicalScrollSize, maxPhysicalScrollSize);
+    const physicalContentSize = client + physicalScrollSize;
+    const isCompressed = logicalScrollSize > physicalScrollSize && physicalScrollSize > 0;
+    const clampLogical = (coordinate) => Math.min(Math.max(0, coordinate || 0), logicalScrollSize);
+    const clampPhysical = (coordinate) => Math.min(Math.max(0, coordinate || 0), physicalScrollSize);
+    const toLogicalCoordinate = (coordinate) => {
+        if (!logicalScrollSize || !physicalScrollSize) {
+            return 0;
+        }
+        if (!isCompressed) {
+            return clampLogical(coordinate);
+        }
+        return clampLogical((clampPhysical(coordinate) / physicalScrollSize) * logicalScrollSize);
+    };
+    const toPhysicalCoordinate = (coordinate) => {
+        if (!logicalScrollSize || !physicalScrollSize) {
+            return 0;
+        }
+        if (!isCompressed) {
+            return clampPhysical(coordinate);
+        }
+        return clampPhysical((clampLogical(coordinate) / logicalScrollSize) * physicalScrollSize);
+    };
+    return {
+        contentSize: size,
+        clientSize: client,
+        viewportSize: viewport,
+        physicalContentSize,
+        logicalScrollSize,
+        physicalScrollSize,
+        isCompressed,
+        toLogicalCoordinate,
+        toPhysicalCoordinate,
+        getRenderOffset(coordinate) {
+            const logical = clampLogical(coordinate);
+            return logical - toPhysicalCoordinate(logical);
+        },
+    };
+}
+
+/**
+ * Collects data for pinned columns in the required @ViewportProps format.
+ */
+/**
+ * Represents the slot names for the viewport slots.
+ */
+const HEADER_SLOT = 'header'; // Slot name for the header slot
+const FOOTER_SLOT = 'footer'; // Slot name for the footer slot
+const CONTENT_SLOT = 'content'; // Slot name for the content slot
+const DATA_SLOT = 'data'; // Slot name for the data slot
+/**
+ * Returns the last visible cell in the viewport for a given row type.
+ * Coordinates are not zero-based and are relative to the viewport.
+ * If needed to be zero-based they can be adjusted by subtracting 1.
+ */
+function getLastCell(data, rowType) {
+    // Get the last visible column count from the viewport column data.
+    const lastVisibleColumnCount = data.viewports[data.colType].store.get('realCount');
+    // Get the last visible row count for the given row type from the viewport column data.
+    const lastVisibleRowCount = data.viewports[rowType].store.get('realCount');
+    // Return the last visible cell with the last visible column count and row count.
+    return {
+        x: lastVisibleColumnCount,
+        y: lastVisibleRowCount,
+    };
+}
+function viewportDataPartition(data, type, slot, fixed) {
+    return {
+        colData: data.colStore,
+        viewportCol: data.viewports[data.colType].store,
+        viewportRow: data.viewports[type].store,
+        /**
+         * lastCell is the last real coordinate + 1, saved to selection store
+         */
+        lastCell: getLastCell(data, type),
+        slot,
+        type,
+        canDrag: !fixed,
+        position: data.position,
+        dataStore: data.rowStores[type].store,
+        dimensionCol: data.dimensions[data.colType].store,
+        dimensionRow: data.dimensions[type].store,
+        style: fixed
+            ? { height: `${data.dimensions[type].store.get('realSize')}px` }
+            : undefined,
+    };
+}
+
+exports.CONTENT_SLOT = CONTENT_SLOT;
+exports.DATA_SLOT = DATA_SLOT;
+exports.FOOTER_SLOT = FOOTER_SLOT;
+exports.HEADER_SLOT = HEADER_SLOT;
+exports.getScrollDimension = getScrollDimension;
+exports.viewportDataPartition = viewportDataPartition;

package/dist/cjs/{viewport.store-Dcjud-a-.js → viewport.store-BlKQ4x9H.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dimension_helpers = require('./dimension.helpers-CaIsYC99.js');
+var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
 
 const LETTER_BLOCK_SIZE = 10;
 const calculateRowHeaderSize = (itemsLength, rowHeaderColumn, minWidth = 50) => {
@@ -11,6 +11,15 @@ const calculateRowHeaderSize = (itemsLength, rowHeaderColumn, minWidth = 50) =>
         Math.max((itemsLength.toString().length + 1) * LETTER_BLOCK_SIZE, minWidth));
 };
 
+function getViewportMaxCoordinate(dimension, viewportSize, frameOffset = 1) {
+    if (!viewportSize || dimension.realSize <= viewportSize) {
+        return 0;
+    }
+    return Math.max(0, dimension.realSize - viewportSize - dimension.originItemSize * frameOffset);
+}
+function clampViewportCoordinate(coordinate, dimension, viewportSize, frameOffset = 1) {
+    return Math.min(Math.max(0, coordinate), getViewportMaxCoordinate(dimension, viewportSize, frameOffset));
+}
 /**
  * Update items based on new scroll position
  * If viewport wasn't changed fully simple recombination of positions
@@ -276,6 +285,8 @@ function initialState() {
         realCount: 0,
         // size of viewport in px
         clientSize: 0,
+        // logical-to-physical render offset used when scroll space is compressed
+        renderOffset: 0,
     };
 }
 /**
@@ -311,21 +322,8 @@ class ViewportStore {
         const outsize = singleOffsetInPx * 2;
         // math virtual size is based on visible area + 2 items outside of visible area
         const virtualSize = viewportSize + outsize;
-        // expected no scroll if real size less than virtual size, position is 0
-        let maxCoordinate = 0;
-        // if there is nodes outside of viewport, max coordinate has to be adjusted
-        if (dimension.realSize > viewportSize) {
-            // max coordinate is real size minus virtual/rendered space
-            maxCoordinate = dimension.realSize - viewportSize - singleOffsetInPx;
-        }
-        let pos = position;
-        // limit position to max and min coordinates
-        if (pos < 0) {
-            pos = 0;
-        }
-        else if (pos > maxCoordinate) {
-            pos = maxCoordinate;
-        }
+        const maxCoordinate = getViewportMaxCoordinate(dimension, viewportSize, frameOffset);
+        let pos = clampViewportCoordinate(position, dimension, viewportSize, frameOffset);
         // store last coordinate for further restore on redraw
         this.lastCoordinate = pos;
         // actual position is less than first item start based on offset
@@ -406,10 +404,12 @@ class ViewportStore {
 exports.ViewportStore = ViewportStore;
 exports.addMissingItems = addMissingItems;
 exports.calculateRowHeaderSize = calculateRowHeaderSize;
+exports.clampViewportCoordinate = clampViewportCoordinate;
 exports.getFirstItem = getFirstItem;
 exports.getItems = getItems;
 exports.getLastItem = getLastItem;
 exports.getUpdatedItemsByPosition = getUpdatedItemsByPosition;
+exports.getViewportMaxCoordinate = getViewportMaxCoordinate;
 exports.isActiveRange = isActiveRange;
 exports.isActiveRangeOutsideLastItem = isActiveRangeOutsideLastItem;
 exports.recombineByOffset = recombineByOffset;

package/dist/collection/components/clipboard/revogr-clipboard.js

@@ -66,8 +66,8 @@ export class Clipboard {
             return;
         }
         const data = this.getData(beforeCopy.detail.event);
-        this.copyRegion.emit(data || undefined);
         e.preventDefault();
+        this.copyRegion.emit(data || undefined);
     }
     /**
      * Listen to copy event and emit copy region event

package/dist/collection/components/data/revogr-data.js

@@ -102,11 +102,13 @@ export class RevogrData {
         const depth = this.dataStore.get('groupingDepth');
         const groupingCustomRenderer = this.dataStore.get('groupingCustomRenderer');
         const groupDepth = this.columnService.hasGrouping ? depth : 0;
+        const rowRenderOffset = this.viewportRow.get('renderOffset') || 0;
+        const colRenderOffset = this.viewportCol.get('renderOffset') || 0;
         for (let rgRow of rows) {
             const dataItem = getSourceItem(this.dataStore, rgRow.itemIndex);
             // #region Grouping
             if (isGrouping(dataItem)) {
-                const gmodel = Object.assign(Object.assign({}, rgRow), { index: rgRow.itemIndex, model: dataItem, groupingCustomRenderer,
+                const gmodel = Object.assign(Object.assign({}, rgRow), { start: rgRow.start - rowRenderOffset, index: rgRow.itemIndex, model: dataItem, groupingCustomRenderer,
                     // Only show expand button if grouping is enabled and not in row headers
                     hasExpand: this.columnService.hasGrouping && this.colType !== 'rowHeaders', columnItems: cols, providers: this.providers });
                 rowsEls.push(h(GroupingRowRenderer, Object.assign({}, gmodel)));
@@ -129,7 +131,7 @@ export class RevogrData {
                     [DATA_ROW]: rowProps.itemIndex,
                     style: {
                         width: `${columnProps.size}px`,
-                        transform: `translateX(${columnProps.start}px)`,
+                        transform: `translateX(${columnProps.start - colRenderOffset}px)`,
                         height: rowProps.size ? `${rowProps.size}px` : undefined,
                     },
                 };
@@ -157,7 +159,7 @@ export class RevogrData {
             if (this.rowHighlightPlugin.isRowFocused(rgRow.itemIndex)) {
                 rowClass += ` ${ROW_FOCUSED_CLASS}`;
             }
-            const row = (h(RowRenderer, { index: rgRow.itemIndex, rowClass: rowClass, size: rgRow.size, start: rgRow.start, groupingLevel: groupDepth || undefined }, cells));
+            const row = (h(RowRenderer, { index: rgRow.itemIndex, rowClass: rowClass, size: rgRow.size, start: rgRow.start - rowRenderOffset, groupingLevel: groupDepth || undefined }, cells));
             this.beforerowrender.emit({
                 node: row,
                 item: rgRow,

package/dist/collection/components/header/header-group-renderer.js

@@ -6,6 +6,7 @@ import { HEADER_CLASS, MIN_COL_SIZE } from "../../utils/consts";
 import { HeaderCellRenderer } from "./header-cell-renderer";
 const HeaderGroupRenderer = (p) => {
     const groupProps = {
+        key: `${p.group.name}-${p.group.indexes.join('-')}`,
         canResize: p.canResize,
         minWidth: p.group.indexes.length * MIN_COL_SIZE,
         maxWidth: 0,
@@ -14,7 +15,7 @@ const HeaderGroupRenderer = (p) => {
             [HEADER_CLASS]: true,
         },
         style: {
-            transform: `translateX(${p.start}px)`,
+            transform: `translateX(${p.start - (p.renderOffset || 0)}px)`,
             width: `${p.end - p.start}px`,
         },
         onResize: p.onResize,

package/dist/collection/components/header/header-renderer.js

@@ -7,7 +7,7 @@ import { SortingSign } from "../../plugins/sorting/sorting.sign";
 import { DATA_COL, FOCUS_CLASS, HEADER_CLASS, HEADER_SORTABLE_CLASS, MIN_COL_SIZE, } from "../../utils/consts";
 import { HeaderCellRenderer } from "./header-cell-renderer";
 const HeaderRenderer = (p) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const cellClass = {
         [HEADER_CLASS]: true,
         [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
@@ -16,15 +16,16 @@ const HeaderRenderer = (p) => {
         cellClass[p.data.order] = true;
     }
     const dataProps = {
+        key: String((_d = (_c = p.data) === null || _c === void 0 ? void 0 : _c.prop) !== null && _d !== void 0 ? _d : p.column.itemIndex),
         [DATA_COL]: p.column.itemIndex,
         canResize: p.canResize,
-        minWidth: ((_c = p.data) === null || _c === void 0 ? void 0 : _c.minSize) || MIN_COL_SIZE,
-        maxWidth: (_d = p.data) === null || _d === void 0 ? void 0 : _d.maxSize,
+        minWidth: ((_e = p.data) === null || _e === void 0 ? void 0 : _e.minSize) || MIN_COL_SIZE,
+        maxWidth: (_f = p.data) === null || _f === void 0 ? void 0 : _f.maxSize,
         active: p.active || ['r'],
         class: cellClass,
         style: {
             width: `${p.column.size}px`,
-            transform: `translateX(${p.column.start}px)`,
+            transform: `translateX(${p.column.start - (p.renderOffset || 0)}px)`,
         },
         onResize: p.onResize,
         onDblClick(originalEvent) {
@@ -55,6 +56,6 @@ const HeaderRenderer = (p) => {
             }
         }
     }
-    return (h(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, h(SortingSign, { column: p.data }), p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? (h(FilterButton, { column: p.data })) : ('')));
+    return (h(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, h(SortingSign, { column: p.data }), p.canFilter && ((_g = p.data) === null || _g === void 0 ? void 0 : _g.filter) !== false ? (h(FilterButton, { column: p.data })) : ('')));
 };
 export default HeaderRenderer;

package/dist/collection/components/header/revogr-header-style.css

@@ -34,15 +34,25 @@ revogr-header .rgHeaderCell.align-right {
 revogr-header .rgHeaderCell.sortable {
   cursor: pointer;
 }
-revogr-header .rgHeaderCell i.asc:after, revogr-header .rgHeaderCell i.desc:after {
+revogr-header .rgHeaderCell .sort-indicator {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 1px;
+}
+revogr-header .rgHeaderCell .sort-indicator i.asc:after, revogr-header .rgHeaderCell .sort-indicator i.desc:after {
   font-size: 13px;
 }
-revogr-header .rgHeaderCell i.asc:after {
+revogr-header .rgHeaderCell .sort-indicator i.asc:after {
   content: "↑";
 }
-revogr-header .rgHeaderCell i.desc:after {
+revogr-header .rgHeaderCell .sort-indicator i.desc:after {
   content: "↓";
 }
+revogr-header .rgHeaderCell .sort-indicator .sort-order-index {
+  font-size: 10px;
+  line-height: 1;
+  top: 0;
+}
 revogr-header .rgHeaderCell.active {
   z-index: 10;
 }

package/dist/collection/components/header/revogr-header.js

@@ -2,7 +2,6 @@
  * Built by Revolist OU ❤️
  */
 import { h, } from "@stencil/core";
-import keyBy from "lodash/keyBy";
 import { getItemByIndex } from "../../store/index";
 import { HEADER_ACTUAL_ROW_CLASS, HEADER_ROW_CLASS } from "../../utils/consts";
 import HeaderRenderer from "./header-renderer";
@@ -30,13 +29,10 @@ export class RevogrHeaderComponent {
     }
     onResizeGroup(changedX, startIndex, endIndex) {
         const sizes = {};
-        const cols = keyBy(this.viewportCol.get('items'), 'itemIndex');
         const change = changedX / (endIndex - startIndex + 1);
         for (let i = startIndex; i <= endIndex; i++) {
-            const item = cols[i];
-            if (item) {
-                sizes[i] = item.size + change;
-            }
+            const item = getItemByIndex(this.dimensionCol.state, i);
+            sizes[i] = item.end - item.start + change;
         }
         this.headerresize.emit(sizes);
     }
@@ -50,12 +46,13 @@ export class RevogrHeaderComponent {
         const { cells } = this.renderHeaderColumns(cols, range);
         const groupRow = this.renderGroupingColumns();
         return [
-            h("div", { key: 'a8d57270f4758b454fb4900808453e0c4663c91c', class: "group-rgRow" }, groupRow),
-            h("div", { key: '41a270ff6bde9943a81d9c46482f2a40312afb50', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
+            h("div", { key: '3cc466db6bc4df0cd61c47a22c3a0473318e5dd8', class: "group-rgRow" }, groupRow),
+            h("div", { key: '9742a3fa4d4b75073aef5544806f42386ebffdea', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
         ];
     }
     renderHeaderColumns(cols, range) {
-        const cells = [];
+        const columnsToRender = [];
+        const renderOffset = this.viewportCol.get('renderOffset') || 0;
         for (let rgCol of cols) {
             const colData = this.colData[rgCol.itemIndex];
             const props = {
@@ -64,6 +61,7 @@ export class RevogrHeaderComponent {
                 data: Object.assign(Object.assign({}, colData), { index: rgCol.itemIndex, providers: this.providers }),
                 canFilter: !!this.columnFilter,
                 canResize: this.canResize,
+                renderOffset,
                 active: this.resizeHandler,
                 additionalData: this.additionalData,
                 onResize: e => this.onResize(e, rgCol.itemIndex),
@@ -72,45 +70,106 @@ export class RevogrHeaderComponent {
             };
             const event = this.beforeHeaderRender.emit(props);
             if (!event.defaultPrevented) {
-                cells.push(h(HeaderRenderer, Object.assign({}, event.detail)));
+                columnsToRender.push(event.detail);
             }
         }
+        const duplicateProps = this.getDuplicateHeaderProps(columnsToRender);
+        const cells = columnsToRender.map(detail => h(HeaderRenderer, Object.assign({ key: this.getHeaderCellKey(detail.data, this.type, duplicateProps) }, detail)));
         return { cells };
     }
     renderGroupingColumns() {
+        const visibleGroupRange = this.getVisibleGroupRange();
+        return Array.from({ length: this.groupingDepth }, (_, level) => this.renderGroupRow(level, visibleGroupRange)).flat();
+    }
+    renderGroupRow(level, visibleGroupRange) {
+        const groupCells = (this.groups[level] || [])
+            .map(group => this.renderGroupColumn(group, level, visibleGroupRange))
+            .filter((cell) => !!cell);
+        return [
+            ...groupCells,
+            h('div', {
+                key: `group-row-${level}`,
+                class: {
+                    [HEADER_ROW_CLASS]: true,
+                    group: true,
+                },
+            }),
+        ];
+    }
+    renderGroupColumn(group, level, visibleGroupRange) {
         var _a;
-        const groupRow = [];
-        for (let i = 0; i < this.groupingDepth; i++) {
-            if (this.groups[i]) {
-                for (let group of this.groups[i]) {
-                    const groupStartIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
-                    if (groupStartIndex > -1) {
-                        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
-                        const groupStart = getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
-                        const groupEnd = getItemByIndex(this.dimensionCol.state, groupEndIndex).end;
-                        const props = {
-                            providers: this.providers,
-                            start: groupStart,
-                            end: groupEnd,
-                            group,
-                            active: this.resizeHandler,
-                            canResize: this.canResize,
-                            additionalData: this.additionalData,
-                            onResize: e => {
-                                var _a;
-                                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex);
-                            },
-                        };
-                        const event = this.beforeGroupHeaderRender.emit(props);
-                        if (!event.defaultPrevented) {
-                            groupRow.push(h(GroupHeaderRenderer, Object.assign({}, event.detail)));
-                        }
-                    }
+        const groupStartIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
+        if (groupStartIndex < 0) {
+            return;
+        }
+        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
+        if (!visibleGroupRange ||
+            !isGroupInVisibleRange(groupStartIndex, groupEndIndex, visibleGroupRange)) {
+            return;
+        }
+        const groupStart = getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
+        const groupEnd = getItemByIndex(this.dimensionCol.state, groupEndIndex).end;
+        const props = {
+            providers: this.providers,
+            start: groupStart,
+            end: groupEnd,
+            group,
+            renderOffset: this.viewportCol.get('renderOffset') || 0,
+            active: this.resizeHandler,
+            canResize: this.canResize,
+            additionalData: this.additionalData,
+            onResize: e => {
+                var _a;
+                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex);
+            },
+        };
+        const event = this.beforeGroupHeaderRender.emit(props);
+        if (event.defaultPrevented) {
+            return;
+        }
+        return h(GroupHeaderRenderer, Object.assign({ key: this.getGroupHeaderCellKey(event.detail.group, level) }, event.detail));
+    }
+    getVisibleGroupRange() {
+        const visibleColumns = this.viewportCol.get('items');
+        if (!visibleColumns.length) {
+            return;
+        }
+        return visibleColumns.reduce((range, column) => ({
+            start: Math.min(range.start, column.itemIndex),
+            end: Math.max(range.end, column.itemIndex),
+        }), {
+            start: visibleColumns[0].itemIndex,
+            end: visibleColumns[0].itemIndex,
+        });
+    }
+    getHeaderCellKey(column, type, duplicateProps) {
+        if ((column === null || column === void 0 ? void 0 : column.prop) === undefined) {
+            return `${type}-${String(column === null || column === void 0 ? void 0 : column.index)}`;
+        }
+        const propKey = String(column.prop);
+        if (duplicateProps.has(propKey)) {
+            return `${type}-${propKey}-${String(column.index)}`;
+        }
+        return `${type}-${propKey}`;
+    }
+    getDuplicateHeaderProps(columns) {
+        const seenProps = new Set();
+        const duplicateProps = new Set();
+        columns.forEach(({ data }) => {
+            if ((data === null || data === void 0 ? void 0 : data.prop) !== undefined) {
+                const propKey = String(data.prop);
+                if (seenProps.has(propKey)) {
+                    duplicateProps.add(propKey);
+                }
+                else {
+                    seenProps.add(propKey);
                 }
             }
-            groupRow.push(h("div", { class: `${HEADER_ROW_CLASS} group` }));
-        }
-        return groupRow;
+        });
+        return duplicateProps;
+    }
+    getGroupHeaderCellKey(group, level) {
+        return `group-${level}-${group.name}-${group.indexes.join('-')}`;
     }
     get providers() {
         return {
@@ -523,7 +582,7 @@ export class RevogrHeaderComponent {
                 },
                 "complexType": {
                     "original": "HeaderRenderProps",
-                    "resolved": "{ column: VirtualPositionItem; additionalData: any; data: ColumnTemplateProp<ColumnProp>; range?: RangeArea | null | undefined; canResize?: boolean | undefined; canFilter?: boolean | undefined; onResize?(e: ResizeEvent): void; onClick?(data: InitialHeaderClick): void; onDblClick?(data: InitialHeaderClick): void; } & Partial<Pick<ResizeProps, \"active\">>",
+                    "resolved": "{ column: VirtualPositionItem; additionalData: any; data: ColumnTemplateProp<ColumnProp>; range?: RangeArea | null | undefined; canResize?: boolean | undefined; canFilter?: boolean | undefined; renderOffset?: number | undefined; onResize?(e: ResizeEvent): void; onClick?(data: InitialHeaderClick): void; onDblClick?(data: InitialHeaderClick): void; } & Partial<Pick<ResizeProps, \"active\">>",
                     "references": {
                         "HeaderRenderProps": {
                             "location": "import",
@@ -545,7 +604,7 @@ export class RevogrHeaderComponent {
                 },
                 "complexType": {
                     "original": "HeaderGroupRendererProps",
-                    "resolved": "{ start: number; end: number; group: Group; providers: ProvidersColumns<DimensionCols | \"rowHeaders\">; additionalData: any; canResize?: boolean | undefined; onResize?(e: ResizeEvent): void; } & Partial<Pick<ResizeProps, \"active\">>",
+                    "resolved": "{ start: number; end: number; group: Group; providers: ProvidersColumns<DimensionCols | \"rowHeaders\">; additionalData: any; canResize?: boolean | undefined; renderOffset?: number | undefined; onResize?(e: ResizeEvent): void; } & Partial<Pick<ResizeProps, \"active\">>",
                     "references": {
                         "HeaderGroupRendererProps": {
                             "location": "import",
@@ -581,3 +640,7 @@ export class RevogrHeaderComponent {
     }
     static get elementRef() { return "element"; }
 }
+function isGroupInVisibleRange(groupStartIndex, groupEndIndex, visibleRange) {
+    return (groupStartIndex <= visibleRange.end &&
+        groupEndIndex >= visibleRange.start);
+}

package/dist/collection/components/order/order-row.service.js

@@ -51,11 +51,12 @@ export default class RowOrderService {
     getRow(y, { el, rows }) {
         const { top } = el.getBoundingClientRect();
         const topRelative = y - top;
-        const rgRow = getItemByPosition(rows, topRelative);
+        const rowOffset = rows.renderOffset || 0;
+        const rgRow = getItemByPosition(rows, topRelative + rowOffset);
         const absolutePosition = {
             itemIndex: rgRow.itemIndex,
-            start: rgRow.start + top,
-            end: rgRow.end + top,
+            start: rgRow.start - rowOffset + top,
+            end: rgRow.end - rowOffset + top,
         };
         return absolutePosition;
     }
@@ -64,8 +65,8 @@ export default class RowOrderService {
         const { top, left } = el.getBoundingClientRect();
         const topRelative = y - top;
         const leftRelative = x - left;
-        const rgRow = getItemByPosition(rows, topRelative);
-        const rgCol = getItemByPosition(cols, leftRelative);
+        const rgRow = getItemByPosition(rows, topRelative + (rows.renderOffset || 0));
+        const rgCol = getItemByPosition(cols, leftRelative + (cols.renderOffset || 0));
         return { x: rgCol.itemIndex, y: rgRow.itemIndex };
     }
 }

package/dist/collection/components/overlay/keyboard.service.js

@@ -2,8 +2,9 @@
  * Built by Revolist OU ❤️
  */
 import { getRange } from "../../store/index";
-import { codesLetter, isAll, isClear, isCopy, isCut, isEnterKeyValue, isPaste, isTab, timeout, RESIZE_INTERVAL, } from "../../utils";
+import { codesLetter, isAll, isClear, isCopy, isCut, isEnterKeyValue, isPaste, isShortcutModifier, isTab, timeout, RESIZE_INTERVAL, } from "../../utils";
 import { getCoordinate, isAfterLast, isBeforeFirst, } from "./selection.utils";
+import { isEditInput } from "../editors/edit.utils";
 const DIRECTION_CODES = [
     codesLetter.TAB,
     codesLetter.ARROW_UP,
@@ -15,9 +16,29 @@ export class KeyboardService {
     constructor(sv) {
         this.sv = sv;
     }
+    /**
+     * Appends printable key input that arrives after edit mode was requested
+     * but before the editor input has mounted or received focus.
+     */
+    appendPendingEditValue(e) {
+        if (isShortcutModifier(e) ||
+            e.key.length !== 1 ||
+            (e.target instanceof HTMLElement && isEditInput(e.target))) {
+            return false;
+        }
+        const editCell = this.sv.selectionStore.get('edit');
+        if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
+            return false;
+        }
+        this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
+        return true;
+    }
     async keyDown(e, canRange, isEditMode, { range, focus }) {
         // IF EDIT MODE
         if (isEditMode) {
+            if (this.appendPendingEditValue(e)) {
+                return;
+            }
             switch (e.code) {
                 case codesLetter.ESCAPE:
                     this.sv.cancel();
@@ -69,7 +90,7 @@ export class KeyboardService {
             return;
         }
         // pressed letter key
-        if (e.key.length === 1) {
+        if (!isShortcutModifier(e) && e.key.length === 1) {
             this.sv.change(e.key);
             return;
         }
@@ -111,7 +132,8 @@ export class KeyboardService {
         }
         const eData = this.sv.getData();
         if (isMulti) {
-            if (isAfterLast(data.end, eData.lastCell) || isBeforeFirst(data.start)) {
+            const isOutOfBounds = [data.start, data.end].some(cell => isAfterLast(cell, eData.lastCell) || isBeforeFirst(cell));
+            if (isOutOfBounds) {
                 return false;
             }
             const range = getRange(data.start, data.end);