virtual-scroller - npm Package Compare versions

Comparing version 1.4.2 to 1.5.0

bundle/virtual-scroller-dom.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};for(var t,n=(function(t){(function(){var e,n,i,o,r,s;"undefined"!=typeof performance&&null!==performance&&performance.now?t.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(t.exports=function(){return(e()-r)/1e6},n=process.hrtime,o=(e=function(){var e;return 1e9*(e=n())[0]+e[1]})(),s=1e9*process.uptime(),r=o-s):Date.now?(t.exports=function(){return Date.now()-i},i=Date.now()):(t.exports=function(){return(new Date).getTime()-i},i=(new Date).getTime())}).call(e)}(t={exports:{}},t.exports),t.exports),i="undefined"==typeof window?e:window,o=["moz","webkit"],r="AnimationFrame",s=i["request"+r],a=i["cancel"+r]||i["cancelRequest"+r],l=0;!s&&l<o.length;l++)s=i[o[l]+"Request"+r],a=i[o[l]+"Cancel"+r]||i[o[l]+"CancelRequest"+r];if(!s||!a){var u=0,h=0,c=[];s=function(e){if(0===c.length){var t=n(),i=Math.max(0,1e3/60-(t-u));u=i+t,setTimeout(function(){var e=c.slice(0);c.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(u)}catch(e){setTimeout(function(){throw e},0)}},Math.round(i))}return c.push({handle:++h,callback:e,cancelled:!1}),h},a=function(e){for(var t=0;t<c.length;t++)c[t].handle===e&&(c[t].cancelled=!0)}}var d=function(e){return s.call(i,e)};d.cancel=function(){a.apply(i,arguments)},d.polyfill=function(e){e||(e=i),e.requestAnimationFrame=s,e.cancelAnimationFrame=a};var m=d.cancel;function f(e,t){var n=Date.now(),i=d(function o(){Date.now()-n>=t?e():i=d(o)});return{clear:function(){return m(i)}}}function g(e){e&&e.clear()}function I(e){return(I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t){return!t||"object"!==I(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function v(e){return(v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function S(e,t){return(S=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function b(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function w(e,t,n){return t&&b(e.prototype,t),n&&b(e,n),e}var x=function(){function e(t){y(this,e),this.element=t}return w(e,[{key:"getScrollY",value:function(){return this.element.scrollTop}},{key:"scrollTo",value:function(e,t){this.element.scrollTo(e,t)}},{key:"getWidth",value:function(){return this.element.offsetWidth}},{key:"getHeight",value:function(){return this.element.offsetHeight}},{key:"getContentHeight",value:function(){return this.element.scrollHeight}},{key:"getTopOffset",value:function(e){var t=this.element.getBoundingClientRect().top,n=this.element.clientTop;return e.getBoundingClientRect().top-t+this.getScrollY()-n}},{key:"addScrollListener",value:function(e){var t=this;return this.element.addEventListener("scroll",e),function(){return t.element.removeEventListener("scroll",e)}}},{key:"onResize",value:function(e){var t,n=this;if("undefined"!=typeof ResizeObserver){var i=new ResizeObserver(function(t){var n=t,i=Array.isArray(n),o=0;for(n=i?n:n[Symbol.iterator]();;){if(i){if(o>=n.length)break;n[o++]}else{if((o=n.next()).done)break;o.value}return e()}});i.observe(this.element),t=function(){return i.unobserve(n.element)}}var o=(new C).onResize(e);return function(){t&&t(),o()}}}]),e}(),C=function(e){function t(){return y(this,t),p(this,v(t).call(this,window))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&S(e,t)}(t,x),w(t,[{key:"getScrollY",value:function(){return window.pageYOffset}},{key:"getWidth",value:function(){return window.innerWidth}},{key:"getHeight",value:function(){return window.innerHeight}},{key:"getContentHeight",value:function(){return document.documentElement.scrollHeight}},{key:"getTopOffset",value:function(e){var t=document.clientTop||document.body.clientTop||0;return e.getBoundingClientRect().top+this.getScrollY()-t}},{key:"onResize",value:function(e){return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}}]),t}();function H(e){return e.toFixed(2)+"px"}var k="[virtual-scroller] It looks like you're using Internet Explorer which doesn't support CSS variables required for a <tbody/> container. VirtualScroller has been switched into \"bypass\" mode (render all items). See: https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1";function O(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function A(){if(M()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,O(["[virtual-scroller]"].concat(n)))}}function M(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function P(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var T=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.reset()}var t,n,i;return t=e,(n=[{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onInitItemHeights",value:function(){this.reset();for(var e=0;e<this.getState().itemHeights.length;){if(null==this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),o=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&A("Measure item spacing",o),o}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,o=this.lastMeasuredItemIndex,r=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this.set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,r||(this.firstMeasuredItemIndex=s,r=!0)),(void 0===o||s>o)&&(void 0!==o&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&P(t.prototype,n),i&&P(t,i),e}();function R(e){return(R="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var L=Object.prototype.hasOwnProperty;function B(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function U(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){j(e,t,n[t])})}return e}function E(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function j(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var z=250,N=100,V=function(){function e(t,n){var i,o,r,s=this,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),j(this,"updateLayout",function(){return s.onUpdateShownItemIndexes({reason:"manual"})}),j(this,"onScroll",function(){return s.onUpdateShownItemIndexes({reason:"scroll"})}),j(this,"restoreScrollPosition",function(){var e=s.getState().scrollY;void 0!==e&&s.scrollTo(0,e)}),j(this,"updateScrollPosition",function(){return s.getState().scrollY=s.getScrollY()}),j(this,"layout",function(){return s.updateLayout()}),j(this,"onResize",(i=function(e){s.isMounted&&s.shouldUpdateLayoutOnScrollableContainerResize(e)&&(A("~ Scrollable container size changed, re-measure item heights. ~"),s.setState(s.getInitialLayoutState(),function(){s.onInitialRender("resize")}))},o=z,function(){for(var e=this,t=arguments.length,n=new Array(t),s=0;s<t;s++)n[s]=arguments[s];clearTimeout(r),r=setTimeout(function(){return i.apply(e,n)},o)})),j(this,"updateShownItemIndexes",function(e){var t=s.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,o=t.redoLayoutAfterRender,r=s.getBeforeItemsHeight(n,i),a=s.getAfterItemsHeight(n,i);s.updateWillBeHiddenItemHeightsAndState(n,i),A("~ Layout results "+(s.bypass?"(bypass) ":"")+"~"),A("First shown item index",n),A("Last shown item index",i),A("Before items height",r),A("After items height (actual or estimated)",a),A("Average item height (calculated on previous render)",s.itemHeights.getAverage()),M()&&(A("Item heights",s.getState().itemHeights.slice()),A("Item states",s.getState().itemStates.slice())),o&&A("Schedule a re-layout after the upcoming rerender"),void 0!==s.firstSeenItemIndex&&(n>s.lastSeenItemIndex+1||i<s.firstSeenItemIndex-1)&&(s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.onBeforeShowItems(n,i),s.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:r,afterItemsHeight:a},function(){return e(o)})}),j(this,"updateShownItemIndexesRecursive",function(){s.updateShownItemIndexes(function(e){e?f(function(){s.isMounted?s.updateShownItemIndexesRecursive():s.onDoneUpdatingItemIndexes()},0):s.onDoneUpdatingItemIndexes()})}),j(this,"restoreScroll",function(){var e=s.restoreScrollAfterPrepend,t=e.index,n=e.visibleAreaTop;s.restoreScrollAfterPrepend=void 0;var i=s.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(A("Restore scroll position: scroll by",i),s.scrollTo(0,s.getScrollY()+i))}),j(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==s.getItemsCount()&&!s.isUpdatingItemIndexes){if(g(s.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getScrollY()<s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getState().firstShownItemIndex>0||void 0!==s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getScrollY()+s.scrollableContainer.getHeight()>s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getState().lastShownItemIndex<s.getItemsCount()-1;if(A(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return s.onUserStopsScrollingTimeout=f(s.onUserStoppedScrolling,N)}A("~ Update layout (on ".concat(t,") ~")),s.isUpdatingItemIndexes=!0,s.updateShownItemIndexesRecursive()}}),j(this,"onUserStoppedScrolling",function(){s.isMounted&&s.updateLayout("stopped scrolling")});var l=a.getState,u=a.setState,h=a.onStateChange,c=a.customState,d=a.preserveScrollPositionAtBottomOnMount,m=a.shouldUpdateLayoutOnWindowResize,I=a.measureItemsBatchSize,p=a.getScrollableContainer,v=a.tbody,S=a.bypass,y=a.estimatedItemHeight,b=a.onItemFirstRender,w=a.scrollableContainer,H=a.state;A("~ Initialize ~"),H&&(n=H.items),!w&&p&&(w=p()),w?this.scrollableContainer=new x(w):"undefined"!=typeof window&&(this.scrollableContainer=new C),v&&(A("~ <tbody/> detected ~"),this.tbody=!0,"undefined"!=typeof window&&window.document.documentMode&&(A("~ <tbody/> not supported ~"),"undefined"!=typeof window?setTimeout(function(){throw new Error(k)},0):console.error(k),S=!0)),S&&A('~ "bypass" mode ~'),this.bypass=S,this.initialItems=n,this.estimatedItemHeight=y,this._shouldUpdateLayoutOnWindowResize=m,this.measureItemsBatchSize=void 0===I?50:I,b&&(this.onItemFirstRender=b),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),u?(this.getState=l,this.setState=u):(this.getState=function(){return s.state},this.setState=function(e,t){var n=s.state;s.state=U({},n,e),function(e,t){if(B(e,t))return!0;if("object"!==R(e)||null===e||"object"!==R(t)||null===t)return!1;var n=Object.keys(e),i=Object.keys(t);if(n.length!==i.length)return!1;for(var o=0;o<n.length;o++)if(!L.call(t,n[o])||!B(e[n[o]],t[n[o]]))return!1;return!0}(s.state,n)||(h&&h(s.state,n),s.isMounted&&s.onUpdate(n)),t&&t()}),H&&A("Initial state (passed)",H),this.getContainerNode=t,this.itemHeights=new T(t,this.getState),this.scrollableContainer&&d&&(this.preserveScrollPositionAtBottomOnMount={scrollableContainerContentHeight:this.scrollableContainer.getContentHeight()}),this.setState(H||this.getInitialState(c),function(){s.itemHeights.onInitItemHeights()}),A("Items count",n.length),y&&A("Estimated item height",y)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=U({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return A("Initial state (autogenerated)",n),A("First shown item index",n.firstShownItemIndex),A("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems.length;return n>0&&(e=0,t=this.getLastShownItemIndex(e,n)),this.preserveScrollPositionAtBottomOnMount&&(e=0,t=n-1),this.onBeforeShowItems(e,t),{itemHeights:new Array(n),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return this.scrollableContainer?this.getEstimatedItemsCount(2*this.getMargin()+this.scrollableContainer.getHeight()):1}},{key:"getLastShownItemIndex",value:function(e,t){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return this.scrollableContainer.getHeight()}},{key:"onBeforeShowItems",value:function(e,t){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var n=e;n<=t;)this.onItemFirstRender(n),n++;this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}else{if(e<this.firstSeenItemIndex){for(var i=e,o=Math.min(t,this.firstSeenItemIndex-1),r=i;r<=o;)this.onItemFirstRender(r),r++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var s=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=s;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.isMounted=!0,this.onInitialRender("mount"),this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.restoreScrollPosition(),this.updateScrollPosition(),this.removeScrollPositionListener=this.scrollableContainer.addScrollListener(this.updateScrollPosition),this.bypass||(this.removeScrollListener=this.scrollableContainer.addScrollListener(this.onScroll),this.scrollableContainerUnlistenResize=this.scrollableContainer.onResize(this.onResize)),this.tbody&&(!function(e){e.classList.add("VirtualScroller");var t=document.getElementById("VirtualScrollerStyle");t||((t=document.createElement("style")).id="VirtualScrollerStyle",t.innerText="\n\t\t\ttbody.VirtualScroller:before {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingTop);\n\t\t\t}\n\t\t\ttbody.VirtualScroller:after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingBottom);\n\t\t\t}\n\t\t".replace(/[\n\t]/g,""),document.head.appendChild(t))}(this.getContainerNode()),this.updateTbodyPadding())}},{key:"onInitialRender",value:function(e){var t=this.getState(),n=t.firstShownItemIndex,i=t.lastShownItemIndex;A("~ Rendered (initial) ~"),this.getItemsCount()>0&&this.updateItemHeights(n,i),this.preserveScrollPositionAtBottomOnMount?this.scrollTo(0,this.getScrollY()+(this.scrollableContainer.getHeight()-this.preserveScrollPositionAtBottomOnMount.scrollableContainerContentHeight)):this.onUpdateShownItemIndexes({reason:e})}},{key:"scrollTo",value:function(e,t){this.scrollableContainer.scrollTo(e,t)}},{key:"getScrollY",value:function(){return this.scrollableContainer.getScrollY()}},{key:"getVisibleAreaBounds",value:function(){var e=this.getScrollY();return{top:e,bottom:e+this.scrollableContainer.getHeight()}}},{key:"getHeight",value:function(){return this.getContainerNode().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerNode())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1}var t=this.scrollableContainerWidth,n=this.scrollableContainerHeight;return this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.scrollableContainerWidth!==t||this.scrollableContainerHeight!==n&&(this.onUpdateShownItemIndexes({reason:"resize"}),!1)}},{key:"onUnmount",value:function(){this.isMounted=!1,this.removeScrollPositionListener(),this.bypass||(this.removeScrollListener(),this.scrollableContainerUnlistenResize(),g(this.onUserStopsScrollingTimeout),g(this.watchContainerElementCoordinatesTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,o=t.lastShownItemIndex;A("~ Rendered ~"),i===e.firstShownItemIndex&&o===e.lastShownItemIndex&&n===e.items||(this.updateItemHeights(i,o),this.tbody&&this.updateTbodyPadding())}},{key:"updateTbodyPadding",value:function(){var e=this.getState(),t=e.beforeItemsHeight,n=e.afterItemsHeight;!function(e,t,n){e.style.setProperty("--VirtualScroller-paddingTop",H(t)),e.style.setProperty("--VirtualScroller-paddingBottom",H(n))}(this.getContainerNode(),t,n)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(A("~ Measure item heights ~"),this.itemHeights.update(e,t,n),M()&&A("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){M()&&(A("~ Item state changed ~"),A("Item",e),A("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),A("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(A("~ Item height changed ~"),A("Item",e),A("Previous height",n),A("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=this.getTopOffset(),n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,o,r,s=0,a=!1,l=0;l<this.getItemsCount();){var u=this.itemHeights.get(l);if(void 0===u){A("Item index ".concat(l,' lies within the visible area or its "margins", but its height hasn\'t been measured yet. Mark the item as "shown", render the list, measure the item\'s height and redo the layout.')),r=l,void 0===i&&(i=l);var h=t-(n+s);o=Math.min(l+(this.getEstimatedItemsCount(h)-1),this.getItemsCount()-1),a=!0;break}if(s+=u,void 0===i&&n+s>e&&(A("First visible item index",l),i=l),l<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){A("Last visible item index",l),void 0!==i&&(o=l);break}l++}return void 0!==i&&void 0===o&&A("Last item index (is fully visible)",o=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(o<this.restoreScrollAfterPrepend.index&&(o=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(o=Math.min(o,r+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:o,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(n+i>e&&n<t){var o=this.getVisibleItemIndexes(e,t,n);if(void 0!==o.firstShownItemIndex)return o;A("Off-screen")}else A("Off-screen")}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementCoordinates",value:function(){var e=this,t=Date.now();!function n(){e.isMounted&&(void 0!==e.topOffset&&e.getTopOffset()!==e.topOffset&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementCoordinatesTimer=f(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=this.getTopOffset();void 0===this.topOffset&&this.watchContainerElementCoordinates(),this.topOffset=e;var t=this.getVisibleAreaBounds(),n=t.top,i=t.bottom;return this.latestLayoutVisibleAreaTopAfterIncludingMargin=n-this.getMargin(),this.latestLayoutVisibleAreaBottomAfterIncludingMargin=i+this.getMargin(),this.getItemIndexes(n-this.getMargin(),i+this.getMargin(),e,this.getHeight())||this.getOffscreenListShownItemIndexes()}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,visibleAreaTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=this.getState().items,o=this.getState(),r=o.firstShownItemIndex,s=o.lastShownItemIndex,a=o.beforeItemsHeight,l=o.afterItemsHeight,u=o.itemStates,h=o.itemHeights;o.itemSpacing;A("~ Update items ~");var c=function(e,t){var n=-1,i=-1;e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1);if(n>=0&&i>=0)return{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)};return{prependedItemsCount:-1,appendedItemsCount:-1}}(i,e),d=c.prependedItemsCount,m=c.appendedItemsCount,f=d>0||m>0;f?(d>0&&(A("Prepended items count",d),h=new Array(d).concat(h),this.itemHeights.onPrepend(d),u&&(u=new Array(d).concat(u)),(n.preserveScrollPositionOnPrependItems||n.preserveScrollPosition)&&this.captureScroll(i,e,d)),m>0&&(A("Appended items count",m),h=h.concat(new Array(m)),u&&(u=u.concat(new Array(m)))),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=d,this.lastSeenItemIndex+=d),r+=d,s+=d,a+=this.itemHeights.getAverage()*d,l+=this.itemHeights.getAverage()*m):(A("Non-incremental items update"),A("Previous items",i),A("New items",e),h=new Array(e.length),u=new Array(e.length),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),a=0,l=0),A("First shown item index",r),A("Last shown item index",s),A("Before items height",a),A("After items height (actual or estimated)",l),this.onBeforeShowItems(r,s),this.setState(U({},void 0,{items:e,itemStates:u,itemHeights:h,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:a,afterItemsHeight:l}),function(){f||t.itemHeights.onInitItemHeights(),t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&E(t.prototype,n),i&&E(t,i),e}();function D(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Y(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function W(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}return function(){function e(t,n,i){var o=this,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),W(this,"onStateChange",function(e,t){var n=e.items,i=e.firstShownItemIndex,r=e.lastShownItemIndex,s=e.beforeItemsHeight,a=e.afterItemsHeight;A("~ On state change ~"),A("Previous state",t),A("New state",e),o.tbody||(o.container.style.paddingTop=H(s),o.container.style.paddingBottom=H(a));var l=t&&n===t.items&&t.items.length>0;if(l){A("Incremental rerender");for(var u=t.lastShownItemIndex;u>=t.firstShownItemIndex;)u>=i&&u<=r||(A("Remove item index",u),o.unmountItem(o.container.childNodes[u-t.firstShownItemIndex])),u--}else for(A("Rerender from scratch");o.container.firstChild;)o.unmountItem(o.container.firstChild);for(var h=l,c=h&&o.container.firstChild,d=i;d<=r;){if(l&&d>=t.firstShownItemIndex&&d<=t.lastShownItemIndex)h&&(h=!1);else{var m=o.renderItem(n[d]);h?(A("Prepend item index",d),o.container.insertBefore(m,c)):(A("Append item index",d),o.container.appendChild(m))}d++}}),W(this,"onUnmount",function(){o.virtualScroller.onUnmount()}),this.container=t,this.renderItem=i;var s=r.onMount,a=r.onItemUnmount,l=D(r,["onMount","onItemUnmount"]);this.onItemUnmount=a,this.tbody="TBODY"===this.container.tagName,this.virtualScroller=new V(function(){return o.container},n,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){W(e,t,n[t])})}return e}({},l,{tbody:this.tbody,onStateChange:this.onStateChange})),s&&s(),this.virtualScroller.onMount()}var t,n,i;return t=e,(n=[{key:"unmountItem",value:function(e){this.container.removeChild(e),this.onItemUnmount&&this.onItemUnmount(e)}},{key:"onItemHeightChange",value:function(e){this.virtualScroller.onItemHeightChange(e)}},{key:"updateItems",value:function(e,t){this.setItems(e,t)}},{key:"setItems",value:function(e,t){this.virtualScroller.setItems(e,t)}},{key:"getItemCoordinates",value:function(e){return this.virtualScroller.getItemCoordinates(e)}}])&&Y(t.prototype,n),i&&Y(t,i),e}()});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};for(var t,n=(function(t){(function(){var e,n,i,r,o,s;"undefined"!=typeof performance&&null!==performance&&performance.now?t.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(t.exports=function(){return(e()-o)/1e6},n=process.hrtime,r=(e=function(){var e;return 1e9*(e=n())[0]+e[1]})(),s=1e9*process.uptime(),o=r-s):Date.now?(t.exports=function(){return Date.now()-i},i=Date.now()):(t.exports=function(){return(new Date).getTime()-i},i=(new Date).getTime())}).call(e)}(t={exports:{}},t.exports),t.exports),i="undefined"==typeof window?e:window,r=["moz","webkit"],o="AnimationFrame",s=i["request"+o],a=i["cancel"+o]||i["cancelRequest"+o],l=0;!s&&l<r.length;l++)s=i[r[l]+"Request"+o],a=i[r[l]+"Cancel"+o]||i[r[l]+"CancelRequest"+o];if(!s||!a){var u=0,h=0,d=[];s=function(e){if(0===d.length){var t=n(),i=Math.max(0,1e3/60-(t-u));u=i+t,setTimeout(function(){var e=d.slice(0);d.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(u)}catch(e){setTimeout(function(){throw e},0)}},Math.round(i))}return d.push({handle:++h,callback:e,cancelled:!1}),h},a=function(e){for(var t=0;t<d.length;t++)d[t].handle===e&&(d[t].cancelled=!0)}}var c=function(e){return s.call(i,e)};c.cancel=function(){a.apply(i,arguments)},c.polyfill=function(e){e||(e=i),e.requestAnimationFrame=s,e.cancelAnimationFrame=a};var m=c.cancel;function f(e,t){var n=Date.now(),i=c(function r(){Date.now()-n>=t?e():i=c(r)});return{clear:function(){return m(i)}}}function g(e){e&&e.clear()}function I(e){return(I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t){return!t||"object"!==I(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function v(e){return(v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function S(e,t){return(S=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function b(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function w(e,t,n){return t&&b(e.prototype,t),n&&b(e,n),e}var x=function(){function e(t){y(this,e),this.element=t}return w(e,[{key:"getScrollY",value:function(){return this.element.scrollTop}},{key:"scrollTo",value:function(e,t){this.element.scrollTo(e,t)}},{key:"getWidth",value:function(){return this.element.offsetWidth}},{key:"getHeight",value:function(){return this.element.offsetHeight}},{key:"getContentHeight",value:function(){return this.element.scrollHeight}},{key:"getTopOffset",value:function(e){var t=this.element.getBoundingClientRect().top,n=this.element.clientTop;return e.getBoundingClientRect().top-t+this.getScrollY()-n}},{key:"addScrollListener",value:function(e){var t=this;return this.element.addEventListener("scroll",e),function(){return t.element.removeEventListener("scroll",e)}}},{key:"onResize",value:function(e){var t,n=this;if("undefined"!=typeof ResizeObserver){var i=new ResizeObserver(function(t){var n=t,i=Array.isArray(n),r=0;for(n=i?n:n[Symbol.iterator]();;){if(i){if(r>=n.length)break;n[r++]}else{if((r=n.next()).done)break;r.value}return e()}});i.observe(this.element),t=function(){return i.unobserve(n.element)}}var r=(new C).onResize(e);return function(){t&&t(),r()}}}]),e}(),C=function(e){function t(){return y(this,t),p(this,v(t).call(this,window))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&S(e,t)}(t,x),w(t,[{key:"getScrollY",value:function(){return window.pageYOffset}},{key:"getWidth",value:function(){return window.innerWidth}},{key:"getHeight",value:function(){return window.innerHeight}},{key:"getContentHeight",value:function(){return document.documentElement.scrollHeight}},{key:"getTopOffset",value:function(e){var t=document.clientTop||document.body.clientTop||0;return e.getBoundingClientRect().top+this.getScrollY()-t}},{key:"onResize",value:function(e){return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}}]),t}();function H(e){return e.toFixed(2)+"px"}var O="[virtual-scroller] It looks like you're using Internet Explorer which doesn't support CSS variables required for a <tbody/> container. VirtualScroller has been switched into \"bypass\" mode (render all items). See: https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1";function k(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function R(){if(A()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,k(["[virtual-scroller]"].concat(n)))}}function A(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function T(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var L=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.initialize()}var t,n,i;return t=e,(n=[{key:"initialize",value:function(){this.reset(),this.getState()&&this.onStateUpdate()}},{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onStateUpdate",value:function(){for(var e=0;e<this.getState().itemHeights.length;){if(void 0===this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),r=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&R("Measure item spacing",r),r}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,r=this.lastMeasuredItemIndex,o=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this.set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,o||(this.firstMeasuredItemIndex=s,o=!0)),(void 0===r||s>r)&&(void 0!==r&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&T(t.prototype,n),i&&T(t,i),e}();function P(e){return(P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var M=Object.prototype.hasOwnProperty;function U(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function E(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){z(e,t,n[t])})}return e}function B(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function z(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var j=250,N=100,V=function(){function e(t,n){var i,r,o,s=this,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),z(this,"updateLayout",function(){return s.onUpdateShownItemIndexes({reason:"manual"})}),z(this,"onScroll",function(){return s.onUpdateShownItemIndexes({reason:"scroll"})}),z(this,"restoreScrollPosition",function(){var e=s.getState().scrollY;void 0!==e&&s.scrollTo(0,e)}),z(this,"updateScrollPosition",function(){return s.getState().scrollY=s.getScrollY()}),z(this,"layout",function(){return s.updateLayout()}),z(this,"onResize",(i=function(e){if(s.isRendered){var t=s.shouldUpdateLayoutOnScrollableContainerResize(e);"UPDATE_LAYOUT"===t?(R("~ Scrollable container size changed, re-measure item heights. ~"),s.resized=!0,s.setState(s.getInitialLayoutState())):"UPDATE_INDEXES"===t&&s.onUpdateShownItemIndexes({reason:"resize"})}},r=j,function(){for(var e=this,t=arguments.length,n=new Array(t),s=0;s<t;s++)n[s]=arguments[s];clearTimeout(o),o=setTimeout(function(){return i.apply(e,n)},r)})),z(this,"willUpdateState",function(e,t){if(t&&s.preserveScrollPositionOnPrependItems){s.preserveScrollPositionOnPrependItems=void 0;var n=t.items,i=e.items,r=D(n,i).prependedItemsCount;s.captureScroll(n,i,r)}}),z(this,"didUpdateState",function(e){var t=s.getState();if(s.onStateChange&&(function(e,t){if(U(e,t))return!0;if("object"!==P(e)||null===e||"object"!==P(t)||null===t)return!1;var n=Object.keys(e),i=Object.keys(t);if(n.length!==i.length)return!1;for(var r=0;r<n.length;r++)if(!M.call(t,n[r])||!U(e[n[r]],t[n[r]]))return!1;return!0}(t,e)||s.onStateChange(t,e)),e&&s.isRendered){R("~ Rendered ~"),t.firstShownItemIndex===e.firstShownItemIndex&&t.lastShownItemIndex===e.lastShownItemIndex&&t.items===e.items||s.onRendered();var n=e.items,i=t.items;if(i!==n){var r=D(n,i),o=r.prependedItemsCount,a=r.appendedItemsCount;return o>0||a>0?o>0&&(s.itemHeights.onPrepend(o),void 0!==s.firstSeenItemIndex&&(s.firstSeenItemIndex+=o,s.lastSeenItemIndex+=o)):(s.itemHeights.initialize(),s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.multiRenderLayout&&s.stopMultiRenderLayout(),s.onUpdateShownItemIndexes({reason:"update items",force:!0})}return s.resized?(s.resized=void 0,R("~ Rendered (resize) ~"),s.multiRenderLayout&&s.stopMultiRenderLayout(),s.onUpdateShownItemIndexes({reason:"resize"})):s.multiRenderLayout?s.onMultiRenderLayoutRendered():void 0}}),z(this,"updateShownItemIndexes",function(){var e=s.getShownItemIndexes(),t=e.firstShownItemIndex,n=e.lastShownItemIndex,i=e.redoLayoutAfterRender,r=s.getBeforeItemsHeight(t,n),o=s.getAfterItemsHeight(t,n);s.updateWillBeHiddenItemHeightsAndState(t,n),R("~ Layout results "+(s.bypass?"(bypass) ":"")+"~"),R("First shown item index",t),R("Last shown item index",n),R("Before items height",r),R("After items height (actual or estimated)",o),R("Average item height (calculated on previous render)",s.itemHeights.getAverage()),A()&&(R("Item heights",s.getState().itemHeights.slice()),R("Item states",s.getState().itemStates.slice())),i&&(R("Schedule a re-layout after the upcoming rerender"),s.redoLayoutAfterRender=!0),void 0!==s.firstSeenItemIndex&&(t>s.lastSeenItemIndex+1||n<s.firstSeenItemIndex-1)&&(s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.onBeforeShowItems(s.getState().items,t,n),s.setState({firstShownItemIndex:t,lastShownItemIndex:n,beforeItemsHeight:r,afterItemsHeight:o})}),z(this,"updateShownItemIndexesRecursive",function(){s.multiRenderLayout=!0,s.updateShownItemIndexes()}),z(this,"restoreScroll",function(){var e=s.restoreScrollAfterPrepend,t=e.index,n=e.visibleAreaTop;s.restoreScrollAfterPrepend=void 0;var i=s.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(R("Restore scroll position: scroll by",i),s.scrollTo(0,s.getScrollY()+i))}),z(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==s.getItemsCount()&&!s.multiRenderLayout){if(g(s.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getScrollY()<s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getState().firstShownItemIndex>0||void 0!==s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getScrollY()+s.scrollableContainer.getHeight()>s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getState().lastShownItemIndex<s.getItemsCount()-1;if(R(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return s.onUserStopsScrollingTimeout=f(s.onUserStoppedScrolling,N)}R("~ Update layout (on ".concat(t,") ~")),s.updateShownItemIndexesRecursive()}}),z(this,"onUserStoppedScrolling",function(){s.isRendered&&s.updateLayout("stopped scrolling")});var l=a.getState,u=a.setState,h=a.onStateChange,d=a.customState,c=a.preserveScrollPositionAtBottomOnMount,m=a.shouldUpdateLayoutOnWindowResize,I=a.measureItemsBatchSize,p=a.getScrollableContainer,v=a.tbody,S=a.bypass,y=a.estimatedItemHeight,b=a.onItemInitialRender,w=a.onItemFirstRender,H=a.scrollableContainer,k=a.preserveScrollPositionOfTheBottomOfTheListOnMount,T=a.state;k=k||c,R("~ Initialize ~"),T&&(n=T.items),!H&&p&&(H=p()),H?this.scrollableContainer=new x(H):"undefined"!=typeof window&&(this.scrollableContainer=new C),v&&(R("~ <tbody/> detected ~"),this.tbody=!0,"undefined"!=typeof window&&window.document.documentMode&&(R("~ <tbody/> not supported ~"),"undefined"!=typeof window?setTimeout(function(){throw new Error(O)},0):console.error(O),S=!0)),S&&R('~ "bypass" mode ~'),this.bypass=S,this.initialItems=n,this.estimatedItemHeight=y,this.onStateChange=h,this._shouldUpdateLayoutOnWindowResize=m,this.measureItemsBatchSize=void 0===I?50:I,b?this.onItemFirstRender=b:w&&(this.onItemFirstRender=function(e){console.warn("[virtual-scroller] `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.");var t=s.getState().items.indexOf(e);t>=0&&w(t)}),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),u?(this.getState=l,this.setState=function(e){return u(e,{willUpdateState:s.willUpdateState,didUpdateState:s.didUpdateState})}):(this.getState=function(){return s.state},this.setState=function(e){var t=s.getState(),n=E({},t,e);s.willUpdateState(n,t),s.state=n,s.didUpdateState(t)}),T&&R("Initial state (passed)",T),this.getContainerNode=t,this.itemHeights=new L(t,this.getState),this.scrollableContainer&&k&&(this.preserveScrollPositionOfTheBottomOfTheListOnMount={scrollableContainerContentHeight:this.scrollableContainer.getContentHeight()}),this.setState(T||this.getInitialState(d)),R("Items count",n.length),y&&R("Estimated item height",y)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=E({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return R("Initial state (autogenerated)",n),R("First shown item index",n.firstShownItemIndex),R("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems,i=n.length;return i>0&&(e=0,t=this.getLastShownItemIndex(e,i)),this.preserveScrollPositionOfTheBottomOfTheListOnMount&&(e=0,t=i-1),this.onBeforeShowItems(n,e,t),{itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return this.scrollableContainer?this.getEstimatedItemsCount(2*this.getMargin()+this.scrollableContainer.getHeight()):1}},{key:"getLastShownItemIndex",value:function(e,t){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return this.scrollableContainer.getHeight()}},{key:"onBeforeShowItems",value:function(e,t,n){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var i=t;i<=n;)this.onItemFirstRender(e[i]),i++;this.firstSeenItemIndex=t,this.lastSeenItemIndex=n}else{if(t<this.firstSeenItemIndex){for(var r=t,o=Math.min(n,this.firstSeenItemIndex-1),s=r;s<=o;)this.onItemFirstRender(e[s]),s++;this.firstSeenItemIndex=t}if(n>this.lastSeenItemIndex){for(var a=n,l=Math.max(t,this.lastSeenItemIndex+1);l<=a;)this.onItemFirstRender(e[l]),l++;this.lastSeenItemIndex=n}}}},{key:"onMount",value:function(){console.warn("[virtual-scroller] `.onMount()` instance method name is deprecated, use `.render()` instance method name instead."),this.render()}},{key:"render",value:function(){R("~ Rendered (initial) ~"),this.isRendered=!0,this.onRendered(),this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.restoreScrollPosition(),this.updateScrollPosition(),this.removeScrollPositionListener=this.scrollableContainer.addScrollListener(this.updateScrollPosition),this.bypass||(this.removeScrollListener=this.scrollableContainer.addScrollListener(this.onScroll),this.scrollableContainerUnlistenResize=this.scrollableContainer.onResize(this.onResize)),this.tbody&&function(e){e.classList.add("VirtualScroller");var t=document.getElementById("VirtualScrollerStyle");t||((t=document.createElement("style")).id="VirtualScrollerStyle",t.innerText="\n\t\t\ttbody.VirtualScroller:before {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingTop);\n\t\t\t}\n\t\t\ttbody.VirtualScroller:after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingBottom);\n\t\t\t}\n\t\t".replace(/[\n\t]/g,""),document.head.appendChild(t))}(this.getContainerNode()),this.preserveScrollPositionOfTheBottomOfTheListOnMount?this.scrollTo(0,this.getScrollY()+(this.scrollableContainer.getHeight()-this.preserveScrollPositionOfTheBottomOfTheListOnMount.scrollableContainerContentHeight)):this.onUpdateShownItemIndexes({reason:"mount"})}},{key:"onRendered",value:function(){this.updateItemHeights(),this.tbody&&this.updateTbodyPadding()}},{key:"scrollTo",value:function(e,t){this.scrollableContainer.scrollTo(e,t)}},{key:"getScrollY",value:function(){return this.scrollableContainer.getScrollY()}},{key:"getVisibleAreaBounds",value:function(){var e=this.getScrollY();return{top:e,bottom:e+this.scrollableContainer.getHeight()}}},{key:"getHeight",value:function(){return this.getContainerNode().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerNode())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1}var t=this.scrollableContainerWidth,n=this.scrollableContainerHeight;return this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.scrollableContainerWidth===t?this.scrollableContainerHeight!==n&&"UPDATE_INDEXES":"UPDATE_LAYOUT"}},{key:"onUnmount",value:function(){console.warn("[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead."),this.destroy()}},{key:"destroy",value:function(){this.isRendered=!1,this.removeScrollPositionListener(),this.bypass||(this.removeScrollListener(),this.scrollableContainerUnlistenResize(),g(this.onUserStopsScrollingTimeout),g(this.watchContainerElementCoordinatesTimer))}},{key:"updateTbodyPadding",value:function(){var e=this.getState(),t=e.beforeItemsHeight,n=e.afterItemsHeight;!function(e,t,n){e.style.setProperty("--VirtualScroller-paddingTop",H(t)),e.style.setProperty("--VirtualScroller-paddingBottom",H(n))}(this.getContainerNode(),t,n)}},{key:"updateItemHeights",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex,i=this.getState().firstShownItemIndex;void 0!==t&&(R("~ Measure item heights ~"),this.itemHeights.update(t,n,i),A()&&R("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){A()&&(R("~ Item state changed ~"),R("Item",e),R("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),R("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(R("~ Item height changed ~"),R("Item",e),R("Previous height",n),R("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=this.getTopOffset(),n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,o,s=0,a=!1,l=0;l<this.getItemsCount();){var u=this.itemHeights.get(l);if(void 0===u){R("Item index ".concat(l,' lies within the visible area or its "margins", but its height hasn\'t been measured yet. Mark the item as "shown", render the list, measure the item\'s height and redo the layout.')),o=l,void 0===i&&(i=l);var h=t-(n+s);r=Math.min(l+(this.getEstimatedItemsCount(h)-1),this.getItemsCount()-1),a=!0;break}if(s+=u,void 0===i&&n+s>e&&(R("First visible item index",l),i=l),l<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){R("Last visible item index",l),void 0!==i&&(r=l);break}l++}return void 0!==i&&void 0===r&&R("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(r=Math.min(r,o+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:r,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(n+i>e&&n<t){var r=this.getVisibleItemIndexes(e,t,n);if(void 0!==r.firstShownItemIndex)return r;R("Off-screen")}else R("Off-screen")}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementCoordinates",value:function(){var e=this,t=Date.now();!function n(){e.isRendered&&(void 0!==e.topOffset&&e.getTopOffset()!==e.topOffset&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementCoordinatesTimer=f(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=this.getTopOffset();void 0===this.topOffset&&this.watchContainerElementCoordinates(),this.topOffset=e;var t=this.getVisibleAreaBounds(),n=t.top,i=t.bottom;return this.latestLayoutVisibleAreaTopAfterIncludingMargin=n-this.getMargin(),this.latestLayoutVisibleAreaBottomAfterIncludingMargin=i+this.getMargin(),this.getItemIndexes(n-this.getMargin(),i+this.getMargin(),e,this.getHeight())||this.getOffscreenListShownItemIndexes()}},{key:"onMultiRenderLayoutRendered",value:function(){var e=this;if(this.redoLayoutAfterRender)return this.redoLayoutAfterRender=void 0,f(function(){e.isRendered&&e.updateShownItemIndexesRecursive()},0);this.stopMultiRenderLayout()}},{key:"stopMultiRenderLayout",value:function(){this.multiRenderLayout=void 0,this.redoLayoutAfterRender||this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,visibleAreaTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,o=i.lastShownItemIndex,s=i.beforeItemsHeight,a=i.afterItemsHeight,l=i.itemStates,u=i.itemHeights;i.itemSpacing;R("~ Update items ~");var h=D(n,e),d=h.prependedItemsCount,c=h.appendedItemsCount;d>0||c>0?(d>0&&(R("Prepended items count",d),u=new Array(d).concat(u),l&&(l=new Array(d).concat(l))),c>0&&(R("Appended items count",c),u=u.concat(new Array(c)),l&&(l=l.concat(new Array(c)))),r+=d,o+=d,s+=this.itemHeights.getAverage()*d,a+=this.itemHeights.getAverage()*c):(R("Non-incremental items update"),R("Previous items",n),R("New items",e),u=new Array(e.length),l=new Array(e.length),0===e.length?(r=void 0,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length)),s=0,a=0),R("First shown item index",r),R("Last shown item index",o),R("Before items height",s),R("After items height (actual or estimated)",a),this.onBeforeShowItems(e,r,o),this.preserveScrollPositionOnPrependItems=t.preserveScrollPositionOnPrependItems||t.preserveScrollPosition,this.setState({items:e,itemStates:l,itemHeights:u,firstShownItemIndex:r,lastShownItemIndex:o,beforeItemsHeight:s,afterItemsHeight:a})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&B(t.prototype,n),i&&B(t,i),e}();function D(e,t){var n=-1,i=-1;return e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1),n>=0&&i>=0?{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)}:{prependedItemsCount:-1,appendedItemsCount:-1}}function Y(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function _(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function F(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}return function(){function e(t,n,i){var r=this,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),F(this,"onStateChange",function(e,t){var n=e.items,i=e.firstShownItemIndex,o=e.lastShownItemIndex,s=e.beforeItemsHeight,a=e.afterItemsHeight;R("~ On state change ~"),R("Previous state",t),R("New state",e),r.tbody||(r.container.style.paddingTop=H(s),r.container.style.paddingBottom=H(a));var l=t&&n===t.items&&t.items.length>0;if(l){R("Incremental rerender");for(var u=t.lastShownItemIndex;u>=t.firstShownItemIndex;)u>=i&&u<=o||(R("Remove item index",u),r.unmountItem(r.container.childNodes[u-t.firstShownItemIndex])),u--}else for(R("Rerender from scratch");r.container.firstChild;)r.unmountItem(r.container.firstChild);for(var h=l,d=h&&r.container.firstChild,c=i;c<=o;){if(l&&c>=t.firstShownItemIndex&&c<=t.lastShownItemIndex)h&&(h=!1);else{var m=r.renderItem(n[c]);h?(R("Prepend item index",c),r.container.insertBefore(m,d)):(R("Append item index",c),r.container.appendChild(m))}c++}}),F(this,"onUnmount",function(){console.warn("[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead."),r.destroy()}),F(this,"destroy",function(){r.virtualScroller.destroy()}),this.container=t,this.renderItem=i;var s=o.onMount,a=o.onItemUnmount,l=Y(o,["onMount","onItemUnmount"]);this.onItemUnmount=a,this.tbody="TBODY"===this.container.tagName,this.virtualScroller=new V(function(){return r.container},n,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){F(e,t,n[t])})}return e}({},l,{tbody:this.tbody,onStateChange:this.onStateChange})),s&&s(),this.virtualScroller.render()}var t,n,i;return t=e,(n=[{key:"unmountItem",value:function(e){this.container.removeChild(e),this.onItemUnmount&&this.onItemUnmount(e)}},{key:"onItemHeightChange",value:function(e){this.virtualScroller.onItemHeightChange(e)}},{key:"updateItems",value:function(e,t){this.setItems(e,t)}},{key:"setItems",value:function(e,t){this.virtualScroller.setItems(e,t)}},{key:"getItemCoordinates",value:function(e){return this.virtualScroller.getItemCoordinates(e)}}])&&_(t.prototype,n),i&&_(t,i),e}()});
 //# sourceMappingURL=virtual-scroller-dom.js.map

bundle/virtual-scroller-react.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).VirtualScroller=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var n="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};for(var i,r=(function(e){(function(){var t,n,i,r,o,s;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(e.exports=function(){return(t()-o)/1e6},n=process.hrtime,r=(t=function(){var e;return 1e9*(e=n())[0]+e[1]})(),s=1e9*process.uptime(),o=r-s):Date.now?(e.exports=function(){return Date.now()-i},i=Date.now()):(e.exports=function(){return(new Date).getTime()-i},i=(new Date).getTime())}).call(n)}(i={exports:{}},i.exports),i.exports),o="undefined"==typeof window?n:window,s=["moz","webkit"],a="AnimationFrame",l=o["request"+a],u=o["cancel"+a]||o["cancelRequest"+a],h=0;!l&&h<s.length;h++)l=o[s[h]+"Request"+a],u=o[s[h]+"Cancel"+a]||o[s[h]+"CancelRequest"+a];if(!l||!u){var c=0,d=0,m=[];l=function(e){if(0===m.length){var t=r(),n=Math.max(0,1e3/60-(t-c));c=n+t,setTimeout(function(){var e=m.slice(0);m.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(c)}catch(e){setTimeout(function(){throw e},0)}},Math.round(n))}return m.push({handle:++d,callback:e,cancelled:!1}),d},u=function(e){for(var t=0;t<m.length;t++)m[t].handle===e&&(m[t].cancelled=!0)}}var f=function(e){return l.call(o,e)};f.cancel=function(){u.apply(o,arguments)},f.polyfill=function(e){e||(e=o),e.requestAnimationFrame=l,e.cancelAnimationFrame=u};var g=f.cancel;function p(e,t){var n=Date.now(),i=f(function r(){Date.now()-n>=t?e():i=f(r)});return{clear:function(){return g(i)}}}function I(e){e&&e.clear()}function S(e){return(S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function v(e,t){return!t||"object"!==S(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function y(e){return(y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function b(e,t){return(b=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function w(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function C(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function x(e,t,n){return t&&C(e.prototype,t),n&&C(e,n),e}var H=function(){function e(t){w(this,e),this.element=t}return x(e,[{key:"getScrollY",value:function(){return this.element.scrollTop}},{key:"scrollTo",value:function(e,t){this.element.scrollTo(e,t)}},{key:"getWidth",value:function(){return this.element.offsetWidth}},{key:"getHeight",value:function(){return this.element.offsetHeight}},{key:"getContentHeight",value:function(){return this.element.scrollHeight}},{key:"getTopOffset",value:function(e){var t=this.element.getBoundingClientRect().top,n=this.element.clientTop;return e.getBoundingClientRect().top-t+this.getScrollY()-n}},{key:"addScrollListener",value:function(e){var t=this;return this.element.addEventListener("scroll",e),function(){return t.element.removeEventListener("scroll",e)}}},{key:"onResize",value:function(e){var t,n=this;if("undefined"!=typeof ResizeObserver){var i=new ResizeObserver(function(t){var n=t,i=Array.isArray(n),r=0;for(n=i?n:n[Symbol.iterator]();;){if(i){if(r>=n.length)break;n[r++]}else{if((r=n.next()).done)break;r.value}return e()}});i.observe(this.element),t=function(){return i.unobserve(n.element)}}var r=(new O).onResize(e);return function(){t&&t(),r()}}}]),e}(),O=function(e){function t(){return w(this,t),v(this,y(t).call(this,window))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&b(e,t)}(t,H),x(t,[{key:"getScrollY",value:function(){return window.pageYOffset}},{key:"getWidth",value:function(){return window.innerWidth}},{key:"getHeight",value:function(){return window.innerHeight}},{key:"getContentHeight",value:function(){return document.documentElement.scrollHeight}},{key:"getTopOffset",value:function(e){var t=document.clientTop||document.body.clientTop||0;return e.getBoundingClientRect().top+this.getScrollY()-t}},{key:"onResize",value:function(e){return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}}]),t}();function P(e){return e.toFixed(2)+"px"}var k="[virtual-scroller] It looks like you're using Internet Explorer which doesn't support CSS variables required for a <tbody/> container. VirtualScroller has been switched into \"bypass\" mode (render all items). See: https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1";function R(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function A(){if(M()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,R(["[virtual-scroller]"].concat(n)))}}function M(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function T(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var L=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.reset()}var t,n,i;return t=e,(n=[{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onInitItemHeights",value:function(){this.reset();for(var e=0;e<this.getState().itemHeights.length;){if(null==this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),r=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&A("Measure item spacing",r),r}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,r=this.lastMeasuredItemIndex,o=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this.set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,o||(this.firstMeasuredItemIndex=s,o=!0)),(void 0===r||s>r)&&(void 0!==r&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&T(t.prototype,n),i&&T(t,i),e}();function U(e){return(U="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var B=Object.prototype.hasOwnProperty;function j(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function E(e,t){if(j(e,t))return!0;if("object"!==U(e)||null===e||"object"!==U(t)||null===t)return!1;var n=Object.keys(e),i=Object.keys(t);if(n.length!==i.length)return!1;for(var r=0;r<n.length;r++)if(!B.call(t,n[r])||!j(e[n[r]],t[n[r]]))return!1;return!0}function z(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){N(e,t,n[t])})}return e}function W(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function N(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var q=250,V=100,_=function(){function e(t,n){var i,r,o,s=this,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),N(this,"updateLayout",function(){return s.onUpdateShownItemIndexes({reason:"manual"})}),N(this,"onScroll",function(){return s.onUpdateShownItemIndexes({reason:"scroll"})}),N(this,"restoreScrollPosition",function(){var e=s.getState().scrollY;void 0!==e&&s.scrollTo(0,e)}),N(this,"updateScrollPosition",function(){return s.getState().scrollY=s.getScrollY()}),N(this,"layout",function(){return s.updateLayout()}),N(this,"onResize",(i=function(e){s.isMounted&&s.shouldUpdateLayoutOnScrollableContainerResize(e)&&(A("~ Scrollable container size changed, re-measure item heights. ~"),s.setState(s.getInitialLayoutState(),function(){s.onInitialRender("resize")}))},r=q,function(){for(var e=this,t=arguments.length,n=new Array(t),s=0;s<t;s++)n[s]=arguments[s];clearTimeout(o),o=setTimeout(function(){return i.apply(e,n)},r)})),N(this,"updateShownItemIndexes",function(e){var t=s.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,r=t.redoLayoutAfterRender,o=s.getBeforeItemsHeight(n,i),a=s.getAfterItemsHeight(n,i);s.updateWillBeHiddenItemHeightsAndState(n,i),A("~ Layout results "+(s.bypass?"(bypass) ":"")+"~"),A("First shown item index",n),A("Last shown item index",i),A("Before items height",o),A("After items height (actual or estimated)",a),A("Average item height (calculated on previous render)",s.itemHeights.getAverage()),M()&&(A("Item heights",s.getState().itemHeights.slice()),A("Item states",s.getState().itemStates.slice())),r&&A("Schedule a re-layout after the upcoming rerender"),void 0!==s.firstSeenItemIndex&&(n>s.lastSeenItemIndex+1||i<s.firstSeenItemIndex-1)&&(s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.onBeforeShowItems(n,i),s.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:o,afterItemsHeight:a},function(){return e(r)})}),N(this,"updateShownItemIndexesRecursive",function(){s.updateShownItemIndexes(function(e){e?p(function(){s.isMounted?s.updateShownItemIndexesRecursive():s.onDoneUpdatingItemIndexes()},0):s.onDoneUpdatingItemIndexes()})}),N(this,"restoreScroll",function(){var e=s.restoreScrollAfterPrepend,t=e.index,n=e.visibleAreaTop;s.restoreScrollAfterPrepend=void 0;var i=s.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(A("Restore scroll position: scroll by",i),s.scrollTo(0,s.getScrollY()+i))}),N(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==s.getItemsCount()&&!s.isUpdatingItemIndexes){if(I(s.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getScrollY()<s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getState().firstShownItemIndex>0||void 0!==s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getScrollY()+s.scrollableContainer.getHeight()>s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getState().lastShownItemIndex<s.getItemsCount()-1;if(A(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return s.onUserStopsScrollingTimeout=p(s.onUserStoppedScrolling,V)}A("~ Update layout (on ".concat(t,") ~")),s.isUpdatingItemIndexes=!0,s.updateShownItemIndexesRecursive()}}),N(this,"onUserStoppedScrolling",function(){s.isMounted&&s.updateLayout("stopped scrolling")});var l=a.getState,u=a.setState,h=a.onStateChange,c=a.customState,d=a.preserveScrollPositionAtBottomOnMount,m=a.shouldUpdateLayoutOnWindowResize,f=a.measureItemsBatchSize,g=a.getScrollableContainer,S=a.tbody,v=a.bypass,y=a.estimatedItemHeight,b=a.onItemFirstRender,w=a.scrollableContainer,C=a.state;A("~ Initialize ~"),C&&(n=C.items),!w&&g&&(w=g()),w?this.scrollableContainer=new H(w):"undefined"!=typeof window&&(this.scrollableContainer=new O),S&&(A("~ <tbody/> detected ~"),this.tbody=!0,"undefined"!=typeof window&&window.document.documentMode&&(A("~ <tbody/> not supported ~"),"undefined"!=typeof window?setTimeout(function(){throw new Error(k)},0):console.error(k),v=!0)),v&&A('~ "bypass" mode ~'),this.bypass=v,this.initialItems=n,this.estimatedItemHeight=y,this._shouldUpdateLayoutOnWindowResize=m,this.measureItemsBatchSize=void 0===f?50:f,b&&(this.onItemFirstRender=b),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),u?(this.getState=l,this.setState=u):(this.getState=function(){return s.state},this.setState=function(e,t){var n=s.state;s.state=z({},n,e),E(s.state,n)||(h&&h(s.state,n),s.isMounted&&s.onUpdate(n)),t&&t()}),C&&A("Initial state (passed)",C),this.getContainerNode=t,this.itemHeights=new L(t,this.getState),this.scrollableContainer&&d&&(this.preserveScrollPositionAtBottomOnMount={scrollableContainerContentHeight:this.scrollableContainer.getContentHeight()}),this.setState(C||this.getInitialState(c),function(){s.itemHeights.onInitItemHeights()}),A("Items count",n.length),y&&A("Estimated item height",y)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=z({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return A("Initial state (autogenerated)",n),A("First shown item index",n.firstShownItemIndex),A("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems.length;return n>0&&(e=0,t=this.getLastShownItemIndex(e,n)),this.preserveScrollPositionAtBottomOnMount&&(e=0,t=n-1),this.onBeforeShowItems(e,t),{itemHeights:new Array(n),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return this.scrollableContainer?this.getEstimatedItemsCount(2*this.getMargin()+this.scrollableContainer.getHeight()):1}},{key:"getLastShownItemIndex",value:function(e,t){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return this.scrollableContainer.getHeight()}},{key:"onBeforeShowItems",value:function(e,t){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var n=e;n<=t;)this.onItemFirstRender(n),n++;this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}else{if(e<this.firstSeenItemIndex){for(var i=e,r=Math.min(t,this.firstSeenItemIndex-1),o=i;o<=r;)this.onItemFirstRender(o),o++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var s=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=s;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.isMounted=!0,this.onInitialRender("mount"),this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.restoreScrollPosition(),this.updateScrollPosition(),this.removeScrollPositionListener=this.scrollableContainer.addScrollListener(this.updateScrollPosition),this.bypass||(this.removeScrollListener=this.scrollableContainer.addScrollListener(this.onScroll),this.scrollableContainerUnlistenResize=this.scrollableContainer.onResize(this.onResize)),this.tbody&&(!function(e){e.classList.add("VirtualScroller");var t=document.getElementById("VirtualScrollerStyle");t||((t=document.createElement("style")).id="VirtualScrollerStyle",t.innerText="\n\t\t\ttbody.VirtualScroller:before {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingTop);\n\t\t\t}\n\t\t\ttbody.VirtualScroller:after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingBottom);\n\t\t\t}\n\t\t".replace(/[\n\t]/g,""),document.head.appendChild(t))}(this.getContainerNode()),this.updateTbodyPadding())}},{key:"onInitialRender",value:function(e){var t=this.getState(),n=t.firstShownItemIndex,i=t.lastShownItemIndex;A("~ Rendered (initial) ~"),this.getItemsCount()>0&&this.updateItemHeights(n,i),this.preserveScrollPositionAtBottomOnMount?this.scrollTo(0,this.getScrollY()+(this.scrollableContainer.getHeight()-this.preserveScrollPositionAtBottomOnMount.scrollableContainerContentHeight)):this.onUpdateShownItemIndexes({reason:e})}},{key:"scrollTo",value:function(e,t){this.scrollableContainer.scrollTo(e,t)}},{key:"getScrollY",value:function(){return this.scrollableContainer.getScrollY()}},{key:"getVisibleAreaBounds",value:function(){var e=this.getScrollY();return{top:e,bottom:e+this.scrollableContainer.getHeight()}}},{key:"getHeight",value:function(){return this.getContainerNode().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerNode())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1}var t=this.scrollableContainerWidth,n=this.scrollableContainerHeight;return this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.scrollableContainerWidth!==t||this.scrollableContainerHeight!==n&&(this.onUpdateShownItemIndexes({reason:"resize"}),!1)}},{key:"onUnmount",value:function(){this.isMounted=!1,this.removeScrollPositionListener(),this.bypass||(this.removeScrollListener(),this.scrollableContainerUnlistenResize(),I(this.onUserStopsScrollingTimeout),I(this.watchContainerElementCoordinatesTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,r=t.lastShownItemIndex;A("~ Rendered ~"),i===e.firstShownItemIndex&&r===e.lastShownItemIndex&&n===e.items||(this.updateItemHeights(i,r),this.tbody&&this.updateTbodyPadding())}},{key:"updateTbodyPadding",value:function(){var e=this.getState(),t=e.beforeItemsHeight,n=e.afterItemsHeight;!function(e,t,n){e.style.setProperty("--VirtualScroller-paddingTop",P(t)),e.style.setProperty("--VirtualScroller-paddingBottom",P(n))}(this.getContainerNode(),t,n)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(A("~ Measure item heights ~"),this.itemHeights.update(e,t,n),M()&&A("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){M()&&(A("~ Item state changed ~"),A("Item",e),A("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),A("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(A("~ Item height changed ~"),A("Item",e),A("Previous height",n),A("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=this.getTopOffset(),n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,o,s=0,a=!1,l=0;l<this.getItemsCount();){var u=this.itemHeights.get(l);if(void 0===u){A("Item index ".concat(l,' lies within the visible area or its "margins", but its height hasn\'t been measured yet. Mark the item as "shown", render the list, measure the item\'s height and redo the layout.')),o=l,void 0===i&&(i=l);var h=t-(n+s);r=Math.min(l+(this.getEstimatedItemsCount(h)-1),this.getItemsCount()-1),a=!0;break}if(s+=u,void 0===i&&n+s>e&&(A("First visible item index",l),i=l),l<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){A("Last visible item index",l),void 0!==i&&(r=l);break}l++}return void 0!==i&&void 0===r&&A("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(r=Math.min(r,o+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:r,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(n+i>e&&n<t){var r=this.getVisibleItemIndexes(e,t,n);if(void 0!==r.firstShownItemIndex)return r;A("Off-screen")}else A("Off-screen")}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementCoordinates",value:function(){var e=this,t=Date.now();!function n(){e.isMounted&&(void 0!==e.topOffset&&e.getTopOffset()!==e.topOffset&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementCoordinatesTimer=p(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=this.getTopOffset();void 0===this.topOffset&&this.watchContainerElementCoordinates(),this.topOffset=e;var t=this.getVisibleAreaBounds(),n=t.top,i=t.bottom;return this.latestLayoutVisibleAreaTopAfterIncludingMargin=n-this.getMargin(),this.latestLayoutVisibleAreaBottomAfterIncludingMargin=i+this.getMargin(),this.getItemIndexes(n-this.getMargin(),i+this.getMargin(),e,this.getHeight())||this.getOffscreenListShownItemIndexes()}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,visibleAreaTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=this.getState().items,r=this.getState(),o=r.firstShownItemIndex,s=r.lastShownItemIndex,a=r.beforeItemsHeight,l=r.afterItemsHeight,u=r.itemStates,h=r.itemHeights;r.itemSpacing;A("~ Update items ~");var c=F(i,e),d=c.prependedItemsCount,m=c.appendedItemsCount,f=d>0||m>0;f?(d>0&&(A("Prepended items count",d),h=new Array(d).concat(h),this.itemHeights.onPrepend(d),u&&(u=new Array(d).concat(u)),(n.preserveScrollPositionOnPrependItems||n.preserveScrollPosition)&&this.captureScroll(i,e,d)),m>0&&(A("Appended items count",m),h=h.concat(new Array(m)),u&&(u=u.concat(new Array(m)))),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=d,this.lastSeenItemIndex+=d),o+=d,s+=d,a+=this.itemHeights.getAverage()*d,l+=this.itemHeights.getAverage()*m):(A("Non-incremental items update"),A("Previous items",i),A("New items",e),h=new Array(e.length),u=new Array(e.length),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,0===e.length?(o=void 0,s=void 0):(o=0,s=this.getLastShownItemIndex(o,e.length)),a=0,l=0),A("First shown item index",o),A("Last shown item index",s),A("Before items height",a),A("After items height (actual or estimated)",l),this.onBeforeShowItems(o,s),this.setState(z({},void 0,{items:e,itemStates:u,itemHeights:h,firstShownItemIndex:o,lastShownItemIndex:s,beforeItemsHeight:a,afterItemsHeight:l}),function(){f||t.itemHeights.onInitItemHeights(),t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&W(t.prototype,n),i&&W(t,i),e}();function F(e,t){var n=-1,i=-1;return e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1),n>=0&&i>=0?{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)}:{prependedItemsCount:-1,appendedItemsCount:-1}}function D(e){return(D="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function Y(){return(Y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function J(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function G(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function K(e){return(K=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function Q(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function X(e,t){return(X=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function Z(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var $=t.elementType||t.oneOfType([t.string,t.func,t.object]),ee=function(t){function n(t){var i,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,o=K(n).call(this,t),i=!o||"object"!==D(o)&&"function"!=typeof o?Q(r):o,Z(Q(i),"container",e.createRef()),Z(Q(i),"onItemStateChange",new Array(i.props.items.length)),Z(Q(i),"onItemHeightChange",new Array(i.props.items.length)),Z(Q(i),"itemRefs",new Array(i.props.items.length)),Z(Q(i),"uniquePrefixes",[]),Z(Q(i),"updateLayout",function(){return i.virtualScroller.updateLayout()}),Z(Q(i),"layout",function(){return i.updateLayout()}),Z(Q(i),"onItemFirstRender",function(){var e=i.props.onItemFirstRender;e&&e.apply(void 0,arguments)}),Z(Q(i),"shouldUpdateLayoutOnWindowResize",function(){var e=i.props.shouldUpdateLayoutOnWindowResize;if(e)return e.apply(void 0,arguments)}),Z(Q(i),"onStateChange",function(){var e=i.props.onStateChange;e&&e.apply(void 0,arguments)});var s=i.props,a=s.as,l=s.items,u=s.initialState,h=s.initialCustomState,c=s.estimatedItemHeight,d=s.preserveScrollPositionAtBottomOnMount,m=s.measureItemsBatchSize,f=s.scrollableContainer,g=s.getScrollableContainer,p=s.bypass;return i.previousItemsProperty=l,i.virtualScroller=new _(function(){return i.container.current},l,{estimatedItemHeight:c,bypass:p,onItemFirstRender:i.onItemFirstRender,preserveScrollPositionAtBottomOnMount:d,shouldUpdateLayoutOnWindowResize:i.shouldUpdateLayoutOnWindowResize,measureItemsBatchSize:m,scrollableContainer:f,getScrollableContainer:g,tbody:"tbody"===a,state:u,customState:h,getState:function(){return i.state},setState:function(e,t){i.state?i.setState(e,t):(i.state=e,i.onStateChange(e))}}),i.generateUniquePrefix(),i}var i,r,o;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&X(e,t)}(n,e.Component),i=n,(r=[{key:"shouldUseRefs",value:function(){var e,t=this.props.itemComponent;return(e=t).prototype&&e.prototype.isReactComponent}},{key:"getItemCoordinates",value:function(e){return this.virtualScroller.getItemCoordinates(e)}},{key:"updateItem",value:function(e){return this.renderItem(e)}},{key:"renderItem",value:function(e){var t=this;if(!this.shouldUseRefs())return console.error("[virtual-scroller] `.renderItem(i)` has been called but the `component` doesn't allow `ref`s. Only `component`s that're `React.Component`s support this feature.");if(this.itemRefs[e]&&this.itemRefs[e].current){var n=this.props.items,i=n[e];this.itemRefs[e].current.forceUpdate(function(){if(t._isMounted){var e=n.indexOf(i);e>=0&&t.virtualScroller.onItemHeightChange(e)}})}}},{key:"getItemRef",value:function(t){return this.itemRefs[t]||(this.itemRefs[t]=e.createRef()),this.itemRefs[t]}},{key:"getOnItemStateChange",value:function(e){var t=this;return this.onItemStateChange[e]||(this.onItemStateChange[e]=function(n){return t.virtualScroller.onItemStateChange(e,n)}),this.onItemStateChange[e]}},{key:"getOnItemHeightChange",value:function(e){var t=this;return this.onItemHeightChange[e]||(this.onItemHeightChange[e]=function(){return t.virtualScroller.onItemHeightChange(e)}),this.onItemHeightChange[e]}},{key:"generateUniquePrefix",value:function(){var e=String(Math.random()).slice(2);if(this.uniquePrefixes.indexOf(e)>=0)return this.generateUniquePrefix();this.uniquePrefixes.push(e),this.uniquePrefix=e}},{key:"componentDidMount",value:function(){var e=this.props.onMount;e&&e(),this.virtualScroller.onMount(),this._isMounted=!0}},{key:"componentDidUpdate",value:function(e,t){var n=this.props.onStateChange;n&&(E(this.state,t)||n(this.state,t)),this.virtualScroller.onUpdate(t);var i=this.props,r=i.items,o=i.preserveScrollPosition,s=i.preserveScrollPositionOnPrependItems;r!==e.items&&this.virtualScroller.setItems(r,{preserveScrollPositionOnPrependItems:s||o})}},{key:"componentWillUnmount",value:function(){this.virtualScroller.onUnmount(),this._isMounted=!1}},{key:"render",value:function(){var t=this,n=this.props,i=n.as,r=n.itemComponent,o=n.itemComponentProps,s=(n.items,n.estimatedItemHeight,n.bypass,n.preserveScrollPositionOnPrependItems),a=n.preserveScrollPosition,l=(n.preserveScrollPositionAtBottomOnMount,n.shouldUpdateLayoutOnWindowResize,n.measureItemsBatchSize,n.scrollableContainer,n.getScrollableContainer,n.initialState,n.initialCustomState,n.onStateChange,n.onItemFirstRender,n.onMount,n.className),u=J(n,["as","itemComponent","itemComponentProps","items","estimatedItemHeight","bypass","preserveScrollPositionOnPrependItems","preserveScrollPosition","preserveScrollPositionAtBottomOnMount","shouldUpdateLayoutOnWindowResize","measureItemsBatchSize","scrollableContainer","getScrollableContainer","initialState","initialCustomState","onStateChange","onItemFirstRender","onMount","className"]),h=this.virtualScroller.getState(),c=h.items,d=h.itemStates,m=h.firstShownItemIndex,f=h.lastShownItemIndex,g=h.beforeItemsHeight,p=h.afterItemsHeight,I=this.props.items,S=c;if(this.itemsPropertyWasChanged||(this.itemsPropertyWasChanged=this.props.items!==this.previousItemsProperty),this.previousItemsProperty=this.props.items,this.itemsPropertyWasChanged&&I!==S){var v=F(S,I),y=v.prependedItemsCount,b=v.appendedItemsCount;0===y&&b>0||((s||a)&&this.virtualScroller.captureScroll(S,I),this.generateUniquePrefix(),this.onItemStateChange=new Array(I.length),this.onItemHeightChange=new Array(I.length),this.itemRefs=new Array(I.length))}var w=this.virtualScroller.tbody;return e.createElement(i,Y({},u,{ref:this.container,className:w?l?l+" VirtualScroller":"VirtualScroller":l,style:{paddingTop:w?void 0:P(g),paddingBottom:w?void 0:P(p)}}),c.map(function(n,i){return i>=m&&i<=f?e.createElement(r,Y({},o,{ref:t.shouldUseRefs()?t.getItemRef(i):void 0,key:"".concat(t.uniquePrefix,":").concat(i),state:d&&d[i],onStateChange:t.getOnItemStateChange(i),onHeightChange:t.getOnItemHeightChange(i)}),n):null}))}}])&&G(i.prototype,r),o&&G(i,o),n}();return Z(ee,"propTypes",{as:$,items:t.arrayOf(t.object).isRequired,itemComponent:$.isRequired,itemComponentProps:t.object,estimatedItemHeight:t.number,bypass:t.bool,preserveScrollPositionOnPrependItems:t.bool,preserveScrollPosition:t.bool,preserveScrollPositionAtBottomOnMount:t.bool,shouldUpdateLayoutOnWindowResize:t.func,measureItemsBatchSize:t.number,scrollableContainer:t.any,getScrollableContainer:t.func,className:t.string,onMount:t.func,onItemFirstRender:t.func,onStateChange:t.func,initialCustomState:t.object,initialState:t.shape({items:t.arrayOf(t.object).isRequired,itemStates:t.arrayOf(t.any),firstShownItemIndex:t.number.isRequired,lastShownItemIndex:t.number.isRequired,beforeItemsHeight:t.number.isRequired,afterItemsHeight:t.number.isRequired,itemHeights:t.arrayOf(t.number).isRequired,itemSpacing:t.number})}),Z(ee,"defaultProps",{as:"div"}),ee});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).VirtualScroller=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var n="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};for(var i,r=(function(e){(function(){var t,n,i,r,o,s;"undefined"!=typeof performance&&null!==performance&&performance.now?e.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(e.exports=function(){return(t()-o)/1e6},n=process.hrtime,r=(t=function(){var e;return 1e9*(e=n())[0]+e[1]})(),s=1e9*process.uptime(),o=r-s):Date.now?(e.exports=function(){return Date.now()-i},i=Date.now()):(e.exports=function(){return(new Date).getTime()-i},i=(new Date).getTime())}).call(n)}(i={exports:{}},i.exports),i.exports),o="undefined"==typeof window?n:window,s=["moz","webkit"],a="AnimationFrame",l=o["request"+a],u=o["cancel"+a]||o["cancelRequest"+a],h=0;!l&&h<s.length;h++)l=o[s[h]+"Request"+a],u=o[s[h]+"Cancel"+a]||o[s[h]+"CancelRequest"+a];if(!l||!u){var d=0,c=0,m=[];l=function(e){if(0===m.length){var t=r(),n=Math.max(0,1e3/60-(t-d));d=n+t,setTimeout(function(){var e=m.slice(0);m.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(d)}catch(e){setTimeout(function(){throw e},0)}},Math.round(n))}return m.push({handle:++c,callback:e,cancelled:!1}),c},u=function(e){for(var t=0;t<m.length;t++)m[t].handle===e&&(m[t].cancelled=!0)}}var f=function(e){return l.call(o,e)};f.cancel=function(){u.apply(o,arguments)},f.polyfill=function(e){e||(e=o),e.requestAnimationFrame=l,e.cancelAnimationFrame=u};var g=f.cancel;function p(e,t){var n=Date.now(),i=f(function r(){Date.now()-n>=t?e():i=f(r)});return{clear:function(){return g(i)}}}function I(e){e&&e.clear()}function S(e){return(S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function v(e,t){return!t||"object"!==S(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function y(e){return(y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function b(e,t){return(b=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function w(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function C(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function x(e,t,n){return t&&C(e.prototype,t),n&&C(e,n),e}var O=function(){function e(t){w(this,e),this.element=t}return x(e,[{key:"getScrollY",value:function(){return this.element.scrollTop}},{key:"scrollTo",value:function(e,t){this.element.scrollTo(e,t)}},{key:"getWidth",value:function(){return this.element.offsetWidth}},{key:"getHeight",value:function(){return this.element.offsetHeight}},{key:"getContentHeight",value:function(){return this.element.scrollHeight}},{key:"getTopOffset",value:function(e){var t=this.element.getBoundingClientRect().top,n=this.element.clientTop;return e.getBoundingClientRect().top-t+this.getScrollY()-n}},{key:"addScrollListener",value:function(e){var t=this;return this.element.addEventListener("scroll",e),function(){return t.element.removeEventListener("scroll",e)}}},{key:"onResize",value:function(e){var t,n=this;if("undefined"!=typeof ResizeObserver){var i=new ResizeObserver(function(t){var n=t,i=Array.isArray(n),r=0;for(n=i?n:n[Symbol.iterator]();;){if(i){if(r>=n.length)break;n[r++]}else{if((r=n.next()).done)break;r.value}return e()}});i.observe(this.element),t=function(){return i.unobserve(n.element)}}var r=(new R).onResize(e);return function(){t&&t(),r()}}}]),e}(),R=function(e){function t(){return w(this,t),v(this,y(t).call(this,window))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&b(e,t)}(t,O),x(t,[{key:"getScrollY",value:function(){return window.pageYOffset}},{key:"getWidth",value:function(){return window.innerWidth}},{key:"getHeight",value:function(){return window.innerHeight}},{key:"getContentHeight",value:function(){return document.documentElement.scrollHeight}},{key:"getTopOffset",value:function(e){var t=document.clientTop||document.body.clientTop||0;return e.getBoundingClientRect().top+this.getScrollY()-t}},{key:"onResize",value:function(e){return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}}]),t}();function H(e){return e.toFixed(2)+"px"}var P="[virtual-scroller] It looks like you're using Internet Explorer which doesn't support CSS variables required for a <tbody/> container. VirtualScroller has been switched into \"bypass\" mode (render all items). See: https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1";function k(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function A(){if(L()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,k(["[virtual-scroller]"].concat(n)))}}function L(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function T(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var M=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.initialize()}var t,n,i;return t=e,(n=[{key:"initialize",value:function(){this.reset(),this.getState()&&this.onStateUpdate()}},{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onStateUpdate",value:function(){for(var e=0;e<this.getState().itemHeights.length;){if(void 0===this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),r=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&A("Measure item spacing",r),r}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,r=this.lastMeasuredItemIndex,o=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this.set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,o||(this.firstMeasuredItemIndex=s,o=!0)),(void 0===r||s>r)&&(void 0!==r&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&T(t.prototype,n),i&&T(t,i),e}();function U(e){return(U="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var B=Object.prototype.hasOwnProperty;function E(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function z(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){_(e,t,n[t])})}return e}function j(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function _(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var N=250,W=100,q=function(){function e(t,n){var i,r,o,s=this,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),_(this,"updateLayout",function(){return s.onUpdateShownItemIndexes({reason:"manual"})}),_(this,"onScroll",function(){return s.onUpdateShownItemIndexes({reason:"scroll"})}),_(this,"restoreScrollPosition",function(){var e=s.getState().scrollY;void 0!==e&&s.scrollTo(0,e)}),_(this,"updateScrollPosition",function(){return s.getState().scrollY=s.getScrollY()}),_(this,"layout",function(){return s.updateLayout()}),_(this,"onResize",(i=function(e){if(s.isRendered){var t=s.shouldUpdateLayoutOnScrollableContainerResize(e);"UPDATE_LAYOUT"===t?(A("~ Scrollable container size changed, re-measure item heights. ~"),s.resized=!0,s.setState(s.getInitialLayoutState())):"UPDATE_INDEXES"===t&&s.onUpdateShownItemIndexes({reason:"resize"})}},r=N,function(){for(var e=this,t=arguments.length,n=new Array(t),s=0;s<t;s++)n[s]=arguments[s];clearTimeout(o),o=setTimeout(function(){return i.apply(e,n)},r)})),_(this,"willUpdateState",function(e,t){if(t&&s.preserveScrollPositionOnPrependItems){s.preserveScrollPositionOnPrependItems=void 0;var n=t.items,i=e.items,r=V(n,i).prependedItemsCount;s.captureScroll(n,i,r)}}),_(this,"didUpdateState",function(e){var t=s.getState();if(s.onStateChange&&(function(e,t){if(E(e,t))return!0;if("object"!==U(e)||null===e||"object"!==U(t)||null===t)return!1;var n=Object.keys(e),i=Object.keys(t);if(n.length!==i.length)return!1;for(var r=0;r<n.length;r++)if(!B.call(t,n[r])||!E(e[n[r]],t[n[r]]))return!1;return!0}(t,e)||s.onStateChange(t,e)),e&&s.isRendered){A("~ Rendered ~"),t.firstShownItemIndex===e.firstShownItemIndex&&t.lastShownItemIndex===e.lastShownItemIndex&&t.items===e.items||s.onRendered();var n=e.items,i=t.items;if(i!==n){var r=V(n,i),o=r.prependedItemsCount,a=r.appendedItemsCount;return o>0||a>0?o>0&&(s.itemHeights.onPrepend(o),void 0!==s.firstSeenItemIndex&&(s.firstSeenItemIndex+=o,s.lastSeenItemIndex+=o)):(s.itemHeights.initialize(),s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.multiRenderLayout&&s.stopMultiRenderLayout(),s.onUpdateShownItemIndexes({reason:"update items",force:!0})}return s.resized?(s.resized=void 0,A("~ Rendered (resize) ~"),s.multiRenderLayout&&s.stopMultiRenderLayout(),s.onUpdateShownItemIndexes({reason:"resize"})):s.multiRenderLayout?s.onMultiRenderLayoutRendered():void 0}}),_(this,"updateShownItemIndexes",function(){var e=s.getShownItemIndexes(),t=e.firstShownItemIndex,n=e.lastShownItemIndex,i=e.redoLayoutAfterRender,r=s.getBeforeItemsHeight(t,n),o=s.getAfterItemsHeight(t,n);s.updateWillBeHiddenItemHeightsAndState(t,n),A("~ Layout results "+(s.bypass?"(bypass) ":"")+"~"),A("First shown item index",t),A("Last shown item index",n),A("Before items height",r),A("After items height (actual or estimated)",o),A("Average item height (calculated on previous render)",s.itemHeights.getAverage()),L()&&(A("Item heights",s.getState().itemHeights.slice()),A("Item states",s.getState().itemStates.slice())),i&&(A("Schedule a re-layout after the upcoming rerender"),s.redoLayoutAfterRender=!0),void 0!==s.firstSeenItemIndex&&(t>s.lastSeenItemIndex+1||n<s.firstSeenItemIndex-1)&&(s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.onBeforeShowItems(s.getState().items,t,n),s.setState({firstShownItemIndex:t,lastShownItemIndex:n,beforeItemsHeight:r,afterItemsHeight:o})}),_(this,"updateShownItemIndexesRecursive",function(){s.multiRenderLayout=!0,s.updateShownItemIndexes()}),_(this,"restoreScroll",function(){var e=s.restoreScrollAfterPrepend,t=e.index,n=e.visibleAreaTop;s.restoreScrollAfterPrepend=void 0;var i=s.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(A("Restore scroll position: scroll by",i),s.scrollTo(0,s.getScrollY()+i))}),_(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==s.getItemsCount()&&!s.multiRenderLayout){if(I(s.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getScrollY()<s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getState().firstShownItemIndex>0||void 0!==s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getScrollY()+s.scrollableContainer.getHeight()>s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getState().lastShownItemIndex<s.getItemsCount()-1;if(A(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return s.onUserStopsScrollingTimeout=p(s.onUserStoppedScrolling,W)}A("~ Update layout (on ".concat(t,") ~")),s.updateShownItemIndexesRecursive()}}),_(this,"onUserStoppedScrolling",function(){s.isRendered&&s.updateLayout("stopped scrolling")});var l=a.getState,u=a.setState,h=a.onStateChange,d=a.customState,c=a.preserveScrollPositionAtBottomOnMount,m=a.shouldUpdateLayoutOnWindowResize,f=a.measureItemsBatchSize,g=a.getScrollableContainer,S=a.tbody,v=a.bypass,y=a.estimatedItemHeight,b=a.onItemInitialRender,w=a.onItemFirstRender,C=a.scrollableContainer,x=a.preserveScrollPositionOfTheBottomOfTheListOnMount,H=a.state;x=x||c,A("~ Initialize ~"),H&&(n=H.items),!C&&g&&(C=g()),C?this.scrollableContainer=new O(C):"undefined"!=typeof window&&(this.scrollableContainer=new R),S&&(A("~ <tbody/> detected ~"),this.tbody=!0,"undefined"!=typeof window&&window.document.documentMode&&(A("~ <tbody/> not supported ~"),"undefined"!=typeof window?setTimeout(function(){throw new Error(P)},0):console.error(P),v=!0)),v&&A('~ "bypass" mode ~'),this.bypass=v,this.initialItems=n,this.estimatedItemHeight=y,this.onStateChange=h,this._shouldUpdateLayoutOnWindowResize=m,this.measureItemsBatchSize=void 0===f?50:f,b?this.onItemFirstRender=b:w&&(this.onItemFirstRender=function(e){console.warn("[virtual-scroller] `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.");var t=s.getState().items.indexOf(e);t>=0&&w(t)}),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),u?(this.getState=l,this.setState=function(e){return u(e,{willUpdateState:s.willUpdateState,didUpdateState:s.didUpdateState})}):(this.getState=function(){return s.state},this.setState=function(e){var t=s.getState(),n=z({},t,e);s.willUpdateState(n,t),s.state=n,s.didUpdateState(t)}),H&&A("Initial state (passed)",H),this.getContainerNode=t,this.itemHeights=new M(t,this.getState),this.scrollableContainer&&x&&(this.preserveScrollPositionOfTheBottomOfTheListOnMount={scrollableContainerContentHeight:this.scrollableContainer.getContentHeight()}),this.setState(H||this.getInitialState(d)),A("Items count",n.length),y&&A("Estimated item height",y)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=z({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return A("Initial state (autogenerated)",n),A("First shown item index",n.firstShownItemIndex),A("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems,i=n.length;return i>0&&(e=0,t=this.getLastShownItemIndex(e,i)),this.preserveScrollPositionOfTheBottomOfTheListOnMount&&(e=0,t=i-1),this.onBeforeShowItems(n,e,t),{itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return this.scrollableContainer?this.getEstimatedItemsCount(2*this.getMargin()+this.scrollableContainer.getHeight()):1}},{key:"getLastShownItemIndex",value:function(e,t){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return this.scrollableContainer.getHeight()}},{key:"onBeforeShowItems",value:function(e,t,n){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var i=t;i<=n;)this.onItemFirstRender(e[i]),i++;this.firstSeenItemIndex=t,this.lastSeenItemIndex=n}else{if(t<this.firstSeenItemIndex){for(var r=t,o=Math.min(n,this.firstSeenItemIndex-1),s=r;s<=o;)this.onItemFirstRender(e[s]),s++;this.firstSeenItemIndex=t}if(n>this.lastSeenItemIndex){for(var a=n,l=Math.max(t,this.lastSeenItemIndex+1);l<=a;)this.onItemFirstRender(e[l]),l++;this.lastSeenItemIndex=n}}}},{key:"onMount",value:function(){console.warn("[virtual-scroller] `.onMount()` instance method name is deprecated, use `.render()` instance method name instead."),this.render()}},{key:"render",value:function(){A("~ Rendered (initial) ~"),this.isRendered=!0,this.onRendered(),this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.restoreScrollPosition(),this.updateScrollPosition(),this.removeScrollPositionListener=this.scrollableContainer.addScrollListener(this.updateScrollPosition),this.bypass||(this.removeScrollListener=this.scrollableContainer.addScrollListener(this.onScroll),this.scrollableContainerUnlistenResize=this.scrollableContainer.onResize(this.onResize)),this.tbody&&function(e){e.classList.add("VirtualScroller");var t=document.getElementById("VirtualScrollerStyle");t||((t=document.createElement("style")).id="VirtualScrollerStyle",t.innerText="\n\t\t\ttbody.VirtualScroller:before {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingTop);\n\t\t\t}\n\t\t\ttbody.VirtualScroller:after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingBottom);\n\t\t\t}\n\t\t".replace(/[\n\t]/g,""),document.head.appendChild(t))}(this.getContainerNode()),this.preserveScrollPositionOfTheBottomOfTheListOnMount?this.scrollTo(0,this.getScrollY()+(this.scrollableContainer.getHeight()-this.preserveScrollPositionOfTheBottomOfTheListOnMount.scrollableContainerContentHeight)):this.onUpdateShownItemIndexes({reason:"mount"})}},{key:"onRendered",value:function(){this.updateItemHeights(),this.tbody&&this.updateTbodyPadding()}},{key:"scrollTo",value:function(e,t){this.scrollableContainer.scrollTo(e,t)}},{key:"getScrollY",value:function(){return this.scrollableContainer.getScrollY()}},{key:"getVisibleAreaBounds",value:function(){var e=this.getScrollY();return{top:e,bottom:e+this.scrollableContainer.getHeight()}}},{key:"getHeight",value:function(){return this.getContainerNode().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerNode())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1}var t=this.scrollableContainerWidth,n=this.scrollableContainerHeight;return this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.scrollableContainerWidth===t?this.scrollableContainerHeight!==n&&"UPDATE_INDEXES":"UPDATE_LAYOUT"}},{key:"onUnmount",value:function(){console.warn("[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead."),this.destroy()}},{key:"destroy",value:function(){this.isRendered=!1,this.removeScrollPositionListener(),this.bypass||(this.removeScrollListener(),this.scrollableContainerUnlistenResize(),I(this.onUserStopsScrollingTimeout),I(this.watchContainerElementCoordinatesTimer))}},{key:"updateTbodyPadding",value:function(){var e=this.getState(),t=e.beforeItemsHeight,n=e.afterItemsHeight;!function(e,t,n){e.style.setProperty("--VirtualScroller-paddingTop",H(t)),e.style.setProperty("--VirtualScroller-paddingBottom",H(n))}(this.getContainerNode(),t,n)}},{key:"updateItemHeights",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex,i=this.getState().firstShownItemIndex;void 0!==t&&(A("~ Measure item heights ~"),this.itemHeights.update(t,n,i),L()&&A("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){L()&&(A("~ Item state changed ~"),A("Item",e),A("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),A("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(A("~ Item height changed ~"),A("Item",e),A("Previous height",n),A("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=this.getTopOffset(),n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,o,s=0,a=!1,l=0;l<this.getItemsCount();){var u=this.itemHeights.get(l);if(void 0===u){A("Item index ".concat(l,' lies within the visible area or its "margins", but its height hasn\'t been measured yet. Mark the item as "shown", render the list, measure the item\'s height and redo the layout.')),o=l,void 0===i&&(i=l);var h=t-(n+s);r=Math.min(l+(this.getEstimatedItemsCount(h)-1),this.getItemsCount()-1),a=!0;break}if(s+=u,void 0===i&&n+s>e&&(A("First visible item index",l),i=l),l<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){A("Last visible item index",l),void 0!==i&&(r=l);break}l++}return void 0!==i&&void 0===r&&A("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(r=Math.min(r,o+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:r,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(n+i>e&&n<t){var r=this.getVisibleItemIndexes(e,t,n);if(void 0!==r.firstShownItemIndex)return r;A("Off-screen")}else A("Off-screen")}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementCoordinates",value:function(){var e=this,t=Date.now();!function n(){e.isRendered&&(void 0!==e.topOffset&&e.getTopOffset()!==e.topOffset&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementCoordinatesTimer=p(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=this.getTopOffset();void 0===this.topOffset&&this.watchContainerElementCoordinates(),this.topOffset=e;var t=this.getVisibleAreaBounds(),n=t.top,i=t.bottom;return this.latestLayoutVisibleAreaTopAfterIncludingMargin=n-this.getMargin(),this.latestLayoutVisibleAreaBottomAfterIncludingMargin=i+this.getMargin(),this.getItemIndexes(n-this.getMargin(),i+this.getMargin(),e,this.getHeight())||this.getOffscreenListShownItemIndexes()}},{key:"onMultiRenderLayoutRendered",value:function(){var e=this;if(this.redoLayoutAfterRender)return this.redoLayoutAfterRender=void 0,p(function(){e.isRendered&&e.updateShownItemIndexesRecursive()},0);this.stopMultiRenderLayout()}},{key:"stopMultiRenderLayout",value:function(){this.multiRenderLayout=void 0,this.redoLayoutAfterRender||this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,visibleAreaTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,o=i.lastShownItemIndex,s=i.beforeItemsHeight,a=i.afterItemsHeight,l=i.itemStates,u=i.itemHeights;i.itemSpacing;A("~ Update items ~");var h=V(n,e),d=h.prependedItemsCount,c=h.appendedItemsCount;d>0||c>0?(d>0&&(A("Prepended items count",d),u=new Array(d).concat(u),l&&(l=new Array(d).concat(l))),c>0&&(A("Appended items count",c),u=u.concat(new Array(c)),l&&(l=l.concat(new Array(c)))),r+=d,o+=d,s+=this.itemHeights.getAverage()*d,a+=this.itemHeights.getAverage()*c):(A("Non-incremental items update"),A("Previous items",n),A("New items",e),u=new Array(e.length),l=new Array(e.length),0===e.length?(r=void 0,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length)),s=0,a=0),A("First shown item index",r),A("Last shown item index",o),A("Before items height",s),A("After items height (actual or estimated)",a),this.onBeforeShowItems(e,r,o),this.preserveScrollPositionOnPrependItems=t.preserveScrollPositionOnPrependItems||t.preserveScrollPosition,this.setState({items:e,itemStates:l,itemHeights:u,firstShownItemIndex:r,lastShownItemIndex:o,beforeItemsHeight:s,afterItemsHeight:a})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&j(t.prototype,n),i&&j(t,i),e}();function V(e,t){var n=-1,i=-1;return e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1),n>=0&&i>=0?{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)}:{prependedItemsCount:-1,appendedItemsCount:-1}}function F(e){return(F="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function D(){return(D=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function Y(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function J(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function X(e){return(X=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function G(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function K(e,t){return(K=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function Q(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var Z=t.elementType||t.oneOfType([t.string,t.func,t.object]),$=function(t){function n(t){var i,r,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,o=X(n).call(this,t),i=!o||"object"!==F(o)&&"function"!=typeof o?G(r):o,Q(G(i),"container",e.createRef()),Q(G(i),"onItemStateChange",new Array(i.props.items.length)),Q(G(i),"onItemHeightChange",new Array(i.props.items.length)),Q(G(i),"itemRefs",new Array(i.props.items.length)),Q(G(i),"uniquePrefixes",[]),Q(G(i),"updateLayout",function(){return i.virtualScroller.updateLayout()}),Q(G(i),"layout",function(){return i.updateLayout()}),Q(G(i),"onItemInitialRender",function(){var e=i.props.onItemInitialRender;e&&e.apply(void 0,arguments)}),Q(G(i),"onItemFirstRender",function(){var e=i.props.onItemFirstRender;e&&e.apply(void 0,arguments)}),Q(G(i),"shouldUpdateLayoutOnWindowResize",function(){var e=i.props.shouldUpdateLayoutOnWindowResize;if(e)return e.apply(void 0,arguments)});var s=i.props,a=s.as,l=s.items,u=s.initialState,h=s.initialCustomState,d=s.onStateChange,c=s.estimatedItemHeight,m=s.preserveScrollPositionOfTheBottomOfTheListOnMount,f=s.preserveScrollPositionAtBottomOnMount,g=s.measureItemsBatchSize,p=s.scrollableContainer,I=s.getScrollableContainer,S=s.bypass;return i.previousItemsProperty=l,i.virtualScroller=new q(function(){return i.container.current},l,{estimatedItemHeight:c,bypass:S,onItemInitialRender:i.onItemInitialRender,onItemFirstRender:i.onItemFirstRender,preserveScrollPositionOfTheBottomOfTheListOnMount:m,preserveScrollPositionAtBottomOnMount:f,shouldUpdateLayoutOnWindowResize:i.shouldUpdateLayoutOnWindowResize,measureItemsBatchSize:g,scrollableContainer:p,getScrollableContainer:I,tbody:"tbody"===a,state:u,customState:h,onStateChange:d,getState:function(){return i.state},setState:function(e,t){var n=t.willUpdateState,r=t.didUpdateState;i.willUpdateState=n,i.didUpdateState=r,i.state?i.setState(e):(n(e),i.state=e,r())}}),i.generateUniquePrefix(),i}var i,r,o;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&K(e,t)}(n,e.Component),i=n,(r=[{key:"shouldUseRefs",value:function(){var e,t=this.props.itemComponent;return(e=t).prototype&&e.prototype.isReactComponent}},{key:"getItemCoordinates",value:function(e){return this.virtualScroller.getItemCoordinates(e)}},{key:"updateItem",value:function(e){return this.renderItem(e)}},{key:"renderItem",value:function(e){var t=this;if(!this.shouldUseRefs())return console.error("[virtual-scroller] `.renderItem(i)` has been called but the `component` doesn't allow `ref`s. Only `component`s that're `React.Component`s support this feature.");if(this.itemRefs[e]&&this.itemRefs[e].current){var n=this.props.items,i=n[e];this.itemRefs[e].current.forceUpdate(function(){if(t._isMounted){var e=n.indexOf(i);e>=0&&t.virtualScroller.onItemHeightChange(e)}})}}},{key:"getItemRef",value:function(t){return this.itemRefs[t]||(this.itemRefs[t]=e.createRef()),this.itemRefs[t]}},{key:"getOnItemStateChange",value:function(e){var t=this;return this.onItemStateChange[e]||(this.onItemStateChange[e]=function(n){return t.virtualScroller.onItemStateChange(e,n)}),this.onItemStateChange[e]}},{key:"getOnItemHeightChange",value:function(e){var t=this;return this.onItemHeightChange[e]||(this.onItemHeightChange[e]=function(){return t.virtualScroller.onItemHeightChange(e)}),this.onItemHeightChange[e]}},{key:"generateUniquePrefix",value:function(){var e=String(Math.random()).slice(2);if(this.uniquePrefixes.indexOf(e)>=0)return this.generateUniquePrefix();this.uniquePrefixes.push(e),this.uniquePrefix=e}},{key:"componentDidMount",value:function(){var e=this.props.onMount;e&&e(),this.virtualScroller.render(),this._isMounted=!0}},{key:"getSnapshotBeforeUpdate",value:function(e,t){return this.state!==t&&this.willUpdateState(this.state,t),null}},{key:"componentDidUpdate",value:function(e,t){this.state!==t&&this.didUpdateState(t);var n=this.props,i=n.items,r=n.preserveScrollPosition,o=n.preserveScrollPositionOnPrependItems;i!==e.items&&this.virtualScroller.setItems(i,{preserveScrollPositionOnPrependItems:o||r})}},{key:"componentWillUnmount",value:function(){this.virtualScroller.destroy(),this._isMounted=!1}},{key:"render",value:function(){var t=this,n=this.props,i=n.as,r=n.itemComponent,o=n.itemComponentProps,s=(n.items,n.estimatedItemHeight,n.bypass,n.preserveScrollPositionOnPrependItems),a=n.preserveScrollPosition,l=(n.preserveScrollPositionOfTheBottomOfTheListOnMount,n.preserveScrollPositionAtBottomOnMount,n.shouldUpdateLayoutOnWindowResize,n.measureItemsBatchSize,n.scrollableContainer,n.getScrollableContainer,n.initialState,n.initialCustomState,n.onStateChange,n.onItemInitialRender,n.onItemFirstRender,n.onMount,n.className),u=Y(n,["as","itemComponent","itemComponentProps","items","estimatedItemHeight","bypass","preserveScrollPositionOnPrependItems","preserveScrollPosition","preserveScrollPositionOfTheBottomOfTheListOnMount","preserveScrollPositionAtBottomOnMount","shouldUpdateLayoutOnWindowResize","measureItemsBatchSize","scrollableContainer","getScrollableContainer","initialState","initialCustomState","onStateChange","onItemInitialRender","onItemFirstRender","onMount","className"]),h=this.virtualScroller.getState(),d=h.items,c=h.itemStates,m=h.firstShownItemIndex,f=h.lastShownItemIndex,g=h.beforeItemsHeight,p=h.afterItemsHeight,I=this.props.items,S=d;if(this.itemsPropertyWasChanged||(this.itemsPropertyWasChanged=this.props.items!==this.previousItemsProperty),this.previousItemsProperty=this.props.items,this.itemsPropertyWasChanged&&I!==S){var v=V(S,I),y=v.prependedItemsCount,b=v.appendedItemsCount;0===y&&b>0||((s||a)&&this.virtualScroller.captureScroll(S,I),this.generateUniquePrefix(),this.onItemStateChange=new Array(I.length),this.onItemHeightChange=new Array(I.length),this.itemRefs=new Array(I.length))}var w=this.virtualScroller.tbody;return e.createElement(i,D({},u,{ref:this.container,className:w?l?l+" VirtualScroller":"VirtualScroller":l,style:{paddingTop:w?void 0:H(g),paddingBottom:w?void 0:H(p)}}),d.map(function(n,i){return i>=m&&i<=f?e.createElement(r,D({},o,{ref:t.shouldUseRefs()?t.getItemRef(i):void 0,key:"".concat(t.uniquePrefix,":").concat(i),state:c&&c[i],onStateChange:t.getOnItemStateChange(i),onHeightChange:t.getOnItemHeightChange(i)}),n):null}))}}])&&J(i.prototype,r),o&&J(i,o),n}();return Q($,"propTypes",{as:Z,items:t.arrayOf(t.object).isRequired,itemComponent:Z.isRequired,itemComponentProps:t.object,estimatedItemHeight:t.number,bypass:t.bool,preserveScrollPositionOnPrependItems:t.bool,preserveScrollPosition:t.bool,preserveScrollPositionOfTheBottomOfTheListOnMount:t.bool,preserveScrollPositionAtBottomOnMount:t.bool,shouldUpdateLayoutOnWindowResize:t.func,measureItemsBatchSize:t.number,scrollableContainer:t.any,getScrollableContainer:t.func,className:t.string,onMount:t.func,onItemInitialRender:t.func,onItemFirstRender:t.func,onStateChange:t.func,initialCustomState:t.object,initialState:t.shape({items:t.arrayOf(t.object).isRequired,itemStates:t.arrayOf(t.any),firstShownItemIndex:t.number.isRequired,lastShownItemIndex:t.number.isRequired,beforeItemsHeight:t.number.isRequired,afterItemsHeight:t.number.isRequired,itemHeights:t.arrayOf(t.number).isRequired,itemSpacing:t.number})}),Q($,"defaultProps",{as:"div"}),$});
 //# sourceMappingURL=virtual-scroller-react.js.map

bundle/virtual-scroller.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};for(var t,n=(function(t){(function(){var e,n,i,o,r,s;"undefined"!=typeof performance&&null!==performance&&performance.now?t.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(t.exports=function(){return(e()-r)/1e6},n=process.hrtime,o=(e=function(){var e;return 1e9*(e=n())[0]+e[1]})(),s=1e9*process.uptime(),r=o-s):Date.now?(t.exports=function(){return Date.now()-i},i=Date.now()):(t.exports=function(){return(new Date).getTime()-i},i=(new Date).getTime())}).call(e)}(t={exports:{}},t.exports),t.exports),i="undefined"==typeof window?e:window,o=["moz","webkit"],r="AnimationFrame",s=i["request"+r],a=i["cancel"+r]||i["cancelRequest"+r],l=0;!s&&l<o.length;l++)s=i[o[l]+"Request"+r],a=i[o[l]+"Cancel"+r]||i[o[l]+"CancelRequest"+r];if(!s||!a){var h=0,u=0,d=[];s=function(e){if(0===d.length){var t=n(),i=Math.max(0,1e3/60-(t-h));h=i+t,setTimeout(function(){var e=d.slice(0);d.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(h)}catch(e){setTimeout(function(){throw e},0)}},Math.round(i))}return d.push({handle:++u,callback:e,cancelled:!1}),u},a=function(e){for(var t=0;t<d.length;t++)d[t].handle===e&&(d[t].cancelled=!0)}}var c=function(e){return s.call(i,e)};c.cancel=function(){a.apply(i,arguments)},c.polyfill=function(e){e||(e=i),e.requestAnimationFrame=s,e.cancelAnimationFrame=a};var m=c.cancel;function f(e,t){var n=Date.now(),i=c(function o(){Date.now()-n>=t?e():i=c(o)});return{clear:function(){return m(i)}}}function g(e){e&&e.clear()}function I(e){return(I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t){return!t||"object"!==I(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function S(e){return(S=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function v(e,t){return(v=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function b(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function w(e,t,n){return t&&b(e.prototype,t),n&&b(e,n),e}var x=function(){function e(t){y(this,e),this.element=t}return w(e,[{key:"getScrollY",value:function(){return this.element.scrollTop}},{key:"scrollTo",value:function(e,t){this.element.scrollTo(e,t)}},{key:"getWidth",value:function(){return this.element.offsetWidth}},{key:"getHeight",value:function(){return this.element.offsetHeight}},{key:"getContentHeight",value:function(){return this.element.scrollHeight}},{key:"getTopOffset",value:function(e){var t=this.element.getBoundingClientRect().top,n=this.element.clientTop;return e.getBoundingClientRect().top-t+this.getScrollY()-n}},{key:"addScrollListener",value:function(e){var t=this;return this.element.addEventListener("scroll",e),function(){return t.element.removeEventListener("scroll",e)}}},{key:"onResize",value:function(e){var t,n=this;if("undefined"!=typeof ResizeObserver){var i=new ResizeObserver(function(t){var n=t,i=Array.isArray(n),o=0;for(n=i?n:n[Symbol.iterator]();;){if(i){if(o>=n.length)break;n[o++]}else{if((o=n.next()).done)break;o.value}return e()}});i.observe(this.element),t=function(){return i.unobserve(n.element)}}var o=(new C).onResize(e);return function(){t&&t(),o()}}}]),e}(),C=function(e){function t(){return y(this,t),p(this,S(t).call(this,window))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&v(e,t)}(t,x),w(t,[{key:"getScrollY",value:function(){return window.pageYOffset}},{key:"getWidth",value:function(){return window.innerWidth}},{key:"getHeight",value:function(){return window.innerHeight}},{key:"getContentHeight",value:function(){return document.documentElement.scrollHeight}},{key:"getTopOffset",value:function(e){var t=document.clientTop||document.body.clientTop||0;return e.getBoundingClientRect().top+this.getScrollY()-t}},{key:"onResize",value:function(e){return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}}]),t}();function H(e){return e.toFixed(2)+"px"}var k="[virtual-scroller] It looks like you're using Internet Explorer which doesn't support CSS variables required for a <tbody/> container. VirtualScroller has been switched into \"bypass\" mode (render all items). See: https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1";function A(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function O(){if(M()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,A(["[virtual-scroller]"].concat(n)))}}function M(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function T(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var P=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.reset()}var t,n,i;return t=e,(n=[{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onInitItemHeights",value:function(){this.reset();for(var e=0;e<this.getState().itemHeights.length;){if(null==this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),o=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&O("Measure item spacing",o),o}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,o=this.lastMeasuredItemIndex,r=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this.set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,r||(this.firstMeasuredItemIndex=s,r=!0)),(void 0===o||s>o)&&(void 0!==o&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&T(t.prototype,n),i&&T(t,i),e}();function R(e){return(R="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var L=Object.prototype.hasOwnProperty;function B(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function E(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){z(e,t,n[t])})}return e}function U(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function z(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var j=250,V=100;return function(){function e(t,n){var i,o,r,s=this,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),z(this,"updateLayout",function(){return s.onUpdateShownItemIndexes({reason:"manual"})}),z(this,"onScroll",function(){return s.onUpdateShownItemIndexes({reason:"scroll"})}),z(this,"restoreScrollPosition",function(){var e=s.getState().scrollY;void 0!==e&&s.scrollTo(0,e)}),z(this,"updateScrollPosition",function(){return s.getState().scrollY=s.getScrollY()}),z(this,"layout",function(){return s.updateLayout()}),z(this,"onResize",(i=function(e){s.isMounted&&s.shouldUpdateLayoutOnScrollableContainerResize(e)&&(O("~ Scrollable container size changed, re-measure item heights. ~"),s.setState(s.getInitialLayoutState(),function(){s.onInitialRender("resize")}))},o=j,function(){for(var e=this,t=arguments.length,n=new Array(t),s=0;s<t;s++)n[s]=arguments[s];clearTimeout(r),r=setTimeout(function(){return i.apply(e,n)},o)})),z(this,"updateShownItemIndexes",function(e){var t=s.getShownItemIndexes(),n=t.firstShownItemIndex,i=t.lastShownItemIndex,o=t.redoLayoutAfterRender,r=s.getBeforeItemsHeight(n,i),a=s.getAfterItemsHeight(n,i);s.updateWillBeHiddenItemHeightsAndState(n,i),O("~ Layout results "+(s.bypass?"(bypass) ":"")+"~"),O("First shown item index",n),O("Last shown item index",i),O("Before items height",r),O("After items height (actual or estimated)",a),O("Average item height (calculated on previous render)",s.itemHeights.getAverage()),M()&&(O("Item heights",s.getState().itemHeights.slice()),O("Item states",s.getState().itemStates.slice())),o&&O("Schedule a re-layout after the upcoming rerender"),void 0!==s.firstSeenItemIndex&&(n>s.lastSeenItemIndex+1||i<s.firstSeenItemIndex-1)&&(s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.onBeforeShowItems(n,i),s.setState({firstShownItemIndex:n,lastShownItemIndex:i,beforeItemsHeight:r,afterItemsHeight:a},function(){return e(o)})}),z(this,"updateShownItemIndexesRecursive",function(){s.updateShownItemIndexes(function(e){e?f(function(){s.isMounted?s.updateShownItemIndexesRecursive():s.onDoneUpdatingItemIndexes()},0):s.onDoneUpdatingItemIndexes()})}),z(this,"restoreScroll",function(){var e=s.restoreScrollAfterPrepend,t=e.index,n=e.visibleAreaTop;s.restoreScrollAfterPrepend=void 0;var i=s.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(O("Restore scroll position: scroll by",i),s.scrollTo(0,s.getScrollY()+i))}),z(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==s.getItemsCount()&&!s.isUpdatingItemIndexes){if(g(s.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getScrollY()<s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getState().firstShownItemIndex>0||void 0!==s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getScrollY()+s.scrollableContainer.getHeight()>s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getState().lastShownItemIndex<s.getItemsCount()-1;if(O(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return s.onUserStopsScrollingTimeout=f(s.onUserStoppedScrolling,V)}O("~ Update layout (on ".concat(t,") ~")),s.isUpdatingItemIndexes=!0,s.updateShownItemIndexesRecursive()}}),z(this,"onUserStoppedScrolling",function(){s.isMounted&&s.updateLayout("stopped scrolling")});var l=a.getState,h=a.setState,u=a.onStateChange,d=a.customState,c=a.preserveScrollPositionAtBottomOnMount,m=a.shouldUpdateLayoutOnWindowResize,I=a.measureItemsBatchSize,p=a.getScrollableContainer,S=a.tbody,v=a.bypass,y=a.estimatedItemHeight,b=a.onItemFirstRender,w=a.scrollableContainer,H=a.state;O("~ Initialize ~"),H&&(n=H.items),!w&&p&&(w=p()),w?this.scrollableContainer=new x(w):"undefined"!=typeof window&&(this.scrollableContainer=new C),S&&(O("~ <tbody/> detected ~"),this.tbody=!0,"undefined"!=typeof window&&window.document.documentMode&&(O("~ <tbody/> not supported ~"),"undefined"!=typeof window?setTimeout(function(){throw new Error(k)},0):console.error(k),v=!0)),v&&O('~ "bypass" mode ~'),this.bypass=v,this.initialItems=n,this.estimatedItemHeight=y,this._shouldUpdateLayoutOnWindowResize=m,this.measureItemsBatchSize=void 0===I?50:I,b&&(this.onItemFirstRender=b),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),h?(this.getState=l,this.setState=h):(this.getState=function(){return s.state},this.setState=function(e,t){var n=s.state;s.state=E({},n,e),function(e,t){if(B(e,t))return!0;if("object"!==R(e)||null===e||"object"!==R(t)||null===t)return!1;var n=Object.keys(e),i=Object.keys(t);if(n.length!==i.length)return!1;for(var o=0;o<n.length;o++)if(!L.call(t,n[o])||!B(e[n[o]],t[n[o]]))return!1;return!0}(s.state,n)||(u&&u(s.state,n),s.isMounted&&s.onUpdate(n)),t&&t()}),H&&O("Initial state (passed)",H),this.getContainerNode=t,this.itemHeights=new P(t,this.getState),this.scrollableContainer&&c&&(this.preserveScrollPositionAtBottomOnMount={scrollableContainerContentHeight:this.scrollableContainer.getContentHeight()}),this.setState(H||this.getInitialState(d),function(){s.itemHeights.onInitItemHeights()}),O("Items count",n.length),y&&O("Estimated item height",y)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=E({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return O("Initial state (autogenerated)",n),O("First shown item index",n.firstShownItemIndex),O("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems.length;return n>0&&(e=0,t=this.getLastShownItemIndex(e,n)),this.preserveScrollPositionAtBottomOnMount&&(e=0,t=n-1),this.onBeforeShowItems(e,t),{itemHeights:new Array(n),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return this.scrollableContainer?this.getEstimatedItemsCount(2*this.getMargin()+this.scrollableContainer.getHeight()):1}},{key:"getLastShownItemIndex",value:function(e,t){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return this.scrollableContainer.getHeight()}},{key:"onBeforeShowItems",value:function(e,t){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var n=e;n<=t;)this.onItemFirstRender(n),n++;this.firstSeenItemIndex=e,this.lastSeenItemIndex=t}else{if(e<this.firstSeenItemIndex){for(var i=e,o=Math.min(t,this.firstSeenItemIndex-1),r=i;r<=o;)this.onItemFirstRender(r),r++;this.firstSeenItemIndex=e}if(t>this.lastSeenItemIndex){for(var s=t,a=Math.max(e,this.lastSeenItemIndex+1);a<=s;)this.onItemFirstRender(a),a++;this.lastSeenItemIndex=t}}}},{key:"onMount",value:function(){this.isMounted=!0,this.onInitialRender("mount"),this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.restoreScrollPosition(),this.updateScrollPosition(),this.removeScrollPositionListener=this.scrollableContainer.addScrollListener(this.updateScrollPosition),this.bypass||(this.removeScrollListener=this.scrollableContainer.addScrollListener(this.onScroll),this.scrollableContainerUnlistenResize=this.scrollableContainer.onResize(this.onResize)),this.tbody&&(!function(e){e.classList.add("VirtualScroller");var t=document.getElementById("VirtualScrollerStyle");t||((t=document.createElement("style")).id="VirtualScrollerStyle",t.innerText="\n\t\t\ttbody.VirtualScroller:before {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingTop);\n\t\t\t}\n\t\t\ttbody.VirtualScroller:after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingBottom);\n\t\t\t}\n\t\t".replace(/[\n\t]/g,""),document.head.appendChild(t))}(this.getContainerNode()),this.updateTbodyPadding())}},{key:"onInitialRender",value:function(e){var t=this.getState(),n=t.firstShownItemIndex,i=t.lastShownItemIndex;O("~ Rendered (initial) ~"),this.getItemsCount()>0&&this.updateItemHeights(n,i),this.preserveScrollPositionAtBottomOnMount?this.scrollTo(0,this.getScrollY()+(this.scrollableContainer.getHeight()-this.preserveScrollPositionAtBottomOnMount.scrollableContainerContentHeight)):this.onUpdateShownItemIndexes({reason:e})}},{key:"scrollTo",value:function(e,t){this.scrollableContainer.scrollTo(e,t)}},{key:"getScrollY",value:function(){return this.scrollableContainer.getScrollY()}},{key:"getVisibleAreaBounds",value:function(){var e=this.getScrollY();return{top:e,bottom:e+this.scrollableContainer.getHeight()}}},{key:"getHeight",value:function(){return this.getContainerNode().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerNode())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1}var t=this.scrollableContainerWidth,n=this.scrollableContainerHeight;return this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.scrollableContainerWidth!==t||this.scrollableContainerHeight!==n&&(this.onUpdateShownItemIndexes({reason:"resize"}),!1)}},{key:"onUnmount",value:function(){this.isMounted=!1,this.removeScrollPositionListener(),this.bypass||(this.removeScrollListener(),this.scrollableContainerUnlistenResize(),g(this.onUserStopsScrollingTimeout),g(this.watchContainerElementCoordinatesTimer))}},{key:"onUpdate",value:function(e){var t=this.getState(),n=t.items,i=t.firstShownItemIndex,o=t.lastShownItemIndex;O("~ Rendered ~"),i===e.firstShownItemIndex&&o===e.lastShownItemIndex&&n===e.items||(this.updateItemHeights(i,o),this.tbody&&this.updateTbodyPadding())}},{key:"updateTbodyPadding",value:function(){var e=this.getState(),t=e.beforeItemsHeight,n=e.afterItemsHeight;!function(e,t,n){e.style.setProperty("--VirtualScroller-paddingTop",H(t)),e.style.setProperty("--VirtualScroller-paddingBottom",H(n))}(this.getContainerNode(),t,n)}},{key:"updateItemHeights",value:function(e,t){var n=this.getState().firstShownItemIndex;void 0!==e&&(O("~ Measure item heights ~"),this.itemHeights.update(e,t,n),M()&&O("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){M()&&(O("~ Item state changed ~"),O("Item",e),O("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),O("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(O("~ Item height changed ~"),O("Item",e),O("Previous height",n),O("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=this.getTopOffset(),n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,o,r,s=0,a=!1,l=0;l<this.getItemsCount();){var h=this.itemHeights.get(l);if(void 0===h){O("Item index ".concat(l,' lies within the visible area or its "margins", but its height hasn\'t been measured yet. Mark the item as "shown", render the list, measure the item\'s height and redo the layout.')),r=l,void 0===i&&(i=l);var u=t-(n+s);o=Math.min(l+(this.getEstimatedItemsCount(u)-1),this.getItemsCount()-1),a=!0;break}if(s+=h,void 0===i&&n+s>e&&(O("First visible item index",l),i=l),l<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){O("Last visible item index",l),void 0!==i&&(o=l);break}l++}return void 0!==i&&void 0===o&&O("Last item index (is fully visible)",o=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(o<this.restoreScrollAfterPrepend.index&&(o=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(o=Math.min(o,r+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:o,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(n+i>e&&n<t){var o=this.getVisibleItemIndexes(e,t,n);if(void 0!==o.firstShownItemIndex)return o;O("Off-screen")}else O("Off-screen")}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementCoordinates",value:function(){var e=this,t=Date.now();!function n(){e.isMounted&&(void 0!==e.topOffset&&e.getTopOffset()!==e.topOffset&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementCoordinatesTimer=f(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=this.getTopOffset();void 0===this.topOffset&&this.watchContainerElementCoordinates(),this.topOffset=e;var t=this.getVisibleAreaBounds(),n=t.top,i=t.bottom;return this.latestLayoutVisibleAreaTopAfterIncludingMargin=n-this.getMargin(),this.latestLayoutVisibleAreaBottomAfterIncludingMargin=i+this.getMargin(),this.getItemIndexes(n-this.getMargin(),i+this.getMargin(),e,this.getHeight())||this.getOffscreenListShownItemIndexes()}},{key:"onDoneUpdatingItemIndexes",value:function(){this.isUpdatingItemIndexes=!1,this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,visibleAreaTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=this.getState().items,o=this.getState(),r=o.firstShownItemIndex,s=o.lastShownItemIndex,a=o.beforeItemsHeight,l=o.afterItemsHeight,h=o.itemStates,u=o.itemHeights;o.itemSpacing;O("~ Update items ~");var d=function(e,t){var n=-1,i=-1;e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1);if(n>=0&&i>=0)return{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)};return{prependedItemsCount:-1,appendedItemsCount:-1}}(i,e),c=d.prependedItemsCount,m=d.appendedItemsCount,f=c>0||m>0;f?(c>0&&(O("Prepended items count",c),u=new Array(c).concat(u),this.itemHeights.onPrepend(c),h&&(h=new Array(c).concat(h)),(n.preserveScrollPositionOnPrependItems||n.preserveScrollPosition)&&this.captureScroll(i,e,c)),m>0&&(O("Appended items count",m),u=u.concat(new Array(m)),h&&(h=h.concat(new Array(m)))),void 0!==this.firstSeenItemIndex&&(this.firstSeenItemIndex+=c,this.lastSeenItemIndex+=c),r+=c,s+=c,a+=this.itemHeights.getAverage()*c,l+=this.itemHeights.getAverage()*m):(O("Non-incremental items update"),O("Previous items",i),O("New items",e),u=new Array(e.length),h=new Array(e.length),this.firstSeenItemIndex=void 0,this.lastSeenItemIndex=void 0,0===e.length?(r=void 0,s=void 0):(r=0,s=this.getLastShownItemIndex(r,e.length)),a=0,l=0),O("First shown item index",r),O("Last shown item index",s),O("Before items height",a),O("After items height (actual or estimated)",l),this.onBeforeShowItems(r,s),this.setState(E({},void 0,{items:e,itemStates:h,itemHeights:u,firstShownItemIndex:r,lastShownItemIndex:s,beforeItemsHeight:a,afterItemsHeight:l}),function(){f||t.itemHeights.onInitItemHeights(),t.onUpdateShownItemIndexes({reason:"update items",force:!0})})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&U(t.prototype,n),i&&U(t,i),e}()});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VirtualScroller=t()}(this,function(){"use strict";var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};for(var t,n=(function(t){(function(){var e,n,i,r,o,s;"undefined"!=typeof performance&&null!==performance&&performance.now?t.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(t.exports=function(){return(e()-o)/1e6},n=process.hrtime,r=(e=function(){var e;return 1e9*(e=n())[0]+e[1]})(),s=1e9*process.uptime(),o=r-s):Date.now?(t.exports=function(){return Date.now()-i},i=Date.now()):(t.exports=function(){return(new Date).getTime()-i},i=(new Date).getTime())}).call(e)}(t={exports:{}},t.exports),t.exports),i="undefined"==typeof window?e:window,r=["moz","webkit"],o="AnimationFrame",s=i["request"+o],a=i["cancel"+o]||i["cancelRequest"+o],l=0;!s&&l<r.length;l++)s=i[r[l]+"Request"+o],a=i[r[l]+"Cancel"+o]||i[r[l]+"CancelRequest"+o];if(!s||!a){var u=0,h=0,d=[];s=function(e){if(0===d.length){var t=n(),i=Math.max(0,1e3/60-(t-u));u=i+t,setTimeout(function(){var e=d.slice(0);d.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(u)}catch(e){setTimeout(function(){throw e},0)}},Math.round(i))}return d.push({handle:++h,callback:e,cancelled:!1}),h},a=function(e){for(var t=0;t<d.length;t++)d[t].handle===e&&(d[t].cancelled=!0)}}var c=function(e){return s.call(i,e)};c.cancel=function(){a.apply(i,arguments)},c.polyfill=function(e){e||(e=i),e.requestAnimationFrame=s,e.cancelAnimationFrame=a};var m=c.cancel;function f(e,t){var n=Date.now(),i=c(function r(){Date.now()-n>=t?e():i=c(r)});return{clear:function(){return m(i)}}}function g(e){e&&e.clear()}function I(e){return(I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t){return!t||"object"!==I(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function S(e){return(S=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function v(e,t){return(v=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function w(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function b(e,t,n){return t&&w(e.prototype,t),n&&w(e,n),e}var x=function(){function e(t){y(this,e),this.element=t}return b(e,[{key:"getScrollY",value:function(){return this.element.scrollTop}},{key:"scrollTo",value:function(e,t){this.element.scrollTo(e,t)}},{key:"getWidth",value:function(){return this.element.offsetWidth}},{key:"getHeight",value:function(){return this.element.offsetHeight}},{key:"getContentHeight",value:function(){return this.element.scrollHeight}},{key:"getTopOffset",value:function(e){var t=this.element.getBoundingClientRect().top,n=this.element.clientTop;return e.getBoundingClientRect().top-t+this.getScrollY()-n}},{key:"addScrollListener",value:function(e){var t=this;return this.element.addEventListener("scroll",e),function(){return t.element.removeEventListener("scroll",e)}}},{key:"onResize",value:function(e){var t,n=this;if("undefined"!=typeof ResizeObserver){var i=new ResizeObserver(function(t){var n=t,i=Array.isArray(n),r=0;for(n=i?n:n[Symbol.iterator]();;){if(i){if(r>=n.length)break;n[r++]}else{if((r=n.next()).done)break;r.value}return e()}});i.observe(this.element),t=function(){return i.unobserve(n.element)}}var r=(new C).onResize(e);return function(){t&&t(),r()}}}]),e}(),C=function(e){function t(){return y(this,t),p(this,S(t).call(this,window))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&v(e,t)}(t,x),b(t,[{key:"getScrollY",value:function(){return window.pageYOffset}},{key:"getWidth",value:function(){return window.innerWidth}},{key:"getHeight",value:function(){return window.innerHeight}},{key:"getContentHeight",value:function(){return document.documentElement.scrollHeight}},{key:"getTopOffset",value:function(e){var t=document.clientTop||document.body.clientTop||0;return e.getBoundingClientRect().top+this.getScrollY()-t}},{key:"onResize",value:function(e){return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}}]),t}();function H(e){return e.toFixed(2)+"px"}var k="[virtual-scroller] It looks like you're using Internet Explorer which doesn't support CSS variables required for a <tbody/> container. VirtualScroller has been switched into \"bypass\" mode (render all items). See: https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1";function O(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function R(){if(A()){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];(e=console).log.apply(e,O(["[virtual-scroller]"].concat(n)))}}function A(){return"undefined"!=typeof window&&window.VirtualScrollerDebug}function L(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}var T=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.getContainerNode=t,this.getState=n,this.initialize()}var t,n,i;return t=e,(n=[{key:"initialize",value:function(){this.reset(),this.getState()&&this.onStateUpdate()}},{key:"reset",value:function(){this.measuredItemsHeight=0,this.firstMeasuredItemIndex=void 0,this.lastMeasuredItemIndex=void 0}},{key:"onStateUpdate",value:function(){for(var e=0;e<this.getState().itemHeights.length;){if(void 0===this.getState().itemHeights[e]){if(void 0!==this.firstMeasuredItemIndex){this.lastMeasuredItemIndex=e-1;break}}else void 0===this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex=e),this.measuredItemsHeight+=this.getState().itemHeights[e];e++}}},{key:"_getItemHeight",value:function(e,t){var n=this.getContainerNode();if(n){var i=e-t;if(i>=0&&i<n.childNodes.length)return n.childNodes[i].getBoundingClientRect().height}}},{key:"getItemSpacing",value:function(){var e=this.getContainerNode();if(e&&e.childNodes.length>1){var t=e.childNodes[0],n=e.childNodes[1],i=t.getBoundingClientRect(),r=n.getBoundingClientRect().top-(i.top+i.height);return window.VirtualScrollerDebug&&R("Measure item spacing",r),r}}},{key:"update",value:function(e,t,n){void 0===this.getState().itemSpacing&&(this.getState().itemSpacing=this.getItemSpacing()),void 0!==this.firstMeasuredItemIndex&&(e>this.lastMeasuredItemIndex+1||t<this.firstMeasuredItemIndex-1)&&this.reset();for(var i=this.firstMeasuredItemIndex,r=this.lastMeasuredItemIndex,o=!1,s=e;s<=t;){var a=this._getItemHeight(s,n);void 0!==a&&(this.set(s,a),(void 0===i||s<i)&&(this.measuredItemsHeight+=a,o||(this.firstMeasuredItemIndex=s,o=!0)),(void 0===r||s>r)&&(void 0!==r&&(this.measuredItemsHeight+=a),this.lastMeasuredItemIndex=s)),s++}}},{key:"updateItemHeight",value:function(e,t){var n=this.get(e),i=this._getItemHeight(e,t);void 0!==n&&void 0!==i&&(this.set(e,i),this.measuredItemsHeight+=i-n)}},{key:"getAverage",value:function(){return this.measuredItemsHeight?this.measuredItemsHeight/(this.lastMeasuredItemIndex-this.firstMeasuredItemIndex+1):0}},{key:"get",value:function(e){return this.getState().itemHeights[e]}},{key:"set",value:function(e,t){this.getState().itemHeights[e]=t}},{key:"onPrepend",value:function(e){void 0!==this.firstMeasuredItemIndex&&(this.firstMeasuredItemIndex+=e,this.lastMeasuredItemIndex+=e)}}])&&L(t.prototype,n),i&&L(t,i),e}();function P(e){return(P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var M=Object.prototype.hasOwnProperty;function E(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!=e&&t!=t}function U(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(t){z(e,t,n[t])})}return e}function B(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function z(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var N=250,j=100;function V(e,t){var n=-1,i=-1;return e.length>0&&(n=t.indexOf(e[0]))>=0&&function(e,t,n){var i=0;for(;i<e.length;){if(t.length<=n+i||t[n+i]!==e[i])return!1;i++}return!0}(e,t,n)&&(i=n+e.length-1),n>=0&&i>=0?{prependedItemsCount:n,appendedItemsCount:t.length-(i+1)}:{prependedItemsCount:-1,appendedItemsCount:-1}}return function(){function e(t,n){var i,r,o,s=this,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),z(this,"updateLayout",function(){return s.onUpdateShownItemIndexes({reason:"manual"})}),z(this,"onScroll",function(){return s.onUpdateShownItemIndexes({reason:"scroll"})}),z(this,"restoreScrollPosition",function(){var e=s.getState().scrollY;void 0!==e&&s.scrollTo(0,e)}),z(this,"updateScrollPosition",function(){return s.getState().scrollY=s.getScrollY()}),z(this,"layout",function(){return s.updateLayout()}),z(this,"onResize",(i=function(e){if(s.isRendered){var t=s.shouldUpdateLayoutOnScrollableContainerResize(e);"UPDATE_LAYOUT"===t?(R("~ Scrollable container size changed, re-measure item heights. ~"),s.resized=!0,s.setState(s.getInitialLayoutState())):"UPDATE_INDEXES"===t&&s.onUpdateShownItemIndexes({reason:"resize"})}},r=N,function(){for(var e=this,t=arguments.length,n=new Array(t),s=0;s<t;s++)n[s]=arguments[s];clearTimeout(o),o=setTimeout(function(){return i.apply(e,n)},r)})),z(this,"willUpdateState",function(e,t){if(t&&s.preserveScrollPositionOnPrependItems){s.preserveScrollPositionOnPrependItems=void 0;var n=t.items,i=e.items,r=V(n,i).prependedItemsCount;s.captureScroll(n,i,r)}}),z(this,"didUpdateState",function(e){var t=s.getState();if(s.onStateChange&&(function(e,t){if(E(e,t))return!0;if("object"!==P(e)||null===e||"object"!==P(t)||null===t)return!1;var n=Object.keys(e),i=Object.keys(t);if(n.length!==i.length)return!1;for(var r=0;r<n.length;r++)if(!M.call(t,n[r])||!E(e[n[r]],t[n[r]]))return!1;return!0}(t,e)||s.onStateChange(t,e)),e&&s.isRendered){R("~ Rendered ~"),t.firstShownItemIndex===e.firstShownItemIndex&&t.lastShownItemIndex===e.lastShownItemIndex&&t.items===e.items||s.onRendered();var n=e.items,i=t.items;if(i!==n){var r=V(n,i),o=r.prependedItemsCount,a=r.appendedItemsCount;return o>0||a>0?o>0&&(s.itemHeights.onPrepend(o),void 0!==s.firstSeenItemIndex&&(s.firstSeenItemIndex+=o,s.lastSeenItemIndex+=o)):(s.itemHeights.initialize(),s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.multiRenderLayout&&s.stopMultiRenderLayout(),s.onUpdateShownItemIndexes({reason:"update items",force:!0})}return s.resized?(s.resized=void 0,R("~ Rendered (resize) ~"),s.multiRenderLayout&&s.stopMultiRenderLayout(),s.onUpdateShownItemIndexes({reason:"resize"})):s.multiRenderLayout?s.onMultiRenderLayoutRendered():void 0}}),z(this,"updateShownItemIndexes",function(){var e=s.getShownItemIndexes(),t=e.firstShownItemIndex,n=e.lastShownItemIndex,i=e.redoLayoutAfterRender,r=s.getBeforeItemsHeight(t,n),o=s.getAfterItemsHeight(t,n);s.updateWillBeHiddenItemHeightsAndState(t,n),R("~ Layout results "+(s.bypass?"(bypass) ":"")+"~"),R("First shown item index",t),R("Last shown item index",n),R("Before items height",r),R("After items height (actual or estimated)",o),R("Average item height (calculated on previous render)",s.itemHeights.getAverage()),A()&&(R("Item heights",s.getState().itemHeights.slice()),R("Item states",s.getState().itemStates.slice())),i&&(R("Schedule a re-layout after the upcoming rerender"),s.redoLayoutAfterRender=!0),void 0!==s.firstSeenItemIndex&&(t>s.lastSeenItemIndex+1||n<s.firstSeenItemIndex-1)&&(s.firstSeenItemIndex=void 0,s.lastSeenItemIndex=void 0),s.onBeforeShowItems(s.getState().items,t,n),s.setState({firstShownItemIndex:t,lastShownItemIndex:n,beforeItemsHeight:r,afterItemsHeight:o})}),z(this,"updateShownItemIndexesRecursive",function(){s.multiRenderLayout=!0,s.updateShownItemIndexes()}),z(this,"restoreScroll",function(){var e=s.restoreScrollAfterPrepend,t=e.index,n=e.visibleAreaTop;s.restoreScrollAfterPrepend=void 0;var i=s.getItemElement(t).getBoundingClientRect().top-n;0!==i&&(R("Restore scroll position: scroll by",i),s.scrollTo(0,s.getScrollY()+i))}),z(this,"onUpdateShownItemIndexes",function(e){var t=e.reason;e.force;if(0!==s.getItemsCount()&&!s.multiRenderLayout){if(g(s.onUserStopsScrollingTimeout),"scroll"===t){var n=void 0!==s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getScrollY()<s.latestLayoutVisibleAreaTopAfterIncludingMargin&&s.getState().firstShownItemIndex>0||void 0!==s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getScrollY()+s.scrollableContainer.getHeight()>s.latestLayoutVisibleAreaBottomAfterIncludingMargin&&s.getState().lastShownItemIndex<s.getItemsCount()-1;if(R(n?"The user has scrolled far enough: force re-render":"The user hasn't scrolled too much: delay re-render"),!n)return s.onUserStopsScrollingTimeout=f(s.onUserStoppedScrolling,j)}R("~ Update layout (on ".concat(t,") ~")),s.updateShownItemIndexesRecursive()}}),z(this,"onUserStoppedScrolling",function(){s.isRendered&&s.updateLayout("stopped scrolling")});var l=a.getState,u=a.setState,h=a.onStateChange,d=a.customState,c=a.preserveScrollPositionAtBottomOnMount,m=a.shouldUpdateLayoutOnWindowResize,I=a.measureItemsBatchSize,p=a.getScrollableContainer,S=a.tbody,v=a.bypass,y=a.estimatedItemHeight,w=a.onItemInitialRender,b=a.onItemFirstRender,H=a.scrollableContainer,O=a.preserveScrollPositionOfTheBottomOfTheListOnMount,L=a.state;O=O||c,R("~ Initialize ~"),L&&(n=L.items),!H&&p&&(H=p()),H?this.scrollableContainer=new x(H):"undefined"!=typeof window&&(this.scrollableContainer=new C),S&&(R("~ <tbody/> detected ~"),this.tbody=!0,"undefined"!=typeof window&&window.document.documentMode&&(R("~ <tbody/> not supported ~"),"undefined"!=typeof window?setTimeout(function(){throw new Error(k)},0):console.error(k),v=!0)),v&&R('~ "bypass" mode ~'),this.bypass=v,this.initialItems=n,this.estimatedItemHeight=y,this.onStateChange=h,this._shouldUpdateLayoutOnWindowResize=m,this.measureItemsBatchSize=void 0===I?50:I,w?this.onItemFirstRender=w:b&&(this.onItemFirstRender=function(e){console.warn("[virtual-scroller] `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.");var t=s.getState().items.indexOf(e);t>=0&&b(t)}),t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),u?(this.getState=l,this.setState=function(e){return u(e,{willUpdateState:s.willUpdateState,didUpdateState:s.didUpdateState})}):(this.getState=function(){return s.state},this.setState=function(e){var t=s.getState(),n=U({},t,e);s.willUpdateState(n,t),s.state=n,s.didUpdateState(t)}),L&&R("Initial state (passed)",L),this.getContainerNode=t,this.itemHeights=new T(t,this.getState),this.scrollableContainer&&O&&(this.preserveScrollPositionOfTheBottomOfTheListOnMount={scrollableContainerContentHeight:this.scrollableContainer.getContentHeight()}),this.setState(L||this.getInitialState(d)),R("Items count",n.length),y&&R("Estimated item height",y)}var t,n,i;return t=e,(n=[{key:"getInitialState",value:function(e){var t=this.initialItems.length,n=U({},e,this.getInitialLayoutState(),{items:this.initialItems,itemStates:new Array(t)});return R("Initial state (autogenerated)",n),R("First shown item index",n.firstShownItemIndex),R("Last shown item index",n.lastShownItemIndex),n}},{key:"getInitialLayoutState",value:function(){var e,t,n=this.initialItems,i=n.length;return i>0&&(e=0,t=this.getLastShownItemIndex(e,i)),this.preserveScrollPositionOfTheBottomOfTheListOnMount&&(e=0,t=i-1),this.onBeforeShowItems(n,e,t),{itemHeights:new Array(i),itemSpacing:void 0,beforeItemsHeight:0,afterItemsHeight:0,firstShownItemIndex:e,lastShownItemIndex:t,scrollY:void 0}}},{key:"getEstimatedItemHeight",value:function(){return this.itemHeights&&this.itemHeights.getAverage()||this.estimatedItemHeight||0}},{key:"getItemSpacing",value:function(){return this.getState()&&this.getState().itemSpacing||0}},{key:"getEstimatedItemsCount",value:function(e){return this.getEstimatedItemHeight()?Math.ceil((e+this.getItemSpacing())/(this.getEstimatedItemHeight()+this.getItemSpacing())):1}},{key:"getEstimatedItemsCountOnScreen",value:function(){return this.scrollableContainer?this.getEstimatedItemsCount(2*this.getMargin()+this.scrollableContainer.getHeight()):1}},{key:"getLastShownItemIndex",value:function(e,t){return this.bypass?t-1:Math.min(e+(this.getEstimatedItemsCountOnScreen()-1),t-1)}},{key:"getItemsCount",value:function(){return this.getState().items.length}},{key:"getMargin",value:function(){return this.scrollableContainer.getHeight()}},{key:"onBeforeShowItems",value:function(e,t,n){if(this.onItemFirstRender)if(void 0===this.firstSeenItemIndex){for(var i=t;i<=n;)this.onItemFirstRender(e[i]),i++;this.firstSeenItemIndex=t,this.lastSeenItemIndex=n}else{if(t<this.firstSeenItemIndex){for(var r=t,o=Math.min(n,this.firstSeenItemIndex-1),s=r;s<=o;)this.onItemFirstRender(e[s]),s++;this.firstSeenItemIndex=t}if(n>this.lastSeenItemIndex){for(var a=n,l=Math.max(t,this.lastSeenItemIndex+1);l<=a;)this.onItemFirstRender(e[l]),l++;this.lastSeenItemIndex=n}}}},{key:"onMount",value:function(){console.warn("[virtual-scroller] `.onMount()` instance method name is deprecated, use `.render()` instance method name instead."),this.render()}},{key:"render",value:function(){R("~ Rendered (initial) ~"),this.isRendered=!0,this.onRendered(),this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.restoreScrollPosition(),this.updateScrollPosition(),this.removeScrollPositionListener=this.scrollableContainer.addScrollListener(this.updateScrollPosition),this.bypass||(this.removeScrollListener=this.scrollableContainer.addScrollListener(this.onScroll),this.scrollableContainerUnlistenResize=this.scrollableContainer.onResize(this.onResize)),this.tbody&&function(e){e.classList.add("VirtualScroller");var t=document.getElementById("VirtualScrollerStyle");t||((t=document.createElement("style")).id="VirtualScrollerStyle",t.innerText="\n\t\t\ttbody.VirtualScroller:before {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingTop);\n\t\t\t}\n\t\t\ttbody.VirtualScroller:after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: table-row;\n\t\t\t\theight: var(--VirtualScroller-paddingBottom);\n\t\t\t}\n\t\t".replace(/[\n\t]/g,""),document.head.appendChild(t))}(this.getContainerNode()),this.preserveScrollPositionOfTheBottomOfTheListOnMount?this.scrollTo(0,this.getScrollY()+(this.scrollableContainer.getHeight()-this.preserveScrollPositionOfTheBottomOfTheListOnMount.scrollableContainerContentHeight)):this.onUpdateShownItemIndexes({reason:"mount"})}},{key:"onRendered",value:function(){this.updateItemHeights(),this.tbody&&this.updateTbodyPadding()}},{key:"scrollTo",value:function(e,t){this.scrollableContainer.scrollTo(e,t)}},{key:"getScrollY",value:function(){return this.scrollableContainer.getScrollY()}},{key:"getVisibleAreaBounds",value:function(){var e=this.getScrollY();return{top:e,bottom:e+this.scrollableContainer.getHeight()}}},{key:"getHeight",value:function(){return this.getContainerNode().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerNode())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerNode().contains(document.fullscreenElement))return!1;if(this._shouldUpdateLayoutOnWindowResize&&!this._shouldUpdateLayoutOnWindowResize(e))return!1}var t=this.scrollableContainerWidth,n=this.scrollableContainerHeight;return this.scrollableContainerWidth=this.scrollableContainer.getWidth(),this.scrollableContainerHeight=this.scrollableContainer.getHeight(),this.scrollableContainerWidth===t?this.scrollableContainerHeight!==n&&"UPDATE_INDEXES":"UPDATE_LAYOUT"}},{key:"onUnmount",value:function(){console.warn("[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead."),this.destroy()}},{key:"destroy",value:function(){this.isRendered=!1,this.removeScrollPositionListener(),this.bypass||(this.removeScrollListener(),this.scrollableContainerUnlistenResize(),g(this.onUserStopsScrollingTimeout),g(this.watchContainerElementCoordinatesTimer))}},{key:"updateTbodyPadding",value:function(){var e=this.getState(),t=e.beforeItemsHeight,n=e.afterItemsHeight;!function(e,t,n){e.style.setProperty("--VirtualScroller-paddingTop",H(t)),e.style.setProperty("--VirtualScroller-paddingBottom",H(n))}(this.getContainerNode(),t,n)}},{key:"updateItemHeights",value:function(){var e=this.getState(),t=e.firstShownItemIndex,n=e.lastShownItemIndex,i=this.getState().firstShownItemIndex;void 0!==t&&(R("~ Measure item heights ~"),this.itemHeights.update(t,n,i),A()&&R("Item heights",this.getState().itemHeights.slice()))}},{key:"updateItemHeight",value:function(e){var t=this.getState().firstShownItemIndex;this.itemHeights.updateItemHeight(e,t)}},{key:"onItemStateChange",value:function(e,t){A()&&(R("~ Item state changed ~"),R("Item",e),R("Previous state\n"+JSON.stringify(this.getState().itemStates[e],null,2)),R("New state\n"+JSON.stringify(t,null,2))),this.getState().itemStates[e]=t}},{key:"onItemHeightChange",value:function(e){var t=this.getState().itemHeights,n=t[e];this.updateItemHeight(e);var i=t[e];n!==i&&(R("~ Item height changed ~"),R("Item",e),R("Previous height",n),R("New height",i),this.onUpdateShownItemIndexes({reason:"item height change"}))}},{key:"getItemCoordinates",value:function(e){for(var t=this.getTopOffset(),n=0;n<e;)t+=this.getState().itemHeights[n],t+=this.getItemSpacing(),n++;return{top:t,bottom:t+this.getState().itemHeights[e],height:this.getState().itemHeights[n]}}},{key:"getVisibleItemIndexes",value:function(e,t,n){for(var i,r,o,s=0,a=!1,l=0;l<this.getItemsCount();){var u=this.itemHeights.get(l);if(void 0===u){R("Item index ".concat(l,' lies within the visible area or its "margins", but its height hasn\'t been measured yet. Mark the item as "shown", render the list, measure the item\'s height and redo the layout.')),o=l,void 0===i&&(i=l);var h=t-(n+s);r=Math.min(l+(this.getEstimatedItemsCount(h)-1),this.getItemsCount()-1),a=!0;break}if(s+=u,void 0===i&&n+s>e&&(R("First visible item index",l),i=l),l<this.getItemsCount()-1&&(s+=this.getItemSpacing()),n+s>t){R("Last visible item index",l),void 0!==i&&(r=l);break}l++}return void 0!==i&&void 0===r&&R("Last item index (is fully visible)",r=this.getItemsCount()-1),this.restoreScrollAfterPrepend&&(r<this.restoreScrollAfterPrepend.index&&(r=this.restoreScrollAfterPrepend.index),a=!1),a&&this.measureItemsBatchSize&&(r=Math.min(r,o+this.measureItemsBatchSize-1)),{firstShownItemIndex:i,lastShownItemIndex:r,redoLayoutAfterRender:a}}},{key:"getOffscreenListShownItemIndexes",value:function(){return{firstShownItemIndex:0,lastShownItemIndex:0,redoLayoutAfterRender:void 0===this.itemHeights.get(0)}}},{key:"getItemIndexes",value:function(e,t,n,i){if(n+i>e&&n<t){var r=this.getVisibleItemIndexes(e,t,n);if(void 0!==r.firstShownItemIndex)return r;R("Off-screen")}else R("Off-screen")}},{key:"getBeforeItemsHeight",value:function(e,t){for(var n=0,i=0;i<e;)n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),n+=this.getItemSpacing(),i++;return n}},{key:"getAfterItemsHeight",value:function(e,t){for(var n=0,i=t+1;i<this.getItemsCount();)n+=this.getItemSpacing(),n+=this.itemHeights.get(i)||this.itemHeights.getAverage(),i++;return n}},{key:"updateWillBeHiddenItemHeightsAndState",value:function(e,t){for(var n=this.getState().firstShownItemIndex;n<=this.getState().lastShownItemIndex;)n>=e&&n<=t||this.updateItemHeight(n),n++}},{key:"watchContainerElementCoordinates",value:function(){var e=this,t=Date.now();!function n(){e.isRendered&&(void 0!==e.topOffset&&e.getTopOffset()!==e.topOffset&&e.onUpdateShownItemIndexes({reason:"top offset change"}),Date.now()-t<3e3&&(e.watchContainerElementCoordinatesTimer=f(n,500)))}()}},{key:"getShownItemIndexes",value:function(){if(this.bypass)return{firstShownItemIndex:0,lastShownItemIndex:this.getItemsCount()-1};var e=this.getTopOffset();void 0===this.topOffset&&this.watchContainerElementCoordinates(),this.topOffset=e;var t=this.getVisibleAreaBounds(),n=t.top,i=t.bottom;return this.latestLayoutVisibleAreaTopAfterIncludingMargin=n-this.getMargin(),this.latestLayoutVisibleAreaBottomAfterIncludingMargin=i+this.getMargin(),this.getItemIndexes(n-this.getMargin(),i+this.getMargin(),e,this.getHeight())||this.getOffscreenListShownItemIndexes()}},{key:"onMultiRenderLayoutRendered",value:function(){var e=this;if(this.redoLayoutAfterRender)return this.redoLayoutAfterRender=void 0,f(function(){e.isRendered&&e.updateShownItemIndexesRecursive()},0);this.stopMultiRenderLayout()}},{key:"stopMultiRenderLayout",value:function(){this.multiRenderLayout=void 0,this.redoLayoutAfterRender||this.restoreScrollAfterPrepend&&this.restoreScroll()}},{key:"captureScroll",value:function(e,t,n){0!==e.length&&(void 0===n&&(n=t.indexOf(e[0])),n<0||0!==n&&(this.getState().firstShownItemIndex>0||this.restoreScrollAfterPrepend&&this.restoreScrollAfterPrepend.previousItems===e&&this.restoreScrollAfterPrepend.nextItems===t||(this.restoreScrollAfterPrepend={previousItems:e,nextItems:t,index:n,visibleAreaTop:this.getItemElement(0).getBoundingClientRect().top})))}},{key:"updateItems",value:function(e,t){return this.setItems(e,t)}},{key:"setItems",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this.getState().items,i=this.getState(),r=i.firstShownItemIndex,o=i.lastShownItemIndex,s=i.beforeItemsHeight,a=i.afterItemsHeight,l=i.itemStates,u=i.itemHeights;i.itemSpacing;R("~ Update items ~");var h=V(n,e),d=h.prependedItemsCount,c=h.appendedItemsCount;d>0||c>0?(d>0&&(R("Prepended items count",d),u=new Array(d).concat(u),l&&(l=new Array(d).concat(l))),c>0&&(R("Appended items count",c),u=u.concat(new Array(c)),l&&(l=l.concat(new Array(c)))),r+=d,o+=d,s+=this.itemHeights.getAverage()*d,a+=this.itemHeights.getAverage()*c):(R("Non-incremental items update"),R("Previous items",n),R("New items",e),u=new Array(e.length),l=new Array(e.length),0===e.length?(r=void 0,o=void 0):(r=0,o=this.getLastShownItemIndex(r,e.length)),s=0,a=0),R("First shown item index",r),R("Last shown item index",o),R("Before items height",s),R("After items height (actual or estimated)",a),this.onBeforeShowItems(e,r,o),this.preserveScrollPositionOnPrependItems=t.preserveScrollPositionOnPrependItems||t.preserveScrollPosition,this.setState({items:e,itemStates:l,itemHeights:u,firstShownItemIndex:r,lastShownItemIndex:o,beforeItemsHeight:s,afterItemsHeight:a})}},{key:"getItemElement",value:function(e){return this.getContainerNode().childNodes[e]}}])&&B(t.prototype,n),i&&B(t,i),e}()});
 //# sourceMappingURL=virtual-scroller.js.map

CHANGELOG.md

 <!-- `virtual-scroller`: in `.updateItems()` handle a case when `items.length` is the same, in which case find different items and if those items are rendered then maybe update them on screen and update their height, if the items are past rendered then maybe just discard all item heights past rendered, if the items are before rendered then maybe ignore and it will jump on scroll up which is kinda acceptable. -->
 
+1.5.0 / 12.09.2020
+==================
+
+* (unlikely breaking change) If custom `setState` is defined, then it must call two `VirtualScroller`'s instance methods: `.willUpdateState(newState, prevState)` and `.didUpdateState(prevState)`. This is unlikely to break anyone's code because it's unlikely that someone implemented their own `VirtualScroller` rather than using the provided `/dom` or `/react` ones.
+
+* (unlikely breaking change) Removed `.onUpdate(prevState)` instance method of `VirtualScroller`: it has been superceded by `.didUpdateState(prevState)`. This is unlikely to break anyone's code because it's unlikely that someone implemented their own `VirtualScroller` rather than using the provided `/dom` or `/react` ones.
+
+* (unlikely breaking change) `setState(newState)` option function no longer receives the second `callback` argument (instead, the argument is an object now). This is unlikely to break anyone's code because it's unlikely that someone implemented their own `VirtualScroller` rather than using the provided `/dom` or `/react` ones.
+
+* Fixed "window is not defined" error on server side.
+
+* Renamed `.onMount()` instance method to `.render()`. The older method name still works.
+
+* Renamed `.onUnmount()` instance method to `.destroy()`. The older method name still works.
+
+* Renamed `preserveScrollPositionAtBottomOnMount` option/property to `preserveScrollPositionOfTheBottomOfTheListOnMount`.
+
+* Deprecated `onItemFirstRender(i)`. Added `onItemInitialRender(item)` as a replacement. The reason is that `item` is more consistent than `i` which can be non-consistent with the `items` passed to `<VirtualScroller/>` in React due to `setState()` not being instanteneous: when new `items` are passed to `<VirtualScroller/>`, `VirtualScroller.setState({ items })` is called, and if `onItemFirstRender(i)` is called after the aforementioned `setState()` is called but before it finishes, `i` would point to an index in "previous" `items` while the application would assume that `i` points to an index in the "new" `items`, resulting in an incorrect item being assumed by the application or even in an "array index out of bounds" error.
+
 1.4.1 / 10.09.2020
@@ -4,0 +23,0 @@ ==================

commonjs/DOMVirtualScroller.js

@@ -117,5 +117,11 @@ "use strict";
     _defineProperty(this, "onUnmount", function () {
-      _this.virtualScroller.onUnmount();
+      console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead.');
+
+      _this.destroy();
     });
 
+    _defineProperty(this, "destroy", function () {
+      _this.virtualScroller.destroy();
+    });
+
     this.container = element;
@@ -142,3 +148,3 @@ this.renderItem = renderItem;
 
-    this.virtualScroller.onMount();
+    this.virtualScroller.render();
   }
@@ -145,0 +151,0 @@

commonjs/ItemHeights.js

@@ -26,6 +26,15 @@ "use strict";
     this.getState = getState;
-    this.reset();
+    this.initialize();
   }
 
   _createClass(ItemHeights, [{
+    key: "initialize",
+    value: function initialize() {
+      this.reset();
+
+      if (this.getState()) {
+        this.onStateUpdate();
+      }
+    }
+  }, {
     key: "reset",
@@ -35,10 +44,7 @@ value: function reset() {
       this.firstMeasuredItemIndex = undefined;
-      this.lastMeasuredItemIndex = undefined; // this.averageItemHeight = undefined
-      // this.averageItemHeightSamplesCount = undefined
-      // this.previousAverageItemHeight = undefined
-      // this.previousAverageItemHeightSamplesCount = undefined
+      this.lastMeasuredItemIndex = undefined;
     }
     /**
      * Initializes `this.measuredItemsHeight`, `this.firstMeasuredItemIndex` and
-     * `this.lastMeasuredItemIndex` instance variables.
+     * `this.lastMeasuredItemIndex` instance variables from the `state`.
      * These instance variables are used when calculating "average" item height:
@@ -54,9 +60,8 @@ * the "average" item height is simply `this.measuredItemsHeight` divided by
   }, {
-    key: "onInitItemHeights",
-    value: function onInitItemHeights() {
-      this.reset();
+    key: "onStateUpdate",
+    value: function onStateUpdate() {
       var i = 0;
 
       while (i < this.getState().itemHeights.length) {
-        if (this.getState().itemHeights[i] == undefined) {
+        if (this.getState().itemHeights[i] === undefined) {
           if (this.firstMeasuredItemIndex !== undefined) {
@@ -63,0 +68,0 @@ this.lastMeasuredItemIndex = i - 1;

commonjs/ReactVirtualScroller.js

@@ -14,4 +14,2 @@ "use strict";
 
-var _shallowEqual = _interopRequireDefault(require("./shallowEqual"));
-
 var _utility = require("./utility");
@@ -91,2 +89,10 @@
 
+    _defineProperty(_assertThisInitialized(_this), "onItemInitialRender", function () {
+      var onItemInitialRender = _this.props.onItemInitialRender;
+
+      if (onItemInitialRender) {
+        onItemInitialRender.apply(void 0, arguments);
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onItemFirstRender", function () {
@@ -108,10 +114,2 @@ var onItemFirstRender = _this.props.onItemFirstRender;
 
-    _defineProperty(_assertThisInitialized(_this), "onStateChange", function () {
-      var onStateChange = _this.props.onStateChange;
-
-      if (onStateChange) {
-        onStateChange.apply(void 0, arguments);
-      }
-    });
-
     var _this$props = _this.props,
@@ -122,3 +120,5 @@ AsComponent = _this$props.as,
         initialCustomState = _this$props.initialCustomState,
+        onStateChange = _this$props.onStateChange,
         estimatedItemHeight = _this$props.estimatedItemHeight,
+        preserveScrollPositionOfTheBottomOfTheListOnMount = _this$props.preserveScrollPositionOfTheBottomOfTheListOnMount,
         preserveScrollPositionAtBottomOnMount = _this$props.preserveScrollPositionAtBottomOnMount,
@@ -139,3 +139,8 @@ measureItemsBatchSize = _this$props.measureItemsBatchSize,
       // bypassBatchSize,
+      onItemInitialRender: _this.onItemInitialRender,
+      // `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
       onItemFirstRender: _this.onItemFirstRender,
+      preserveScrollPositionOfTheBottomOfTheListOnMount: preserveScrollPositionOfTheBottomOfTheListOnMount,
+      // `preserveScrollPositionAtBottomOnMount` property name is deprecated,
+      // use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
       preserveScrollPositionAtBottomOnMount: preserveScrollPositionAtBottomOnMount,
@@ -151,14 +156,20 @@ shouldUpdateLayoutOnWindowResize: _this.shouldUpdateLayoutOnWindowResize,
       customState: initialCustomState,
+      onStateChange: onStateChange,
       getState: function getState() {
         return _this.state;
       },
-      setState: function setState(newState, callback) {
+      setState: function setState(newState, _ref) {
+        var willUpdateState = _ref.willUpdateState,
+            didUpdateState = _ref.didUpdateState;
+        _this.willUpdateState = willUpdateState;
+        _this.didUpdateState = didUpdateState;
+
         if (_this.state) {
           // Update existing state.
-          _this.setState(newState, callback);
+          _this.setState(newState);
         } else {
           // Set initial state.
+          willUpdateState(newState);
           _this.state = newState;
-
-          _this.onStateChange(newState);
+          didUpdateState();
         }
@@ -307,22 +318,30 @@ }
 
-      this.virtualScroller.onMount();
+      this.virtualScroller.render();
       this._isMounted = true;
-    }
+    } // `getSnapshotBeforeUpdate()` is called right before `componentDidUpdate()`.
+
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var onStateChange = this.props.onStateChange; // An application may choose to track `virtual-scroller` state
-      // for restoring it later on "Back" navigation.
+    key: "getSnapshotBeforeUpdate",
+    value: function getSnapshotBeforeUpdate(prevProps, prevState) {
+      if (this.state !== prevState) {
+        this.willUpdateState(this.state, prevState);
+      } // Returns `null` to avoid React warning:
+      // "A snapshot value (or null) must be returned. You have returned undefined".
 
-      if (onStateChange) {
-        if (!(0, _shallowEqual["default"])(this.state, prevState)) {
-          onStateChange(this.state, prevState);
-        }
-      } // Re-measure rendered items' heights.
 
+      return null;
+    } // `componentDidUpdate()` is called immediately after React component has re-rendered.
+    // That would correspond to `useLayoutEffect()` in React Hooks.
 
-      this.virtualScroller.onUpdate(prevState); // If `items` property did change then update `virtual-scroller` items.
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      // If `state` did change.
+      if (this.state !== prevState) {
+        this.didUpdateState(prevState);
+      } // If `items` property did change then update `virtual-scroller` items.
       // This could have been done in `.render()` but `.setItems()` calls
       // `.setState()` internally which would result in React throwing an error.
 
+
       var _this$props2 = this.props,
@@ -344,3 +363,3 @@ items = _this$props2.items,
     value: function componentWillUnmount() {
-      this.virtualScroller.onUnmount();
+      this.virtualScroller.destroy();
       this._isMounted = false;
@@ -362,2 +381,3 @@ }
           preserveScrollPosition = _this$props3.preserveScrollPosition,
+          preserveScrollPositionOfTheBottomOfTheListOnMount = _this$props3.preserveScrollPositionOfTheBottomOfTheListOnMount,
           preserveScrollPositionAtBottomOnMount = _this$props3.preserveScrollPositionAtBottomOnMount,
@@ -371,6 +391,7 @@ shouldUpdateLayoutOnWindowResize = _this$props3.shouldUpdateLayoutOnWindowResize,
           onStateChange = _this$props3.onStateChange,
+          onItemInitialRender = _this$props3.onItemInitialRender,
           onItemFirstRender = _this$props3.onItemFirstRender,
           onMount = _this$props3.onMount,
           className = _this$props3.className,
-          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "scrollableContainer", "getScrollableContainer", "initialState", "initialCustomState", "onStateChange", "onItemFirstRender", "onMount", "className"]);
+          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionOfTheBottomOfTheListOnMount", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "scrollableContainer", "getScrollableContainer", "initialState", "initialCustomState", "onStateChange", "onItemInitialRender", "onItemFirstRender", "onMount", "className"]);
 
@@ -507,2 +528,5 @@ var _this$virtualScroller = this.virtualScroller.getState(),
   preserveScrollPosition: _propTypes["default"].bool,
+  preserveScrollPositionOfTheBottomOfTheListOnMount: _propTypes["default"].bool,
+  // `preserveScrollPositionAtBottomOnMount` property name is deprecated,
+  // use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
   preserveScrollPositionAtBottomOnMount: _propTypes["default"].bool,
@@ -517,2 +541,4 @@ shouldUpdateLayoutOnWindowResize: _propTypes["default"].func,
   onMount: _propTypes["default"].func,
+  onItemInitialRender: _propTypes["default"].func,
+  // `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
   onItemFirstRender: _propTypes["default"].func,
@@ -519,0 +545,0 @@ onStateChange: _propTypes["default"].func,

modules/DOMVirtualScroller.js

@@ -106,5 +106,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
     _defineProperty(this, "onUnmount", function () {
-      _this.virtualScroller.onUnmount();
+      console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead.');
+
+      _this.destroy();
     });
 
+    _defineProperty(this, "destroy", function () {
+      _this.virtualScroller.destroy();
+    });
+
     this.container = element;
@@ -131,3 +137,3 @@ this.renderItem = renderItem;
 
-    this.virtualScroller.onMount();
+    this.virtualScroller.render();
   }
@@ -134,0 +140,0 @@

modules/ItemHeights.js

@@ -17,6 +17,15 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
     this.getState = getState;
-    this.reset();
+    this.initialize();
   }
 
   _createClass(ItemHeights, [{
+    key: "initialize",
+    value: function initialize() {
+      this.reset();
+
+      if (this.getState()) {
+        this.onStateUpdate();
+      }
+    }
+  }, {
     key: "reset",
@@ -26,10 +35,7 @@ value: function reset() {
       this.firstMeasuredItemIndex = undefined;
-      this.lastMeasuredItemIndex = undefined; // this.averageItemHeight = undefined
-      // this.averageItemHeightSamplesCount = undefined
-      // this.previousAverageItemHeight = undefined
-      // this.previousAverageItemHeightSamplesCount = undefined
+      this.lastMeasuredItemIndex = undefined;
     }
     /**
      * Initializes `this.measuredItemsHeight`, `this.firstMeasuredItemIndex` and
-     * `this.lastMeasuredItemIndex` instance variables.
+     * `this.lastMeasuredItemIndex` instance variables from the `state`.
      * These instance variables are used when calculating "average" item height:
@@ -45,9 +51,8 @@ * the "average" item height is simply `this.measuredItemsHeight` divided by
   }, {
-    key: "onInitItemHeights",
-    value: function onInitItemHeights() {
-      this.reset();
+    key: "onStateUpdate",
+    value: function onStateUpdate() {
       var i = 0;
 
       while (i < this.getState().itemHeights.length) {
-        if (this.getState().itemHeights[i] == undefined) {
+        if (this.getState().itemHeights[i] === undefined) {
           if (this.firstMeasuredItemIndex !== undefined) {
@@ -54,0 +59,0 @@ this.lastMeasuredItemIndex = i - 1;

modules/ReactVirtualScroller.js

@@ -30,3 +30,2 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 import VirtualScroller, { getItemsDiff } from './VirtualScroller';
-import shallowEqual from './shallowEqual';
 import { px } from './utility'; // `PropTypes.elementType` is available in some version of `prop-types`.
@@ -75,2 +74,10 @@ // https://github.com/facebook/prop-types/issues/200
 
+    _defineProperty(_assertThisInitialized(_this), "onItemInitialRender", function () {
+      var onItemInitialRender = _this.props.onItemInitialRender;
+
+      if (onItemInitialRender) {
+        onItemInitialRender.apply(void 0, arguments);
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onItemFirstRender", function () {
@@ -92,10 +99,2 @@ var onItemFirstRender = _this.props.onItemFirstRender;
 
-    _defineProperty(_assertThisInitialized(_this), "onStateChange", function () {
-      var onStateChange = _this.props.onStateChange;
-
-      if (onStateChange) {
-        onStateChange.apply(void 0, arguments);
-      }
-    });
-
     var _this$props = _this.props,
@@ -106,3 +105,5 @@ AsComponent = _this$props.as,
         initialCustomState = _this$props.initialCustomState,
+        onStateChange = _this$props.onStateChange,
         estimatedItemHeight = _this$props.estimatedItemHeight,
+        preserveScrollPositionOfTheBottomOfTheListOnMount = _this$props.preserveScrollPositionOfTheBottomOfTheListOnMount,
         preserveScrollPositionAtBottomOnMount = _this$props.preserveScrollPositionAtBottomOnMount,
@@ -123,3 +124,8 @@ measureItemsBatchSize = _this$props.measureItemsBatchSize,
       // bypassBatchSize,
+      onItemInitialRender: _this.onItemInitialRender,
+      // `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
       onItemFirstRender: _this.onItemFirstRender,
+      preserveScrollPositionOfTheBottomOfTheListOnMount: preserveScrollPositionOfTheBottomOfTheListOnMount,
+      // `preserveScrollPositionAtBottomOnMount` property name is deprecated,
+      // use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
       preserveScrollPositionAtBottomOnMount: preserveScrollPositionAtBottomOnMount,
@@ -135,14 +141,20 @@ shouldUpdateLayoutOnWindowResize: _this.shouldUpdateLayoutOnWindowResize,
       customState: initialCustomState,
+      onStateChange: onStateChange,
       getState: function getState() {
         return _this.state;
       },
-      setState: function setState(newState, callback) {
+      setState: function setState(newState, _ref) {
+        var willUpdateState = _ref.willUpdateState,
+            didUpdateState = _ref.didUpdateState;
+        _this.willUpdateState = willUpdateState;
+        _this.didUpdateState = didUpdateState;
+
         if (_this.state) {
           // Update existing state.
-          _this.setState(newState, callback);
+          _this.setState(newState);
         } else {
           // Set initial state.
+          willUpdateState(newState);
           _this.state = newState;
-
-          _this.onStateChange(newState);
+          didUpdateState();
         }
@@ -291,22 +303,30 @@ }
 
-      this.virtualScroller.onMount();
+      this.virtualScroller.render();
       this._isMounted = true;
-    }
+    } // `getSnapshotBeforeUpdate()` is called right before `componentDidUpdate()`.
+
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var onStateChange = this.props.onStateChange; // An application may choose to track `virtual-scroller` state
-      // for restoring it later on "Back" navigation.
+    key: "getSnapshotBeforeUpdate",
+    value: function getSnapshotBeforeUpdate(prevProps, prevState) {
+      if (this.state !== prevState) {
+        this.willUpdateState(this.state, prevState);
+      } // Returns `null` to avoid React warning:
+      // "A snapshot value (or null) must be returned. You have returned undefined".
 
-      if (onStateChange) {
-        if (!shallowEqual(this.state, prevState)) {
-          onStateChange(this.state, prevState);
-        }
-      } // Re-measure rendered items' heights.
 
+      return null;
+    } // `componentDidUpdate()` is called immediately after React component has re-rendered.
+    // That would correspond to `useLayoutEffect()` in React Hooks.
 
-      this.virtualScroller.onUpdate(prevState); // If `items` property did change then update `virtual-scroller` items.
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      // If `state` did change.
+      if (this.state !== prevState) {
+        this.didUpdateState(prevState);
+      } // If `items` property did change then update `virtual-scroller` items.
       // This could have been done in `.render()` but `.setItems()` calls
       // `.setState()` internally which would result in React throwing an error.
 
+
       var _this$props2 = this.props,
@@ -328,3 +348,3 @@ items = _this$props2.items,
     value: function componentWillUnmount() {
-      this.virtualScroller.onUnmount();
+      this.virtualScroller.destroy();
       this._isMounted = false;
@@ -346,2 +366,3 @@ }
           preserveScrollPosition = _this$props3.preserveScrollPosition,
+          preserveScrollPositionOfTheBottomOfTheListOnMount = _this$props3.preserveScrollPositionOfTheBottomOfTheListOnMount,
           preserveScrollPositionAtBottomOnMount = _this$props3.preserveScrollPositionAtBottomOnMount,
@@ -355,6 +376,7 @@ shouldUpdateLayoutOnWindowResize = _this$props3.shouldUpdateLayoutOnWindowResize,
           onStateChange = _this$props3.onStateChange,
+          onItemInitialRender = _this$props3.onItemInitialRender,
           onItemFirstRender = _this$props3.onItemFirstRender,
           onMount = _this$props3.onMount,
           className = _this$props3.className,
-          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "scrollableContainer", "getScrollableContainer", "initialState", "initialCustomState", "onStateChange", "onItemFirstRender", "onMount", "className"]);
+          rest = _objectWithoutProperties(_this$props3, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionOfTheBottomOfTheListOnMount", "preserveScrollPositionAtBottomOnMount", "shouldUpdateLayoutOnWindowResize", "measureItemsBatchSize", "scrollableContainer", "getScrollableContainer", "initialState", "initialCustomState", "onStateChange", "onItemInitialRender", "onItemFirstRender", "onMount", "className"]);
 
@@ -489,2 +511,5 @@ var _this$virtualScroller = this.virtualScroller.getState(),
   preserveScrollPosition: PropTypes.bool,
+  preserveScrollPositionOfTheBottomOfTheListOnMount: PropTypes.bool,
+  // `preserveScrollPositionAtBottomOnMount` property name is deprecated,
+  // use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
   preserveScrollPositionAtBottomOnMount: PropTypes.bool,
@@ -499,2 +524,4 @@ shouldUpdateLayoutOnWindowResize: PropTypes.func,
   onMount: PropTypes.func,
+  onItemInitialRender: PropTypes.func,
+  // `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
   onItemFirstRender: PropTypes.func,
@@ -501,0 +528,0 @@ onStateChange: PropTypes.func,

package.json

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

README.md

@@ -69,3 +69,3 @@ # VirtualScroller
 * `items` is the list of items (is only used to get items count).
-* `options` is an optional argument.
+* `options`: a developer must either supply `getState`/`setState` options or `onStateChange` option (or both).
 
@@ -78,11 +78,11 @@ Available `options`:
 -->
-* `state: object` — The initial state for `VirtualScroller`. Can be used, for example, to quicky restore the list on "Back" navigation.
+* `state: object` — The initial state for `VirtualScroller`. Can be used, for example, to quicky restore the list when it's re-rendered on "Back" navigation.
 * `customState: object` — (advanced) The initial "custom" state for `VirtualScroller`. It can be used to initialize the "custom" part of `VirtualScroller` state in cases when `VirtualScroller` state is used to store some "custom" list state.
-* `getState(): object` — Returns `VirtualScroller` `state`. Is used for React `VirtualScroller` component implementation.
-* `setState(newState: object)` — Stores `VirtualScroller` `state` (including setting the initial `state`). The `state` must reflect what's currently rendered on screen. Is used for React `VirtualScroller` component implementation.
-* `onStateChange(newState: object, prevState: object?)` — Is called whenever `VirtualScroller` `state` is updated (including setting the initial `state`) if `getState()` and `setState()` properties aren't defined.
+* `getState(): object` — (advanced) By default, `VirtualScroller` manages `state` internally by storing it in an instance variable. For more control, the `state` could be managed externally, in which case a developer should supply `getState`/`setState` options, in which case `getState` should return the externally stored `VirtualScroller` `state`. React `VirtualScroller` component implementation uses this option.
+* `setState(newState: object, { willUpdateState, didUpdateState })` — (advanced) By default, `VirtualScroller` manages `state` internally by storing it in an instance variable. For more control, the `state` could be managed externally, in which case a developer should supply `getState`/`setState` options, in which case `setState` should update the externally stored `VirtualScroller` `state` (including setting the initial `state`). `setState` must also call two functions: `willUpdateState(newState, prevState)` right before the state is updated and `didUpdateState(prevState)` right after the state is updated. The list should be re-rendered as part of either `setState` or `onStateChange`. React `VirtualScroller` component implementation uses this option.
+* `onStateChange(newState: object, prevState: object?)` — Is called whenever `VirtualScroller` `state` is updated (including setting the initial `state`). A developer must either supply `getState`/`setState` options or `onStateChange` option (or both). The list should be re-rendered as part of either `setState` or `onStateChange`.
 * `scrollableContainer: Element` — (advanced) If the list is being rendered in a "scrollable container" (for example, if one of the parent elements of the list is styled with `max-height` and `overflow: auto`), then passing the "scrollable container" DOM Element is required for correct operation. *This feature is considered [experimental](https://github.com/catamphetamine/virtual-scroller/issues/8).* The width and height of the `scrollableContainer` shouldn't change unless window is resized.
 * `bypass: boolean` — Pass `true` to turn off `VirtualScroller` behavior and just render the full list of items.
-* `onItemFirstRender(i: number)` — Is called for each item the first time it's rendered. Is guaranteed to be called at least one time for each item rendered, though could also be called multiple times. For an example of using such feature, consider a list of items that must be somehow preprocessed (parsed, enhanced, etc) before being rendered, and such preprocessing puts some load on the CPU (and therefore takes some time). In such case, instead of preprocessing the whole list of items upfront, a developer could preprocess the items as they're being rendered thereby eliminating any associated lag/freezing and draining less battery.
-* `preserveScrollPositionAtBottomOnMount: boolean` — (advanced) Set to `true` to preserve scroll position of the bottom of the list when it's first mounted. A possible use case: consider a forum thread only showing unread posts by default. If a user navigates to such thread, it could show "No new posts" message with a "Show previous" button above it. When the user clicks the "Show previous" button, a `<VirtualScroller/>` is mounted with a list of posts. If `preserveScrollPositionAtBottomOnMount: true` is set then, after the list of posts is shown, page scroll will be restored so that the bottom of the list remains on screen so that the user could start scrolling up to read the "previous" posts starting from the most recent ones to the oldest ones.
+* `onItemInitialRender(item)` — Is called for each item the first time it's rendered. Is guaranteed to be called at least one time for each item rendered, though could also be called multiple times. For an example of using such feature, consider a list of items that must be somehow preprocessed (parsed, enhanced, etc) before being rendered, and such preprocessing puts some load on the CPU (and therefore takes some time). In such case, instead of preprocessing the whole list of items upfront, a developer could preprocess the items as they're being rendered thereby eliminating any associated lag/freezing and draining less battery.
+* `preserveScrollPositionOfTheBottomOfTheListOnMount: boolean` — (advanced) Set to `true` to preserve scroll position relative to the bottom of the list when it's first mounted. A possible use case: consider a forum thread only showing unread posts by default. If a user navigates to such thread, it could show "No new posts" message with a "Show previous" button above it. When the user clicks the "Show previous" button, a `<VirtualScroller/>` is mounted with a list of posts. If `preserveScrollPositionOfTheBottomOfTheListOnMount: true` is set, then, after the list of posts is shown, page scroll will be restored so that the bottom of the list remains on screen so that the user could start scrolling up to read the "previous" posts starting from the most recent ones to the oldest ones.
 * `measureItemsBatchSize: number` — (advanced) (experimental) Imagine a situation when a user doesn't gradually scroll through a huge list but instead hits an End key to scroll right to the end of such huge list: this will result in the whole list rendering at once (because an item needs to know the height of all previous items in order to render at correct scroll position) which could be CPU-intensive in some cases (for example, when using React due to its slow performance when initially rendering components on a page). To prevent freezing the UI in the process, a `measureItemsBatchSize` could be configured, that would limit the maximum count of items that're being rendered in a single pass for measuring their height: if `measureItemsBatchSize` is configured, then such items will be rendered and measured in batches. By default it's set to `100`. This is an experimental feature and could be removed in future non-major versions of this library. For example, the future React 17 will come with [Fiber](https://www.youtube.com/watch?v=ZCuYPiUIONs) rendering engine that is said to resolve such freezing issues internally. In that case, introducing this option may be reconsidered.
@@ -93,6 +93,7 @@ * `shouldUpdateLayoutOnWindowResize(event: Event): boolean`  — By default, `VirtualScroller` always performs a re-layout on window `resize` event. The `resize` event is not only triggered when a user resizes the window itself: it's also [triggered](https://developer.mozilla.org/en-US/docs/Web/API/Window/fullScreen#Notes) when the user switches into (and out of) fullscreen mode. By default, `VirtualScroller` performs a re-layout on all window `resize` events, except for ones that don't result in actual window width or height change, and except for cases when, for example, a video somewhere in a list is maximized into fullscreen. There still can be other "custom" cases: for example, when an application uses a custom "slideshow" component (rendered outside of the list DOM element) that goes into fullscreen when a user clicks a picture or a video in the list. For such "custom" cases `shouldUpdateLayoutOnWindowResize(event)` option / property can be specified.
 
-* `onMount()` — Should be called when the `VirtualScroller` component is "mounted" (rendered) on a page.
-* `onUpdate(prevState: object)` — Is only used when `getState()` and `setState(newState)` options are passed, in which case `onUpdate(prevState)` should be called after a `setState(newState)` call has caused a re-render. Is currently only used for React `VirtualScroller` component implementation, so it could be considered an internal implementation detail.
-* `onUnmount()` — Should be called when the `VirtualScroller` component is "unmounted" (removed) from the page.
+* `render()` — Renders the `VirtualScroller`. Sometimes, when `new VirtualScroller()` instance is created, `getElement()` might not be ready to return the "container" DOM Element yet (for example, because it's not rendered yet), so a `virtualScroller` instance waits until a developer explicitly calls `.render()` in order to render the list.
+* `destroy()` — Should be called when the list is about to be "unmounted" (removed) from the page.
 * `getState(): object` — Returns `VirtualScroller` state. Is used for React `VirtualScroller` component implementation.
+<!-- * `willUpdateState(newState: object, prevState: object?)` — If custom `setState` is defined, then it must call `VirtualScroller`'s `.willUpdateState()` instance method right before updating the `state`. The `prevState` argument should be `undefined` when (and only when) setting initial `state`. -->
+<!-- * `didUpdateState(prevState: object?)` — If custom `setState` is defined, then it must call `VirtualScroller`'s `.didUpdateState()` instance method right after updating the `state`. The `prevState` argument should be `undefined` when (and only when) setting initial `state`. -->
 * `onItemHeightChange(i: number)` — Should be called whenever a list item's height changes: triggers a re-layout of `VirtualScroller`. This allows `VirtualScroller` to re-measure the new item's height and re-render correctly. Calling `onItemHeightChange()` manually could be replaced with detecting item height changes automatically via [Resize Observer](https://caniuse.com/#search=Resize%20Observer). For example, when a user clicks an "Expand"/"Collapse" button in a post. Calling `onItemHeightChange()` is only required when an item shrinks in height. For example, consider a post with an "Expand"/"Collapse" button: when such post is expanded the next posts in the feed might not be visible yet but if a user clicks the "Collapse" button the post is collapsed and the next posts become visible but they're not yet rendered because `VirtualScroller` didn't render them previously due to them being invisible. Calling `onItemHeightChange(i)` in such case would make `VirtualScroller` re-measure the collapsed post height and perform a re-layout.
@@ -160,3 +161,3 @@ * `onItemStateChange(i: number, itemState: object)` — Can be used to update a list item's state inside `VirtualScroller` state. For example, storing list item's state inside `VirtualScroller` state is used in React `VirtualScroller` component to preserve the state of list items that are unmounted due to being no longer visible: when they're visible again they're re-mounted and their state isn't lost. Calling `onItemStateChange()` doesn't trigger a re-layout of `VirtualScroller` because changing a list item's state doesn't necessarily mean a change of its height, so a re-layout isn't necessarily required. If a re-layout is required then call `onItemHeightChange(i)` manually. For example, consider a social network feed, each post optionally having an attachment. Suppose there's a post in the feed having a YouTube video attachment. The attachment is initially shown as a thumbnail that expands into an embedded YouTube player on click. If a user expands the video, then scrolls down so that the post with the video is unmounted, then scrolls back up so that the post with the video is re-mounted again, then the video should stay expanded (or maybe not, but you get the idea).
 // For "Single Page Apps":
-// router.onPageUnload(virtualScroller.onUnmount)
+// router.onPageUnload(virtualScroller.destroy)
 ```
@@ -183,2 +184,3 @@
 * `getItemCoordinates(i)` — A proxy for the corresponding `VirtualScroller` method.
+* `destroy()` — A proxy for the corresponding `VirtualScroller` method.
 
@@ -247,10 +249,10 @@ ### React
 * `preserveScrollPositionOnPrependItems: boolean` — (optional) The `preserveScrollPositionOnPrependItems` option of `VirtualScroller.setItems()` method.
-* `preserveScrollPositionAtBottomOnMount: boolean` — (optional) The `preserveScrollPositionAtBottomOnMount` option of `VirtualScroller`.
+* `preserveScrollPositionOfTheBottomOfTheListOnMount: boolean` — (optional) The `preserveScrollPositionOfTheBottomOfTheListOnMount` option of `VirtualScroller`.
 * `measureItemsBatchSize: number` — (optional) The `measureItemsBatchSize` option of `VirtualScroller`.
 <!-- * `onMount()` — (optional) Is called after `<VirtualScroller/>` component has been mounted and before `VirtualScroller.onMount()` is called. -->
-* `onItemFirstRender(i)` — (optional) The `onItemFirstRender` option of `VirtualScroller` class.
+* `onItemInitialRender(item)` — (optional) The `onItemInitialRender` option of `VirtualScroller` class.
 <!-- * `shouldUpdateLayoutOnWindowResize(event)`  — (optional) The `shouldUpdateLayoutOnWindowResize` option of `VirtualScroller` class. -->
 * `initialState: object` — (optional) The initial state for `VirtualScroller`: the `state` option of `VirtualScroller`. For example, can be used to quicky restore the list on "Back" navigation.
 * `initialCustomState: object` — (advanced) (optional) The initial "custom" state for `VirtualScroller`: the `customState` option of `VirtualScroller`. It can be used to initialize the "custom" part of `VirtualScroller` state in cases when `VirtualScroller` state is used to store some "custom" list state.
-* `onStateChange(newState: object, prevState: object)` — (optional) Can be called when `VirtualScroller` `state` is updated (including setting the initial `state`). For example, can be used to keep `VirtualScroller` `state` copy in an instance variable and later in `componentWillUnmount()` persist it somewhere in global application state for quickly restoring it later on "Back" navigation:
+* `onStateChange(newState: object, prevState: object)` — (optional) Is called whenever `VirtualScroller` `state` is updated (including setting the initial `state`). For example, can be used to keep `VirtualScroller` `state` copy in an instance variable and later in `componentWillUnmount()` persist it somewhere in global application state for quickly restoring it later on "Back" navigation:
 
@@ -364,3 +366,3 @@ ```js
 
-The sidebar is styled as `position: fixed`, but until the page styles have been applied it's gonna be a regular `<div/>` meaning that `<main/>` will be rendered below the sidebar causing it to be offscreen and so the list will only render the first item. Then, the page styles are loaded and applied and the sidebar is now `position: fixed` so `<main/>` is now rendered at the top of the page but `VirtualScroller`'s `.onMount()` has already been called and it won't re-render until the user scrolls or the window is resized.
+The sidebar is styled as `position: fixed`, but until the page styles have been applied it's gonna be a regular `<div/>` meaning that `<main/>` will be rendered below the sidebar causing it to be offscreen and so the list will only render the first item. Then, the page styles are loaded and applied and the sidebar is now `position: fixed` so `<main/>` is now rendered at the top of the page but `VirtualScroller`'s `.render()` has already been called and it won't re-render until the user scrolls or the window is resized.
 
@@ -367,0 +369,0 @@ This type of a bug doesn't occur in production, but it can appear in development mode when using Webpack. The workaround `VirtualScroller` implements for such cases is calling `.getBoundingClientRect()` on the list container DOM element periodically (every second) to check if the `top` coordinate has changed as a result of CSS being applied: if it has then it recalculates the shown item indexes and re-renders.

source/DOMVirtualScroller.js

@@ -30,3 +30,3 @@ import VirtualScroller from './VirtualScroller'
     }
-    this.virtualScroller.onMount()
+    this.virtualScroller.render()
   }
@@ -105,6 +105,13 @@
 
+  // Public API. Should be "bound" to `this`.
   onUnmount = () => {
-    this.virtualScroller.onUnmount()
+    console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead.')
+    this.destroy()
   }
 
+  // Public API. Should be "bound" to `this`.
+  destroy = () => {
+    this.virtualScroller.destroy()
+  }
+
   unmountItem(itemElement) {
@@ -111,0 +118,0 @@ this.container.removeChild(itemElement)

source/ItemHeights.js

@@ -7,3 +7,10 @@ import log from './log'
 		this.getState = getState
+		this.initialize()
+	}
+
+	initialize() {
 		this.reset()
+		if (this.getState()) {
+			this.onStateUpdate()
+		}
 	}
@@ -15,6 +22,2 @@
 		this.lastMeasuredItemIndex = undefined
-		// this.averageItemHeight = undefined
-		// this.averageItemHeightSamplesCount = undefined
-		// this.previousAverageItemHeight = undefined
-		// this.previousAverageItemHeightSamplesCount = undefined
 	}
@@ -24,3 +27,3 @@
 	 * Initializes `this.measuredItemsHeight`, `this.firstMeasuredItemIndex` and
-	 * `this.lastMeasuredItemIndex` instance variables.
+	 * `this.lastMeasuredItemIndex` instance variables from the `state`.
 	 * These instance variables are used when calculating "average" item height:
@@ -34,7 +37,6 @@ * the "average" item height is simply `this.measuredItemsHeight` divided by
 	 */
-	onInitItemHeights() {
-		this.reset()
+	onStateUpdate() {
 		let i = 0
 		while (i < this.getState().itemHeights.length) {
-			if (this.getState().itemHeights[i] == undefined) {
+			if (this.getState().itemHeights[i] === undefined) {
 				if (this.firstMeasuredItemIndex !== undefined) {
@@ -41,0 +43,0 @@ this.lastMeasuredItemIndex = i - 1

source/ReactVirtualScroller.js

@@ -5,3 +5,2 @@ import React from 'react'
 import VirtualScroller, { getItemsDiff } from './VirtualScroller'
-import shallowEqual from './shallowEqual'
 import { px } from './utility'
@@ -30,2 +29,5 @@
 		preserveScrollPosition: PropTypes.bool,
+		preserveScrollPositionOfTheBottomOfTheListOnMount: PropTypes.bool,
+		// `preserveScrollPositionAtBottomOnMount` property name is deprecated,
+		// use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
 		preserveScrollPositionAtBottomOnMount: PropTypes.bool,
@@ -40,2 +42,4 @@ shouldUpdateLayoutOnWindowResize: PropTypes.func,
 		onMount: PropTypes.func,
+		onItemInitialRender: PropTypes.func,
+		// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
 		onItemFirstRender: PropTypes.func,
@@ -93,3 +97,7 @@ onStateChange: PropTypes.func,
 			initialCustomState,
+			onStateChange,
 			estimatedItemHeight,
+			preserveScrollPositionOfTheBottomOfTheListOnMount,
+			// `preserveScrollPositionAtBottomOnMount` property name is deprecated,
+			// use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
 			preserveScrollPositionAtBottomOnMount,
@@ -115,3 +123,8 @@ measureItemsBatchSize,
 				// bypassBatchSize,
+				onItemInitialRender: this.onItemInitialRender,
+				// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
 				onItemFirstRender: this.onItemFirstRender,
+				preserveScrollPositionOfTheBottomOfTheListOnMount,
+				// `preserveScrollPositionAtBottomOnMount` property name is deprecated,
+				// use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
 				preserveScrollPositionAtBottomOnMount,
@@ -127,11 +140,15 @@ shouldUpdateLayoutOnWindowResize: this.shouldUpdateLayoutOnWindowResize,
 				customState: initialCustomState,
+				onStateChange,
 				getState: () => this.state,
-				setState: (newState, callback) => {
+				setState: (newState, { willUpdateState, didUpdateState }) => {
+					this.willUpdateState = willUpdateState
+					this.didUpdateState = didUpdateState
 					if (this.state) {
 						// Update existing state.
-						this.setState(newState, callback)
+						this.setState(newState)
 					} else {
 						// Set initial state.
+						willUpdateState(newState)
 						this.state = newState
-						this.onStateChange(newState)
+						didUpdateState()
 					}
@@ -152,5 +169,17 @@ }
 	// This proxy is required for cases when
+	// `onItemInitialRender` property changes at subsequent renders.
+	// For example, if it's passed as an "anonymous" function:
+	// `<VirtualScroller onItemInitialRender={() => ...}/>`.
+	onItemInitialRender = (...args) => {
+		const { onItemInitialRender } = this.props
+		if (onItemInitialRender) {
+			onItemInitialRender(...args)
+		}
+	}
+
+	// This proxy is required for cases when
 	// `onItemFirstRender` property changes at subsequent renders.
 	// For example, if it's passed as an "anonymous" function:
 	// `<VirtualScroller onItemFirstRender={() => ...}/>`.
+	// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
 	onItemFirstRender = (...args) => {
@@ -174,13 +203,2 @@ const { onItemFirstRender } = this.props
 
-	// This proxy is required for cases when
-	// `onStateChange` property changes.
-	// For example, if it's passed as:
-	// `<VirtualScroller onStateChange={() => ...}/>`.
-	onStateChange = (...args) => {
-		const { onStateChange } = this.props
-		if (onStateChange) {
-			onStateChange(...args)
-		}
-	}
-
 	shouldUseRefs() {
@@ -288,21 +306,31 @@ // There's no way to detect if `ref` can be passed to `component`:
 		}
-		this.virtualScroller.onMount()
+		this.virtualScroller.render()
 		this._isMounted = true
 	}
 
+	// `getSnapshotBeforeUpdate()` is called right before `componentDidUpdate()`.
+	getSnapshotBeforeUpdate(prevProps, prevState) {
+		if (this.state !== prevState) {
+			this.willUpdateState(this.state, prevState)
+		}
+		// Returns `null` to avoid React warning:
+		// "A snapshot value (or null) must be returned. You have returned undefined".
+		return null
+	}
+
+	// `componentDidUpdate()` is called immediately after React component has re-rendered.
+	// That would correspond to `useLayoutEffect()` in React Hooks.
 	componentDidUpdate(prevProps, prevState) {
-		const { onStateChange } = this.props
-		// An application may choose to track `virtual-scroller` state
-		// for restoring it later on "Back" navigation.
-		if (onStateChange) {
-			if (!shallowEqual(this.state, prevState)) {
-				onStateChange(this.state, prevState)
-			}
+		// If `state` did change.
+		if (this.state !== prevState) {
+			this.didUpdateState(prevState)
 		}
-		// Re-measure rendered items' heights.
-		this.virtualScroller.onUpdate(prevState)
 		// If `items` property did change then update `virtual-scroller` items.
 		// This could have been done in `.render()` but `.setItems()` calls
 		// `.setState()` internally which would result in React throwing an error.
-		const { items, preserveScrollPosition, preserveScrollPositionOnPrependItems } = this.props
+		const {
+			items,
+			preserveScrollPosition,
+			preserveScrollPositionOnPrependItems
+		} = this.props
 		if (items !== prevProps.items) {
@@ -318,3 +346,3 @@ this.virtualScroller.setItems(items, {
 	componentWillUnmount() {
-		this.virtualScroller.onUnmount()
+		this.virtualScroller.destroy()
 		this._isMounted = false
@@ -337,2 +365,5 @@ }
 			preserveScrollPosition,
+			preserveScrollPositionOfTheBottomOfTheListOnMount,
+			// `preserveScrollPositionAtBottomOnMount` property name is deprecated,
+			// use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
 			preserveScrollPositionAtBottomOnMount,
@@ -348,2 +379,4 @@ shouldUpdateLayoutOnWindowResize,
 			onStateChange,
+			onItemInitialRender,
+			// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
 			onItemFirstRender,
@@ -350,0 +383,0 @@ onMount,

source/VirtualScroller.js

@@ -46,2 +46,4 @@ // For some weird reason, in Chrome, `setTimeout()` would lag up to a second (or more) behind.
 			customState,
+			// `preserveScrollPositionAtBottomOnMount` option name is deprecated,
+			// use `preserveScrollPositionOfTheBottomOfTheListOnMount` option instead.
 			preserveScrollPositionAtBottomOnMount,
@@ -62,7 +64,12 @@ shouldUpdateLayoutOnWindowResize,
 			// getItemState,
+			onItemInitialRender,
+			// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
 			onItemFirstRender,
 			scrollableContainer,
+			preserveScrollPositionOfTheBottomOfTheListOnMount,
 			state
 		} = options
 
+		preserveScrollPositionOfTheBottomOfTheListOnMount = preserveScrollPositionOfTheBottomOfTheListOnMount || preserveScrollPositionAtBottomOnMount
+
 		log('~ Initialize ~')
@@ -129,8 +136,31 @@
 
+		this.onStateChange = onStateChange
+
 		this._shouldUpdateLayoutOnWindowResize = shouldUpdateLayoutOnWindowResize
 		this.measureItemsBatchSize = measureItemsBatchSize === undefined ? 50 : measureItemsBatchSize
 
-		if (onItemFirstRender) {
-			this.onItemFirstRender = onItemFirstRender
+		if (onItemInitialRender) {
+			this.onItemFirstRender = onItemInitialRender
 		}
+		// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
+		else if (onItemFirstRender) {
+			this.onItemFirstRender = (item) => {
+				console.warn("[virtual-scroller] `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.")
+				const { items } = this.getState()
+				const i = items.indexOf(item)
+				// The `item` could also be non-found due to the inconsistency bug:
+				// The reason is that `i` can be non-consistent with the `items`
+				// passed to `<VirtualScroller/>` in React due to `setState()` not being
+				// instanteneous: when new `items` are passed to `<VirtualScroller/>`,
+				// `VirtualScroller.setState({ items })` is called, and if `onItemFirstRender(i)`
+				// is called after the aforementioned `setState()` is called but before it finishes,
+				// `i` would point to an index in "previous" `items` while the application
+				// would assume that `i` points to an index in the "new" `items`,
+				// resulting in an incorrect item being assumed by the application
+				// or even in an "array index out of bounds" error.
+				if (i >= 0) {
+					onItemFirstRender(i)
+				}
+			}
+		}
 
@@ -146,22 +176,17 @@ // Remove any accidental text nodes from container (like whitespace).
 			this.getState = getState
-			this.setState = setState
+			this.setState = (state) => setState(state, {
+				willUpdateState: this.willUpdateState,
+				didUpdateState: this.didUpdateState
+			})
 		} else {
 			this.getState = () => this.state
-			this.setState = (state, callback) => {
-				const prevState = this.state
-				this.state = {
+			this.setState = (state) => {
+				const prevState = this.getState()
+				const newState = {
 					...prevState,
 					...state
 				}
-				if (!shallowEqual(this.state, prevState)) {
-					if (onStateChange) {
-						onStateChange(this.state, prevState)
-					}
-					if (this.isMounted) {
-						this.onUpdate(prevState)
-					}
-				}
-				if (callback) {
-					callback()
-				}
+				this.willUpdateState(newState, prevState)
+				this.state = newState
+				this.didUpdateState(prevState)
 			}
@@ -178,4 +203,4 @@ }
 		if (this.scrollableContainer) {
-			if (preserveScrollPositionAtBottomOnMount) {
-				this.preserveScrollPositionAtBottomOnMount = {
+			if (preserveScrollPositionOfTheBottomOfTheListOnMount) {
+				this.preserveScrollPositionOfTheBottomOfTheListOnMount = {
 					scrollableContainerContentHeight: this.scrollableContainer.getContentHeight()
@@ -186,5 +211,3 @@ }
 
-		this.setState(state || this.getInitialState(customState), () => {
-			this.itemHeights.onInitItemHeights()
-		})
+		this.setState(state || this.getInitialState(customState))
 
@@ -219,3 +242,4 @@ log('Items count', items.length)
 		let lastShownItemIndex
-		const itemsCount = this.initialItems.length
+		const items = this.initialItems
+		const itemsCount = items.length
 		// If there're no items then `firstShownItemIndex` stays `undefined`.
@@ -226,3 +250,3 @@ if (itemsCount > 0) {
 		}
-		if (this.preserveScrollPositionAtBottomOnMount) {
+		if (this.preserveScrollPositionOfTheBottomOfTheListOnMount) {
 			firstShownItemIndex = 0
@@ -232,3 +256,7 @@ lastShownItemIndex = itemsCount - 1
 		// Optionally preload items to be rendered.
-		this.onBeforeShowItems(firstShownItemIndex, lastShownItemIndex)
+		this.onBeforeShowItems(
+			items,
+			firstShownItemIndex,
+			lastShownItemIndex
+		)
 		return {
@@ -295,3 +323,3 @@ itemHeights: new Array(itemsCount),
 
-	onBeforeShowItems(firstShownItemIndex, lastShownItemIndex) {
+	onBeforeShowItems(items, firstShownItemIndex, lastShownItemIndex) {
 		if (this.onItemFirstRender) {
@@ -301,3 +329,3 @@ if (this.firstSeenItemIndex === undefined) {
 				while (i <= lastShownItemIndex) {
-					this.onItemFirstRender(i)
+					this.onItemFirstRender(items[i])
 					i++
@@ -317,3 +345,3 @@ }
 					while (i <= toIndex) {
-						this.onItemFirstRender(i)
+						this.onItemFirstRender(items[i])
 						i++
@@ -328,3 +356,3 @@ }
 					while (i <= toIndex) {
-						this.onItemFirstRender(i)
+						this.onItemFirstRender(items[i])
 						i++
@@ -339,7 +367,15 @@ }
 	onMount() {
-		// `this.isMounted = true` should be the first statement in this function,
-		// because otherwise `DOMVirtualScroller` would enter an infinite re-render loop
-		// if `this.onInitialRender('mount')` is called before setting `this.isMounted` to `true`.
-		this.isMounted = true
-		this.onInitialRender('mount')
+		console.warn('[virtual-scroller] `.onMount()` instance method name is deprecated, use `.render()` instance method name instead.')
+		this.render()
+	}
+
+	/**
+	 * Should be invoked after a "container" DOM Element is mounted (inserted into the DOM tree).
+	 */
+	render() {
+		log('~ Rendered (initial) ~')
+		// `this.isRendered = true` should be the first statement in this function,
+		// otherwise `DOMVirtualScroller` would enter an infinite re-render loop.
+		this.isRendered = true
+		this.onRendered()
 		this.scrollableContainerWidth = this.scrollableContainer.getWidth()
@@ -358,25 +394,18 @@ this.scrollableContainerHeight = this.scrollableContainer.getHeight()
 			addTbodyStyles(this.getContainerNode())
-			this.updateTbodyPadding()
 		}
+		if (this.preserveScrollPositionOfTheBottomOfTheListOnMount) {
+			// In this case, all items are shown, so there's no need to call
+			// `this.onUpdateShownItemIndexes()` after the initial render.
+			this.scrollTo(0, this.getScrollY() + (this.scrollableContainer.getHeight() - this.preserveScrollPositionOfTheBottomOfTheListOnMount.scrollableContainerContentHeight))
+		} else {
+			this.onUpdateShownItemIndexes({ reason: 'mount' })
+		}
 	}
 
-	onInitialRender(reason) {
-		const {
-			firstShownItemIndex,
-			lastShownItemIndex
-		} = this.getState()
-		log('~ Rendered (initial) ~')
-		// If there're any items.
-		if (this.getItemsCount() > 0) {
-			// Update item heights.
-			this.updateItemHeights(
-				firstShownItemIndex,
-				lastShownItemIndex
-			)
+	onRendered() {
+		// Update seen item heights.
+		this.updateItemHeights()
+		if (this.tbody) {
+			this.updateTbodyPadding()
 		}
-		if (this.preserveScrollPositionAtBottomOnMount) {
-			this.scrollTo(0, this.getScrollY() + (this.scrollableContainer.getHeight() - this.preserveScrollPositionAtBottomOnMount.scrollableContainerContentHeight))
-		} else {
-			this.onUpdateShownItemIndexes({ reason })
-		}
 	}
@@ -471,7 +500,8 @@
 			} else {
-				this.onUpdateShownItemIndexes({ reason: 'resize' })
-				return false
+				// Scrollable container height has changed,
+				// so recalculate shown item indexes.
+				return 'UPDATE_INDEXES'
 			}
 		} else {
-			return true
+			return 'UPDATE_LAYOUT'
 		}
@@ -487,6 +517,7 @@ }
 		// while `setTimeout()` was waiting, then exit.
-		if (!this.isMounted) {
+		if (!this.isRendered) {
 			return
 		}
-		if (this.shouldUpdateLayoutOnScrollableContainerResize(event)) {
+		const action = this.shouldUpdateLayoutOnScrollableContainerResize(event)
+		if (action === 'UPDATE_LAYOUT') {
 			// Reset item heights because if scrollable container's width (or height)
@@ -497,5 +528,8 @@ // has changed, the list width (or height) most likely also has changed,
 			log('~ Scrollable container size changed, re-measure item heights. ~')
-			this.setState(this.getInitialLayoutState(), () => {
-				this.onInitialRender('resize')
-			})
+			this.resized = true
+			this.setState(this.getInitialLayoutState())
+		} else if (action === 'UPDATE_INDEXES') {
+			// No need to perform a complete re-layout.
+			// Just update shown item indexes.
+			this.onUpdateShownItemIndexes({ reason: 'resize' })
 		}
@@ -505,3 +539,8 @@ }, SCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL)
 	onUnmount() {
-		this.isMounted = false
+		console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead.')
+		this.destroy()
+	}
+
+	destroy() {
+		this.isRendered = false
 		this.removeScrollPositionListener()
@@ -517,20 +556,54 @@ if (!this.bypass) {
 
-	onUpdate(prevState) {
-		const {
-			items,
-			firstShownItemIndex,
-			lastShownItemIndex
-		} = this.getState()
+	/**
+	 * Should be called right before `state` is updated.
+	 * Is used to capture scroll position in order to restore it after the update.
+	 * @param  {object} prevState
+	 * @param  {object} newState
+	 */
+	willUpdateState = (newState, prevState) => {
+		// Ignore setting initial state.
+		if (!prevState) {
+			return
+		}
+		if (this.preserveScrollPositionOnPrependItems) {
+			this.preserveScrollPositionOnPrependItems = undefined
+			const { items: previousItems } = prevState
+			const { items: newItems } = newState
+			const { prependedItemsCount } = getItemsDiff(previousItems, newItems)
+			// Since some items were prepended, scroll Y position
+			// should be restored after rendering those new items.
+			this.captureScroll(
+				previousItems,
+				newItems,
+				prependedItemsCount
+			)
+		}
+	}
+
+	/**
+	 * Should be called right after `state` is updated.
+	 * @param  {object} prevState
+	 */
+	didUpdateState = (prevState) => {
+		const newState = this.getState()
+		if (this.onStateChange) {
+			if (!shallowEqual(newState, prevState)) {
+				this.onStateChange(newState, prevState)
+			}
+		}
+		// Ignore setting initial state.
+		if (!prevState) {
+			return
+		}
+		if (!this.isRendered) {
+			return
+		}
 		log('~ Rendered ~')
 		// If new items are shown (or older items are hidden).
-		if (firstShownItemIndex !== prevState.firstShownItemIndex ||
-			lastShownItemIndex !== prevState.lastShownItemIndex ||
-			items !== prevState.items) {
+		if (newState.firstShownItemIndex !== prevState.firstShownItemIndex ||
+			newState.lastShownItemIndex !== prevState.lastShownItemIndex ||
+			newState.items !== prevState.items) {
 			// // If some items' height changed then maybe adjust scroll position accordingly.
 			// const prevItemHeights = this.getState().itemHeights.slice()
-			// Update seen item heights.
-			this.updateItemHeights(
-				firstShownItemIndex,
-				lastShownItemIndex
-			)
+			this.onRendered()
 			// let i = firstShownItemIndex
@@ -541,6 +614,49 @@ // while (i <= lastShownItemIndex) {
 			// }
-			if (this.tbody) {
-				this.updateTbodyPadding()
+		}
+		const { items: previousItems } = prevState
+		const { items: newItems } = newState
+		if (newItems !== previousItems) {
+			const {
+				prependedItemsCount,
+				appendedItemsCount
+			} = getItemsDiff(previousItems, newItems)
+			const isIncrementalUpdate = prependedItemsCount > 0 || appendedItemsCount > 0
+			if (isIncrementalUpdate) {
+				if (prependedItemsCount > 0) {
+					this.itemHeights.onPrepend(prependedItemsCount)
+					if (this.firstSeenItemIndex !== undefined) {
+						this.firstSeenItemIndex += prependedItemsCount
+						this.lastSeenItemIndex += prependedItemsCount
+					}
+				}
+			} else {
+				this.itemHeights.initialize()
+				this.firstSeenItemIndex = undefined
+				this.lastSeenItemIndex = undefined
 			}
+			// Stop "multi-render layout" if it's in progress.
+			if (this.multiRenderLayout) {
+				this.stopMultiRenderLayout()
+			}
+			return this.onUpdateShownItemIndexes({
+				reason: 'update items',
+				force: true
+			})
 		}
+		if (this.resized) {
+			this.resized = undefined
+			log('~ Rendered (resize) ~')
+			// Stop "multi-render layout" if it's in progress.
+			if (this.multiRenderLayout) {
+				this.stopMultiRenderLayout()
+			}
+			// Reset item heights because if scrollable container's width (or height)
+			// has changed, the list width (or height) most likely also has changed,
+			// and also some CSS `@media()` rules might have been added or removed.
+			// Re-render the list entirely.
+			return this.onUpdateShownItemIndexes({ reason: 'resize' })
+		}
+		if (this.multiRenderLayout) {
+			return this.onMultiRenderLayoutRendered()
+		}
 	}
@@ -558,4 +674,8 @@
 
-	updateItemHeights(fromIndex, toIndex) {
+	updateItemHeights() {
 		const {
+			firstShownItemIndex: fromIndex,
+			lastShownItemIndex: toIndex
+		} = this.getState()
+		const {
 			firstShownItemIndex
@@ -835,3 +955,3 @@ } = this.getState()
 	// is now `position: fixed` so `<main/>` is now rendered at the top of the page
-	// but `VirtualScroller`'s `onMount()` has already been called
+	// but `VirtualScroller`'s `.render()` has already been called
 	// and it won't re-render until the user scrolls or the window is resized.
@@ -849,3 +969,3 @@ // This type of a bug doesn't occur in production, but it can appear
 			// while `setTimeout()` was waiting, then exit.
-			if (!this.isMounted) {
+			if (!this.isRendered) {
 				return
@@ -954,3 +1074,3 @@ }
 	 */
-	updateShownItemIndexes = (callback) => {
+	updateShownItemIndexes = () => {
 		// Find the items which are displayed in the viewport.
@@ -985,2 +1105,3 @@ const {
 			log('Schedule a re-layout after the upcoming rerender')
+			this.redoLayoutAfterRender = true
 		}
@@ -1001,3 +1122,7 @@ // The page could be scrolled up, to any scroll position,
 		// Optionally preload items to be rendered.
-		this.onBeforeShowItems(firstShownItemIndex, lastShownItemIndex)
+		this.onBeforeShowItems(
+			this.getState().items,
+			firstShownItemIndex,
+			lastShownItemIndex
+		)
 		// Render.
@@ -1012,33 +1137,36 @@ this.setState({
 			// averageItemHeight: this.itemHeights.getAverage()
-		}, () => callback(redoLayoutAfterRender))
+		})
 	}
 
 	updateShownItemIndexesRecursive = () => {
-		this.updateShownItemIndexes((redoLayoutAfterRender) => {
-			if (redoLayoutAfterRender) {
-				// Recurse in a timeout to prevent React error:
-				// "Maximum update depth exceeded.
-				//  This can happen when a component repeatedly calls
-				//  setState inside componentWillUpdate or componentDidUpdate.
-				//  React limits the number of nested updates to prevent infinite loops."
-				setTimeout(() => {
-					if (this.isMounted) {
-						this.updateShownItemIndexesRecursive()
-					} else {
-						this.onDoneUpdatingItemIndexes()
-					}
-				}, 0)
-			} else {
-				this.onDoneUpdatingItemIndexes()
-			}
-		})
+		this.multiRenderLayout = true
+		this.updateShownItemIndexes()
 	}
 
-	onDoneUpdatingItemIndexes() {
-		this.isUpdatingItemIndexes = false
-		if (this.restoreScrollAfterPrepend) {
-			this.restoreScroll()
+	onMultiRenderLayoutRendered() {
+		if (this.redoLayoutAfterRender) {
+			this.redoLayoutAfterRender = undefined
+			// Recurse in a timeout to prevent React error:
+			// "Maximum update depth exceeded.
+			//  This can happen when a component repeatedly calls
+			//  setState inside componentWillUpdate or componentDidUpdate.
+			//  React limits the number of nested updates to prevent infinite loops."
+			return setTimeout(() => {
+				if (this.isRendered) {
+					this.updateShownItemIndexesRecursive()
+				}
+			}, 0)
 		}
+		this.stopMultiRenderLayout()
 	}
 
+	stopMultiRenderLayout() {
+		this.multiRenderLayout = undefined
+		if (!this.redoLayoutAfterRender) {
+			if (this.restoreScrollAfterPrepend) {
+				this.restoreScroll()
+			}
+		}
+	}
+
 	captureScroll(previousItems, nextItems, firstPreviousItemIndex) {
@@ -1069,3 +1197,3 @@ // If there were no items in the list
 		// This could happen when using `<ReactVirtualScroller/>`
-		// because it calls `.captureScroll()` inside `.render()`
+		// because it calls `.captureScroll()` inside `ReactVirtualScroller.render()`
 		// which is followed by `<VirtualScroller/>`'s `.componentDidUpdate()`
@@ -1075,3 +1203,3 @@ // which also calls `.captureScroll()` with the same arguments.
 		//  when showing the first page of the "Previous items",
-		//  see the comments in `<ReactVirtualScroller/>`'s `.render()` method).
+		//  see the comments in `ReactVirtualScroller.render()` method).
 		if (this.restoreScrollAfterPrepend &&
@@ -1129,3 +1257,3 @@ this.restoreScrollAfterPrepend.previousItems === previousItems &&
 		// for the same `state` so there's no need to start another one.
-		if (this.isUpdatingItemIndexes) {
+		if (this.multiRenderLayout) {
 			return
@@ -1186,3 +1314,2 @@ }
 		log(`~ Update layout (on ${reason}) ~`)
-		this.isUpdatingItemIndexes = true
 		this.updateShownItemIndexesRecursive()
@@ -1192,3 +1319,3 @@ }
 	onUserStoppedScrolling = () => {
-		if (this.isMounted) {
+		if (this.isRendered) {
 			// Re-render the list.
@@ -1236,17 +1363,5 @@ this.updateLayout('stopped scrolling')
 				itemHeights = new Array(prependedItemsCount).concat(itemHeights)
-				this.itemHeights.onPrepend(prependedItemsCount)
 				if (itemStates) {
 					itemStates = new Array(prependedItemsCount).concat(itemStates)
 				}
-				// Since some items were prepended restore scroll Y
-				// position after rendering those new items.
-				// `preserveScrollPosition` property name is deprecated,
-				// use `preserveScrollPositionOnPrependItems` instead.
-				if (options.preserveScrollPositionOnPrependItems || options.preserveScrollPosition) {
-					this.captureScroll(
-						previousItems,
-						newItems,
-						prependedItemsCount
-					)
-				}
 			}
@@ -1260,6 +1375,2 @@ if (appendedItemsCount > 0) {
 			}
-			if (this.firstSeenItemIndex !== undefined) {
-				this.firstSeenItemIndex += prependedItemsCount
-				this.lastSeenItemIndex += prependedItemsCount
-			}
 			firstShownItemIndex += prependedItemsCount
@@ -1275,4 +1386,2 @@ lastShownItemIndex += prependedItemsCount
 			itemStates = new Array(newItems.length)
-			this.firstSeenItemIndex = undefined
-			this.lastSeenItemIndex = undefined
 			if (newItems.length === 0) {
@@ -1288,3 +1397,3 @@ firstShownItemIndex = undefined
 		}
-		let customState
+		// let customState
 		// `newCustomState` argument is not currently being used.
@@ -1306,6 +1415,13 @@ // if (newCustomState) {
 		// Optionally preload items to be rendered.
-		this.onBeforeShowItems(firstShownItemIndex, lastShownItemIndex)
+		this.onBeforeShowItems(
+			newItems,
+			firstShownItemIndex,
+			lastShownItemIndex
+		)
+		// `preserveScrollPosition` property name is deprecated,
+		// use `preserveScrollPositionOnPrependItems` instead.
+		this.preserveScrollPositionOnPrependItems = options.preserveScrollPositionOnPrependItems || options.preserveScrollPosition
 		// Render.
 		this.setState({
-			...customState,
+			// ...customState,
 			items: newItems,
@@ -1318,10 +1434,2 @@ itemStates,
 			afterItemsHeight
-		}, () => {
-			if (!isIncrementalUpdate) {
-				this.itemHeights.onInitItemHeights()
-			}
-			this.onUpdateShownItemIndexes({
-				reason: 'update items',
-				force: true
-			})
 		})
@@ -1432,7 +1540,7 @@ }
 	// 		this.layoutDelayedWithArgs = args
-	// 		// Then in `.onMount()`:
+	// 		// Then in `.render()`:
 	// 		// if (this.layoutDelayedWithArgs) {
 	// 		// 	this.shouldDelayLayout = false
 	// 		// 	setTimeout(() => {
-	// 		// 		if (this.isMounted) {
+	// 		// 		if (this.isRendered) {
 	// 		// 			this.onUpdateShownItemIndexes(this.layoutDelayedWithArgs)
@@ -1439,0 +1547,0 @@ // 		// 			this.layoutDelayedWithArgs = undefined

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1500323

increased by4.81%

Lines of code

9150

increased by4.67%

Number of lines in readme file

402

increased by0.5%

No dependency changes