@depup/react-virtualized 9.22.6-depup.0

package/dist/commonjs/Grid/Grid.js

@@ -0,0 +1,1432 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DEFAULT_SCROLLING_RESET_TIME_INTERVAL = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _calculateSizeAndPositionDataAndUpdateScrollOffset = _interopRequireDefault(require("./utils/calculateSizeAndPositionDataAndUpdateScrollOffset"));
+var _ScalingCellSizeAndPositionManager = _interopRequireDefault(require("./utils/ScalingCellSizeAndPositionManager"));
+var _createCallbackMemoizer = _interopRequireDefault(require("../utils/createCallbackMemoizer"));
+var _defaultOverscanIndicesGetter = _interopRequireWildcard(require("./defaultOverscanIndicesGetter"));
+var _updateScrollIndexHelper = _interopRequireDefault(require("./utils/updateScrollIndexHelper"));
+var _defaultCellRangeRenderer = _interopRequireDefault(require("./defaultCellRangeRenderer"));
+var _scrollbarSize = _interopRequireDefault(require("dom-helpers/scrollbarSize"));
+var _reactLifecyclesCompat = require("react-lifecycles-compat");
+var _requestAnimationTimeout = require("../utils/requestAnimationTimeout");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*:: import type {
+  CellRenderer,
+  CellRangeRenderer,
+  CellPosition,
+  CellSize,
+  CellSizeGetter,
+  NoContentRenderer,
+  Scroll,
+  ScrollbarPresenceChange,
+  RenderedSection,
+  OverscanIndicesGetter,
+  Alignment,
+  CellCache,
+  StyleCache,
+} from './types';*/ /*:: import type {AnimationTimeoutId} from '../utils/requestAnimationTimeout';*/
+/**
+ * Specifies the number of milliseconds during which to disable pointer events while a scroll is in progress.
+ * This improves performance and makes scrolling smoother.
+ */
+var DEFAULT_SCROLLING_RESET_TIME_INTERVAL = exports.DEFAULT_SCROLLING_RESET_TIME_INTERVAL = 150;
+
+/**
+ * Controls whether the Grid updates the DOM element's scrollLeft/scrollTop based on the current state or just observes it.
+ * This prevents Grid from interrupting mouse-wheel animations (see issue #2).
+ */
+var SCROLL_POSITION_CHANGE_REASONS = {
+  OBSERVED: 'observed',
+  REQUESTED: 'requested'
+};
+var renderNull /*: NoContentRenderer*/ = function renderNull() {
+  return null;
+};
+/*:: type ScrollPosition = {
+  scrollTop?: number,
+  scrollLeft?: number,
+};*/
+/*:: type Props = {
+  'aria-label': string,
+  'aria-readonly'?: boolean,
+
+  /**
+   * Set the width of the inner scrollable container to 'auto'.
+   * This is useful for single-column Grids to ensure that the column doesn't extend below a vertical scrollbar.
+   *-/
+  autoContainerWidth: boolean,
+
+  /**
+   * Removes fixed height from the scrollingContainer so that the total height of rows can stretch the window.
+   * Intended for use with WindowScroller
+   *-/
+  autoHeight: boolean,
+
+  /**
+   * Removes fixed width from the scrollingContainer so that the total width of rows can stretch the window.
+   * Intended for use with WindowScroller
+   *-/
+  autoWidth: boolean,
+
+  /** Responsible for rendering a cell given an row and column index.  *-/
+  cellRenderer: CellRenderer,
+
+  /** Responsible for rendering a group of cells given their index ranges.  *-/
+  cellRangeRenderer: CellRangeRenderer,
+
+  /** Optional custom CSS class name to attach to root Grid element.  *-/
+  className?: string,
+
+  /** Number of columns in grid.  *-/
+  columnCount: number,
+
+  /** Either a fixed column width (number) or a function that returns the width of a column given its index.  *-/
+  columnWidth: CellSize,
+
+  /** Unfiltered props for the Grid container. *-/
+  containerProps?: Object,
+
+  /** ARIA role for the cell-container.  *-/
+  containerRole: string,
+
+  /** Optional inline style applied to inner cell-container *-/
+  containerStyle: Object,
+
+  /**
+   * If CellMeasurer is used to measure this Grid's children, this should be a pointer to its CellMeasurerCache.
+   * A shared CellMeasurerCache reference enables Grid and CellMeasurer to share measurement data.
+   *-/
+  deferredMeasurementCache?: Object,
+
+  /**
+   * Used to estimate the total width of a Grid before all of its columns have actually been measured.
+   * The estimated total width is adjusted as columns are rendered.
+   *-/
+  estimatedColumnSize: number,
+
+  /**
+   * Used to estimate the total height of a Grid before all of its rows have actually been measured.
+   * The estimated total height is adjusted as rows are rendered.
+   *-/
+  estimatedRowSize: number,
+
+  /** Exposed for testing purposes only.  *-/
+  getScrollbarSize: () => number,
+
+  /** Height of Grid; this property determines the number of visible (vs virtualized) rows.  *-/
+  height: number,
+
+  /** Optional custom id to attach to root Grid element.  *-/
+  id?: string,
+
+  /**
+   * Override internal is-scrolling state tracking.
+   * This property is primarily intended for use with the WindowScroller component.
+   *-/
+  isScrolling?: boolean,
+
+  /**
+   * Opt-out of isScrolling param passed to cellRangeRenderer.
+   * To avoid the extra render when scroll stops.
+   *-/
+  isScrollingOptOut: boolean,
+
+  /** Optional renderer to be used in place of rows when either :rowCount or :columnCount is 0.  *-/
+  noContentRenderer: NoContentRenderer,
+
+  /**
+   * Callback invoked whenever the scroll offset changes within the inner scrollable region.
+   * This callback can be used to sync scrolling between lists, tables, or grids.
+   *-/
+  onScroll: (params: Scroll) => void,
+
+  /**
+   * Called whenever a horizontal or vertical scrollbar is added or removed.
+   * This prop is not intended for end-user use;
+   * It is used by MultiGrid to support fixed-row/fixed-column scroll syncing.
+   *-/
+  onScrollbarPresenceChange: (params: ScrollbarPresenceChange) => void,
+
+  /** Callback invoked with information about the section of the Grid that was just rendered.  *-/
+  onSectionRendered: (params: RenderedSection) => void,
+
+  /**
+   * Number of columns to render before/after the visible section of the grid.
+   * These columns can help for smoother scrolling on touch devices or browsers that send scroll events infrequently.
+   *-/
+  overscanColumnCount: number,
+
+  /**
+   * Calculates the number of cells to overscan before and after a specified range.
+   * This function ensures that overscanning doesn't exceed the available cells.
+   *-/
+  overscanIndicesGetter: OverscanIndicesGetter,
+
+  /**
+   * Number of rows to render above/below the visible section of the grid.
+   * These rows can help for smoother scrolling on touch devices or browsers that send scroll events infrequently.
+   *-/
+  overscanRowCount: number,
+
+  /** ARIA role for the grid element.  *-/
+  role: string,
+
+  /**
+   * Either a fixed row height (number) or a function that returns the height of a row given its index.
+   * Should implement the following interface: ({ index: number }): number
+   *-/
+  rowHeight: CellSize,
+
+  /** Number of rows in grid.  *-/
+  rowCount: number,
+
+  /** Wait this amount of time after the last scroll event before resetting Grid `pointer-events`. *-/
+  scrollingResetTimeInterval: number,
+
+  /** Horizontal offset. *-/
+  scrollLeft?: number,
+
+  /**
+   * Controls scroll-to-cell behavior of the Grid.
+   * The default ("auto") scrolls the least amount possible to ensure that the specified cell is fully visible.
+   * Use "start" to align cells to the top/left of the Grid and "end" to align bottom/right.
+   *-/
+  scrollToAlignment: Alignment,
+
+  /** Column index to ensure visible (by forcefully scrolling if necessary) *-/
+  scrollToColumn: number,
+
+  /** Vertical offset. *-/
+  scrollTop?: number,
+
+  /** Row index to ensure visible (by forcefully scrolling if necessary) *-/
+  scrollToRow: number,
+
+  /** Optional inline style *-/
+  style: Object,
+
+  /** Tab index for focus *-/
+  tabIndex: ?number,
+
+  /** Width of Grid; this property determines the number of visible (vs virtualized) columns.  *-/
+  width: number,
+
+  /** Reference to DOM node *-/
+  elementRef?: React.Ref<React.ElementType>,
+};*/
+/*:: type InstanceProps = {
+  prevColumnWidth: CellSize,
+  prevRowHeight: CellSize,
+
+  prevColumnCount: number,
+  prevRowCount: number,
+  prevIsScrolling: boolean,
+  prevScrollToColumn: number,
+  prevScrollToRow: number,
+
+  columnSizeAndPositionManager: ScalingCellSizeAndPositionManager,
+  rowSizeAndPositionManager: ScalingCellSizeAndPositionManager,
+
+  scrollbarSize: number,
+  scrollbarSizeMeasured: boolean,
+};*/
+/*:: type State = {
+  instanceProps: InstanceProps,
+  isScrolling: boolean,
+  scrollDirectionHorizontal: -1 | 1,
+  scrollDirectionVertical: -1 | 1,
+  scrollLeft: number,
+  scrollTop: number,
+  scrollPositionChangeReason: 'observed' | 'requested' | null,
+  needToResetStyleCache: boolean,
+};*/
+/**
+ * Renders tabular data with virtualization along the vertical and horizontal axes.
+ * Row heights and column widths must be known ahead of time and specified as properties.
+ */
+var Grid = /*#__PURE__*/function (_React$PureComponent) {
+  function Grid(props /*: Props*/) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Grid);
+    _this = _callSuper(this, Grid, [props]);
+    // Invokes onSectionRendered callback only when start/stop row or column indices change
+    (0, _defineProperty2["default"])(_this, "_onGridRenderedMemoizer", (0, _createCallbackMemoizer["default"])());
+    (0, _defineProperty2["default"])(_this, "_onScrollMemoizer", (0, _createCallbackMemoizer["default"])(false));
+    (0, _defineProperty2["default"])(_this, "_deferredInvalidateColumnIndex", null);
+    (0, _defineProperty2["default"])(_this, "_deferredInvalidateRowIndex", null);
+    (0, _defineProperty2["default"])(_this, "_recomputeScrollLeftFlag", false);
+    (0, _defineProperty2["default"])(_this, "_recomputeScrollTopFlag", false);
+    (0, _defineProperty2["default"])(_this, "_horizontalScrollBarSize", 0);
+    (0, _defineProperty2["default"])(_this, "_verticalScrollBarSize", 0);
+    (0, _defineProperty2["default"])(_this, "_scrollbarPresenceChanged", false);
+    (0, _defineProperty2["default"])(_this, "_scrollingContainer", void 0);
+    (0, _defineProperty2["default"])(_this, "_childrenToDisplay", void 0);
+    (0, _defineProperty2["default"])(_this, "_columnStartIndex", void 0);
+    (0, _defineProperty2["default"])(_this, "_columnStopIndex", void 0);
+    (0, _defineProperty2["default"])(_this, "_rowStartIndex", void 0);
+    (0, _defineProperty2["default"])(_this, "_rowStopIndex", void 0);
+    (0, _defineProperty2["default"])(_this, "_renderedColumnStartIndex", 0);
+    (0, _defineProperty2["default"])(_this, "_renderedColumnStopIndex", 0);
+    (0, _defineProperty2["default"])(_this, "_renderedRowStartIndex", 0);
+    (0, _defineProperty2["default"])(_this, "_renderedRowStopIndex", 0);
+    (0, _defineProperty2["default"])(_this, "_initialScrollTop", void 0);
+    (0, _defineProperty2["default"])(_this, "_initialScrollLeft", void 0);
+    (0, _defineProperty2["default"])(_this, "_disablePointerEventsTimeoutId", void 0);
+    (0, _defineProperty2["default"])(_this, "_styleCache", {});
+    (0, _defineProperty2["default"])(_this, "_cellCache", {});
+    (0, _defineProperty2["default"])(_this, "_debounceScrollEndedCallback", function () {
+      _this._disablePointerEventsTimeoutId = null;
+      // isScrolling is used to determine if we reset styleCache
+      _this.setState({
+        isScrolling: false,
+        needToResetStyleCache: false
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "_invokeOnGridRenderedHelper", function () {
+      var onSectionRendered = _this.props.onSectionRendered;
+      _this._onGridRenderedMemoizer({
+        callback: onSectionRendered,
+        indices: {
+          columnOverscanStartIndex: _this._columnStartIndex,
+          columnOverscanStopIndex: _this._columnStopIndex,
+          columnStartIndex: _this._renderedColumnStartIndex,
+          columnStopIndex: _this._renderedColumnStopIndex,
+          rowOverscanStartIndex: _this._rowStartIndex,
+          rowOverscanStopIndex: _this._rowStopIndex,
+          rowStartIndex: _this._renderedRowStartIndex,
+          rowStopIndex: _this._renderedRowStopIndex
+        }
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "_setScrollingContainerRef", function (ref /*: Element*/) {
+      _this._scrollingContainer = ref;
+      if (typeof _this.props.elementRef === 'function') {
+        _this.props.elementRef(ref);
+      } else if ((0, _typeof2["default"])(_this.props.elementRef) === 'object') {
+        _this.props.elementRef.current = ref;
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "_onScroll", function (event /*: Event*/) {
+      // In certain edge-cases React dispatches an onScroll event with an invalid target.scrollLeft / target.scrollTop.
+      // This invalid event can be detected by comparing event.target to this component's scrollable DOM element.
+      // See issue #404 for more information.
+      if (event.target === _this._scrollingContainer) {
+        _this.handleScrollEvent((event.target /*: any*/));
+      }
+    });
+    var columnSizeAndPositionManager = new _ScalingCellSizeAndPositionManager["default"]({
+      cellCount: props.columnCount,
+      cellSizeGetter: function cellSizeGetter(params) {
+        return Grid._wrapSizeGetter(props.columnWidth)(params);
+      },
+      estimatedCellSize: Grid._getEstimatedColumnSize(props)
+    });
+    var rowSizeAndPositionManager = new _ScalingCellSizeAndPositionManager["default"]({
+      cellCount: props.rowCount,
+      cellSizeGetter: function cellSizeGetter(params) {
+        return Grid._wrapSizeGetter(props.rowHeight)(params);
+      },
+      estimatedCellSize: Grid._getEstimatedRowSize(props)
+    });
+    _this.state = {
+      instanceProps: {
+        columnSizeAndPositionManager: columnSizeAndPositionManager,
+        rowSizeAndPositionManager: rowSizeAndPositionManager,
+        prevColumnWidth: props.columnWidth,
+        prevRowHeight: props.rowHeight,
+        prevColumnCount: props.columnCount,
+        prevRowCount: props.rowCount,
+        prevIsScrolling: props.isScrolling === true,
+        prevScrollToColumn: props.scrollToColumn,
+        prevScrollToRow: props.scrollToRow,
+        scrollbarSize: 0,
+        scrollbarSizeMeasured: false
+      },
+      isScrolling: false,
+      scrollDirectionHorizontal: _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD,
+      scrollDirectionVertical: _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD,
+      scrollLeft: 0,
+      scrollTop: 0,
+      scrollPositionChangeReason: null,
+      needToResetStyleCache: false
+    };
+    if (props.scrollToRow > 0) {
+      _this._initialScrollTop = _this._getCalculatedScrollTop(props, _this.state);
+    }
+    if (props.scrollToColumn > 0) {
+      _this._initialScrollLeft = _this._getCalculatedScrollLeft(props, _this.state);
+    }
+    return _this;
+  }
+
+  /**
+   * Gets offsets for a given cell and alignment.
+   */
+  (0, _inherits2["default"])(Grid, _React$PureComponent);
+  return (0, _createClass2["default"])(Grid, [{
+    key: "getOffsetForCell",
+    value: function getOffsetForCell() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref$alignment = _ref.alignment,
+        alignment = _ref$alignment === void 0 ? this.props.scrollToAlignment : _ref$alignment,
+        _ref$columnIndex = _ref.columnIndex,
+        columnIndex = _ref$columnIndex === void 0 ? this.props.scrollToColumn : _ref$columnIndex,
+        _ref$rowIndex = _ref.rowIndex,
+        rowIndex = _ref$rowIndex === void 0 ? this.props.scrollToRow : _ref$rowIndex;
+      var offsetProps = _objectSpread(_objectSpread({}, this.props), {}, {
+        scrollToAlignment: alignment,
+        scrollToColumn: columnIndex,
+        scrollToRow: rowIndex
+      });
+      return {
+        scrollLeft: this._getCalculatedScrollLeft(offsetProps),
+        scrollTop: this._getCalculatedScrollTop(offsetProps)
+      };
+    }
+
+    /**
+     * Gets estimated total rows' height.
+     */
+  }, {
+    key: "getTotalRowsHeight",
+    value: function getTotalRowsHeight() {
+      return this.state.instanceProps.rowSizeAndPositionManager.getTotalSize();
+    }
+
+    /**
+     * Gets estimated total columns' width.
+     */
+  }, {
+    key: "getTotalColumnsWidth",
+    value: function getTotalColumnsWidth() {
+      return this.state.instanceProps.columnSizeAndPositionManager.getTotalSize();
+    }
+
+    /**
+     * This method handles a scroll event originating from an external scroll control.
+     * It's an advanced method and should probably not be used unless you're implementing a custom scroll-bar solution.
+     */
+  }, {
+    key: "handleScrollEvent",
+    value: function handleScrollEvent(_ref2 /*:: */) {
+      var _ref2$scrollLeft = _ref2 /*:: */.scrollLeft,
+        scrollLeftParam = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
+        _ref2$scrollTop = _ref2 /*:: */.scrollTop,
+        scrollTopParam = _ref2$scrollTop === void 0 ? 0 : _ref2$scrollTop;
+      // On iOS, we can arrive at negative offsets by swiping past the start.
+      // To prevent flicker here, we make playing in the negative offset zone cause nothing to happen.
+      if (scrollTopParam < 0) {
+        return;
+      }
+
+      // Prevent pointer events from interrupting a smooth scroll
+      this._debounceScrollEnded();
+      var _this$props = this.props,
+        autoHeight = _this$props.autoHeight,
+        autoWidth = _this$props.autoWidth,
+        height = _this$props.height,
+        width = _this$props.width;
+      var instanceProps = this.state.instanceProps;
+
+      // When this component is shrunk drastically, React dispatches a series of back-to-back scroll events,
+      // Gradually converging on a scrollTop that is within the bounds of the new, smaller height.
+      // This causes a series of rapid renders that is slow for long lists.
+      // We can avoid that by doing some simple bounds checking to ensure that scroll offsets never exceed their bounds.
+      var scrollbarSize = instanceProps.scrollbarSize;
+      var totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize();
+      var totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize();
+      var scrollLeft = Math.min(Math.max(0, totalColumnsWidth - width + scrollbarSize), scrollLeftParam);
+      var scrollTop = Math.min(Math.max(0, totalRowsHeight - height + scrollbarSize), scrollTopParam);
+
+      // Certain devices (like Apple touchpad) rapid-fire duplicate events.
+      // Don't force a re-render if this is the case.
+      // The mouse may move faster then the animation frame does.
+      // Use requestAnimationFrame to avoid over-updating.
+      if (this.state.scrollLeft !== scrollLeft || this.state.scrollTop !== scrollTop) {
+        // Track scrolling direction so we can more efficiently overscan rows to reduce empty space around the edges while scrolling.
+        // Don't change direction for an axis unless scroll offset has changed.
+        var scrollDirectionHorizontal = scrollLeft !== this.state.scrollLeft ? scrollLeft > this.state.scrollLeft ? _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD : _defaultOverscanIndicesGetter.SCROLL_DIRECTION_BACKWARD : this.state.scrollDirectionHorizontal;
+        var scrollDirectionVertical = scrollTop !== this.state.scrollTop ? scrollTop > this.state.scrollTop ? _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD : _defaultOverscanIndicesGetter.SCROLL_DIRECTION_BACKWARD : this.state.scrollDirectionVertical;
+        var newState /*: $Shape<State>*/ = {
+          isScrolling: true,
+          scrollDirectionHorizontal: scrollDirectionHorizontal,
+          scrollDirectionVertical: scrollDirectionVertical,
+          scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.OBSERVED
+        };
+        if (!autoHeight) {
+          newState.scrollTop = scrollTop;
+        }
+        if (!autoWidth) {
+          newState.scrollLeft = scrollLeft;
+        }
+        newState.needToResetStyleCache = false;
+        this.setState(newState);
+      }
+      this._invokeOnScrollMemoizer({
+        scrollLeft: scrollLeft,
+        scrollTop: scrollTop,
+        totalColumnsWidth: totalColumnsWidth,
+        totalRowsHeight: totalRowsHeight
+      });
+    }
+
+    /**
+     * Invalidate Grid size and recompute visible cells.
+     * This is a deferred wrapper for recomputeGridSize().
+     * It sets a flag to be evaluated on cDM/cDU to avoid unnecessary renders.
+     * This method is intended for advanced use-cases like CellMeasurer.
+     */
+    // @TODO (bvaughn) Add automated test coverage for this.
+  }, {
+    key: "invalidateCellSizeAfterRender",
+    value: function invalidateCellSizeAfterRender(_ref3 /*:: */) {
+      var columnIndex = _ref3 /*:: */.columnIndex,
+        rowIndex = _ref3 /*:: */.rowIndex;
+      this._deferredInvalidateColumnIndex = typeof this._deferredInvalidateColumnIndex === 'number' ? Math.min(this._deferredInvalidateColumnIndex, columnIndex) : columnIndex;
+      this._deferredInvalidateRowIndex = typeof this._deferredInvalidateRowIndex === 'number' ? Math.min(this._deferredInvalidateRowIndex, rowIndex) : rowIndex;
+    }
+
+    /**
+     * Pre-measure all columns and rows in a Grid.
+     * Typically cells are only measured as needed and estimated sizes are used for cells that have not yet been measured.
+     * This method ensures that the next call to getTotalSize() returns an exact size (as opposed to just an estimated one).
+     */
+  }, {
+    key: "measureAllCells",
+    value: function measureAllCells() {
+      var _this$props2 = this.props,
+        columnCount = _this$props2.columnCount,
+        rowCount = _this$props2.rowCount;
+      var instanceProps = this.state.instanceProps;
+      instanceProps.columnSizeAndPositionManager.getSizeAndPositionOfCell(columnCount - 1);
+      instanceProps.rowSizeAndPositionManager.getSizeAndPositionOfCell(rowCount - 1);
+    }
+
+    /**
+     * Forced recompute of row heights and column widths.
+     * This function should be called if dynamic column or row sizes have changed but nothing else has.
+     * Since Grid only receives :columnCount and :rowCount it has no way of detecting when the underlying data changes.
+     */
+  }, {
+    key: "recomputeGridSize",
+    value: function recomputeGridSize() {
+      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref4$columnIndex = _ref4.columnIndex,
+        columnIndex = _ref4$columnIndex === void 0 ? 0 : _ref4$columnIndex,
+        _ref4$rowIndex = _ref4.rowIndex,
+        rowIndex = _ref4$rowIndex === void 0 ? 0 : _ref4$rowIndex;
+      var _this$props3 = this.props,
+        scrollToColumn = _this$props3.scrollToColumn,
+        scrollToRow = _this$props3.scrollToRow;
+      var instanceProps = this.state.instanceProps;
+      instanceProps.columnSizeAndPositionManager.resetCell(columnIndex);
+      instanceProps.rowSizeAndPositionManager.resetCell(rowIndex);
+
+      // Cell sizes may be determined by a function property.
+      // In this case the cDU handler can't know if they changed.
+      // Store this flag to let the next cDU pass know it needs to recompute the scroll offset.
+      this._recomputeScrollLeftFlag = scrollToColumn >= 0 && (this.state.scrollDirectionHorizontal === _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD ? columnIndex <= scrollToColumn : columnIndex >= scrollToColumn);
+      this._recomputeScrollTopFlag = scrollToRow >= 0 && (this.state.scrollDirectionVertical === _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD ? rowIndex <= scrollToRow : rowIndex >= scrollToRow);
+
+      // Clear cell cache in case we are scrolling;
+      // Invalid row heights likely mean invalid cached content as well.
+      this._styleCache = {};
+      this._cellCache = {};
+      this.forceUpdate();
+    }
+
+    /**
+     * Ensure column and row are visible.
+     */
+  }, {
+    key: "scrollToCell",
+    value: function scrollToCell(_ref5 /*:: */) {
+      var columnIndex = _ref5 /*:: */.columnIndex,
+        rowIndex = _ref5 /*:: */.rowIndex;
+      var columnCount = this.props.columnCount;
+      var props = this.props;
+
+      // Don't adjust scroll offset for single-column grids (eg List, Table).
+      // This can cause a funky scroll offset because of the vertical scrollbar width.
+      if (columnCount > 1 && columnIndex !== undefined) {
+        this._updateScrollLeftForScrollToColumn(_objectSpread(_objectSpread({}, props), {}, {
+          scrollToColumn: columnIndex
+        }));
+      }
+      if (rowIndex !== undefined) {
+        this._updateScrollTopForScrollToRow(_objectSpread(_objectSpread({}, props), {}, {
+          scrollToRow: rowIndex
+        }));
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props4 = this.props,
+        getScrollbarSize = _this$props4.getScrollbarSize,
+        height = _this$props4.height,
+        scrollLeft = _this$props4.scrollLeft,
+        scrollToColumn = _this$props4.scrollToColumn,
+        scrollTop = _this$props4.scrollTop,
+        scrollToRow = _this$props4.scrollToRow,
+        width = _this$props4.width;
+      var instanceProps = this.state.instanceProps;
+
+      // Reset initial offsets to be ignored in browser
+      this._initialScrollTop = 0;
+      this._initialScrollLeft = 0;
+
+      // If cell sizes have been invalidated (eg we are using CellMeasurer) then reset cached positions.
+      // We must do this at the start of the method as we may calculate and update scroll position below.
+      this._handleInvalidatedGridSize();
+
+      // If this component was first rendered server-side, scrollbar size will be undefined.
+      // In that event we need to remeasure.
+      if (!instanceProps.scrollbarSizeMeasured) {
+        this.setState(function (prevState) {
+          var stateUpdate = _objectSpread(_objectSpread({}, prevState), {}, {
+            needToResetStyleCache: false
+          });
+          stateUpdate.instanceProps.scrollbarSize = getScrollbarSize();
+          stateUpdate.instanceProps.scrollbarSizeMeasured = true;
+          return stateUpdate;
+        });
+      }
+      if (typeof scrollLeft === 'number' && scrollLeft >= 0 || typeof scrollTop === 'number' && scrollTop >= 0) {
+        var stateUpdate = Grid._getScrollToPositionStateUpdate({
+          prevState: this.state,
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop
+        });
+        if (stateUpdate) {
+          stateUpdate.needToResetStyleCache = false;
+          this.setState(stateUpdate);
+        }
+      }
+
+      // refs don't work in `react-test-renderer`
+      if (this._scrollingContainer) {
+        // setting the ref's scrollLeft and scrollTop.
+        // Somehow in MultiGrid the main grid doesn't trigger a update on mount.
+        if (this._scrollingContainer.scrollLeft !== this.state.scrollLeft) {
+          this._scrollingContainer.scrollLeft = this.state.scrollLeft;
+        }
+        if (this._scrollingContainer.scrollTop !== this.state.scrollTop) {
+          this._scrollingContainer.scrollTop = this.state.scrollTop;
+        }
+      }
+
+      // Don't update scroll offset if the size is 0; we don't render any cells in this case.
+      // Setting a state may cause us to later thing we've updated the offce when we haven't.
+      var sizeIsBiggerThanZero = height > 0 && width > 0;
+      if (scrollToColumn >= 0 && sizeIsBiggerThanZero) {
+        this._updateScrollLeftForScrollToColumn();
+      }
+      if (scrollToRow >= 0 && sizeIsBiggerThanZero) {
+        this._updateScrollTopForScrollToRow();
+      }
+
+      // Update onRowsRendered callback
+      this._invokeOnGridRenderedHelper();
+
+      // Initialize onScroll callback
+      this._invokeOnScrollMemoizer({
+        scrollLeft: scrollLeft || 0,
+        scrollTop: scrollTop || 0,
+        totalColumnsWidth: instanceProps.columnSizeAndPositionManager.getTotalSize(),
+        totalRowsHeight: instanceProps.rowSizeAndPositionManager.getTotalSize()
+      });
+      this._maybeCallOnScrollbarPresenceChange();
+    }
+
+    /**
+     * @private
+     * This method updates scrollLeft/scrollTop in state for the following conditions:
+     * 1) New scroll-to-cell props have been set
+     */
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps /*: Props*/, prevState /*: State*/) {
+      var _this2 = this;
+      var _this$props5 = this.props,
+        autoHeight = _this$props5.autoHeight,
+        autoWidth = _this$props5.autoWidth,
+        columnCount = _this$props5.columnCount,
+        height = _this$props5.height,
+        rowCount = _this$props5.rowCount,
+        scrollToAlignment = _this$props5.scrollToAlignment,
+        scrollToColumn = _this$props5.scrollToColumn,
+        scrollToRow = _this$props5.scrollToRow,
+        width = _this$props5.width;
+      var _this$state = this.state,
+        scrollLeft = _this$state.scrollLeft,
+        scrollPositionChangeReason = _this$state.scrollPositionChangeReason,
+        scrollTop = _this$state.scrollTop,
+        instanceProps = _this$state.instanceProps;
+      // If cell sizes have been invalidated (eg we are using CellMeasurer) then reset cached positions.
+      // We must do this at the start of the method as we may calculate and update scroll position below.
+      this._handleInvalidatedGridSize();
+
+      // Handle edge case where column or row count has only just increased over 0.
+      // In this case we may have to restore a previously-specified scroll offset.
+      // For more info see bvaughn/react-virtualized/issues/218
+      var columnOrRowCountJustIncreasedFromZero = columnCount > 0 && prevProps.columnCount === 0 || rowCount > 0 && prevProps.rowCount === 0;
+
+      // Make sure requested changes to :scrollLeft or :scrollTop get applied.
+      // Assigning to scrollLeft/scrollTop tells the browser to interrupt any running scroll animations,
+      // And to discard any pending async changes to the scroll position that may have happened in the meantime (e.g. on a separate scrolling thread).
+      // So we only set these when we require an adjustment of the scroll position.
+      // See issue #2 for more information.
+      if (scrollPositionChangeReason === SCROLL_POSITION_CHANGE_REASONS.REQUESTED) {
+        // @TRICKY :autoHeight and :autoWidth properties instructs Grid to leave :scrollTop and :scrollLeft management to an external HOC (eg WindowScroller).
+        // In this case we should avoid checking scrollingContainer.scrollTop and scrollingContainer.scrollLeft since it forces layout/flow.
+        if (!autoWidth && scrollLeft >= 0 && (scrollLeft !== this._scrollingContainer.scrollLeft || columnOrRowCountJustIncreasedFromZero)) {
+          this._scrollingContainer.scrollLeft = scrollLeft;
+        }
+        if (!autoHeight && scrollTop >= 0 && (scrollTop !== this._scrollingContainer.scrollTop || columnOrRowCountJustIncreasedFromZero)) {
+          this._scrollingContainer.scrollTop = scrollTop;
+        }
+      }
+
+      // Special case where the previous size was 0:
+      // In this case we don't show any windowed cells at all.
+      // So we should always recalculate offset afterwards.
+      var sizeJustIncreasedFromZero = (prevProps.width === 0 || prevProps.height === 0) && height > 0 && width > 0;
+
+      // Update scroll offsets if the current :scrollToColumn or :scrollToRow values requires it
+      // @TODO Do we also need this check or can the one in componentWillUpdate() suffice?
+      if (this._recomputeScrollLeftFlag) {
+        this._recomputeScrollLeftFlag = false;
+        this._updateScrollLeftForScrollToColumn(this.props);
+      } else {
+        (0, _updateScrollIndexHelper["default"])({
+          cellSizeAndPositionManager: instanceProps.columnSizeAndPositionManager,
+          previousCellsCount: prevProps.columnCount,
+          previousCellSize: prevProps.columnWidth,
+          previousScrollToAlignment: prevProps.scrollToAlignment,
+          previousScrollToIndex: prevProps.scrollToColumn,
+          previousSize: prevProps.width,
+          scrollOffset: scrollLeft,
+          scrollToAlignment: scrollToAlignment,
+          scrollToIndex: scrollToColumn,
+          size: width,
+          sizeJustIncreasedFromZero: sizeJustIncreasedFromZero,
+          updateScrollIndexCallback: function updateScrollIndexCallback() {
+            return _this2._updateScrollLeftForScrollToColumn(_this2.props);
+          }
+        });
+      }
+      if (this._recomputeScrollTopFlag) {
+        this._recomputeScrollTopFlag = false;
+        this._updateScrollTopForScrollToRow(this.props);
+      } else {
+        (0, _updateScrollIndexHelper["default"])({
+          cellSizeAndPositionManager: instanceProps.rowSizeAndPositionManager,
+          previousCellsCount: prevProps.rowCount,
+          previousCellSize: prevProps.rowHeight,
+          previousScrollToAlignment: prevProps.scrollToAlignment,
+          previousScrollToIndex: prevProps.scrollToRow,
+          previousSize: prevProps.height,
+          scrollOffset: scrollTop,
+          scrollToAlignment: scrollToAlignment,
+          scrollToIndex: scrollToRow,
+          size: height,
+          sizeJustIncreasedFromZero: sizeJustIncreasedFromZero,
+          updateScrollIndexCallback: function updateScrollIndexCallback() {
+            return _this2._updateScrollTopForScrollToRow(_this2.props);
+          }
+        });
+      }
+
+      // Update onRowsRendered callback if start/stop indices have changed
+      this._invokeOnGridRenderedHelper();
+
+      // Changes to :scrollLeft or :scrollTop should also notify :onScroll listeners
+      if (scrollLeft !== prevState.scrollLeft || scrollTop !== prevState.scrollTop) {
+        var totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize();
+        var totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize();
+        this._invokeOnScrollMemoizer({
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          totalColumnsWidth: totalColumnsWidth,
+          totalRowsHeight: totalRowsHeight
+        });
+      }
+      this._maybeCallOnScrollbarPresenceChange();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._disablePointerEventsTimeoutId) {
+        (0, _requestAnimationTimeout.cancelAnimationTimeout)(this._disablePointerEventsTimeoutId);
+      }
+    }
+
+    /**
+     * This method updates scrollLeft/scrollTop in state for the following conditions:
+     * 1) Empty content (0 rows or columns)
+     * 2) New scroll props overriding the current state
+     * 3) Cells-count or cells-size has changed, making previous scroll offsets invalid
+     */
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props6 = this.props,
+        autoContainerWidth = _this$props6.autoContainerWidth,
+        autoHeight = _this$props6.autoHeight,
+        autoWidth = _this$props6.autoWidth,
+        className = _this$props6.className,
+        containerProps = _this$props6.containerProps,
+        containerRole = _this$props6.containerRole,
+        containerStyle = _this$props6.containerStyle,
+        height = _this$props6.height,
+        id = _this$props6.id,
+        noContentRenderer = _this$props6.noContentRenderer,
+        role = _this$props6.role,
+        style = _this$props6.style,
+        tabIndex = _this$props6.tabIndex,
+        width = _this$props6.width;
+      var _this$state2 = this.state,
+        instanceProps = _this$state2.instanceProps,
+        needToResetStyleCache = _this$state2.needToResetStyleCache;
+      var isScrolling = this._isScrolling();
+      var gridStyle /*: Object*/ = {
+        boxSizing: 'border-box',
+        direction: 'ltr',
+        height: autoHeight ? 'auto' : height,
+        position: 'relative',
+        width: autoWidth ? 'auto' : width,
+        WebkitOverflowScrolling: 'touch',
+        willChange: 'transform'
+      };
+      if (needToResetStyleCache) {
+        this._styleCache = {};
+      }
+
+      // calculate _styleCache here
+      // if state.isScrolling (not from _isScrolling) then reset
+      if (!this.state.isScrolling) {
+        this._resetStyleCache();
+      }
+
+      // calculate children to render here
+      this._calculateChildrenToRender(this.props, this.state);
+      var totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize();
+      var totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize();
+
+      // Force browser to hide scrollbars when we know they aren't necessary.
+      // Otherwise once scrollbars appear they may not disappear again.
+      // For more info see issue #116
+      var verticalScrollBarSize = totalRowsHeight > height ? instanceProps.scrollbarSize : 0;
+      var horizontalScrollBarSize = totalColumnsWidth > width ? instanceProps.scrollbarSize : 0;
+      if (horizontalScrollBarSize !== this._horizontalScrollBarSize || verticalScrollBarSize !== this._verticalScrollBarSize) {
+        this._horizontalScrollBarSize = horizontalScrollBarSize;
+        this._verticalScrollBarSize = verticalScrollBarSize;
+        this._scrollbarPresenceChanged = true;
+      }
+
+      // Also explicitly init styles to 'auto' if scrollbars are required.
+      // This works around an obscure edge case where external CSS styles have not yet been loaded,
+      // But an initial scroll index of offset is set as an external prop.
+      // Without this style, Grid would render the correct range of cells but would NOT update its internal offset.
+      // This was originally reported via clauderic/react-infinite-calendar/issues/23
+      gridStyle.overflowX = totalColumnsWidth + verticalScrollBarSize <= width ? 'hidden' : 'auto';
+      gridStyle.overflowY = totalRowsHeight + horizontalScrollBarSize <= height ? 'hidden' : 'auto';
+      var childrenToDisplay = this._childrenToDisplay;
+      var showNoContentRenderer = childrenToDisplay.length === 0 && height > 0 && width > 0;
+      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+        ref: this._setScrollingContainerRef
+      }, containerProps, {
+        "aria-label": this.props['aria-label'],
+        "aria-readonly": this.props['aria-readonly'],
+        className: (0, _clsx["default"])('ReactVirtualized__Grid', className),
+        id: id,
+        onScroll: this._onScroll,
+        role: role,
+        style: _objectSpread(_objectSpread({}, gridStyle), style),
+        tabIndex: tabIndex
+      }), childrenToDisplay.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "ReactVirtualized__Grid__innerScrollContainer",
+        role: containerRole,
+        style: _objectSpread({
+          width: autoContainerWidth ? 'auto' : totalColumnsWidth,
+          height: totalRowsHeight,
+          maxWidth: totalColumnsWidth,
+          maxHeight: totalRowsHeight,
+          overflow: 'hidden',
+          pointerEvents: isScrolling ? 'none' : '',
+          position: 'relative'
+        }, containerStyle)
+      }, childrenToDisplay), showNoContentRenderer && noContentRenderer());
+    }
+
+    /* ---------------------------- Helper methods ---------------------------- */
+  }, {
+    key: "_calculateChildrenToRender",
+    value: function _calculateChildrenToRender() {
+      var props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
+      var state /*: State*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state;
+      var cellRenderer = props.cellRenderer,
+        cellRangeRenderer = props.cellRangeRenderer,
+        columnCount = props.columnCount,
+        deferredMeasurementCache = props.deferredMeasurementCache,
+        height = props.height,
+        overscanColumnCount = props.overscanColumnCount,
+        overscanIndicesGetter = props.overscanIndicesGetter,
+        overscanRowCount = props.overscanRowCount,
+        rowCount = props.rowCount,
+        width = props.width,
+        isScrollingOptOut = props.isScrollingOptOut;
+      var scrollDirectionHorizontal = state.scrollDirectionHorizontal,
+        scrollDirectionVertical = state.scrollDirectionVertical,
+        instanceProps = state.instanceProps;
+      var scrollTop = this._initialScrollTop > 0 ? this._initialScrollTop : state.scrollTop;
+      var scrollLeft = this._initialScrollLeft > 0 ? this._initialScrollLeft : state.scrollLeft;
+      var isScrolling = this._isScrolling(props, state);
+      this._childrenToDisplay = [];
+
+      // Render only enough columns and rows to cover the visible area of the grid.
+      if (height > 0 && width > 0) {
+        var visibleColumnIndices = instanceProps.columnSizeAndPositionManager.getVisibleCellRange({
+          containerSize: width,
+          offset: scrollLeft
+        });
+        var visibleRowIndices = instanceProps.rowSizeAndPositionManager.getVisibleCellRange({
+          containerSize: height,
+          offset: scrollTop
+        });
+        var horizontalOffsetAdjustment = instanceProps.columnSizeAndPositionManager.getOffsetAdjustment({
+          containerSize: width,
+          offset: scrollLeft
+        });
+        var verticalOffsetAdjustment = instanceProps.rowSizeAndPositionManager.getOffsetAdjustment({
+          containerSize: height,
+          offset: scrollTop
+        });
+
+        // Store for _invokeOnGridRenderedHelper()
+        this._renderedColumnStartIndex = visibleColumnIndices.start;
+        this._renderedColumnStopIndex = visibleColumnIndices.stop;
+        this._renderedRowStartIndex = visibleRowIndices.start;
+        this._renderedRowStopIndex = visibleRowIndices.stop;
+        var overscanColumnIndices = overscanIndicesGetter({
+          direction: 'horizontal',
+          cellCount: columnCount,
+          overscanCellsCount: overscanColumnCount,
+          scrollDirection: scrollDirectionHorizontal,
+          startIndex: typeof visibleColumnIndices.start === 'number' ? visibleColumnIndices.start : 0,
+          stopIndex: typeof visibleColumnIndices.stop === 'number' ? visibleColumnIndices.stop : -1
+        });
+        var overscanRowIndices = overscanIndicesGetter({
+          direction: 'vertical',
+          cellCount: rowCount,
+          overscanCellsCount: overscanRowCount,
+          scrollDirection: scrollDirectionVertical,
+          startIndex: typeof visibleRowIndices.start === 'number' ? visibleRowIndices.start : 0,
+          stopIndex: typeof visibleRowIndices.stop === 'number' ? visibleRowIndices.stop : -1
+        });
+
+        // Store for _invokeOnGridRenderedHelper()
+        var columnStartIndex = overscanColumnIndices.overscanStartIndex;
+        var columnStopIndex = overscanColumnIndices.overscanStopIndex;
+        var rowStartIndex = overscanRowIndices.overscanStartIndex;
+        var rowStopIndex = overscanRowIndices.overscanStopIndex;
+
+        // Advanced use-cases (eg CellMeasurer) require batched measurements to determine accurate sizes.
+        if (deferredMeasurementCache) {
+          // If rows have a dynamic height, scan the rows we are about to render.
+          // If any have not yet been measured, then we need to render all columns initially,
+          // Because the height of the row is equal to the tallest cell within that row,
+          // (And so we can't know the height without measuring all column-cells first).
+          if (!deferredMeasurementCache.hasFixedHeight()) {
+            for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
+              if (!deferredMeasurementCache.has(rowIndex, 0)) {
+                columnStartIndex = 0;
+                columnStopIndex = columnCount - 1;
+                break;
+              }
+            }
+          }
+
+          // If columns have a dynamic width, scan the columns we are about to render.
+          // If any have not yet been measured, then we need to render all rows initially,
+          // Because the width of the column is equal to the widest cell within that column,
+          // (And so we can't know the width without measuring all row-cells first).
+          if (!deferredMeasurementCache.hasFixedWidth()) {
+            for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+              if (!deferredMeasurementCache.has(0, columnIndex)) {
+                rowStartIndex = 0;
+                rowStopIndex = rowCount - 1;
+                break;
+              }
+            }
+          }
+        }
+        this._childrenToDisplay = cellRangeRenderer({
+          cellCache: this._cellCache,
+          cellRenderer: cellRenderer,
+          columnSizeAndPositionManager: instanceProps.columnSizeAndPositionManager,
+          columnStartIndex: columnStartIndex,
+          columnStopIndex: columnStopIndex,
+          deferredMeasurementCache: deferredMeasurementCache,
+          horizontalOffsetAdjustment: horizontalOffsetAdjustment,
+          isScrolling: isScrolling,
+          isScrollingOptOut: isScrollingOptOut,
+          parent: this,
+          rowSizeAndPositionManager: instanceProps.rowSizeAndPositionManager,
+          rowStartIndex: rowStartIndex,
+          rowStopIndex: rowStopIndex,
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          styleCache: this._styleCache,
+          verticalOffsetAdjustment: verticalOffsetAdjustment,
+          visibleColumnIndices: visibleColumnIndices,
+          visibleRowIndices: visibleRowIndices
+        });
+
+        // update the indices
+        this._columnStartIndex = columnStartIndex;
+        this._columnStopIndex = columnStopIndex;
+        this._rowStartIndex = rowStartIndex;
+        this._rowStopIndex = rowStopIndex;
+      }
+    }
+
+    /**
+     * Sets an :isScrolling flag for a small window of time.
+     * This flag is used to disable pointer events on the scrollable portion of the Grid.
+     * This prevents jerky/stuttery mouse-wheel scrolling.
+     */
+  }, {
+    key: "_debounceScrollEnded",
+    value: function _debounceScrollEnded() {
+      var scrollingResetTimeInterval = this.props.scrollingResetTimeInterval;
+      if (this._disablePointerEventsTimeoutId) {
+        (0, _requestAnimationTimeout.cancelAnimationTimeout)(this._disablePointerEventsTimeoutId);
+      }
+      this._disablePointerEventsTimeoutId = (0, _requestAnimationTimeout.requestAnimationTimeout)(this._debounceScrollEndedCallback, scrollingResetTimeInterval);
+    }
+  }, {
+    key: "_handleInvalidatedGridSize",
+    value:
+    /**
+     * Check for batched CellMeasurer size invalidations.
+     * This will occur the first time one or more previously unmeasured cells are rendered.
+     */
+    function _handleInvalidatedGridSize() {
+      if (typeof this._deferredInvalidateColumnIndex === 'number' && typeof this._deferredInvalidateRowIndex === 'number') {
+        var columnIndex = this._deferredInvalidateColumnIndex;
+        var rowIndex = this._deferredInvalidateRowIndex;
+        this._deferredInvalidateColumnIndex = null;
+        this._deferredInvalidateRowIndex = null;
+        this.recomputeGridSize({
+          columnIndex: columnIndex,
+          rowIndex: rowIndex
+        });
+      }
+    }
+  }, {
+    key: "_invokeOnScrollMemoizer",
+    value: function _invokeOnScrollMemoizer(_ref6 /*:: */) {
+      var _this3 = this;
+      var scrollLeft = _ref6 /*:: */.scrollLeft,
+        scrollTop = _ref6 /*:: */.scrollTop,
+        totalColumnsWidth = _ref6 /*:: */.totalColumnsWidth,
+        totalRowsHeight = _ref6 /*:: */.totalRowsHeight;
+      this._onScrollMemoizer({
+        callback: function callback(_ref7) {
+          var scrollLeft = _ref7.scrollLeft,
+            scrollTop = _ref7.scrollTop;
+          var _this3$props = _this3.props,
+            height = _this3$props.height,
+            onScroll = _this3$props.onScroll,
+            width = _this3$props.width;
+          onScroll({
+            clientHeight: height,
+            clientWidth: width,
+            scrollHeight: totalRowsHeight,
+            scrollLeft: scrollLeft,
+            scrollTop: scrollTop,
+            scrollWidth: totalColumnsWidth
+          });
+        },
+        indices: {
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop
+        }
+      });
+    }
+  }, {
+    key: "_isScrolling",
+    value: function _isScrolling() /*: boolean*/{
+      var props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
+      var state /*: State*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state;
+      // If isScrolling is defined in props, use it to override the value in state
+      // This is a performance optimization for WindowScroller + Grid
+      return Object.hasOwnProperty.call(props, 'isScrolling') ? Boolean(props.isScrolling) : Boolean(state.isScrolling);
+    }
+  }, {
+    key: "_maybeCallOnScrollbarPresenceChange",
+    value: function _maybeCallOnScrollbarPresenceChange() {
+      if (this._scrollbarPresenceChanged) {
+        var onScrollbarPresenceChange = this.props.onScrollbarPresenceChange;
+        this._scrollbarPresenceChanged = false;
+        onScrollbarPresenceChange({
+          horizontal: this._horizontalScrollBarSize > 0,
+          size: this.state.instanceProps.scrollbarSize,
+          vertical: this._verticalScrollBarSize > 0
+        });
+      }
+    }
+  }, {
+    key: "scrollToPosition",
+    value:
+    /**
+     * Scroll to the specified offset(s).
+     * Useful for animating position changes.
+     */
+    function scrollToPosition(_ref8 /*:: */) {
+      var scrollLeft = _ref8 /*:: */.scrollLeft,
+        scrollTop = _ref8 /*:: */.scrollTop;
+      var stateUpdate = Grid._getScrollToPositionStateUpdate({
+        prevState: this.state,
+        scrollLeft: scrollLeft,
+        scrollTop: scrollTop
+      });
+      if (stateUpdate) {
+        stateUpdate.needToResetStyleCache = false;
+        this.setState(stateUpdate);
+      }
+    }
+  }, {
+    key: "_getCalculatedScrollLeft",
+    value: function _getCalculatedScrollLeft() {
+      var props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
+      var state /*: State*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state;
+      return Grid._getCalculatedScrollLeft(props, state);
+    }
+  }, {
+    key: "_updateScrollLeftForScrollToColumn",
+    value: function _updateScrollLeftForScrollToColumn() {
+      var props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
+      var state /*: State*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state;
+      var stateUpdate = Grid._getScrollLeftForScrollToColumnStateUpdate(props, state);
+      if (stateUpdate) {
+        stateUpdate.needToResetStyleCache = false;
+        this.setState(stateUpdate);
+      }
+    }
+  }, {
+    key: "_getCalculatedScrollTop",
+    value: function _getCalculatedScrollTop() {
+      var props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
+      var state /*: State*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state;
+      return Grid._getCalculatedScrollTop(props, state);
+    }
+  }, {
+    key: "_resetStyleCache",
+    value: function _resetStyleCache() {
+      var styleCache = this._styleCache;
+      var cellCache = this._cellCache;
+      var isScrollingOptOut = this.props.isScrollingOptOut;
+
+      // Reset cell and style caches once scrolling stops.
+      // This makes Grid simpler to use (since cells commonly change).
+      // And it keeps the caches from growing too large.
+      // Performance is most sensitive when a user is scrolling.
+      // Don't clear visible cells from cellCache if isScrollingOptOut is specified.
+      // This keeps the cellCache to a resonable size.
+      this._cellCache = {};
+      this._styleCache = {};
+
+      // Copy over the visible cell styles so avoid unnecessary re-render.
+      for (var rowIndex = this._rowStartIndex; rowIndex <= this._rowStopIndex; rowIndex++) {
+        for (var columnIndex = this._columnStartIndex; columnIndex <= this._columnStopIndex; columnIndex++) {
+          var key = "".concat(rowIndex, "-").concat(columnIndex);
+          this._styleCache[key] = styleCache[key];
+          if (isScrollingOptOut) {
+            this._cellCache[key] = cellCache[key];
+          }
+        }
+      }
+    }
+  }, {
+    key: "_updateScrollTopForScrollToRow",
+    value: function _updateScrollTopForScrollToRow() {
+      var props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
+      var state /*: State*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state;
+      var stateUpdate = Grid._getScrollTopForScrollToRowStateUpdate(props, state);
+      if (stateUpdate) {
+        stateUpdate.needToResetStyleCache = false;
+        this.setState(stateUpdate);
+      }
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps /*: Props*/, prevState /*: State*/) /*: $Shape<State>*/{
+      var newState = {};
+      if (nextProps.columnCount === 0 && prevState.scrollLeft !== 0 || nextProps.rowCount === 0 && prevState.scrollTop !== 0) {
+        newState.scrollLeft = 0;
+        newState.scrollTop = 0;
+
+        // only use scroll{Left,Top} from props if scrollTo{Column,Row} isn't specified
+        // scrollTo{Column,Row} should override scroll{Left,Top}
+      } else if (nextProps.scrollLeft !== prevState.scrollLeft && nextProps.scrollToColumn < 0 || nextProps.scrollTop !== prevState.scrollTop && nextProps.scrollToRow < 0) {
+        Object.assign(newState, Grid._getScrollToPositionStateUpdate({
+          prevState: prevState,
+          scrollLeft: nextProps.scrollLeft,
+          scrollTop: nextProps.scrollTop
+        }));
+      }
+      var instanceProps = prevState.instanceProps;
+
+      // Initially we should not clearStyleCache
+      newState.needToResetStyleCache = false;
+      if (nextProps.columnWidth !== instanceProps.prevColumnWidth || nextProps.rowHeight !== instanceProps.prevRowHeight) {
+        // Reset cache. set it to {} in render
+        newState.needToResetStyleCache = true;
+      }
+      instanceProps.columnSizeAndPositionManager.configure({
+        cellCount: nextProps.columnCount,
+        estimatedCellSize: Grid._getEstimatedColumnSize(nextProps),
+        cellSizeGetter: Grid._wrapSizeGetter(nextProps.columnWidth)
+      });
+      instanceProps.rowSizeAndPositionManager.configure({
+        cellCount: nextProps.rowCount,
+        estimatedCellSize: Grid._getEstimatedRowSize(nextProps),
+        cellSizeGetter: Grid._wrapSizeGetter(nextProps.rowHeight)
+      });
+      if (instanceProps.prevColumnCount === 0 || instanceProps.prevRowCount === 0) {
+        instanceProps.prevColumnCount = 0;
+        instanceProps.prevRowCount = 0;
+      }
+
+      // If scrolling is controlled outside this component, clear cache when scrolling stops
+      if (nextProps.autoHeight && nextProps.isScrolling === false && instanceProps.prevIsScrolling === true) {
+        Object.assign(newState, {
+          isScrolling: false
+        });
+      }
+      var maybeStateA;
+      var maybeStateB;
+      (0, _calculateSizeAndPositionDataAndUpdateScrollOffset["default"])({
+        cellCount: instanceProps.prevColumnCount,
+        cellSize: typeof instanceProps.prevColumnWidth === 'number' ? instanceProps.prevColumnWidth : null,
+        computeMetadataCallback: function computeMetadataCallback() {
+          return instanceProps.columnSizeAndPositionManager.resetCell(0);
+        },
+        computeMetadataCallbackProps: nextProps,
+        nextCellsCount: nextProps.columnCount,
+        nextCellSize: typeof nextProps.columnWidth === 'number' ? nextProps.columnWidth : null,
+        nextScrollToIndex: nextProps.scrollToColumn,
+        scrollToIndex: instanceProps.prevScrollToColumn,
+        updateScrollOffsetForScrollToIndex: function updateScrollOffsetForScrollToIndex() {
+          maybeStateA = Grid._getScrollLeftForScrollToColumnStateUpdate(nextProps, prevState);
+        }
+      });
+      (0, _calculateSizeAndPositionDataAndUpdateScrollOffset["default"])({
+        cellCount: instanceProps.prevRowCount,
+        cellSize: typeof instanceProps.prevRowHeight === 'number' ? instanceProps.prevRowHeight : null,
+        computeMetadataCallback: function computeMetadataCallback() {
+          return instanceProps.rowSizeAndPositionManager.resetCell(0);
+        },
+        computeMetadataCallbackProps: nextProps,
+        nextCellsCount: nextProps.rowCount,
+        nextCellSize: typeof nextProps.rowHeight === 'number' ? nextProps.rowHeight : null,
+        nextScrollToIndex: nextProps.scrollToRow,
+        scrollToIndex: instanceProps.prevScrollToRow,
+        updateScrollOffsetForScrollToIndex: function updateScrollOffsetForScrollToIndex() {
+          maybeStateB = Grid._getScrollTopForScrollToRowStateUpdate(nextProps, prevState);
+        }
+      });
+      instanceProps.prevColumnCount = nextProps.columnCount;
+      instanceProps.prevColumnWidth = nextProps.columnWidth;
+      instanceProps.prevIsScrolling = nextProps.isScrolling === true;
+      instanceProps.prevRowCount = nextProps.rowCount;
+      instanceProps.prevRowHeight = nextProps.rowHeight;
+      instanceProps.prevScrollToColumn = nextProps.scrollToColumn;
+      instanceProps.prevScrollToRow = nextProps.scrollToRow;
+
+      // getting scrollBarSize (moved from componentWillMount)
+      instanceProps.scrollbarSize = nextProps.getScrollbarSize();
+      if (instanceProps.scrollbarSize === undefined) {
+        instanceProps.scrollbarSizeMeasured = false;
+        instanceProps.scrollbarSize = 0;
+      } else {
+        instanceProps.scrollbarSizeMeasured = true;
+      }
+      newState.instanceProps = instanceProps;
+      return _objectSpread(_objectSpread(_objectSpread({}, newState), maybeStateA), maybeStateB);
+    }
+  }, {
+    key: "_getEstimatedColumnSize",
+    value: function _getEstimatedColumnSize(props /*: Props*/) {
+      return typeof props.columnWidth === 'number' ? props.columnWidth : props.estimatedColumnSize;
+    }
+  }, {
+    key: "_getEstimatedRowSize",
+    value: function _getEstimatedRowSize(props /*: Props*/) {
+      return typeof props.rowHeight === 'number' ? props.rowHeight : props.estimatedRowSize;
+    }
+  }, {
+    key: "_getScrollToPositionStateUpdate",
+    value:
+    /**
+     * Get the updated state after scrolling to
+     * scrollLeft and scrollTop
+     */
+    function _getScrollToPositionStateUpdate(_ref9 /*:: */) /*: $Shape<State>*/{
+      var prevState = _ref9 /*:: */.prevState,
+        scrollLeft = _ref9 /*:: */.scrollLeft,
+        scrollTop = _ref9 /*:: */.scrollTop;
+      var newState /*: Object*/ = {
+        scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.REQUESTED
+      };
+      if (typeof scrollLeft === 'number' && scrollLeft >= 0) {
+        newState.scrollDirectionHorizontal = scrollLeft > prevState.scrollLeft ? _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD : _defaultOverscanIndicesGetter.SCROLL_DIRECTION_BACKWARD;
+        newState.scrollLeft = scrollLeft;
+      }
+      if (typeof scrollTop === 'number' && scrollTop >= 0) {
+        newState.scrollDirectionVertical = scrollTop > prevState.scrollTop ? _defaultOverscanIndicesGetter.SCROLL_DIRECTION_FORWARD : _defaultOverscanIndicesGetter.SCROLL_DIRECTION_BACKWARD;
+        newState.scrollTop = scrollTop;
+      }
+      if (typeof scrollLeft === 'number' && scrollLeft >= 0 && scrollLeft !== prevState.scrollLeft || typeof scrollTop === 'number' && scrollTop >= 0 && scrollTop !== prevState.scrollTop) {
+        return newState;
+      }
+      return {};
+    }
+  }, {
+    key: "_wrapSizeGetter",
+    value: function _wrapSizeGetter(value /*: CellSize*/) /*: CellSizeGetter*/{
+      return typeof value === 'function' ? value : function () {
+        return (value /*: any*/);
+      };
+    }
+  }, {
+    key: "_getCalculatedScrollLeft",
+    value: function _getCalculatedScrollLeft(nextProps /*: Props*/, prevState /*: State*/) {
+      var columnCount = nextProps.columnCount,
+        height = nextProps.height,
+        scrollToAlignment = nextProps.scrollToAlignment,
+        scrollToColumn = nextProps.scrollToColumn,
+        width = nextProps.width;
+      var scrollLeft = prevState.scrollLeft,
+        instanceProps = prevState.instanceProps;
+      if (columnCount > 0) {
+        var finalColumn = columnCount - 1;
+        var targetIndex = scrollToColumn < 0 ? finalColumn : Math.min(finalColumn, scrollToColumn);
+        var totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize();
+        var scrollBarSize = instanceProps.scrollbarSizeMeasured && totalRowsHeight > height ? instanceProps.scrollbarSize : 0;
+        return instanceProps.columnSizeAndPositionManager.getUpdatedOffsetForIndex({
+          align: scrollToAlignment,
+          containerSize: width - scrollBarSize,
+          currentOffset: scrollLeft,
+          targetIndex: targetIndex
+        });
+      }
+      return 0;
+    }
+  }, {
+    key: "_getScrollLeftForScrollToColumnStateUpdate",
+    value: function _getScrollLeftForScrollToColumnStateUpdate(nextProps /*: Props*/, prevState /*: State*/) /*: $Shape<State>*/{
+      var scrollLeft = prevState.scrollLeft;
+      var calculatedScrollLeft = Grid._getCalculatedScrollLeft(nextProps, prevState);
+      if (typeof calculatedScrollLeft === 'number' && calculatedScrollLeft >= 0 && scrollLeft !== calculatedScrollLeft) {
+        return Grid._getScrollToPositionStateUpdate({
+          prevState: prevState,
+          scrollLeft: calculatedScrollLeft,
+          scrollTop: -1
+        });
+      }
+      return {};
+    }
+  }, {
+    key: "_getCalculatedScrollTop",
+    value: function _getCalculatedScrollTop(nextProps /*: Props*/, prevState /*: State*/) {
+      var height = nextProps.height,
+        rowCount = nextProps.rowCount,
+        scrollToAlignment = nextProps.scrollToAlignment,
+        scrollToRow = nextProps.scrollToRow,
+        width = nextProps.width;
+      var scrollTop = prevState.scrollTop,
+        instanceProps = prevState.instanceProps;
+      if (rowCount > 0) {
+        var finalRow = rowCount - 1;
+        var targetIndex = scrollToRow < 0 ? finalRow : Math.min(finalRow, scrollToRow);
+        var totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize();
+        var scrollBarSize = instanceProps.scrollbarSizeMeasured && totalColumnsWidth > width ? instanceProps.scrollbarSize : 0;
+        return instanceProps.rowSizeAndPositionManager.getUpdatedOffsetForIndex({
+          align: scrollToAlignment,
+          containerSize: height - scrollBarSize,
+          currentOffset: scrollTop,
+          targetIndex: targetIndex
+        });
+      }
+      return 0;
+    }
+  }, {
+    key: "_getScrollTopForScrollToRowStateUpdate",
+    value: function _getScrollTopForScrollToRowStateUpdate(nextProps /*: Props*/, prevState /*: State*/) /*: $Shape<State>*/{
+      var scrollTop = prevState.scrollTop;
+      var calculatedScrollTop = Grid._getCalculatedScrollTop(nextProps, prevState);
+      if (typeof calculatedScrollTop === 'number' && calculatedScrollTop >= 0 && scrollTop !== calculatedScrollTop) {
+        return Grid._getScrollToPositionStateUpdate({
+          prevState: prevState,
+          scrollLeft: -1,
+          scrollTop: calculatedScrollTop
+        });
+      }
+      return {};
+    }
+  }]);
+}(React.PureComponent);
+(0, _defineProperty2["default"])(Grid, "defaultProps", {
+  'aria-label': 'grid',
+  'aria-readonly': true,
+  autoContainerWidth: false,
+  autoHeight: false,
+  autoWidth: false,
+  cellRangeRenderer: _defaultCellRangeRenderer["default"],
+  containerRole: 'row',
+  containerStyle: {},
+  estimatedColumnSize: 100,
+  estimatedRowSize: 30,
+  getScrollbarSize: _scrollbarSize["default"],
+  noContentRenderer: renderNull,
+  onScroll: function onScroll() {},
+  onScrollbarPresenceChange: function onScrollbarPresenceChange() {},
+  onSectionRendered: function onSectionRendered() {},
+  overscanColumnCount: 0,
+  overscanIndicesGetter: _defaultOverscanIndicesGetter["default"],
+  overscanRowCount: 10,
+  role: 'grid',
+  scrollingResetTimeInterval: DEFAULT_SCROLLING_RESET_TIME_INTERVAL,
+  scrollToAlignment: 'auto',
+  scrollToColumn: -1,
+  scrollToRow: -1,
+  style: {},
+  tabIndex: 0,
+  isScrollingOptOut: false
+});
+(0, _reactLifecyclesCompat.polyfill)(Grid);
+var _default = exports["default"] = Grid;