react-virtualized - npm Package Compare versions

Comparing version 10.0.0-alpha.4 to 10.0.0-alpha.5

index.es.js

@@ -143,2 +143,568 @@ import React from 'react';
 
+function createGridComponent(_ref) {
+  var _class, _temp;
+
+  var getColumnOffset = _ref.getColumnOffset,
+      getColumnStartIndexForOffset = _ref.getColumnStartIndexForOffset,
+      getColumnStopIndexForStartIndex = _ref.getColumnStopIndexForStartIndex,
+      getColumnWidth = _ref.getColumnWidth,
+      getEstimatedTotalHeight = _ref.getEstimatedTotalHeight,
+      getEstimatedTotalWidth = _ref.getEstimatedTotalWidth,
+      getOffsetForColumnAndAlignment = _ref.getOffsetForColumnAndAlignment,
+      getOffsetForRowAndAlignment = _ref.getOffsetForRowAndAlignment,
+      getRowHeight = _ref.getRowHeight,
+      getRowOffset = _ref.getRowOffset,
+      getRowStartIndexForOffset = _ref.getRowStartIndexForOffset,
+      getRowStopIndexForStartIndex = _ref.getRowStopIndexForStartIndex,
+      initInstanceProps = _ref.initInstanceProps,
+      validateProps = _ref.validateProps;
+
+  return _temp = _class = function (_React$Component) {
+    inherits(List, _React$Component);
+
+    function List(props) {
+      classCallCheck(this, List);
+
+      var _this = possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).call(this, props));
+
+      _this._cellStyleCache = {};
+      _this._resetIsScrollingTimeoutId = null;
+      _this.state = {
+        isScrolling: false,
+        horizontalScrollDirection: 'forward',
+        scrollLeft: 0,
+        scrollTop: 0,
+        verticalScrollDirection: 'forward'
+      };
+
+      _this.onScroll = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollTop = _event$currentTarget.scrollTop;
+
+        _this.setState(function (prevState) {
+          return {
+            isScrolling: true,
+            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+            scrollLeft: scrollLeft,
+            scrollTop: scrollTop,
+            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
+          };
+        }, _this.resetIsScrollingDebounced);
+      };
+
+      _this.scrollingContainerRef = function (ref) {
+        _this._scrollingContainer = ref;
+      };
+
+      _this.resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          clearTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+      };
+
+      _this.resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({ isScrolling: false }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for cells that don't use isScrolling param.
+          _this._cellStyleCache = {};
+        });
+      };
+
+      _this._instanceProps = initInstanceProps(props, _this);
+      return _this;
+    }
+
+    createClass(List, [{
+      key: 'scrollTo',
+      value: function scrollTo(_ref2) {
+        var scrollLeft = _ref2.scrollLeft,
+            scrollTop = _ref2.scrollTop;
+
+        if (this._scrollingContainer != null) {
+          this._scrollingContainer.scrollLeft = scrollLeft;
+          this._scrollingContainer.scrollTop = scrollTop;
+        }
+      }
+    }, {
+      key: 'scrollToItem',
+      value: function scrollToItem(_ref3) {
+        var _ref3$align = _ref3.align,
+            align = _ref3$align === undefined ? 'auto' : _ref3$align,
+            columnIndex = _ref3.columnIndex,
+            rowIndex = _ref3.rowIndex;
+        var _state = this.state,
+            scrollLeft = _state.scrollLeft,
+            scrollTop = _state.scrollTop;
+
+
+        this.scrollTo({
+          scrollLeft: getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps),
+          scrollTop: getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps)
+        });
+      }
+    }, {
+      key: 'componnetWillUnmount',
+      value: function componnetWillUnmount() {
+        if (this._resetIsScrollingTimeoutId !== null) {
+          clearTimeout(this._resetIsScrollingTimeoutId);
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props,
+            className = _props.className,
+            height = _props.height,
+            style = _props.style,
+            width = _props.width;
+        var isScrolling = this.state.isScrolling;
+
+
+        var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+        var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+
+        return React.createElement(
+          'div',
+          {
+            className: className,
+            ref: this.scrollingContainerRef,
+            style: _extends({
+              position: 'relative',
+              height: height,
+              width: width,
+              overflow: 'auto'
+            }, style),
+            onScroll: this.onScroll
+          },
+          React.createElement(
+            'div',
+            {
+              style: {
+                height: estimatedTotalHeight,
+                overflow: 'hidden',
+                pointerEvents: isScrolling ? 'none' : '',
+                width: estimatedTotalWidth
+              }
+            },
+            this.renderCells()
+          )
+        );
+      }
+    }, {
+      key: 'renderCells',
+      value: function renderCells() {
+        var _props2 = this.props,
+            children = _props2.children,
+            useIsScrolling = _props2.useIsScrolling;
+        var isScrolling = this.state.isScrolling;
+
+        var _getHorizontalRangeTo = this.getHorizontalRangeToRender(),
+            _getHorizontalRangeTo2 = slicedToArray(_getHorizontalRangeTo, 2),
+            columnStartIndex = _getHorizontalRangeTo2[0],
+            columnStopIndex = _getHorizontalRangeTo2[1];
+
+        var _getVerticalRangeToRe = this.getVerticalRangeToRender(),
+            _getVerticalRangeToRe2 = slicedToArray(_getVerticalRangeToRe, 2),
+            rowStartIndex = _getVerticalRangeToRe2[0],
+            rowStopIndex = _getVerticalRangeToRe2[1];
+
+        var cells = [];
+
+        for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
+          for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
+            var _key = _rowIndex + ':' + _columnIndex;
+
+            // Cache cell styles while scrolling,
+            // So that pure component sCU will prevent re-renders.
+            var _style = void 0;
+            if (this._cellStyleCache.hasOwnProperty(_key)) {
+              _style = this._cellStyleCache[_key];
+            } else {
+              this._cellStyleCache[_key] = _style = {
+                position: 'absolute',
+                left: getColumnOffset(this.props, _columnIndex, this._instanceProps),
+                top: getRowOffset(this.props, _rowIndex, this._instanceProps),
+                height: getRowHeight(this.props, _rowIndex, this._instanceProps),
+                width: getColumnWidth(this.props, _columnIndex, this._instanceProps)
+              };
+            }
+
+            cells.push(children({
+              columnIndex: _columnIndex,
+              key: _key,
+              isScrolling: useIsScrolling ? isScrolling : undefined,
+              rowIndex: _rowIndex,
+              style: _style
+            }));
+          }
+        }
+
+        return cells;
+      }
+    }, {
+      key: 'getHorizontalRangeToRender',
+      value: function getHorizontalRangeToRender() {
+        var _props3 = this.props,
+            columnCount = _props3.columnCount,
+            overscanCount = _props3.overscanCount;
+        var _state2 = this.state,
+            horizontalScrollDirection = _state2.horizontalScrollDirection,
+            scrollLeft = _state2.scrollLeft;
+
+
+        var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
+        var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, this._instanceProps);
+
+        // Overscan by one cell in each direction so that tab/focus works.
+        // If there isn't at least one extra cell, tab loops back around.
+        var overscanBackward = horizontalScrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
+        var overscanForward = horizontalScrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
+
+        return [Math.max(0, startIndex - overscanBackward), Math.min(columnCount - 1, stopIndex + overscanForward)];
+      }
+    }, {
+      key: 'getVerticalRangeToRender',
+      value: function getVerticalRangeToRender() {
+        var _props4 = this.props,
+            columnCount = _props4.columnCount,
+            overscanCount = _props4.overscanCount;
+        var _state3 = this.state,
+            verticalScrollDirection = _state3.verticalScrollDirection,
+            scrollTop = _state3.scrollTop;
+
+
+        var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
+        var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, this._instanceProps);
+
+        // Overscan by one cell in each direction so that tab/focus works.
+        // If there isn't at least one extra cell, tab loops back around.
+        var overscanBackward = verticalScrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
+        var overscanForward = verticalScrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
+
+        return [Math.max(0, startIndex - overscanBackward), Math.min(columnCount - 1, stopIndex + overscanForward)];
+      }
+    }], [{
+      key: 'getDerivedStateFromProps',
+      value: function getDerivedStateFromProps(nextProps, prevState) {
+        validateSharedProps(nextProps);
+        validateProps(nextProps);
+        return null;
+      }
+    }]);
+    return List;
+  }(React.Component), _class.defaultProps = {
+    overscanCount: 1,
+    useIsScrolling: false
+  }, _temp;
+}
+
+var validateSharedProps = function validateSharedProps(_ref4) {
+  var children = _ref4.children,
+      height = _ref4.height,
+      width = _ref4.width;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof children !== 'function') {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a function that creates a React element. ' + ('"' + (children === null ? 'null' : typeof children === 'undefined' ? 'undefined' : _typeof(children)) + '" was specified.'));
+    }
+
+    if (typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ('"' + (width === null ? 'null' : typeof width === 'undefined' ? 'undefined' : _typeof(width)) + '" was specified.'));
+    }
+
+    if (typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ('"' + (height === null ? 'null' : typeof height === 'undefined' ? 'undefined' : _typeof(height)) + '" was specified.'));
+    }
+  }
+};
+
+var DEFAULT_ESTIMATED_CELL_SIZE = 50;
+
+var getCellMetadata = function getCellMetadata(cellType, props, index, instanceProps) {
+  var cellMetadataMap = void 0,
+      cellSize = void 0,
+      estimatedCellSize = void 0,
+      lastMeasuredIndex = void 0;
+  if (cellType === 'column') {
+    cellMetadataMap = instanceProps.columnMetadataMap;
+    cellSize = props.columnWidth;
+    estimatedCellSize = instanceProps.estimatedColumnWidth;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    cellMetadataMap = instanceProps.rowMetadataMap;
+    cellSize = props.rowHeight;
+    estimatedCellSize = instanceProps.estimatedRowHeight;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  if (index > lastMeasuredIndex) {
+    var _offset = 0;
+    if (lastMeasuredIndex >= 0) {
+      var cellMetadata = cellMetadataMap[lastMeasuredIndex];
+      _offset = cellMetadata.offset + cellMetadata.size;
+    }
+
+    for (var i = lastMeasuredIndex + 1; i <= index; i++) {
+      var _size = cellSize(i);
+
+      cellMetadataMap[i] = {
+        offset: _offset,
+        size: _size
+      };
+
+      _offset += _size;
+    }
+
+    if (cellType === 'column') {
+      instanceProps.lastMeasuredColumnIndex = index;
+    } else {
+      instanceProps.lastMeasuredRowIndex = index;
+    }
+  }
+
+  return cellMetadataMap[index];
+};
+
+var findNearestCell = function findNearestCell(cellType, props, instanceProps, offset) {
+  var cellMetadataMap = void 0,
+      estimatedCellSize = void 0,
+      lastMeasuredIndex = void 0;
+  if (cellType === 'column') {
+    cellMetadataMap = instanceProps.columnMetadataMap;
+    estimatedCellSize = instanceProps.estimatedColumnWidth;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    cellMetadataMap = instanceProps.rowMetadataMap;
+    estimatedCellSize = instanceProps.estimatedRowHeight;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  var lastMeasuredCellOffset = lastMeasuredIndex > 0 ? cellMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredCellOffset >= offset) {
+    // If we've already measured cells within this range just use a binary search as it's faster.
+    return findNearestCellBinarySearch(cellType, props, instanceProps, lastMeasuredIndex, 0, offset);
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of cells as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestCellExponentialSearch(cellType, props, instanceProps, lastMeasuredIndex, offset);
+  }
+};
+
+var findNearestCellBinarySearch = function findNearestCellBinarySearch(cellType, props, instanceProps, high, low, offset) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getCellMetadata(cellType, props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+var findNearestCellExponentialSearch = function findNearestCellExponentialSearch(cellType, props, instanceProps, index, offset) {
+  var count = cellType === 'column' ? props.columnCount : props.rowCount;
+  var interval = 1;
+
+  while (index < count && getCellMetadata(cellType, props, index, instanceProps).offset < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestCellBinarySearch(cellType, props, instanceProps, Math.min(index, count - 1), Math.floor(index / 2), offset);
+};
+
+var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(cellType, props, index, align, scrollOffset, instanceProps) {
+  var size = cellType === 'column' ? props.width : props.height;
+  var cellMetadata = getCellMetadata(cellType, props, index, instanceProps);
+  var maxOffset = cellMetadata.offset;
+  var minOffset = cellMetadata.offset - size + cellMetadata.size;
+
+  switch (align) {
+    case 'start':
+      return maxOffset;
+    case 'end':
+      return minOffset;
+    case 'center':
+      return Math.round(minOffset + (maxOffset - minOffset) / 2);
+    case 'auto':
+    default:
+      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+      } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        return minOffset;
+      } else {
+        return maxOffset;
+      }
+  }
+};
+
+var DynamicGrid = createGridComponent({
+  getColumnOffset: function getColumnOffset(props, index, instanceProps) {
+    return getCellMetadata('column', props, index, instanceProps).offset;
+  },
+
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, offset, instanceProps) {
+    return findNearestCell('column', props, instanceProps, offset);
+  },
+
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, instanceProps) {
+    var columnCount = props.columnCount,
+        width = props.width;
+
+
+    var cellMetadata = getCellMetadata('column', props, startIndex, instanceProps);
+    var maxOffset = cellMetadata.offset + width;
+
+    var offset = cellMetadata.offset;
+    var stopIndex = startIndex;
+
+    while (stopIndex < columnCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getCellMetadata('column', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+
+  getColumnWidth: function getColumnWidth(props, index, instanceProps) {
+    return instanceProps.columnMetadataMap[index].size;
+  },
+
+  getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref, _ref2) {
+    var rowCount = _ref.rowCount;
+    var rowMetadataMap = _ref2.rowMetadataMap,
+        estimatedRowHeight = _ref2.estimatedRowHeight,
+        lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
+
+    var totalSizeOfMeasuredRows = 0;
+
+    if (lastMeasuredRowIndex >= 0) {
+      var cellMetadata = rowMetadataMap[lastMeasuredRowIndex];
+      totalSizeOfMeasuredRows = cellMetadata.offset + cellMetadata.size;
+    }
+
+    var numUnmeasuredCells = rowCount - lastMeasuredRowIndex - 1;
+    var totalSizeOfUnmeasuredCells = numUnmeasuredCells * estimatedRowHeight;
+
+    return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredCells;
+  },
+
+  getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref3, _ref4) {
+    var columnCount = _ref3.columnCount;
+    var columnMetadataMap = _ref4.columnMetadataMap,
+        estimatedColumnWidth = _ref4.estimatedColumnWidth,
+        lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
+
+    var totalSizeOfMeasuredRows = 0;
+
+    if (lastMeasuredColumnIndex >= 0) {
+      var cellMetadata = columnMetadataMap[lastMeasuredColumnIndex];
+      totalSizeOfMeasuredRows = cellMetadata.offset + cellMetadata.size;
+    }
+
+    var numUnmeasuredCells = columnCount - lastMeasuredColumnIndex - 1;
+    var totalSizeOfUnmeasuredCells = numUnmeasuredCells * estimatedColumnWidth;
+
+    return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredCells;
+  },
+
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps) {
+    return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps);
+  },
+
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps) {
+    return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps);
+  },
+
+  getRowOffset: function getRowOffset(props, index, instanceProps) {
+    return getCellMetadata('row', props, index, instanceProps).offset;
+  },
+
+  getRowHeight: function getRowHeight(props, index, instanceProps) {
+    return instanceProps.rowMetadataMap[index].size;
+  },
+
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(props, offset, instanceProps) {
+    return findNearestCell('row', props, instanceProps, offset);
+  },
+
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, instanceProps) {
+    var rowCount = props.rowCount,
+        height = props.height;
+
+
+    var cellMetadata = getCellMetadata('row', props, startIndex, instanceProps);
+    var maxOffset = cellMetadata.offset + height;
+
+    var offset = cellMetadata.offset;
+    var stopIndex = startIndex;
+
+    while (stopIndex < rowCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getCellMetadata('row', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+
+  initInstanceProps: function initInstanceProps(props, instance) {
+    var _ref5 = props,
+        estimatedColumnWidth = _ref5.estimatedColumnWidth,
+        estimatedRowHeight = _ref5.estimatedRowHeight;
+
+
+    var instanceProps = {
+      columnMetadataMap: {},
+      estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_CELL_SIZE,
+      estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_CELL_SIZE,
+      lastMeasuredColumnIndex: -1,
+      lastMeasuredRowIndex: -1,
+      rowMetadataMap: {}
+    };
+
+    instance.resetAfterColumnIndex = function (index) {
+      instanceProps.lastMeasuredColumnIndex = index - 1;
+    };
+
+    instance.resetAfterRowIndex = function (index) {
+      instanceProps.lastMeasuredRowIndex = index - 1;
+    };
+
+    return instanceProps;
+  },
+
+
+  validateProps: function validateProps(_ref6) {
+    var columnWidth = _ref6.columnWidth,
+        rowHeight = _ref6.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'function') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ('"' + (columnWidth === null ? 'null' : typeof columnWidth === 'undefined' ? 'undefined' : _typeof(columnWidth)) + '" was specified.'));
+      } else if (typeof rowHeight !== 'function') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ('"' + (rowHeight === null ? 'null' : typeof rowHeight === 'undefined' ? 'undefined' : _typeof(rowHeight)) + '" was specified.'));
+      }
+    }
+  }
+});
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
+
 function createListComponent(_ref) {
@@ -205,3 +771,3 @@ var _class, _temp;
 
-        _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+        _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
       };
@@ -366,3 +932,3 @@
       value: function getDerivedStateFromProps(nextProps, prevState) {
-        validateSharedProps(nextProps);
+        validateSharedProps$1(nextProps);
         validateProps(nextProps);
@@ -380,3 +946,3 @@ return null;
 
-var validateSharedProps = function validateSharedProps(_ref2) {
+var validateSharedProps$1 = function validateSharedProps(_ref2) {
   var children = _ref2.children,
@@ -404,5 +970,5 @@ direction = _ref2.direction,
 
-var DEFAULT_ESTIMATED_CELL_SIZE = 50;
+var DEFAULT_ESTIMATED_CELL_SIZE$1 = 50;
 
-var getCellMetadata = function getCellMetadata(props, index, instanceProps) {
+var getCellMetadata$1 = function getCellMetadata(props, index, instanceProps) {
   var _ref = props,
@@ -431,5 +997,5 @@ cellSize = _ref.cellSize,
       _offset += _size;
+    }
 
-      instanceProps.lastMeasuredIndex = index;
-    }
+    instanceProps.lastMeasuredIndex = index;
   }
@@ -440,3 +1006,3 @@
 
-var findNearestCell = function findNearestCell(props, instanceProps, offset) {
+var findNearestCell$1 = function findNearestCell(props, instanceProps, offset) {
   var cellMetadataMap = instanceProps.cellMetadataMap,
@@ -451,3 +1017,3 @@ estimatedCellSize = instanceProps.estimatedCellSize,
     // If we've already measured cells within this range just use a binary search as it's faster.
-    return findNearestCellBinarySearch(props, instanceProps, lastMeasuredIndex, 0, offset);
+    return findNearestCellBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
   } else {
@@ -457,10 +1023,10 @@ // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
     // The overall complexity for this approach is O(log n).
-    return findNearestCellExponentialSearch(props, instanceProps, lastMeasuredIndex, offset);
+    return findNearestCellExponentialSearch$1(props, instanceProps, lastMeasuredIndex, offset);
   }
 };
 
-var findNearestCellBinarySearch = function findNearestCellBinarySearch(props, instanceProps, high, low, offset) {
+var findNearestCellBinarySearch$1 = function findNearestCellBinarySearch(props, instanceProps, high, low, offset) {
   while (low <= high) {
     var middle = low + Math.floor((high - low) / 2);
-    var currentOffset = getCellMetadata(props, middle, instanceProps).offset;
+    var currentOffset = getCellMetadata$1(props, middle, instanceProps).offset;
 
@@ -483,3 +1049,3 @@ if (currentOffset === offset) {
 
-var findNearestCellExponentialSearch = function findNearestCellExponentialSearch(props, instanceProps, index, offset) {
+var findNearestCellExponentialSearch$1 = function findNearestCellExponentialSearch(props, instanceProps, index, offset) {
   var count = props.count;
@@ -489,3 +1055,3 @@
 
-  while (index < count && getCellMetadata(props, index, instanceProps).offset < offset) {
+  while (index < count && getCellMetadata$1(props, index, instanceProps).offset < offset) {
     index += interval;
@@ -495,3 +1061,3 @@ interval *= 2;
 
-  return findNearestCellBinarySearch(props, instanceProps, Math.min(index, count - 1), Math.floor(index / 2), offset);
+  return findNearestCellBinarySearch$1(props, instanceProps, Math.min(index, count - 1), Math.floor(index / 2), offset);
 };
@@ -501,3 +1067,3 @@
   getCellOffset: function getCellOffset(props, index, instanceProps) {
-    return getCellMetadata(props, index, instanceProps).offset;
+    return getCellMetadata$1(props, index, instanceProps).offset;
   },
@@ -535,3 +1101,3 @@
     var size = direction === 'horizontal' ? width : height;
-    var cellMetadata = getCellMetadata(props, index, instanceProps);
+    var cellMetadata = getCellMetadata$1(props, index, instanceProps);
     var maxOffset = cellMetadata.offset;
@@ -560,3 +1126,3 @@ var minOffset = cellMetadata.offset - size + cellMetadata.size;
   getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
-    return findNearestCell(props, instanceProps, offset);
+    return findNearestCell$1(props, instanceProps, offset);
   },
@@ -572,3 +1138,3 @@
     var size = direction === 'horizontal' ? width : height;
-    var cellMetadata = getCellMetadata(props, startIndex, instanceProps);
+    var cellMetadata = getCellMetadata$1(props, startIndex, instanceProps);
     var maxOffset = cellMetadata.offset + size;
@@ -581,3 +1147,3 @@
       stopIndex++;
-      offset += getCellMetadata(props, stopIndex, instanceProps).size;
+      offset += getCellMetadata$1(props, stopIndex, instanceProps).size;
     }
@@ -596,3 +1162,3 @@
       cellMetadataMap: {},
-      estimatedCellSize: estimatedCellSize || DEFAULT_ESTIMATED_CELL_SIZE,
+      estimatedCellSize: estimatedCellSize || DEFAULT_ESTIMATED_CELL_SIZE$1,
       lastMeasuredIndex: -1
@@ -620,278 +1186,2 @@ };
 
-var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
-
-function createGridComponent(_ref) {
-  var _class, _temp2;
-
-  var getColumnOffset = _ref.getColumnOffset,
-      getColumnStartIndexForOffset = _ref.getColumnStartIndexForOffset,
-      getColumnStopIndexForStartIndex = _ref.getColumnStopIndexForStartIndex,
-      getColumnWidth = _ref.getColumnWidth,
-      getEstimatedTotalHeight = _ref.getEstimatedTotalHeight,
-      getEstimatedTotalWidth = _ref.getEstimatedTotalWidth,
-      getOffsetForColumnAndAlignment = _ref.getOffsetForColumnAndAlignment,
-      getOffsetForRowAndAlignment = _ref.getOffsetForRowAndAlignment,
-      getRowHeight = _ref.getRowHeight,
-      getRowOffset = _ref.getRowOffset,
-      getRowStartIndexForOffset = _ref.getRowStartIndexForOffset,
-      getRowStopIndexForStartIndex = _ref.getRowStopIndexForStartIndex,
-      validateProps = _ref.validateProps;
-
-  return _temp2 = _class = function (_React$Component) {
-    inherits(List, _React$Component);
-
-    function List() {
-      var _ref2;
-
-      var _temp, _this, _ret;
-
-      classCallCheck(this, List);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref2 = List.__proto__ || Object.getPrototypeOf(List)).call.apply(_ref2, [this].concat(args))), _this), _this._cellStyleCache = {}, _this._resetIsScrollingTimeoutId = null, _this.state = {
-        isScrolling: false,
-        horizontalScrollDirection: 'forward',
-        scrollLeft: 0,
-        scrollTop: 0,
-        verticalScrollDirection: 'forward'
-      }, _this.onScroll = function (event) {
-        var _event$currentTarget = event.currentTarget,
-            scrollLeft = _event$currentTarget.scrollLeft,
-            scrollTop = _event$currentTarget.scrollTop;
-
-        _this.setState(function (prevState) {
-          return {
-            isScrolling: true,
-            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
-            scrollLeft: scrollLeft,
-            scrollTop: scrollTop,
-            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
-          };
-        }, _this.resetIsScrollingDebounced);
-      }, _this.scrollingContainerRef = function (ref) {
-        _this._scrollingContainer = ref;
-      }, _this.resetIsScrollingDebounced = function () {
-        if (_this._resetIsScrollingTimeoutId !== null) {
-          clearTimeout(_this._resetIsScrollingTimeoutId);
-        }
-
-        _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
-      }, _this.resetIsScrolling = function () {
-        _this._resetIsScrollingTimeoutId = null;
-
-        _this.setState({ isScrolling: false }, function () {
-          // Clear style cache after state update has been committed.
-          // This way we don't break pure sCU for cells that don't use isScrolling param.
-          _this._cellStyleCache = {};
-        });
-      }, _temp), possibleConstructorReturn(_this, _ret);
-    }
-
-    createClass(List, [{
-      key: 'scrollTo',
-      value: function scrollTo(_ref3) {
-        var scrollLeft = _ref3.scrollLeft,
-            scrollTop = _ref3.scrollTop;
-
-        if (this._scrollingContainer != null) {
-          this._scrollingContainer.scrollLeft = scrollLeft;
-          this._scrollingContainer.scrollTop = scrollTop;
-        }
-      }
-    }, {
-      key: 'scrollToItem',
-      value: function scrollToItem(_ref4) {
-        var _ref4$align = _ref4.align,
-            align = _ref4$align === undefined ? 'auto' : _ref4$align,
-            columnIndex = _ref4.columnIndex,
-            rowIndex = _ref4.rowIndex;
-        var _state = this.state,
-            scrollLeft = _state.scrollLeft,
-            scrollTop = _state.scrollTop;
-
-
-        this.scrollTo({
-          scrollLeft: getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft),
-          scrollTop: getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop)
-        });
-      }
-    }, {
-      key: 'componnetWillUnmount',
-      value: function componnetWillUnmount() {
-        if (this._resetIsScrollingTimeoutId !== null) {
-          clearTimeout(this._resetIsScrollingTimeoutId);
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            className = _props.className,
-            height = _props.height,
-            style = _props.style,
-            width = _props.width;
-        var isScrolling = this.state.isScrolling;
-
-
-        var estimatedTotalHeight = getEstimatedTotalHeight(this.props);
-        var estimatedTotalWidth = getEstimatedTotalWidth(this.props);
-
-        return React.createElement(
-          'div',
-          {
-            className: className,
-            ref: this.scrollingContainerRef,
-            style: _extends({
-              position: 'relative',
-              height: height,
-              width: width,
-              overflow: 'auto'
-            }, style),
-            onScroll: this.onScroll
-          },
-          React.createElement(
-            'div',
-            {
-              style: {
-                height: estimatedTotalHeight,
-                overflow: 'hidden',
-                pointerEvents: isScrolling ? 'none' : '',
-                width: estimatedTotalWidth
-              }
-            },
-            this.renderCells()
-          )
-        );
-      }
-    }, {
-      key: 'renderCells',
-      value: function renderCells() {
-        var _props2 = this.props,
-            children = _props2.children,
-            useIsScrolling = _props2.useIsScrolling;
-        var isScrolling = this.state.isScrolling;
-
-        var _getHorizontalRangeTo = this.getHorizontalRangeToRender(),
-            _getHorizontalRangeTo2 = slicedToArray(_getHorizontalRangeTo, 2),
-            columnStartIndex = _getHorizontalRangeTo2[0],
-            columnStopIndex = _getHorizontalRangeTo2[1];
-
-        var _getVerticalRangeToRe = this.getVerticalRangeToRender(),
-            _getVerticalRangeToRe2 = slicedToArray(_getVerticalRangeToRe, 2),
-            rowStartIndex = _getVerticalRangeToRe2[0],
-            rowStopIndex = _getVerticalRangeToRe2[1];
-
-        var cells = [];
-
-        for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
-          for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
-            var _key2 = _rowIndex + ':' + _columnIndex;
-
-            // Cache cell styles while scrolling,
-            // So that pure component sCU will prevent re-renders.
-            var _style = void 0;
-            if (this._cellStyleCache.hasOwnProperty(_key2)) {
-              _style = this._cellStyleCache[_key2];
-            } else {
-              this._cellStyleCache[_key2] = _style = {
-                position: 'absolute',
-                left: getColumnOffset(this.props, _columnIndex),
-                top: getRowOffset(this.props, _rowIndex),
-                height: getRowHeight(this.props, _rowIndex),
-                width: getColumnWidth(this.props, _columnIndex)
-              };
-            }
-
-            cells.push(children({
-              columnIndex: _columnIndex,
-              key: _key2,
-              isScrolling: useIsScrolling ? isScrolling : undefined,
-              rowIndex: _rowIndex,
-              style: _style
-            }));
-          }
-        }
-
-        return cells;
-      }
-    }, {
-      key: 'getHorizontalRangeToRender',
-      value: function getHorizontalRangeToRender() {
-        var _props3 = this.props,
-            columnCount = _props3.columnCount,
-            overscanCount = _props3.overscanCount;
-        var _state2 = this.state,
-            horizontalScrollDirection = _state2.horizontalScrollDirection,
-            scrollLeft = _state2.scrollLeft;
-
-
-        var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft);
-        var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex);
-
-        // Overscan by one cell in each direction so that tab/focus works.
-        // If there isn't at least one extra cell, tab loops back around.
-        var overscanBackward = horizontalScrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
-        var overscanForward = horizontalScrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
-
-        return [Math.max(0, startIndex - overscanBackward), Math.min(columnCount - 1, stopIndex + overscanForward)];
-      }
-    }, {
-      key: 'getVerticalRangeToRender',
-      value: function getVerticalRangeToRender() {
-        var _props4 = this.props,
-            columnCount = _props4.columnCount,
-            overscanCount = _props4.overscanCount;
-        var _state3 = this.state,
-            verticalScrollDirection = _state3.verticalScrollDirection,
-            scrollTop = _state3.scrollTop;
-
-
-        var startIndex = getRowStartIndexForOffset(this.props, scrollTop);
-        var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex);
-
-        // Overscan by one cell in each direction so that tab/focus works.
-        // If there isn't at least one extra cell, tab loops back around.
-        var overscanBackward = verticalScrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
-        var overscanForward = verticalScrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
-
-        return [Math.max(0, startIndex - overscanBackward), Math.min(columnCount - 1, stopIndex + overscanForward)];
-      }
-    }], [{
-      key: 'getDerivedStateFromProps',
-      value: function getDerivedStateFromProps(nextProps, prevState) {
-        validateSharedProps$1(nextProps);
-        validateProps(nextProps);
-        return null;
-      }
-    }]);
-    return List;
-  }(React.Component), _class.defaultProps = {
-    overscanCount: 1,
-    useIsScrolling: false
-  }, _temp2;
-}
-
-var validateSharedProps$1 = function validateSharedProps(_ref5) {
-  var children = _ref5.children,
-      height = _ref5.height,
-      width = _ref5.width;
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof children !== 'function') {
-      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a function that creates a React element. ' + ('"' + (children === null ? 'null' : typeof children === 'undefined' ? 'undefined' : _typeof(children)) + '" was specified.'));
-    }
-
-    if (typeof width !== 'number') {
-      throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ('"' + (width === null ? 'null' : typeof width === 'undefined' ? 'undefined' : _typeof(width)) + '" was specified.'));
-    }
-
-    if (typeof height !== 'number') {
-      throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ('"' + (height === null ? 'null' : typeof height === 'undefined' ? 'undefined' : _typeof(height)) + '" was specified.'));
-    }
-  }
-};
-
 var FixedSizeGrid = createGridComponent({
@@ -902,2 +1192,3 @@ getColumnOffset: function getColumnOffset(_ref, index) {
   },
+
   getColumnWidth: function getColumnWidth(_ref2, index) {
@@ -907,2 +1198,3 @@ var columnWidth = _ref2.columnWidth;
   },
+
   getRowOffset: function getRowOffset(_ref3, index) {
@@ -912,2 +1204,3 @@ var rowHeight = _ref3.rowHeight;
   },
+
   getRowHeight: function getRowHeight(_ref4, index) {
@@ -917,2 +1210,3 @@ var rowHeight = _ref4.rowHeight;
   },
+
   getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
@@ -923,2 +1217,3 @@ var rowCount = _ref5.rowCount,
   },
+
   getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
@@ -929,2 +1224,3 @@ var columnCount = _ref6.columnCount,
   },
+
   getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft) {
@@ -955,2 +1251,3 @@ var columnWidth = _ref7.columnWidth,
   },
+
   getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop) {
@@ -981,2 +1278,3 @@ var rowHeight = _ref8.rowHeight,
   },
+
   getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, offset) {
@@ -987,2 +1285,3 @@ var columnWidth = _ref9.columnWidth,
   },
+
   getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex) {
@@ -995,2 +1294,3 @@ var columnWidth = _ref10.columnWidth,
   },
+
   getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, offset) {
@@ -1001,2 +1301,3 @@ var rowHeight = _ref11.rowHeight,
   },
+
   getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex) {
@@ -1009,2 +1310,8 @@ var rowHeight = _ref12.rowHeight,
   },
+
+  initInstanceProps: function initInstanceProps(props) {
+    // Noop
+  },
+
+
   validateProps: function validateProps(_ref13) {
@@ -1106,2 +1413,2 @@ var columnWidth = _ref13.columnWidth,
 
-export { DynamicList, FixedSizeGrid, FixedSizeList };
+export { DynamicGrid, DynamicList, FixedSizeGrid, FixedSizeList };

index.js

@@ -149,2 +149,568 @@ 'use strict';
 
+function createGridComponent(_ref) {
+  var _class, _temp;
+
+  var getColumnOffset = _ref.getColumnOffset,
+      getColumnStartIndexForOffset = _ref.getColumnStartIndexForOffset,
+      getColumnStopIndexForStartIndex = _ref.getColumnStopIndexForStartIndex,
+      getColumnWidth = _ref.getColumnWidth,
+      getEstimatedTotalHeight = _ref.getEstimatedTotalHeight,
+      getEstimatedTotalWidth = _ref.getEstimatedTotalWidth,
+      getOffsetForColumnAndAlignment = _ref.getOffsetForColumnAndAlignment,
+      getOffsetForRowAndAlignment = _ref.getOffsetForRowAndAlignment,
+      getRowHeight = _ref.getRowHeight,
+      getRowOffset = _ref.getRowOffset,
+      getRowStartIndexForOffset = _ref.getRowStartIndexForOffset,
+      getRowStopIndexForStartIndex = _ref.getRowStopIndexForStartIndex,
+      initInstanceProps = _ref.initInstanceProps,
+      validateProps = _ref.validateProps;
+
+  return _temp = _class = function (_React$Component) {
+    inherits(List, _React$Component);
+
+    function List(props) {
+      classCallCheck(this, List);
+
+      var _this = possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).call(this, props));
+
+      _this._cellStyleCache = {};
+      _this._resetIsScrollingTimeoutId = null;
+      _this.state = {
+        isScrolling: false,
+        horizontalScrollDirection: 'forward',
+        scrollLeft: 0,
+        scrollTop: 0,
+        verticalScrollDirection: 'forward'
+      };
+
+      _this.onScroll = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollTop = _event$currentTarget.scrollTop;
+
+        _this.setState(function (prevState) {
+          return {
+            isScrolling: true,
+            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+            scrollLeft: scrollLeft,
+            scrollTop: scrollTop,
+            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
+          };
+        }, _this.resetIsScrollingDebounced);
+      };
+
+      _this.scrollingContainerRef = function (ref) {
+        _this._scrollingContainer = ref;
+      };
+
+      _this.resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          clearTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+      };
+
+      _this.resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({ isScrolling: false }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for cells that don't use isScrolling param.
+          _this._cellStyleCache = {};
+        });
+      };
+
+      _this._instanceProps = initInstanceProps(props, _this);
+      return _this;
+    }
+
+    createClass(List, [{
+      key: 'scrollTo',
+      value: function scrollTo(_ref2) {
+        var scrollLeft = _ref2.scrollLeft,
+            scrollTop = _ref2.scrollTop;
+
+        if (this._scrollingContainer != null) {
+          this._scrollingContainer.scrollLeft = scrollLeft;
+          this._scrollingContainer.scrollTop = scrollTop;
+        }
+      }
+    }, {
+      key: 'scrollToItem',
+      value: function scrollToItem(_ref3) {
+        var _ref3$align = _ref3.align,
+            align = _ref3$align === undefined ? 'auto' : _ref3$align,
+            columnIndex = _ref3.columnIndex,
+            rowIndex = _ref3.rowIndex;
+        var _state = this.state,
+            scrollLeft = _state.scrollLeft,
+            scrollTop = _state.scrollTop;
+
+
+        this.scrollTo({
+          scrollLeft: getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps),
+          scrollTop: getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps)
+        });
+      }
+    }, {
+      key: 'componnetWillUnmount',
+      value: function componnetWillUnmount() {
+        if (this._resetIsScrollingTimeoutId !== null) {
+          clearTimeout(this._resetIsScrollingTimeoutId);
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props,
+            className = _props.className,
+            height = _props.height,
+            style = _props.style,
+            width = _props.width;
+        var isScrolling = this.state.isScrolling;
+
+
+        var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+        var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+
+        return React.createElement(
+          'div',
+          {
+            className: className,
+            ref: this.scrollingContainerRef,
+            style: _extends({
+              position: 'relative',
+              height: height,
+              width: width,
+              overflow: 'auto'
+            }, style),
+            onScroll: this.onScroll
+          },
+          React.createElement(
+            'div',
+            {
+              style: {
+                height: estimatedTotalHeight,
+                overflow: 'hidden',
+                pointerEvents: isScrolling ? 'none' : '',
+                width: estimatedTotalWidth
+              }
+            },
+            this.renderCells()
+          )
+        );
+      }
+    }, {
+      key: 'renderCells',
+      value: function renderCells() {
+        var _props2 = this.props,
+            children = _props2.children,
+            useIsScrolling = _props2.useIsScrolling;
+        var isScrolling = this.state.isScrolling;
+
+        var _getHorizontalRangeTo = this.getHorizontalRangeToRender(),
+            _getHorizontalRangeTo2 = slicedToArray(_getHorizontalRangeTo, 2),
+            columnStartIndex = _getHorizontalRangeTo2[0],
+            columnStopIndex = _getHorizontalRangeTo2[1];
+
+        var _getVerticalRangeToRe = this.getVerticalRangeToRender(),
+            _getVerticalRangeToRe2 = slicedToArray(_getVerticalRangeToRe, 2),
+            rowStartIndex = _getVerticalRangeToRe2[0],
+            rowStopIndex = _getVerticalRangeToRe2[1];
+
+        var cells = [];
+
+        for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
+          for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
+            var _key = _rowIndex + ':' + _columnIndex;
+
+            // Cache cell styles while scrolling,
+            // So that pure component sCU will prevent re-renders.
+            var _style = void 0;
+            if (this._cellStyleCache.hasOwnProperty(_key)) {
+              _style = this._cellStyleCache[_key];
+            } else {
+              this._cellStyleCache[_key] = _style = {
+                position: 'absolute',
+                left: getColumnOffset(this.props, _columnIndex, this._instanceProps),
+                top: getRowOffset(this.props, _rowIndex, this._instanceProps),
+                height: getRowHeight(this.props, _rowIndex, this._instanceProps),
+                width: getColumnWidth(this.props, _columnIndex, this._instanceProps)
+              };
+            }
+
+            cells.push(children({
+              columnIndex: _columnIndex,
+              key: _key,
+              isScrolling: useIsScrolling ? isScrolling : undefined,
+              rowIndex: _rowIndex,
+              style: _style
+            }));
+          }
+        }
+
+        return cells;
+      }
+    }, {
+      key: 'getHorizontalRangeToRender',
+      value: function getHorizontalRangeToRender() {
+        var _props3 = this.props,
+            columnCount = _props3.columnCount,
+            overscanCount = _props3.overscanCount;
+        var _state2 = this.state,
+            horizontalScrollDirection = _state2.horizontalScrollDirection,
+            scrollLeft = _state2.scrollLeft;
+
+
+        var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
+        var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, this._instanceProps);
+
+        // Overscan by one cell in each direction so that tab/focus works.
+        // If there isn't at least one extra cell, tab loops back around.
+        var overscanBackward = horizontalScrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
+        var overscanForward = horizontalScrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
+
+        return [Math.max(0, startIndex - overscanBackward), Math.min(columnCount - 1, stopIndex + overscanForward)];
+      }
+    }, {
+      key: 'getVerticalRangeToRender',
+      value: function getVerticalRangeToRender() {
+        var _props4 = this.props,
+            columnCount = _props4.columnCount,
+            overscanCount = _props4.overscanCount;
+        var _state3 = this.state,
+            verticalScrollDirection = _state3.verticalScrollDirection,
+            scrollTop = _state3.scrollTop;
+
+
+        var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
+        var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, this._instanceProps);
+
+        // Overscan by one cell in each direction so that tab/focus works.
+        // If there isn't at least one extra cell, tab loops back around.
+        var overscanBackward = verticalScrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
+        var overscanForward = verticalScrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
+
+        return [Math.max(0, startIndex - overscanBackward), Math.min(columnCount - 1, stopIndex + overscanForward)];
+      }
+    }], [{
+      key: 'getDerivedStateFromProps',
+      value: function getDerivedStateFromProps(nextProps, prevState) {
+        validateSharedProps(nextProps);
+        validateProps(nextProps);
+        return null;
+      }
+    }]);
+    return List;
+  }(React.Component), _class.defaultProps = {
+    overscanCount: 1,
+    useIsScrolling: false
+  }, _temp;
+}
+
+var validateSharedProps = function validateSharedProps(_ref4) {
+  var children = _ref4.children,
+      height = _ref4.height,
+      width = _ref4.width;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof children !== 'function') {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a function that creates a React element. ' + ('"' + (children === null ? 'null' : typeof children === 'undefined' ? 'undefined' : _typeof(children)) + '" was specified.'));
+    }
+
+    if (typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ('"' + (width === null ? 'null' : typeof width === 'undefined' ? 'undefined' : _typeof(width)) + '" was specified.'));
+    }
+
+    if (typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ('"' + (height === null ? 'null' : typeof height === 'undefined' ? 'undefined' : _typeof(height)) + '" was specified.'));
+    }
+  }
+};
+
+var DEFAULT_ESTIMATED_CELL_SIZE = 50;
+
+var getCellMetadata = function getCellMetadata(cellType, props, index, instanceProps) {
+  var cellMetadataMap = void 0,
+      cellSize = void 0,
+      estimatedCellSize = void 0,
+      lastMeasuredIndex = void 0;
+  if (cellType === 'column') {
+    cellMetadataMap = instanceProps.columnMetadataMap;
+    cellSize = props.columnWidth;
+    estimatedCellSize = instanceProps.estimatedColumnWidth;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    cellMetadataMap = instanceProps.rowMetadataMap;
+    cellSize = props.rowHeight;
+    estimatedCellSize = instanceProps.estimatedRowHeight;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  if (index > lastMeasuredIndex) {
+    var _offset = 0;
+    if (lastMeasuredIndex >= 0) {
+      var cellMetadata = cellMetadataMap[lastMeasuredIndex];
+      _offset = cellMetadata.offset + cellMetadata.size;
+    }
+
+    for (var i = lastMeasuredIndex + 1; i <= index; i++) {
+      var _size = cellSize(i);
+
+      cellMetadataMap[i] = {
+        offset: _offset,
+        size: _size
+      };
+
+      _offset += _size;
+    }
+
+    if (cellType === 'column') {
+      instanceProps.lastMeasuredColumnIndex = index;
+    } else {
+      instanceProps.lastMeasuredRowIndex = index;
+    }
+  }
+
+  return cellMetadataMap[index];
+};
+
+var findNearestCell = function findNearestCell(cellType, props, instanceProps, offset) {
+  var cellMetadataMap = void 0,
+      estimatedCellSize = void 0,
+      lastMeasuredIndex = void 0;
+  if (cellType === 'column') {
+    cellMetadataMap = instanceProps.columnMetadataMap;
+    estimatedCellSize = instanceProps.estimatedColumnWidth;
+    lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+  } else {
+    cellMetadataMap = instanceProps.rowMetadataMap;
+    estimatedCellSize = instanceProps.estimatedRowHeight;
+    lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+  }
+
+  var lastMeasuredCellOffset = lastMeasuredIndex > 0 ? cellMetadataMap[lastMeasuredIndex].offset : 0;
+
+  if (lastMeasuredCellOffset >= offset) {
+    // If we've already measured cells within this range just use a binary search as it's faster.
+    return findNearestCellBinarySearch(cellType, props, instanceProps, lastMeasuredIndex, 0, offset);
+  } else {
+    // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+    // The exponential search avoids pre-computing sizes for the full set of cells as a binary search would.
+    // The overall complexity for this approach is O(log n).
+    return findNearestCellExponentialSearch(cellType, props, instanceProps, lastMeasuredIndex, offset);
+  }
+};
+
+var findNearestCellBinarySearch = function findNearestCellBinarySearch(cellType, props, instanceProps, high, low, offset) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getCellMetadata(cellType, props, middle, instanceProps).offset;
+
+    if (currentOffset === offset) {
+      return middle;
+    } else if (currentOffset < offset) {
+      low = middle + 1;
+    } else if (currentOffset > offset) {
+      high = middle - 1;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+var findNearestCellExponentialSearch = function findNearestCellExponentialSearch(cellType, props, instanceProps, index, offset) {
+  var count = cellType === 'column' ? props.columnCount : props.rowCount;
+  var interval = 1;
+
+  while (index < count && getCellMetadata(cellType, props, index, instanceProps).offset < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return findNearestCellBinarySearch(cellType, props, instanceProps, Math.min(index, count - 1), Math.floor(index / 2), offset);
+};
+
+var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(cellType, props, index, align, scrollOffset, instanceProps) {
+  var size = cellType === 'column' ? props.width : props.height;
+  var cellMetadata = getCellMetadata(cellType, props, index, instanceProps);
+  var maxOffset = cellMetadata.offset;
+  var minOffset = cellMetadata.offset - size + cellMetadata.size;
+
+  switch (align) {
+    case 'start':
+      return maxOffset;
+    case 'end':
+      return minOffset;
+    case 'center':
+      return Math.round(minOffset + (maxOffset - minOffset) / 2);
+    case 'auto':
+    default:
+      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+      } else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
+        return minOffset;
+      } else {
+        return maxOffset;
+      }
+  }
+};
+
+var DynamicGrid = createGridComponent({
+  getColumnOffset: function getColumnOffset(props, index, instanceProps) {
+    return getCellMetadata('column', props, index, instanceProps).offset;
+  },
+
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, offset, instanceProps) {
+    return findNearestCell('column', props, instanceProps, offset);
+  },
+
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, instanceProps) {
+    var columnCount = props.columnCount,
+        width = props.width;
+
+
+    var cellMetadata = getCellMetadata('column', props, startIndex, instanceProps);
+    var maxOffset = cellMetadata.offset + width;
+
+    var offset = cellMetadata.offset;
+    var stopIndex = startIndex;
+
+    while (stopIndex < columnCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getCellMetadata('column', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+
+  getColumnWidth: function getColumnWidth(props, index, instanceProps) {
+    return instanceProps.columnMetadataMap[index].size;
+  },
+
+  getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref, _ref2) {
+    var rowCount = _ref.rowCount;
+    var rowMetadataMap = _ref2.rowMetadataMap,
+        estimatedRowHeight = _ref2.estimatedRowHeight,
+        lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
+
+    var totalSizeOfMeasuredRows = 0;
+
+    if (lastMeasuredRowIndex >= 0) {
+      var cellMetadata = rowMetadataMap[lastMeasuredRowIndex];
+      totalSizeOfMeasuredRows = cellMetadata.offset + cellMetadata.size;
+    }
+
+    var numUnmeasuredCells = rowCount - lastMeasuredRowIndex - 1;
+    var totalSizeOfUnmeasuredCells = numUnmeasuredCells * estimatedRowHeight;
+
+    return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredCells;
+  },
+
+  getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref3, _ref4) {
+    var columnCount = _ref3.columnCount;
+    var columnMetadataMap = _ref4.columnMetadataMap,
+        estimatedColumnWidth = _ref4.estimatedColumnWidth,
+        lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
+
+    var totalSizeOfMeasuredRows = 0;
+
+    if (lastMeasuredColumnIndex >= 0) {
+      var cellMetadata = columnMetadataMap[lastMeasuredColumnIndex];
+      totalSizeOfMeasuredRows = cellMetadata.offset + cellMetadata.size;
+    }
+
+    var numUnmeasuredCells = columnCount - lastMeasuredColumnIndex - 1;
+    var totalSizeOfUnmeasuredCells = numUnmeasuredCells * estimatedColumnWidth;
+
+    return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredCells;
+  },
+
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps) {
+    return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps);
+  },
+
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps) {
+    return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps);
+  },
+
+  getRowOffset: function getRowOffset(props, index, instanceProps) {
+    return getCellMetadata('row', props, index, instanceProps).offset;
+  },
+
+  getRowHeight: function getRowHeight(props, index, instanceProps) {
+    return instanceProps.rowMetadataMap[index].size;
+  },
+
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(props, offset, instanceProps) {
+    return findNearestCell('row', props, instanceProps, offset);
+  },
+
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, instanceProps) {
+    var rowCount = props.rowCount,
+        height = props.height;
+
+
+    var cellMetadata = getCellMetadata('row', props, startIndex, instanceProps);
+    var maxOffset = cellMetadata.offset + height;
+
+    var offset = cellMetadata.offset;
+    var stopIndex = startIndex;
+
+    while (stopIndex < rowCount - 1 && offset < maxOffset) {
+      stopIndex++;
+      offset += getCellMetadata('row', props, stopIndex, instanceProps).size;
+    }
+
+    return stopIndex;
+  },
+
+  initInstanceProps: function initInstanceProps(props, instance) {
+    var _ref5 = props,
+        estimatedColumnWidth = _ref5.estimatedColumnWidth,
+        estimatedRowHeight = _ref5.estimatedRowHeight;
+
+
+    var instanceProps = {
+      columnMetadataMap: {},
+      estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_CELL_SIZE,
+      estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_CELL_SIZE,
+      lastMeasuredColumnIndex: -1,
+      lastMeasuredRowIndex: -1,
+      rowMetadataMap: {}
+    };
+
+    instance.resetAfterColumnIndex = function (index) {
+      instanceProps.lastMeasuredColumnIndex = index - 1;
+    };
+
+    instance.resetAfterRowIndex = function (index) {
+      instanceProps.lastMeasuredRowIndex = index - 1;
+    };
+
+    return instanceProps;
+  },
+
+
+  validateProps: function validateProps(_ref6) {
+    var columnWidth = _ref6.columnWidth,
+        rowHeight = _ref6.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'function') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ('"' + (columnWidth === null ? 'null' : typeof columnWidth === 'undefined' ? 'undefined' : _typeof(columnWidth)) + '" was specified.'));
+      } else if (typeof rowHeight !== 'function') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ('"' + (rowHeight === null ? 'null' : typeof rowHeight === 'undefined' ? 'undefined' : _typeof(rowHeight)) + '" was specified.'));
+      }
+    }
+  }
+});
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
+
 function createListComponent(_ref) {
@@ -211,3 +777,3 @@ var _class, _temp;
 
-        _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+        _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
       };
@@ -372,3 +938,3 @@
       value: function getDerivedStateFromProps(nextProps, prevState) {
-        validateSharedProps(nextProps);
+        validateSharedProps$1(nextProps);
         validateProps(nextProps);
@@ -386,3 +952,3 @@ return null;
 
-var validateSharedProps = function validateSharedProps(_ref2) {
+var validateSharedProps$1 = function validateSharedProps(_ref2) {
   var children = _ref2.children,
@@ -410,5 +976,5 @@ direction = _ref2.direction,
 
-var DEFAULT_ESTIMATED_CELL_SIZE = 50;
+var DEFAULT_ESTIMATED_CELL_SIZE$1 = 50;
 
-var getCellMetadata = function getCellMetadata(props, index, instanceProps) {
+var getCellMetadata$1 = function getCellMetadata(props, index, instanceProps) {
   var _ref = props,
@@ -437,5 +1003,5 @@ cellSize = _ref.cellSize,
       _offset += _size;
+    }
 
-      instanceProps.lastMeasuredIndex = index;
-    }
+    instanceProps.lastMeasuredIndex = index;
   }
@@ -446,3 +1012,3 @@
 
-var findNearestCell = function findNearestCell(props, instanceProps, offset) {
+var findNearestCell$1 = function findNearestCell(props, instanceProps, offset) {
   var cellMetadataMap = instanceProps.cellMetadataMap,
@@ -457,3 +1023,3 @@ estimatedCellSize = instanceProps.estimatedCellSize,
     // If we've already measured cells within this range just use a binary search as it's faster.
-    return findNearestCellBinarySearch(props, instanceProps, lastMeasuredIndex, 0, offset);
+    return findNearestCellBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
   } else {
@@ -463,10 +1029,10 @@ // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
     // The overall complexity for this approach is O(log n).
-    return findNearestCellExponentialSearch(props, instanceProps, lastMeasuredIndex, offset);
+    return findNearestCellExponentialSearch$1(props, instanceProps, lastMeasuredIndex, offset);
   }
 };
 
-var findNearestCellBinarySearch = function findNearestCellBinarySearch(props, instanceProps, high, low, offset) {
+var findNearestCellBinarySearch$1 = function findNearestCellBinarySearch(props, instanceProps, high, low, offset) {
   while (low <= high) {
     var middle = low + Math.floor((high - low) / 2);
-    var currentOffset = getCellMetadata(props, middle, instanceProps).offset;
+    var currentOffset = getCellMetadata$1(props, middle, instanceProps).offset;
 
@@ -489,3 +1055,3 @@ if (currentOffset === offset) {
 
-var findNearestCellExponentialSearch = function findNearestCellExponentialSearch(props, instanceProps, index, offset) {
+var findNearestCellExponentialSearch$1 = function findNearestCellExponentialSearch(props, instanceProps, index, offset) {
   var count = props.count;
@@ -495,3 +1061,3 @@
 
-  while (index < count && getCellMetadata(props, index, instanceProps).offset < offset) {
+  while (index < count && getCellMetadata$1(props, index, instanceProps).offset < offset) {
     index += interval;
@@ -501,3 +1067,3 @@ interval *= 2;
 
-  return findNearestCellBinarySearch(props, instanceProps, Math.min(index, count - 1), Math.floor(index / 2), offset);
+  return findNearestCellBinarySearch$1(props, instanceProps, Math.min(index, count - 1), Math.floor(index / 2), offset);
 };
@@ -507,3 +1073,3 @@
   getCellOffset: function getCellOffset(props, index, instanceProps) {
-    return getCellMetadata(props, index, instanceProps).offset;
+    return getCellMetadata$1(props, index, instanceProps).offset;
   },
@@ -541,3 +1107,3 @@
     var size = direction === 'horizontal' ? width : height;
-    var cellMetadata = getCellMetadata(props, index, instanceProps);
+    var cellMetadata = getCellMetadata$1(props, index, instanceProps);
     var maxOffset = cellMetadata.offset;
@@ -566,3 +1132,3 @@ var minOffset = cellMetadata.offset - size + cellMetadata.size;
   getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
-    return findNearestCell(props, instanceProps, offset);
+    return findNearestCell$1(props, instanceProps, offset);
   },
@@ -578,3 +1144,3 @@
     var size = direction === 'horizontal' ? width : height;
-    var cellMetadata = getCellMetadata(props, startIndex, instanceProps);
+    var cellMetadata = getCellMetadata$1(props, startIndex, instanceProps);
     var maxOffset = cellMetadata.offset + size;
@@ -587,3 +1153,3 @@
       stopIndex++;
-      offset += getCellMetadata(props, stopIndex, instanceProps).size;
+      offset += getCellMetadata$1(props, stopIndex, instanceProps).size;
     }
@@ -602,3 +1168,3 @@
       cellMetadataMap: {},
-      estimatedCellSize: estimatedCellSize || DEFAULT_ESTIMATED_CELL_SIZE,
+      estimatedCellSize: estimatedCellSize || DEFAULT_ESTIMATED_CELL_SIZE$1,
       lastMeasuredIndex: -1
@@ -626,278 +1192,2 @@ };
 
-var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
-
-function createGridComponent(_ref) {
-  var _class, _temp2;
-
-  var getColumnOffset = _ref.getColumnOffset,
-      getColumnStartIndexForOffset = _ref.getColumnStartIndexForOffset,
-      getColumnStopIndexForStartIndex = _ref.getColumnStopIndexForStartIndex,
-      getColumnWidth = _ref.getColumnWidth,
-      getEstimatedTotalHeight = _ref.getEstimatedTotalHeight,
-      getEstimatedTotalWidth = _ref.getEstimatedTotalWidth,
-      getOffsetForColumnAndAlignment = _ref.getOffsetForColumnAndAlignment,
-      getOffsetForRowAndAlignment = _ref.getOffsetForRowAndAlignment,
-      getRowHeight = _ref.getRowHeight,
-      getRowOffset = _ref.getRowOffset,
-      getRowStartIndexForOffset = _ref.getRowStartIndexForOffset,
-      getRowStopIndexForStartIndex = _ref.getRowStopIndexForStartIndex,
-      validateProps = _ref.validateProps;
-
-  return _temp2 = _class = function (_React$Component) {
-    inherits(List, _React$Component);
-
-    function List() {
-      var _ref2;
-
-      var _temp, _this, _ret;
-
-      classCallCheck(this, List);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref2 = List.__proto__ || Object.getPrototypeOf(List)).call.apply(_ref2, [this].concat(args))), _this), _this._cellStyleCache = {}, _this._resetIsScrollingTimeoutId = null, _this.state = {
-        isScrolling: false,
-        horizontalScrollDirection: 'forward',
-        scrollLeft: 0,
-        scrollTop: 0,
-        verticalScrollDirection: 'forward'
-      }, _this.onScroll = function (event) {
-        var _event$currentTarget = event.currentTarget,
-            scrollLeft = _event$currentTarget.scrollLeft,
-            scrollTop = _event$currentTarget.scrollTop;
-
-        _this.setState(function (prevState) {
-          return {
-            isScrolling: true,
-            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
-            scrollLeft: scrollLeft,
-            scrollTop: scrollTop,
-            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
-          };
-        }, _this.resetIsScrollingDebounced);
-      }, _this.scrollingContainerRef = function (ref) {
-        _this._scrollingContainer = ref;
-      }, _this.resetIsScrollingDebounced = function () {
-        if (_this._resetIsScrollingTimeoutId !== null) {
-          clearTimeout(_this._resetIsScrollingTimeoutId);
-        }
-
-        _this._resetIsScrollingTimeoutId = setTimeout(_this.resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
-      }, _this.resetIsScrolling = function () {
-        _this._resetIsScrollingTimeoutId = null;
-
-        _this.setState({ isScrolling: false }, function () {
-          // Clear style cache after state update has been committed.
-          // This way we don't break pure sCU for cells that don't use isScrolling param.
-          _this._cellStyleCache = {};
-        });
-      }, _temp), possibleConstructorReturn(_this, _ret);
-    }
-
-    createClass(List, [{
-      key: 'scrollTo',
-      value: function scrollTo(_ref3) {
-        var scrollLeft = _ref3.scrollLeft,
-            scrollTop = _ref3.scrollTop;
-
-        if (this._scrollingContainer != null) {
-          this._scrollingContainer.scrollLeft = scrollLeft;
-          this._scrollingContainer.scrollTop = scrollTop;
-        }
-      }
-    }, {
-      key: 'scrollToItem',
-      value: function scrollToItem(_ref4) {
-        var _ref4$align = _ref4.align,
-            align = _ref4$align === undefined ? 'auto' : _ref4$align,
-            columnIndex = _ref4.columnIndex,
-            rowIndex = _ref4.rowIndex;
-        var _state = this.state,
-            scrollLeft = _state.scrollLeft,
-            scrollTop = _state.scrollTop;
-
-
-        this.scrollTo({
-          scrollLeft: getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft),
-          scrollTop: getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop)
-        });
-      }
-    }, {
-      key: 'componnetWillUnmount',
-      value: function componnetWillUnmount() {
-        if (this._resetIsScrollingTimeoutId !== null) {
-          clearTimeout(this._resetIsScrollingTimeoutId);
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            className = _props.className,
-            height = _props.height,
-            style = _props.style,
-            width = _props.width;
-        var isScrolling = this.state.isScrolling;
-
-
-        var estimatedTotalHeight = getEstimatedTotalHeight(this.props);
-        var estimatedTotalWidth = getEstimatedTotalWidth(this.props);
-
-        return React.createElement(
-          'div',
-          {
-            className: className,
-            ref: this.scrollingContainerRef,
-            style: _extends({
-              position: 'relative',
-              height: height,
-              width: width,
-              overflow: 'auto'
-            }, style),
-            onScroll: this.onScroll
-          },
-          React.createElement(
-            'div',
-            {
-              style: {
-                height: estimatedTotalHeight,
-                overflow: 'hidden',
-                pointerEvents: isScrolling ? 'none' : '',
-                width: estimatedTotalWidth
-              }
-            },
-            this.renderCells()
-          )
-        );
-      }
-    }, {
-      key: 'renderCells',
-      value: function renderCells() {
-        var _props2 = this.props,
-            children = _props2.children,
-            useIsScrolling = _props2.useIsScrolling;
-        var isScrolling = this.state.isScrolling;
-
-        var _getHorizontalRangeTo = this.getHorizontalRangeToRender(),
-            _getHorizontalRangeTo2 = slicedToArray(_getHorizontalRangeTo, 2),
-            columnStartIndex = _getHorizontalRangeTo2[0],
-            columnStopIndex = _getHorizontalRangeTo2[1];
-
-        var _getVerticalRangeToRe = this.getVerticalRangeToRender(),
-            _getVerticalRangeToRe2 = slicedToArray(_getVerticalRangeToRe, 2),
-            rowStartIndex = _getVerticalRangeToRe2[0],
-            rowStopIndex = _getVerticalRangeToRe2[1];
-
-        var cells = [];
-
-        for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
-          for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
-            var _key2 = _rowIndex + ':' + _columnIndex;
-
-            // Cache cell styles while scrolling,
-            // So that pure component sCU will prevent re-renders.
-            var _style = void 0;
-            if (this._cellStyleCache.hasOwnProperty(_key2)) {
-              _style = this._cellStyleCache[_key2];
-            } else {
-              this._cellStyleCache[_key2] = _style = {
-                position: 'absolute',
-                left: getColumnOffset(this.props, _columnIndex),
-                top: getRowOffset(this.props, _rowIndex),
-                height: getRowHeight(this.props, _rowIndex),
-                width: getColumnWidth(this.props, _columnIndex)
-              };
-            }
-
-            cells.push(children({
-              columnIndex: _columnIndex,
-              key: _key2,
-              isScrolling: useIsScrolling ? isScrolling : undefined,
-              rowIndex: _rowIndex,
-              style: _style
-            }));
-          }
-        }
-
-        return cells;
-      }
-    }, {
-      key: 'getHorizontalRangeToRender',
-      value: function getHorizontalRangeToRender() {
-        var _props3 = this.props,
-            columnCount = _props3.columnCount,
-            overscanCount = _props3.overscanCount;
-        var _state2 = this.state,
-            horizontalScrollDirection = _state2.horizontalScrollDirection,
-            scrollLeft = _state2.scrollLeft;
-
-
-        var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft);
-        var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex);
-
-        // Overscan by one cell in each direction so that tab/focus works.
-        // If there isn't at least one extra cell, tab loops back around.
-        var overscanBackward = horizontalScrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
-        var overscanForward = horizontalScrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
-
-        return [Math.max(0, startIndex - overscanBackward), Math.min(columnCount - 1, stopIndex + overscanForward)];
-      }
-    }, {
-      key: 'getVerticalRangeToRender',
-      value: function getVerticalRangeToRender() {
-        var _props4 = this.props,
-            columnCount = _props4.columnCount,
-            overscanCount = _props4.overscanCount;
-        var _state3 = this.state,
-            verticalScrollDirection = _state3.verticalScrollDirection,
-            scrollTop = _state3.scrollTop;
-
-
-        var startIndex = getRowStartIndexForOffset(this.props, scrollTop);
-        var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex);
-
-        // Overscan by one cell in each direction so that tab/focus works.
-        // If there isn't at least one extra cell, tab loops back around.
-        var overscanBackward = verticalScrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
-        var overscanForward = verticalScrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
-
-        return [Math.max(0, startIndex - overscanBackward), Math.min(columnCount - 1, stopIndex + overscanForward)];
-      }
-    }], [{
-      key: 'getDerivedStateFromProps',
-      value: function getDerivedStateFromProps(nextProps, prevState) {
-        validateSharedProps$1(nextProps);
-        validateProps(nextProps);
-        return null;
-      }
-    }]);
-    return List;
-  }(React.Component), _class.defaultProps = {
-    overscanCount: 1,
-    useIsScrolling: false
-  }, _temp2;
-}
-
-var validateSharedProps$1 = function validateSharedProps(_ref5) {
-  var children = _ref5.children,
-      height = _ref5.height,
-      width = _ref5.width;
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof children !== 'function') {
-      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a function that creates a React element. ' + ('"' + (children === null ? 'null' : typeof children === 'undefined' ? 'undefined' : _typeof(children)) + '" was specified.'));
-    }
-
-    if (typeof width !== 'number') {
-      throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ('"' + (width === null ? 'null' : typeof width === 'undefined' ? 'undefined' : _typeof(width)) + '" was specified.'));
-    }
-
-    if (typeof height !== 'number') {
-      throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ('"' + (height === null ? 'null' : typeof height === 'undefined' ? 'undefined' : _typeof(height)) + '" was specified.'));
-    }
-  }
-};
-
 var FixedSizeGrid = createGridComponent({
@@ -908,2 +1198,3 @@ getColumnOffset: function getColumnOffset(_ref, index) {
   },
+
   getColumnWidth: function getColumnWidth(_ref2, index) {
@@ -913,2 +1204,3 @@ var columnWidth = _ref2.columnWidth;
   },
+
   getRowOffset: function getRowOffset(_ref3, index) {
@@ -918,2 +1210,3 @@ var rowHeight = _ref3.rowHeight;
   },
+
   getRowHeight: function getRowHeight(_ref4, index) {
@@ -923,2 +1216,3 @@ var rowHeight = _ref4.rowHeight;
   },
+
   getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
@@ -929,2 +1223,3 @@ var rowCount = _ref5.rowCount,
   },
+
   getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
@@ -935,2 +1230,3 @@ var columnCount = _ref6.columnCount,
   },
+
   getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft) {
@@ -961,2 +1257,3 @@ var columnWidth = _ref7.columnWidth,
   },
+
   getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop) {
@@ -987,2 +1284,3 @@ var rowHeight = _ref8.rowHeight,
   },
+
   getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, offset) {
@@ -993,2 +1291,3 @@ var columnWidth = _ref9.columnWidth,
   },
+
   getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex) {
@@ -1001,2 +1300,3 @@ var columnWidth = _ref10.columnWidth,
   },
+
   getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, offset) {
@@ -1007,2 +1307,3 @@ var rowHeight = _ref11.rowHeight,
   },
+
   getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex) {
@@ -1015,2 +1316,8 @@ var rowHeight = _ref12.rowHeight,
   },
+
+  initInstanceProps: function initInstanceProps(props) {
+    // Noop
+  },
+
+
   validateProps: function validateProps(_ref13) {
@@ -1112,4 +1419,5 @@ var columnWidth = _ref13.columnWidth,
 
+exports.DynamicGrid = DynamicGrid;
 exports.DynamicList = DynamicList;
 exports.FixedSizeGrid = FixedSizeGrid;
 exports.FixedSizeList = FixedSizeList;

package.json

 {
   "name": "react-virtualized",
-  "version": "10.0.0-alpha.4",
+  "version": "10.0.0-alpha.5",
   "main": "index.js",
@@ -5,0 +5,0 @@ "module": "index.es.js",

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95347

increased by28.03%

Lines of code

2230

increased by26.35%

Worsened metrics

Number of low supply chain risk alerts

13

increased by18.18%

No dependency changes