virtual-scroller - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

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,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}()});
+!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 O(e){return e.toFixed(2)+"px"}var H="[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 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.getContainerElement=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.getContainerElement();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.getContainerElement();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 L(e){return(L="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 j=250,V=100,D=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=Y(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"!==L(e)||null===e||"object"!==L(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=Y(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,V)}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,O=a.scrollableContainer,k=a.preserveScrollPositionOfTheBottomOfTheListOnMount,T=a.state;R("~ Initialize ~"),T&&(n=T.items),!O&&p&&(O=p()),O?this.scrollableContainer=new x(O):"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(H)},0):console.error(H),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)}),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)}),T&&R("Initial state (passed)",T),this.getContainerElement=t,t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),this.itemHeights=new P(this.getContainerElement,this.getState),this.scrollableContainer&&(c&&(console.warn("[virtual-scroller] `preserveScrollPositionAtBottomOnMount` option/property has been renamed to `preserveScrollPositionOfTheBottomOfTheListOnMount`"),k=c),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=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 1*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 `.listen()` instance method name instead."),this.listen()}},{key:"render",value:function(){console.warn("[virtual-scroller] `.render()` instance method name is deprecated, use `.listen()` instance method name instead."),this.listen()}},{key:"listen",value:function(){if(!1===this.isRendered)throw new Error("[virtual-scroller] Can't restart a `VirtualScroller` after it has been stopped");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.getContainerElement()),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.getContainerElement().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerElement())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerElement().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 `.stop()` instance method name instead."),this.stop()}},{key:"destroy",value:function(){console.warn("[virtual-scroller] `.destroy()` instance method name is deprecated, use `.stop()` instance method name instead."),this.stop()}},{key:"stop",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",O(t)),e.style.setProperty("--VirtualScroller-paddingBottom",O(n))}(this.getContainerElement(),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=Y(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.getContainerElement().childNodes[e]}}])&&B(t.prototype,n),i&&B(t,i),e}();function Y(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 _(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 N(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=O(s),r.container.style.paddingBottom=O(a));var l=t&&n===t.items&&n.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 `.stop()` instance method name instead."),r.stop()}),F(this,"destroy",function(){console.warn("[virtual-scroller] `.destroy()` instance method name is deprecated, use `.stop()` instance method name instead."),r.stop()}),F(this,"stop",function(){r.virtualScroller.stop()}),this.container=t,this.renderItem=i;var s=o.onMount,a=o.onItemUnmount,l=_(o,["onMount","onItemUnmount"]);this.onItemUnmount=a,this.tbody="TBODY"===this.container.tagName,this.virtualScroller=new D(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.listen()}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)}}])&&N(t.prototype,n),i&&N(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 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"}),$});
+!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 O(e,t,n){return t&&C(e.prototype,t),n&&C(e,n),e}var x=function(){function e(t){w(this,e),this.element=t}return O(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,x),O(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(T()){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 T(){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 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.getContainerElement=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.getContainerElement();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.getContainerElement();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)}}])&&L(t.prototype,n),i&&L(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 E=Object.prototype.hasOwnProperty;function B(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 V=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=V,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=F(n,i).prependedItemsCount;s.captureScroll(n,i,r)}}),_(this,"didUpdateState",function(e){var t=s.getState();if(s.onStateChange&&(function(e,t){if(B(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(!E.call(t,n[r])||!B(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=F(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()),T()&&(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,O=a.preserveScrollPositionOfTheBottomOfTheListOnMount,H=a.state;A("~ Initialize ~"),H&&(n=H.items),!C&&g&&(C=g()),C?this.scrollableContainer=new x(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)}),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.getContainerElement=t,t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),this.itemHeights=new M(this.getContainerElement,this.getState),this.scrollableContainer&&(c&&(console.warn("[virtual-scroller] `preserveScrollPositionAtBottomOnMount` option/property has been renamed to `preserveScrollPositionOfTheBottomOfTheListOnMount`"),O=c),O&&(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 1*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 `.listen()` instance method name instead."),this.listen()}},{key:"render",value:function(){console.warn("[virtual-scroller] `.render()` instance method name is deprecated, use `.listen()` instance method name instead."),this.listen()}},{key:"listen",value:function(){if(!1===this.isRendered)throw new Error("[virtual-scroller] Can't restart a `VirtualScroller` after it has been stopped");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.getContainerElement()),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.getContainerElement().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerElement())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerElement().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 `.stop()` instance method name instead."),this.stop()}},{key:"destroy",value:function(){console.warn("[virtual-scroller] `.destroy()` instance method name is deprecated, use `.stop()` instance method name instead."),this.stop()}},{key:"stop",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.getContainerElement(),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),T()&&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){T()&&(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=F(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.getContainerElement().childNodes[e]}}])&&j(t.prototype,n),i&&j(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 N(){return(N=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;return 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"!==D(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)}),i.previousItemsProperty=t.items,i.generateUniquePrefix(),i.createVirtualScroller(),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:"createVirtualScroller",value:function(){var e=this,t=this.props,n=t.as,i=t.items,r=t.initialState,o=t.initialCustomState,s=t.onStateChange,a=t.estimatedItemHeight,l=t.preserveScrollPositionOfTheBottomOfTheListOnMount,u=t.preserveScrollPositionAtBottomOnMount,h=t.measureItemsBatchSize,d=t.scrollableContainer,c=t.getScrollableContainer,m=t.bypass;this.virtualScroller=new q(function(){return e.container.current},i,{estimatedItemHeight:a,bypass:m,onItemInitialRender:this.onItemInitialRender,onItemFirstRender:this.onItemFirstRender,preserveScrollPositionOfTheBottomOfTheListOnMount:l,preserveScrollPositionAtBottomOnMount:u,shouldUpdateLayoutOnWindowResize:this.shouldUpdateLayoutOnWindowResize,measureItemsBatchSize:h,scrollableContainer:d,getScrollableContainer:c,tbody:"tbody"===n,state:r,customState:o,onStateChange:s,getState:function(){return e.state},setState:function(t,n){var i=n.willUpdateState,r=n.didUpdateState;e.willUpdateState=i,e.didUpdateState=r,e.state?e.setState(t):(i(t),e.state=t,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._isMounted=!0,this.virtualScroller.listen()}},{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._isMounted=!1,this.virtualScroller.stop()}},{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=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,N({},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,N({},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,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}()});
+!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.getContainerElement=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.getContainerElement();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.getContainerElement();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 V=250,j=100;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}}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=V,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(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=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,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;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)}),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.getContainerElement=t,t()&&function(e){for(;e.firstChild;)e.removeChild(e.firstChild)}(t()),this.itemHeights=new T(this.getContainerElement,this.getState),this.scrollableContainer&&(c&&(console.warn("[virtual-scroller] `preserveScrollPositionAtBottomOnMount` option/property has been renamed to `preserveScrollPositionOfTheBottomOfTheListOnMount`"),O=c),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 1*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 `.listen()` instance method name instead."),this.listen()}},{key:"render",value:function(){console.warn("[virtual-scroller] `.render()` instance method name is deprecated, use `.listen()` instance method name instead."),this.listen()}},{key:"listen",value:function(){if(!1===this.isRendered)throw new Error("[virtual-scroller] Can't restart a `VirtualScroller` after it has been stopped");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.getContainerElement()),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.getContainerElement().getBoundingClientRect().height}},{key:"getTopOffset",value:function(){return this.scrollableContainer.getTopOffset(this.getContainerElement())}},{key:"shouldUpdateLayoutOnScrollableContainerResize",value:function(e){if(e&&e.target===window){if(document.fullscreenElement&&this.getContainerElement().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 `.stop()` instance method name instead."),this.stop()}},{key:"destroy",value:function(){console.warn("[virtual-scroller] `.destroy()` instance method name is deprecated, use `.stop()` instance method name instead."),this.stop()}},{key:"stop",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.getContainerElement(),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.getContainerElement().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.1 / 13.09.2020
+==================
+
+* Renamed `.onMount()`/`.render()` instance method to `.listen()`. The older method name still works.
+
+* Renamed `.onUnmount()`/`.destroy()` instance method to `.stop()`. The older method name still works.
+
 1.5.0 / 12.09.2020
@@ -4,0 +11,0 @@ ==================

commonjs/DOMVirtualScroller.js

@@ -60,3 +60,3 @@ "use strict";
 
-      var diffRender = prevState && items === prevState.items && prevState.items.length > 0; // Remove no longer visible items from the DOM.
+      var diffRender = prevState && items === prevState.items && items.length > 0; // Remove no longer visible items from the DOM.
 
@@ -70,5 +70,5 @@ if (diffRender) {
         while (_i >= prevState.firstShownItemIndex) {
-          if (_i >= firstShownItemIndex && _i <= lastShownItemIndex) {// The item is still being shown.
+          if (_i >= firstShownItemIndex && _i <= lastShownItemIndex) {// The item is still visible.
           } else {
-            (0, _log["default"])('Remove item index', _i); // The item is no longer visible so remove it from the DOM.
+            (0, _log["default"])('Remove item index', _i); // The item is no longer visible. Remove it.
 
@@ -95,4 +95,4 @@ _this.unmountItem(_this.container.childNodes[_i - prevState.firstShownItemIndex]);
         if (diffRender && i >= prevState.firstShownItemIndex && i <= prevState.lastShownItemIndex) {
-          // The item is already shown, so don't re-render it.
-          // Next new items will be appended rather than prepended.
+          // The item is already being rendered.
+          // Next items will be appended rather than prepended.
           if (shouldPrependItems) {
@@ -120,11 +120,17 @@ shouldPrependItems = false;
     _defineProperty(this, "onUnmount", function () {
-      console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead.');
+      console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.stop()` instance method name instead.');
 
-      _this.destroy();
+      _this.stop();
     });
 
     _defineProperty(this, "destroy", function () {
-      _this.virtualScroller.destroy();
+      console.warn('[virtual-scroller] `.destroy()` instance method name is deprecated, use `.stop()` instance method name instead.');
+
+      _this.stop();
     });
 
+    _defineProperty(this, "stop", function () {
+      _this.virtualScroller.stop();
+    });
+
     this.container = element;
@@ -151,3 +157,3 @@ this.renderItem = renderItem;
 
-    this.virtualScroller.render();
+    this.virtualScroller.listen();
   }
@@ -154,0 +160,0 @@

commonjs/ItemHeights.js

@@ -21,6 +21,6 @@ "use strict";
 function () {
-  function ItemHeights(getContainerNode, getState) {
+  function ItemHeights(getContainerElement, getState) {
     _classCallCheck(this, ItemHeights);
 
-    this.getContainerNode = getContainerNode;
+    this.getContainerElement = getContainerElement;
     this.getState = getState;
@@ -95,3 +95,3 @@ this.initialize();
     value: function _getItemHeight(i, firstShownItemIndex) {
-      var container = this.getContainerNode();
+      var container = this.getContainerElement();
 
@@ -111,3 +111,3 @@ if (container) {
     value: function getItemSpacing() {
-      var container = this.getContainerNode();
+      var container = this.getContainerElement();
 
@@ -114,0 +114,0 @@ if (container) {

commonjs/ReactVirtualScroller.js

@@ -68,3 +68,4 @@ "use strict";
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactVirtualScroller).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactVirtualScroller).call(this, props)); // `this.previousItemsProperty` is only used for comparing
+    // `previousItems` with `newItems` inside `render()`.
 
@@ -113,70 +114,77 @@ _defineProperty(_assertThisInitialized(_this), "container", _react["default"].createRef());
 
-    var _this$props = _this.props,
-        AsComponent = _this$props.as,
-        items = _this$props.items,
-        initialState = _this$props.initialState,
-        initialCustomState = _this$props.initialCustomState,
-        onStateChange = _this$props.onStateChange,
-        estimatedItemHeight = _this$props.estimatedItemHeight,
-        preserveScrollPositionOfTheBottomOfTheListOnMount = _this$props.preserveScrollPositionOfTheBottomOfTheListOnMount,
-        preserveScrollPositionAtBottomOnMount = _this$props.preserveScrollPositionAtBottomOnMount,
-        measureItemsBatchSize = _this$props.measureItemsBatchSize,
-        scrollableContainer = _this$props.scrollableContainer,
-        getScrollableContainer = _this$props.getScrollableContainer,
-        bypass = _this$props.bypass; // `this.previousItemsProperty` is only used for comparing
-    // `previousItems` with `newItems` in `render()`.
+    _this.previousItemsProperty = props.items; // Generate unique `key` prefix for list item components.
 
-    _this.previousItemsProperty = items; // Create `virtual-scroller` instance.
+    _this.generateUniquePrefix(); // Create `VirtualScroller` instance.
 
-    _this.virtualScroller = new _VirtualScroller["default"](function () {
-      return _this.container.current;
-    }, items, {
-      estimatedItemHeight: estimatedItemHeight,
-      bypass: bypass,
-      // 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,
-      shouldUpdateLayoutOnWindowResize: _this.shouldUpdateLayoutOnWindowResize,
-      measureItemsBatchSize: measureItemsBatchSize,
-      scrollableContainer: scrollableContainer,
-      // `getScrollableContainer` property is deprecated.
-      // Use `scrollableContainer` instead.
-      getScrollableContainer: getScrollableContainer,
-      tbody: AsComponent === 'tbody',
-      state: initialState,
-      customState: initialCustomState,
-      onStateChange: onStateChange,
-      getState: function getState() {
-        return _this.state;
-      },
-      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);
-        } else {
-          // Set initial state.
-          willUpdateState(newState);
-          _this.state = newState;
-          didUpdateState();
-        }
-      }
-    }); // Generate unique `key` prefix for list item components.
+    _this.createVirtualScroller();
 
-    _this.generateUniquePrefix();
-
     return _this;
-  } // This is a proxy for `VirtualScroller`'s `.updateLayout` instance method.
+  }
 
+  _createClass(ReactVirtualScroller, [{
+    key: "createVirtualScroller",
+    value: function createVirtualScroller() {
+      var _this2 = this;
 
-  _createClass(ReactVirtualScroller, [{
+      var _this$props = this.props,
+          AsComponent = _this$props.as,
+          items = _this$props.items,
+          initialState = _this$props.initialState,
+          initialCustomState = _this$props.initialCustomState,
+          onStateChange = _this$props.onStateChange,
+          estimatedItemHeight = _this$props.estimatedItemHeight,
+          preserveScrollPositionOfTheBottomOfTheListOnMount = _this$props.preserveScrollPositionOfTheBottomOfTheListOnMount,
+          preserveScrollPositionAtBottomOnMount = _this$props.preserveScrollPositionAtBottomOnMount,
+          measureItemsBatchSize = _this$props.measureItemsBatchSize,
+          scrollableContainer = _this$props.scrollableContainer,
+          getScrollableContainer = _this$props.getScrollableContainer,
+          bypass = _this$props.bypass; // Create `virtual-scroller` instance.
+
+      this.virtualScroller = new _VirtualScroller["default"](function () {
+        return _this2.container.current;
+      }, items, {
+        estimatedItemHeight: estimatedItemHeight,
+        bypass: bypass,
+        // 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,
+        shouldUpdateLayoutOnWindowResize: this.shouldUpdateLayoutOnWindowResize,
+        measureItemsBatchSize: measureItemsBatchSize,
+        scrollableContainer: scrollableContainer,
+        // `getScrollableContainer` property is deprecated.
+        // Use `scrollableContainer` instead.
+        getScrollableContainer: getScrollableContainer,
+        tbody: AsComponent === 'tbody',
+        state: initialState,
+        customState: initialCustomState,
+        onStateChange: onStateChange,
+        getState: function getState() {
+          return _this2.state;
+        },
+        setState: function setState(newState, _ref) {
+          var willUpdateState = _ref.willUpdateState,
+              didUpdateState = _ref.didUpdateState;
+          _this2.willUpdateState = willUpdateState;
+          _this2.didUpdateState = didUpdateState;
+
+          if (_this2.state) {
+            // Update existing state.
+            _this2.setState(newState);
+          } else {
+            // Set initial state.
+            willUpdateState(newState);
+            _this2.state = newState;
+            didUpdateState();
+          }
+        }
+      });
+    } // This is a proxy for `VirtualScroller`'s `.updateLayout` instance method.
+
+  }, {
     key: "shouldUseRefs",
@@ -219,3 +227,3 @@ value: function shouldUseRefs() {
     value: function renderItem(i) {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -241,3 +249,3 @@ if (!this.shouldUseRefs()) {
         this.itemRefs[i].current.forceUpdate(function () {
-          if (_this2._isMounted) {
+          if (_this3._isMounted) {
             // Recalculates the `i` index here because it
@@ -249,3 +257,3 @@ // might have changed when the callback is called,
             if (_i >= 0) {
-              _this2.virtualScroller.onItemHeightChange(_i);
+              _this3.virtualScroller.onItemHeightChange(_i);
             }
@@ -272,7 +280,7 @@ }
     value: function getOnItemStateChange(i) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (!this.onItemStateChange[i]) {
         this.onItemStateChange[i] = function (itemState) {
-          return _this3.virtualScroller.onItemStateChange(i, itemState);
+          return _this4.virtualScroller.onItemStateChange(i, itemState);
         };
@@ -286,7 +294,7 @@ }
     value: function getOnItemHeightChange(i) {
-      var _this4 = this;
+      var _this5 = this;
 
       if (!this.onItemHeightChange[i]) {
         this.onItemHeightChange[i] = function () {
-          return _this4.virtualScroller.onItemHeightChange(i);
+          return _this5.virtualScroller.onItemHeightChange(i);
         };
@@ -319,4 +327,5 @@ }
 
-      this.virtualScroller.render();
-      this._isMounted = true;
+      this._isMounted = true; // Start listening to scroll events.
+
+      this.virtualScroller.listen();
     } // `getSnapshotBeforeUpdate()` is called right before `componentDidUpdate()`.
@@ -364,4 +373,5 @@
     value: function componentWillUnmount() {
-      this.virtualScroller.destroy();
-      this._isMounted = false;
+      this._isMounted = false; // Stop listening to scroll events.
+
+      this.virtualScroller.stop();
     }
@@ -371,3 +381,3 @@ }, {
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -491,7 +501,7 @@ var _this$props3 = this.props,
           return _react["default"].createElement(Component, _extends({}, itemComponentProps, {
-            ref: _this5.shouldUseRefs() ? _this5.getItemRef(i) : undefined,
-            key: "".concat(_this5.uniquePrefix, ":").concat(i),
+            ref: _this6.shouldUseRefs() ? _this6.getItemRef(i) : undefined,
+            key: "".concat(_this6.uniquePrefix, ":").concat(i),
             state: itemStates && itemStates[i],
-            onStateChange: _this5.getOnItemStateChange(i),
-            onHeightChange: _this5.getOnItemHeightChange(i)
+            onStateChange: _this6.getOnItemStateChange(i),
+            onHeightChange: _this6.getOnItemHeightChange(i)
           }), item);
@@ -498,0 +508,0 @@ }

modules/DOMVirtualScroller.js

@@ -49,3 +49,3 @@ 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; }
 
-      var diffRender = prevState && items === prevState.items && prevState.items.length > 0; // Remove no longer visible items from the DOM.
+      var diffRender = prevState && items === prevState.items && items.length > 0; // Remove no longer visible items from the DOM.
 
@@ -59,5 +59,5 @@ if (diffRender) {
         while (_i >= prevState.firstShownItemIndex) {
-          if (_i >= firstShownItemIndex && _i <= lastShownItemIndex) {// The item is still being shown.
+          if (_i >= firstShownItemIndex && _i <= lastShownItemIndex) {// The item is still visible.
           } else {
-            log('Remove item index', _i); // The item is no longer visible so remove it from the DOM.
+            log('Remove item index', _i); // The item is no longer visible. Remove it.
 
@@ -84,4 +84,4 @@ _this.unmountItem(_this.container.childNodes[_i - prevState.firstShownItemIndex]);
         if (diffRender && i >= prevState.firstShownItemIndex && i <= prevState.lastShownItemIndex) {
-          // The item is already shown, so don't re-render it.
-          // Next new items will be appended rather than prepended.
+          // The item is already being rendered.
+          // Next items will be appended rather than prepended.
           if (shouldPrependItems) {
@@ -109,11 +109,17 @@ shouldPrependItems = false;
     _defineProperty(this, "onUnmount", function () {
-      console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead.');
+      console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.stop()` instance method name instead.');
 
-      _this.destroy();
+      _this.stop();
     });
 
     _defineProperty(this, "destroy", function () {
-      _this.virtualScroller.destroy();
+      console.warn('[virtual-scroller] `.destroy()` instance method name is deprecated, use `.stop()` instance method name instead.');
+
+      _this.stop();
     });
 
+    _defineProperty(this, "stop", function () {
+      _this.virtualScroller.stop();
+    });
+
     this.container = element;
@@ -140,3 +146,3 @@ this.renderItem = renderItem;
 
-    this.virtualScroller.render();
+    this.virtualScroller.listen();
   }
@@ -143,0 +149,0 @@

modules/ItemHeights.js

@@ -12,6 +12,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function () {
-  function ItemHeights(getContainerNode, getState) {
+  function ItemHeights(getContainerElement, getState) {
     _classCallCheck(this, ItemHeights);
 
-    this.getContainerNode = getContainerNode;
+    this.getContainerElement = getContainerElement;
     this.getState = getState;
@@ -86,3 +86,3 @@ this.initialize();
     value: function _getItemHeight(i, firstShownItemIndex) {
-      var container = this.getContainerNode();
+      var container = this.getContainerElement();
 
@@ -102,3 +102,3 @@ if (container) {
     value: function getItemSpacing() {
-      var container = this.getContainerNode();
+      var container = this.getContainerElement();
 
@@ -105,0 +105,0 @@ if (container) {

modules/ReactVirtualScroller.js

@@ -53,3 +53,4 @@ 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); }
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactVirtualScroller).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactVirtualScroller).call(this, props)); // `this.previousItemsProperty` is only used for comparing
+    // `previousItems` with `newItems` inside `render()`.
 
@@ -98,70 +99,77 @@ _defineProperty(_assertThisInitialized(_this), "container", React.createRef());
 
-    var _this$props = _this.props,
-        AsComponent = _this$props.as,
-        items = _this$props.items,
-        initialState = _this$props.initialState,
-        initialCustomState = _this$props.initialCustomState,
-        onStateChange = _this$props.onStateChange,
-        estimatedItemHeight = _this$props.estimatedItemHeight,
-        preserveScrollPositionOfTheBottomOfTheListOnMount = _this$props.preserveScrollPositionOfTheBottomOfTheListOnMount,
-        preserveScrollPositionAtBottomOnMount = _this$props.preserveScrollPositionAtBottomOnMount,
-        measureItemsBatchSize = _this$props.measureItemsBatchSize,
-        scrollableContainer = _this$props.scrollableContainer,
-        getScrollableContainer = _this$props.getScrollableContainer,
-        bypass = _this$props.bypass; // `this.previousItemsProperty` is only used for comparing
-    // `previousItems` with `newItems` in `render()`.
+    _this.previousItemsProperty = props.items; // Generate unique `key` prefix for list item components.
 
-    _this.previousItemsProperty = items; // Create `virtual-scroller` instance.
+    _this.generateUniquePrefix(); // Create `VirtualScroller` instance.
 
-    _this.virtualScroller = new VirtualScroller(function () {
-      return _this.container.current;
-    }, items, {
-      estimatedItemHeight: estimatedItemHeight,
-      bypass: bypass,
-      // 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,
-      shouldUpdateLayoutOnWindowResize: _this.shouldUpdateLayoutOnWindowResize,
-      measureItemsBatchSize: measureItemsBatchSize,
-      scrollableContainer: scrollableContainer,
-      // `getScrollableContainer` property is deprecated.
-      // Use `scrollableContainer` instead.
-      getScrollableContainer: getScrollableContainer,
-      tbody: AsComponent === 'tbody',
-      state: initialState,
-      customState: initialCustomState,
-      onStateChange: onStateChange,
-      getState: function getState() {
-        return _this.state;
-      },
-      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);
-        } else {
-          // Set initial state.
-          willUpdateState(newState);
-          _this.state = newState;
-          didUpdateState();
-        }
-      }
-    }); // Generate unique `key` prefix for list item components.
+    _this.createVirtualScroller();
 
-    _this.generateUniquePrefix();
-
     return _this;
-  } // This is a proxy for `VirtualScroller`'s `.updateLayout` instance method.
+  }
 
+  _createClass(ReactVirtualScroller, [{
+    key: "createVirtualScroller",
+    value: function createVirtualScroller() {
+      var _this2 = this;
 
-  _createClass(ReactVirtualScroller, [{
+      var _this$props = this.props,
+          AsComponent = _this$props.as,
+          items = _this$props.items,
+          initialState = _this$props.initialState,
+          initialCustomState = _this$props.initialCustomState,
+          onStateChange = _this$props.onStateChange,
+          estimatedItemHeight = _this$props.estimatedItemHeight,
+          preserveScrollPositionOfTheBottomOfTheListOnMount = _this$props.preserveScrollPositionOfTheBottomOfTheListOnMount,
+          preserveScrollPositionAtBottomOnMount = _this$props.preserveScrollPositionAtBottomOnMount,
+          measureItemsBatchSize = _this$props.measureItemsBatchSize,
+          scrollableContainer = _this$props.scrollableContainer,
+          getScrollableContainer = _this$props.getScrollableContainer,
+          bypass = _this$props.bypass; // Create `virtual-scroller` instance.
+
+      this.virtualScroller = new VirtualScroller(function () {
+        return _this2.container.current;
+      }, items, {
+        estimatedItemHeight: estimatedItemHeight,
+        bypass: bypass,
+        // 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,
+        shouldUpdateLayoutOnWindowResize: this.shouldUpdateLayoutOnWindowResize,
+        measureItemsBatchSize: measureItemsBatchSize,
+        scrollableContainer: scrollableContainer,
+        // `getScrollableContainer` property is deprecated.
+        // Use `scrollableContainer` instead.
+        getScrollableContainer: getScrollableContainer,
+        tbody: AsComponent === 'tbody',
+        state: initialState,
+        customState: initialCustomState,
+        onStateChange: onStateChange,
+        getState: function getState() {
+          return _this2.state;
+        },
+        setState: function setState(newState, _ref) {
+          var willUpdateState = _ref.willUpdateState,
+              didUpdateState = _ref.didUpdateState;
+          _this2.willUpdateState = willUpdateState;
+          _this2.didUpdateState = didUpdateState;
+
+          if (_this2.state) {
+            // Update existing state.
+            _this2.setState(newState);
+          } else {
+            // Set initial state.
+            willUpdateState(newState);
+            _this2.state = newState;
+            didUpdateState();
+          }
+        }
+      });
+    } // This is a proxy for `VirtualScroller`'s `.updateLayout` instance method.
+
+  }, {
     key: "shouldUseRefs",
@@ -204,3 +212,3 @@ value: function shouldUseRefs() {
     value: function renderItem(i) {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -226,3 +234,3 @@ if (!this.shouldUseRefs()) {
         this.itemRefs[i].current.forceUpdate(function () {
-          if (_this2._isMounted) {
+          if (_this3._isMounted) {
             // Recalculates the `i` index here because it
@@ -234,3 +242,3 @@ // might have changed when the callback is called,
             if (_i >= 0) {
-              _this2.virtualScroller.onItemHeightChange(_i);
+              _this3.virtualScroller.onItemHeightChange(_i);
             }
@@ -257,7 +265,7 @@ }
     value: function getOnItemStateChange(i) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (!this.onItemStateChange[i]) {
         this.onItemStateChange[i] = function (itemState) {
-          return _this3.virtualScroller.onItemStateChange(i, itemState);
+          return _this4.virtualScroller.onItemStateChange(i, itemState);
         };
@@ -271,7 +279,7 @@ }
     value: function getOnItemHeightChange(i) {
-      var _this4 = this;
+      var _this5 = this;
 
       if (!this.onItemHeightChange[i]) {
         this.onItemHeightChange[i] = function () {
-          return _this4.virtualScroller.onItemHeightChange(i);
+          return _this5.virtualScroller.onItemHeightChange(i);
         };
@@ -304,4 +312,5 @@ }
 
-      this.virtualScroller.render();
-      this._isMounted = true;
+      this._isMounted = true; // Start listening to scroll events.
+
+      this.virtualScroller.listen();
     } // `getSnapshotBeforeUpdate()` is called right before `componentDidUpdate()`.
@@ -349,4 +358,5 @@
     value: function componentWillUnmount() {
-      this.virtualScroller.destroy();
-      this._isMounted = false;
+      this._isMounted = false; // Stop listening to scroll events.
+
+      this.virtualScroller.stop();
     }
@@ -356,3 +366,3 @@ }, {
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -476,7 +486,7 @@ var _this$props3 = this.props,
           return React.createElement(Component, _extends({}, itemComponentProps, {
-            ref: _this5.shouldUseRefs() ? _this5.getItemRef(i) : undefined,
-            key: "".concat(_this5.uniquePrefix, ":").concat(i),
+            ref: _this6.shouldUseRefs() ? _this6.getItemRef(i) : undefined,
+            key: "".concat(_this6.uniquePrefix, ":").concat(i),
             state: itemStates && itemStates[i],
-            onStateChange: _this5.getOnItemStateChange(i),
-            onHeightChange: _this5.getOnItemHeightChange(i)
+            onStateChange: _this6.getOnItemStateChange(i),
+            onHeightChange: _this6.getOnItemHeightChange(i)
           }), item);
@@ -483,0 +493,0 @@ }

package.json

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

README.md

@@ -41,6 +41,2 @@ # VirtualScroller
 
-## GitHub
-
-On March 9th, 2020, GitHub, Inc. silently [banned](https://medium.com/@catamphetamine/how-github-blocked-me-and-all-my-libraries-c32c61f061d3) my account (and all my libraries) without any notice. I opened a support ticked but they didn't answer. Because of that, I had to move all my libraries to [GitLab](https://gitlab.com/catamphetamine).
-
 ## Install
@@ -56,3 +52,3 @@
 
-The default export is the `VirtualScroller` utility class. It implements the core logic of a `VirtualScroller` component and can be used for building a `VirtualScroller` component for any UI framework. [`virtual-scroller/dom`](#dom) and [`virtual-scroller/react`](#react) are both built upon it so this `VirtualScroller` utility class is a low-level core and is meant to be used by UI framework library authors and not by the end users — the end users should use high-level components like [`virtual-scroller/dom`](#dom) (for pure JS) and [`virtual-scroller/react`](#react) (for React).
+The default export is the low-level `VirtualScroller` class: it implements the core logic of a `VirtualScroller` component and can be used for building a `VirtualScroller` component for any UI framework. Hence, it's not meant to be used in applications directly: instead, see the high-level components exported from [`virtual-scroller/dom`](#dom) and [`virtual-scroller/react`](#react) packages.
 
@@ -62,58 +58,179 @@ ```js
 
-new VirtualScroller(
-  getContainer,
-  items,
-  options
-)
+const virtualScroller = new VirtualScroller(getContainerElement, items, options)
+
+// Start listening to scroll events.
+virtualScroller.listen()
+
+// Stop listening to scroll events.
+virtualScroller.stop()
 ```
 
-* `getContainer()` function should return the "container" DOM Element where the list items will be rendered to.
-* `items` is the list of items (is only used to get items count).
-* `options`: a developer must either supply `getState`/`setState` options or `onStateChange` option (or both).
+* `getContainerElement()` function returns a "container" DOM Element where the list will be rendered.
+* `items` is the list of items.
+* `options` is the list of options.
 
-Available `options`:
+### State
 
+`VirtualScroller` works by updating its `state` as the user scrolls the page. The `state` provides the calculations on which items should be rendered depending on the scroll position. `VirtualScroller` itself doesn't perform any rendering: a developer must either supply `getState`/`setState` options or `onStateChange` option (or both), and those functions are gonna be the ones actually rendering the list based on the `VirtualScroller` `state`.
+
+The main `state` properties are:
+
+* `items: any[]` — The list of items (can be updated via [`.setItems()`](#dynamically-loaded-lists)).
+* `firstShownItemIndex: number` — The index of the first item that should be rendered.
+* `lastShownItemIndex: number` — The index of the last item that should be rendered.
+* `beforeItemsHeight: number` — The `padding-top` which should be applied to the "container" element: it emulates all items before `firstShownItemIndex` as if they were rendered.
+* `afterItemsHeight: number` — The `padding-bottom` which should be applied to the "container" element: it emulates all items after `lastShownItemIndex` as if they were rendered.
+
+The following `state` properties are only used for saving and restoring `VirtualScroller` `state`, and normally shouldn't be accessed:
+
+* `itemStates: object?[]` — A list of item states.
+* `itemHeights: number?[]` — A list of measured item heights. If an item's height hasn't been measured yet then it's height is `undefined`.
+* `itemSpacing: number?` — Inter-item spacing. Is `undefined` until at least two items have been rendered.
+* `scrollY: number?` — The current page scroll position (page vertical scroll offset). If initial `state` is passed to `VirtualScroller`, then the page will be scrolled to `state.scrollY` on `.render()`.
+
+### Example
+
+Here's an example of implementing [`virtual-scroller/dom`](#dom) on top of the low-level `VirtualScroller` class _(advanced)_:
+
+```js
+import VirtualScroller from 'virtual-scroller'
+
+const items = [
+  { title: 'Apple' },
+  { title: 'Banana' },
+  { title: 'Cranberry' }
+]
+
+function renderItem(item) {
+  const div = document.createElement('div')
+  div.innerText = item.title
+  return div
+}
+
+const container = document.getElementById('list')
+
+function onStateChange(newState, prevState) {
+  const {
+    items,
+    beforeItemsHeight,
+    afterItemsHeight,
+    firstShownItemIndex,
+    lastShownItemIndex
+  } = newState
+  // Set `paddingTop` and `paddingBottom` on the container element:
+  // it emulates the non-visible items as if they were rendered.
+  container.style.paddingTop = Math.round(beforeItemsHeight) + 'px'
+  container.style.paddingBottom = Math.round(afterItemsHeight) + 'px'
+  // Perform an intelligent "diff" re-render as the user scrolls the page.
+  // This also requires that the list of `items` hasn't been changed.
+  // On initial render, `prevState` is `undefined`.
+  if (prevState && items === prevState.items) {
+    // Remove no longer visible items.
+    let i = prevState.lastShownItemIndex
+    while (i >= prevState.firstShownItemIndex) {
+      if (i >= firstShownItemIndex && i <= lastShownItemIndex) {
+        // The item is still visible.
+      } else {
+        // The item is no longer visible. Remove it.
+        container.removeChild(container.childNodes[i - prevState.firstShownItemIndex])
+      }
+      i--
+    }
+    // Add newly visible items.
+    let prependBefore = container.firstChild
+    let i = firstShownItemIndex
+    while (i <= lastShownItemIndex) {
+      if (i >= prevState.firstShownItemIndex && i <= prevState.lastShownItemIndex) {
+        // The item is already being rendered.
+        // Next items will be appended rather than prepended.
+        prependBefore = undefined
+      } else {
+        if (prependBefore) {
+          container.insertBefore(renderItem(items[i]), prependBefore)
+        } else {
+          container.appendChild(renderItem(items[i]))
+        }
+      }
+      i++
+    }
+  } else {
+    // Re-render the list from scratch.
+    while (container.firstChild) {
+      container.removeChild(container.firstChild)
+    }
+    let i = firstShownItemIndex
+    while (i <= lastShownItemIndex) {
+      container.appendChild(renderItem(items[i]))
+      i++
+    }
+  }
+}
+
+const options = { onStateChange }
+
+const virtualScroller = new VirtualScroller(() => element, items, options)
+
+// Start VirtualScroller listening for scroll events.
+virtualScroller.listen()
+
+// Stop VirtualScroller listening for scroll events
+// when the user navigates to another page:
+// router.onPageUnload(virtualScroller.stop)
+```
+
+### Options
+
+Available `VirtualScroller` `options`:
+
 * `estimatedItemHeight: number` — Is used for the initial render of the list: determines how many list items are rendered initially to cover the screen height plus some extra vertical margin for future scrolling. If not set then the list first renders just the first item, measures it, and then assumes it to be the `estimatedItemHeight` from which it calculates how many items to show on the second render pass to fill the screen height plus some extra vertical margin for future scrolling. Therefore, this setting is only for the initial render minor optimization and is not required.
+
 <!--
 * `margin` — Renders items which are outside of the screen by the amount of this "margin". Is the screen height by default: seems to be the optimal value for "Page Up" / "Page Down" navigation and optimized mouse wheel scrolling.
 -->
+
 * `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` — (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.
+
 * `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.
+
 * `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.
 
+* `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.
+
 `VirtualScroller` class instance provides methods:
 
-* `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.
+* `listen()` — Starts `VirtualScroller` listening for scroll events. Should be called immediately after the list has been rendered on a page.
+
+* `stop()` — Stops `VirtualScroller` listening for scroll events. Should be called when the list is about to be removed from the page. Once stopped, a `VirtualScroller` can't be restarted.
+
 * `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.
+
 * `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).
+
 * `setItems(newItems: any[], options: object?)` — Updates `VirtualScroller` `items`. For example, can be used to prepend or append new items to the list. See [Dynamically Loaded Lists](#dynamically-loaded-lists) section for more details. Available options: `preserveScrollPositionOnPrependItems: boolean` — Set to `true` to enable "restore scroll position after prepending items" feature (could be useful when implementing "Show previous items" button).
+
 * `getItemCoordinates(i: number): object` — Returns coordinates of item with index `i` relative to the document: `top` is the top offset of the item relative to the start of the document, `bottom` is the top offset of the item's bottom edge relative to the start of the document, `height` is the item's height.
+
 * `updateLayout()` — (advanced) Triggers a re-layout of `VirtualScroller`. It's what's called every time on page scroll or window resize. You most likely won't ever need to call this method manually. Still, it can be called manually when the list's top position changes not as a result of scrolling the page or resizing the window. For example, if some DOM elements above the list are removed (like a closeable "info" panel) or collapsed (like an "accordion" panel) then the list's top position changes which means that now some of the previoulsy shown items might go off screen and the user might be seeing a blank area where items haven't been rendered yet because they were off-screen during the previous `VirtualScroller` layout. `VirtualScroller` automatically performs a layout only on page scroll or window resize; in all other cases, when layout needs to be re-run then call it manually via this instance method.
 
-`VirtualScroller` state provides properties:
+## DOM
 
-* `firstShownItemIndex: number` — The index of the first item to render.
-* `lastShownItemIndex: number` — The index of the last item to render.
-* `beforeItemsHeight: number` — The `padding-top` which should be applied to the "container" element.
-* `afterItemsHeight: number` — The `padding-bottom` which should be applied to the "container" element.
-* `items: any[]` — The list of items (can be updated via [`.setItems()`](#dynamically-loaded-lists)).
-* `itemStates: object?[]` — The list of item states.
-* `itemHeights: number?[]` — A list of measured item heights. If an item's height hasn't been measured yet then it's height is `undefined`.
-* `itemSpacing: number?` — Inter-item spacing. Is `undefined` until at least two items have been rendered.
-* `scrollY: number?` — Page scroll Y (page vertical scroll offset). If initial `state` is passed, then the page will be scrolled to `state.scrollY` on `VirtualScroller` mount.
-
-### DOM
-
 This is an example of using `virtual-scroller/dom` component. It's the source code of the [DOM demo](https://catamphetamine.gitlab.io/virtual-scroller/index-dom.html).
@@ -161,6 +278,6 @@
 // For "Single Page Apps":
-// router.onPageUnload(virtualScroller.destroy)
+// router.onPageUnload(virtualScroller.stop)
 ```
 
-`VirtualScroller` constructor takes arguments:
+DOM `VirtualScroller` constructor takes arguments:
 
@@ -178,3 +295,3 @@ * `container` — Items list container DOM `Element`.
 
-`VirtualScroller` instance provides methods:
+DOM `VirtualScroller` instance provides methods:
 
@@ -185,5 +302,5 @@ * `setItems(items, options)` — A proxy for the corresponding `VirtualScroller` method.
 * `getItemCoordinates(i)` — A proxy for the corresponding `VirtualScroller` method.
-* `destroy()` — A proxy for the corresponding `VirtualScroller` method.
+* `stop()` — A proxy for the corresponding `VirtualScroller` method.
 
-### React
+## React
 
@@ -241,3 +358,3 @@ This is an example of using the React `virtual-scroller/react` component. It's the source code of the [React demo](https://catamphetamine.gitlab.io/virtual-scroller).
 
-`<VirtualScroller/>` component receives properties:
+React `<VirtualScroller/>` component receives properties:
 
@@ -289,3 +406,3 @@ * `items` — The items list.
 
-`<VirtualScroller/>` component instance provides methods:
+React `<VirtualScroller/>` component instance provides methods:
 
@@ -408,4 +525,8 @@ * `renderItem(i)` — Calls `.forceUpdate()` on the `itemComponent` instance for item with index `i`. Does nothing if the item isn't rendered. Is only supported for `component`s that are `React.Component`s.
 
+## GitHub
+
+On March 9th, 2020, GitHub, Inc. silently [banned](https://medium.com/@catamphetamine/how-github-blocked-me-and-all-my-libraries-c32c61f061d3) my account (and all my libraries) without any notice. I opened a support ticked but they didn't answer. Because of that, I had to move all my libraries to [GitLab](https://gitlab.com/catamphetamine).
+
 ## License
 
 [MIT](LICENSE)

source/DOMVirtualScroller.js

@@ -30,3 +30,3 @@ import VirtualScroller from './VirtualScroller'
     }
-    this.virtualScroller.render()
+    this.virtualScroller.listen()
   }
@@ -55,3 +55,3 @@
     // Perform an intelligent "diff" re-render if the `items` are the same.
-    const diffRender = prevState && items === prevState.items && prevState.items.length > 0
+    const diffRender = prevState && items === prevState.items && items.length > 0
     // Remove no longer visible items from the DOM.
@@ -65,6 +65,6 @@ if (diffRender) {
         if (i >= firstShownItemIndex && i <= lastShownItemIndex) {
-          // The item is still being shown.
+          // The item is still visible.
         } else {
           log('Remove item index', i)
-          // The item is no longer visible so remove it from the DOM.
+          // The item is no longer visible. Remove it.
           this.unmountItem(this.container.childNodes[i - prevState.firstShownItemIndex])
@@ -86,4 +86,4 @@ }
       if (diffRender && i >= prevState.firstShownItemIndex && i <= prevState.lastShownItemIndex) {
-        // The item is already shown, so don't re-render it.
-        // Next new items will be appended rather than prepended.
+        // The item is already being rendered.
+        // Next items will be appended rather than prepended.
         if (shouldPrependItems) {
@@ -110,4 +110,4 @@ shouldPrependItems = false
   onUnmount = () => {
-    console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead.')
-    this.destroy()
+    console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.stop()` instance method name instead.')
+    this.stop()
   }
@@ -117,5 +117,11 @@
   destroy = () => {
-    this.virtualScroller.destroy()
+    console.warn('[virtual-scroller] `.destroy()` instance method name is deprecated, use `.stop()` instance method name instead.')
+    this.stop()
   }
 
+  // Public API. Should be "bound" to `this`.
+  stop = () => {
+    this.virtualScroller.stop()
+  }
+
   unmountItem(itemElement) {
@@ -122,0 +128,0 @@ this.container.removeChild(itemElement)

source/ItemHeights.js

 import log from './log'
 
 export default class ItemHeights {
-	constructor(getContainerNode, getState) {
-		this.getContainerNode = getContainerNode
+	constructor(getContainerElement, getState) {
+		this.getContainerElement = getContainerElement
 		this.getState = getState
@@ -66,3 +66,3 @@ this.initialize()
 	_getItemHeight(i, firstShownItemIndex) {
-		const container = this.getContainerNode()
+		const container = this.getContainerElement()
 		if (container) {
@@ -79,3 +79,3 @@ const nodeIndex = i - firstShownItemIndex
 	getItemSpacing() {
-		const container = this.getContainerNode()
+		const container = this.getContainerElement()
 		if (container) {
@@ -82,0 +82,0 @@ if (container.childNodes.length > 1) {

source/ReactVirtualScroller.js

@@ -89,2 +89,12 @@ import React from 'react'
 		super(props)
+		// `this.previousItemsProperty` is only used for comparing
+		// `previousItems` with `newItems` inside `render()`.
+		this.previousItemsProperty = props.items
+		// Generate unique `key` prefix for list item components.
+		this.generateUniquePrefix()
+		// Create `VirtualScroller` instance.
+		this.createVirtualScroller()
+	}
+
+	createVirtualScroller() {
 		const {
@@ -109,5 +119,2 @@ as: AsComponent,
 		} = this.props
-		// `this.previousItemsProperty` is only used for comparing
-		// `previousItems` with `newItems` in `render()`.
-		this.previousItemsProperty = items
 		// Create `virtual-scroller` instance.
@@ -154,4 +161,2 @@ this.virtualScroller = new VirtualScroller(
 		)
-		// Generate unique `key` prefix for list item components.
-		this.generateUniquePrefix()
 	}
@@ -301,4 +306,5 @@
 		}
-		this.virtualScroller.render()
 		this._isMounted = true
+		// Start listening to scroll events.
+		this.virtualScroller.listen()
 	}
@@ -341,4 +347,5 @@
 	componentWillUnmount() {
-		this.virtualScroller.destroy()
 		this._isMounted = false
+		// Stop listening to scroll events.
+		this.virtualScroller.stop()
 	}
@@ -345,0 +352,0 @@

source/VirtualScroller.js

@@ -31,4 +31,4 @@ // For some weird reason, in Chrome, `setTimeout()` would lag up to a second (or more) behind.
 	/**
-	 * @param  {function} getContainerNode — Returns container DOM `Element`.
-	 * @param  {any[]} items — Are only used for getting items count and for comparing "previous" items to "next" items if `.setItems(newItems)` is called.
+	 * @param  {function} getContainerElement — Returns the container DOM `Element`.
+	 * @param  {any[]} items — The list of items.
 	 * @param  {Object} [options] — See README.md.
@@ -38,3 +38,3 @@ * @return {VirtualScroller}
 	constructor(
-		getContainerNode,
+		getContainerElement,
 		items,
@@ -73,4 +73,2 @@ options = {}
 
-		preserveScrollPositionOfTheBottomOfTheListOnMount = preserveScrollPositionOfTheBottomOfTheListOnMount || preserveScrollPositionAtBottomOnMount
-
 		log('~ Initialize ~')
@@ -99,3 +97,3 @@
 		// 	// for "Page Up" / "Page Down" navigation and optimized mouse wheel scrolling.
-		// 	margin = typeof window === 'undefined' ? 0 : this.scrollableContainer.getHeight()
+		// 	margin = this.scrollableContainer ? this.scrollableContainer.getHeight() : 0
 		// }
@@ -168,9 +166,2 @@
 
-		// Remove any accidental text nodes from container (like whitespace).
-    // Also guards against cases when someone accidentally tries
-    // using `VirtualScroller` on a non-empty element.
-		if (getContainerNode()) {
-			clearElement(getContainerNode())
-		}
-
 		if (setState) {
@@ -200,6 +191,23 @@ this.getState = getState
 
-		this.getContainerNode = getContainerNode
-		this.itemHeights = new ItemHeights(getContainerNode, this.getState)
+		// Sometimes, when `new VirtualScroller()` instance is created,
+		// `getContainerElement()` might not be ready to return the "container" DOM Element yet
+		// (for example, because it's not rendered yet). That's the reason why it's a getter function.
+		// For example, in React, on server side, where there's no "container" DOM Element,
+		// it still "renders" a list with a predefined amount of items in it by default.
+		// (`initiallyRenderedItemsCount`, or `1`).
+		this.getContainerElement = getContainerElement
+		// Remove any accidental text nodes from container (like whitespace).
+		// Also guards against cases when someone accidentally tries
+		// using `VirtualScroller` on a non-empty element.
+		if (getContainerElement()) {
+			clearElement(getContainerElement())
+		}
 
+		this.itemHeights = new ItemHeights(this.getContainerElement, this.getState)
+
 		if (this.scrollableContainer) {
+			if (preserveScrollPositionAtBottomOnMount) {
+				console.warn('[virtual-scroller] `preserveScrollPositionAtBottomOnMount` option/property has been renamed to `preserveScrollPositionOfTheBottomOfTheListOnMount`')
+				preserveScrollPositionOfTheBottomOfTheListOnMount = preserveScrollPositionAtBottomOnMount
+			}
 			if (preserveScrollPositionOfTheBottomOfTheListOnMount) {
@@ -314,6 +322,11 @@ this.preserveScrollPositionOfTheBottomOfTheListOnMount = {
 	getMargin() {
-		// Renders items that are outside of the screen by this "margin".
-		// Is the screen height by default: seems to be the optimal value
-		// for "Page Up" / "Page Down" navigation and optimized mouse wheel scrolling.
-		return this.scrollableContainer.getHeight()
+		// `VirtualScroller` also items that are outside of the screen
+		// by the amount of this "render ahead margin" (both on top and bottom).
+		// The default "render ahead margin" is equal to the screen height:
+		// this seems to be the optimal value for "Page Up" / "Page Down" navigation
+		// and optimized mouse wheel scrolling (a user is unlikely to continuously
+		// scroll past the height of a screen, and when they stop scrolling,
+		// the list is re-rendered).
+		const renderAheadMarginRatio = 1 // in scrollable container heights.
+		return this.scrollableContainer.getHeight() * renderAheadMarginRatio
 	}
@@ -361,10 +374,18 @@
 	onMount() {
-		console.warn('[virtual-scroller] `.onMount()` instance method name is deprecated, use `.render()` instance method name instead.')
-		this.render()
+		console.warn('[virtual-scroller] `.onMount()` instance method name is deprecated, use `.listen()` instance method name instead.')
+		this.listen()
 	}
 
+	render() {
+		console.warn('[virtual-scroller] `.render()` instance method name is deprecated, use `.listen()` instance method name instead.')
+		this.listen()
+	}
+
 	/**
 	 * Should be invoked after a "container" DOM Element is mounted (inserted into the DOM tree).
 	 */
-	render() {
+	listen() {
+		if (this.isRendered === false) {
+			throw new Error('[virtual-scroller] Can\'t restart a `VirtualScroller` after it has been stopped')
+		}
 		log('~ Rendered (initial) ~')
@@ -387,3 +408,3 @@ // `this.isRendered = true` should be the first statement in this function,
 		if (this.tbody) {
-			addTbodyStyles(this.getContainerNode())
+			addTbodyStyles(this.getContainerElement())
 		}
@@ -453,3 +474,3 @@ if (this.preserveScrollPositionOfTheBottomOfTheListOnMount) {
 	getHeight() {
-		return this.getContainerNode().getBoundingClientRect().height
+		return this.getContainerElement().getBoundingClientRect().height
 	}
@@ -462,3 +483,3 @@
 	getTopOffset() {
-		return this.scrollableContainer.getTopOffset(this.getContainerNode())
+		return this.scrollableContainer.getTopOffset(this.getContainerElement())
 	}
@@ -479,3 +500,3 @@
 			// https://stackoverflow.com/questions/23770449/embedded-youtube-video-fullscreen-or-causing-resize
-			if (document.fullscreenElement && this.getContainerNode().contains(document.fullscreenElement)) {
+			if (document.fullscreenElement && this.getContainerElement().contains(document.fullscreenElement)) {
 				return false
@@ -533,7 +554,12 @@ }
 	onUnmount() {
-		console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.destroy()` instance method name instead.')
-		this.destroy()
+		console.warn('[virtual-scroller] `.onUnmount()` instance method name is deprecated, use `.stop()` instance method name instead.')
+		this.stop()
 	}
 
 	destroy() {
+		console.warn('[virtual-scroller] `.destroy()` instance method name is deprecated, use `.stop()` instance method name instead.')
+		this.stop()
+	}
+
+	stop() {
 		this.isRendered = false
@@ -663,3 +689,3 @@ this.removeScrollPositionListener()
 		const { beforeItemsHeight, afterItemsHeight } = this.getState()
-		setTbodyPadding(this.getContainerNode(), beforeItemsHeight, afterItemsHeight)
+		setTbodyPadding(this.getContainerElement(), beforeItemsHeight, afterItemsHeight)
 	}
@@ -1414,3 +1440,3 @@
 	getItemElement(i) {
-		return this.getContainerNode().childNodes[i]
+		return this.getContainerElement().childNodes[i]
 	}
@@ -1417,0 +1443,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1523704

increased by1.56%

Lines of code

9269

increased by1.3%

Number of lines in readme file

523

increased by30.1%

No dependency changes