@revolist/revogrid 4.12.4 → 4.12.6

package/dist/types/components/revoGrid/viewport.resize.service.d.ts

@@ -1,11 +1,13 @@
-interface Events {
-    resize(entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver): void;
-}
+type ResizeEntry = {
+    width: number;
+    height: number;
+};
 export default class GridResizeService {
-    private events;
+    private readonly resize;
     private resizeObserver;
-    private resize;
-    constructor(el: HTMLElement, events: Events);
+    private previousSize;
+    private readonly apply;
+    constructor(el: HTMLElement, resize: (entry: ResizeEntry, previousSize: ResizeEntry) => void);
     init(el: HTMLElement): Promise<void>;
     destroy(): void;
 }

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

@@ -15,7 +15,7 @@ type LocalScrollEvent = {
 export declare class RevogrViewportScroll implements ElementScroll {
     /**
      * Enable row header
-    */
+     */
     readonly rowHeader: boolean;
     /**
      * Width of inner content
@@ -44,7 +44,7 @@ export declare class RevogrViewportScroll implements ElementScroll {
     /**
      * Silently scroll to coordinate
      * Made to align negative coordinates for mobile devices
-    */
+     */
     silentScroll: EventEmitter<ViewPortScrollEvent>;
     horizontalScroll: HTMLElement;
     private verticalScroll?;

package/dist/types/components.d.ts

@@ -443,7 +443,7 @@ export namespace Components {
           * Disables dynamic filtering. A way to apply filters on Save only
          */
         "disableDynamicFiltering": boolean;
-        "filterCaptions": FilterCaptions | undefined;
+        "filterCaptions": Partial<FilterCaptions> | undefined;
         "filterEntities": Record<string, LogicFunction>;
         "filterNames": Record<string, string>;
         "getChanges": () => Promise<ShowData | undefined>;
@@ -1835,7 +1835,7 @@ declare namespace LocalJSX {
           * Disables dynamic filtering. A way to apply filters on Save only
          */
         "disableDynamicFiltering"?: boolean;
-        "filterCaptions"?: FilterCaptions | undefined;
+        "filterCaptions"?: Partial<FilterCaptions> | undefined;
         "filterEntities"?: Record<string, LogicFunction>;
         "filterNames"?: Record<string, string>;
         "onFilterChange"?: (event: RevogrFilterPanelCustomEvent<MultiFilterItem>) => void;

package/dist/types/plugins/filter/filter.panel.d.ts

@@ -20,7 +20,7 @@ export declare class FilterPanel {
     filterItems: MultiFilterItem;
     filterNames: Record<string, string>;
     filterEntities: Record<string, LogicFunction>;
-    filterCaptions: FilterCaptions | undefined;
+    filterCaptions: Partial<FilterCaptions> | undefined;
     /**
      * Disables dynamic filtering. A way to apply filters on Save only
      */

package/dist/types/plugins/filter/filter.types.d.ts

@@ -4,11 +4,11 @@ export type DateEnum = 'today' | 'yesterday' | 'tomorrow' | 'thisweek' | 'lastwe
 export type ExtraField = 'input' | 'select' | 'multi' | 'datepicker';
 export type LogicFunctionParam = any;
 export type LogicFunctionExtraParam = 'select' | 'input' | 'multi' | 'datepicker' | number | Date | DateEnum | null | undefined | string | string[] | number[];
-export type LogicFunction<T1 = LogicFunctionParam, T2 = LogicFunctionExtraParam> = {
+export interface LogicFunction<T1 = LogicFunctionParam, T2 = LogicFunctionExtraParam> {
     (value: T1, extra?: T2): boolean;
     extra?: ExtraField;
-};
-export type CustomFilter<T1 = LogicFunctionParam, T2 = LogicFunctionExtraParam> = {
+}
+export interface CustomFilter<T1 = LogicFunctionParam, T2 = LogicFunctionExtraParam> {
     /**
      * Property defined in column { filter: string/number/abstract/enum...etc }
      */
@@ -21,8 +21,8 @@ export type CustomFilter<T1 = LogicFunctionParam, T2 = LogicFunctionExtraParam>
      * Function to apply the filter
      */
     func: LogicFunction<T1, T2>;
-};
-export type FilterCaptions = {
+}
+export interface FilterCaptions {
     title: string;
     save: string;
     reset: string;
@@ -32,15 +32,15 @@ export type FilterCaptions = {
     placeholder: string;
     and: string;
     or: string;
-};
-export type FilterLocalization = {
-    captions: FilterCaptions;
+}
+export interface FilterLocalization {
+    captions: Partial<FilterCaptions>;
     filterNames: Record<FilterType, string>;
-};
+}
 /**
  * Filter configuration for a column. This is the type of the `filter` property on a column.
  */
-export type ColumnFilterConfig = {
+export interface ColumnFilterConfig {
     /**
      * The collection of filters to be applied to the column.
      */
@@ -70,17 +70,17 @@ export type ColumnFilterConfig = {
      * when the user clicks on the filter button.
      */
     disableDynamicFiltering?: boolean;
-};
+}
 export type FilterCollectionItem = {
     type: FilterType;
     value?: any;
 };
-export type FilterItem = {
+export interface FilterItem {
     prop?: ColumnProp;
     type?: FilterType;
     value?: any;
-};
-export type FilterData = {
+}
+export interface FilterData {
     id: number;
     /**
      * Filter type
@@ -98,11 +98,11 @@ export type FilterData = {
      * Filter relation
      */
     relation?: 'and' | 'or';
-};
-export type MultiFilterItem = {
+}
+export interface MultiFilterItem {
     [prop: string]: FilterData[];
-};
-export type ShowData = {
+}
+export interface ShowData extends FilterItem, Omit<ColumnRegular, 'filter'> {
     x: number;
     y: number;
     /**
@@ -113,4 +113,4 @@ export type ShowData = {
     filterItems?: MultiFilterItem;
     hideDefaultFilters?: boolean;
     extraContent?: (data: ShowData) => any;
-} & FilterItem & Omit<ColumnRegular, 'filter'>;
+}

package/dist/types/types/interfaces.d.ts

@@ -74,7 +74,7 @@ export type RowDrag = boolean | {
 /**
  * `ColumnGrouping` type is used to define a grouping in a column.
  */
-export type ColumnGrouping<T = any> = {
+export interface ColumnGrouping<T = any> {
     /**
      * An array of objects that represent the children of the grouping.
      */
@@ -83,7 +83,7 @@ export type ColumnGrouping<T = any> = {
      * A `DataFormat` object that represents the name of the grouping.
      */
     name: DataFormat<T>;
-};
+}
 /**
  * Configuration for header inner template properties
  */
@@ -727,14 +727,14 @@ export type ScrollCoordinateEvent = {
     coordinate: number;
 };
 /** Range paste. */
-export type RangeClipboardPasteEvent = {
+export interface RangeClipboardPasteEvent extends AllDimensionType {
     data: DataLookup;
     models: Partial<DataLookup>;
     range: RangeArea | null;
-} & AllDimensionType;
+}
 /** Range copy. */
-export type RangeClipboardCopyEventProps<T = any> = {
+export interface RangeClipboardCopyEventProps<T = any> extends AllDimensionType {
     data: DataFormat<T>[][];
     range: RangeArea;
     mapping: OldNewRangeMapping;
-} & AllDimensionType;
+}

package/hydrate/index.js

@@ -16327,6 +16327,9 @@ const NO_COORDINATE = -1;
  * return full size
  */
 function getContentSize(contentSize, clientSize, virtualSize = 0) {
+    if (virtualSize > contentSize) {
+        return 0;
+    }
     return contentSize + (virtualSize ? clientSize - virtualSize : 0);
 }
 class LocalScrollService {
@@ -16594,15 +16597,31 @@ class RevogrScrollVirtual {
     }
     componentDidRender() {
         const type = this.dimension === 'rgRow' ? 'scrollHeight' : 'scrollWidth';
-        if (this.element[type] > this.size) {
-            this.size = this.scrollSize;
+        // Get scrollbar size once during component initialization
+        const scrollbarSize = this.scrollSize;
+        // Calculate if content exceeds viewport size
+        // Add scrollbar size to the comparison to account for other dimension's scrollbar
+        const hasScroll = this.element[type] > this.size + scrollbarSize;
+        // Set scroll size based on whether scroll is needed
+        this.size = hasScroll ? this.scrollSize : 0;
+        let additionalScrollbarSize = 0;
+        if (this.dimension === 'rgRow') {
+            additionalScrollbarSize =
+                this.element.scrollWidth > this.element.clientWidth
+                    ? scrollbarSize
+                    : 0;
         }
         else {
-            this.size = 0;
+            additionalScrollbarSize =
+                this.element.scrollHeight > this.element.clientHeight
+                    ? scrollbarSize
+                    : 0;
         }
+        const clientSize = this.size + additionalScrollbarSize;
         this.localScrollService.setParams({
             contentSize: this.dimensionStore.get('realSize'),
-            clientSize: this.size,
+            // Add scrollbar size to clientSize if other dimension has scroll
+            clientSize,
             virtualSize: this.viewportStore.get('clientSize'),
         }, this.dimension);
     }
@@ -16623,9 +16642,8 @@ class RevogrScrollVirtual {
     }
     render() {
         const sizeType = this.dimension === 'rgRow' ? 'height' : 'width';
-        const size = getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('clientSize') // content viewport size
-        );
-        return (hAsync(Host, { key: '2d11902403db45b805bde88b6fc40acff4b6b910', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '74978e90cbf66e3fb6dcc25bd5882346f1515c39', style: {
+        const size = getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('clientSize'));
+        return (hAsync(Host, { key: '7789bd408d3e154836bcd2aed4ebaa1663e7f968', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '40549da97df3a580ad2ddef13fe7b4dbe6df54bc', style: {
                 [sizeType]: `${size}px`,
             } })));
     }
@@ -16655,16 +16673,31 @@ async function resizeObserver$1() {
 }
 
 class GridResizeService {
-    constructor(el, events) {
-        this.events = events;
+    constructor(el, resize) {
+        this.resize = resize;
         this.resizeObserver = null;
-        this.resize = throttle((e, o) => { var _a; return (_a = this.events) === null || _a === void 0 ? void 0 : _a.resize(e, o); }, 10);
+        this.previousSize = {
+            width: 0,
+            height: 0,
+        };
+        this.apply = throttle((e) => {
+            var _a;
+            if (!e.length) {
+                return;
+            }
+            const entry = {
+                width: e[0].contentRect.width,
+                height: e[0].contentRect.height,
+            };
+            (_a = this.resize) === null || _a === void 0 ? void 0 : _a.call(this, entry, this.previousSize);
+            this.previousSize = entry;
+        }, 10);
         this.init(el);
     }
     async init(el) {
         var _a;
         await resizeObserver$1();
-        this.resizeObserver = new ResizeObserver(this.resize);
+        this.resizeObserver = new ResizeObserver(this.apply);
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
     }
     destroy() {
@@ -16786,38 +16819,45 @@ class RevogrViewportScroll {
     }
     componentDidLoad() {
         // track horizontal viewport resize
-        this.resizeService = new GridResizeService(this.horizontalScroll, {
-            resize: entries => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                let height = ((_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect.height) || 0;
+        this.resizeService = new GridResizeService(this.horizontalScroll, (entry, previousSize) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const els = {};
+            if (entry.height !== previousSize.height) {
+                let height = entry.height || 0;
                 if (height) {
-                    height -= ((_c = (_b = this.header) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 0) + ((_e = (_d = this.footer) === null || _d === void 0 ? void 0 : _d.clientHeight) !== null && _e !== void 0 ? _e : 0);
+                    height -=
+                        ((_b = (_a = this.header) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0) +
+                            ((_d = (_c = this.footer) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0);
                 }
-                const els = {
-                    rgRow: {
-                        size: height,
-                        contentSize: this.contentHeight,
-                        scroll: (_f = this.verticalScroll) === null || _f === void 0 ? void 0 : _f.scrollTop,
-                        noScroll: false,
-                    },
-                    rgCol: {
-                        size: ((_g = entries[0]) === null || _g === void 0 ? void 0 : _g.contentRect.width) || 0,
-                        contentSize: this.contentWidth,
-                        scroll: this.horizontalScroll.scrollLeft,
-                        noScroll: this.colType !== 'rgCol',
-                    },
+                els.rgRow = {
+                    size: height,
+                    contentSize: this.contentHeight,
+                    scroll: (_f = (_e = this.verticalScroll) === null || _e === void 0 ? void 0 : _e.scrollTop) !== null && _f !== void 0 ? _f : 0,
+                    noScroll: false,
                 };
-                for (const [dim, item] of Object.entries(els)) {
-                    const dimension = dim;
-                    this.resizeViewport.emit({ dimension, size: item.size, rowHeader: this.rowHeader });
-                    if (item.noScroll) {
-                        continue;
-                    }
-                    (_h = this.localScrollService) === null || _h === void 0 ? void 0 : _h.scroll((_j = item.scroll) !== null && _j !== void 0 ? _j : 0, dimension, true);
-                    // track scroll visibility on outer element change
-                    this.setScrollVisibility(dimension, item.size, item.contentSize);
+            }
+            if (entry.width !== previousSize.width) {
+                els.rgCol = {
+                    size: entry.width || 0,
+                    contentSize: this.contentWidth,
+                    scroll: this.horizontalScroll.scrollLeft,
+                    noScroll: this.colType !== 'rgCol',
+                };
+            }
+            for (const [dim, item] of Object.entries(els)) {
+                const dimension = dim;
+                this.resizeViewport.emit({
+                    dimension,
+                    size: item.size,
+                    rowHeader: this.rowHeader,
+                });
+                if (item.noScroll) {
+                    continue;
                 }
-            },
+                (_g = this.localScrollService) === null || _g === void 0 ? void 0 : _g.scroll((_h = item.scroll) !== null && _h !== void 0 ? _h : 0, dimension, true);
+                // track scroll visibility on outer element change
+                this.setScrollVisibility(dimension, item.size, item.contentSize);
+            }
         });
     }
     /**
@@ -16870,7 +16910,7 @@ class RevogrViewportScroll {
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (hAsync(Host, { key: '9727a9c83d740d8184e12acc06b72c3f28c3b5ac', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '44551981dda7401ac9290d003b1ac7e7f55ee006', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: '8b4962c352e81c343aed7136b7f7a9d71b10ed70', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '789868b91507bc50c18dc99c6bec8f1e4699cbab', name: HEADER_SLOT })), hAsync("div", { key: '0efb49db3fbcbe0bdfcfa24afad495c681de6218', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'eef434a04062b364805702d73c0b28c9e44a27c5', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: '8490b9f01abebeeaa46da811e9ecdc62090ecb00', name: CONTENT_SLOT }))), hAsync("div", { key: 'c3c133d6e73816e9e3c33d5091fc00f959977874', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'e4aae0a9eb10c750306a6bd4c222bcab6d1050e3', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: '970ac2365588d1c894d9684113eb9beaf64e1a1d', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'dc57aab1bde4496e83131d80a7e189db25b93312', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: 'bd014cf0a67bb913016f00f7838344611a1b26df', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '772eb408b6ea670624cc338550215565ec36ef89', name: HEADER_SLOT })), hAsync("div", { key: '5dcf061c78864b0dc4e4ffbcc28c0ebb3536ce8b', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'b45f46aedefe82843b086cdca822e05339a77fda', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: '8d07196c79741ace0f4c734138d69abdf96fee4f', name: CONTENT_SLOT }))), hAsync("div", { key: 'f6313f9394e99a3ad07895ed06e965540268b35a', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'b1bcdb75bb5e4dcc1e43493d7b4f01b2578352e4', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing
@@ -16918,7 +16958,7 @@ class RevogrViewportScroll {
         const clientHeight = (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
         const scrollHeight = (_f = (_e = this.verticalScroll) === null || _e === void 0 ? void 0 : _e.scrollHeight) !== null && _f !== void 0 ? _f : 0;
         // Detect if the user has reached the bottom
-        const atBottom = (scrollTop + clientHeight >= scrollHeight) && e.deltaY > 0;
+        const atBottom = scrollTop + clientHeight >= scrollHeight && e.deltaY > 0;
         const atTop = scrollTop === 0 && e.deltaY < 0;
         if (!atBottom && !atTop) {
             (_g = e.preventDefault) === null || _g === void 0 ? void 0 : _g.call(e);
@@ -16940,7 +16980,7 @@ class RevogrViewportScroll {
         }
         const { scrollLeft, scrollWidth, clientWidth } = this.horizontalScroll;
         // Detect if the user has reached the right end
-        const atRight = (scrollLeft + clientWidth >= scrollWidth) && e.deltaX > 0;
+        const atRight = scrollLeft + clientWidth >= scrollWidth && e.deltaX > 0;
         // Detect if the user has reached the left end
         const atLeft = scrollLeft === 0 && e.deltaX < 0;
         if (!atRight && !atLeft) {

package/hydrate/index.mjs

@@ -16323,6 +16323,9 @@ const NO_COORDINATE = -1;
  * return full size
  */
 function getContentSize(contentSize, clientSize, virtualSize = 0) {
+    if (virtualSize > contentSize) {
+        return 0;
+    }
     return contentSize + (virtualSize ? clientSize - virtualSize : 0);
 }
 class LocalScrollService {
@@ -16590,15 +16593,31 @@ class RevogrScrollVirtual {
     }
     componentDidRender() {
         const type = this.dimension === 'rgRow' ? 'scrollHeight' : 'scrollWidth';
-        if (this.element[type] > this.size) {
-            this.size = this.scrollSize;
+        // Get scrollbar size once during component initialization
+        const scrollbarSize = this.scrollSize;
+        // Calculate if content exceeds viewport size
+        // Add scrollbar size to the comparison to account for other dimension's scrollbar
+        const hasScroll = this.element[type] > this.size + scrollbarSize;
+        // Set scroll size based on whether scroll is needed
+        this.size = hasScroll ? this.scrollSize : 0;
+        let additionalScrollbarSize = 0;
+        if (this.dimension === 'rgRow') {
+            additionalScrollbarSize =
+                this.element.scrollWidth > this.element.clientWidth
+                    ? scrollbarSize
+                    : 0;
         }
         else {
-            this.size = 0;
+            additionalScrollbarSize =
+                this.element.scrollHeight > this.element.clientHeight
+                    ? scrollbarSize
+                    : 0;
         }
+        const clientSize = this.size + additionalScrollbarSize;
         this.localScrollService.setParams({
             contentSize: this.dimensionStore.get('realSize'),
-            clientSize: this.size,
+            // Add scrollbar size to clientSize if other dimension has scroll
+            clientSize,
             virtualSize: this.viewportStore.get('clientSize'),
         }, this.dimension);
     }
@@ -16619,9 +16638,8 @@ class RevogrScrollVirtual {
     }
     render() {
         const sizeType = this.dimension === 'rgRow' ? 'height' : 'width';
-        const size = getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('clientSize') // content viewport size
-        );
-        return (hAsync(Host, { key: '2d11902403db45b805bde88b6fc40acff4b6b910', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '74978e90cbf66e3fb6dcc25bd5882346f1515c39', style: {
+        const size = getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('clientSize'));
+        return (hAsync(Host, { key: '7789bd408d3e154836bcd2aed4ebaa1663e7f968', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '40549da97df3a580ad2ddef13fe7b4dbe6df54bc', style: {
                 [sizeType]: `${size}px`,
             } })));
     }
@@ -16651,16 +16669,31 @@ async function resizeObserver$1() {
 }
 
 class GridResizeService {
-    constructor(el, events) {
-        this.events = events;
+    constructor(el, resize) {
+        this.resize = resize;
         this.resizeObserver = null;
-        this.resize = throttle((e, o) => { var _a; return (_a = this.events) === null || _a === void 0 ? void 0 : _a.resize(e, o); }, 10);
+        this.previousSize = {
+            width: 0,
+            height: 0,
+        };
+        this.apply = throttle((e) => {
+            var _a;
+            if (!e.length) {
+                return;
+            }
+            const entry = {
+                width: e[0].contentRect.width,
+                height: e[0].contentRect.height,
+            };
+            (_a = this.resize) === null || _a === void 0 ? void 0 : _a.call(this, entry, this.previousSize);
+            this.previousSize = entry;
+        }, 10);
         this.init(el);
     }
     async init(el) {
         var _a;
         await resizeObserver$1();
-        this.resizeObserver = new ResizeObserver(this.resize);
+        this.resizeObserver = new ResizeObserver(this.apply);
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
     }
     destroy() {
@@ -16782,38 +16815,45 @@ class RevogrViewportScroll {
     }
     componentDidLoad() {
         // track horizontal viewport resize
-        this.resizeService = new GridResizeService(this.horizontalScroll, {
-            resize: entries => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                let height = ((_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect.height) || 0;
+        this.resizeService = new GridResizeService(this.horizontalScroll, (entry, previousSize) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const els = {};
+            if (entry.height !== previousSize.height) {
+                let height = entry.height || 0;
                 if (height) {
-                    height -= ((_c = (_b = this.header) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 0) + ((_e = (_d = this.footer) === null || _d === void 0 ? void 0 : _d.clientHeight) !== null && _e !== void 0 ? _e : 0);
+                    height -=
+                        ((_b = (_a = this.header) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0) +
+                            ((_d = (_c = this.footer) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0);
                 }
-                const els = {
-                    rgRow: {
-                        size: height,
-                        contentSize: this.contentHeight,
-                        scroll: (_f = this.verticalScroll) === null || _f === void 0 ? void 0 : _f.scrollTop,
-                        noScroll: false,
-                    },
-                    rgCol: {
-                        size: ((_g = entries[0]) === null || _g === void 0 ? void 0 : _g.contentRect.width) || 0,
-                        contentSize: this.contentWidth,
-                        scroll: this.horizontalScroll.scrollLeft,
-                        noScroll: this.colType !== 'rgCol',
-                    },
+                els.rgRow = {
+                    size: height,
+                    contentSize: this.contentHeight,
+                    scroll: (_f = (_e = this.verticalScroll) === null || _e === void 0 ? void 0 : _e.scrollTop) !== null && _f !== void 0 ? _f : 0,
+                    noScroll: false,
                 };
-                for (const [dim, item] of Object.entries(els)) {
-                    const dimension = dim;
-                    this.resizeViewport.emit({ dimension, size: item.size, rowHeader: this.rowHeader });
-                    if (item.noScroll) {
-                        continue;
-                    }
-                    (_h = this.localScrollService) === null || _h === void 0 ? void 0 : _h.scroll((_j = item.scroll) !== null && _j !== void 0 ? _j : 0, dimension, true);
-                    // track scroll visibility on outer element change
-                    this.setScrollVisibility(dimension, item.size, item.contentSize);
+            }
+            if (entry.width !== previousSize.width) {
+                els.rgCol = {
+                    size: entry.width || 0,
+                    contentSize: this.contentWidth,
+                    scroll: this.horizontalScroll.scrollLeft,
+                    noScroll: this.colType !== 'rgCol',
+                };
+            }
+            for (const [dim, item] of Object.entries(els)) {
+                const dimension = dim;
+                this.resizeViewport.emit({
+                    dimension,
+                    size: item.size,
+                    rowHeader: this.rowHeader,
+                });
+                if (item.noScroll) {
+                    continue;
                 }
-            },
+                (_g = this.localScrollService) === null || _g === void 0 ? void 0 : _g.scroll((_h = item.scroll) !== null && _h !== void 0 ? _h : 0, dimension, true);
+                // track scroll visibility on outer element change
+                this.setScrollVisibility(dimension, item.size, item.contentSize);
+            }
         });
     }
     /**
@@ -16866,7 +16906,7 @@ class RevogrViewportScroll {
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (hAsync(Host, { key: '9727a9c83d740d8184e12acc06b72c3f28c3b5ac', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '44551981dda7401ac9290d003b1ac7e7f55ee006', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: '8b4962c352e81c343aed7136b7f7a9d71b10ed70', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '789868b91507bc50c18dc99c6bec8f1e4699cbab', name: HEADER_SLOT })), hAsync("div", { key: '0efb49db3fbcbe0bdfcfa24afad495c681de6218', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'eef434a04062b364805702d73c0b28c9e44a27c5', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: '8490b9f01abebeeaa46da811e9ecdc62090ecb00', name: CONTENT_SLOT }))), hAsync("div", { key: 'c3c133d6e73816e9e3c33d5091fc00f959977874', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'e4aae0a9eb10c750306a6bd4c222bcab6d1050e3', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: '970ac2365588d1c894d9684113eb9beaf64e1a1d', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'dc57aab1bde4496e83131d80a7e189db25b93312', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: 'bd014cf0a67bb913016f00f7838344611a1b26df', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '772eb408b6ea670624cc338550215565ec36ef89', name: HEADER_SLOT })), hAsync("div", { key: '5dcf061c78864b0dc4e4ffbcc28c0ebb3536ce8b', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'b45f46aedefe82843b086cdca822e05339a77fda', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: '8d07196c79741ace0f4c734138d69abdf96fee4f', name: CONTENT_SLOT }))), hAsync("div", { key: 'f6313f9394e99a3ad07895ed06e965540268b35a', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'b1bcdb75bb5e4dcc1e43493d7b4f01b2578352e4', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing
@@ -16914,7 +16954,7 @@ class RevogrViewportScroll {
         const clientHeight = (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
         const scrollHeight = (_f = (_e = this.verticalScroll) === null || _e === void 0 ? void 0 : _e.scrollHeight) !== null && _f !== void 0 ? _f : 0;
         // Detect if the user has reached the bottom
-        const atBottom = (scrollTop + clientHeight >= scrollHeight) && e.deltaY > 0;
+        const atBottom = scrollTop + clientHeight >= scrollHeight && e.deltaY > 0;
         const atTop = scrollTop === 0 && e.deltaY < 0;
         if (!atBottom && !atTop) {
             (_g = e.preventDefault) === null || _g === void 0 ? void 0 : _g.call(e);
@@ -16936,7 +16976,7 @@ class RevogrViewportScroll {
         }
         const { scrollLeft, scrollWidth, clientWidth } = this.horizontalScroll;
         // Detect if the user has reached the right end
-        const atRight = (scrollLeft + clientWidth >= scrollWidth) && e.deltaX > 0;
+        const atRight = scrollLeft + clientWidth >= scrollWidth && e.deltaX > 0;
         // Detect if the user has reached the left end
         const atLeft = scrollLeft === 0 && e.deltaX < 0;
         if (!atRight && !atLeft) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.12.4",
+  "version": "4.12.6",
   "type": "module",
   "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",

package/standalone/local.scroll.timer.js

@@ -15,6 +15,9 @@ const NO_COORDINATE = -1;
  * return full size
  */
 function getContentSize(contentSize, clientSize, virtualSize = 0) {
+    if (virtualSize > contentSize) {
+        return 0;
+    }
     return contentSize + (virtualSize ? clientSize - virtualSize : 0);
 }
 class LocalScrollService {