@revolist/revogrid 4.22.1 → 4.23.0

package/dist/cjs/revogr-attribution_7.cjs.entry.js

@@ -4,14 +4,15 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var dimension_helpers = require('./dimension.helpers-CiiNnlLa.js');
+var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
 var events = require('./events-DeLDyZlb.js');
-var column_service = require('./column.service-DXYMehqK.js');
-var edit_utils = require('./edit.utils-CecCfA4E.js');
+var column_service = require('./column.service-f612L4ql.js');
+var edit_utils = require('./edit.utils-pKeiYFLJ.js');
+var index$1 = require('./index-DxaSE5uZ.js');
 var debounce = require('./debounce-CcpHiH2p.js');
-var viewport_store = require('./viewport.store-q6YdR9mg.js');
-var viewport_helpers = require('./viewport.helpers-BAovztDd.js');
-var throttle = require('./throttle-CfgQFkfR.js');
+var viewport_store = require('./viewport.store-BlKQ4x9H.js');
+var viewport_helpers = require('./viewport.helpers-BND76K2j.js');
+var throttle = require('./throttle-BCwEuJJq.js');
 
 const Attribution = class {
     constructor(hostRef) {
@@ -109,8 +110,8 @@ function getCurrentCell({ x, y }, { el, rows, cols }) {
         cellX = width - 1;
     }
     // Get the row and column items based on the cell position
-    const rgRow = dimension_helpers.getItemByPosition(rows, cellY);
-    const rgCol = dimension_helpers.getItemByPosition(cols, cellX);
+    const rgRow = dimension_helpers.getItemByPosition(rows, cellY + (rows.renderOffset || 0));
+    const rgCol = dimension_helpers.getItemByPosition(cols, cellX + (cols.renderOffset || 0));
     // Set the row and column index to 0 if they are before the first item
     if (rgCol.itemIndex < 0) {
         rgCol.itemIndex = 0;
@@ -180,10 +181,12 @@ function styleByCellProps(styles) {
     };
 }
 function getCell({ x, y, x1, y1 }, dimensionRow, dimensionCol) {
-    const top = dimension_helpers.getItemByIndex(dimensionRow, y).start;
-    const left = dimension_helpers.getItemByIndex(dimensionCol, x).start;
-    const bottom = dimension_helpers.getItemByIndex(dimensionRow, y1).end;
-    const right = dimension_helpers.getItemByIndex(dimensionCol, x1).end;
+    const rowOffset = dimensionRow.renderOffset || 0;
+    const colOffset = dimensionCol.renderOffset || 0;
+    const top = dimension_helpers.getItemByIndex(dimensionRow, y).start - rowOffset;
+    const left = dimension_helpers.getItemByIndex(dimensionCol, x).start - colOffset;
+    const bottom = dimension_helpers.getItemByIndex(dimensionRow, y1).end - rowOffset;
+    const right = dimension_helpers.getItemByIndex(dimensionCol, x1).end - colOffset;
     return {
         left,
         right,
@@ -281,9 +284,29 @@ 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 (edit_utils.isShortcutModifier(e) ||
+            e.key.length !== 1 ||
+            (e.target instanceof HTMLElement && edit_utils.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 dimension_helpers.codesLetter.ESCAPE:
                     this.sv.cancel();
@@ -362,7 +385,7 @@ class KeyboardService {
         // 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 dimension_helpers.timeout(dimension_helpers.RESIZE_INTERVAL + 30);
+        await index$1.timeout(dimension_helpers.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);
@@ -377,7 +400,8 @@ 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 = column_service.getRange(data.start, data.end);
@@ -1288,15 +1312,9 @@ const RevogrScrollVirtual = class {
      */
     async changeScroll(e) {
         if (e.delta) {
-            switch (e.dimension) {
-                case 'rgCol':
-                    e.coordinate = this.element.scrollLeft + e.delta;
-                    break;
-                case 'rgRow':
-                    e.coordinate = this.element.scrollTop + e.delta;
-                    break;
-            }
-            this.setScroll(e);
+            const scrollProperty = e.dimension === 'rgRow' ? 'scrollTop' : 'scrollLeft';
+            const currentPhysicalCoordinate = this.element[scrollProperty];
+            return this.localScrollService.setScrollByDelta(e, currentPhysicalCoordinate);
         }
         return e;
     }
@@ -1317,7 +1335,7 @@ const RevogrScrollVirtual = class {
         this.autohideScrollPlugin.clear();
     }
     componentWillLoad() {
-        this.scrollSize = dimension_helpers.getScrollbarSize(document);
+        this.scrollSize = index$1.getScrollbarSize(document);
     }
     componentDidRender() {
         let scrollSize = 0;
@@ -1359,7 +1377,7 @@ const RevogrScrollVirtual = class {
     }
     render() {
         const size = throttle.getContentSize(this.realSize, this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth, this.clientSize);
-        return (index.h(index.Host, { key: '57f81ec9deb2395e96b283338c03b9ad44f1e929', onScroll: (e) => this.onScroll(e) }, index.h("div", { key: '1a8c869adab53b362c351dae8d53664f33c4212c', style: {
+        return (index.h(index.Host, { key: '7213817ef941eee4050b714266598ec0c2961ee9', onScroll: (e) => this.onScroll(e) }, index.h("div", { key: '501da49c63253ab943172494b9dbf5399be56cee', style: {
                 [this.dimension === 'rgRow' ? 'height' : 'width']: `${size}px`,
             } })));
     }

package/dist/cjs/revogr-clipboard_3.cjs.entry.js

@@ -4,10 +4,11 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var dimension_helpers = require('./dimension.helpers-CiiNnlLa.js');
-var textEditor = require('./text-editor-DnLZW1a-.js');
-var edit_utils = require('./edit.utils-CecCfA4E.js');
+var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
+var textEditor = require('./text-editor-B4W-m-r-.js');
+var edit_utils = require('./edit.utils-pKeiYFLJ.js');
 var debounce = require('./debounce-CcpHiH2p.js');
+require('./index-DxaSE5uZ.js');
 
 const Clipboard = class {
     constructor(hostRef) {
@@ -334,11 +335,12 @@ class RowOrderService {
     getRow(y, { el, rows }) {
         const { top } = el.getBoundingClientRect();
         const topRelative = y - top;
-        const rgRow = dimension_helpers.getItemByPosition(rows, topRelative);
+        const rowOffset = rows.renderOffset || 0;
+        const rgRow = dimension_helpers.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;
     }
@@ -347,8 +349,8 @@ class RowOrderService {
         const { top, left } = el.getBoundingClientRect();
         const topRelative = y - top;
         const leftRelative = x - left;
-        const rgRow = dimension_helpers.getItemByPosition(rows, topRelative);
-        const rgCol = dimension_helpers.getItemByPosition(cols, leftRelative);
+        const rgRow = dimension_helpers.getItemByPosition(rows, topRelative + (rows.renderOffset || 0));
+        const rgCol = dimension_helpers.getItemByPosition(cols, leftRelative + (cols.renderOffset || 0));
         return { x: rgCol.itemIndex, y: rgRow.itemIndex };
     }
 }

package/dist/cjs/revogr-data_4.cjs.entry.js

@@ -4,13 +4,13 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var column_service = require('./column.service-DXYMehqK.js');
-var dimension_helpers = require('./dimension.helpers-CiiNnlLa.js');
-var cellRenderer = require('./cell-renderer-BQdEGQXP.js');
+var column_service = require('./column.service-f612L4ql.js');
+var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
+var cellRenderer = require('./cell-renderer-DWJ9Px9f.js');
 var filter_button = require('./filter.button-w6LWnyhi.js');
-var headerCellRenderer = require('./header-cell-renderer-DGyBrK8I.js');
-var throttle = require('./throttle-CfgQFkfR.js');
-var viewport_helpers = require('./viewport.helpers-BAovztDd.js');
+var headerCellRenderer = require('./header-cell-renderer-4yq9_WbM.js');
+var throttle = require('./throttle-BCwEuJJq.js');
+var viewport_helpers = require('./viewport.helpers-BND76K2j.js');
 require('./debounce-CcpHiH2p.js');
 
 /**
@@ -170,11 +170,13 @@ const RevogrData = class {
         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 = dimension_helpers.getSourceItem(this.dataStore, rgRow.itemIndex);
             // #region Grouping
             if (column_service.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(index.h(cellRenderer.GroupingRowRenderer, Object.assign({}, gmodel)));
@@ -197,7 +199,7 @@ const RevogrData = class {
                     [dimension_helpers.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,
                     },
                 };
@@ -225,7 +227,7 @@ const RevogrData = class {
             if (this.rowHighlightPlugin.isRowFocused(rgRow.itemIndex)) {
                 rowClass += ` ${dimension_helpers.ROW_FOCUSED_CLASS}`;
             }
-            const row = (index.h(cellRenderer.RowRenderer, { index: rgRow.itemIndex, rowClass: rowClass, size: rgRow.size, start: rgRow.start, groupingLevel: groupDepth || undefined }, cells));
+            const row = (index.h(cellRenderer.RowRenderer, { index: rgRow.itemIndex, rowClass: rowClass, size: rgRow.size, start: rgRow.start - rowRenderOffset, groupingLevel: groupDepth || undefined }, cells));
             this.beforerowrender.emit({
                 node: row,
                 item: rgRow,
@@ -280,7 +282,7 @@ const HeaderRenderer = (p) => {
         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) {
@@ -325,7 +327,7 @@ const HeaderGroupRenderer = (p) => {
             [dimension_helpers.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,
@@ -333,7 +335,7 @@ const HeaderGroupRenderer = (p) => {
     return (index.h(headerCellRenderer.HeaderCellRenderer, { data: Object.assign(Object.assign({}, p.group), { prop: '', providers: p.providers, index: p.start }), props: groupProps, additionalData: p.additionalData }));
 };
 
-const revogrHeaderStyleCss = () => `@charset "UTF-8";revogr-header{position:relative;z-index:5;display:block}revogr-header .header-rgRow{display:block;position:relative}revogr-header .header-rgRow.group{z-index:0}revogr-header .group-rgRow{position:relative;overflow:hidden}revogr-header .rgHeaderCell{position:absolute;box-sizing:border-box;height:100%;z-index:1;display:flex}revogr-header .rgHeaderCell.align-center{text-align:center}revogr-header .rgHeaderCell.align-left{text-align:left}revogr-header .rgHeaderCell.align-right{text-align:right}revogr-header .rgHeaderCell.sortable{cursor:pointer}revogr-header .rgHeaderCell i.asc:after,revogr-header .rgHeaderCell i.desc:after{font-size:13px}revogr-header .rgHeaderCell i.asc:after{content:"↑"}revogr-header .rgHeaderCell i.desc:after{content:"↓"}revogr-header .rgHeaderCell.active{z-index:10}revogr-header .rgHeaderCell.active .resizable{background-color:deepskyblue}revogr-header .rgHeaderCell .header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none}revogr-header .rgHeaderCell .resizable:hover{background-color:deepskyblue}revogr-header .rgHeaderCell>.resizable-r{cursor:ew-resize;width:6px;right:0;top:0;height:100%}revogr-header .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header .rgHeaderCell>.resizable-l{cursor:w-resize;width:6px;left:0;height:100%;top:0}revogr-header .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header .rv-filter{visibility:hidden}`;
+const revogrHeaderStyleCss = () => `@charset "UTF-8";revogr-header{position:relative;z-index:5;display:block}revogr-header .header-rgRow{display:block;position:relative}revogr-header .header-rgRow.group{z-index:0}revogr-header .group-rgRow{position:relative;overflow:hidden}revogr-header .rgHeaderCell{position:absolute;box-sizing:border-box;height:100%;z-index:1;display:flex}revogr-header .rgHeaderCell.align-center{text-align:center}revogr-header .rgHeaderCell.align-left{text-align:left}revogr-header .rgHeaderCell.align-right{text-align:right}revogr-header .rgHeaderCell.sortable{cursor:pointer}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 .sort-indicator i.asc:after{content:"↑"}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}revogr-header .rgHeaderCell.active .resizable{background-color:deepskyblue}revogr-header .rgHeaderCell .header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none}revogr-header .rgHeaderCell .resizable:hover{background-color:deepskyblue}revogr-header .rgHeaderCell>.resizable-r{cursor:ew-resize;width:6px;right:0;top:0;height:100%}revogr-header .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header .rgHeaderCell>.resizable-l{cursor:w-resize;width:6px;left:0;height:100%;top:0}revogr-header .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header .rv-filter{visibility:hidden}`;
 
 const RevogrHeaderComponent = class {
     constructor(hostRef) {
@@ -389,6 +391,7 @@ const RevogrHeaderComponent = class {
     }
     renderHeaderColumns(cols, range) {
         const columnsToRender = [];
+        const renderOffset = this.viewportCol.get('renderOffset') || 0;
         for (let rgCol of cols) {
             const colData = this.colData[rgCol.itemIndex];
             const props = {
@@ -397,6 +400,7 @@ const RevogrHeaderComponent = class {
                 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),
@@ -449,6 +453,7 @@ const RevogrHeaderComponent = class {
             start: groupStart,
             end: groupEnd,
             group,
+            renderOffset: this.viewportCol.get('renderOffset') || 0,
             active: this.resizeHandler,
             canResize: this.canResize,
             additionalData: this.additionalData,
@@ -603,7 +608,7 @@ const RevogrViewportScroll = class {
      * @param e
      */
     async changeScroll(e, silent = false) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (silent) {
             if (e.coordinate && this.verticalScroll) {
                 switch (e.dimension) {
@@ -616,15 +621,16 @@ const RevogrViewportScroll = class {
             return;
         }
         if (e.delta) {
+            let currentPhysicalCoordinate = 0;
             switch (e.dimension) {
                 case 'rgCol':
-                    e.coordinate = this.horizontalScroll.scrollLeft + e.delta;
+                    currentPhysicalCoordinate = this.horizontalScroll.scrollLeft;
                     break;
                 case 'rgRow':
-                    e.coordinate = ((_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0) + e.delta;
+                    currentPhysicalCoordinate = (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
                     break;
             }
-            this.setScroll(e);
+            return (_d = (_c = this.localScrollService) === null || _c === void 0 ? void 0 : _c.setScrollByDelta(e, currentPhysicalCoordinate)) !== null && _d !== void 0 ? _d : e;
         }
         return e;
     }
@@ -776,7 +782,10 @@ const RevogrViewportScroll = class {
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (index.h(index.Host, { key: 'adc7378dba1794ca2ec263d52b09abefe50bcbfd', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, index.h("div", { key: '7b57a8a0ea44629fefcfe4d2cd77bf0f048d8e06', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, index.h("div", { key: 'cca3de158bc2a7f0651f578a281819be5698b257', class: "header-wrapper", ref: e => (this.header = e) }, index.h("slot", { key: '1d170147dabe034f2c35481a8e2fedd6de2b6aed', name: viewport_helpers.HEADER_SLOT })), index.h("div", { key: 'b6dd29a91bb1f380a83a035dfdb749ca669936f2', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, index.h("div", { key: '9bce27bf8ec4d3b679aa9a34eb6379a8c2d46cac', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, index.h("slot", { key: 'b44a082c9fbb948fd87bd235b4cd4356fd4a3536', name: viewport_helpers.CONTENT_SLOT }))), index.h("div", { key: '28c305ff6bc664f1d1bbb117e8b8565c8d4bb6b2', class: "footer-wrapper", ref: e => (this.footer = e) }, index.h("slot", { key: '96312fb7f18198fd1feb9dcc00c79cde74ba9c9f', name: viewport_helpers.FOOTER_SLOT })))));
+        var _a, _b, _c, _d;
+        const physicalContentHeight = throttle.getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
+        const physicalContentWidth = throttle.getContentSize(this.contentWidth, (_d = (_c = this.horizontalScroll) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0);
+        return (index.h(index.Host, { key: 'a0c47dede9d131dea8c8ca449e8a323f24d9b113', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, index.h("div", { key: '6c960e753ffe522ba4afb1c379264873b6c617f3', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, index.h("div", { key: '1a6cbcbd3634e84756b54c8150aebd25c824e14a', class: "header-wrapper", ref: e => (this.header = e) }, index.h("slot", { key: 'e4202c687bc39b4f78f3ed9840e979b032f06af8', name: viewport_helpers.HEADER_SLOT })), index.h("div", { key: '651415b5b32e72735065b183317386a34042bb85', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, index.h("div", { key: 'e65623b78d80957d8676adb019618953ef267ec3', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, index.h("slot", { key: '5af47b12ef1226587cf774233447b5252d65e836', name: viewport_helpers.CONTENT_SLOT }))), index.h("div", { key: 'cbc0fd64fbfb53d3b18e547bbe34e32b7bb9c043', class: "footer-wrapper", ref: e => (this.footer = e) }, index.h("slot", { key: 'a8e4bfaef400973121090bac3069eb85469a95f3', name: viewport_helpers.FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/dist/cjs/revogr-filter-panel.cjs.entry.js

@@ -269,7 +269,8 @@ const FilterPanel = class {
         const options = [];
         const prop = this.changes.prop;
         const hidden = new Set();
-        Object.entries(this.filterItems).forEach(([_, values]) => {
+        Object.keys(this.filterItems).forEach((prop) => {
+            const values = this.filterItems[prop];
             values.forEach((filter) => {
                 if (filter.hidden) {
                     hidden.add(filter.type);

package/dist/cjs/{text-editor-DnLZW1a-.js → text-editor-B4W-m-r-.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var edit_utils = require('./edit.utils-CecCfA4E.js');
-var dimension_helpers = require('./dimension.helpers-CiiNnlLa.js');
+var edit_utils = require('./edit.utils-pKeiYFLJ.js');
+var index = require('./index-DxaSE5uZ.js');
 
 class TextEditor {
     constructor(data, saveCallback) {
@@ -20,7 +20,7 @@ class TextEditor {
     async componentDidRender() {
         var _a;
         if (this.editInput) {
-            await dimension_helpers.timeout();
+            await index.timeout();
             (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }

package/dist/cjs/{throttle-CfgQFkfR.js → throttle-BCwEuJJq.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dimension_helpers = require('./dimension.helpers-CiiNnlLa.js');
+var viewport_helpers = require('./viewport.helpers-BND76K2j.js');
 var debounce = require('./debounce-CcpHiH2p.js');
 
 const initialParams = {
@@ -18,10 +18,11 @@ const NO_COORDINATE = -1;
  * return full size
  */
 function getContentSize(contentSize, clientSize, virtualSize = 0) {
-    if (virtualSize > contentSize) {
-        return 0;
-    }
-    return contentSize + (virtualSize ? clientSize - virtualSize : 0);
+    return viewport_helpers.getScrollDimension({
+        contentSize,
+        clientSize,
+        virtualSize,
+    }).physicalContentSize;
 }
 class LocalScrollService {
     constructor(cfg) {
@@ -35,14 +36,20 @@ class LocalScrollService {
             rgRow: NO_COORDINATE,
             rgCol: NO_COORDINATE,
         };
+        this.previousLogicalScroll = {
+            rgRow: 0,
+            rgCol: 0,
+        };
         this.params = {
             rgRow: Object.assign({}, initialParams),
             rgCol: Object.assign({}, initialParams),
         };
     }
     setParams(params, dimension) {
-        const virtualContentSize = getContentSize(params.contentSize, params.clientSize, params.virtualSize);
-        this.params[dimension] = Object.assign(Object.assign({}, params), { maxSize: virtualContentSize - params.clientSize, virtualContentSize });
+        const scrollDimension = viewport_helpers.getScrollDimension(params);
+        const virtualContentSize = scrollDimension.physicalContentSize;
+        this.params[dimension] = Object.assign(Object.assign({}, params), { maxSize: virtualContentSize - params.clientSize, virtualContentSize,
+            scrollDimension });
     }
     // apply scroll values after scroll done
     async setScroll(e) {
@@ -62,16 +69,27 @@ class LocalScrollService {
             await frameAnimation;
             const params = this.getParams(e.dimension);
             e.coordinate = Math.ceil(e.coordinate);
-            this.previousScroll[e.dimension] = this.wrapCoordinate(e.coordinate, params);
+            this.previousLogicalScroll[e.dimension] = this.wrapLogicalCoordinate(e.coordinate, params);
+            const physicalCoordinate = this.toPhysicalCoordinate(e.coordinate, params);
+            this.previousScroll[e.dimension] = this.wrapPhysicalCoordinate(physicalCoordinate, params);
             this.preventArtificialScroll[e.dimension] = null;
-            this.cfg.applyScroll(Object.assign(Object.assign({}, e), { coordinate: params.virtualSize
-                    ? this.convert(e.coordinate, params, false)
-                    : e.coordinate }));
+            this.cfg.applyScroll(Object.assign(Object.assign({}, e), { coordinate: physicalCoordinate }));
         }
         catch (id) {
             window.cancelAnimationFrame(id);
         }
     }
+    async setScrollByDelta(e, currentPhysicalCoordinate) {
+        var _a;
+        const params = this.getParams(e.dimension);
+        const baseCoordinate = this.previousScroll[e.dimension] === NO_COORDINATE
+            ? this.toLogicalCoordinate(currentPhysicalCoordinate, params)
+            : this.previousLogicalScroll[e.dimension];
+        const coordinate = this.wrapLogicalCoordinate(baseCoordinate + ((_a = e.delta) !== null && _a !== void 0 ? _a : 0), params);
+        const nextEvent = Object.assign(Object.assign({}, e), { coordinate });
+        await this.setScroll(nextEvent);
+        return nextEvent;
+    }
     /**
      * On scroll event started
      */
@@ -84,21 +102,21 @@ class LocalScrollService {
             return;
         }
         const param = this.getParams(dimension);
+        const logicalCoordinate = this.toLogicalScrollCoordinate(coordinate, dimension, param, delta);
         // let component know about scroll event started
         this.cfg.runScroll({
             dimension: dimension,
-            coordinate: param.virtualSize
-                ? this.convert(coordinate, param)
-                : coordinate,
+            coordinate: logicalCoordinate,
             delta,
             outside,
         });
+        this.previousLogicalScroll[dimension] = logicalCoordinate;
     }
     getParams(dimension) {
         return this.params[dimension];
     }
     // check if scroll outside of region to avoid looping
-    wrapCoordinate(c, param) {
+    wrapPhysicalCoordinate(c, param) {
         if (c < 0) {
             return NO_COORDINATE;
         }
@@ -107,22 +125,39 @@ class LocalScrollService {
         }
         return c;
     }
+    wrapLogicalCoordinate(c, param) {
+        var _a, _b;
+        if (c < 0) {
+            return 0;
+        }
+        return Math.min(c, (_b = (_a = param.scrollDimension) === null || _a === void 0 ? void 0 : _a.logicalScrollSize) !== null && _b !== void 0 ? _b : c);
+    }
     // prevent already started scroll, performance optimization
     cancelScroll(dimension) {
         var _a, _b;
         (_b = (_a = this.preventArtificialScroll)[dimension]) === null || _b === void 0 ? void 0 : _b.call(_a);
         this.preventArtificialScroll[dimension] = null;
     }
-    /* convert virtual to real and back, scale range */
-    convert(pos, param, toReal = true) {
-        var _a;
-        const minRange = param.clientSize;
-        const from = [0, ((_a = param.virtualContentSize) !== null && _a !== void 0 ? _a : minRange) - minRange];
-        const to = [0, param.contentSize - param.virtualSize];
-        if (toReal) {
-            return dimension_helpers.scaleValue(pos, from, to);
+    toLogicalScrollCoordinate(coordinate, dimension, param, delta) {
+        const scrollDimension = param.scrollDimension;
+        if (!scrollDimension) {
+            return coordinate;
+        }
+        if (typeof delta === 'number' && scrollDimension.isCompressed) {
+            const base = this.previousScroll[dimension] === NO_COORDINATE
+                ? scrollDimension.toLogicalCoordinate(coordinate - delta)
+                : this.previousLogicalScroll[dimension];
+            return scrollDimension.toLogicalCoordinate(scrollDimension.toPhysicalCoordinate(base + delta));
         }
-        return dimension_helpers.scaleValue(pos, to, from);
+        return scrollDimension.toLogicalCoordinate(coordinate);
+    }
+    toPhysicalCoordinate(coordinate, param) {
+        var _a, _b;
+        return (_b = (_a = param.scrollDimension) === null || _a === void 0 ? void 0 : _a.toPhysicalCoordinate(coordinate)) !== null && _b !== void 0 ? _b : coordinate;
+    }
+    toLogicalCoordinate(coordinate, param) {
+        var _a, _b;
+        return (_b = (_a = param.scrollDimension) === null || _a === void 0 ? void 0 : _a.toLogicalCoordinate(coordinate)) !== null && _b !== void 0 ? _b : coordinate;
     }
 }
 

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;