virtual-scroller 1.12.2 → 1.12.4

package/source/VirtualScroller.js

@@ -49,7 +49,11 @@ export default class VirtualScroller {
 			}
 		}
 
-		log('~ Start ~')
+		if (isRestart) {
+			log('~ Start (restart) ~')
+		} else {
+			log('~ Start ~')
+		}
 
 		// `this._isActive = true` should be placed somewhere at the start of this function.
 		this._isActive = true
@@ -71,18 +75,13 @@ export default class VirtualScroller {
 			}
 		}
 
-		// If there was a pending state update that didn't get applied
-		// because of stopping the `VirtualScroller`, apply that state update now.
-		//
-		// The pending state update won't get applied if the scrollable container width
-		// has changed but that's ok because that state update currently could only contain:
-		// * `scrollableContainerWidth`
-		// * `verticalSpacing`
-		// * `beforeResize`
-		// All of those get rewritten in `onResize()` anyway.
-		//
-		let stateUpdate = this._stoppedStateUpdate
-		this._stoppedStateUpdate = undefined
+		// If there was a pending "after render" state update that didn't get applied
+		// because the `VirtualScroller` got stopped, then apply that pending "after render"
+		// state update now. Such state update could include properties like:
+		// * A `verticalSpacing` that has been measured in `onRender()`.
+		// * A cleaned-up `beforeResize` object that was cleaned-up in `onRender()`.
+		let stateUpdate = this._afterRenderStateUpdateThatWasStopped
+		this._afterRenderStateUpdateThatWasStopped = undefined
 
 		// Reset `this.verticalSpacing` so that it re-measures it in cases when
 		// the `VirtualScroller` was previously stopped and is now being restarted.
@@ -103,7 +102,7 @@ export default class VirtualScroller {
 			}
 		}
 
-		this.resize.start()
+		this.scrollableContainerResizeHandler.start()
 		this.scroll.start()
 
 		// If `scrollableContainerWidth` hasn't been measured yet,
@@ -122,13 +121,11 @@ export default class VirtualScroller {
 			const prevWidth = this.getState().scrollableContainerWidth
 			if (newWidth !== prevWidth) {
 				log('~ Scrollable container width changed from', prevWidth, 'to', newWidth, '~')
-				// `stateUpdate` doesn't get passed to `this.onResize()`, and, therefore,
-				// won't be applied. But that's ok because currently it could only contain:
-				// * `scrollableContainerWidth`
-				// * `verticalSpacing`
-				// * `beforeResize`
-				// All of those get rewritten in `onResize()` anyway.
-				return this.onResize()
+				// The pending state update (if present) won't be applied in this case.
+				// That's ok because such state update could currently only originate in
+				// `this.onContainerResize()` function. Therefore, alling `this.onContainerResize()` again
+				// would rewrite all those `stateUpdate` properties anyway, so they're not passed.
+				return this.onContainerResize()
 			}
 		}
 
@@ -139,7 +136,7 @@ export default class VirtualScroller {
 			const columnsCount = this.getActualColumnsCount()
 			const columnsCountFromState = this.getState().columnsCount || 1
 			if (columnsCount !== columnsCountFromState) {
-				return this.onResize()
+				return this.onContainerResize()
 			}
 		}
 
@@ -161,7 +158,7 @@ export default class VirtualScroller {
 
 		log('~ Stop ~')
 
-		this.resize.stop()
+		this.scrollableContainerResizeHandler.stop()
 		this.scroll.stop()
 
 		// Stop `ListTopOffsetWatcher` if it has been started.
@@ -221,7 +218,9 @@ export default class VirtualScroller {
 	 * @param  {number} i — Item index
 	 */
 	onItemHeightDidChange(i) {
-		this.hasToBeStarted()
+		// See the comments in the `setItemState()` function below for the rationale
+		// on why the `hasToBeStarted()` check was commented out.
+		// this.hasToBeStarted()
 		this._onItemHeightDidChange(i)
 	}
 
@@ -231,7 +230,48 @@ export default class VirtualScroller {
 	 * @param  {any} i — Item's new state
 	 */
 	setItemState(i, newItemState) {
-		this.hasToBeStarted()
+		// There is an issue in React 18.2.0 when `useInsertionEffect()` doesn't run twice
+		// on mount unlike `useLayoutEffect()` in "strict" mode. That causes a bug in a React
+		// implementation of the `virtual-scroller`.
+		// https://gitlab.com/catamphetamine/virtual-scroller/-/issues/33
+		// https://github.com/facebook/react/issues/26320
+		// A workaround for that bug is ignoring the second-initial run of the effects at mount.
+		//
+		// But in that case, if an `ItemComponent` calls `setItemState()` in `useLayoutEffect()`,
+		// it could result in a bug.
+		//
+		// Consider a type of `useLayoutEffect()` that skips the initial mount:
+		// `useLayoutEffectSkipInitialMount()`.
+		// Suppose that effect is written in such a way that it only skips the first call of itself.
+		// In that case, if React is run in "strict" mode, the effect will no longer work as expected
+		// and it won't actually skip the initial mount and will be executed during the second initial run.
+		// But the `VirtualScroller` itself has already implemented a workaround that prevents
+		// its hooks from running twice on mount. This means that `useVirtualScrollerStartStop()`
+		// of the React component would have already stopped the `VirtualScroller` by the time
+		// `ItemComponent`'s incorrectly-behaving `useLayoutEffectSkipInitialMount()` effect is run,
+		// resulting in an error: "`VirtualScroller` hasn't been started".
+		//
+		// The log when not in "strict" mode would be:
+		//
+		// * `useLayoutEffect()` is run in `ItemComponent` — skips the initial run.
+		// * `useLayoutEffect()` is run in `useVirtualScrollerStartStop()`. It starts the `VirtualScroller`.
+		// * Some dependency property gets updated inside `ItemComponent`.
+		// * `useLayoutEffect()` is run in `ItemComponent` — no longer skips. Calls `setItemState()`.
+		// * The `VirtualScroller` is started so it handles `setState()` correctly.
+		//
+		// The log when in "strict" mode would be:
+		//
+		// * `useLayoutEffect()` is run in `ItemComponent` — skips the initial run.
+		// * `useLayoutEffect()` is run in `useVirtualScrollerStartStop()`. It starts the `VirtualScroller`.
+		// * `useLayoutEffect()` is unmounted in `useVirtualScrollerStartStop()`. It stops the `VirtualScroller`.
+		// * `useLayoutEffect()` is unmounted in `ItemComponent` — does nothing.
+		// * `useLayoutEffect()` is run the second time in `ItemComponent` — no longer skips. Calls `setItemState()`.
+		// * The `VirtualScroller` is stopped so it throws an error: "`VirtualScroller` hasn't been started".
+		//
+		// For that reason, the requirement of the `VirtualScroller` to be started was commented out.
+		// Commenting it out wouldn't result in any potential bugs because the code would work correctly
+		// in both cases.
+		// this.hasToBeStarted()
 		this._setItemState(i, newItemState)
 	}
 

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
 		})
 	}
 
@@ -441,9 +437,13 @@ export default function() {
 		if (previousHeight !== newHeight) {
 			log('~ Item height has changed. Should update layout. ~')
 
-			// Update or reset a previously calculated layout
-			// so that the "diff"s based on that layout in the future
-			// produce correct results.
+			// Update or reset a previously calculated layout with the new item height
+			// so that the potential future "diff"s based on that "previously calculated" layout
+			// would be correct.
+			//
+			// The "previously calculated layout" feature is not currently used
+			// so this function call doesn't really affect anything.
+			//
 			updatePreviouslyCalculatedLayoutOnItemHeightChange.call(this, i, previousHeight, newHeight)
 
 			// Recalculate layout.
@@ -455,11 +455,13 @@ export default function() {
 			// that might happen in the middle of the currently pending `setState()` operation
 			// being applied, resulting in weird "race condition" bugs.
 			//
-			if (this.waitingForRender) {
-				log('~ Another state update is already waiting to be rendered. Delay the layout update until then. ~')
-				this.updateLayoutAfterRenderBecauseItemHeightChanged = true
-			} else {
-				this.onUpdateShownItemIndexes({ reason: LAYOUT_REASON.ITEM_HEIGHT_CHANGED })
+			if (this._isActive) {
+				if (this.waitingForRender) {
+					log('~ Another state update is already waiting to be rendered. Delay the layout update until then. ~')
+					this.updateLayoutAfterRenderBecauseItemHeightChanged = true
+				} else {
+					this.onUpdateShownItemIndexes({ reason: LAYOUT_REASON.ITEM_HEIGHT_CHANGED })
+				}
 			}
 
 			// If there was a request for `setState()` with new `items`, then the changes

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/VirtualScroller.onRender.js

@@ -63,7 +63,7 @@ export default function() {
 			// would construct its own state object.
 			if (!shallowEqual(newState, this.mostRecentSetStateValue)) {
 				warn('The most recent state that was set', getStateSnapshot(this.mostRecentSetStateValue))
-				reportError('The state that has been rendered is not the most recent one that was set')
+				reportError('`VirtualScroller` has been rendered with a `state` that is not equal to the most recently set one')
 			}
 		}
 
@@ -199,7 +199,7 @@ export default function() {
 		}
 
 		if (!this._isActive) {
-			this._stoppedStateUpdate = stateUpdate
+			this._afterRenderStateUpdateThatWasStopped = stateUpdate
 			return
 		}
 

package/source/react/VirtualScroller.js

@@ -13,6 +13,8 @@ import useUpdateItemKeysOnItemsChange from './useUpdateItemKeysOnItemsChange.js'
 import useClassName from './useClassName.js'
 import useStyle from './useStyle.js'
 
+import { warn } from '../utility/debug.js'
+
 // When `items` property changes:
 // * A new `items` property is supplied to the React component.
 // * The React component re-renders itself.
@@ -172,6 +174,7 @@ function VirtualScroller({
 		// `onMount()` option is deprecated due to no longer being used.
 		// If someone thinks there's a valid use case for it, create an issue.
 		if (onMount) {
+			warn('`onMount` property is deprecated')
 			onMount()
 		}
 	}, [])

package/source/react/useEffectDontMountTwiceInStrictMode.js

@@ -0,0 +1,68 @@
+import { useRef, useCallback } from 'react'
+
+// A workaround for a React bug when `useInsertionEffect()` doesn't run twice on mount
+// in "strict" mode unlike `useEffect()` and `useLayoutEffect()` do.
+// https://github.com/facebook/react/issues/26320
+export default function useEffectDontMountTwiceInStrictMode(useEffect, handler, dependencies) {
+  if (!Array.isArray(dependencies)) {
+    throw new Error('Dependencies argument must be an array')
+  }
+
+  const { onEffect } = useEffectStatus()
+  const { onChange } = usePrevousValue(dependencies)
+
+  useEffect(() => {
+    const { isInitialRun } = onEffect()
+    const previousDependencies = onChange(dependencies)
+    if (isInitialRun || !isShallowEqualArrays(previousDependencies, dependencies)) {
+      const cleanUpFunction = handler()
+      if (typeof cleanUpFunction === 'function') {
+        throw new Error('An effect can\'t return a clean-up function when used with `useEffectDontMountTwiceInStrictMode()` because the clean-up function won\'t behave correctly in that case')
+      }
+    }
+  }, dependencies)
+}
+
+function useEffectStatus() {
+  const hasMounted = useRef(false)
+
+  const onEffect = useCallback(() => {
+    const wasAlreadyMounted = hasMounted.current
+    hasMounted.current = true
+    return {
+      isInitialRun: !wasAlreadyMounted
+    }
+  }, [])
+
+  return {
+    onEffect
+  }
+}
+
+function usePrevousValue(value) {
+  const prevValue = useRef(value)
+
+  const onChange = useCallback((value) => {
+    const previousValue = prevValue.current
+    prevValue.current = value
+    return previousValue
+  }, [])
+
+  return {
+    onChange
+  }
+}
+
+function isShallowEqualArrays(a, b) {
+  if (a.length !== b.length) {
+    return false
+  }
+  let i = 0
+  while (i < a.length) {
+    if (a[i] !== b[i]) {
+      return false
+    }
+    i++
+  }
+  return true
+}

package/source/react/useInsertionEffectDontMountTwiceInStrictMode.js

@@ -0,0 +1,10 @@
+import { useInsertionEffect } from 'react'
+
+import useEffectDontMountTwiceInStrictMode from './useEffectDontMountTwiceInStrictMode.js'
+
+// A workaround for a React bug when `useInsertionEffect()` doesn't run twice on mount
+// in "strict" mode unlike `useEffect()` and `useLayoutEffect()` do.
+// https://github.com/facebook/react/issues/26320
+export default function useInsertionEffectDontMountTwiceInStrictMode(handler, dependencies) {
+  return useEffectDontMountTwiceInStrictMode(useInsertionEffect, handler, dependencies)
+}

package/source/react/useLayoutEffectDontMountTwiceInStrictMode.js

@@ -0,0 +1,10 @@
+import { useLayoutEffect } from 'react'
+
+import useEffectDontMountTwiceInStrictMode from './useEffectDontMountTwiceInStrictMode.js'
+
+// A workaround for a React bug when `useInsertionEffect()` doesn't run twice on mount
+// in "strict" mode unlike `useEffect()` and `useLayoutEffect()` do.
+// https://github.com/facebook/react/issues/26320
+export default function useLayoutEffectDontMountTwiceInStrictMode(handler, dependencies) {
+  return useEffectDontMountTwiceInStrictMode(useLayoutEffect, handler, dependencies)
+}

package/source/react/useState.js

@@ -1,7 +1,10 @@
 import log, { isDebug } from '../utility/debug.js'
 import getStateSnapshot from '../utility/getStateSnapshot.js'
 
-import { useState, useRef, useCallback, useLayoutEffect, useInsertionEffect } from 'react'
+import { useRef, useCallback } from 'react'
+import useStateNoStaleBug from './useStateNoStaleBug.js'
+import useInsertionEffectDontMountTwiceInStrictMode from './useInsertionEffectDontMountTwiceInStrictMode.js'
+import useLayoutEffectDontMountTwiceInStrictMode from './useLayoutEffectDontMountTwiceInStrictMode.js'
 
 // Creates state management functions.
 export default function _useState({
@@ -14,7 +17,7 @@ export default function _useState({
 	// `VirtualScroller` state gets updated from this variable.
 	// The reason for that is that `VirtualScroller` state must always
 	// correspond exactly to what's currently rendered on the screen.
-	const [_newState, _setNewState] = useState(initialState)
+	const [_newState, _setNewState] = useStateNoStaleBug(initialState)
 
 	// This `state` reference is what `VirtualScroller` uses internally.
 	// It's the "source of truth" on the actual `VirtualScroller` state.
@@ -137,7 +140,7 @@ export default function _useState({
 	// So if `useInsertionEffect()` gets removed from React in some hypothetical future,
 	// it could be replaced with using `ref`s on `ItemComponent`s to measure the DOM element heights.
 	//
-	useInsertionEffect(() => {
+	useInsertionEffectDontMountTwiceInStrictMode(() => {
 		// Update the actual `VirtualScroller` state right before the DOM changes
 		// are going to be applied for the requested state update.
 		//
@@ -160,13 +163,13 @@ export default function _useState({
 		// This hook doesn't do anything at the initial render.
 		//
 		if (isDebug()) {
-			log('React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~')
+			log('React: ~ The requested state is about to be applied in DOM. Setting it as the `VirtualScroller` state. ~')
 			log(getStateSnapshot(_newState))
 		}
 		setState(_newState)
 	}, [_newState])
 
-	useLayoutEffect(() => {
+	useLayoutEffectDontMountTwiceInStrictMode(() => {
 		// Call `onRender()` right after a requested state update has been applied,
 		// and also right after the initial render.
 		onRender()

package/source/react/useStateNoStaleBug.js

@@ -0,0 +1,35 @@
+import { useRef, useState, useCallback } from 'react'
+
+// This hook fixes any weird intermediate inconsistent/invalid/stale state values.
+// https://github.com/facebook/react/issues/25023#issuecomment-1480463544
+export default function useStateNoStaleBug(initialState) {
+  // const latestValidState = useRef(initialState)
+  const latestWrittenState = useRef(initialState)
+  const [_state, _setState] = useState(initialState)
+
+  // Instead of dealing with a potentially out-of-sync (stale) state value,
+  // simply use the correct latest one.
+  const state = latestWrittenState.current
+
+  /*
+  let state
+  if (_state === latestWrittenState.current) {
+    state = _state
+    latestValidState.current = _state
+  } else {
+    // React bug detected: an out-of-sync (stale) state value received.
+    // Ignore the out-of-sync (stale) state value.
+    state = latestValidState.current
+  }
+  */
+
+  const setState = useCallback((newState) => {
+    if (typeof newState === 'function') {
+      throw new Error('Function argument of `setState()` function is not supported by this hook')
+    }
+    latestWrittenState.current = newState
+    _setState(newState)
+  }, [])
+
+  return [state, setState]
+}

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>