Grid.js

import _extends from '@babel/runtime/helpers/extends';
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _createClass from '@babel/runtime/helpers/createClass';
import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
import _inherits from '@babel/runtime/helpers/inherits';
import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
import _defineProperty from '@babel/runtime/helpers/defineProperty';

var _class, _temp;

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);
  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly)
      symbols = symbols.filter(function(sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
    keys.push.apply(keys, symbols);
  }
  return keys;
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    if (i % 2) {
      ownKeys(Object(source), true).forEach(function(key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function(key) {
        Object.defineProperty(
          target,
          key,
          Object.getOwnPropertyDescriptor(source, key),
        );
      });
    }
  }
  return target;
}

function _createSuper(Derived) {
  var hasNativeReflectConstruct = _isNativeReflectConstruct();
  return function _createSuperInternal() {
    var Super = _getPrototypeOf(Derived),
      result;
    if (hasNativeReflectConstruct) {
      var NewTarget = _getPrototypeOf(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }
    return _possibleConstructorReturn(this, result);
  };
}

function _isNativeReflectConstruct() {
  if (typeof Reflect === 'undefined' || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === 'function') return true;
  try {
    Boolean.prototype.valueOf.call(
      Reflect.construct(Boolean, [], function() {}),
    );
    return true;
  } catch (e) {
    return false;
  }
}

import * as React from 'react';
import clsx from 'clsx';
import calculateSizeAndPositionDataAndUpdateScrollOffset from './utils/calculateSizeAndPositionDataAndUpdateScrollOffset';
import ScalingCellSizeAndPositionManager from './utils/ScalingCellSizeAndPositionManager';
import createCallbackMemoizer from '../utils/createCallbackMemoizer';
import defaultOverscanIndicesGetter, {
  SCROLL_DIRECTION_BACKWARD,
  SCROLL_DIRECTION_FORWARD,
} from './defaultOverscanIndicesGetter';
import updateScrollIndexHelper from './utils/updateScrollIndexHelper';
import defaultCellRangeRenderer from './defaultCellRangeRenderer';
import scrollbarSize from 'dom-helpers/scrollbarSize';
import {polyfill} from 'react-lifecycles-compat';
import {
  requestAnimationTimeout,
  cancelAnimationTimeout,
} 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.
 */

export var 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 = function renderNull() {
  return null;
};

/**
 * 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 =
  ((_temp = _class = /*#__PURE__*/ (function(_React$PureComponent) {
    _inherits(Grid, _React$PureComponent);

    var _super = _createSuper(Grid);

    // Invokes onSectionRendered callback only when start/stop row or column indices change
    function Grid(props) {
      var _this;

      _classCallCheck(this, Grid);

      _this = _super.call(this, props);

      _defineProperty(
        _assertThisInitialized(_this),
        '_onGridRenderedMemoizer',
        createCallbackMemoizer(),
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_onScrollMemoizer',
        createCallbackMemoizer(false),
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_deferredInvalidateColumnIndex',
        null,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_deferredInvalidateRowIndex',
        null,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_recomputeScrollLeftFlag',
        false,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_recomputeScrollTopFlag',
        false,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_horizontalScrollBarSize',
        0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_verticalScrollBarSize',
        0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_scrollbarPresenceChanged',
        false,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_scrollingContainer',
        void 0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_childrenToDisplay',
        void 0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_columnStartIndex',
        void 0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_columnStopIndex',
        void 0,
      );

      _defineProperty(_assertThisInitialized(_this), '_rowStartIndex', void 0);

      _defineProperty(_assertThisInitialized(_this), '_rowStopIndex', void 0);

      _defineProperty(
        _assertThisInitialized(_this),
        '_renderedColumnStartIndex',
        0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_renderedColumnStopIndex',
        0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_renderedRowStartIndex',
        0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_renderedRowStopIndex',
        0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_initialScrollTop',
        void 0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_initialScrollLeft',
        void 0,
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_disablePointerEventsTimeoutId',
        void 0,
      );

      _defineProperty(_assertThisInitialized(_this), '_styleCache', {});

      _defineProperty(_assertThisInitialized(_this), '_cellCache', {});

      _defineProperty(
        _assertThisInitialized(_this),
        '_debounceScrollEndedCallback',
        function() {
          _this._disablePointerEventsTimeoutId = null; // isScrolling is used to determine if we reset styleCache

          _this.setState({
            isScrolling: false,
            needToResetStyleCache: false,
          });
        },
      );

      _defineProperty(
        _assertThisInitialized(_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,
            },
          });
        },
      );

      _defineProperty(
        _assertThisInitialized(_this),
        '_setScrollingContainerRef',
        function(ref) {
          _this._scrollingContainer = ref;
        },
      );

      _defineProperty(_assertThisInitialized(_this), '_onScroll', function(
        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);
        }
      });

      var columnSizeAndPositionManager = new ScalingCellSizeAndPositionManager({
        cellCount: props.columnCount,
        cellSizeGetter: function cellSizeGetter(params) {
          return Grid._wrapSizeGetter(props.columnWidth)(params);
        },
        estimatedCellSize: Grid._getEstimatedColumnSize(props),
      });
      var rowSizeAndPositionManager = new ScalingCellSizeAndPositionManager({
        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: SCROLL_DIRECTION_FORWARD,
        scrollDirectionVertical: 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.
     */

    _createClass(
      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
                    ? SCROLL_DIRECTION_FORWARD
                    : SCROLL_DIRECTION_BACKWARD
                  : this.state.scrollDirectionHorizontal;
              var scrollDirectionVertical =
                scrollTop !== this.state.scrollTop
                  ? scrollTop > this.state.scrollTop
                    ? SCROLL_DIRECTION_FORWARD
                    : SCROLL_DIRECTION_BACKWARD
                  : this.state.scrollDirectionVertical;
              var newState = {
                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 === SCROLL_DIRECTION_FORWARD
                ? columnIndex <= scrollToColumn
                : columnIndex >= scrollToColumn);
            this._recomputeScrollTopFlag =
              scrollToRow >= 0 &&
              (this.state.scrollDirectionVertical === 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, prevState) {
            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 {
              updateScrollIndexHelper({
                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 {
              updateScrollIndexHelper({
                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) {
              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 = {
              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',
              _extends(
                {
                  ref: this._setScrollingContainerRef,
                },
                containerProps,
                {
                  'aria-label': this.props['aria-label'],
                  'aria-readonly': this.props['aria-readonly'],
                  'aria-activedescendant': this.props['aria-activedescendant'],
                  className: clsx('ReactVirtualized__Grid', className),
                  id: id,
                  onScroll: this._onScroll,
                  role: role,
                  style: _objectSpread(_objectSpread({}, gridStyle), style),
                  onFocus: this.props['onFocus'],
                  onBlur: this.props['onBlur'],
                  tabIndex: tabIndex,
                },
              ),
              childrenToDisplay.length > 0 &&
                /*#__PURE__*/ React.createElement(
                  'div',
                  {
                    className: 'ReactVirtualized__Grid__innerScrollContainer',
                    id: 'virtualized-grid-container',
                    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 =
              arguments.length > 0 && arguments[0] !== undefined
                ? arguments[0]
                : this.props;
            var 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) {
              cancelAnimationTimeout(this._disablePointerEventsTimeoutId);
            }

            this._disablePointerEventsTimeoutId = 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() {
            var props =
              arguments.length > 0 && arguments[0] !== undefined
                ? arguments[0]
                : this.props;
            var 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 =
              arguments.length > 0 && arguments[0] !== undefined
                ? arguments[0]
                : this.props;
            var state =
              arguments.length > 1 && arguments[1] !== undefined
                ? arguments[1]
                : this.state;
            return Grid._getCalculatedScrollLeft(props, state);
          },
        },
        {
          key: '_updateScrollLeftForScrollToColumn',
          value: function _updateScrollLeftForScrollToColumn() {
            var props =
              arguments.length > 0 && arguments[0] !== undefined
                ? arguments[0]
                : this.props;
            var 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 =
              arguments.length > 0 && arguments[0] !== undefined
                ? arguments[0]
                : this.props;
            var 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 =
              arguments.length > 0 && arguments[0] !== undefined
                ? arguments[0]
                : this.props;
            var 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, prevState) {
            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;
            calculateSizeAndPositionDataAndUpdateScrollOffset({
              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,
                );
              },
            });
            calculateSizeAndPositionDataAndUpdateScrollOffset({
              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) {
            return typeof props.columnWidth === 'number'
              ? props.columnWidth
              : props.estimatedColumnSize;
          },
        },
        {
          key: '_getEstimatedRowSize',
          value: function _getEstimatedRowSize(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) {
              var prevState = _ref9.prevState,
                scrollLeft = _ref9.scrollLeft,
                scrollTop = _ref9.scrollTop;
              var newState = {
                scrollPositionChangeReason:
                  SCROLL_POSITION_CHANGE_REASONS.REQUESTED,
              };

              if (typeof scrollLeft === 'number' && scrollLeft >= 0) {
                newState.scrollDirectionHorizontal =
                  scrollLeft > prevState.scrollLeft
                    ? SCROLL_DIRECTION_FORWARD
                    : SCROLL_DIRECTION_BACKWARD;
                newState.scrollLeft = scrollLeft;
              }

              if (typeof scrollTop === 'number' && scrollTop >= 0) {
                newState.scrollDirectionVertical =
                  scrollTop > prevState.scrollTop
                    ? SCROLL_DIRECTION_FORWARD
                    : 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) {
            return typeof value === 'function'
              ? value
              : function() {
                  return value;
                };
          },
        },
        {
          key: '_getCalculatedScrollLeft',
          value: function _getCalculatedScrollLeft(nextProps, prevState) {
            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,
            prevState,
          ) {
            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, prevState) {
            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,
            prevState,
          ) {
            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 {};
          },
        },
      ],
    );

    return Grid;
  })(React.PureComponent)),
  _defineProperty(
    _class,
    'propTypes',
    process.env.NODE_ENV === 'production'
      ? null
      : {
          'aria-label': PropTypes.string,
          'aria-readonly': PropTypes.bool,
          'aria-activedescendant': PropTypes.string,

          /** Callback invoked when list is focused.  */
          onFocus: PropTypes.func,

          /** Callback invoked when list is blured.  */
          onBlur: PropTypes.func,

          /**
           * 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: PropTypes.bool.isRequired,

          /**
           * Removes fixed height from the scrollingContainer so that the total height of rows can stretch the window.
           * Intended for use with WindowScroller
           */
          autoHeight: PropTypes.bool.isRequired,

          /**
           * Removes fixed width from the scrollingContainer so that the total width of rows can stretch the window.
           * Intended for use with WindowScroller
           */
          autoWidth: PropTypes.bool.isRequired,

          /** Responsible for rendering a cell given an row and column index.  */
          cellRenderer: function cellRenderer() {
            return (typeof bpfrpt_proptype_CellRenderer === 'function'
              ? bpfrpt_proptype_CellRenderer.isRequired
                ? bpfrpt_proptype_CellRenderer.isRequired
                : bpfrpt_proptype_CellRenderer
              : PropTypes.shape(bpfrpt_proptype_CellRenderer).isRequired
            ).apply(this, arguments);
          },

          /** Responsible for rendering a group of cells given their index ranges.  */
          cellRangeRenderer: function cellRangeRenderer() {
            return (typeof bpfrpt_proptype_CellRangeRenderer === 'function'
              ? bpfrpt_proptype_CellRangeRenderer.isRequired
                ? bpfrpt_proptype_CellRangeRenderer.isRequired
                : bpfrpt_proptype_CellRangeRenderer
              : PropTypes.shape(bpfrpt_proptype_CellRangeRenderer).isRequired
            ).apply(this, arguments);
          },

          /** Optional custom CSS class name to attach to root Grid element.  */
          className: PropTypes.string,

          /** Number of columns in grid.  */
          columnCount: PropTypes.number.isRequired,

          /** Either a fixed column width (number) or a function that returns the width of a column given its index.  */
          columnWidth: function columnWidth() {
            return (typeof bpfrpt_proptype_CellSize === 'function'
              ? bpfrpt_proptype_CellSize.isRequired
                ? bpfrpt_proptype_CellSize.isRequired
                : bpfrpt_proptype_CellSize
              : PropTypes.shape(bpfrpt_proptype_CellSize).isRequired
            ).apply(this, arguments);
          },

          /** Unfiltered props for the Grid container. */
          containerProps: PropTypes.object,

          /** ARIA role for the cell-container.  */
          containerRole: PropTypes.string.isRequired,

          /** Optional inline style applied to inner cell-container */
          containerStyle: PropTypes.object.isRequired,

          /**
           * 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: PropTypes.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: PropTypes.number.isRequired,

          /**
           * 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: PropTypes.number.isRequired,

          /** Exposed for testing purposes only.  */
          getScrollbarSize: PropTypes.func.isRequired,

          /** Height of Grid; this property determines the number of visible (vs virtualized) rows.  */
          height: PropTypes.number.isRequired,

          /** Optional custom id to attach to root Grid element.  */
          id: PropTypes.string,

          /**
           * Override internal is-scrolling state tracking.
           * This property is primarily intended for use with the WindowScroller component.
           */
          isScrolling: PropTypes.bool,

          /**
           * Opt-out of isScrolling param passed to cellRangeRenderer.
           * To avoid the extra render when scroll stops.
           */
          isScrollingOptOut: PropTypes.bool.isRequired,

          /** Optional renderer to be used in place of rows when either :rowCount or :columnCount is 0.  */
          noContentRenderer: function noContentRenderer() {
            return (typeof bpfrpt_proptype_NoContentRenderer === 'function'
              ? bpfrpt_proptype_NoContentRenderer.isRequired
                ? bpfrpt_proptype_NoContentRenderer.isRequired
                : bpfrpt_proptype_NoContentRenderer
              : PropTypes.shape(bpfrpt_proptype_NoContentRenderer).isRequired
            ).apply(this, arguments);
          },

          /**
           * 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: PropTypes.func.isRequired,

          /**
           * 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: PropTypes.func.isRequired,

          /** Callback invoked with information about the section of the Grid that was just rendered.  */
          onSectionRendered: PropTypes.func.isRequired,

          /**
           * 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: PropTypes.number.isRequired,

          /**
           * 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: function overscanIndicesGetter() {
            return (typeof bpfrpt_proptype_OverscanIndicesGetter === 'function'
              ? bpfrpt_proptype_OverscanIndicesGetter.isRequired
                ? bpfrpt_proptype_OverscanIndicesGetter.isRequired
                : bpfrpt_proptype_OverscanIndicesGetter
              : PropTypes.shape(bpfrpt_proptype_OverscanIndicesGetter)
                  .isRequired
            ).apply(this, arguments);
          },

          /**
           * 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: PropTypes.number.isRequired,

          /** ARIA role for the grid element.  */
          role: PropTypes.string.isRequired,

          /**
           * 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: function rowHeight() {
            return (typeof bpfrpt_proptype_CellSize === 'function'
              ? bpfrpt_proptype_CellSize.isRequired
                ? bpfrpt_proptype_CellSize.isRequired
                : bpfrpt_proptype_CellSize
              : PropTypes.shape(bpfrpt_proptype_CellSize).isRequired
            ).apply(this, arguments);
          },

          /** Number of rows in grid.  */
          rowCount: PropTypes.number.isRequired,

          /** Wait this amount of time after the last scroll event before resetting Grid `pointer-events`. */
          scrollingResetTimeInterval: PropTypes.number.isRequired,

          /** Horizontal offset. */
          scrollLeft: PropTypes.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: function scrollToAlignment() {
            return (typeof bpfrpt_proptype_Alignment === 'function'
              ? bpfrpt_proptype_Alignment.isRequired
                ? bpfrpt_proptype_Alignment.isRequired
                : bpfrpt_proptype_Alignment
              : PropTypes.shape(bpfrpt_proptype_Alignment).isRequired
            ).apply(this, arguments);
          },

          /** Column index to ensure visible (by forcefully scrolling if necessary) */
          scrollToColumn: PropTypes.number.isRequired,

          /** Vertical offset. */
          scrollTop: PropTypes.number,

          /** Row index to ensure visible (by forcefully scrolling if necessary) */
          scrollToRow: PropTypes.number.isRequired,

          /** Optional inline style */
          style: PropTypes.object.isRequired,

          /** Tab index for focus */
          tabIndex: PropTypes.number,

          /** Width of Grid; this property determines the number of visible (vs virtualized) columns.  */
          width: PropTypes.number.isRequired,
        },
  ),
  _temp);

_defineProperty(Grid, 'defaultProps', {
  'aria-readonly': true,
  autoContainerWidth: false,
  autoHeight: false,
  autoWidth: false,
  cellRangeRenderer: defaultCellRangeRenderer,
  containerRole: 'rowgroup',
  containerStyle: {},
  estimatedColumnSize: 100,
  estimatedRowSize: 30,
  getScrollbarSize: scrollbarSize,
  noContentRenderer: renderNull,
  onScroll: function onScroll() {},
  onScrollbarPresenceChange: function onScrollbarPresenceChange() {},
  onSectionRendered: function onSectionRendered() {},
  overscanColumnCount: 0,
  overscanIndicesGetter: defaultOverscanIndicesGetter,
  overscanRowCount: 10,
  role: 'grid',
  scrollingResetTimeInterval: DEFAULT_SCROLLING_RESET_TIME_INTERVAL,
  scrollToAlignment: 'auto',
  scrollToColumn: -1,
  scrollToRow: -1,
  style: {},
  tabIndex: 0,
  isScrollingOptOut: false,
});

polyfill(Grid);
export default Grid;
import {bpfrpt_proptype_CellRenderer} from './types';
import {bpfrpt_proptype_CellRangeRenderer} from './types';
import {bpfrpt_proptype_CellPosition} from './types';
import {bpfrpt_proptype_CellSize} from './types';
import {bpfrpt_proptype_CellSizeGetter} from './types';
import {bpfrpt_proptype_NoContentRenderer} from './types';
import {bpfrpt_proptype_Scroll} from './types';
import {bpfrpt_proptype_ScrollbarPresenceChange} from './types';
import {bpfrpt_proptype_RenderedSection} from './types';
import {bpfrpt_proptype_OverscanIndicesGetter} from './types';
import {bpfrpt_proptype_Alignment} from './types';
import {bpfrpt_proptype_CellCache} from './types';
import {bpfrpt_proptype_StyleCache} from './types';
import {bpfrpt_proptype_AnimationTimeoutId} from '../utils/requestAnimationTimeout';
import PropTypes from 'prop-types';