@revolist/revogrid 4.22.0 → 4.23.0

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-DvQDqxxx.js');
-var dimension_helpers = require('./dimension.helpers-CaIsYC99.js');
-var cellRenderer = require('./cell-renderer-uZmDBXz7.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-B1dJwgTO.js');
-var throttle = require('./throttle-CI4MsAqs.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,
@@ -261,126 +263,8 @@ const RevogrData = class {
 };
 RevogrData.style = revogrDataStyleCss();
 
-var defineProperty = (function() {
-  try {
-    var func = dimension_helpers.getNative(Object, 'defineProperty');
-    func({}, '', {});
-    return func;
-  } catch (e) {}
-}());
-
-/**
- * The base implementation of `assignValue` and `assignMergeValue` without
- * value checks.
- *
- * @private
- * @param {Object} object The object to modify.
- * @param {string} key The key of the property to assign.
- * @param {*} value The value to assign.
- */
-function baseAssignValue(object, key, value) {
-  if (key == '__proto__' && defineProperty) {
-    defineProperty(object, key, {
-      'configurable': true,
-      'enumerable': true,
-      'value': value,
-      'writable': true
-    });
-  } else {
-    object[key] = value;
-  }
-}
-
-/**
- * A specialized version of `baseAggregator` for arrays.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} setter The function to set `accumulator` values.
- * @param {Function} iteratee The iteratee to transform keys.
- * @param {Object} accumulator The initial aggregated object.
- * @returns {Function} Returns `accumulator`.
- */
-function arrayAggregator(array, setter, iteratee, accumulator) {
-  var index = -1,
-      length = array == null ? 0 : array.length;
-
-  while (++index < length) {
-    var value = array[index];
-    setter(accumulator, value, iteratee(value), array);
-  }
-  return accumulator;
-}
-
-/**
- * Aggregates elements of `collection` on `accumulator` with keys transformed
- * by `iteratee` and values set by `setter`.
- *
- * @private
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} setter The function to set `accumulator` values.
- * @param {Function} iteratee The iteratee to transform keys.
- * @param {Object} accumulator The initial aggregated object.
- * @returns {Function} Returns `accumulator`.
- */
-function baseAggregator(collection, setter, iteratee, accumulator) {
-  column_service.baseEach(collection, function(value, key, collection) {
-    setter(accumulator, value, iteratee(value), collection);
-  });
-  return accumulator;
-}
-
-/**
- * Creates a function like `_.groupBy`.
- *
- * @private
- * @param {Function} setter The function to set accumulator values.
- * @param {Function} [initializer] The accumulator object initializer.
- * @returns {Function} Returns the new aggregator function.
- */
-function createAggregator(setter, initializer) {
-  return function(collection, iteratee) {
-    var func = dimension_helpers.isArray(collection) ? arrayAggregator : baseAggregator,
-        accumulator = {};
-
-    return func(collection, setter, dimension_helpers.baseIteratee(iteratee), accumulator);
-  };
-}
-
-/**
- * Creates an object composed of keys generated from the results of running
- * each element of `collection` thru `iteratee`. The corresponding value of
- * each key is the last element responsible for generating the key. The
- * iteratee is invoked with one argument: (value).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Collection
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} [iteratee=_.identity] The iteratee to transform keys.
- * @returns {Object} Returns the composed aggregate object.
- * @example
- *
- * var array = [
- *   { 'dir': 'left', 'code': 97 },
- *   { 'dir': 'right', 'code': 100 }
- * ];
- *
- * _.keyBy(array, function(o) {
- *   return String.fromCharCode(o.code);
- * });
- * // => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
- *
- * _.keyBy(array, 'dir');
- * // => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }
- */
-var keyBy = createAggregator(function(result, value, key) {
-  baseAssignValue(result, key, value);
-});
-
 const HeaderRenderer = (p) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const cellClass = {
         [dimension_helpers.HEADER_CLASS]: true,
         [dimension_helpers.HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
@@ -389,15 +273,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),
         [dimension_helpers.DATA_COL]: p.column.itemIndex,
         canResize: p.canResize,
-        minWidth: ((_c = p.data) === null || _c === void 0 ? void 0 : _c.minSize) || dimension_helpers.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) || dimension_helpers.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) {
@@ -428,11 +313,12 @@ const HeaderRenderer = (p) => {
             }
         }
     }
-    return (index.h(headerCellRenderer.HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, index.h(cellRenderer.SortingSign, { column: p.data }), p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? (index.h(filter_button.FilterButton, { column: p.data })) : ('')));
+    return (index.h(headerCellRenderer.HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, index.h(cellRenderer.SortingSign, { column: p.data }), p.canFilter && ((_g = p.data) === null || _g === void 0 ? void 0 : _g.filter) !== false ? (index.h(filter_button.FilterButton, { column: p.data })) : ('')));
 };
 
 const HeaderGroupRenderer = (p) => {
     const groupProps = {
+        key: `${p.group.name}-${p.group.indexes.join('-')}`,
         canResize: p.canResize,
         minWidth: p.group.indexes.length * dimension_helpers.MIN_COL_SIZE,
         maxWidth: 0,
@@ -441,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,
@@ -449,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) {
@@ -482,13 +368,10 @@ const RevogrHeaderComponent = class {
     }
     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 = dimension_helpers.getItemByIndex(this.dimensionCol.state, i);
+            sizes[i] = item.end - item.start + change;
         }
         this.headerresize.emit(sizes);
     }
@@ -502,12 +385,13 @@ const RevogrHeaderComponent = class {
         const { cells } = this.renderHeaderColumns(cols, range);
         const groupRow = this.renderGroupingColumns();
         return [
-            index.h("div", { key: 'a8d57270f4758b454fb4900808453e0c4663c91c', class: "group-rgRow" }, groupRow),
-            index.h("div", { key: '41a270ff6bde9943a81d9c46482f2a40312afb50', class: `${dimension_helpers.HEADER_ROW_CLASS} ${dimension_helpers.HEADER_ACTUAL_ROW_CLASS}` }, cells),
+            index.h("div", { key: '3cc466db6bc4df0cd61c47a22c3a0473318e5dd8', class: "group-rgRow" }, groupRow),
+            index.h("div", { key: '9742a3fa4d4b75073aef5544806f42386ebffdea', class: `${dimension_helpers.HEADER_ROW_CLASS} ${dimension_helpers.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 = {
@@ -516,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),
@@ -524,45 +409,106 @@ const RevogrHeaderComponent = class {
             };
             const event = this.beforeHeaderRender.emit(props);
             if (!event.defaultPrevented) {
-                cells.push(index.h(HeaderRenderer, Object.assign({}, event.detail)));
+                columnsToRender.push(event.detail);
             }
         }
+        const duplicateProps = this.getDuplicateHeaderProps(columnsToRender);
+        const cells = columnsToRender.map(detail => index.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,
+            index.h('div', {
+                key: `group-row-${level}`,
+                class: {
+                    [dimension_helpers.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 = dimension_helpers.getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
-                        const groupEnd = dimension_helpers.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(index.h(HeaderGroupRenderer, 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 = dimension_helpers.getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
+        const groupEnd = dimension_helpers.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 index.h(HeaderGroupRenderer, 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(index.h("div", { class: `${dimension_helpers.HEADER_ROW_CLASS} group` }));
-        }
-        return groupRow;
+        });
+        return duplicateProps;
+    }
+    getGroupHeaderCellKey(group, level) {
+        return `group-${level}-${group.name}-${group.indexes.join('-')}`;
     }
     get providers() {
         return {
@@ -576,6 +522,10 @@ const RevogrHeaderComponent = class {
     }
     get element() { return index.getElement(this); }
 };
+function isGroupInVisibleRange(groupStartIndex, groupEndIndex, visibleRange) {
+    return (groupStartIndex <= visibleRange.end &&
+        groupEndIndex >= visibleRange.start);
+}
 RevogrHeaderComponent.style = revogrHeaderStyleCss();
 
 class GridResizeService {
@@ -658,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) {
@@ -671,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;
     }
@@ -831,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-BTnGaIl3.js → text-editor-B4W-m-r-.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var edit_utils = require('./edit.utils-CwMzSIVF.js');
-var dimension_helpers = require('./dimension.helpers-CaIsYC99.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-CI4MsAqs.js → throttle-BCwEuJJq.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dimension_helpers = require('./dimension.helpers-CaIsYC99.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;
     }
 }