react-tiny-virtual-list - npm Package Compare versions

Comparing version 2.1.4 to 2.1.5

build/react-tiny-virtual-list.cjs.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
@@ -22,5 +24,8 @@ var PropTypes = require('prop-types');
 
-var extendStatics = Object.setPrototypeOf ||
-    ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-    function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
 
@@ -33,8 +38,11 @@ function __extends(d, b) {
 
-var __assign = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
@@ -52,13 +60,22 @@
 
-var ALIGN_AUTO = 'auto';
-var ALIGN_START = 'start';
-var ALIGN_CENTER = 'center';
-var ALIGN_END = 'end';
-var DIRECTION_VERTICAL = 'vertical';
-var DIRECTION_HORIZONTAL = 'horizontal';
-var SCROLL_CHANGE_OBSERVED = 'observed';
-var SCROLL_CHANGE_REQUESTED = 'requested';
-var scrollProp = (_a = {}, _a[DIRECTION_VERTICAL] = 'scrollTop', _a[DIRECTION_HORIZONTAL] = 'scrollLeft', _a);
-var sizeProp = (_b = {}, _b[DIRECTION_VERTICAL] = 'height', _b[DIRECTION_HORIZONTAL] = 'width', _b);
-var positionProp = (_c = {}, _c[DIRECTION_VERTICAL] = 'top', _c[DIRECTION_HORIZONTAL] = 'left', _c);
+var ALIGNMENT;
+(function (ALIGNMENT) {
+    ALIGNMENT["AUTO"] = "auto";
+    ALIGNMENT["START"] = "start";
+    ALIGNMENT["CENTER"] = "center";
+    ALIGNMENT["END"] = "end";
+})(ALIGNMENT || (ALIGNMENT = {}));
+
+(function (DIRECTION) {
+    DIRECTION["HORIZONTAL"] = "horizontal";
+    DIRECTION["VERTICAL"] = "vertical";
+})(exports.ScrollDirection || (exports.ScrollDirection = {}));
+var SCROLL_CHANGE_REASON;
+(function (SCROLL_CHANGE_REASON) {
+    SCROLL_CHANGE_REASON["OBSERVED"] = "observed";
+    SCROLL_CHANGE_REASON["REQUESTED"] = "requested";
+})(SCROLL_CHANGE_REASON || (SCROLL_CHANGE_REASON = {}));
+var scrollProp = (_a = {}, _a[exports.ScrollDirection.VERTICAL] = 'scrollTop', _a[exports.ScrollDirection.HORIZONTAL] = 'scrollLeft', _a);
+var sizeProp = (_b = {}, _b[exports.ScrollDirection.VERTICAL] = 'height', _b[exports.ScrollDirection.HORIZONTAL] = 'width', _b);
+var positionProp = (_c = {}, _c[exports.ScrollDirection.VERTICAL] = 'top', _c[exports.ScrollDirection.HORIZONTAL] = 'left', _c);
 var _a;
@@ -69,3 +86,3 @@ var _b;
 /* Forked from react-virtualized 💖 */
-var SizeAndPositionManager = function () {
+var SizeAndPositionManager = /** @class */function () {
     function SizeAndPositionManager(_a) {
@@ -85,5 +102,13 @@ var itemCount = _a.itemCount,
         var itemCount = _a.itemCount,
+            itemSizeGetter = _a.itemSizeGetter,
             estimatedItemSize = _a.estimatedItemSize;
-        this.itemCount = itemCount;
-        this.estimatedItemSize = estimatedItemSize;
+        if (itemCount != null) {
+            this.itemCount = itemCount;
+        }
+        if (estimatedItemSize != null) {
+            this.estimatedItemSize = estimatedItemSize;
+        }
+        if (itemSizeGetter != null) {
+            this.itemSizeGetter = itemSizeGetter;
+        }
     };
@@ -140,3 +165,3 @@ SizeAndPositionManager.prototype.getLastMeasuredIndex = function () {
         var _b = _a.align,
-            align = _b === void 0 ? ALIGN_START : _b,
+            align = _b === void 0 ? ALIGNMENT.START : _b,
             containerSize = _a.containerSize,
@@ -153,9 +178,9 @@ currentOffset = _a.currentOffset,
         switch (align) {
-            case ALIGN_END:
+            case ALIGNMENT.END:
                 idealOffset = minOffset;
                 break;
-            case ALIGN_CENTER:
+            case ALIGNMENT.CENTER:
                 idealOffset = maxOffset - (containerSize - datum.size) / 2;
                 break;
-            case ALIGN_START:
+            case ALIGNMENT.START:
                 idealOffset = maxOffset;
@@ -283,4 +308,3 @@ break;
 var STYLE_INNER = {
-    position: 'relative',
-    overflow: 'hidden',
+    position: 'absolute',
     width: '100%',
@@ -291,14 +315,18 @@ minHeight: '100%'
     position: 'absolute',
+    top: 0,
     left: 0,
     width: '100%'
 };
-var VirtualList = function (_super) {
+var VirtualList = /** @class */function (_super) {
     __extends(VirtualList, _super);
     function VirtualList() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.itemSizeGetter = function (itemSize) {
+            return function (index) {
+                return _this.getSize(index, itemSize);
+            };
+        };
         _this.sizeAndPositionManager = new SizeAndPositionManager({
             itemCount: _this.props.itemCount,
-            itemSizeGetter: function (index) {
-                return _this.getSize(index);
-            },
+            itemSizeGetter: _this.itemSizeGetter(_this.props.itemSize),
             estimatedItemSize: _this.getEstimatedItemSize()
@@ -308,9 +336,12 @@ });
             offset: _this.props.scrollOffset || _this.props.scrollToIndex != null && _this.getOffsetForIndex(_this.props.scrollToIndex) || 0,
-            scrollChangeReason: SCROLL_CHANGE_REQUESTED
+            scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
         };
         _this.styleCache = {};
-        _this.handleScroll = function (e) {
+        _this.getRef = function (node) {
+            _this.rootNode = node;
+        };
+        _this.handleScroll = function (event) {
             var onScroll = _this.props.onScroll;
             var offset = _this.getNodeOffset();
-            if (offset < 0 || _this.state.offset === offset || e.target !== _this.rootNode) {
+            if (offset < 0 || _this.state.offset === offset || event.target !== _this.rootNode) {
                 return;
@@ -320,11 +351,8 @@ }
                 offset: offset,
-                scrollChangeReason: SCROLL_CHANGE_OBSERVED
+                scrollChangeReason: SCROLL_CHANGE_REASON.OBSERVED
             });
             if (typeof onScroll === 'function') {
-                onScroll(offset, e);
+                onScroll(offset, event);
             }
         };
-        _this.getRef = function (node) {
-            _this.rootNode = node;
-        };
         return _this;
@@ -336,2 +364,5 @@ }
             scrollToIndex = _a.scrollToIndex;
+        this.rootNode.addEventListener('scroll', this.handleScroll, {
+            passive: true
+        });
         if (scrollOffset != null) {
@@ -353,2 +384,7 @@ this.scrollTo(scrollOffset);
         var itemPropsHaveChanged = nextProps.itemCount !== itemCount || nextProps.itemSize !== itemSize || nextProps.estimatedItemSize !== estimatedItemSize;
+        if (nextProps.itemSize !== itemSize) {
+            this.sizeAndPositionManager.updateConfig({
+                itemSizeGetter: this.itemSizeGetter(nextProps.itemSize)
+            });
+        }
         if (nextProps.itemCount !== itemCount || nextProps.estimatedItemSize !== estimatedItemSize) {
@@ -366,3 +402,3 @@ this.sizeAndPositionManager.updateConfig({
                 offset: nextProps.scrollOffset || 0,
-                scrollChangeReason: SCROLL_CHANGE_REQUESTED
+                scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
             });
@@ -372,3 +408,3 @@ } else if (typeof nextProps.scrollToIndex === 'number' && (scrollPropsHaveChanged || itemPropsHaveChanged)) {
                 offset: this.getOffsetForIndex(nextProps.scrollToIndex, nextProps.scrollToAlignment, nextProps.itemCount),
-                scrollChangeReason: SCROLL_CHANGE_REQUESTED
+                scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
             });
@@ -381,20 +417,12 @@ }
             scrollChangeReason = _a.scrollChangeReason;
-        if (prevState.offset !== offset && scrollChangeReason === SCROLL_CHANGE_REQUESTED) {
+        if (prevState.offset !== offset && scrollChangeReason === SCROLL_CHANGE_REASON.REQUESTED) {
             this.scrollTo(offset);
         }
     };
-    VirtualList.prototype.getEstimatedItemSize = function (props) {
-        if (props === void 0) {
-            props = this.props;
-        }
-        return props.estimatedItemSize || typeof props.itemSize === 'number' && props.itemSize || 50;
+    VirtualList.prototype.componentWillUnmount = function () {
+        this.rootNode.removeEventListener('scroll', this.handleScroll);
     };
-    VirtualList.prototype.getNodeOffset = function () {
-        var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
-        return this.rootNode[scrollProp[scrollDirection]];
-    };
     VirtualList.prototype.scrollTo = function (value) {
         var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
+            scrollDirection = _a === void 0 ? exports.ScrollDirection.VERTICAL : _a;
         this.rootNode[scrollProp[scrollDirection]] = value;
@@ -410,3 +438,3 @@ };
         var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
+            scrollDirection = _a === void 0 ? exports.ScrollDirection.VERTICAL : _a;
         if (index < 0 || index >= itemCount) {
@@ -422,22 +450,2 @@ index = 0;
     };
-    VirtualList.prototype.getSize = function (index) {
-        var itemSize = this.props.itemSize;
-        if (typeof itemSize === 'function') {
-            return itemSize(index);
-        }
-        return Array.isArray(itemSize) ? itemSize[index] : itemSize;
-    };
-    VirtualList.prototype.getStyle = function (index) {
-        var style = this.styleCache[index];
-        if (style) {
-            return style;
-        }
-        var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
-        var _b = this.sizeAndPositionManager.getSizeAndPositionForIndex(index),
-            size = _b.size,
-            offset = _b.offset;
-        return this.styleCache[index] = __assign({}, STYLE_ITEM, (_c = {}, _c[sizeProp[scrollDirection]] = size, _c[positionProp[scrollDirection]] = offset, _c));
-        var _c;
-    };
     VirtualList.prototype.recomputeSizes = function (startIndex) {
@@ -462,3 +470,3 @@ if (startIndex === void 0) {
             _c = _a.scrollDirection,
-            scrollDirection = _c === void 0 ? DIRECTION_VERTICAL : _c,
+            scrollDirection = _c === void 0 ? exports.ScrollDirection.VERTICAL : _c,
             scrollOffset = _a.scrollOffset,
@@ -479,2 +487,4 @@ scrollToIndex = _a.scrollToIndex,
         var items = [];
+        var wrapperStyle = __assign({}, STYLE_WRAPPER, style, { height: height, width: width });
+        var innerStyle = __assign({}, STYLE_INNER, (_e = {}, _e[sizeProp[scrollDirection]] = this.sizeAndPositionManager.getTotalSize(), _e));
         if (typeof start !== 'undefined' && typeof stop !== 'undefined') {
@@ -494,8 +504,38 @@ for (var index = start; index <= stop; index++) {
         }
-        return React.createElement("div", __assign({ ref: this.getRef }, props, { onScroll: this.handleScroll, style: __assign({}, STYLE_WRAPPER, style, { height: height, width: width }) }), React.createElement("div", { style: __assign({}, STYLE_INNER, (_e = {}, _e[sizeProp[scrollDirection]] = this.sizeAndPositionManager.getTotalSize(), _e)) }, items));
+        return React.createElement("div", __assign({ ref: this.getRef }, props, { style: wrapperStyle }), React.createElement("div", { style: innerStyle }, items));
         var _e;
     };
+    VirtualList.prototype.getNodeOffset = function () {
+        var _a = this.props.scrollDirection,
+            scrollDirection = _a === void 0 ? exports.ScrollDirection.VERTICAL : _a;
+        return this.rootNode[scrollProp[scrollDirection]];
+    };
+    VirtualList.prototype.getEstimatedItemSize = function (props) {
+        if (props === void 0) {
+            props = this.props;
+        }
+        return props.estimatedItemSize || typeof props.itemSize === 'number' && props.itemSize || 50;
+    };
+    VirtualList.prototype.getSize = function (index, itemSize) {
+        if (typeof itemSize === 'function') {
+            return itemSize(index);
+        }
+        return Array.isArray(itemSize) ? itemSize[index] : itemSize;
+    };
+    VirtualList.prototype.getStyle = function (index) {
+        var style = this.styleCache[index];
+        if (style) {
+            return style;
+        }
+        var _a = this.props.scrollDirection,
+            scrollDirection = _a === void 0 ? exports.ScrollDirection.VERTICAL : _a;
+        var _b = this.sizeAndPositionManager.getSizeAndPositionForIndex(index),
+            size = _b.size,
+            offset = _b.offset;
+        return this.styleCache[index] = __assign({}, STYLE_ITEM, (_c = {}, _c[sizeProp[scrollDirection]] = size, _c[positionProp[scrollDirection]] = offset, _c));
+        var _c;
+    };
     VirtualList.defaultProps = {
         overscanCount: 3,
-        scrollDirection: DIRECTION_VERTICAL,
+        scrollDirection: exports.ScrollDirection.VERTICAL,
         width: '100%'
@@ -508,2 +548,3 @@ };
         itemSize: PropTypes.oneOfType([PropTypes.number, PropTypes.array, PropTypes.func]).isRequired,
+        onScroll: PropTypes.func,
         onItemsRendered: PropTypes.func,
@@ -514,5 +555,6 @@ overscanCount: PropTypes.number,
         scrollToIndex: PropTypes.number,
-        scrollToAlignment: PropTypes.oneOf([ALIGN_AUTO, ALIGN_START, ALIGN_CENTER, ALIGN_END]),
-        scrollDirection: PropTypes.oneOf([DIRECTION_HORIZONTAL, DIRECTION_VERTICAL]).isRequired,
-        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+        scrollToAlignment: PropTypes.oneOf([ALIGNMENT.AUTO, ALIGNMENT.START, ALIGNMENT.CENTER, ALIGNMENT.END]),
+        scrollDirection: PropTypes.oneOf([exports.ScrollDirection.HORIZONTAL, exports.ScrollDirection.VERTICAL]),
+        style: PropTypes.object,
+        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
     };
@@ -522,2 +564,2 @@ return VirtualList;
 
-module.exports = VirtualList;
+exports['default'] = VirtualList;

build/react-tiny-virtual-list.es.js

 import { PureComponent, createElement } from 'react';
-import { array, func, number, oneOf, oneOfType, string } from 'prop-types';
+import { array, func, number, object, oneOf, oneOfType, string } from 'prop-types';
 
@@ -20,5 +20,8 @@ /*! *****************************************************************************
 
-var extendStatics = Object.setPrototypeOf ||
-    ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-    function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
 
@@ -31,8 +34,11 @@ function __extends(d, b) {
 
-var __assign = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
@@ -50,13 +56,22 @@
 
-var ALIGN_AUTO = 'auto';
-var ALIGN_START = 'start';
-var ALIGN_CENTER = 'center';
-var ALIGN_END = 'end';
-var DIRECTION_VERTICAL = 'vertical';
-var DIRECTION_HORIZONTAL = 'horizontal';
-var SCROLL_CHANGE_OBSERVED = 'observed';
-var SCROLL_CHANGE_REQUESTED = 'requested';
-var scrollProp = (_a = {}, _a[DIRECTION_VERTICAL] = 'scrollTop', _a[DIRECTION_HORIZONTAL] = 'scrollLeft', _a);
-var sizeProp = (_b = {}, _b[DIRECTION_VERTICAL] = 'height', _b[DIRECTION_HORIZONTAL] = 'width', _b);
-var positionProp = (_c = {}, _c[DIRECTION_VERTICAL] = 'top', _c[DIRECTION_HORIZONTAL] = 'left', _c);
+var ALIGNMENT;
+(function (ALIGNMENT) {
+    ALIGNMENT["AUTO"] = "auto";
+    ALIGNMENT["START"] = "start";
+    ALIGNMENT["CENTER"] = "center";
+    ALIGNMENT["END"] = "end";
+})(ALIGNMENT || (ALIGNMENT = {}));
+var DIRECTION;
+(function (DIRECTION) {
+    DIRECTION["HORIZONTAL"] = "horizontal";
+    DIRECTION["VERTICAL"] = "vertical";
+})(DIRECTION || (DIRECTION = {}));
+var SCROLL_CHANGE_REASON;
+(function (SCROLL_CHANGE_REASON) {
+    SCROLL_CHANGE_REASON["OBSERVED"] = "observed";
+    SCROLL_CHANGE_REASON["REQUESTED"] = "requested";
+})(SCROLL_CHANGE_REASON || (SCROLL_CHANGE_REASON = {}));
+var scrollProp = (_a = {}, _a[DIRECTION.VERTICAL] = 'scrollTop', _a[DIRECTION.HORIZONTAL] = 'scrollLeft', _a);
+var sizeProp = (_b = {}, _b[DIRECTION.VERTICAL] = 'height', _b[DIRECTION.HORIZONTAL] = 'width', _b);
+var positionProp = (_c = {}, _c[DIRECTION.VERTICAL] = 'top', _c[DIRECTION.HORIZONTAL] = 'left', _c);
 var _a;
@@ -67,3 +82,3 @@ var _b;
 /* Forked from react-virtualized 💖 */
-var SizeAndPositionManager = function () {
+var SizeAndPositionManager = /** @class */function () {
     function SizeAndPositionManager(_a) {
@@ -83,5 +98,13 @@ var itemCount = _a.itemCount,
         var itemCount = _a.itemCount,
+            itemSizeGetter = _a.itemSizeGetter,
             estimatedItemSize = _a.estimatedItemSize;
-        this.itemCount = itemCount;
-        this.estimatedItemSize = estimatedItemSize;
+        if (itemCount != null) {
+            this.itemCount = itemCount;
+        }
+        if (estimatedItemSize != null) {
+            this.estimatedItemSize = estimatedItemSize;
+        }
+        if (itemSizeGetter != null) {
+            this.itemSizeGetter = itemSizeGetter;
+        }
     };
@@ -138,3 +161,3 @@ SizeAndPositionManager.prototype.getLastMeasuredIndex = function () {
         var _b = _a.align,
-            align = _b === void 0 ? ALIGN_START : _b,
+            align = _b === void 0 ? ALIGNMENT.START : _b,
             containerSize = _a.containerSize,
@@ -151,9 +174,9 @@ currentOffset = _a.currentOffset,
         switch (align) {
-            case ALIGN_END:
+            case ALIGNMENT.END:
                 idealOffset = minOffset;
                 break;
-            case ALIGN_CENTER:
+            case ALIGNMENT.CENTER:
                 idealOffset = maxOffset - (containerSize - datum.size) / 2;
                 break;
-            case ALIGN_START:
+            case ALIGNMENT.START:
                 idealOffset = maxOffset;
@@ -281,4 +304,3 @@ break;
 var STYLE_INNER = {
-    position: 'relative',
-    overflow: 'hidden',
+    position: 'absolute',
     width: '100%',
@@ -289,14 +311,18 @@ minHeight: '100%'
     position: 'absolute',
+    top: 0,
     left: 0,
     width: '100%'
 };
-var VirtualList = function (_super) {
+var VirtualList = /** @class */function (_super) {
     __extends(VirtualList, _super);
     function VirtualList() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.itemSizeGetter = function (itemSize) {
+            return function (index) {
+                return _this.getSize(index, itemSize);
+            };
+        };
         _this.sizeAndPositionManager = new SizeAndPositionManager({
             itemCount: _this.props.itemCount,
-            itemSizeGetter: function (index) {
-                return _this.getSize(index);
-            },
+            itemSizeGetter: _this.itemSizeGetter(_this.props.itemSize),
             estimatedItemSize: _this.getEstimatedItemSize()
@@ -306,9 +332,12 @@ });
             offset: _this.props.scrollOffset || _this.props.scrollToIndex != null && _this.getOffsetForIndex(_this.props.scrollToIndex) || 0,
-            scrollChangeReason: SCROLL_CHANGE_REQUESTED
+            scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
         };
         _this.styleCache = {};
-        _this.handleScroll = function (e) {
+        _this.getRef = function (node) {
+            _this.rootNode = node;
+        };
+        _this.handleScroll = function (event) {
             var onScroll = _this.props.onScroll;
             var offset = _this.getNodeOffset();
-            if (offset < 0 || _this.state.offset === offset || e.target !== _this.rootNode) {
+            if (offset < 0 || _this.state.offset === offset || event.target !== _this.rootNode) {
                 return;
@@ -318,11 +347,8 @@ }
                 offset: offset,
-                scrollChangeReason: SCROLL_CHANGE_OBSERVED
+                scrollChangeReason: SCROLL_CHANGE_REASON.OBSERVED
             });
             if (typeof onScroll === 'function') {
-                onScroll(offset, e);
+                onScroll(offset, event);
             }
         };
-        _this.getRef = function (node) {
-            _this.rootNode = node;
-        };
         return _this;
@@ -334,2 +360,5 @@ }
             scrollToIndex = _a.scrollToIndex;
+        this.rootNode.addEventListener('scroll', this.handleScroll, {
+            passive: true
+        });
         if (scrollOffset != null) {
@@ -351,2 +380,7 @@ this.scrollTo(scrollOffset);
         var itemPropsHaveChanged = nextProps.itemCount !== itemCount || nextProps.itemSize !== itemSize || nextProps.estimatedItemSize !== estimatedItemSize;
+        if (nextProps.itemSize !== itemSize) {
+            this.sizeAndPositionManager.updateConfig({
+                itemSizeGetter: this.itemSizeGetter(nextProps.itemSize)
+            });
+        }
         if (nextProps.itemCount !== itemCount || nextProps.estimatedItemSize !== estimatedItemSize) {
@@ -364,3 +398,3 @@ this.sizeAndPositionManager.updateConfig({
                 offset: nextProps.scrollOffset || 0,
-                scrollChangeReason: SCROLL_CHANGE_REQUESTED
+                scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
             });
@@ -370,3 +404,3 @@ } else if (typeof nextProps.scrollToIndex === 'number' && (scrollPropsHaveChanged || itemPropsHaveChanged)) {
                 offset: this.getOffsetForIndex(nextProps.scrollToIndex, nextProps.scrollToAlignment, nextProps.itemCount),
-                scrollChangeReason: SCROLL_CHANGE_REQUESTED
+                scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
             });
@@ -379,20 +413,12 @@ }
             scrollChangeReason = _a.scrollChangeReason;
-        if (prevState.offset !== offset && scrollChangeReason === SCROLL_CHANGE_REQUESTED) {
+        if (prevState.offset !== offset && scrollChangeReason === SCROLL_CHANGE_REASON.REQUESTED) {
             this.scrollTo(offset);
         }
     };
-    VirtualList.prototype.getEstimatedItemSize = function (props) {
-        if (props === void 0) {
-            props = this.props;
-        }
-        return props.estimatedItemSize || typeof props.itemSize === 'number' && props.itemSize || 50;
+    VirtualList.prototype.componentWillUnmount = function () {
+        this.rootNode.removeEventListener('scroll', this.handleScroll);
     };
-    VirtualList.prototype.getNodeOffset = function () {
-        var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
-        return this.rootNode[scrollProp[scrollDirection]];
-    };
     VirtualList.prototype.scrollTo = function (value) {
         var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
+            scrollDirection = _a === void 0 ? DIRECTION.VERTICAL : _a;
         this.rootNode[scrollProp[scrollDirection]] = value;
@@ -408,3 +434,3 @@ };
         var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
+            scrollDirection = _a === void 0 ? DIRECTION.VERTICAL : _a;
         if (index < 0 || index >= itemCount) {
@@ -420,22 +446,2 @@ index = 0;
     };
-    VirtualList.prototype.getSize = function (index) {
-        var itemSize = this.props.itemSize;
-        if (typeof itemSize === 'function') {
-            return itemSize(index);
-        }
-        return Array.isArray(itemSize) ? itemSize[index] : itemSize;
-    };
-    VirtualList.prototype.getStyle = function (index) {
-        var style = this.styleCache[index];
-        if (style) {
-            return style;
-        }
-        var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
-        var _b = this.sizeAndPositionManager.getSizeAndPositionForIndex(index),
-            size = _b.size,
-            offset = _b.offset;
-        return this.styleCache[index] = __assign({}, STYLE_ITEM, (_c = {}, _c[sizeProp[scrollDirection]] = size, _c[positionProp[scrollDirection]] = offset, _c));
-        var _c;
-    };
     VirtualList.prototype.recomputeSizes = function (startIndex) {
@@ -460,3 +466,3 @@ if (startIndex === void 0) {
             _c = _a.scrollDirection,
-            scrollDirection = _c === void 0 ? DIRECTION_VERTICAL : _c,
+            scrollDirection = _c === void 0 ? DIRECTION.VERTICAL : _c,
             scrollOffset = _a.scrollOffset,
@@ -477,2 +483,4 @@ scrollToIndex = _a.scrollToIndex,
         var items = [];
+        var wrapperStyle = __assign({}, STYLE_WRAPPER, style, { height: height, width: width });
+        var innerStyle = __assign({}, STYLE_INNER, (_e = {}, _e[sizeProp[scrollDirection]] = this.sizeAndPositionManager.getTotalSize(), _e));
         if (typeof start !== 'undefined' && typeof stop !== 'undefined') {
@@ -492,8 +500,38 @@ for (var index = start; index <= stop; index++) {
         }
-        return createElement("div", __assign({ ref: this.getRef }, props, { onScroll: this.handleScroll, style: __assign({}, STYLE_WRAPPER, style, { height: height, width: width }) }), createElement("div", { style: __assign({}, STYLE_INNER, (_e = {}, _e[sizeProp[scrollDirection]] = this.sizeAndPositionManager.getTotalSize(), _e)) }, items));
+        return createElement("div", __assign({ ref: this.getRef }, props, { style: wrapperStyle }), createElement("div", { style: innerStyle }, items));
         var _e;
     };
+    VirtualList.prototype.getNodeOffset = function () {
+        var _a = this.props.scrollDirection,
+            scrollDirection = _a === void 0 ? DIRECTION.VERTICAL : _a;
+        return this.rootNode[scrollProp[scrollDirection]];
+    };
+    VirtualList.prototype.getEstimatedItemSize = function (props) {
+        if (props === void 0) {
+            props = this.props;
+        }
+        return props.estimatedItemSize || typeof props.itemSize === 'number' && props.itemSize || 50;
+    };
+    VirtualList.prototype.getSize = function (index, itemSize) {
+        if (typeof itemSize === 'function') {
+            return itemSize(index);
+        }
+        return Array.isArray(itemSize) ? itemSize[index] : itemSize;
+    };
+    VirtualList.prototype.getStyle = function (index) {
+        var style = this.styleCache[index];
+        if (style) {
+            return style;
+        }
+        var _a = this.props.scrollDirection,
+            scrollDirection = _a === void 0 ? DIRECTION.VERTICAL : _a;
+        var _b = this.sizeAndPositionManager.getSizeAndPositionForIndex(index),
+            size = _b.size,
+            offset = _b.offset;
+        return this.styleCache[index] = __assign({}, STYLE_ITEM, (_c = {}, _c[sizeProp[scrollDirection]] = size, _c[positionProp[scrollDirection]] = offset, _c));
+        var _c;
+    };
     VirtualList.defaultProps = {
         overscanCount: 3,
-        scrollDirection: DIRECTION_VERTICAL,
+        scrollDirection: DIRECTION.VERTICAL,
         width: '100%'
@@ -506,2 +544,3 @@ };
         itemSize: oneOfType([number, array, func]).isRequired,
+        onScroll: func,
         onItemsRendered: func,
@@ -512,5 +551,6 @@ overscanCount: number,
         scrollToIndex: number,
-        scrollToAlignment: oneOf([ALIGN_AUTO, ALIGN_START, ALIGN_CENTER, ALIGN_END]),
-        scrollDirection: oneOf([DIRECTION_HORIZONTAL, DIRECTION_VERTICAL]).isRequired,
-        width: oneOfType([number, string]).isRequired
+        scrollToAlignment: oneOf([ALIGNMENT.AUTO, ALIGNMENT.START, ALIGNMENT.CENTER, ALIGNMENT.END]),
+        scrollDirection: oneOf([DIRECTION.HORIZONTAL, DIRECTION.VERTICAL]),
+        style: object,
+        width: oneOfType([number, string])
     };
@@ -520,2 +560,3 @@ return VirtualList;
 
+export { DIRECTION as ScrollDirection };
 export default VirtualList;

build/react-tiny-virtual-list.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types')) :
-	typeof define === 'function' && define.amd ? define(['react', 'prop-types'], factory) :
-	(global.VirtualList = factory(global.React,global.PropTypes));
-}(this, (function (React,PropTypes) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types'], factory) :
+	(factory((global.VirtualList = {}),global.React,global.PropTypes));
+}(this, (function (exports,React,PropTypes) { 'use strict';
 
@@ -23,5 +23,8 @@ /*! *****************************************************************************
 
-var extendStatics = Object.setPrototypeOf ||
-    ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-    function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
 
@@ -34,8 +37,11 @@ function __extends(d, b) {
 
-var __assign = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
@@ -53,13 +59,22 @@
 
-var ALIGN_AUTO = 'auto';
-var ALIGN_START = 'start';
-var ALIGN_CENTER = 'center';
-var ALIGN_END = 'end';
-var DIRECTION_VERTICAL = 'vertical';
-var DIRECTION_HORIZONTAL = 'horizontal';
-var SCROLL_CHANGE_OBSERVED = 'observed';
-var SCROLL_CHANGE_REQUESTED = 'requested';
-var scrollProp = (_a = {}, _a[DIRECTION_VERTICAL] = 'scrollTop', _a[DIRECTION_HORIZONTAL] = 'scrollLeft', _a);
-var sizeProp = (_b = {}, _b[DIRECTION_VERTICAL] = 'height', _b[DIRECTION_HORIZONTAL] = 'width', _b);
-var positionProp = (_c = {}, _c[DIRECTION_VERTICAL] = 'top', _c[DIRECTION_HORIZONTAL] = 'left', _c);
+var ALIGNMENT;
+(function (ALIGNMENT) {
+    ALIGNMENT["AUTO"] = "auto";
+    ALIGNMENT["START"] = "start";
+    ALIGNMENT["CENTER"] = "center";
+    ALIGNMENT["END"] = "end";
+})(ALIGNMENT || (ALIGNMENT = {}));
+
+(function (DIRECTION) {
+    DIRECTION["HORIZONTAL"] = "horizontal";
+    DIRECTION["VERTICAL"] = "vertical";
+})(exports.ScrollDirection || (exports.ScrollDirection = {}));
+var SCROLL_CHANGE_REASON;
+(function (SCROLL_CHANGE_REASON) {
+    SCROLL_CHANGE_REASON["OBSERVED"] = "observed";
+    SCROLL_CHANGE_REASON["REQUESTED"] = "requested";
+})(SCROLL_CHANGE_REASON || (SCROLL_CHANGE_REASON = {}));
+var scrollProp = (_a = {}, _a[exports.ScrollDirection.VERTICAL] = 'scrollTop', _a[exports.ScrollDirection.HORIZONTAL] = 'scrollLeft', _a);
+var sizeProp = (_b = {}, _b[exports.ScrollDirection.VERTICAL] = 'height', _b[exports.ScrollDirection.HORIZONTAL] = 'width', _b);
+var positionProp = (_c = {}, _c[exports.ScrollDirection.VERTICAL] = 'top', _c[exports.ScrollDirection.HORIZONTAL] = 'left', _c);
 var _a;
@@ -70,3 +85,3 @@ var _b;
 /* Forked from react-virtualized 💖 */
-var SizeAndPositionManager = function () {
+var SizeAndPositionManager = /** @class */function () {
     function SizeAndPositionManager(_a) {
@@ -86,5 +101,13 @@ var itemCount = _a.itemCount,
         var itemCount = _a.itemCount,
+            itemSizeGetter = _a.itemSizeGetter,
             estimatedItemSize = _a.estimatedItemSize;
-        this.itemCount = itemCount;
-        this.estimatedItemSize = estimatedItemSize;
+        if (itemCount != null) {
+            this.itemCount = itemCount;
+        }
+        if (estimatedItemSize != null) {
+            this.estimatedItemSize = estimatedItemSize;
+        }
+        if (itemSizeGetter != null) {
+            this.itemSizeGetter = itemSizeGetter;
+        }
     };
@@ -141,3 +164,3 @@ SizeAndPositionManager.prototype.getLastMeasuredIndex = function () {
         var _b = _a.align,
-            align = _b === void 0 ? ALIGN_START : _b,
+            align = _b === void 0 ? ALIGNMENT.START : _b,
             containerSize = _a.containerSize,
@@ -154,9 +177,9 @@ currentOffset = _a.currentOffset,
         switch (align) {
-            case ALIGN_END:
+            case ALIGNMENT.END:
                 idealOffset = minOffset;
                 break;
-            case ALIGN_CENTER:
+            case ALIGNMENT.CENTER:
                 idealOffset = maxOffset - (containerSize - datum.size) / 2;
                 break;
-            case ALIGN_START:
+            case ALIGNMENT.START:
                 idealOffset = maxOffset;
@@ -284,4 +307,3 @@ break;
 var STYLE_INNER = {
-    position: 'relative',
-    overflow: 'hidden',
+    position: 'absolute',
     width: '100%',
@@ -292,14 +314,18 @@ minHeight: '100%'
     position: 'absolute',
+    top: 0,
     left: 0,
     width: '100%'
 };
-var VirtualList = function (_super) {
+var VirtualList = /** @class */function (_super) {
     __extends(VirtualList, _super);
     function VirtualList() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.itemSizeGetter = function (itemSize) {
+            return function (index) {
+                return _this.getSize(index, itemSize);
+            };
+        };
         _this.sizeAndPositionManager = new SizeAndPositionManager({
             itemCount: _this.props.itemCount,
-            itemSizeGetter: function (index) {
-                return _this.getSize(index);
-            },
+            itemSizeGetter: _this.itemSizeGetter(_this.props.itemSize),
             estimatedItemSize: _this.getEstimatedItemSize()
@@ -309,9 +335,12 @@ });
             offset: _this.props.scrollOffset || _this.props.scrollToIndex != null && _this.getOffsetForIndex(_this.props.scrollToIndex) || 0,
-            scrollChangeReason: SCROLL_CHANGE_REQUESTED
+            scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
         };
         _this.styleCache = {};
-        _this.handleScroll = function (e) {
+        _this.getRef = function (node) {
+            _this.rootNode = node;
+        };
+        _this.handleScroll = function (event) {
             var onScroll = _this.props.onScroll;
             var offset = _this.getNodeOffset();
-            if (offset < 0 || _this.state.offset === offset || e.target !== _this.rootNode) {
+            if (offset < 0 || _this.state.offset === offset || event.target !== _this.rootNode) {
                 return;
@@ -321,11 +350,8 @@ }
                 offset: offset,
-                scrollChangeReason: SCROLL_CHANGE_OBSERVED
+                scrollChangeReason: SCROLL_CHANGE_REASON.OBSERVED
             });
             if (typeof onScroll === 'function') {
-                onScroll(offset, e);
+                onScroll(offset, event);
             }
         };
-        _this.getRef = function (node) {
-            _this.rootNode = node;
-        };
         return _this;
@@ -337,2 +363,5 @@ }
             scrollToIndex = _a.scrollToIndex;
+        this.rootNode.addEventListener('scroll', this.handleScroll, {
+            passive: true
+        });
         if (scrollOffset != null) {
@@ -354,2 +383,7 @@ this.scrollTo(scrollOffset);
         var itemPropsHaveChanged = nextProps.itemCount !== itemCount || nextProps.itemSize !== itemSize || nextProps.estimatedItemSize !== estimatedItemSize;
+        if (nextProps.itemSize !== itemSize) {
+            this.sizeAndPositionManager.updateConfig({
+                itemSizeGetter: this.itemSizeGetter(nextProps.itemSize)
+            });
+        }
         if (nextProps.itemCount !== itemCount || nextProps.estimatedItemSize !== estimatedItemSize) {
@@ -367,3 +401,3 @@ this.sizeAndPositionManager.updateConfig({
                 offset: nextProps.scrollOffset || 0,
-                scrollChangeReason: SCROLL_CHANGE_REQUESTED
+                scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
             });
@@ -373,3 +407,3 @@ } else if (typeof nextProps.scrollToIndex === 'number' && (scrollPropsHaveChanged || itemPropsHaveChanged)) {
                 offset: this.getOffsetForIndex(nextProps.scrollToIndex, nextProps.scrollToAlignment, nextProps.itemCount),
-                scrollChangeReason: SCROLL_CHANGE_REQUESTED
+                scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
             });
@@ -382,20 +416,12 @@ }
             scrollChangeReason = _a.scrollChangeReason;
-        if (prevState.offset !== offset && scrollChangeReason === SCROLL_CHANGE_REQUESTED) {
+        if (prevState.offset !== offset && scrollChangeReason === SCROLL_CHANGE_REASON.REQUESTED) {
             this.scrollTo(offset);
         }
     };
-    VirtualList.prototype.getEstimatedItemSize = function (props) {
-        if (props === void 0) {
-            props = this.props;
-        }
-        return props.estimatedItemSize || typeof props.itemSize === 'number' && props.itemSize || 50;
+    VirtualList.prototype.componentWillUnmount = function () {
+        this.rootNode.removeEventListener('scroll', this.handleScroll);
     };
-    VirtualList.prototype.getNodeOffset = function () {
-        var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
-        return this.rootNode[scrollProp[scrollDirection]];
-    };
     VirtualList.prototype.scrollTo = function (value) {
         var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
+            scrollDirection = _a === void 0 ? exports.ScrollDirection.VERTICAL : _a;
         this.rootNode[scrollProp[scrollDirection]] = value;
@@ -411,3 +437,3 @@ };
         var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
+            scrollDirection = _a === void 0 ? exports.ScrollDirection.VERTICAL : _a;
         if (index < 0 || index >= itemCount) {
@@ -423,22 +449,2 @@ index = 0;
     };
-    VirtualList.prototype.getSize = function (index) {
-        var itemSize = this.props.itemSize;
-        if (typeof itemSize === 'function') {
-            return itemSize(index);
-        }
-        return Array.isArray(itemSize) ? itemSize[index] : itemSize;
-    };
-    VirtualList.prototype.getStyle = function (index) {
-        var style = this.styleCache[index];
-        if (style) {
-            return style;
-        }
-        var _a = this.props.scrollDirection,
-            scrollDirection = _a === void 0 ? DIRECTION_VERTICAL : _a;
-        var _b = this.sizeAndPositionManager.getSizeAndPositionForIndex(index),
-            size = _b.size,
-            offset = _b.offset;
-        return this.styleCache[index] = __assign({}, STYLE_ITEM, (_c = {}, _c[sizeProp[scrollDirection]] = size, _c[positionProp[scrollDirection]] = offset, _c));
-        var _c;
-    };
     VirtualList.prototype.recomputeSizes = function (startIndex) {
@@ -463,3 +469,3 @@ if (startIndex === void 0) {
             _c = _a.scrollDirection,
-            scrollDirection = _c === void 0 ? DIRECTION_VERTICAL : _c,
+            scrollDirection = _c === void 0 ? exports.ScrollDirection.VERTICAL : _c,
             scrollOffset = _a.scrollOffset,
@@ -480,2 +486,4 @@ scrollToIndex = _a.scrollToIndex,
         var items = [];
+        var wrapperStyle = __assign({}, STYLE_WRAPPER, style, { height: height, width: width });
+        var innerStyle = __assign({}, STYLE_INNER, (_e = {}, _e[sizeProp[scrollDirection]] = this.sizeAndPositionManager.getTotalSize(), _e));
         if (typeof start !== 'undefined' && typeof stop !== 'undefined') {
@@ -495,8 +503,38 @@ for (var index = start; index <= stop; index++) {
         }
-        return React.createElement("div", __assign({ ref: this.getRef }, props, { onScroll: this.handleScroll, style: __assign({}, STYLE_WRAPPER, style, { height: height, width: width }) }), React.createElement("div", { style: __assign({}, STYLE_INNER, (_e = {}, _e[sizeProp[scrollDirection]] = this.sizeAndPositionManager.getTotalSize(), _e)) }, items));
+        return React.createElement("div", __assign({ ref: this.getRef }, props, { style: wrapperStyle }), React.createElement("div", { style: innerStyle }, items));
         var _e;
     };
+    VirtualList.prototype.getNodeOffset = function () {
+        var _a = this.props.scrollDirection,
+            scrollDirection = _a === void 0 ? exports.ScrollDirection.VERTICAL : _a;
+        return this.rootNode[scrollProp[scrollDirection]];
+    };
+    VirtualList.prototype.getEstimatedItemSize = function (props) {
+        if (props === void 0) {
+            props = this.props;
+        }
+        return props.estimatedItemSize || typeof props.itemSize === 'number' && props.itemSize || 50;
+    };
+    VirtualList.prototype.getSize = function (index, itemSize) {
+        if (typeof itemSize === 'function') {
+            return itemSize(index);
+        }
+        return Array.isArray(itemSize) ? itemSize[index] : itemSize;
+    };
+    VirtualList.prototype.getStyle = function (index) {
+        var style = this.styleCache[index];
+        if (style) {
+            return style;
+        }
+        var _a = this.props.scrollDirection,
+            scrollDirection = _a === void 0 ? exports.ScrollDirection.VERTICAL : _a;
+        var _b = this.sizeAndPositionManager.getSizeAndPositionForIndex(index),
+            size = _b.size,
+            offset = _b.offset;
+        return this.styleCache[index] = __assign({}, STYLE_ITEM, (_c = {}, _c[sizeProp[scrollDirection]] = size, _c[positionProp[scrollDirection]] = offset, _c));
+        var _c;
+    };
     VirtualList.defaultProps = {
         overscanCount: 3,
-        scrollDirection: DIRECTION_VERTICAL,
+        scrollDirection: exports.ScrollDirection.VERTICAL,
         width: '100%'
@@ -509,2 +547,3 @@ };
         itemSize: PropTypes.oneOfType([PropTypes.number, PropTypes.array, PropTypes.func]).isRequired,
+        onScroll: PropTypes.func,
         onItemsRendered: PropTypes.func,
@@ -515,5 +554,6 @@ overscanCount: PropTypes.number,
         scrollToIndex: PropTypes.number,
-        scrollToAlignment: PropTypes.oneOf([ALIGN_AUTO, ALIGN_START, ALIGN_CENTER, ALIGN_END]),
-        scrollDirection: PropTypes.oneOf([DIRECTION_HORIZONTAL, DIRECTION_VERTICAL]).isRequired,
-        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+        scrollToAlignment: PropTypes.oneOf([ALIGNMENT.AUTO, ALIGNMENT.START, ALIGNMENT.CENTER, ALIGNMENT.END]),
+        scrollDirection: PropTypes.oneOf([exports.ScrollDirection.HORIZONTAL, exports.ScrollDirection.VERTICAL]),
+        style: PropTypes.object,
+        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
     };
@@ -523,4 +563,6 @@ return VirtualList;
 
-return VirtualList;
+exports['default'] = VirtualList;
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 })));

build/react-tiny-virtual-list.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):t.VirtualList=e(t.React,t.PropTypes)}(this,function(t,e){"use strict";function o(t,e){function o(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}function i(t,e){var o={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(o[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&(o[i[r]]=t[i[r]]);return o}var r,n,s,a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])},f=Object.assign||function(t){for(var e,o=1,i=arguments.length;o<i;o++){e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},l="observed",d="requested",c=(r={},r.vertical="scrollTop",r.horizontal="scrollLeft",r),u=(n={},n.vertical="height",n.horizontal="width",n),h=(s={},s.vertical="top",s.horizontal="left",s),p=function(){function t(t){var e=t.itemCount,o=t.itemSizeGetter,i=t.estimatedItemSize;this.itemSizeGetter=o,this.itemCount=e,this.estimatedItemSize=i,this.itemSizeAndPositionData={},this.lastMeasuredIndex=-1}return t.prototype.updateConfig=function(t){var e=t.itemCount,o=t.estimatedItemSize;this.itemCount=e,this.estimatedItemSize=o},t.prototype.getLastMeasuredIndex=function(){return this.lastMeasuredIndex},t.prototype.getSizeAndPositionForIndex=function(t){if(t<0||t>=this.itemCount)throw Error("Requested index "+t+" is outside of range 0.."+this.itemCount);if(t>this.lastMeasuredIndex){for(var e=this.getSizeAndPositionOfLastMeasuredItem(),o=e.offset+e.size,i=this.lastMeasuredIndex+1;i<=t;i++){var r=this.itemSizeGetter(i);if(null==r||isNaN(r))throw Error("Invalid size returned for index "+i+" of value "+r);this.itemSizeAndPositionData[i]={offset:o,size:r},o+=r}this.lastMeasuredIndex=t}return this.itemSizeAndPositionData[t]},t.prototype.getSizeAndPositionOfLastMeasuredItem=function(){return this.lastMeasuredIndex>=0?this.itemSizeAndPositionData[this.lastMeasuredIndex]:{offset:0,size:0}},t.prototype.getTotalSize=function(){var t=this.getSizeAndPositionOfLastMeasuredItem();return t.offset+t.size+(this.itemCount-this.lastMeasuredIndex-1)*this.estimatedItemSize},t.prototype.getUpdatedOffsetForIndex=function(t){var e=t.align,o=void 0===e?"start":e,i=t.containerSize,r=t.currentOffset,n=t.targetIndex;if(i<=0)return 0;var s,a=this.getSizeAndPositionForIndex(n),f=a.offset,l=f-i+a.size;switch(o){case"end":s=l;break;case"center":s=f-(i-a.size)/2;break;case"start":s=f;break;default:s=Math.max(l,Math.min(f,r))}var d=this.getTotalSize();return Math.max(0,Math.min(d-i,s))},t.prototype.getVisibleRange=function(t){var e=t.containerSize,o=t.offset,i=t.overscanCount;if(0===this.getTotalSize())return{};var r=o+e,n=this.findNearestItem(o);if(void 0===n)throw Error("Invalid offset "+o+" specified");var s=this.getSizeAndPositionForIndex(n);o=s.offset+s.size;for(var a=n;o<r&&a<this.itemCount-1;)a++,o+=this.getSizeAndPositionForIndex(a).size;return i&&(n=Math.max(0,n-i),a=Math.min(a+i,this.itemCount-1)),{start:n,stop:a}},t.prototype.resetItem=function(t){this.lastMeasuredIndex=Math.min(this.lastMeasuredIndex,t-1)},t.prototype.findNearestItem=function(t){if(isNaN(t))throw Error("Invalid offset "+t+" specified");t=Math.max(0,t);var e=this.getSizeAndPositionOfLastMeasuredItem(),o=Math.max(0,this.lastMeasuredIndex);return e.offset>=t?this.binarySearch({high:o,low:0,offset:t}):this.exponentialSearch({index:o,offset:t})},t.prototype.binarySearch=function(t){for(var e=t.low,o=t.high,i=t.offset,r=0,n=0;e<=o;){if(r=e+Math.floor((o-e)/2),(n=this.getSizeAndPositionForIndex(r).offset)===i)return r;n<i?e=r+1:n>i&&(o=r-1)}return e>0?e-1:0},t.prototype.exponentialSearch=function(t){for(var e=t.index,o=t.offset,i=1;e<this.itemCount&&this.getSizeAndPositionForIndex(e).offset<o;)e+=i,i*=2;return this.binarySearch({high:Math.min(e,this.itemCount-1),low:Math.floor(e/2),offset:o})},t}(),m={overflow:"auto",willChange:"transform",WebkitOverflowScrolling:"touch"},g={position:"relative",overflow:"hidden",width:"100%",minHeight:"100%"},v={position:"absolute",left:0,width:"100%"};return function(r){function n(){var t=null!==r&&r.apply(this,arguments)||this;return t.sizeAndPositionManager=new p({itemCount:t.props.itemCount,itemSizeGetter:function(e){return t.getSize(e)},estimatedItemSize:t.getEstimatedItemSize()}),t.state={offset:t.props.scrollOffset||null!=t.props.scrollToIndex&&t.getOffsetForIndex(t.props.scrollToIndex)||0,scrollChangeReason:d},t.styleCache={},t.handleScroll=function(e){var o=t.props.onScroll,i=t.getNodeOffset();i<0||t.state.offset===i||e.target!==t.rootNode||(t.setState({offset:i,scrollChangeReason:l}),"function"==typeof o&&o(i,e))},t.getRef=function(e){t.rootNode=e},t}return o(n,r),n.prototype.componentDidMount=function(){var t=this.props,e=t.scrollOffset,o=t.scrollToIndex;null!=e?this.scrollTo(e):null!=o&&this.scrollTo(this.getOffsetForIndex(o))},n.prototype.componentWillReceiveProps=function(t){var e=this.props,o=e.estimatedItemSize,i=e.itemCount,r=e.itemSize,n=e.scrollOffset,s=e.scrollToAlignment,a=e.scrollToIndex,f=t.scrollToIndex!==a||t.scrollToAlignment!==s,l=t.itemCount!==i||t.itemSize!==r||t.estimatedItemSize!==o;t.itemCount===i&&t.estimatedItemSize===o||this.sizeAndPositionManager.updateConfig({itemCount:t.itemCount,estimatedItemSize:this.getEstimatedItemSize(t)}),l&&this.recomputeSizes(),t.scrollOffset!==n?this.setState({offset:t.scrollOffset||0,scrollChangeReason:d}):"number"==typeof t.scrollToIndex&&(f||l)&&this.setState({offset:this.getOffsetForIndex(t.scrollToIndex,t.scrollToAlignment,t.itemCount),scrollChangeReason:d})},n.prototype.componentDidUpdate=function(t,e){var o=this.state,i=o.offset,r=o.scrollChangeReason;e.offset!==i&&r===d&&this.scrollTo(i)},n.prototype.getEstimatedItemSize=function(t){return void 0===t&&(t=this.props),t.estimatedItemSize||"number"==typeof t.itemSize&&t.itemSize||50},n.prototype.getNodeOffset=function(){var t=this.props.scrollDirection,e=void 0===t?"vertical":t;return this.rootNode[c[e]]},n.prototype.scrollTo=function(t){var e=this.props.scrollDirection,o=void 0===e?"vertical":e;this.rootNode[c[o]]=t},n.prototype.getOffsetForIndex=function(t,e,o){void 0===e&&(e=this.props.scrollToAlignment),void 0===o&&(o=this.props.itemCount);var i=this.props.scrollDirection,r=void 0===i?"vertical":i;return(t<0||t>=o)&&(t=0),this.sizeAndPositionManager.getUpdatedOffsetForIndex({align:e,containerSize:this.props[u[r]],currentOffset:this.state&&this.state.offset||0,targetIndex:t})},n.prototype.getSize=function(t){var e=this.props.itemSize;return"function"==typeof e?e(t):Array.isArray(e)?e[t]:e},n.prototype.getStyle=function(t){var e=this.styleCache[t];if(e)return e;var o=this.props.scrollDirection,i=void 0===o?"vertical":o,r=this.sizeAndPositionManager.getSizeAndPositionForIndex(t),n=r.size,s=r.offset;return this.styleCache[t]=f({},v,(a={},a[u[i]]=n,a[h[i]]=s,a));var a},n.prototype.recomputeSizes=function(t){void 0===t&&(t=0),this.styleCache={},this.sizeAndPositionManager.resetItem(t)},n.prototype.render=function(){var e=this.props,o=(e.estimatedItemSize,e.height),r=e.overscanCount,n=void 0===r?3:r,s=e.renderItem,a=(e.itemCount,e.itemSize,e.onItemsRendered),l=(e.onScroll,e.scrollDirection),d=void 0===l?"vertical":l,c=(e.scrollOffset,e.scrollToIndex,e.scrollToAlignment,e.style),h=e.width,p=i(e,["estimatedItemSize","height","overscanCount","renderItem","itemCount","itemSize","onItemsRendered","onScroll","scrollDirection","scrollOffset","scrollToIndex","scrollToAlignment","style","width"]),v=this.state.offset,z=this.sizeAndPositionManager.getVisibleRange({containerSize:this.props[u[d]]||0,offset:v,overscanCount:n}),S=z.start,I=z.stop,y=[];if(void 0!==S&&void 0!==I){for(var x=S;x<=I;x++)y.push(s({index:x,style:this.getStyle(x)}));"function"==typeof a&&a({startIndex:S,stopIndex:I})}return t.createElement("div",f({ref:this.getRef},p,{onScroll:this.handleScroll,style:f({},m,c,{height:o,width:h})}),t.createElement("div",{style:f({},g,(O={},O[u[d]]=this.sizeAndPositionManager.getTotalSize(),O))},y));var O},n.defaultProps={overscanCount:3,scrollDirection:"vertical",width:"100%"},n.propTypes={estimatedItemSize:e.number,height:e.oneOfType([e.number,e.string]).isRequired,itemCount:e.number.isRequired,itemSize:e.oneOfType([e.number,e.array,e.func]).isRequired,onItemsRendered:e.func,overscanCount:e.number,renderItem:e.func.isRequired,scrollOffset:e.number,scrollToIndex:e.number,scrollToAlignment:e.oneOf(["auto","start","center","end"]),scrollDirection:e.oneOf(["horizontal","vertical"]).isRequired,width:e.oneOfType([e.number,e.string]).isRequired},n}(t.PureComponent)});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],e):e(t.VirtualList={},t.React,t.PropTypes)}(this,function(t,e,o){"use strict";function i(t,e){function o(){this.constructor=t}s(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}function n(t,e){var o={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(o[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var n=0,i=Object.getOwnPropertySymbols(t);n<i.length;n++)e.indexOf(i[n])<0&&(o[i[n]]=t[i[n]]);return o}var r,s=function(t,e){return(s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])})(t,e)},a=function(){return(a=Object.assign||function(t){for(var e,o=1,i=arguments.length;o<i;o++){e=arguments[o];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t}).apply(this,arguments)};!function(t){t.AUTO="auto",t.START="start",t.CENTER="center",t.END="end"}(r||(r={})),function(t){t.HORIZONTAL="horizontal",t.VERTICAL="vertical"}(t.ScrollDirection||(t.ScrollDirection={}));var l;!function(t){t.OBSERVED="observed",t.REQUESTED="requested"}(l||(l={}));var f,c,d,u=(f={},f[t.ScrollDirection.VERTICAL]="scrollTop",f[t.ScrollDirection.HORIZONTAL]="scrollLeft",f),h=(c={},c[t.ScrollDirection.VERTICAL]="height",c[t.ScrollDirection.HORIZONTAL]="width",c),p=(d={},d[t.ScrollDirection.VERTICAL]="top",d[t.ScrollDirection.HORIZONTAL]="left",d),m=function(){function t(t){var e=t.itemCount,o=t.itemSizeGetter,i=t.estimatedItemSize;this.itemSizeGetter=o,this.itemCount=e,this.estimatedItemSize=i,this.itemSizeAndPositionData={},this.lastMeasuredIndex=-1}return t.prototype.updateConfig=function(t){var e=t.itemCount,o=t.itemSizeGetter,i=t.estimatedItemSize;null!=e&&(this.itemCount=e),null!=i&&(this.estimatedItemSize=i),null!=o&&(this.itemSizeGetter=o)},t.prototype.getLastMeasuredIndex=function(){return this.lastMeasuredIndex},t.prototype.getSizeAndPositionForIndex=function(t){if(t<0||t>=this.itemCount)throw Error("Requested index "+t+" is outside of range 0.."+this.itemCount);if(t>this.lastMeasuredIndex){for(var e=this.getSizeAndPositionOfLastMeasuredItem(),o=e.offset+e.size,i=this.lastMeasuredIndex+1;i<=t;i++){var n=this.itemSizeGetter(i);if(null==n||isNaN(n))throw Error("Invalid size returned for index "+i+" of value "+n);this.itemSizeAndPositionData[i]={offset:o,size:n},o+=n}this.lastMeasuredIndex=t}return this.itemSizeAndPositionData[t]},t.prototype.getSizeAndPositionOfLastMeasuredItem=function(){return this.lastMeasuredIndex>=0?this.itemSizeAndPositionData[this.lastMeasuredIndex]:{offset:0,size:0}},t.prototype.getTotalSize=function(){var t=this.getSizeAndPositionOfLastMeasuredItem();return t.offset+t.size+(this.itemCount-this.lastMeasuredIndex-1)*this.estimatedItemSize},t.prototype.getUpdatedOffsetForIndex=function(t){var e=t.align,o=void 0===e?r.START:e,i=t.containerSize,n=t.currentOffset,s=t.targetIndex;if(i<=0)return 0;var a,l=this.getSizeAndPositionForIndex(s),f=l.offset,c=f-i+l.size;switch(o){case r.END:a=c;break;case r.CENTER:a=f-(i-l.size)/2;break;case r.START:a=f;break;default:a=Math.max(c,Math.min(f,n))}var d=this.getTotalSize();return Math.max(0,Math.min(d-i,a))},t.prototype.getVisibleRange=function(t){var e=t.containerSize,o=t.offset,i=t.overscanCount;if(0===this.getTotalSize())return{};var n=o+e,r=this.findNearestItem(o);if(void 0===r)throw Error("Invalid offset "+o+" specified");var s=this.getSizeAndPositionForIndex(r);o=s.offset+s.size;for(var a=r;o<n&&a<this.itemCount-1;)a++,o+=this.getSizeAndPositionForIndex(a).size;return i&&(r=Math.max(0,r-i),a=Math.min(a+i,this.itemCount-1)),{start:r,stop:a}},t.prototype.resetItem=function(t){this.lastMeasuredIndex=Math.min(this.lastMeasuredIndex,t-1)},t.prototype.findNearestItem=function(t){if(isNaN(t))throw Error("Invalid offset "+t+" specified");t=Math.max(0,t);var e=this.getSizeAndPositionOfLastMeasuredItem(),o=Math.max(0,this.lastMeasuredIndex);return e.offset>=t?this.binarySearch({high:o,low:0,offset:t}):this.exponentialSearch({index:o,offset:t})},t.prototype.binarySearch=function(t){for(var e=t.low,o=t.high,i=t.offset,n=0,r=0;e<=o;){if(n=e+Math.floor((o-e)/2),(r=this.getSizeAndPositionForIndex(n).offset)===i)return n;r<i?e=n+1:r>i&&(o=n-1)}return e>0?e-1:0},t.prototype.exponentialSearch=function(t){for(var e=t.index,o=t.offset,i=1;e<this.itemCount&&this.getSizeAndPositionForIndex(e).offset<o;)e+=i,i*=2;return this.binarySearch({high:Math.min(e,this.itemCount-1),low:Math.floor(e/2),offset:o})},t}(),S={overflow:"auto",willChange:"transform",WebkitOverflowScrolling:"touch"},I={position:"absolute",width:"100%",minHeight:"100%"},g={position:"absolute",top:0,left:0,width:"100%"},z=function(s){function f(){var t=null!==s&&s.apply(this,arguments)||this;return t.itemSizeGetter=function(e){return function(o){return t.getSize(o,e)}},t.sizeAndPositionManager=new m({itemCount:t.props.itemCount,itemSizeGetter:t.itemSizeGetter(t.props.itemSize),estimatedItemSize:t.getEstimatedItemSize()}),t.state={offset:t.props.scrollOffset||null!=t.props.scrollToIndex&&t.getOffsetForIndex(t.props.scrollToIndex)||0,scrollChangeReason:l.REQUESTED},t.styleCache={},t.getRef=function(e){t.rootNode=e},t.handleScroll=function(e){var o=t.props.onScroll,i=t.getNodeOffset();i<0||t.state.offset===i||e.target!==t.rootNode||(t.setState({offset:i,scrollChangeReason:l.OBSERVED}),"function"==typeof o&&o(i,e))},t}return i(f,s),f.prototype.componentDidMount=function(){var t=this.props,e=t.scrollOffset,o=t.scrollToIndex;this.rootNode.addEventListener("scroll",this.handleScroll,{passive:!0}),null!=e?this.scrollTo(e):null!=o&&this.scrollTo(this.getOffsetForIndex(o))},f.prototype.componentWillReceiveProps=function(t){var e=this.props,o=e.estimatedItemSize,i=e.itemCount,n=e.itemSize,r=e.scrollOffset,s=e.scrollToAlignment,a=e.scrollToIndex,f=t.scrollToIndex!==a||t.scrollToAlignment!==s,c=t.itemCount!==i||t.itemSize!==n||t.estimatedItemSize!==o;t.itemSize!==n&&this.sizeAndPositionManager.updateConfig({itemSizeGetter:this.itemSizeGetter(t.itemSize)}),t.itemCount===i&&t.estimatedItemSize===o||this.sizeAndPositionManager.updateConfig({itemCount:t.itemCount,estimatedItemSize:this.getEstimatedItemSize(t)}),c&&this.recomputeSizes(),t.scrollOffset!==r?this.setState({offset:t.scrollOffset||0,scrollChangeReason:l.REQUESTED}):"number"==typeof t.scrollToIndex&&(f||c)&&this.setState({offset:this.getOffsetForIndex(t.scrollToIndex,t.scrollToAlignment,t.itemCount),scrollChangeReason:l.REQUESTED})},f.prototype.componentDidUpdate=function(t,e){var o=this.state,i=o.offset,n=o.scrollChangeReason;e.offset!==i&&n===l.REQUESTED&&this.scrollTo(i)},f.prototype.componentWillUnmount=function(){this.rootNode.removeEventListener("scroll",this.handleScroll)},f.prototype.scrollTo=function(e){var o=this.props.scrollDirection,i=void 0===o?t.ScrollDirection.VERTICAL:o;this.rootNode[u[i]]=e},f.prototype.getOffsetForIndex=function(e,o,i){void 0===o&&(o=this.props.scrollToAlignment),void 0===i&&(i=this.props.itemCount);var n=this.props.scrollDirection,r=void 0===n?t.ScrollDirection.VERTICAL:n;return(e<0||e>=i)&&(e=0),this.sizeAndPositionManager.getUpdatedOffsetForIndex({align:o,containerSize:this.props[h[r]],currentOffset:this.state&&this.state.offset||0,targetIndex:e})},f.prototype.recomputeSizes=function(t){void 0===t&&(t=0),this.styleCache={},this.sizeAndPositionManager.resetItem(t)},f.prototype.render=function(){var o=this.props,i=(o.estimatedItemSize,o.height),r=o.overscanCount,s=void 0===r?3:r,l=o.renderItem,f=(o.itemCount,o.itemSize,o.onItemsRendered),c=(o.onScroll,o.scrollDirection),d=void 0===c?t.ScrollDirection.VERTICAL:c,u=(o.scrollOffset,o.scrollToIndex,o.scrollToAlignment,o.style),p=o.width,m=n(o,["estimatedItemSize","height","overscanCount","renderItem","itemCount","itemSize","onItemsRendered","onScroll","scrollDirection","scrollOffset","scrollToIndex","scrollToAlignment","style","width"]),g=this.state.offset,z=this.sizeAndPositionManager.getVisibleRange({containerSize:this.props[h[d]]||0,offset:g,overscanCount:s}),v=z.start,y=z.stop,T=[],O=a({},S,u,{height:i,width:p}),C=a({},I,(A={},A[h[d]]=this.sizeAndPositionManager.getTotalSize(),A));if(void 0!==v&&void 0!==y){for(var x=v;x<=y;x++)T.push(l({index:x,style:this.getStyle(x)}));"function"==typeof f&&f({startIndex:v,stopIndex:y})}return e.createElement("div",a({ref:this.getRef},m,{style:O}),e.createElement("div",{style:C},T));var A},f.prototype.getNodeOffset=function(){var e=this.props.scrollDirection,o=void 0===e?t.ScrollDirection.VERTICAL:e;return this.rootNode[u[o]]},f.prototype.getEstimatedItemSize=function(t){return void 0===t&&(t=this.props),t.estimatedItemSize||"number"==typeof t.itemSize&&t.itemSize||50},f.prototype.getSize=function(t,e){return"function"==typeof e?e(t):Array.isArray(e)?e[t]:e},f.prototype.getStyle=function(e){var o=this.styleCache[e];if(o)return o;var i=this.props.scrollDirection,n=void 0===i?t.ScrollDirection.VERTICAL:i,r=this.sizeAndPositionManager.getSizeAndPositionForIndex(e),s=r.size,l=r.offset;return this.styleCache[e]=a({},g,(f={},f[h[n]]=s,f[p[n]]=l,f));var f},f.defaultProps={overscanCount:3,scrollDirection:t.ScrollDirection.VERTICAL,width:"100%"},f.propTypes={estimatedItemSize:o.number,height:o.oneOfType([o.number,o.string]).isRequired,itemCount:o.number.isRequired,itemSize:o.oneOfType([o.number,o.array,o.func]).isRequired,onScroll:o.func,onItemsRendered:o.func,overscanCount:o.number,renderItem:o.func.isRequired,scrollOffset:o.number,scrollToIndex:o.number,scrollToAlignment:o.oneOf([r.AUTO,r.START,r.CENTER,r.END]),scrollDirection:o.oneOf([t.ScrollDirection.HORIZONTAL,t.ScrollDirection.VERTICAL]),style:o.object,width:o.oneOfType([o.number,o.string])},f}(e.PureComponent);t.default=z,Object.defineProperty(t,"__esModule",{value:!0})});

CHANGELOG.md

@@ -1,16 +0,25 @@
-Changelog
-------------
-### 2.1.3
+## Changelog
+
+### 2.1.5
+
+Fix itemSizeGetter bug when `scrollToIndex` is defined [#40](https://github.com/clauderic/react-tiny-virtual-list/issues/40), [#56](https://github.com/clauderic/react-tiny-virtual-list/pull/56)
+
+### 2.1.4
+
 Fix misuse of second argument of `componentDidUpdate` as `nextState` (the actual argument is `prevState`) [#27](https://github.com/clauderic/react-tiny-virtual-list/pull/27). Thanks [@gabrielecirulli](https://github.com/gabrielecirulli)!
 
 ### 2.1.3
+
 Include TypeScript type definitions in npm package [#26](https://github.com/clauderic/react-tiny-virtual-list/issues/26)
 
 ### 2.1.2
+
 Fixed build script for es modules build [#22](https://github.com/clauderic/react-tiny-virtual-list/issues/22)
 
 ### 2.1.1
+
 Renamed `onRowsRendered` prop to `onItemsRendered`.
 
 ### 2.1.0
+
 - Added `scrollToAlignment="auto"` option, which scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible [#19](https://github.com/clauderic/react-tiny-virtual-list/issues/19)
@@ -21,23 +30,31 @@ - Added `onRowsRendered` prop that is invoked with information about the slice of rows that were just rendered [#14](https://github.com/clauderic/react-tiny-virtual-list/issues/13)
 ### 2.0.6
+
 Fix PropType definitions for `width` and `height` props ([#13](https://github.com/clauderic/react-tiny-virtual-list/issues/13))
 
 ### 2.0.5
+
 Fixes slow wheel scrolling / scroll-interruption issues with browsers such as Firefox (see [#7](https://github.com/clauderic/react-tiny-virtual-list/pull/7)). Thanks for the contribution [Magnitus-](https://github.com/Magnitus-)!
 
 ### 2.0.4
+
 Use `prop-types` package for PropType validation for compatibility with React ^15.5
 
 ### 2.0.3
+
 Fixes a bug introduced in `2.0.2` where `nextProps.estimatedItemSize` wasn't being passed down properly in `componentWillReceiveProps`
 
 ### 2.0.2
+
 Added support for dynamic property updates to `itemCount` and `estimatedItemSize` [#3](https://github.com/clauderic/react-tiny-virtual-list/issues/3)
 
 ### 2.0.1
+
 Fix certain unhandled scenarios in `componentWillReceiveProps`
 
 ### 2.0.0
+
 Added support for horizontal lists via the `scrollDirection` prop
 
 ### 1.0.0
+
 Initial release

package.json

 {
   "name": "react-tiny-virtual-list",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "A tiny but mighty list virtualization component, with zero dependencies 💪",
@@ -15,3 +15,3 @@ "main": "build/react-tiny-virtual-list.cjs.js",
     "build": "babel-node --presets es2015 ./config/build.js",
-    "lint": "tslint './src/**/*.{ts,tsx}' --project tsconfig.json",
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0 --format codeframe",
     "start": "nwb serve-react-app demo/src/index.tsx --config ./config/nwb/config.js",
@@ -42,8 +42,4 @@ "test": "jest --config ./config/jest/config.json --no-cache",
     "codecov": "^1.0.1",
-    "eslint": "3.8.1",
-    "eslint-config-react-app": "^0.5.2",
-    "eslint-plugin-flowtype": "2.21.0",
-    "eslint-plugin-import": "2.0.1",
-    "eslint-plugin-jsx-a11y": "2.2.3",
-    "eslint-plugin-react": "6.4.1",
+    "eslint": "^4.10.0",
+    "eslint-plugin-shopify": "^22.1.0",
     "fs-extra": "^4.0.1",
@@ -61,6 +57,7 @@ "jest": "^19.0.2",
     "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-typescript2": "^0.15.0",
     "rollup-plugin-uglify": "^2.0.1",
-    "tslint": "^5.7.0",
-    "tslint-config-shopify": "^3.0.0",
-    "typescript": "^2.4.2"
+    "tslint": "^5.10.0",
+    "tslint-config-shopify": "^3.0.2",
+    "typescript": "2.8.3"
   },
@@ -67,0 +64,0 @@ "author": {

README.md

@@ -16,4 +16,2 @@ <div align="center" style="margin-bottom: 30px;">
 
-<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/oN9PDWZz8fQcbh9sxpDEUvD5/clauderic/react-tiny-virtual-list'>  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/oN9PDWZz8fQcbh9sxpDEUvD5/clauderic/react-tiny-virtual-list.svg' /></a>
-
 * **Tiny & dependency free** – Only 3kb gzipped
@@ -25,3 +23,3 @@ * **Render millions of items**, without breaking a sweat
 
-Check out the [demo](https://clauderic.github.io/react-tiny-virtual-list/) for some examples.
+Check out the [demo](https://clauderic.github.io/react-tiny-virtual-list/) for some examples, or take it for a test drive right away in [Code Sandbox](https://codesandbox.io/s/kymm7z9qr).
 
@@ -103,4 +101,9 @@ Getting Started
 
+### Common Issues with PureComponent 
+`react-tiny-virtual-list` uses [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent), so it only updates when it's props change. Therefore, if only the order of your data changes (eg `['a','b','c']` => `['d','e','f']`), `react-tiny-virtual-list` has no way to know your data has changed and that it needs to re-render.
+
+You can force it to re-render by calling [forceUpdate](https://reactjs.org/docs/react-component.html#forceupdate) on it or by passing it an extra prop that will change every time your data changes.
+
 ## Reporting Issues
-Found an issue? Please [report it](https://github.com/clauderic/react-tiny-virtual-list/issues) along with any relevant details to reproduce it.
+Found an issue? Please [report it](https://github.com/clauderic/react-tiny-virtual-list/issues) along with any relevant details to reproduce it. If you can, please provide a live demo replicating the issue you're describing. You can [fork this Code Sandbox](https://codesandbox.io/s/kymm7z9qr) as a starting point.
 
@@ -107,0 +110,0 @@ ## Contributions

types/constants.d.ts

@@ -1,20 +0,26 @@
-export declare type ALIGNMENT = 'auto' | 'center' | 'end' | 'start';
-export declare const ALIGN_AUTO: ALIGNMENT;
-export declare const ALIGN_START: ALIGNMENT;
-export declare const ALIGN_CENTER: ALIGNMENT;
-export declare const ALIGN_END: ALIGNMENT;
-export declare type DIRECTION = 'horizontal' | 'vertical';
-export declare const DIRECTION_VERTICAL: DIRECTION;
-export declare const DIRECTION_HORIZONTAL: DIRECTION;
-export declare type SCROLL_CHANGE_REASON = 'observed' | 'requested';
-export declare const SCROLL_CHANGE_OBSERVED: SCROLL_CHANGE_REASON;
-export declare const SCROLL_CHANGE_REQUESTED: SCROLL_CHANGE_REASON;
+export declare enum ALIGNMENT {
+    AUTO = "auto",
+    START = "start",
+    CENTER = "center",
+    END = "end",
+}
+export declare enum DIRECTION {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical",
+}
+export declare enum SCROLL_CHANGE_REASON {
+    OBSERVED = "observed",
+    REQUESTED = "requested",
+}
 export declare const scrollProp: {
-    [x: string]: string;
+    [DIRECTION.VERTICAL]: string;
+    [DIRECTION.HORIZONTAL]: string;
 };
 export declare const sizeProp: {
-    [x: string]: string;
+    [DIRECTION.VERTICAL]: string;
+    [DIRECTION.HORIZONTAL]: string;
 };
 export declare const positionProp: {
-    [x: string]: string;
+    [DIRECTION.VERTICAL]: string;
+    [DIRECTION.HORIZONTAL]: string;
 };

types/index.d.ts

@@ -6,4 +6,6 @@ /// <reference types="react" />
 import { ALIGNMENT, DIRECTION, SCROLL_CHANGE_REASON } from './constants';
+export { DIRECTION as ScrollDirection } from './constants';
+export declare type ItemPosition = 'absolute';
 export interface ItemStyle {
-    position: 'absolute';
+    position: ItemPosition;
     top?: number;
@@ -33,6 +35,6 @@ left: number;
     scrollDirection?: DIRECTION;
-    style?: any;
+    style?: React.CSSProperties;
     width?: number | string;
     onItemsRendered?({startIndex, stopIndex}: RenderedRows): void;
-    onScroll?(offset: number, event: React.UIEvent<HTMLDivElement>): void;
+    onScroll?(offset: number, event: UIEvent): void;
     renderItem(itemInfo: ItemInfo): React.ReactNode;
@@ -55,2 +57,3 @@ }
         itemSize: PropTypes.Validator<any>;
+        onScroll: PropTypes.Requireable<any>;
         onItemsRendered: PropTypes.Requireable<any>;
@@ -62,10 +65,9 @@ overscanCount: PropTypes.Requireable<any>;
         scrollToAlignment: PropTypes.Requireable<any>;
-        scrollDirection: PropTypes.Validator<any>;
-        width: PropTypes.Validator<any>;
+        scrollDirection: PropTypes.Requireable<any>;
+        style: PropTypes.Requireable<any>;
+        width: PropTypes.Requireable<any>;
     };
+    itemSizeGetter: (itemSize: ItemSize) => (index: any) => any;
     sizeAndPositionManager: SizeAndPositionManager;
-    state: {
-        offset: number;
-        scrollChangeReason: SCROLL_CHANGE_REASON;
-    };
+    readonly state: State;
     private rootNode;
@@ -76,14 +78,13 @@ private styleCache;
     componentDidUpdate(_: Props, prevState: State): void;
-    handleScroll: (e: React.UIEvent<HTMLDivElement>) => void;
-    getEstimatedItemSize(props?: Readonly<{
-        children?: React.ReactNode;
-    }> & Readonly<Props>): number;
-    getNodeOffset(): any;
+    componentWillUnmount(): void;
     scrollTo(value: number): void;
-    getOffsetForIndex(index: number, scrollToAlignment?: "auto" | "center" | "start" | "end" | undefined, itemCount?: number): number;
-    getSize(index: number): number;
-    getStyle(index: number): ItemStyle;
+    getOffsetForIndex(index: number, scrollToAlignment?: ALIGNMENT | undefined, itemCount?: number): number;
     recomputeSizes(startIndex?: number): void;
     render(): JSX.Element;
     private getRef;
+    private handleScroll;
+    private getNodeOffset();
+    private getEstimatedItemSize(props?);
+    private getSize(index, itemSize);
+    private getStyle(index);
 }

types/SizeAndPositionManager.d.ts

@@ -20,6 +20,3 @@ import { ALIGNMENT } from './constants';
     constructor({itemCount, itemSizeGetter, estimatedItemSize}: Options);
-    updateConfig({itemCount, estimatedItemSize}: {
-        itemCount: number;
-        estimatedItemSize: number;
-    }): void;
+    updateConfig({itemCount, itemSizeGetter, estimatedItemSize}: Partial<Options>): void;
     getLastMeasuredIndex(): number;
@@ -26,0 +23,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

110884

increased by14.92%

Dev dependency count

31

decreased by-8.82%

Number of package files

15

increased by50%

Lines of code

1988

increased by18.47%

Number of lines in readme file

115

increased by2.68%

No dependency changes