virtual-scroller 1.12.3 → 1.12.5

package/source/VirtualScroller.layout.js

@@ -217,25 +217,22 @@ export default function() {
 		})
 	}
 
-	function getVisibleArea() {
-		const visibleArea = this.scroll.getVisibleAreaBounds()
-		this.latestLayoutVisibleArea = visibleArea
+	function getCoordinatesOfVisibleAreaInsideTheList() {
+		const visibleAreaBounds = this.scroll.getVisibleAreaBounds()
+		this.latestLayoutVisibleArea = visibleAreaBounds
 
 		// Subtract the top offset of the list inside the scrollable container.
 		const listTopOffsetInsideScrollableContainer = this.getListTopOffsetInsideScrollableContainer()
 		return {
-			top: visibleArea.top - listTopOffsetInsideScrollableContainer,
-			bottom: visibleArea.bottom - listTopOffsetInsideScrollableContainer
+			top: visibleAreaBounds.top - listTopOffsetInsideScrollableContainer,
+			bottom: visibleAreaBounds.bottom - listTopOffsetInsideScrollableContainer
 		}
 	}
 
 	function getShownItemIndexes() {
 		const itemsCount = this.getItemsCount()
 
-		const {
-			top: visibleAreaTop,
-			bottom: visibleAreaBottom
-		} = getVisibleArea.call(this)
+		const visibleAreaInsideTheList = getCoordinatesOfVisibleAreaInsideTheList.call(this)
 
 		if (this.bypass) {
 			return {
@@ -254,7 +251,7 @@ export default function() {
 		// then it would also require listening for "scroll" events on the screen.
 		// Overall, I suppose that such "actual visibility" feature would be
 		// 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) {
 			log('The entire list is off-screen. No items are visible.')
 			return this.layout.getNonVisibleListShownItemIndexes()
@@ -263,8 +260,7 @@ export default function() {
 		// Get shown item indexes.
 		return this.layout.getShownItemIndexes({
 			itemsCount: this.getItemsCount(),
-			visibleAreaTop,
-			visibleAreaBottom
+			visibleAreaInsideTheList
 		})
 	}
 

package/source/{VirtualScroller.resize.js → VirtualScroller.onContainerResize.js}

@@ -1,7 +1,7 @@
 import log from './utility/debug.js'
 
 export default function() {
-	this.onResize = () => {
+	this.onContainerResize = () => {
 		// Reset "previously calculated layout".
 		//
 		// The "previously calculated layout" feature is not currently used.

package/source/getVerticalSpacing.js

@@ -1,21 +1,51 @@
 export default function getVerticalSpacing({ itemsContainer, renderedItemsCount }) {
+	// If there's more than a single item rendered, it becomes potentially possible
+	// to measure vertical spacing.
 	if (renderedItemsCount > 1) {
+		// Measure the first item of the first rendered row: top offset and height.
 		const firstShownRowTopOffset = itemsContainer.getNthRenderedItemTopOffset(0)
 		let firstShownRowHeight = itemsContainer.getNthRenderedItemHeight(0)
+
+		// Measure next items until a new row is started, at which point
+		// it becomes possible to calculate the vertical spacing between the rows.
 		let i = 1
 		while (i < renderedItemsCount) {
+			// Measure item: top offset and height.
 			const itemTopOffset = itemsContainer.getNthRenderedItemTopOffset(i)
 			const itemHeight = itemsContainer.getNthRenderedItemHeight(i)
-			// See if the item is on the next row.
-			// Simply checking for `itemTopOffset !== firstShownRowTopOffset` wouldn't work
-			// because items in a row aren't required to be aligned to the top border.
-			if (itemTopOffset >= firstShownRowTopOffset + firstShownRowHeight) {
-				// Measure inter-row spacing.
+
+			// See if the item is already on the next row. If yes, then can calculate
+			// vertical spacing between the rows.
+			//
+			// To detect next row, it uses a `>=` operator rather than just a `!==` operator.
+			// The reason is that simply checking for `itemTopOffset !== firstShownRowTopOffset`
+			// wouldn't work because items in a row aren't required to be aligned to the top edge of the row.
+			//
+			// Also, it uses rounding here to work around a bug that manifests when a web browser
+			// renders the web page with a scale value other than 100%. In that case, even when
+			// different identical items would've had equal heights, they'd have slightly different heights
+			// to the point of ~0.00001 because of the non-100% scale calculation imprecision.
+			//
+			// The result would be incorrect detection of same/next row, which would result in
+			// returning a huge vertical spacing that is equal to a height of an item,
+			// which would then result in a glitchy behavior of `virtual-scroller` when scrolling.
+			//
+			// To work around that bug, it rounds up to the closest higher `1px`
+			// and only then performs the `>=` comparison to detect same/next row.
+			//
+			if (Math.ceil(itemTopOffset) >= Math.floor(firstShownRowTopOffset) + Math.floor(firstShownRowHeight)) {
+				// Next row is detected. Measure inter-row spacing.
 				// Can't be "negative" with the current `if` condition.
 				return itemTopOffset - (firstShownRowTopOffset + firstShownRowHeight)
 			}
-			// A row height is the maximum of its item heights.
+
+			// Not at the next row yet. Re-measure the current row height.
+			// The rationale for re-measuring is that there can be items of variable height
+			// in a given row, so the row's height is not known until all items in it are measured.
+			// A row height is the maximum of its items' heights.
 			firstShownRowHeight = Math.max(firstShownRowHeight, itemHeight)
+
+			// Proceed to the next item.
 			i++
 		}
 	}

package/website/index-bypass.html

@@ -8,31 +8,21 @@
 
 		<title>React VirtualScroller Demo</title>
 
-		<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-		<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+		<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+		<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 		<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
 		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 
 		<script src="./virtual-scroller-react.js"></script>
-		<script src="./on-scroll-to-react.js"></script>
+		<script src="./lib/on-scroll-to-react.js"></script>
 		<script src="./messages.js"></script>
 
 		<link rel="stylesheet" href="./style.css"/>
-
-		<!--
-		<style>
-			#messages {
-				border-top: 2px solid rgb(230, 236, 240);
-				display: grid;
-				grid-gap: 2em;
-			}
-		</style>
-		-->
 	</head>
 
 	<body>
 		<!-- http://tholman.com/github-corners/ -->
-		<a title="Go to GitHub repo" href="https://github.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+		<a title="Go to GitLab repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitLab"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 
 		<div id="root"></div>
 

package/website/index-dom.html

@@ -19,7 +19,7 @@
 
 	<body>
 		<!-- http://tholman.com/github-corners/ -->
-		<a title="Go to GitHub repo" href="https://github.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+		<a title="Go to GitLab repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitLab"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 
 		<section class="container">
 			<h1>

package/website/index-grid.html

@@ -8,13 +8,13 @@
 
 		<title>React VirtualScroller Demo (Grid Layout)</title>
 
-		<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-		<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+		<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+		<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 		<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
 		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 
 		<script src="./virtual-scroller-react.js"></script>
-		<script src="./on-scroll-to-react.js"></script>
+		<script src="./lib/on-scroll-to-react.js"></script>
 		<script src="./messages.js"></script>
 
 		<link rel="stylesheet" href="./style.css"/>
@@ -45,7 +45,7 @@
 
 	<body>
 		<!-- http://tholman.com/github-corners/ -->
-		<a title="Go to GitHub repo" href="https://github.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+		<a title="Go to GitLab repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitLab"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 
 		<div id="root"></div>
 

package/website/index-scrollableContainer.html

@@ -8,13 +8,13 @@
 
 		<title>React VirtualScroller Demo (Scrollable Container)</title>
 
-		<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-		<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+		<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+		<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 		<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
 		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 
 		<script src="./virtual-scroller-react.js"></script>
-		<script src="./on-scroll-to-react.js"></script>
+		<script src="./lib/on-scroll-to-react.js"></script>
 		<script src="./messages.js"></script>
 
 		<link rel="stylesheet" href="./style.css"/>
@@ -22,7 +22,7 @@
 
 	<body>
 		<!-- http://tholman.com/github-corners/ -->
-		<a title="Go to GitHub repo" href="https://github.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+		<a title="Go to GitLab repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitLab"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 
 		<div id="root"></div>
 

package/website/index-tbody-scrollableContainer.html

@@ -2,6 +2,8 @@
 <html>
     <head>
         <meta charset="UTF-8">
+        <!-- Fix document width for mobile devices. -->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>
             VirtualScroller scrollable container test
         </title>

package/website/index-tbody.html

@@ -2,6 +2,8 @@
 <html>
 		<head>
 				<meta charset="UTF-8">
+				<!-- Fix document width for mobile devices. -->
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 				<title>
 						VirtualScroller scrollable container test
 				</title>

package/website/index.html

@@ -8,8 +8,8 @@
 
 		<title>React VirtualScroller Demo</title>
 
-		<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-		<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+		<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+		<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 		<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
 		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 
@@ -22,7 +22,7 @@
 
 	<body>
 		<!-- http://tholman.com/github-corners/ -->
-		<a title="Go to GitHub repo" href="https://github.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+		<a title="Go to GitLab repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitLab"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 
 		<div id="root"></div>
 

package/commonjs/Resize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Resize.js","names":["Resize","bypass","getWidth","getHeight","listenForResize","onResizeStart","onResizeStop","onHeightChange","onWidthChange","onNoChange","isActive","prevScrollableContainerWidth","width","prevScrollableContainerHeight","height","onResize","debounce","_onResize","SCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL","onStart","onStop","unlistenResize","undefined"],"sources":["../source/Resize.js"],"sourcesContent":["import debounce from './utility/debounce.js'\r\nimport log from './utility/debug.js'\r\n\r\nexport default class Resize {\r\n\tconstructor({\r\n\t\tbypass,\r\n\t\tgetWidth,\r\n\t\tgetHeight,\r\n\t\tlistenForResize,\r\n\t\tonResizeStart,\r\n\t\tonResizeStop,\r\n\t\tonHeightChange,\r\n\t\tonWidthChange,\r\n\t\tonNoChange\r\n\t}) {\r\n\t\tthis.bypass = bypass\r\n\r\n\t\tthis.onHeightChange = onHeightChange\r\n\t\tthis.onWidthChange = onWidthChange\r\n\t\tthis.onNoChange = onNoChange\r\n\r\n\t\tthis.getWidth = getWidth\r\n\t\tthis.getHeight = getHeight\r\n\t\tthis.listenForResize = listenForResize\r\n\r\n\t\tthis.onResize = debounce(\r\n\t\t\tthis._onResize,\r\n\t\t\tSCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL,\r\n\t\t\t{\r\n\t\t\t\tonStart: onResizeStart,\r\n\t\t\t\tonStop: onResizeStop\r\n\t\t\t}\r\n\t\t)\r\n\t}\r\n\r\n\tstart() {\r\n\t\tthis.isActive = true\r\n\t\tif (this.bypass) {\r\n\t\t\treturn\r\n\t\t}\r\n\t\tthis.width = this.getWidth()\r\n\t\tthis.height = this.getHeight()\r\n\t\tthis.unlistenResize = this.listenForResize(this.onResize)\r\n\t}\r\n\r\n\tstop() {\r\n\t\tthis.isActive = false\r\n\t\tthis.width = undefined\r\n\t\tthis.height = undefined\r\n\t\tif (this.unlistenResize) {\r\n\t\t\tthis.unlistenResize()\r\n\t\t\tthis.unlistenResize = undefined\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * On scrollable container resize.\r\n\t */\r\n\t_onResize = () => {\r\n\t\t// If `VirtualScroller` has been unmounted\r\n\t\t// while `debounce()`'s `setTimeout()` was waiting, then exit.\r\n\t\t// If the `VirtualScroller` gets restarted later, it will detect\r\n\t\t// that `state.scrollableContainerWidth` doesn't match the actual\r\n\t\t// scrollable container width, and will call `this.onResize()`.\r\n\t\tif (!this.isActive) {\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tconst prevScrollableContainerWidth = this.width\r\n\t\tconst prevScrollableContainerHeight = this.height\r\n\r\n\t\tthis.width = this.getWidth()\r\n\t\tthis.height = this.getHeight()\r\n\r\n\t\tif (this.width === prevScrollableContainerWidth) {\r\n\t\t\tif (this.height === prevScrollableContainerHeight) {\r\n\t\t\t\t// The dimensions of the container didn't change,\r\n\t\t\t\t// so there's no need to re-layout anything.\r\n\t\t\t\tthis.onNoChange()\r\n\t\t\t} else {\r\n\t\t\t\t// Scrollable container height has changed,\r\n\t\t\t\t// so just recalculate shown item indexes.\r\n\t\t\t\t// No need to perform a re-layout from scratch.\r\n\t\t\t\tthis.onHeightChange(prevScrollableContainerHeight, this.height)\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\t// Reset item heights, because if scrollable container's width (or height)\r\n\t\t\t// has changed, then the list width (or height) most likely also has changed,\r\n\t\t\t// and also some CSS `@media()` rules might have been added or removed.\r\n\t\t\t// So re-render the list entirely.\r\n\t\t\tthis.onWidthChange(prevScrollableContainerWidth, this.width)\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst SCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL = 250"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;IAEqBA,M;EACpB,sBAUG;IAAA;;IAAA,IATFC,MASE,QATFA,MASE;IAAA,IARFC,QAQE,QARFA,QAQE;IAAA,IAPFC,SAOE,QAPFA,SAOE;IAAA,IANFC,eAME,QANFA,eAME;IAAA,IALFC,aAKE,QALFA,aAKE;IAAA,IAJFC,YAIE,QAJFA,YAIE;IAAA,IAHFC,cAGE,QAHFA,cAGE;IAAA,IAFFC,aAEE,QAFFA,aAEE;IAAA,IADFC,UACE,QADFA,UACE;;IAAA;;IAAA,mCA4CS,YAAM;MACjB;MACA;MACA;MACA;MACA;MACA,IAAI,CAAC,KAAI,CAACC,QAAV,EAAoB;QACnB;MACA;;MAED,IAAMC,4BAA4B,GAAG,KAAI,CAACC,KAA1C;MACA,IAAMC,6BAA6B,GAAG,KAAI,CAACC,MAA3C;MAEA,KAAI,CAACF,KAAL,GAAa,KAAI,CAACV,QAAL,EAAb;MACA,KAAI,CAACY,MAAL,GAAc,KAAI,CAACX,SAAL,EAAd;;MAEA,IAAI,KAAI,CAACS,KAAL,KAAeD,4BAAnB,EAAiD;QAChD,IAAI,KAAI,CAACG,MAAL,KAAgBD,6BAApB,EAAmD;UAClD;UACA;UACA,KAAI,CAACJ,UAAL;QACA,CAJD,MAIO;UACN;UACA;UACA;UACA,KAAI,CAACF,cAAL,CAAoBM,6BAApB,EAAmD,KAAI,CAACC,MAAxD;QACA;MACD,CAXD,MAWO;QACN;QACA;QACA;QACA;QACA,KAAI,CAACN,aAAL,CAAmBG,4BAAnB,EAAiD,KAAI,CAACC,KAAtD;MACA;IACD,CA9EE;;IACF,KAAKX,MAAL,GAAcA,MAAd;IAEA,KAAKM,cAAL,GAAsBA,cAAtB;IACA,KAAKC,aAAL,GAAqBA,aAArB;IACA,KAAKC,UAAL,GAAkBA,UAAlB;IAEA,KAAKP,QAAL,GAAgBA,QAAhB;IACA,KAAKC,SAAL,GAAiBA,SAAjB;IACA,KAAKC,eAAL,GAAuBA,eAAvB;IAEA,KAAKW,QAAL,GAAgB,IAAAC,oBAAA,EACf,KAAKC,SADU,EAEfC,6CAFe,EAGf;MACCC,OAAO,EAAEd,aADV;MAECe,MAAM,EAAEd;IAFT,CAHe,CAAhB;EAQA;;;;WAED,iBAAQ;MACP,KAAKI,QAAL,GAAgB,IAAhB;;MACA,IAAI,KAAKT,MAAT,EAAiB;QAChB;MACA;;MACD,KAAKW,KAAL,GAAa,KAAKV,QAAL,EAAb;MACA,KAAKY,MAAL,GAAc,KAAKX,SAAL,EAAd;MACA,KAAKkB,cAAL,GAAsB,KAAKjB,eAAL,CAAqB,KAAKW,QAA1B,CAAtB;IACA;;;WAED,gBAAO;MACN,KAAKL,QAAL,GAAgB,KAAhB;MACA,KAAKE,KAAL,GAAaU,SAAb;MACA,KAAKR,MAAL,GAAcQ,SAAd;;MACA,IAAI,KAAKD,cAAT,EAAyB;QACxB,KAAKA,cAAL;QACA,KAAKA,cAAL,GAAsBC,SAAtB;MACA;IACD;IAED;AACD;AACA;;;;;;;;AAsCA,IAAMJ,6CAA6C,GAAG,GAAtD"}

package/commonjs/VirtualScroller.resize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VirtualScroller.resize.js","names":["onResize","previouslyCalculatedLayout","undefined","listHeightMeasurement","reset","itemsCount","newItemsWillBeRendered","count","getState","itemHeights","length","layout","newState","scrollableContainerWidth","scrollableContainer","getWidth","firstShownItemIndex","lastShownItemIndex","beforeItemsHeight","afterItemsHeight","Array","columnsCount","getActualColumnsCountForState","verticalSpacing","newColumnsCount","getActualColumnsCount","newFirstShownItemIndex","Math","floor","newLastShownItemIndex","min","ceil","log","getVerticalSpacing","getColumnsCount","shouldDiscardBeforeResizeItemHeights","beforeResize","shouldIncludeBeforeResizeValuesInState","snapshotBeforeResizeItemHeights","widthHasChanged","stateUpdate","updateState","prepend","replace"],"sources":["../source/VirtualScroller.resize.js"],"sourcesContent":["import log from './utility/debug.js'\r\n\r\nexport default function() {\r\n\tthis.onResize = () => {\r\n\t\t// Reset \"previously calculated layout\".\r\n\t\t//\r\n\t\t// The \"previously calculated layout\" feature is not currently used.\r\n\t\t//\r\n\t\t// The current layout snapshot could be stored as a \"previously calculated layout\" variable\r\n\t\t// so that it could theoretically be used when calculating new layout incrementally\r\n\t\t// rather than from scratch, which would be an optimization.\r\n\t\t//\r\n\t\tthis.previouslyCalculatedLayout = undefined\r\n\r\n\t\t// Cancel any potential scheduled scroll position restoration.\r\n\t\tthis.listHeightMeasurement.reset()\r\n\r\n\t\t// Get the most recent items count.\r\n\t\t// If there're a \"pending\" `setItems()` call then use the items count from that call\r\n\t\t// instead of using the count of currently shown `items` from `state`.\r\n\t\t// A `setItems()` call is \"pending\" when `updateState()` operation is \"asynchronous\", that is\r\n\t\t// when `updateState()` calls aren't applied immediately, like in React.\r\n\t\tconst itemsCount = this.newItemsWillBeRendered\r\n\t\t\t? this.newItemsWillBeRendered.count\r\n\t\t\t: this.getState().itemHeights.length\r\n\r\n\t\t// If layout values have been calculated as a result of a \"pending\" `setItems()` call,\r\n\t\t// then don't discard those new layout values and use them instead of the ones from `state`.\r\n\t\t//\r\n\t\t// A `setItems()` call is \"pending\" when `updateState()` operation is \"asynchronous\", that is\r\n\t\t// when `updateState()` calls aren't applied immediately, like in React.\r\n\t\t//\r\n\t\tconst layout = this.newItemsWillBeRendered\r\n\t\t\t? this.newItemsWillBeRendered.layout\r\n\t\t\t: this.getState()\r\n\r\n\t\t// Update `VirtualScroller` state.\r\n\t\tconst newState = {\r\n\t\t\tscrollableContainerWidth: this.scrollableContainer.getWidth(),\r\n\r\n\t\t\t// This state update should also overwrite all the `state` properties\r\n\t\t\t// that are also updated in the \"on scroll\" handler (`getShownItemIndexes()`):\r\n\t\t\t//\r\n\t\t\t// * `firstShownItemIndex`\r\n\t\t\t// * `lastShownItemIndex`\r\n\t\t\t// * `beforeItemsHeight`\r\n\t\t\t// * `afterItemsHeight`\r\n\t\t\t//\r\n\t\t\t// That's because this `updateState()` update has a higher priority\r\n\t\t\t// than that of the \"on scroll\" handler, so it should overwrite\r\n\t\t\t// any potential state changes dispatched by the \"on scroll\" handler.\r\n\t\t\t//\r\n\t\t\t// All these properties might have changed, but they're not\r\n\t\t\t// recalculated here becase they'll be recalculated after\r\n\t\t\t// this new state is applied (rendered).\r\n\t\t\t//\r\n\t\t\tfirstShownItemIndex: layout.firstShownItemIndex,\r\n\t\t\tlastShownItemIndex: layout.lastShownItemIndex,\r\n\t\t\tbeforeItemsHeight: layout.beforeItemsHeight,\r\n\t\t\tafterItemsHeight: layout.afterItemsHeight,\r\n\r\n\t\t\t// Reset item heights, because if scrollable container's width (or height)\r\n\t\t\t// has changed, then the list width (or height) most likely also has changed,\r\n\t\t\t// and also some CSS `@media()` rules might have been added or removed.\r\n\t\t\t// So re-render the list entirely.\r\n\t\t\titemHeights: new Array(itemsCount),\r\n\r\n\t\t\tcolumnsCount: this.getActualColumnsCountForState(),\r\n\r\n\t\t\t// Re-measure vertical spacing after render because new CSS styles\r\n\t\t\t// might be applied for the new window width.\r\n\t\t\tverticalSpacing: undefined\r\n\t\t}\r\n\r\n\t\tconst { firstShownItemIndex, lastShownItemIndex } = layout\r\n\r\n\t\t// Get the `columnsCount` for the new window width.\r\n\t\tconst newColumnsCount = this.getActualColumnsCount()\r\n\r\n\t\t// Re-calculate `firstShownItemIndex` and `lastShownItemIndex`\r\n\t\t// based on the new `columnsCount` so that the whole row is visible.\r\n\t\tconst newFirstShownItemIndex = Math.floor(firstShownItemIndex / newColumnsCount) * newColumnsCount\r\n\t\tconst newLastShownItemIndex = Math.min(\r\n\t\t\tMath.ceil((lastShownItemIndex + 1) / newColumnsCount) * newColumnsCount,\r\n\t\t\titemsCount\r\n\t\t) - 1\r\n\r\n\t\t// Potentially update `firstShownItemIndex` if it needs to be adjusted in order to\r\n\t\t// correspond to the new `columnsCount`.\r\n\t\tif (newFirstShownItemIndex !== firstShownItemIndex) {\r\n\t\t\tlog('Columns Count changed from', this.getState().columnsCount || 1, 'to', newColumnsCount)\r\n\t\t\tlog('First Shown Item Index needs to change from', firstShownItemIndex, 'to', newFirstShownItemIndex)\r\n\t\t}\r\n\r\n\t\t// Always rewrite `firstShownItemIndex` and `lastShownItemIndex`\r\n\t\t// as part of the `state` update, even if it hasn't been modified.\r\n\t\t//\r\n\t\t// The reason is that there could be two subsequent `onResize()` calls:\r\n\t\t// the first one could be user resizing the window to half of its width,\r\n\t\t// resulting in an \"asynchronous\" `updateState()` call, and then, before that\r\n\t\t// `updateState()` call is applied, a second resize event happens when the user\r\n\t\t// has resized the window back to its original width, meaning that the\r\n\t\t// `columnsCount` is back to its original value.\r\n\t\t// In that case, the final `newFirstShownItemIndex` will be equal to the\r\n\t\t// original `firstShownItemIndex` that was in `state` before the user\r\n\t\t// has started resizing the window, so, in the end, `state.firstShownItemIndex`\r\n\t\t// property wouldn't have changed, but it still has to be part of the final\r\n\t\t// state update in order to overwrite the previous update of `firstShownItemIndex`\r\n\t\t// property that has been scheduled to be applied in state after the first resize\r\n\t\t// happened.\r\n\t\t//\r\n\t\tnewState.firstShownItemIndex = newFirstShownItemIndex\r\n\t\tnewState.lastShownItemIndex = newLastShownItemIndex\r\n\r\n\t\tconst verticalSpacing = this.getVerticalSpacing()\r\n\t\tconst columnsCount = this.getColumnsCount()\r\n\r\n\t\t// `beforeResize` is always overwritten in `state` here.\r\n\t\t// (once it has started being tracked in `state`)\r\n\t\tif (this.shouldDiscardBeforeResizeItemHeights() || newFirstShownItemIndex === 0) {\r\n\t\t\tif (this.beforeResize.shouldIncludeBeforeResizeValuesInState()) {\r\n\t\t\t\tnewState.beforeResize = undefined\r\n\t\t\t}\r\n\t\t}\r\n\t\t// Snapshot \"before resize\" values in order to preserve the currently\r\n\t\t// shown items' vertical position on screen so that there's no \"content jumping\".\r\n\t\telse {\r\n\t\t\t// Keep \"before resize\" values in order to preserve the currently\r\n\t\t\t// shown items' vertical position on screen so that there's no\r\n\t\t\t// \"content jumping\". These \"before resize\" values will be discarded\r\n\t\t\t// when (if) the user scrolls back to the top of the list.\r\n\t\t\tnewState.beforeResize = {\r\n\t\t\t\tverticalSpacing,\r\n\t\t\t\tcolumnsCount,\r\n\t\t\t\titemHeights: this.beforeResize.snapshotBeforeResizeItemHeights({\r\n\t\t\t\t\tfirstShownItemIndex,\r\n\t\t\t\t\tnewFirstShownItemIndex,\r\n\t\t\t\t\tnewColumnsCount\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// `this.widthHasChanged` tells `VirtualScroller` that it should\r\n\t\t// temporarily stop other updates (like \"on scroll\" updates) and wait\r\n\t\t// for the new `state` to be applied, after which the `onRender()`\r\n\t\t// function will clear this flag and perform a re-layout.\r\n\t\t//\r\n\t\t// A re-layout is required because the layout parameters calculated above\r\n\t\t// are approximate ones, and the exact item heights aren't known at this point.\r\n\t\t// So the `updateState()` call below is just to re-render the `VirtualScroller`.\r\n\t\t// After it has been re-rendered, it will measure item heights and then calculate\r\n\t\t// correct layout parameters.\r\n\t\t//\r\n\t\tthis.widthHasChanged = {\r\n\t\t\tstateUpdate: newState\r\n\t\t}\r\n\r\n\t\t// Rerender.\r\n\t\tthis.updateState(newState)\r\n\t}\r\n\r\n\t// Returns whether \"before resize\" item heights should be discarded\r\n\t// as a result of calling `setItems()` with a new set of items\r\n\t// when an asynchronous `updateState()` call inside that function\r\n\t// hasn't been applied yet.\r\n\t//\r\n\t// If `setItems()` update was an \"incremental\" one and no items\r\n\t// have been prepended, then `firstShownItemIndex` is preserved,\r\n\t// and all items' heights before it should be kept in order to\r\n\t// preserve the top offset of the first shown item so that there's\r\n\t// no \"content jumping\".\r\n\t//\r\n\t// If `setItems()` update was an \"incremental\" one but there're\r\n\t// some prepended items, then it means that now there're new items\r\n\t// with unknown heights at the top, so the top offset of the first\r\n\t// shown item won't be preserved because there're no \"before resize\"\r\n\t// heights of those items.\r\n\t//\r\n\t// If `setItems()` update was not an \"incremental\" one, then don't\r\n\t// attempt to restore previous item heights after a potential window\r\n\t// width change because all item heights have been reset.\r\n\t//\r\n\tthis.shouldDiscardBeforeResizeItemHeights = () => {\r\n\t\tif (this.newItemsWillBeRendered) {\r\n\t\t\tconst { prepend, replace } = this.newItemsWillBeRendered\r\n\t\t\treturn prepend || replace\r\n\t\t}\r\n\t}\r\n}"],"mappings":"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"}

package/modules/Resize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Resize.js","names":["debounce","log","Resize","bypass","getWidth","getHeight","listenForResize","onResizeStart","onResizeStop","onHeightChange","onWidthChange","onNoChange","isActive","prevScrollableContainerWidth","width","prevScrollableContainerHeight","height","onResize","_onResize","SCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL","onStart","onStop","unlistenResize","undefined"],"sources":["../source/Resize.js"],"sourcesContent":["import debounce from './utility/debounce.js'\r\nimport log from './utility/debug.js'\r\n\r\nexport default class Resize {\r\n\tconstructor({\r\n\t\tbypass,\r\n\t\tgetWidth,\r\n\t\tgetHeight,\r\n\t\tlistenForResize,\r\n\t\tonResizeStart,\r\n\t\tonResizeStop,\r\n\t\tonHeightChange,\r\n\t\tonWidthChange,\r\n\t\tonNoChange\r\n\t}) {\r\n\t\tthis.bypass = bypass\r\n\r\n\t\tthis.onHeightChange = onHeightChange\r\n\t\tthis.onWidthChange = onWidthChange\r\n\t\tthis.onNoChange = onNoChange\r\n\r\n\t\tthis.getWidth = getWidth\r\n\t\tthis.getHeight = getHeight\r\n\t\tthis.listenForResize = listenForResize\r\n\r\n\t\tthis.onResize = debounce(\r\n\t\t\tthis._onResize,\r\n\t\t\tSCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL,\r\n\t\t\t{\r\n\t\t\t\tonStart: onResizeStart,\r\n\t\t\t\tonStop: onResizeStop\r\n\t\t\t}\r\n\t\t)\r\n\t}\r\n\r\n\tstart() {\r\n\t\tthis.isActive = true\r\n\t\tif (this.bypass) {\r\n\t\t\treturn\r\n\t\t}\r\n\t\tthis.width = this.getWidth()\r\n\t\tthis.height = this.getHeight()\r\n\t\tthis.unlistenResize = this.listenForResize(this.onResize)\r\n\t}\r\n\r\n\tstop() {\r\n\t\tthis.isActive = false\r\n\t\tthis.width = undefined\r\n\t\tthis.height = undefined\r\n\t\tif (this.unlistenResize) {\r\n\t\t\tthis.unlistenResize()\r\n\t\t\tthis.unlistenResize = undefined\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * On scrollable container resize.\r\n\t */\r\n\t_onResize = () => {\r\n\t\t// If `VirtualScroller` has been unmounted\r\n\t\t// while `debounce()`'s `setTimeout()` was waiting, then exit.\r\n\t\t// If the `VirtualScroller` gets restarted later, it will detect\r\n\t\t// that `state.scrollableContainerWidth` doesn't match the actual\r\n\t\t// scrollable container width, and will call `this.onResize()`.\r\n\t\tif (!this.isActive) {\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tconst prevScrollableContainerWidth = this.width\r\n\t\tconst prevScrollableContainerHeight = this.height\r\n\r\n\t\tthis.width = this.getWidth()\r\n\t\tthis.height = this.getHeight()\r\n\r\n\t\tif (this.width === prevScrollableContainerWidth) {\r\n\t\t\tif (this.height === prevScrollableContainerHeight) {\r\n\t\t\t\t// The dimensions of the container didn't change,\r\n\t\t\t\t// so there's no need to re-layout anything.\r\n\t\t\t\tthis.onNoChange()\r\n\t\t\t} else {\r\n\t\t\t\t// Scrollable container height has changed,\r\n\t\t\t\t// so just recalculate shown item indexes.\r\n\t\t\t\t// No need to perform a re-layout from scratch.\r\n\t\t\t\tthis.onHeightChange(prevScrollableContainerHeight, this.height)\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\t// Reset item heights, because if scrollable container's width (or height)\r\n\t\t\t// has changed, then the list width (or height) most likely also has changed,\r\n\t\t\t// and also some CSS `@media()` rules might have been added or removed.\r\n\t\t\t// So re-render the list entirely.\r\n\t\t\tthis.onWidthChange(prevScrollableContainerWidth, this.width)\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst SCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL = 250"],"mappings":";;;;;;;;AAAA,OAAOA,QAAP,MAAqB,uBAArB;AACA,OAAOC,GAAP,MAAgB,oBAAhB;;IAEqBC,M;EACpB,sBAUG;IAAA;;IAAA,IATFC,MASE,QATFA,MASE;IAAA,IARFC,QAQE,QARFA,QAQE;IAAA,IAPFC,SAOE,QAPFA,SAOE;IAAA,IANFC,eAME,QANFA,eAME;IAAA,IALFC,aAKE,QALFA,aAKE;IAAA,IAJFC,YAIE,QAJFA,YAIE;IAAA,IAHFC,cAGE,QAHFA,cAGE;IAAA,IAFFC,aAEE,QAFFA,aAEE;IAAA,IADFC,UACE,QADFA,UACE;;IAAA;;IAAA,mCA4CS,YAAM;MACjB;MACA;MACA;MACA;MACA;MACA,IAAI,CAAC,KAAI,CAACC,QAAV,EAAoB;QACnB;MACA;;MAED,IAAMC,4BAA4B,GAAG,KAAI,CAACC,KAA1C;MACA,IAAMC,6BAA6B,GAAG,KAAI,CAACC,MAA3C;MAEA,KAAI,CAACF,KAAL,GAAa,KAAI,CAACV,QAAL,EAAb;MACA,KAAI,CAACY,MAAL,GAAc,KAAI,CAACX,SAAL,EAAd;;MAEA,IAAI,KAAI,CAACS,KAAL,KAAeD,4BAAnB,EAAiD;QAChD,IAAI,KAAI,CAACG,MAAL,KAAgBD,6BAApB,EAAmD;UAClD;UACA;UACA,KAAI,CAACJ,UAAL;QACA,CAJD,MAIO;UACN;UACA;UACA;UACA,KAAI,CAACF,cAAL,CAAoBM,6BAApB,EAAmD,KAAI,CAACC,MAAxD;QACA;MACD,CAXD,MAWO;QACN;QACA;QACA;QACA;QACA,KAAI,CAACN,aAAL,CAAmBG,4BAAnB,EAAiD,KAAI,CAACC,KAAtD;MACA;IACD,CA9EE;;IACF,KAAKX,MAAL,GAAcA,MAAd;IAEA,KAAKM,cAAL,GAAsBA,cAAtB;IACA,KAAKC,aAAL,GAAqBA,aAArB;IACA,KAAKC,UAAL,GAAkBA,UAAlB;IAEA,KAAKP,QAAL,GAAgBA,QAAhB;IACA,KAAKC,SAAL,GAAiBA,SAAjB;IACA,KAAKC,eAAL,GAAuBA,eAAvB;IAEA,KAAKW,QAAL,GAAgBjB,QAAQ,CACvB,KAAKkB,SADkB,EAEvBC,6CAFuB,EAGvB;MACCC,OAAO,EAAEb,aADV;MAECc,MAAM,EAAEb;IAFT,CAHuB,CAAxB;EAQA;;;;WAED,iBAAQ;MACP,KAAKI,QAAL,GAAgB,IAAhB;;MACA,IAAI,KAAKT,MAAT,EAAiB;QAChB;MACA;;MACD,KAAKW,KAAL,GAAa,KAAKV,QAAL,EAAb;MACA,KAAKY,MAAL,GAAc,KAAKX,SAAL,EAAd;MACA,KAAKiB,cAAL,GAAsB,KAAKhB,eAAL,CAAqB,KAAKW,QAA1B,CAAtB;IACA;;;WAED,gBAAO;MACN,KAAKL,QAAL,GAAgB,KAAhB;MACA,KAAKE,KAAL,GAAaS,SAAb;MACA,KAAKP,MAAL,GAAcO,SAAd;;MACA,IAAI,KAAKD,cAAT,EAAyB;QACxB,KAAKA,cAAL;QACA,KAAKA,cAAL,GAAsBC,SAAtB;MACA;IACD;IAED;AACD;AACA;;;;;;;SAtDqBrB,M;AA4FrB,IAAMiB,6CAA6C,GAAG,GAAtD"}

package/modules/VirtualScroller.resize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VirtualScroller.resize.js","names":["log","onResize","previouslyCalculatedLayout","undefined","listHeightMeasurement","reset","itemsCount","newItemsWillBeRendered","count","getState","itemHeights","length","layout","newState","scrollableContainerWidth","scrollableContainer","getWidth","firstShownItemIndex","lastShownItemIndex","beforeItemsHeight","afterItemsHeight","Array","columnsCount","getActualColumnsCountForState","verticalSpacing","newColumnsCount","getActualColumnsCount","newFirstShownItemIndex","Math","floor","newLastShownItemIndex","min","ceil","getVerticalSpacing","getColumnsCount","shouldDiscardBeforeResizeItemHeights","beforeResize","shouldIncludeBeforeResizeValuesInState","snapshotBeforeResizeItemHeights","widthHasChanged","stateUpdate","updateState","prepend","replace"],"sources":["../source/VirtualScroller.resize.js"],"sourcesContent":["import log from './utility/debug.js'\r\n\r\nexport default function() {\r\n\tthis.onResize = () => {\r\n\t\t// Reset \"previously calculated layout\".\r\n\t\t//\r\n\t\t// The \"previously calculated layout\" feature is not currently used.\r\n\t\t//\r\n\t\t// The current layout snapshot could be stored as a \"previously calculated layout\" variable\r\n\t\t// so that it could theoretically be used when calculating new layout incrementally\r\n\t\t// rather than from scratch, which would be an optimization.\r\n\t\t//\r\n\t\tthis.previouslyCalculatedLayout = undefined\r\n\r\n\t\t// Cancel any potential scheduled scroll position restoration.\r\n\t\tthis.listHeightMeasurement.reset()\r\n\r\n\t\t// Get the most recent items count.\r\n\t\t// If there're a \"pending\" `setItems()` call then use the items count from that call\r\n\t\t// instead of using the count of currently shown `items` from `state`.\r\n\t\t// A `setItems()` call is \"pending\" when `updateState()` operation is \"asynchronous\", that is\r\n\t\t// when `updateState()` calls aren't applied immediately, like in React.\r\n\t\tconst itemsCount = this.newItemsWillBeRendered\r\n\t\t\t? this.newItemsWillBeRendered.count\r\n\t\t\t: this.getState().itemHeights.length\r\n\r\n\t\t// If layout values have been calculated as a result of a \"pending\" `setItems()` call,\r\n\t\t// then don't discard those new layout values and use them instead of the ones from `state`.\r\n\t\t//\r\n\t\t// A `setItems()` call is \"pending\" when `updateState()` operation is \"asynchronous\", that is\r\n\t\t// when `updateState()` calls aren't applied immediately, like in React.\r\n\t\t//\r\n\t\tconst layout = this.newItemsWillBeRendered\r\n\t\t\t? this.newItemsWillBeRendered.layout\r\n\t\t\t: this.getState()\r\n\r\n\t\t// Update `VirtualScroller` state.\r\n\t\tconst newState = {\r\n\t\t\tscrollableContainerWidth: this.scrollableContainer.getWidth(),\r\n\r\n\t\t\t// This state update should also overwrite all the `state` properties\r\n\t\t\t// that are also updated in the \"on scroll\" handler (`getShownItemIndexes()`):\r\n\t\t\t//\r\n\t\t\t// * `firstShownItemIndex`\r\n\t\t\t// * `lastShownItemIndex`\r\n\t\t\t// * `beforeItemsHeight`\r\n\t\t\t// * `afterItemsHeight`\r\n\t\t\t//\r\n\t\t\t// That's because this `updateState()` update has a higher priority\r\n\t\t\t// than that of the \"on scroll\" handler, so it should overwrite\r\n\t\t\t// any potential state changes dispatched by the \"on scroll\" handler.\r\n\t\t\t//\r\n\t\t\t// All these properties might have changed, but they're not\r\n\t\t\t// recalculated here becase they'll be recalculated after\r\n\t\t\t// this new state is applied (rendered).\r\n\t\t\t//\r\n\t\t\tfirstShownItemIndex: layout.firstShownItemIndex,\r\n\t\t\tlastShownItemIndex: layout.lastShownItemIndex,\r\n\t\t\tbeforeItemsHeight: layout.beforeItemsHeight,\r\n\t\t\tafterItemsHeight: layout.afterItemsHeight,\r\n\r\n\t\t\t// Reset item heights, because if scrollable container's width (or height)\r\n\t\t\t// has changed, then the list width (or height) most likely also has changed,\r\n\t\t\t// and also some CSS `@media()` rules might have been added or removed.\r\n\t\t\t// So re-render the list entirely.\r\n\t\t\titemHeights: new Array(itemsCount),\r\n\r\n\t\t\tcolumnsCount: this.getActualColumnsCountForState(),\r\n\r\n\t\t\t// Re-measure vertical spacing after render because new CSS styles\r\n\t\t\t// might be applied for the new window width.\r\n\t\t\tverticalSpacing: undefined\r\n\t\t}\r\n\r\n\t\tconst { firstShownItemIndex, lastShownItemIndex } = layout\r\n\r\n\t\t// Get the `columnsCount` for the new window width.\r\n\t\tconst newColumnsCount = this.getActualColumnsCount()\r\n\r\n\t\t// Re-calculate `firstShownItemIndex` and `lastShownItemIndex`\r\n\t\t// based on the new `columnsCount` so that the whole row is visible.\r\n\t\tconst newFirstShownItemIndex = Math.floor(firstShownItemIndex / newColumnsCount) * newColumnsCount\r\n\t\tconst newLastShownItemIndex = Math.min(\r\n\t\t\tMath.ceil((lastShownItemIndex + 1) / newColumnsCount) * newColumnsCount,\r\n\t\t\titemsCount\r\n\t\t) - 1\r\n\r\n\t\t// Potentially update `firstShownItemIndex` if it needs to be adjusted in order to\r\n\t\t// correspond to the new `columnsCount`.\r\n\t\tif (newFirstShownItemIndex !== firstShownItemIndex) {\r\n\t\t\tlog('Columns Count changed from', this.getState().columnsCount || 1, 'to', newColumnsCount)\r\n\t\t\tlog('First Shown Item Index needs to change from', firstShownItemIndex, 'to', newFirstShownItemIndex)\r\n\t\t}\r\n\r\n\t\t// Always rewrite `firstShownItemIndex` and `lastShownItemIndex`\r\n\t\t// as part of the `state` update, even if it hasn't been modified.\r\n\t\t//\r\n\t\t// The reason is that there could be two subsequent `onResize()` calls:\r\n\t\t// the first one could be user resizing the window to half of its width,\r\n\t\t// resulting in an \"asynchronous\" `updateState()` call, and then, before that\r\n\t\t// `updateState()` call is applied, a second resize event happens when the user\r\n\t\t// has resized the window back to its original width, meaning that the\r\n\t\t// `columnsCount` is back to its original value.\r\n\t\t// In that case, the final `newFirstShownItemIndex` will be equal to the\r\n\t\t// original `firstShownItemIndex` that was in `state` before the user\r\n\t\t// has started resizing the window, so, in the end, `state.firstShownItemIndex`\r\n\t\t// property wouldn't have changed, but it still has to be part of the final\r\n\t\t// state update in order to overwrite the previous update of `firstShownItemIndex`\r\n\t\t// property that has been scheduled to be applied in state after the first resize\r\n\t\t// happened.\r\n\t\t//\r\n\t\tnewState.firstShownItemIndex = newFirstShownItemIndex\r\n\t\tnewState.lastShownItemIndex = newLastShownItemIndex\r\n\r\n\t\tconst verticalSpacing = this.getVerticalSpacing()\r\n\t\tconst columnsCount = this.getColumnsCount()\r\n\r\n\t\t// `beforeResize` is always overwritten in `state` here.\r\n\t\t// (once it has started being tracked in `state`)\r\n\t\tif (this.shouldDiscardBeforeResizeItemHeights() || newFirstShownItemIndex === 0) {\r\n\t\t\tif (this.beforeResize.shouldIncludeBeforeResizeValuesInState()) {\r\n\t\t\t\tnewState.beforeResize = undefined\r\n\t\t\t}\r\n\t\t}\r\n\t\t// Snapshot \"before resize\" values in order to preserve the currently\r\n\t\t// shown items' vertical position on screen so that there's no \"content jumping\".\r\n\t\telse {\r\n\t\t\t// Keep \"before resize\" values in order to preserve the currently\r\n\t\t\t// shown items' vertical position on screen so that there's no\r\n\t\t\t// \"content jumping\". These \"before resize\" values will be discarded\r\n\t\t\t// when (if) the user scrolls back to the top of the list.\r\n\t\t\tnewState.beforeResize = {\r\n\t\t\t\tverticalSpacing,\r\n\t\t\t\tcolumnsCount,\r\n\t\t\t\titemHeights: this.beforeResize.snapshotBeforeResizeItemHeights({\r\n\t\t\t\t\tfirstShownItemIndex,\r\n\t\t\t\t\tnewFirstShownItemIndex,\r\n\t\t\t\t\tnewColumnsCount\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// `this.widthHasChanged` tells `VirtualScroller` that it should\r\n\t\t// temporarily stop other updates (like \"on scroll\" updates) and wait\r\n\t\t// for the new `state` to be applied, after which the `onRender()`\r\n\t\t// function will clear this flag and perform a re-layout.\r\n\t\t//\r\n\t\t// A re-layout is required because the layout parameters calculated above\r\n\t\t// are approximate ones, and the exact item heights aren't known at this point.\r\n\t\t// So the `updateState()` call below is just to re-render the `VirtualScroller`.\r\n\t\t// After it has been re-rendered, it will measure item heights and then calculate\r\n\t\t// correct layout parameters.\r\n\t\t//\r\n\t\tthis.widthHasChanged = {\r\n\t\t\tstateUpdate: newState\r\n\t\t}\r\n\r\n\t\t// Rerender.\r\n\t\tthis.updateState(newState)\r\n\t}\r\n\r\n\t// Returns whether \"before resize\" item heights should be discarded\r\n\t// as a result of calling `setItems()` with a new set of items\r\n\t// when an asynchronous `updateState()` call inside that function\r\n\t// hasn't been applied yet.\r\n\t//\r\n\t// If `setItems()` update was an \"incremental\" one and no items\r\n\t// have been prepended, then `firstShownItemIndex` is preserved,\r\n\t// and all items' heights before it should be kept in order to\r\n\t// preserve the top offset of the first shown item so that there's\r\n\t// no \"content jumping\".\r\n\t//\r\n\t// If `setItems()` update was an \"incremental\" one but there're\r\n\t// some prepended items, then it means that now there're new items\r\n\t// with unknown heights at the top, so the top offset of the first\r\n\t// shown item won't be preserved because there're no \"before resize\"\r\n\t// heights of those items.\r\n\t//\r\n\t// If `setItems()` update was not an \"incremental\" one, then don't\r\n\t// attempt to restore previous item heights after a potential window\r\n\t// width change because all item heights have been reset.\r\n\t//\r\n\tthis.shouldDiscardBeforeResizeItemHeights = () => {\r\n\t\tif (this.newItemsWillBeRendered) {\r\n\t\t\tconst { prepend, replace } = this.newItemsWillBeRendered\r\n\t\t\treturn prepend || replace\r\n\t\t}\r\n\t}\r\n}"],"mappings":"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"}