virtual-scroller 1.14.0 → 1.15.1

package/website/lib/react.production.min.js

@@ -0,0 +1,31 @@
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+(function(){'use strict';(function(c,x){"object"===typeof exports&&"undefined"!==typeof module?x(exports):"function"===typeof define&&define.amd?define(["exports"],x):(c=c||self,x(c.React={}))})(this,function(c){function x(a){if(null===a||"object"!==typeof a)return null;a=V&&a[V]||a["@@iterator"];return"function"===typeof a?a:null}function w(a,b,e){this.props=a;this.context=b;this.refs=W;this.updater=e||X}function Y(){}function K(a,b,e){this.props=a;this.context=b;this.refs=W;this.updater=e||X}function Z(a,b,
+e){var m,d={},c=null,h=null;if(null!=b)for(m in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(c=""+b.key),b)aa.call(b,m)&&!ba.hasOwnProperty(m)&&(d[m]=b[m]);var l=arguments.length-2;if(1===l)d.children=e;else if(1<l){for(var f=Array(l),k=0;k<l;k++)f[k]=arguments[k+2];d.children=f}if(a&&a.defaultProps)for(m in l=a.defaultProps,l)void 0===d[m]&&(d[m]=l[m]);return{$$typeof:y,type:a,key:c,ref:h,props:d,_owner:L.current}}function oa(a,b){return{$$typeof:y,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}
+function M(a){return"object"===typeof a&&null!==a&&a.$$typeof===y}function pa(a){var b={"=":"=0",":":"=2"};return"$"+a.replace(/[=:]/g,function(a){return b[a]})}function N(a,b){return"object"===typeof a&&null!==a&&null!=a.key?pa(""+a.key):b.toString(36)}function B(a,b,e,m,d){var c=typeof a;if("undefined"===c||"boolean"===c)a=null;var h=!1;if(null===a)h=!0;else switch(c){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case y:case qa:h=!0}}if(h)return h=a,d=d(h),a=""===m?"."+
+N(h,0):m,ca(d)?(e="",null!=a&&(e=a.replace(da,"$&/")+"/"),B(d,b,e,"",function(a){return a})):null!=d&&(M(d)&&(d=oa(d,e+(!d.key||h&&h.key===d.key?"":(""+d.key).replace(da,"$&/")+"/")+a)),b.push(d)),1;h=0;m=""===m?".":m+":";if(ca(a))for(var l=0;l<a.length;l++){c=a[l];var f=m+N(c,l);h+=B(c,b,e,f,d)}else if(f=x(a),"function"===typeof f)for(a=f.call(a),l=0;!(c=a.next()).done;)c=c.value,f=m+N(c,l++),h+=B(c,b,e,f,d);else if("object"===c)throw b=String(a),Error("Objects are not valid as a React child (found: "+
+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h}function C(a,b,e){if(null==a)return a;var c=[],d=0;B(a,c,"","",function(a){return b.call(e,a,d++)});return c}function ra(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b});-1===a._status&&(a._status=
+0,a._result=b)}if(1===a._status)return a._result.default;throw a._result;}function O(a,b){var e=a.length;a.push(b);a:for(;0<e;){var c=e-1>>>1,d=a[c];if(0<D(d,b))a[c]=b,a[e]=d,e=c;else break a}}function p(a){return 0===a.length?null:a[0]}function E(a){if(0===a.length)return null;var b=a[0],e=a.pop();if(e!==b){a[0]=e;a:for(var c=0,d=a.length,k=d>>>1;c<k;){var h=2*(c+1)-1,l=a[h],f=h+1,g=a[f];if(0>D(l,e))f<d&&0>D(g,l)?(a[c]=g,a[f]=e,c=f):(a[c]=l,a[h]=e,c=h);else if(f<d&&0>D(g,e))a[c]=g,a[f]=e,c=f;else break a}}return b}
+function D(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}function P(a){for(var b=p(r);null!==b;){if(null===b.callback)E(r);else if(b.startTime<=a)E(r),b.sortIndex=b.expirationTime,O(q,b);else break;b=p(r)}}function Q(a){z=!1;P(a);if(!u)if(null!==p(q))u=!0,R(S);else{var b=p(r);null!==b&&T(Q,b.startTime-a)}}function S(a,b){u=!1;z&&(z=!1,ea(A),A=-1);F=!0;var c=k;try{P(b);for(n=p(q);null!==n&&(!(n.expirationTime>b)||a&&!fa());){var m=n.callback;if("function"===typeof m){n.callback=null;
+k=n.priorityLevel;var d=m(n.expirationTime<=b);b=v();"function"===typeof d?n.callback=d:n===p(q)&&E(q);P(b)}else E(q);n=p(q)}if(null!==n)var g=!0;else{var h=p(r);null!==h&&T(Q,h.startTime-b);g=!1}return g}finally{n=null,k=c,F=!1}}function fa(){return v()-ha<ia?!1:!0}function R(a){G=a;H||(H=!0,I())}function T(a,b){A=ja(function(){a(v())},b)}function ka(a){throw Error("act(...) is not supported in production builds of React.");}var y=Symbol.for("react.element"),qa=Symbol.for("react.portal"),sa=Symbol.for("react.fragment"),
+ta=Symbol.for("react.strict_mode"),ua=Symbol.for("react.profiler"),va=Symbol.for("react.provider"),wa=Symbol.for("react.context"),xa=Symbol.for("react.forward_ref"),ya=Symbol.for("react.suspense"),za=Symbol.for("react.memo"),Aa=Symbol.for("react.lazy"),V=Symbol.iterator,X={isMounted:function(a){return!1},enqueueForceUpdate:function(a,b,c){},enqueueReplaceState:function(a,b,c,m){},enqueueSetState:function(a,b,c,m){}},la=Object.assign,W={};w.prototype.isReactComponent={};w.prototype.setState=function(a,
+b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState")};w.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};Y.prototype=w.prototype;var t=K.prototype=new Y;t.constructor=K;la(t,w.prototype);t.isPureReactComponent=!0;var ca=Array.isArray,aa=Object.prototype.hasOwnProperty,L={current:null},
+ba={key:!0,ref:!0,__self:!0,__source:!0},da=/\/+/g,g={current:null},J={transition:null};if("object"===typeof performance&&"function"===typeof performance.now){var Ba=performance;var v=function(){return Ba.now()}}else{var ma=Date,Ca=ma.now();v=function(){return ma.now()-Ca}}var q=[],r=[],Da=1,n=null,k=3,F=!1,u=!1,z=!1,ja="function"===typeof setTimeout?setTimeout:null,ea="function"===typeof clearTimeout?clearTimeout:null,na="undefined"!==typeof setImmediate?setImmediate:null;"undefined"!==typeof navigator&&
+void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var H=!1,G=null,A=-1,ia=5,ha=-1,U=function(){if(null!==G){var a=v();ha=a;var b=!0;try{b=G(!0,a)}finally{b?I():(H=!1,G=null)}}else H=!1};if("function"===typeof na)var I=function(){na(U)};else if("undefined"!==typeof MessageChannel){t=new MessageChannel;var Ea=t.port2;t.port1.onmessage=U;I=function(){Ea.postMessage(null)}}else I=function(){ja(U,0)};t={ReactCurrentDispatcher:g,
+ReactCurrentOwner:L,ReactCurrentBatchConfig:J,Scheduler:{__proto__:null,unstable_ImmediatePriority:1,unstable_UserBlockingPriority:2,unstable_NormalPriority:3,unstable_IdlePriority:5,unstable_LowPriority:4,unstable_runWithPriority:function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=k;k=a;try{return b()}finally{k=c}},unstable_next:function(a){switch(k){case 1:case 2:case 3:var b=3;break;default:b=k}var c=k;k=b;try{return a()}finally{k=c}},unstable_scheduleCallback:function(a,
+b,c){var e=v();"object"===typeof c&&null!==c?(c=c.delay,c="number"===typeof c&&0<c?e+c:e):c=e;switch(a){case 1:var d=-1;break;case 2:d=250;break;case 5:d=1073741823;break;case 4:d=1E4;break;default:d=5E3}d=c+d;a={id:Da++,callback:b,priorityLevel:a,startTime:c,expirationTime:d,sortIndex:-1};c>e?(a.sortIndex=c,O(r,a),null===p(q)&&a===p(r)&&(z?(ea(A),A=-1):z=!0,T(Q,c-e))):(a.sortIndex=d,O(q,a),u||F||(u=!0,R(S)));return a},unstable_cancelCallback:function(a){a.callback=null},unstable_wrapCallback:function(a){var b=
+k;return function(){var c=k;k=b;try{return a.apply(this,arguments)}finally{k=c}}},unstable_getCurrentPriorityLevel:function(){return k},unstable_shouldYield:fa,unstable_requestPaint:function(){},unstable_continueExecution:function(){u||F||(u=!0,R(S))},unstable_pauseExecution:function(){},unstable_getFirstCallbackNode:function(){return p(q)},get unstable_now(){return v},unstable_forceFrameRate:function(a){0>a||125<a?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):
+ia=0<a?Math.floor(1E3/a):5},unstable_Profiling:null}};c.Children={map:C,forEach:function(a,b,c){C(a,function(){b.apply(this,arguments)},c)},count:function(a){var b=0;C(a,function(){b++});return b},toArray:function(a){return C(a,function(a){return a})||[]},only:function(a){if(!M(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};c.Component=w;c.Fragment=sa;c.Profiler=ua;c.PureComponent=K;c.StrictMode=ta;c.Suspense=ya;c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=
+t;c.act=ka;c.cloneElement=function(a,b,c){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var e=la({},a.props),d=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=L.current);void 0!==b.key&&(d=""+b.key);if(a.type&&a.type.defaultProps)var l=a.type.defaultProps;for(f in b)aa.call(b,f)&&!ba.hasOwnProperty(f)&&(e[f]=void 0===b[f]&&void 0!==l?l[f]:b[f])}var f=arguments.length-2;if(1===f)e.children=c;else if(1<f){l=
+Array(f);for(var g=0;g<f;g++)l[g]=arguments[g+2];e.children=l}return{$$typeof:y,type:a.type,key:d,ref:k,props:e,_owner:h}};c.createContext=function(a){a={$$typeof:wa,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:va,_context:a};return a.Consumer=a};c.createElement=Z;c.createFactory=function(a){var b=Z.bind(null,a);b.type=a;return b};c.createRef=function(){return{current:null}};c.forwardRef=function(a){return{$$typeof:xa,
+render:a}};c.isValidElement=M;c.lazy=function(a){return{$$typeof:Aa,_payload:{_status:-1,_result:a},_init:ra}};c.memo=function(a,b){return{$$typeof:za,type:a,compare:void 0===b?null:b}};c.startTransition=function(a,b){b=J.transition;J.transition={};try{a()}finally{J.transition=b}};c.unstable_act=ka;c.useCallback=function(a,b){return g.current.useCallback(a,b)};c.useContext=function(a){return g.current.useContext(a)};c.useDebugValue=function(a,b){};c.useDeferredValue=function(a){return g.current.useDeferredValue(a)};
+c.useEffect=function(a,b){return g.current.useEffect(a,b)};c.useId=function(){return g.current.useId()};c.useImperativeHandle=function(a,b,c){return g.current.useImperativeHandle(a,b,c)};c.useInsertionEffect=function(a,b){return g.current.useInsertionEffect(a,b)};c.useLayoutEffect=function(a,b){return g.current.useLayoutEffect(a,b)};c.useMemo=function(a,b){return g.current.useMemo(a,b)};c.useReducer=function(a,b,c){return g.current.useReducer(a,b,c)};c.useRef=function(a){return g.current.useRef(a)};
+c.useState=function(a){return g.current.useState(a)};c.useSyncExternalStore=function(a,b,c){return g.current.useSyncExternalStore(a,b,c)};c.useTransition=function(){return g.current.useTransition()};c.version="18.3.1"});
+})();

package/website/style.base.css

@@ -0,0 +1,33 @@
+body {
+	margin: 0;
+	font-family: sans-serif;
+	font-size: 20px;
+	color: rgb(20, 23, 26);
+	background-color: rgb(230, 236, 240);
+}
+
+h1 {
+	display: flex;
+	align-items: center;
+	margin-left: 40px;
+	margin-right: 40px;
+	font-weight: normal;
+}
+
+p {
+	line-height: 1.35;
+}
+
+
+footer {
+	margin-top: 40px;
+	margin-bottom: 30px;
+	text-align: center;
+	color: #a0a0a0;
+}
+
+.twitter-logo {
+	width: 28px;
+	height: 28px;
+	margin-right: 0.5em;
+}

package/website/style.list.css

@@ -0,0 +1,92 @@
+.container {
+	width: 100%;
+	max-width: 720px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+/* This `border-top` for `:first-child` didn't actually work
+   for restoring scroll position after prepending items via `.updateItems()`. */
+/*
+.list-item:first-child {
+	border-top: 2px solid rgb(230, 236, 240);
+}
+*/
+/* Using `border-top` on `#list` instead. */
+#list {
+	border-top: 2px solid rgb(230, 236, 240);
+}
+
+.list-item {
+	padding: 40px;
+	border-bottom: 2px solid rgb(230, 236, 240);
+	background-color: white;
+}
+
+.list-item a {
+	font-weight: bold;
+	text-decoration: none;
+	color: rgba(29,161,242,1.00);
+}
+
+.list-item time {
+	color: #a0a0a0;
+	font-size: 85%;
+}
+
+.list-item time:before {
+	display: inline-block;
+	content: '·';
+	margin-left: 0.4em;
+	margin-right: 0.4em;
+}
+
+.list-item p {
+	margin-top: 20px;
+	margin-bottom: 0;
+}
+
+/* For testing inter-item spacing. */
+/*
+.list-item {
+	margin-top: 40px;
+	background: #f9f9f9;
+}
+.list-item:first-child {
+	margin-top: 0px;
+}
+*/
+
+.load-items-button {
+	/* Button style reset. */
+	margin: 0;
+	padding: 0;
+	white-space: nowrap;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	border: none;
+	background: none;
+	cursor: pointer;
+	font-size: inherit;
+	font-family: inherit;
+	font-weight: inherit;
+	font-style: inherit;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	outline: none;
+	/* Styles. */
+	display: block;
+	width: 100%;
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+	color: rgb(29, 161, 242);
+}
+
+.load-items-button:hover,
+.load-items-button:focus {
+	/*background-color: rgb(245, 248, 250);*/
+	background-color: rgb(235, 241, 245);
+}

package/website/style.list.grid.css

@@ -0,0 +1,23 @@
+.container {
+	max-width: 1280px;
+}
+
+#list {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.list-item {
+	flex-basis: 33.333333%;
+	box-sizing: border-box;
+	border: 2px solid rgb(230, 236, 240);
+}
+
+@media screen and (max-width: 1280px) {
+	.container {
+		max-width: 720px;
+	}
+	.list-item {
+		flex-basis: 100%;
+	}
+}

package/bundle/index-grid.html

@@ -1,216 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<!-- Fix encoding. -->
-		<meta charset="utf-8">
-		<!-- Fix document width for mobile devices. -->
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-		<title>React VirtualScroller Demo (Grid Layout)</title>
-
-		<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="./messages.js"></script>
-
-		<link rel="stylesheet" href="./style.css"/>
-
-		<style>
-			#messages {
-				display: flex;
-				flex-wrap: wrap;
-			}
-			.feed-message {
-				flex-basis: 33.333333%;
-				box-sizing: border-box;
-    		border: 2px solid rgb(230, 236, 240);
-			}
-			.container {
-				max-width: 1280px;
-			}
-			@media screen and (max-width: 1280px) {
-				.container {
-					max-width: 720px;
-				}
-				.feed-message {
-					flex-basis: 100%;
-				}
-			}
-		</style>
-	</head>
-
-	<body>
-		<!-- http://tholman.com/github-corners/ -->
-		<a title="Go to GitHub repo" href="https://gitlab.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>
-
-		<div id="root"></div>
-
-		<script>
-			// Enable debug output to console.
-			window.VirtualScrollerDebug = true
-			// Whether "dynamically loaded list" mode is enabled.
-			window.dynamic = new URL(window.location).searchParams.get('dynamic')
-		</script>
-
-		<script type="text/babel">
-			const BATCH_SIZE = 6
-			const COLUMNS_COUNT = 3
-
-			function getColumnsCount(container) {
-				if (container.getWidth() > 1280) {
-					return COLUMNS_COUNT
-				}
-				return 1
-			}
-
-			class FeedMessages extends React.Component {
-				constructor(props) {
-					super(props)
-					const { messages } = this.props
-					if (window.dynamic) {
-						const fromIndex = Math.floor((messages.length - BATCH_SIZE) / 2 / COLUMNS_COUNT) * COLUMNS_COUNT
-						const toIndex = fromIndex + BATCH_SIZE - 1
-						this.state = {
-							fromIndex,
-							toIndex,
-							messages: messages.slice(fromIndex, toIndex + 1)
-						}
-					} else {
-						this.state = {
-							fromIndex: 0,
-							toIndex: messages.length,
-							messages
-						}
-					}
-				}
-
-				onShowPrevious = () => {
-					const { messages } = this.props
-					let { fromIndex } = this.state
-					const { toIndex } = this.state
-					fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
-					this.setState({
-						fromIndex,
-						messages: messages.slice(fromIndex, toIndex + 1)
-					})
-				}
-
-				onShowNext = () => {
-					const { messages } = this.props
-					const { fromIndex } = this.state
-					let { toIndex } = this.state
-					toIndex = Math.min(toIndex + BATCH_SIZE, messages.length - 1)
-					this.setState({
-						toIndex,
-						messages: messages.slice(fromIndex, toIndex + 1)
-					})
-				}
-
-				render() {
-					const {
-						fromIndex,
-						toIndex,
-						messages
-					} = this.state
-					return (
-						<React.Fragment>
-							{window.dynamic && fromIndex > 0 &&
-								<button
-									type="button"
-									onClick={this.onShowPrevious}
-									className="load-items-button">
-									Show previous
-								</button>
-							}
-							<VirtualScroller
-								id="messages"
-								items={messages}
-								itemComponent={Message}
-								preserveScrollPositionOnPrependItems
-								getColumnsCount={getColumnsCount}/>
-							{window.dynamic && toIndex < this.props.messages.length - 1 &&
-								<button
-									type="button"
-									onClick={this.onShowNext}
-									className="load-items-button">
-									Show next
-								</button>
-							}
-						</React.Fragment>
-					)
-				}
-			}
-
-			const message = PropTypes.shape({
-				username: PropTypes.string.isRequired,
-				date: PropTypes.instanceOf(Date).isRequired,
-				text: PropTypes.string.isRequired
-			})
-
-			FeedMessages.propTypes = {
-				messages: PropTypes.arrayOf(message).isRequired
-			}
-
-			function Message(props) {
-				const { children: message } = props
-				const {
-					username,
-					date,
-					text
-				} = message
-				return (
-					<article className="feed-message">
-						<a target="_blank" href={`https://twitter.com/${username}`}>
-							@{username}
-						</a>
-						<time dateTime={date.toISOString()}>
-							{date.getMonth() + 1}/{date.getDate()}/{date.getFullYear()}
-						</time>
-						<p>
-							{text}
-						</p>
-					</article>
-				)
-			}
-
-			Message.propTypes = {
-				children: message.isRequired
-			}
-
-			class Feed extends React.Component {
-				render() {
-					return (
-						<section className="container">
-							<h1>
-								<TwitterLogo/>
-								Latest Tweets on #politics
-							</h1>
-							<FeedMessages
-								messages={messages}/>
-							<footer>
-								© Twitter Inc., 2019
-							</footer>
-						</section>
-					)
-				}
-			}
-
-			function TwitterLogo() {
-				return (
-					<svg className="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-						<path fill="#00AAEC" fillRule="evenodd" d="M128 23.294a51.28 51.28 0 0 1-15.079 4.237c5.424-3.328 9.587-8.606 11.548-14.892a51.718 51.718 0 0 1-16.687 6.526c-4.778-5.231-11.608-8.498-19.166-8.498-14.493 0-26.251 12.057-26.251 26.927 0 2.111.225 4.16.676 6.133-21.824-1.126-41.17-11.835-54.131-28.145a27.422 27.422 0 0 0-3.554 13.552c0 9.338 4.636 17.581 11.683 22.412-4.297-.131-8.355-1.356-11.901-3.359v.331c0 13.051 9.053 23.937 21.074 26.403-2.201.632-4.523.948-6.92.948-1.69 0-3.343-.162-4.944-.478 3.343 10.694 13.035 18.483 24.53 18.691-8.986 7.227-20.315 11.533-32.614 11.533-2.119 0-4.215-.123-6.266-.37 11.623 7.627 25.432 12.088 40.255 12.088 48.309 0 74.717-41.026 74.717-76.612a89.39 89.39 0 0 0-.068-3.49A53.862 53.862 0 0 0 128 23.294" clipRule="evenodd"/>
-					</svg>
-				)
-			}
-
-			ReactDOM.render(
-				<Feed/>,
-				document.getElementById('root')
-			)
-		</script>
-	</body>
-</html>

package/bundle/index-scrollableContainer.html

@@ -1,208 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<!-- Fix encoding. -->
-		<meta charset="utf-8">
-		<!-- Fix document width for mobile devices. -->
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-		<title>React VirtualScroller Demo (Scrollable Container)</title>
-
-		<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="./messages.js"></script>
-
-		<link rel="stylesheet" href="./style.css"/>
-	</head>
-
-	<body>
-		<!-- http://tholman.com/github-corners/ -->
-		<a title="Go to GitHub repo" href="https://gitlab.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>
-
-		<div id="root"></div>
-
-		<script>
-			// Enable debug output to console.
-			window.VirtualScrollerDebug = true
-			// Whether "dynamically loaded list" mode is enabled.
-			window.dynamic = new URL(window.location).searchParams.get('dynamic')
-		</script>
-
-		<script type="text/babel">
-			const BATCH_SIZE = 6
-
-			const SCROLLABLE_CONTAINER_STYLE = {
-        marginTop: '20vh',
-        maxHeight: '60vh',
-        overflow: 'auto'
-			}
-
-			class FeedMessages extends React.Component {
-				constructor(props) {
-					super(props)
-					const { messages } = this.props
-					if (window.dynamic) {
-						const fromIndex = Math.floor(messages.length / 2 - BATCH_SIZE / 2)
-						const toIndex = fromIndex + BATCH_SIZE - 1
-						this.state = {
-							fromIndex,
-							toIndex,
-							messages: messages.slice(fromIndex, toIndex + 1)
-						}
-					} else {
-						this.state = {
-							fromIndex: 0,
-							toIndex: messages.length,
-							messages
-						}
-					}
-				}
-
-				onShowPrevious = () => {
-					const { messages } = this.props
-					let { fromIndex } = this.state
-					const { toIndex } = this.state
-					fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
-					this.setState({
-						fromIndex,
-						messages: messages.slice(fromIndex, toIndex + 1)
-					})
-				}
-
-				onShowNext = () => {
-					const { messages } = this.props
-					const { fromIndex } = this.state
-					let { toIndex } = this.state
-					toIndex = Math.min(toIndex + BATCH_SIZE, messages.length - 1)
-					this.setState({
-						toIndex,
-						messages: messages.slice(fromIndex, toIndex + 1)
-					})
-				}
-
-				getScrollableContainer = () => {
-					return this.scrollableContainer
-				}
-
-				setScrollableContainer = (node) => {
-					this.scrollableContainer = node
-				}
-
-				componentDidMount() {
-					this.setState({ isMounted: true })
-				}
-
-				render() {
-					const {
-						fromIndex,
-						toIndex,
-						messages,
-						isMounted
-					} = this.state
-					return (
-						<div
-							ref={this.setScrollableContainer}
-							style={SCROLLABLE_CONTAINER_STYLE}>
-							{window.dynamic && fromIndex > 0 &&
-								<button
-									type="button"
-									onClick={this.onShowPrevious}
-									className="load-items-button">
-									Show previous
-								</button>
-							}
-							{isMounted &&
-								<VirtualScroller
-									id="messages"
-									items={messages}
-									itemComponent={Message}
-									preserveScrollPosition
-									scrollableContainer={this.scrollableContainer}/>
-							}
-							{window.dynamic && toIndex < this.props.messages.length - 1 &&
-								<button
-									type="button"
-									onClick={this.onShowNext}
-									className="load-items-button">
-									Show next
-								</button>
-							}
-						</div>
-					)
-				}
-			}
-
-			const message = PropTypes.shape({
-				username: PropTypes.string.isRequired,
-				date: PropTypes.instanceOf(Date).isRequired,
-				text: PropTypes.string.isRequired
-			})
-
-			FeedMessages.propTypes = {
-				messages: PropTypes.arrayOf(message).isRequired
-			}
-
-			function Message(props) {
-				const { children: message } = props
-				const {
-					username,
-					date,
-					text
-				} = message
-				return (
-					<article className="feed-message">
-						<a target="_blank" href={`https://twitter.com/${username}`}>
-							@{username}
-						</a>
-						<time dateTime={date.toISOString()}>
-							{date.getMonth() + 1}/{date.getDate()}/{date.getFullYear()}
-						</time>
-						<p>
-							{text}
-						</p>
-					</article>
-				)
-			}
-
-			Message.propTypes = {
-				children: message.isRequired
-			}
-
-			class Feed extends React.Component {
-				render() {
-					return (
-						<section className="container">
-							<h1>
-								<TwitterLogo/>
-								Latest Tweets on #politics
-							</h1>
-							<FeedMessages
-								messages={messages}/>
-							<footer>
-								© Twitter Inc., 2019
-							</footer>
-						</section>
-					)
-				}
-			}
-
-			function TwitterLogo() {
-				return (
-					<svg className="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-						<path fill="#00AAEC" fillRule="evenodd" d="M128 23.294a51.28 51.28 0 0 1-15.079 4.237c5.424-3.328 9.587-8.606 11.548-14.892a51.718 51.718 0 0 1-16.687 6.526c-4.778-5.231-11.608-8.498-19.166-8.498-14.493 0-26.251 12.057-26.251 26.927 0 2.111.225 4.16.676 6.133-21.824-1.126-41.17-11.835-54.131-28.145a27.422 27.422 0 0 0-3.554 13.552c0 9.338 4.636 17.581 11.683 22.412-4.297-.131-8.355-1.356-11.901-3.359v.331c0 13.051 9.053 23.937 21.074 26.403-2.201.632-4.523.948-6.92.948-1.69 0-3.343-.162-4.944-.478 3.343 10.694 13.035 18.483 24.53 18.691-8.986 7.227-20.315 11.533-32.614 11.533-2.119 0-4.215-.123-6.266-.37 11.623 7.627 25.432 12.088 40.255 12.088 48.309 0 74.717-41.026 74.717-76.612a89.39 89.39 0 0 0-.068-3.49A53.862 53.862 0 0 0 128 23.294" clipRule="evenodd"/>
-					</svg>
-				)
-			}
-
-			ReactDOM.render(
-				<Feed/>,
-				document.getElementById('root')
-			)
-		</script>
-	</body>
-</html>