virtual-scroller - npm Package Compare versions

Comparing version 1.12.3 to 1.12.4

CHANGELOG.md

@@ -10,4 +10,2 @@ <!-- `virtual-scroller`: in `.updateItems()` handle a case when `items.length` is the same, in which case find different items and if those items are rendered then maybe update them on screen and update their height, if the items are past rendered then maybe just discard all item heights past rendered, if the items are before rendered then maybe ignore and it will jump on scroll up which is kinda acceptable. -->
 
-* `VirtualScroller` no longer restores the Y scroll position on mount: it was found out that this feature conflicted with the same feature of application "router" libraries.
-
 1.11.3 / 05.02.2023
@@ -14,0 +12,0 @@ ==================

commonjs/Layout.js

@@ -376,4 +376,3 @@ "use strict";
       var itemsCount = _ref8.itemsCount,
-          visibleAreaTop = _ref8.visibleAreaTop,
-          visibleAreaBottom = _ref8.visibleAreaBottom;
+          visibleAreaInsideTheList = _ref8.visibleAreaInsideTheList;
 
@@ -383,4 +382,3 @@ var indexes = this._getShownItemIndex({
         fromIndex: 0,
-        visibleAreaTop: visibleAreaTop,
-        visibleAreaBottom: visibleAreaBottom,
+        visibleAreaInsideTheList: visibleAreaInsideTheList,
         findFirstShownItemIndex: true
@@ -404,4 +402,3 @@ });
         beforeItemsHeight: beforeItemsHeight,
-        visibleAreaTop: visibleAreaTop,
-        visibleAreaBottom: visibleAreaBottom,
+        visibleAreaInsideTheList: visibleAreaInsideTheList,
         findLastShownItemIndex: true
@@ -430,4 +427,3 @@ });
           itemsCount = parameters.itemsCount,
-          visibleAreaTop = parameters.visibleAreaTop,
-          visibleAreaBottom = parameters.visibleAreaBottom,
+          visibleAreaInsideTheList = parameters.visibleAreaInsideTheList,
           findFirstShownItemIndex = parameters.findFirstShownItemIndex,
@@ -459,3 +455,4 @@ findLastShownItemIndex = parameters.findLastShownItemIndex;
       // separate calls of this function, each with or without `backwards` flag,
-      // depending on whether `visibleAreaTop` and `visibleAreBottom` have shifted up or down.
+      // depending on whether `visibleAreaInsideTheList.top` and `visibleAreaInsideTheList.top`
+      // have shifted up or down.
 
@@ -535,3 +532,3 @@ var firstShownItemIndex;
               indexOfTheFirstItemInTheRow: currentRowFirstItemIndex,
-              nonMeasuredAreaHeight: visibleAreaBottom + this.getPrerenderMargin() - beforeItemsHeight
+              nonMeasuredAreaHeight: visibleAreaInsideTheList.bottom + this.getPrerenderMargin() - beforeItemsHeight
             });
@@ -546,4 +543,4 @@ }
         var itemsHeightFromFirstRowToThisRow = beforeItemsHeight + currentRowHeight;
-        var rowStepsIntoVisibleAreaTop = itemsHeightFromFirstRowToThisRow > visibleAreaTop - this.getPrerenderMargin();
-        var rowStepsOutOfVisibleAreaBottomOrIsAtTheBorder = itemsHeightFromFirstRowToThisRow + verticalSpacingAfterCurrentRow >= visibleAreaBottom + this.getPrerenderMargin(); // if (backwards) {
+        var rowStepsIntoVisibleAreaTop = itemsHeightFromFirstRowToThisRow > visibleAreaInsideTheList.top - this.getPrerenderMargin();
+        var rowStepsOutOfVisibleAreaBottomOrIsAtTheBorder = itemsHeightFromFirstRowToThisRow + verticalSpacingAfterCurrentRow >= visibleAreaInsideTheList.bottom + this.getPrerenderMargin(); // if (backwards) {
         // 	if (findFirstShownItemIndex) {
@@ -550,0 +547,0 @@ // 		if (rowStepsOutOfVisibleAreaTop) {

commonjs/Layout.test.js

@@ -46,4 +46,6 @@ "use strict";
       itemsCount: items.length,
-      visibleAreaTop: 0,
-      visibleAreaBottom: SCREEN_HEIGHT
+      visibleAreaInsideTheList: {
+        top: 0,
+        bottom: SCREEN_HEIGHT
+      }
     }).should.deep.equal({
@@ -56,4 +58,6 @@ firstShownItemIndex: 0,
       itemsCount: items.length,
-      visibleAreaTop: SCREEN_HEIGHT + ITEM_HEIGHT - 1,
-      visibleAreaBottom: SCREEN_HEIGHT + ITEM_HEIGHT - 1 + SCREEN_HEIGHT
+      visibleAreaInsideTheList: {
+        top: SCREEN_HEIGHT + ITEM_HEIGHT - 1,
+        bottom: SCREEN_HEIGHT + ITEM_HEIGHT - 1 + SCREEN_HEIGHT
+      }
     }).should.deep.equal({
@@ -66,4 +70,6 @@ firstShownItemIndex: 0,
       itemsCount: items.length,
-      visibleAreaTop: SCREEN_HEIGHT + ITEM_HEIGHT,
-      visibleAreaBottom: SCREEN_HEIGHT + ITEM_HEIGHT + SCREEN_HEIGHT
+      visibleAreaInsideTheList: {
+        top: SCREEN_HEIGHT + ITEM_HEIGHT,
+        bottom: SCREEN_HEIGHT + ITEM_HEIGHT + SCREEN_HEIGHT
+      }
     }).should.deep.equal({
@@ -76,4 +82,6 @@ firstShownItemIndex: 1,
       itemsCount: items.length,
-      visibleAreaTop: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT * 2,
-      visibleAreaBottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT
+      visibleAreaInsideTheList: {
+        top: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT * 2,
+        bottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT
+      }
     }).should.deep.equal({
@@ -86,4 +94,6 @@ firstShownItemIndex: 1,
       itemsCount: items.length,
-      visibleAreaTop: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT * 2,
-      visibleAreaBottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT
+      visibleAreaInsideTheList: {
+        top: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT * 2,
+        bottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT
+      }
     }).should.deep.equal({
@@ -90,0 +100,0 @@ firstShownItemIndex: 1,

commonjs/VirtualScroller.constructor.js

@@ -16,3 +16,3 @@ "use strict";
 
-var _Resize = _interopRequireDefault(require("./Resize.js"));
+var _ScrollableContainerResizeHandler = _interopRequireDefault(require("./ScrollableContainerResizeHandler.js"));
 
@@ -39,3 +39,3 @@ var _BeforeResize = _interopRequireDefault(require("./BeforeResize.js"));
 
-var _VirtualScrollerResize = _interopRequireDefault(require("./VirtualScroller.resize.js"));
+var _VirtualScrollerOnContainerResize = _interopRequireDefault(require("./VirtualScroller.onContainerResize.js"));
 
@@ -232,3 +232,3 @@ var _VirtualScrollerItems = _interopRequireDefault(require("./VirtualScroller.items.js"));
 
-  _VirtualScrollerResize["default"].call(this);
+  _VirtualScrollerOnContainerResize["default"].call(this);
 
@@ -335,3 +335,3 @@ _VirtualScrollerItems["default"].call(this);
   });
-  this.resize = new _Resize["default"]({
+  this.scrollableContainerResizeHandler = new _ScrollableContainerResizeHandler["default"]({
     bypass: this.bypass,
@@ -371,3 +371,3 @@ getWidth: function getWidth() {
 
-      _this2.onResize();
+      _this2.onContainerResize();
     }
@@ -374,0 +374,0 @@ });

commonjs/VirtualScroller.items.js

@@ -218,3 +218,3 @@ "use strict";
     // The values in `this.newItemsWillBeRendered` are used, for example,
-    // in `.onResize()` handler in order to not break state consistency when
+    // in `.onContainerResize()` handler in order to not break state consistency when
     // state updates are "asynchronous" (delayed) and there's a window resize event
@@ -221,0 +221,0 @@ // in between calling `updateState()` below and that call actually being applied.

commonjs/VirtualScroller.js

@@ -58,3 +58,3 @@ "use strict";
 
-      _this.resize.stop();
+      _this.scrollableContainerResizeHandler.stop();
 
@@ -163,3 +163,3 @@ _this.scroll.stop(); // Stop `ListTopOffsetWatcher` if it has been started.
 
-      this.resize.start();
+      this.scrollableContainerResizeHandler.start();
       this.scroll.start(); // If `scrollableContainerWidth` hasn't been measured yet,
@@ -183,6 +183,6 @@ // measure it and write it to state.
           // That's ok because such state update could currently only originate in
-          // `this.onResize()` function. Therefore, alling `this.onResize()` again
+          // `this.onContainerResize()` function. Therefore, alling `this.onContainerResize()` again
           // would rewrite all those `stateUpdate` properties anyway, so they're not passed.
 
-          return this.onResize();
+          return this.onContainerResize();
         }
@@ -199,3 +199,3 @@ } // If the `VirtualScroller` uses custom (external) state storage, then
         if (columnsCount !== columnsCountFromState) {
-          return this.onResize();
+          return this.onContainerResize();
         }
@@ -202,0 +202,0 @@ } // Re-calculate layout and re-render the list.

commonjs/VirtualScroller.layout.js

@@ -236,10 +236,10 @@ "use strict";
 
-  function getVisibleArea() {
-    var visibleArea = this.scroll.getVisibleAreaBounds();
-    this.latestLayoutVisibleArea = visibleArea; // Subtract the top offset of the list inside the scrollable container.
+  function getCoordinatesOfVisibleAreaInsideTheList() {
+    var visibleAreaBounds = this.scroll.getVisibleAreaBounds();
+    this.latestLayoutVisibleArea = visibleAreaBounds; // Subtract the top offset of the list inside the scrollable container.
 
     var listTopOffsetInsideScrollableContainer = this.getListTopOffsetInsideScrollableContainer();
     return {
-      top: visibleArea.top - listTopOffsetInsideScrollableContainer,
-      bottom: visibleArea.bottom - listTopOffsetInsideScrollableContainer
+      top: visibleAreaBounds.top - listTopOffsetInsideScrollableContainer,
+      bottom: visibleAreaBounds.bottom - listTopOffsetInsideScrollableContainer
     };
@@ -250,7 +250,4 @@ }
     var itemsCount = this.getItemsCount();
+    var visibleAreaInsideTheList = getCoordinatesOfVisibleAreaInsideTheList.call(this);
 
-    var _getVisibleArea$call = getVisibleArea.call(this),
-        visibleAreaTop = _getVisibleArea$call.top,
-        visibleAreaBottom = _getVisibleArea$call.bottom;
-
     if (this.bypass) {
@@ -273,3 +270,3 @@ return {
 
-    var isVisible = visibleAreaTop < this.itemsContainer.getHeight() && visibleAreaBottom > 0;
+    var isVisible = visibleAreaInsideTheList.top < this.itemsContainer.getHeight() + this.layout.getPrerenderMargin() && visibleAreaInsideTheList.bottom > 0 - this.layout.getPrerenderMargin();
 
@@ -284,4 +281,3 @@ if (!isVisible) {
       itemsCount: this.getItemsCount(),
-      visibleAreaTop: visibleAreaTop,
-      visibleAreaBottom: visibleAreaBottom
+      visibleAreaInsideTheList: visibleAreaInsideTheList
     });
@@ -288,0 +284,0 @@ }

modules/Layout.js

@@ -360,4 +360,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
       var itemsCount = _ref8.itemsCount,
-          visibleAreaTop = _ref8.visibleAreaTop,
-          visibleAreaBottom = _ref8.visibleAreaBottom;
+          visibleAreaInsideTheList = _ref8.visibleAreaInsideTheList;
 
@@ -367,4 +366,3 @@ var indexes = this._getShownItemIndex({
         fromIndex: 0,
-        visibleAreaTop: visibleAreaTop,
-        visibleAreaBottom: visibleAreaBottom,
+        visibleAreaInsideTheList: visibleAreaInsideTheList,
         findFirstShownItemIndex: true
@@ -388,4 +386,3 @@ });
         beforeItemsHeight: beforeItemsHeight,
-        visibleAreaTop: visibleAreaTop,
-        visibleAreaBottom: visibleAreaBottom,
+        visibleAreaInsideTheList: visibleAreaInsideTheList,
         findLastShownItemIndex: true
@@ -414,4 +411,3 @@ });
           itemsCount = parameters.itemsCount,
-          visibleAreaTop = parameters.visibleAreaTop,
-          visibleAreaBottom = parameters.visibleAreaBottom,
+          visibleAreaInsideTheList = parameters.visibleAreaInsideTheList,
           findFirstShownItemIndex = parameters.findFirstShownItemIndex,
@@ -443,3 +439,4 @@ findLastShownItemIndex = parameters.findLastShownItemIndex;
       // separate calls of this function, each with or without `backwards` flag,
-      // depending on whether `visibleAreaTop` and `visibleAreBottom` have shifted up or down.
+      // depending on whether `visibleAreaInsideTheList.top` and `visibleAreaInsideTheList.top`
+      // have shifted up or down.
 
@@ -519,3 +516,3 @@ var firstShownItemIndex;
               indexOfTheFirstItemInTheRow: currentRowFirstItemIndex,
-              nonMeasuredAreaHeight: visibleAreaBottom + this.getPrerenderMargin() - beforeItemsHeight
+              nonMeasuredAreaHeight: visibleAreaInsideTheList.bottom + this.getPrerenderMargin() - beforeItemsHeight
             });
@@ -530,4 +527,4 @@ }
         var itemsHeightFromFirstRowToThisRow = beforeItemsHeight + currentRowHeight;
-        var rowStepsIntoVisibleAreaTop = itemsHeightFromFirstRowToThisRow > visibleAreaTop - this.getPrerenderMargin();
-        var rowStepsOutOfVisibleAreaBottomOrIsAtTheBorder = itemsHeightFromFirstRowToThisRow + verticalSpacingAfterCurrentRow >= visibleAreaBottom + this.getPrerenderMargin(); // if (backwards) {
+        var rowStepsIntoVisibleAreaTop = itemsHeightFromFirstRowToThisRow > visibleAreaInsideTheList.top - this.getPrerenderMargin();
+        var rowStepsOutOfVisibleAreaBottomOrIsAtTheBorder = itemsHeightFromFirstRowToThisRow + verticalSpacingAfterCurrentRow >= visibleAreaInsideTheList.bottom + this.getPrerenderMargin(); // if (backwards) {
         // 	if (findFirstShownItemIndex) {
@@ -534,0 +531,0 @@ // 		if (rowStepsOutOfVisibleAreaTop) {

modules/Layout.test.js

@@ -40,4 +40,6 @@ import Layout from './Layout.js';
       itemsCount: items.length,
-      visibleAreaTop: 0,
-      visibleAreaBottom: SCREEN_HEIGHT
+      visibleAreaInsideTheList: {
+        top: 0,
+        bottom: SCREEN_HEIGHT
+      }
     }).should.deep.equal({
@@ -50,4 +52,6 @@ firstShownItemIndex: 0,
       itemsCount: items.length,
-      visibleAreaTop: SCREEN_HEIGHT + ITEM_HEIGHT - 1,
-      visibleAreaBottom: SCREEN_HEIGHT + ITEM_HEIGHT - 1 + SCREEN_HEIGHT
+      visibleAreaInsideTheList: {
+        top: SCREEN_HEIGHT + ITEM_HEIGHT - 1,
+        bottom: SCREEN_HEIGHT + ITEM_HEIGHT - 1 + SCREEN_HEIGHT
+      }
     }).should.deep.equal({
@@ -60,4 +64,6 @@ firstShownItemIndex: 0,
       itemsCount: items.length,
-      visibleAreaTop: SCREEN_HEIGHT + ITEM_HEIGHT,
-      visibleAreaBottom: SCREEN_HEIGHT + ITEM_HEIGHT + SCREEN_HEIGHT
+      visibleAreaInsideTheList: {
+        top: SCREEN_HEIGHT + ITEM_HEIGHT,
+        bottom: SCREEN_HEIGHT + ITEM_HEIGHT + SCREEN_HEIGHT
+      }
     }).should.deep.equal({
@@ -70,4 +76,6 @@ firstShownItemIndex: 1,
       itemsCount: items.length,
-      visibleAreaTop: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT * 2,
-      visibleAreaBottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT
+      visibleAreaInsideTheList: {
+        top: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT * 2,
+        bottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT
+      }
     }).should.deep.equal({
@@ -80,4 +88,6 @@ firstShownItemIndex: 1,
       itemsCount: items.length,
-      visibleAreaTop: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT * 2,
-      visibleAreaBottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT
+      visibleAreaInsideTheList: {
+        top: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT * 2,
+        bottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT
+      }
     }).should.deep.equal({
@@ -84,0 +94,0 @@ firstShownItemIndex: 1,

modules/VirtualScroller.constructor.js

 import { supportsTbody, BROWSER_NOT_SUPPORTED_ERROR } from './DOM/tbody.js';
 import DOMEngine from './DOM/Engine.js';
 import Layout, { LAYOUT_REASON } from './Layout.js';
-import Resize from './Resize.js';
+import ScrollableContainerResizeHandler from './ScrollableContainerResizeHandler.js';
 import BeforeResize from './BeforeResize.js';
@@ -15,3 +15,3 @@ import Scroll from './Scroll.js';
 import createOnRenderHelpers from './VirtualScroller.onRender.js';
-import createResizeHelpers from './VirtualScroller.resize.js';
+import createScrollableContainerResizeHelpers from './VirtualScroller.onContainerResize.js';
 import createItemsHelpers from './VirtualScroller.items.js';
@@ -196,3 +196,3 @@ /**
   createOnRenderHelpers.call(this);
-  createResizeHelpers.call(this);
+  createScrollableContainerResizeHelpers.call(this);
   createItemsHelpers.call(this);
@@ -297,3 +297,3 @@ createHelpers.call(this, {
   });
-  this.resize = new Resize({
+  this.scrollableContainerResizeHandler = new ScrollableContainerResizeHandler({
     bypass: this.bypass,
@@ -333,3 +333,3 @@ getWidth: function getWidth() {
 
-      _this2.onResize();
+      _this2.onContainerResize();
     }
@@ -336,0 +336,0 @@ });

modules/VirtualScroller.items.js

@@ -200,3 +200,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
     // The values in `this.newItemsWillBeRendered` are used, for example,
-    // in `.onResize()` handler in order to not break state consistency when
+    // in `.onContainerResize()` handler in order to not break state consistency when
     // state updates are "asynchronous" (delayed) and there's a window resize event
@@ -203,0 +203,0 @@ // in between calling `updateState()` below and that call actually being applied.

modules/VirtualScroller.js

@@ -40,3 +40,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-      _this.resize.stop();
+      _this.scrollableContainerResizeHandler.stop();
 
@@ -145,3 +145,3 @@ _this.scroll.stop(); // Stop `ListTopOffsetWatcher` if it has been started.
 
-      this.resize.start();
+      this.scrollableContainerResizeHandler.start();
       this.scroll.start(); // If `scrollableContainerWidth` hasn't been measured yet,
@@ -165,6 +165,6 @@ // measure it and write it to state.
           // That's ok because such state update could currently only originate in
-          // `this.onResize()` function. Therefore, alling `this.onResize()` again
+          // `this.onContainerResize()` function. Therefore, alling `this.onContainerResize()` again
           // would rewrite all those `stateUpdate` properties anyway, so they're not passed.
 
-          return this.onResize();
+          return this.onContainerResize();
         }
@@ -181,3 +181,3 @@ } // If the `VirtualScroller` uses custom (external) state storage, then
         if (columnsCount !== columnsCountFromState) {
-          return this.onResize();
+          return this.onContainerResize();
         }
@@ -184,0 +184,0 @@ } // Re-calculate layout and re-render the list.

modules/VirtualScroller.layout.js

@@ -221,10 +221,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-  function getVisibleArea() {
-    var visibleArea = this.scroll.getVisibleAreaBounds();
-    this.latestLayoutVisibleArea = visibleArea; // Subtract the top offset of the list inside the scrollable container.
+  function getCoordinatesOfVisibleAreaInsideTheList() {
+    var visibleAreaBounds = this.scroll.getVisibleAreaBounds();
+    this.latestLayoutVisibleArea = visibleAreaBounds; // Subtract the top offset of the list inside the scrollable container.
 
     var listTopOffsetInsideScrollableContainer = this.getListTopOffsetInsideScrollableContainer();
     return {
-      top: visibleArea.top - listTopOffsetInsideScrollableContainer,
-      bottom: visibleArea.bottom - listTopOffsetInsideScrollableContainer
+      top: visibleAreaBounds.top - listTopOffsetInsideScrollableContainer,
+      bottom: visibleAreaBounds.bottom - listTopOffsetInsideScrollableContainer
     };
@@ -235,7 +235,4 @@ }
     var itemsCount = this.getItemsCount();
+    var visibleAreaInsideTheList = getCoordinatesOfVisibleAreaInsideTheList.call(this);
 
-    var _getVisibleArea$call = getVisibleArea.call(this),
-        visibleAreaTop = _getVisibleArea$call.top,
-        visibleAreaBottom = _getVisibleArea$call.bottom;
-
     if (this.bypass) {
@@ -258,3 +255,3 @@ return {
 
-    var isVisible = visibleAreaTop < this.itemsContainer.getHeight() && visibleAreaBottom > 0;
+    var isVisible = visibleAreaInsideTheList.top < this.itemsContainer.getHeight() + this.layout.getPrerenderMargin() && visibleAreaInsideTheList.bottom > 0 - this.layout.getPrerenderMargin();
 
@@ -269,4 +266,3 @@ if (!isVisible) {
       itemsCount: this.getItemsCount(),
-      visibleAreaTop: visibleAreaTop,
-      visibleAreaBottom: visibleAreaBottom
+      visibleAreaInsideTheList: visibleAreaInsideTheList
     });
@@ -273,0 +269,0 @@ }

package.json

 {
   "name": "virtual-scroller",
-  "version": "1.12.3",
+  "version": "1.12.4",
   "description": "A component for efficiently rendering large lists of variable height items",
@@ -5,0 +5,0 @@ "main": "index.cjs",

source/Layout.js

@@ -359,4 +359,3 @@ import log, { warn } from './utility/debug.js'
 		itemsCount,
-		visibleAreaTop,
-		visibleAreaBottom
+		visibleAreaInsideTheList
 	}) {
@@ -366,4 +365,3 @@ let indexes = this._getShownItemIndex({
 			fromIndex: 0,
-			visibleAreaTop,
-			visibleAreaBottom,
+			visibleAreaInsideTheList,
 			findFirstShownItemIndex: true
@@ -386,4 +384,3 @@ })
 			beforeItemsHeight,
-			visibleAreaTop,
-			visibleAreaBottom,
+			visibleAreaInsideTheList,
 			findLastShownItemIndex: true
@@ -412,4 +409,3 @@ })
 			itemsCount,
-			visibleAreaTop,
-			visibleAreaBottom,
+			visibleAreaInsideTheList,
 			findFirstShownItemIndex,
@@ -448,3 +444,4 @@ findLastShownItemIndex,
 		// separate calls of this function, each with or without `backwards` flag,
-		// depending on whether `visibleAreaTop` and `visibleAreBottom` have shifted up or down.
+		// depending on whether `visibleAreaInsideTheList.top` and `visibleAreaInsideTheList.top`
+		// have shifted up or down.
 
@@ -533,3 +530,3 @@ let firstShownItemIndex
 						indexOfTheFirstItemInTheRow: currentRowFirstItemIndex,
-						nonMeasuredAreaHeight: (visibleAreaBottom + this.getPrerenderMargin()) - beforeItemsHeight
+						nonMeasuredAreaHeight: (visibleAreaInsideTheList.bottom + this.getPrerenderMargin()) - beforeItemsHeight
 					})
@@ -546,4 +543,4 @@ }
 
-			const rowStepsIntoVisibleAreaTop = itemsHeightFromFirstRowToThisRow > visibleAreaTop - this.getPrerenderMargin()
-			const rowStepsOutOfVisibleAreaBottomOrIsAtTheBorder = itemsHeightFromFirstRowToThisRow + verticalSpacingAfterCurrentRow >= visibleAreaBottom + this.getPrerenderMargin()
+			const rowStepsIntoVisibleAreaTop = itemsHeightFromFirstRowToThisRow > visibleAreaInsideTheList.top - this.getPrerenderMargin()
+			const rowStepsOutOfVisibleAreaBottomOrIsAtTheBorder = itemsHeightFromFirstRowToThisRow + verticalSpacingAfterCurrentRow >= visibleAreaInsideTheList.bottom + this.getPrerenderMargin()
 
@@ -550,0 +547,0 @@ // if (backwards) {

source/Layout.test.js

@@ -34,4 +34,6 @@ import Layout from './Layout.js'
 			itemsCount: items.length,
-			visibleAreaTop: 0,
-			visibleAreaBottom: SCREEN_HEIGHT
+			visibleAreaInsideTheList: {
+				top: 0,
+				bottom: SCREEN_HEIGHT
+			}
 		}).should.deep.equal({
@@ -45,4 +47,6 @@ firstShownItemIndex: 0,
 			itemsCount: items.length,
-			visibleAreaTop: SCREEN_HEIGHT + ITEM_HEIGHT - 1,
-			visibleAreaBottom: (SCREEN_HEIGHT + ITEM_HEIGHT - 1) + SCREEN_HEIGHT
+			visibleAreaInsideTheList: {
+				top: SCREEN_HEIGHT + ITEM_HEIGHT - 1,
+				bottom: (SCREEN_HEIGHT + ITEM_HEIGHT - 1) + SCREEN_HEIGHT
+			}
 		}).should.deep.equal({
@@ -56,4 +60,6 @@ firstShownItemIndex: 0,
 			itemsCount: items.length,
-			visibleAreaTop: SCREEN_HEIGHT + ITEM_HEIGHT,
-			visibleAreaBottom: (SCREEN_HEIGHT + ITEM_HEIGHT) + SCREEN_HEIGHT
+			visibleAreaInsideTheList: {
+				top: SCREEN_HEIGHT + ITEM_HEIGHT,
+				bottom: (SCREEN_HEIGHT + ITEM_HEIGHT) + SCREEN_HEIGHT
+			}
 		}).should.deep.equal({
@@ -67,4 +73,6 @@ firstShownItemIndex: 1,
 			itemsCount: items.length,
-			visibleAreaTop: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT * 2,
-			visibleAreaBottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT
+			visibleAreaInsideTheList: {
+				top: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT * 2,
+				bottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT
+			}
 		}).should.deep.equal({
@@ -78,4 +86,6 @@ firstShownItemIndex: 1,
 			itemsCount: items.length,
-			visibleAreaTop: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT * 2,
-			visibleAreaBottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT
+			visibleAreaInsideTheList: {
+				top: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT * 2,
+				bottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT
+			}
 		}).should.deep.equal({
@@ -82,0 +92,0 @@ firstShownItemIndex: 1,

source/VirtualScroller.constructor.js

@@ -9,3 +9,3 @@ import {
 import Layout, { LAYOUT_REASON } from './Layout.js'
-import Resize from './Resize.js'
+import ScrollableContainerResizeHandler from './ScrollableContainerResizeHandler.js'
 import BeforeResize from './BeforeResize.js'
@@ -23,3 +23,3 @@ import Scroll from './Scroll.js'
 import createOnRenderHelpers from './VirtualScroller.onRender.js'
-import createResizeHelpers from './VirtualScroller.resize.js'
+import createScrollableContainerResizeHelpers from './VirtualScroller.onContainerResize.js'
 import createItemsHelpers from './VirtualScroller.items.js'
@@ -198,3 +198,3 @@
 	createOnRenderHelpers.call(this)
-	createResizeHelpers.call(this)
+	createScrollableContainerResizeHelpers.call(this)
 	createItemsHelpers.call(this)
@@ -283,3 +283,3 @@
 
-	this.resize = new Resize({
+	this.scrollableContainerResizeHandler = new ScrollableContainerResizeHandler({
 		bypass: this.bypass,
@@ -310,3 +310,3 @@ getWidth: () => this.scrollableContainer.getWidth(),
 			log('~ Scrollable container width changed from', prevWidth, 'to', newWidth, '~')
-			this.onResize()
+			this.onContainerResize()
 		}
@@ -313,0 +313,0 @@ })

source/VirtualScroller.items.js

@@ -218,3 +218,3 @@ import log, { isDebug } from './utility/debug.js'
 		// The values in `this.newItemsWillBeRendered` are used, for example,
-		// in `.onResize()` handler in order to not break state consistency when
+		// in `.onContainerResize()` handler in order to not break state consistency when
 		// state updates are "asynchronous" (delayed) and there's a window resize event
@@ -221,0 +221,0 @@ // in between calling `updateState()` below and that call actually being applied.

source/VirtualScroller.js

@@ -105,3 +105,3 @@ import VirtualScrollerConstructor from './VirtualScroller.constructor.js'
 
-		this.resize.start()
+		this.scrollableContainerResizeHandler.start()
 		this.scroll.start()
@@ -127,5 +127,5 @@
 				// That's ok because such state update could currently only originate in
-				// `this.onResize()` function. Therefore, alling `this.onResize()` again
+				// `this.onContainerResize()` function. Therefore, alling `this.onContainerResize()` again
 				// would rewrite all those `stateUpdate` properties anyway, so they're not passed.
-				return this.onResize()
+				return this.onContainerResize()
 			}
@@ -141,3 +141,3 @@ }
 			if (columnsCount !== columnsCountFromState) {
-				return this.onResize()
+				return this.onContainerResize()
 			}
@@ -164,3 +164,3 @@ }
 
-		this.resize.stop()
+		this.scrollableContainerResizeHandler.stop()
 		this.scroll.stop()
@@ -167,0 +167,0 @@

source/VirtualScroller.layout.js

@@ -220,5 +220,5 @@ // For some weird reason, in Chrome, `setTimeout()` would lag up to a second (or more) behind.
 
-	function getVisibleArea() {
-		const visibleArea = this.scroll.getVisibleAreaBounds()
-		this.latestLayoutVisibleArea = visibleArea
+	function getCoordinatesOfVisibleAreaInsideTheList() {
+		const visibleAreaBounds = this.scroll.getVisibleAreaBounds()
+		this.latestLayoutVisibleArea = visibleAreaBounds
 
@@ -228,4 +228,4 @@ // Subtract the top offset of the list inside the scrollable container.
 		return {
-			top: visibleArea.top - listTopOffsetInsideScrollableContainer,
-			bottom: visibleArea.bottom - listTopOffsetInsideScrollableContainer
+			top: visibleAreaBounds.top - listTopOffsetInsideScrollableContainer,
+			bottom: visibleAreaBounds.bottom - listTopOffsetInsideScrollableContainer
 		}
@@ -237,6 +237,3 @@ }
 
-		const {
-			top: visibleAreaTop,
-			bottom: visibleAreaBottom
-		} = getVisibleArea.call(this)
+		const visibleAreaInsideTheList = getCoordinatesOfVisibleAreaInsideTheList.call(this)
 
@@ -260,3 +257,3 @@ if (this.bypass) {
 		// a very minor optimization and not something I'd deal with.
-		const isVisible = visibleAreaTop < this.itemsContainer.getHeight() && visibleAreaBottom > 0
+		const isVisible = visibleAreaInsideTheList.top < this.itemsContainer.getHeight() + this.layout.getPrerenderMargin() && visibleAreaInsideTheList.bottom > 0 - this.layout.getPrerenderMargin()
 		if (!isVisible) {
@@ -270,4 +267,3 @@ log('The entire list is off-screen. No items are visible.')
 			itemsCount: this.getItemsCount(),
-			visibleAreaTop,
-			visibleAreaBottom
+			visibleAreaInsideTheList
 		})
@@ -274,0 +270,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

3627927

increased by0.15%

Lines of code

21874

increased by0.06%

No dependency changes