@revolist/revogrid 4.23.3 → 4.23.5

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

@@ -6,7 +6,7 @@ import { M as ColumnService, u as isGrouping } from './column.service-CC_SD8W3.j
 import { B as ROW_FOCUSED_CLASS, b as getSourceItem, n as DATA_ROW, m as DATA_COL, M as MIN_COL_SIZE, r as HEADER_SORTABLE_CLASS, H as HEADER_CLASS, F as FOCUS_CLASS, k as getItemByIndex, u as HEADER_ROW_CLASS, v as HEADER_ACTUAL_ROW_CLASS } from './dimension.helpers-CGKwSvw6.js';
 import { G as GroupingRowRenderer, C as CellRenderer, R as RowRenderer, P as PADDING_DEPTH, S as SortingSign } from './cell-renderer-BtN-NGCk.js';
 import { c as FilterButton } from './filter.button-C8XTWPU2.js';
-import { H as HeaderCellRenderer } from './header-cell-renderer-BsvUQ8GS.js';
+import { H as HeaderCellRenderer } from './header-cell-renderer-B-LX2sgu.js';
 import { t as throttle, L as LocalScrollTimer, a as LocalScrollService, g as getContentSize } from './throttle-CaUDyxyU.js';
 import { H as HEADER_SLOT, C as CONTENT_SLOT, F as FOOTER_SLOT } from './viewport.helpers-CoCAvmZs.js';
 import './debounce-PCRWZliA.js';
@@ -262,20 +262,23 @@ const RevogrData = class {
 RevogrData.style = revogrDataStyleCss();
 
 const HeaderRenderer = (p) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const hasSortingSign = !!(((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable) ||
+        ((_b = p.data) === null || _b === void 0 ? void 0 : _b.order) ||
+        ((_c = p.data) === null || _c === void 0 ? void 0 : _c.sortIndex));
     const cellClass = {
         [HEADER_CLASS]: true,
-        [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
+        [HEADER_SORTABLE_CLASS]: !!((_d = p.data) === null || _d === void 0 ? void 0 : _d.sortable),
     };
-    if ((_b = p.data) === null || _b === void 0 ? void 0 : _b.order) {
+    if ((_e = p.data) === null || _e === void 0 ? void 0 : _e.order) {
         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),
+        key: String((_g = (_f = p.data) === null || _f === void 0 ? void 0 : _f.prop) !== null && _g !== void 0 ? _g : p.column.itemIndex),
         [DATA_COL]: p.column.itemIndex,
         canResize: p.canResize,
-        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,
+        minWidth: ((_h = p.data) === null || _h === void 0 ? void 0 : _h.minSize) || MIN_COL_SIZE,
+        maxWidth: (_j = p.data) === null || _j === void 0 ? void 0 : _j.maxSize,
         active: p.active || ['r'],
         class: cellClass,
         style: {
@@ -311,7 +314,7 @@ const HeaderRenderer = (p) => {
             }
         }
     }
-    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 })) : ('')));
+    return (h(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hasSortingSign ? h(SortingSign, { column: p.data }) : null, p.canFilter && ((_k = p.data) === null || _k === void 0 ? void 0 : _k.filter) !== false ? (h(FilterButton, { column: p.data })) : ('')));
 };
 
 const HeaderGroupRenderer = (p) => {
@@ -605,6 +608,7 @@ class GridResizeService {
     }
     destroy() {
         var _a;
+        this.apply.cancel();
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
     }
@@ -743,6 +747,10 @@ const RevogrViewportScroll = class {
                 scroll: this.horizontalScroll.scrollLeft,
                 noScroll: this.colType !== 'rgCol',
             };
+            this.setScrollParams({
+                rgRow: calculatedHeight,
+                rgCol: calculatedWidth,
+            });
             // Process changes in order: width first, then height
             const dimensions = ['rgCol', 'rgRow'];
             for (const dimension of dimensions) {
@@ -799,24 +807,30 @@ const RevogrViewportScroll = class {
     }
     async componentDidRender() {
         var _a, _b, _c, _d;
+        this.setScrollParams({
+            rgRow: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            rgCol: this.horizontalScroll.clientWidth,
+        });
+        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
+        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
+    }
+    setScrollParams(clientSize) {
         this.localScrollService.setParams({
             contentSize: this.contentHeight,
-            clientSize: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            clientSize: clientSize.rgRow,
             virtualSize: 0,
         }, 'rgRow');
         this.localScrollService.setParams({
             contentSize: this.contentWidth,
-            clientSize: this.horizontalScroll.clientWidth,
+            clientSize: clientSize.rgCol,
             virtualSize: 0,
         }, 'rgCol');
-        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
-        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
         var _a, _b;
         const physicalContentHeight = getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
         const physicalContentWidth = getContentSize(this.contentWidth, 0);
-        return (h(Host, { key: 'e52df53dcdcac76f02160615399c558e78fe5825', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, h("div", { key: '6821c4472db2208c2d52da9d6d43a7e5343d15bb', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, h("div", { key: '1916ec94af312621ed4d937c905ed745a23a7d3b', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: '2348a566b127f27d969a4e2ff67fab4022501ceb', name: HEADER_SLOT })), h("div", { key: 'd88eebb7b0028b350f5b0feb6b3893efbd3f645c', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, h("div", { key: '1778856706d9d6bbc52882a150cb66c9b3f11e06', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, h("slot", { key: '200bc8a9e692b6183ac2665b68961d28892f7cab', name: CONTENT_SLOT }))), h("div", { key: 'dc812739b4ad829867dd1effe94a871be247979a', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: '06e3b3a4f88c477dc33268ee317856820f2650e6', name: FOOTER_SLOT })))));
+        return (h(Host, { key: 'ec8d907976c1d50f7aab3c263be3f0249a274df6', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, h("div", { key: 'e35696a7993ac94261426b45c28d488cdc42b7f0', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, h("div", { key: 'a6997451e01eacda1d27d4efa1d74e1748626218', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: '1d401e87d32d5b1531c2211723b552bbc894f22c', name: HEADER_SLOT })), h("div", { key: 'ceab6f9e812d6ca9a0aa376afcd2562a17f505e0', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, h("div", { key: 'a9556578a23d6efddec2e982e863aec064042154', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, h("slot", { key: '0ae01f9736b9740612e75261f6e3abebda533377', name: CONTENT_SLOT }))), h("div", { key: '09c2565d4ed449a43820f92d97b6558fca3758e7', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: '1ffb08ff8138a560cc09d82e3fe22a53e502aafe', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/dist/{revo-grid/viewport.store-COAfzAyu.js → esm/viewport.store-_c579YyM.js}

@@ -15,6 +15,29 @@ function getViewportMaxCoordinate(dimension, viewportSize, frameOffset = 1) {
     }
     return Math.max(0, dimension.realSize - viewportSize - dimension.originItemSize * frameOffset);
 }
+/**
+ * Clamp the viewport coordinate within the valid range.
+ * Given a scroll position, pick a safe starting point for rendering visible items.
+ *
+ * Do not use it when you need the exact scroll position for positioning math.
+ *
+ * It does two things:
+ * 1. If the coordinate is below 0, use 0.
+ * 2. If the coordinate is too close to the very end, pull it back a bit.
+ *
+ * Example:
+ *
+ * content height: 1000px
+ * viewport height: 200px
+ * row height: 30px
+ * The real max scroll is:
+ *
+ * 1000 - 200 = 800
+ * But clampViewportCoordinate may clamp to:
+ *
+ * 1000 - 200 - 30 = 770
+ * Ask for 800 -> it returns 770.
+ */
 function clampViewportCoordinate(coordinate, dimension, viewportSize, frameOffset = 1) {
     return Math.min(Math.max(0, coordinate), getViewportMaxCoordinate(dimension, viewportSize, frameOffset));
 }

package/dist/{esm/column.drag.plugin-DCZW62Uc.js → revo-grid/column.drag.plugin-Cg2U-91C.js}

@@ -3,12 +3,12 @@
  */
 import { J as reduce, g as getRange, K as baseEach, C as getColumnType, c as columnTypes, L as toInteger, u as isGrouping, t as getGroupingName, r as rowTypes, B as getCellDataParsed, A as getCellRaw, j as GROUP_COLUMN_PROP, I as getColumnByProp, h as GROUP_EXPANDED, x as getParsedGroup, y as isSameGroup, G as GROUP_DEPTH, e as PSEUDO_GROUP_ITEM_VALUE, d as PSEUDO_GROUP_ITEM_ID, o as GROUPING_ROW_TYPE, p as getSource, f as PSEUDO_GROUP_COLUMN, s as gatherGrouping, m as GROUP_EXPAND_EVENT, v as isGroupingColumn, q as getExpanded, E as isColGrouping } from './column.service-CC_SD8W3.js';
 import { K as createStore, l as setStore, i as calculateDimensionData, L as identity, N as isArray, b as getSourceItem, g as getPhysical, e as setItems, j as getItemByPosition } from './dimension.helpers-CGKwSvw6.js';
-import { j as calculateRowHeaderSize } from './viewport.store-COAfzAyu.js';
+import { j as calculateRowHeaderSize } from './viewport.store-_c579YyM.js';
 import { g as getScrollbarSize, t as timeout } from './index-Db3qZoW5.js';
 import { h } from './index-Chp_81rd.js';
 import { b as FILTER_PROP, i as isFilterBtn } from './filter.button-C8XTWPU2.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
-import { O as ON_COLUMN_CLICK, d as dispatch } from './header-cell-renderer-BsvUQ8GS.js';
+import { O as ON_COLUMN_CLICK, d as dispatch } from './header-cell-renderer-B-LX2sgu.js';
 
 function calculateRealSize({ count, originItemSize, sizes, }) {
     const safeCount = Math.max(0, count);

package/dist/revo-grid/{header-cell-renderer-BsvUQ8GS.js → header-cell-renderer-B-LX2sgu.js}

@@ -283,24 +283,13 @@ const ResizableElement = (props, children) => {
             }
         })) ||
         null;
-    if (props.active) {
-        if (props.canResize) {
-            for (let p in props.active) {
-                resizeEls.push(h("div", { onClick: e => e.preventDefault(), onDblClick: e => {
-                        var _a;
-                        e.preventDefault();
-                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                    }, onMouseDown: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), onTouchStart: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), class: `resizable resizable-${props.active[p]}` }));
-            }
-        }
-        else {
-            for (let _p in props.active) {
-                resizeEls.push(h("div", { onClick: e => e.preventDefault(), onTouchStart: (e) => e.preventDefault(), onDblClick: e => {
-                        var _a;
-                        e.preventDefault();
-                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                    }, class: `no-resize` }));
-            }
+    if (props.active && props.canResize) {
+        for (let p in props.active) {
+            resizeEls.push(h("div", { onClick: e => e.preventDefault(), onDblClick: e => {
+                    var _a;
+                    e.preventDefault();
+                    (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                }, onMouseDown: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), onTouchStart: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), class: `resizable resizable-${props.active[p]}` }));
         }
     }
     return (h("div", Object.assign({}, props, { ref: e => e && (directive === null || directive === void 0 ? void 0 : directive.set(e)) }), children, resizeEls));

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

@@ -2,16 +2,16 @@
  * Built by Revolist OU ❤️
  */
 export { o as GROUPING_ROW_TYPE, j as GROUP_COLUMN_PROP, G as GROUP_DEPTH, h as GROUP_EXPANDED, l as GROUP_EXPAND_BTN, m as GROUP_EXPAND_EVENT, k as GROUP_ORIGINAL_INDEX, f as PSEUDO_GROUP_COLUMN, P as PSEUDO_GROUP_ITEM, d as PSEUDO_GROUP_ITEM_ID, e as PSEUDO_GROUP_ITEM_VALUE, c as columnTypes, a as cropCellToMax, H as gatherGroup, s as gatherGrouping, z as getCellData, B as getCellDataParsed, A as getCellRaw, I as getColumnByProp, D as getColumnSizes, C as getColumnType, F as getColumns, q as getExpanded, t as getGroupingName, x as getParsedGroup, g as getRange, p as getSource, E as isColGrouping, u as isGrouping, v as isGroupingColumn, b as isRangeSingleCell, i as isRowType, y as isSameGroup, w as measureEqualDepth, n as nextCell, r as rowTypes } from './column.service-CC_SD8W3.js';
-import { B as BasePlugin } from './column.drag.plugin-DCZW62Uc.js';
-export { A as AutoSizeColumnPlugin, n as BEFORE_COLUMN_DRAG_END_EVENT, m as COLUMN_DRAG_END_EVENT, l as COLUMN_DRAG_MOVE_EVENT, o as COLUMN_DRAG_START_EVENT, C as ColumnAutoSizeMode, p as ColumnMovePlugin, D as DimensionStore, b as ExportCsv, E as ExportFilePlugin, c as FILTER_CONFIG_CHANGED_EVENT, F as FILTER_TRIMMED_TYPE, d as FILTE_PANEL, e as FilterPlugin, G as GroupingRowPlugin, S as SelectionStore, r as SortingPlugin, a as StretchColumn, v as defaultCellCompare, w as descCellCompare, j as doCollapse, k as doExpand, f as filterCoreFunctionsIndexedByType, h as filterNames, g as filterTypes, y as getComparer, q as getLeftRelative, x as getNextOrder, t as getSortingIndex, s as hasActiveSorting, i as isStretchPlugin, u as sortIndexByItems } from './column.drag.plugin-DCZW62Uc.js';
-export { d as dispatch, a as dispatchByEvent } from './header-cell-renderer-BsvUQ8GS.js';
+import { B as BasePlugin } from './column.drag.plugin-Cg2U-91C.js';
+export { A as AutoSizeColumnPlugin, n as BEFORE_COLUMN_DRAG_END_EVENT, m as COLUMN_DRAG_END_EVENT, l as COLUMN_DRAG_MOVE_EVENT, o as COLUMN_DRAG_START_EVENT, C as ColumnAutoSizeMode, p as ColumnMovePlugin, D as DimensionStore, b as ExportCsv, E as ExportFilePlugin, c as FILTER_CONFIG_CHANGED_EVENT, F as FILTER_TRIMMED_TYPE, d as FILTE_PANEL, e as FilterPlugin, G as GroupingRowPlugin, S as SelectionStore, r as SortingPlugin, a as StretchColumn, v as defaultCellCompare, w as descCellCompare, j as doCollapse, k as doExpand, f as filterCoreFunctionsIndexedByType, h as filterNames, g as filterTypes, y as getComparer, q as getLeftRelative, x as getNextOrder, t as getSortingIndex, s as hasActiveSorting, i as isStretchPlugin, u as sortIndexByItems } from './column.drag.plugin-Cg2U-91C.js';
+export { d as dispatch, a as dispatchByEvent } from './header-cell-renderer-B-LX2sgu.js';
 export { C as CellRenderer, G as GroupingRowRenderer, S as SortingSign, e as expandEvent, a as expandSvgIconVNode } from './cell-renderer-BtN-NGCk.js';
 export { a as applyMixins, f as findPositionInArray, g as getScrollbarSize, m as mergeSortedArray, p as pushSorted, r as range, s as scaleValue, t as timeout } from './index-Db3qZoW5.js';
 export { T as TextEditor } from './text-editor-C3RUSwH5.js';
 export { k as isAll, c as isClear, h as isCopy, a as isCtrlKey, b as isCtrlMetaKey, g as isCut, m as isEditInput, n as isEditorCtrConstructible, f as isEnterKeyValue, i as isMetaKey, j as isPaste, l as isShortcutModifier, d as isTab, e as isTabKeyValue } from './edit.utils-Dnnbd0xG.js';
 export { h } from './index-Chp_81rd.js';
 export { C as CELL_CLASS, z as CELL_HANDLER_CLASS, m as DATA_COL, n as DATA_ROW, o as DISABLED_CLASS, x as DRAGGABLE_CLASS, A as DRAGG_TEXT, w as DRAG_ICON_CLASS, D as DataStore, E as EDIT_INPUT_WR, F as FOCUS_CLASS, G as GRID_INTERNALS, v as HEADER_ACTUAL_ROW_CLASS, H as HEADER_CLASS, u as HEADER_ROW_CLASS, r as HEADER_SORTABLE_CLASS, M as MIN_COL_SIZE, y as MOBILE_CLASS, R as RESIZE_INTERVAL, B as ROW_FOCUSED_CLASS, q as ROW_HEADER_TYPE, S as SELECTION_BORDER_CLASS, T as TMP_SELECTION_BG_CLASS, i as calculateDimensionData, I as codesLetter, h as gatherTrimmedItems, k as getItemByIndex, j as getItemByPosition, g as getPhysical, b as getSourceItem, f as getSourceItemVirtualIndexByProp, c as getSourcePhysicalIndex, a as getVisibleSourceItem, J as keyValues, p as proxyPlugin, e as setItems, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, l as setStore, t as trimmedPlugin } from './dimension.helpers-CGKwSvw6.js';
-export { V as ViewportStore, b as addMissingItems, j as calculateRowHeaderSize, c as clampViewportCoordinate, f as getFirstItem, d as getItems, h as getLastItem, a as getUpdatedItemsByPosition, g as getViewportMaxCoordinate, i as isActiveRange, e as isActiveRangeOutsideLastItem, r as recombineByOffset, s as setItemSizes, u as updateMissingAndRange } from './viewport.store-COAfzAyu.js';
+export { V as ViewportStore, b as addMissingItems, j as calculateRowHeaderSize, c as clampViewportCoordinate, f as getFirstItem, d as getItems, h as getLastItem, a as getUpdatedItemsByPosition, g as getViewportMaxCoordinate, i as isActiveRange, e as isActiveRangeOutsideLastItem, r as recombineByOffset, s as setItemSizes, u as updateMissingAndRange } from './viewport.store-_c579YyM.js';
 export { A as AND_OR_BUTTON, e as AndOrButton, a as FILTER_BUTTON_ACTIVE, F as FILTER_BUTTON_CLASS, b as FILTER_PROP, c as FilterButton, T as TRASH_BUTTON, d as TrashButton, i as isFilterBtn } from './filter.button-C8XTWPU2.js';
 import './debounce-PCRWZliA.js';
 

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

@@ -6,13 +6,13 @@ import { c as columnTypes, J as reduce, C as getColumnType, r as rowTypes, i as
 import { D as DataStore, b as getSourceItem, f as getSourceItemVirtualIndexByProp, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, a as getVisibleSourceItem, h as gatherTrimmedItems, k as getItemByIndex, R as RESIZE_INTERVAL } from './dimension.helpers-CGKwSvw6.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
 import { g as getScrollDimension, v as viewportDataPartition, F as FOOTER_SLOT, C as CONTENT_SLOT, H as HEADER_SLOT, D as DATA_SLOT } from './viewport.helpers-CoCAvmZs.js';
-import { c as clampViewportCoordinate, V as ViewportStore } from './viewport.store-COAfzAyu.js';
-import { D as DimensionStore, S as SelectionStore, B as BasePlugin, G as GroupingRowPlugin, a as StretchColumn, i as isStretchPlugin, A as AutoSizeColumnPlugin, e as FilterPlugin, E as ExportFilePlugin, r as SortingPlugin, p as ColumnMovePlugin } from './column.drag.plugin-DCZW62Uc.js';
+import { D as DimensionStore, S as SelectionStore, B as BasePlugin, G as GroupingRowPlugin, a as StretchColumn, i as isStretchPlugin, A as AutoSizeColumnPlugin, e as FilterPlugin, E as ExportFilePlugin, r as SortingPlugin, p as ColumnMovePlugin } from './column.drag.plugin-Cg2U-91C.js';
+import { V as ViewportStore } from './viewport.store-_c579YyM.js';
 import { T as ThemeService } from './theme.service-BmnDvr6P.js';
 import { t as timeout } from './index-Db3qZoW5.js';
 import { g as getPropertyFromEvent } from './events-BvSmBueA.js';
 import './filter.button-C8XTWPU2.js';
-import './header-cell-renderer-BsvUQ8GS.js';
+import './header-cell-renderer-B-LX2sgu.js';
 
 class ColumnDataProvider {
     get stores() {
@@ -372,7 +372,16 @@ class DimensionProvider {
             clientSize,
             virtualSize: viewportSize,
         });
-        const renderCoordinate = clampViewportCoordinate(coordinate, dimension, viewportSize);
+        // Render offset must use the true logical scroll coordinate
+        // It is the logical scroll position that should be used for compressed-scroll offset math.
+        const renderCoordinate = Math.min(Math.max(0, coordinate), // prevents negative scroll positions
+        scrollDimension.logicalScrollSize); // prevents positions past the logical end
+        /**
+         * If viewport sizing is initialized (clientSize and viewportSize are truthy), calculate the offset needed for compressed scroll.
+         * Otherwise keep renderOffset at 0, because there is not enough measurement data yet.
+         *
+         * In normal scrolling, logical and physical coordinates are the same, so offset is 0.
+         */
         const renderOffset = clientSize && viewportSize
             ? scrollDimension.getRenderOffset(renderCoordinate)
             : 0;

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

@@ -8,7 +8,7 @@ import { g as getRange, M as ColumnService, z as getCellData, N as getCellEditor
 import { l as isShortcutModifier, m as isEditInput, c as isClear, d as isTab, f as isEnterKeyValue, h as isCopy, g as isCut, j as isPaste, k as isAll } from './edit.utils-Dnnbd0xG.js';
 import { t as timeout, g as getScrollbarSize } from './index-Db3qZoW5.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
-import { V as ViewportStore, j as calculateRowHeaderSize } from './viewport.store-COAfzAyu.js';
+import { V as ViewportStore, j as calculateRowHeaderSize } from './viewport.store-_c579YyM.js';
 import { H as HEADER_SLOT } from './viewport.helpers-CoCAvmZs.js';
 import { L as LocalScrollTimer, a as LocalScrollService, g as getContentSize, t as throttle } from './throttle-CaUDyxyU.js';
 

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

@@ -6,7 +6,7 @@ import { M as ColumnService, u as isGrouping } from './column.service-CC_SD8W3.j
 import { B as ROW_FOCUSED_CLASS, b as getSourceItem, n as DATA_ROW, m as DATA_COL, M as MIN_COL_SIZE, r as HEADER_SORTABLE_CLASS, H as HEADER_CLASS, F as FOCUS_CLASS, k as getItemByIndex, u as HEADER_ROW_CLASS, v as HEADER_ACTUAL_ROW_CLASS } from './dimension.helpers-CGKwSvw6.js';
 import { G as GroupingRowRenderer, C as CellRenderer, R as RowRenderer, P as PADDING_DEPTH, S as SortingSign } from './cell-renderer-BtN-NGCk.js';
 import { c as FilterButton } from './filter.button-C8XTWPU2.js';
-import { H as HeaderCellRenderer } from './header-cell-renderer-BsvUQ8GS.js';
+import { H as HeaderCellRenderer } from './header-cell-renderer-B-LX2sgu.js';
 import { t as throttle, L as LocalScrollTimer, a as LocalScrollService, g as getContentSize } from './throttle-CaUDyxyU.js';
 import { H as HEADER_SLOT, C as CONTENT_SLOT, F as FOOTER_SLOT } from './viewport.helpers-CoCAvmZs.js';
 import './debounce-PCRWZliA.js';
@@ -262,20 +262,23 @@ const RevogrData = class {
 RevogrData.style = revogrDataStyleCss();
 
 const HeaderRenderer = (p) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const hasSortingSign = !!(((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable) ||
+        ((_b = p.data) === null || _b === void 0 ? void 0 : _b.order) ||
+        ((_c = p.data) === null || _c === void 0 ? void 0 : _c.sortIndex));
     const cellClass = {
         [HEADER_CLASS]: true,
-        [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
+        [HEADER_SORTABLE_CLASS]: !!((_d = p.data) === null || _d === void 0 ? void 0 : _d.sortable),
     };
-    if ((_b = p.data) === null || _b === void 0 ? void 0 : _b.order) {
+    if ((_e = p.data) === null || _e === void 0 ? void 0 : _e.order) {
         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),
+        key: String((_g = (_f = p.data) === null || _f === void 0 ? void 0 : _f.prop) !== null && _g !== void 0 ? _g : p.column.itemIndex),
         [DATA_COL]: p.column.itemIndex,
         canResize: p.canResize,
-        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,
+        minWidth: ((_h = p.data) === null || _h === void 0 ? void 0 : _h.minSize) || MIN_COL_SIZE,
+        maxWidth: (_j = p.data) === null || _j === void 0 ? void 0 : _j.maxSize,
         active: p.active || ['r'],
         class: cellClass,
         style: {
@@ -311,7 +314,7 @@ const HeaderRenderer = (p) => {
             }
         }
     }
-    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 })) : ('')));
+    return (h(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hasSortingSign ? h(SortingSign, { column: p.data }) : null, p.canFilter && ((_k = p.data) === null || _k === void 0 ? void 0 : _k.filter) !== false ? (h(FilterButton, { column: p.data })) : ('')));
 };
 
 const HeaderGroupRenderer = (p) => {
@@ -605,6 +608,7 @@ class GridResizeService {
     }
     destroy() {
         var _a;
+        this.apply.cancel();
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
     }
@@ -743,6 +747,10 @@ const RevogrViewportScroll = class {
                 scroll: this.horizontalScroll.scrollLeft,
                 noScroll: this.colType !== 'rgCol',
             };
+            this.setScrollParams({
+                rgRow: calculatedHeight,
+                rgCol: calculatedWidth,
+            });
             // Process changes in order: width first, then height
             const dimensions = ['rgCol', 'rgRow'];
             for (const dimension of dimensions) {
@@ -799,24 +807,30 @@ const RevogrViewportScroll = class {
     }
     async componentDidRender() {
         var _a, _b, _c, _d;
+        this.setScrollParams({
+            rgRow: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            rgCol: this.horizontalScroll.clientWidth,
+        });
+        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
+        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
+    }
+    setScrollParams(clientSize) {
         this.localScrollService.setParams({
             contentSize: this.contentHeight,
-            clientSize: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            clientSize: clientSize.rgRow,
             virtualSize: 0,
         }, 'rgRow');
         this.localScrollService.setParams({
             contentSize: this.contentWidth,
-            clientSize: this.horizontalScroll.clientWidth,
+            clientSize: clientSize.rgCol,
             virtualSize: 0,
         }, 'rgCol');
-        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
-        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
         var _a, _b;
         const physicalContentHeight = getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
         const physicalContentWidth = getContentSize(this.contentWidth, 0);
-        return (h(Host, { key: 'e52df53dcdcac76f02160615399c558e78fe5825', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, h("div", { key: '6821c4472db2208c2d52da9d6d43a7e5343d15bb', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, h("div", { key: '1916ec94af312621ed4d937c905ed745a23a7d3b', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: '2348a566b127f27d969a4e2ff67fab4022501ceb', name: HEADER_SLOT })), h("div", { key: 'd88eebb7b0028b350f5b0feb6b3893efbd3f645c', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, h("div", { key: '1778856706d9d6bbc52882a150cb66c9b3f11e06', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, h("slot", { key: '200bc8a9e692b6183ac2665b68961d28892f7cab', name: CONTENT_SLOT }))), h("div", { key: 'dc812739b4ad829867dd1effe94a871be247979a', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: '06e3b3a4f88c477dc33268ee317856820f2650e6', name: FOOTER_SLOT })))));
+        return (h(Host, { key: 'ec8d907976c1d50f7aab3c263be3f0249a274df6', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, h("div", { key: 'e35696a7993ac94261426b45c28d488cdc42b7f0', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, h("div", { key: 'a6997451e01eacda1d27d4efa1d74e1748626218', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: '1d401e87d32d5b1531c2211723b552bbc894f22c', name: HEADER_SLOT })), h("div", { key: 'ceab6f9e812d6ca9a0aa376afcd2562a17f505e0', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, h("div", { key: 'a9556578a23d6efddec2e982e863aec064042154', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, h("slot", { key: '0ae01f9736b9740612e75261f6e3abebda533377', name: CONTENT_SLOT }))), h("div", { key: '09c2565d4ed449a43820f92d97b6558fca3758e7', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: '1ffb08ff8138a560cc09d82e3fe22a53e502aafe', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/dist/{esm/viewport.store-COAfzAyu.js → revo-grid/viewport.store-_c579YyM.js}

@@ -15,6 +15,29 @@ function getViewportMaxCoordinate(dimension, viewportSize, frameOffset = 1) {
     }
     return Math.max(0, dimension.realSize - viewportSize - dimension.originItemSize * frameOffset);
 }
+/**
+ * Clamp the viewport coordinate within the valid range.
+ * Given a scroll position, pick a safe starting point for rendering visible items.
+ *
+ * Do not use it when you need the exact scroll position for positioning math.
+ *
+ * It does two things:
+ * 1. If the coordinate is below 0, use 0.
+ * 2. If the coordinate is too close to the very end, pull it back a bit.
+ *
+ * Example:
+ *
+ * content height: 1000px
+ * viewport height: 200px
+ * row height: 30px
+ * The real max scroll is:
+ *
+ * 1000 - 200 = 800
+ * But clampViewportCoordinate may clamp to:
+ *
+ * 1000 - 200 - 30 = 770
+ * Ask for 800 -> it returns 770.
+ */
 function clampViewportCoordinate(coordinate, dimension, viewportSize, frameOffset = 1) {
     return Math.min(Math.max(0, coordinate), getViewportMaxCoordinate(dimension, viewportSize, frameOffset));
 }

package/dist/types/components/scroll/revogr-viewport-scroll.d.ts

@@ -90,6 +90,7 @@ export declare class RevogrViewportScroll implements ElementScroll {
     setScrollVisibility(type: DimensionType, size: number, innerContentSize: number): void;
     disconnectedCallback(): void;
     componentDidRender(): Promise<void>;
+    private setScrollParams;
     render(): any;
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/dist/types/services/scroll.dimension.helpers.d.ts

@@ -5,11 +5,30 @@ export type ScrollDimensionInput = {
     maxScrollSize?: number;
 };
 export type ScrollDimension = {
+    /**
+     * Real logical grid content size
+     * e.g. 1_000_000 rows * 46px = 46_000_000px.
+     */
     contentSize: number;
+    /**
+     * Visible viewport size provided by the browser
+     * e.g. 600px height of the scrollable container.
+     */
     clientSize: number;
     viewportSize: number;
+    /**
+     * Fake DOM scrollable size that RevoGrid gives the browser scrollbar.
+     * Grid maps between physical scrollbar coordinates and logical grid coordinates so rows still represent the full dataset.
+     */
     physicalContentSize: number;
+    /**
+     * How far the grid should be scrollable logically.
+     * contentSize - viewportSize, meaning the largest valid logical scroll coordinate.
+     */
     logicalScrollSize: number;
+    /**
+     * How far the browser scrollbar can actually move.
+     */
     physicalScrollSize: number;
     isCompressed: boolean;
     toLogicalCoordinate(coordinate: number): number;

package/dist/types/store/vp/viewport.helpers.d.ts

@@ -2,6 +2,29 @@ import type { DimensionSettingsState, PositionItem, ViewSettingSizeProp, Viewpor
 export type DimensionDataViewport = Pick<DimensionSettingsState, 'indexes' | 'positionIndexes' | 'positionIndexToItem' | 'sizes' | 'originItemSize' | 'realSize'>;
 export type ItemsToUpdate = Pick<ViewportStateItems, 'items' | 'start' | 'end'>;
 export declare function getViewportMaxCoordinate(dimension: Pick<DimensionSettingsState, 'realSize' | 'originItemSize'>, viewportSize: number, frameOffset?: number): number;
+/**
+ * Clamp the viewport coordinate within the valid range.
+ * Given a scroll position, pick a safe starting point for rendering visible items.
+ *
+ * Do not use it when you need the exact scroll position for positioning math.
+ *
+ * It does two things:
+ * 1. If the coordinate is below 0, use 0.
+ * 2. If the coordinate is too close to the very end, pull it back a bit.
+ *
+ * Example:
+ *
+ * content height: 1000px
+ * viewport height: 200px
+ * row height: 30px
+ * The real max scroll is:
+ *
+ * 1000 - 200 = 800
+ * But clampViewportCoordinate may clamp to:
+ *
+ * 1000 - 200 - 30 = 770
+ * Ask for 800 -> it returns 770.
+ */
 export declare function clampViewportCoordinate(coordinate: number, dimension: Pick<DimensionSettingsState, 'realSize' | 'originItemSize'>, viewportSize: number, frameOffset?: number): number;
 /**
  * Update items based on new scroll position