text: import _extends from '@babel/runtime/helpers/esm/extends';
  import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
  import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
  import memoizeOne from 'memoize-one';
  import { createElement, PureComponent } from 'react';
  import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
  
  // Animation frame based implementation of setTimeout.
  // Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
  var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
  var now = hasNativePerformanceNow ? function () {
    return performance.now();
  } : function () {
    return Date.now();
  };
  function cancelTimeout(timeoutID) {
    cancelAnimationFrame(timeoutID.id);
  }
  function requestTimeout(callback, delay) {
    var start = now();
  
    function tick() {
      if (now() - start >= delay) {
        callback.call(null);
      } else {
        timeoutID.id = requestAnimationFrame(tick);
      }
    }
  
    var timeoutID = {
      id: requestAnimationFrame(tick)
    };
    return timeoutID;
  }
  
  var size = -1; // This utility copied from "dom-helpers" package.
  
  function getScrollbarSize(recalculate) {
    if (recalculate === void 0) {
      recalculate = false;
    }
  
    if (size === -1 || recalculate) {
      var div = document.createElement('div');
      var style = div.style;
      style.width = '50px';
      style.height = '50px';
      style.overflow = 'scroll';
      document.body.appendChild(div);
      size = div.offsetWidth - div.clientWidth;
      document.body.removeChild(div);
    }
  
    return size;
  }
  var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
  // Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
  // Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
  // The safest way to check this is to intentionally set a negative offset,
  // and then verify that the subsequent "scroll" event matches the negative offset.
  // If it does not match, then we can assume a non-standard RTL scroll implementation.
  
  function getRTLOffsetType(recalculate) {
    if (recalculate === void 0) {
      recalculate = false;
    }
  
    if (cachedRTLResult === null || recalculate) {
      var outerDiv = document.createElement('div');
      var outerStyle = outerDiv.style;
      outerStyle.width = '50px';
      outerStyle.height = '50px';
      outerStyle.overflow = 'scroll';
      outerStyle.direction = 'rtl';
      var innerDiv = document.createElement('div');
      var innerStyle = innerDiv.style;
      innerStyle.width = '100px';
      innerStyle.height = '100px';
      outerDiv.appendChild(innerDiv);
      document.body.appendChild(outerDiv);
  
      if (outerDiv.scrollLeft > 0) {
        cachedRTLResult = 'positive-descending';
      } else {
        outerDiv.scrollLeft = 1;
  
        if (outerDiv.scrollLeft === 0) {
          cachedRTLResult = 'negative';
        } else {
          cachedRTLResult = 'positive-ascending';
        }
      }
  
      document.body.removeChild(outerDiv);
      return cachedRTLResult;
    }
  
    return cachedRTLResult;
  }
  
  var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
  
  var defaultItemKey = function defaultItemKey(_ref) {
    var columnIndex = _ref.columnIndex,
        data = _ref.data,
        rowIndex = _ref.rowIndex;
    return rowIndex + ":" + columnIndex;
  }; // In DEV mode, this Set helps us only log a warning once per component instance.
  // This avoids spamming the console every time a render happens.
  
  
  var devWarningsOverscanCount = null;
  var devWarningsOverscanRowsColumnsCount = null;
  var devWarningsTagName = null;
  
  if (process.env.NODE_ENV !== 'production') {
    if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
      devWarningsOverscanCount =
      /*#__PURE__*/
      new WeakSet();
      devWarningsOverscanRowsColumnsCount =
      /*#__PURE__*/
      new WeakSet();
      devWarningsTagName =
      /*#__PURE__*/
      new WeakSet();
    }
  }
  
  function createGridComponent(_ref2) {
    var _class, _temp;
  
    var getColumnOffset = _ref2.getColumnOffset,
        getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
        getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
        getColumnWidth = _ref2.getColumnWidth,
        getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
        getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
        getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
        getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
        getRowHeight = _ref2.getRowHeight,
        getRowOffset = _ref2.getRowOffset,
        getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
        getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
        initInstanceProps = _ref2.initInstanceProps,
        shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
        validateProps = _ref2.validateProps;
    return _temp = _class =
    /*#__PURE__*/
    function (_PureComponent) {
      _inheritsLoose(Grid, _PureComponent);
  
      // Always use explicit constructor for React components.
      // It produces less code after transpilation. (#26)
      // eslint-disable-next-line no-useless-constructor
      function Grid(props) {
        var _this;
  
        _this = _PureComponent.call(this, props) || this;
        _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
        _this._resetIsScrollingTimeoutId = null;
        _this._outerRef = void 0;
        _this.state = {
          instance: _assertThisInitialized(_assertThisInitialized(_this)),
          isScrolling: false,
          horizontalScrollDirection: 'forward',
          scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
          scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
          scrollUpdateWasRequested: false,
          verticalScrollDirection: 'forward'
        };
        _this._callOnItemsRendered = void 0;
        _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
          return _this.props.onItemsRendered({
            overscanColumnStartIndex: overscanColumnStartIndex,
            overscanColumnStopIndex: overscanColumnStopIndex,
            overscanRowStartIndex: overscanRowStartIndex,
            overscanRowStopIndex: overscanRowStopIndex,
            visibleColumnStartIndex: visibleColumnStartIndex,
            visibleColumnStopIndex: visibleColumnStopIndex,
            visibleRowStartIndex: visibleRowStartIndex,
            visibleRowStopIndex: visibleRowStopIndex
          });
        });
        _this._callOnScroll = void 0;
        _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
          return _this.props.onScroll({
            horizontalScrollDirection: horizontalScrollDirection,
            scrollLeft: scrollLeft,
            scrollTop: scrollTop,
            verticalScrollDirection: verticalScrollDirection,
            scrollUpdateWasRequested: scrollUpdateWasRequested
          });
        });
        _this._getItemStyle = void 0;
  
        _this._getItemStyle = function (rowIndex, columnIndex) {
          var _this$props = _this.props,
              columnWidth = _this$props.columnWidth,
              direction = _this$props.direction,
              rowHeight = _this$props.rowHeight;
  
          var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
  
          var key = rowIndex + ":" + columnIndex;
          var style;
  
          if (itemStyleCache.hasOwnProperty(key)) {
            style = itemStyleCache[key];
          } else {
            var _style;
  
            itemStyleCache[key] = style = (_style = {
              position: 'absolute'
            }, _style[direction === 'rtl' ? 'right' : 'left'] = getColumnOffset(_this.props, columnIndex, _this._instanceProps), _style.top = getRowOffset(_this.props, rowIndex, _this._instanceProps), _style.height = getRowHeight(_this.props, rowIndex, _this._instanceProps), _style.width = getColumnWidth(_this.props, columnIndex, _this._instanceProps), _style);
          }
  
          return style;
        };
  
        _this._getItemStyleCache = void 0;
        _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
          return {};
        });
  
        _this._onScroll = function (event) {
          var _event$currentTarget = event.currentTarget,
              clientHeight = _event$currentTarget.clientHeight,
              clientWidth = _event$currentTarget.clientWidth,
              scrollLeft = _event$currentTarget.scrollLeft,
              scrollTop = _event$currentTarget.scrollTop,
              scrollHeight = _event$currentTarget.scrollHeight,
              scrollWidth = _event$currentTarget.scrollWidth;
  
          _this.setState(function (prevState) {
            if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
              // Scroll position may have been updated by cDM/cDU,
              // In which case we don't need to trigger another render,
              // And we don't want to update state.isScrolling.
              return null;
            }
  
            var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
            // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
            // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
  
            var calculatedScrollLeft = scrollLeft;
  
            if (direction === 'rtl') {
              switch (getRTLOffsetType()) {
                case 'negative':
                  calculatedScrollLeft = -scrollLeft;
                  break;
  
                case 'positive-descending':
                  calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
                  break;
              }
            } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
  
  
            calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
            var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
            return {
              isScrolling: true,
              horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
              scrollLeft: calculatedScrollLeft,
              scrollTop: calculatedScrollTop,
              verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
              scrollUpdateWasRequested: false
            };
          }, _this._resetIsScrollingDebounced);
        };
  
        _this._outerRefSetter = function (ref) {
          var outerRef = _this.props.outerRef;
          _this._outerRef = ref;
  
          if (typeof outerRef === 'function') {
            outerRef(ref);
          } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
            outerRef.current = ref;
          }
        };
  
        _this._resetIsScrollingDebounced = function () {
          if (_this._resetIsScrollingTimeoutId !== null) {
            cancelTimeout(_this._resetIsScrollingTimeoutId);
          }
  
          _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
        };
  
        _this._resetIsScrolling = function () {
          _this._resetIsScrollingTimeoutId = null;
  
          _this.setState({
            isScrolling: false
          }, function () {
            // Clear style cache after state update has been committed.
            // This way we don't break pure sCU for items that don't use isScrolling param.
            _this._getItemStyleCache(-1);
          });
        };
  
        return _this;
      }
  
      Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
        validateSharedProps(nextProps, prevState);
        validateProps(nextProps);
        return null;
      };
  
      var _proto = Grid.prototype;
  
      _proto.scrollTo = function scrollTo(_ref3) {
        var scrollLeft = _ref3.scrollLeft,
            scrollTop = _ref3.scrollTop;
  
        if (scrollLeft !== undefined) {
          scrollLeft = Math.max(0, scrollLeft);
        }
  
        if (scrollTop !== undefined) {
          scrollTop = Math.max(0, scrollTop);
        }
  
        this.setState(function (prevState) {
          if (scrollLeft === undefined) {
            scrollLeft = prevState.scrollLeft;
          }
  
          if (scrollTop === undefined) {
            scrollTop = prevState.scrollTop;
          }
  
          if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
            return null;
          }
  
          return {
            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
            scrollLeft: scrollLeft,
            scrollTop: scrollTop,
            scrollUpdateWasRequested: true,
            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
          };
        }, this._resetIsScrollingDebounced);
      };
  
      _proto.scrollToItem = function scrollToItem(_ref4) {
        var _ref4$align = _ref4.align,
            align = _ref4$align === void 0 ? 'auto' : _ref4$align,
            columnIndex = _ref4.columnIndex,
            rowIndex = _ref4.rowIndex;
        var _this$props2 = this.props,
            columnCount = _this$props2.columnCount,
            height = _this$props2.height,
            rowCount = _this$props2.rowCount,
            width = _this$props2.width;
        var _this$state = this.state,
            scrollLeft = _this$state.scrollLeft,
            scrollTop = _this$state.scrollTop;
        var scrollbarSize = getScrollbarSize();
  
        if (columnIndex !== undefined) {
          columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
        }
  
        if (rowIndex !== undefined) {
          rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
        }
  
        var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
        var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
        // to ensure it's fully visible.
        // But we only need to account for its size when it's actually visible.
  
        var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
        var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
        this.scrollTo({
          scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
          scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
        });
      };
  
      _proto.componentDidMount = function componentDidMount() {
        var _this$props3 = this.props,
            initialScrollLeft = _this$props3.initialScrollLeft,
            initialScrollTop = _this$props3.initialScrollTop;
  
        if (this._outerRef != null) {
          var outerRef = this._outerRef;
  
          if (typeof initialScrollLeft === 'number') {
            outerRef.scrollLeft = initialScrollLeft;
          }
  
          if (typeof initialScrollTop === 'number') {
            outerRef.scrollTop = initialScrollTop;
          }
        }
  
        this._callPropsCallbacks();
      };
  
      _proto.componentDidUpdate = function componentDidUpdate() {
        var direction = this.props.direction;
        var _this$state2 = this.state,
            scrollLeft = _this$state2.scrollLeft,
            scrollTop = _this$state2.scrollTop,
            scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
  
        if (scrollUpdateWasRequested && this._outerRef != null) {
          // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
          // So we need to determine which browser behavior we're dealing with, and mimic it.
          var outerRef = this._outerRef;
  
          if (direction === 'rtl') {
            switch (getRTLOffsetType()) {
              case 'negative':
                outerRef.scrollLeft = -scrollLeft;
                break;
  
              case 'positive-ascending':
                outerRef.scrollLeft = scrollLeft;
                break;
  
              default:
                var clientWidth = outerRef.clientWidth,
                    scrollWidth = outerRef.scrollWidth;
                outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
                break;
            }
          } else {
            outerRef.scrollLeft = Math.max(0, scrollLeft);
          }
  
          outerRef.scrollTop = Math.max(0, scrollTop);
        }
  
        this._callPropsCallbacks();
      };
  
      _proto.componentWillUnmount = function componentWillUnmount() {
        if (this._resetIsScrollingTimeoutId !== null) {
          cancelTimeout(this._resetIsScrollingTimeoutId);
        }
      };
  
      _proto.render = function render() {
        var _this$props4 = this.props,
            children = _this$props4.children,
            className = _this$props4.className,
            columnCount = _this$props4.columnCount,
            direction = _this$props4.direction,
            height = _this$props4.height,
            innerRef = _this$props4.innerRef,
            innerElementType = _this$props4.innerElementType,
            innerTagName = _this$props4.innerTagName,
            itemData = _this$props4.itemData,
            _this$props4$itemKey = _this$props4.itemKey,
            itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
            outerElementType = _this$props4.outerElementType,
            outerTagName = _this$props4.outerTagName,
            rowCount = _this$props4.rowCount,
            style = _this$props4.style,
            useIsScrolling = _this$props4.useIsScrolling,
            width = _this$props4.width;
        var isScrolling = this.state.isScrolling;
  
        var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
            columnStartIndex = _this$_getHorizontalR[0],
            columnStopIndex = _this$_getHorizontalR[1];
  
        var _this$_getVerticalRan = this._getVerticalRangeToRender(),
            rowStartIndex = _this$_getVerticalRan[0],
            rowStopIndex = _this$_getVerticalRan[1];
  
        var items = [];
  
        if (columnCount > 0 && rowCount) {
          for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
            for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
              items.push(createElement(children, {
                columnIndex: _columnIndex,
                data: itemData,
                isScrolling: useIsScrolling ? isScrolling : undefined,
                key: itemKey({
                  columnIndex: _columnIndex,
                  data: itemData,
                  rowIndex: _rowIndex
                }),
                rowIndex: _rowIndex,
                style: this._getItemStyle(_rowIndex, _columnIndex)
              }));
            }
          }
        } // Read this value AFTER items have been created,
        // So their actual sizes (if variable) are taken into consideration.
  
  
        var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
        var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
        return createElement(outerElementType || outerTagName || 'div', {
          className: className,
          onScroll: this._onScroll,
          ref: this._outerRefSetter,
          style: _extends({
            position: 'relative',
            height: height,
            width: width,
            overflow: 'auto',
            WebkitOverflowScrolling: 'touch',
            willChange: 'transform',
            direction: direction
          }, style)
        }, createElement(innerElementType || innerTagName || 'div', {
          children: items,
          ref: innerRef,
          style: {
            height: estimatedTotalHeight,
            pointerEvents: isScrolling ? 'none' : undefined,
            width: estimatedTotalWidth
          }
        }));
      };
  
      _proto._callPropsCallbacks = function _callPropsCallbacks() {
        var _this$props5 = this.props,
            columnCount = _this$props5.columnCount,
            onItemsRendered = _this$props5.onItemsRendered,
            onScroll = _this$props5.onScroll,
            rowCount = _this$props5.rowCount;
  
        if (typeof onItemsRendered === 'function') {
          if (columnCount > 0 && rowCount > 0) {
            var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
                _overscanColumnStartIndex = _this$_getHorizontalR2[0],
                _overscanColumnStopIndex = _this$_getHorizontalR2[1],
                _visibleColumnStartIndex = _this$_getHorizontalR2[2],
                _visibleColumnStopIndex = _this$_getHorizontalR2[3];
  
            var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
                _overscanRowStartIndex = _this$_getVerticalRan2[0],
                _overscanRowStopIndex = _this$_getVerticalRan2[1],
                _visibleRowStartIndex = _this$_getVerticalRan2[2],
                _visibleRowStopIndex = _this$_getVerticalRan2[3];
  
            this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
          }
        }
  
        if (typeof onScroll === 'function') {
          var _this$state3 = this.state,
              _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
              _scrollLeft = _this$state3.scrollLeft,
              _scrollTop = _this$state3.scrollTop,
              _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
              _verticalScrollDirection = _this$state3.verticalScrollDirection;
  
          this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
        }
      }; // Lazily create and cache item styles while scrolling,
      // So that pure component sCU will prevent re-renders.
      // We maintain this cache, and pass a style prop rather than index,
      // So that List can clear cached styles and force item re-render if necessary.
  
  
      _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
        var _this$props6 = this.props,
            columnCount = _this$props6.columnCount,
            overscanColumnCount = _this$props6.overscanColumnCount,
            overscanColumnsCount = _this$props6.overscanColumnsCount,
            overscanCount = _this$props6.overscanCount,
            rowCount = _this$props6.rowCount;
        var _this$state4 = this.state,
            horizontalScrollDirection = _this$state4.horizontalScrollDirection,
            isScrolling = _this$state4.isScrolling,
            scrollLeft = _this$state4.scrollLeft;
        var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
  
        if (columnCount === 0 || rowCount === 0) {
          return [0, 0, 0, 0];
        }
  
        var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
        var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
        // If there isn't at least one extra item, tab loops back around.
  
        var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
        var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
        return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
      };
  
      _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
        var _this$props7 = this.props,
            columnCount = _this$props7.columnCount,
            overscanCount = _this$props7.overscanCount,
            overscanRowCount = _this$props7.overscanRowCount,
            overscanRowsCount = _this$props7.overscanRowsCount,
            rowCount = _this$props7.rowCount;
        var _this$state5 = this.state,
            isScrolling = _this$state5.isScrolling,
            verticalScrollDirection = _this$state5.verticalScrollDirection,
            scrollTop = _this$state5.scrollTop;
        var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;
  
        if (columnCount === 0 || rowCount === 0) {
          return [0, 0, 0, 0];
        }
  
        var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
        var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
        // If there isn't at least one extra item, tab loops back around.
  
        var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
        var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
        return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
      };
  
      return Grid;
    }(PureComponent), _class.defaultProps = {
      direction: 'ltr',
      itemData: undefined,
      useIsScrolling: false
    }, _temp;
  }
  
  var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
    var children = _ref5.children,
        direction = _ref5.direction,
        height = _ref5.height,
        innerTagName = _ref5.innerTagName,
        outerTagName = _ref5.outerTagName,
        overscanColumnsCount = _ref5.overscanColumnsCount,
        overscanCount = _ref5.overscanCount,
        overscanRowsCount = _ref5.overscanRowsCount,
        width = _ref5.width;
    var instance = _ref6.instance;
  
    if (process.env.NODE_ENV !== 'production') {
      if (typeof overscanCount === 'number') {
        if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
          devWarningsOverscanCount.add(instance);
          console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
        }
      }
  
      if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
        if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
          devWarningsOverscanRowsColumnsCount.add(instance);
          console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
        }
      }
  
      if (innerTagName != null || outerTagName != null) {
        if (devWarningsTagName && !devWarningsTagName.has(instance)) {
          devWarningsTagName.add(instance);
          console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
        }
      }
  
      if (children == null) {
        throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
      }
  
      switch (direction) {
        case 'ltr':
        case 'rtl':
          // Valid values
          break;
  
        default:
          throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
      }
  
      if (typeof width !== 'number') {
        throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
      }
  
      if (typeof height !== 'number') {
        throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
      }
    }
  };
  
  var DEFAULT_ESTIMATED_ITEM_SIZE = 50;
  
  var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {
    var rowCount = _ref.rowCount;
    var rowMetadataMap = _ref2.rowMetadataMap,
        estimatedRowHeight = _ref2.estimatedRowHeight,
        lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
    var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
    // https://github.com/bvaughn/react-window/pull/138
  
    if (lastMeasuredRowIndex >= rowCount) {
      lastMeasuredRowIndex = rowCount - 1;
    }
  
    if (lastMeasuredRowIndex >= 0) {
      var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
      totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
    }
  
    var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
    var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
    return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
  };
  
  var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {
    var columnCount = _ref3.columnCount;
    var columnMetadataMap = _ref4.columnMetadataMap,
        estimatedColumnWidth = _ref4.estimatedColumnWidth,
        lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
    var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
    // https://github.com/bvaughn/react-window/pull/138
  
    if (lastMeasuredColumnIndex >= columnCount) {
      lastMeasuredColumnIndex = columnCount - 1;
    }
  
    if (lastMeasuredColumnIndex >= 0) {
      var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
      totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
    }
  
    var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
    var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
    return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
  };
  
  var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {
    var itemMetadataMap, itemSize, lastMeasuredIndex;
  
    if (itemType === 'column') {
      itemMetadataMap = instanceProps.columnMetadataMap;
      itemSize = props.columnWidth;
      lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
    } else {
      itemMetadataMap = instanceProps.rowMetadataMap;
      itemSize = props.rowHeight;
      lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
    }
  
    if (index > lastMeasuredIndex) {
      var offset = 0;
  
      if (lastMeasuredIndex >= 0) {
        var itemMetadata = itemMetadataMap[lastMeasuredIndex];
        offset = itemMetadata.offset + itemMetadata.size;
      }
  
      for (var i = lastMeasuredIndex + 1; i <= index; i++) {
        var size = itemSize(i);
        itemMetadataMap[i] = {
          offset: offset,
          size: size
        };
        offset += size;
      }
  
      if (itemType === 'column') {
        instanceProps.lastMeasuredColumnIndex = index;
      } else {
        instanceProps.lastMeasuredRowIndex = index;
      }
    }
  
    return itemMetadataMap[index];
  };
  
  var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {
    var itemMetadataMap, lastMeasuredIndex;
  
    if (itemType === 'column') {
      itemMetadataMap = instanceProps.columnMetadataMap;
      lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
    } else {
      itemMetadataMap = instanceProps.rowMetadataMap;
      lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
    }
  
    var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
  
    if (lastMeasuredItemOffset >= offset) {
      // If we've already measured items within this range just use a binary search as it's faster.
      return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);
    } else {
      // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
      // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
      // The overall complexity for this approach is O(log n).
      return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
    }
  };
  
  var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {
    while (low <= high) {
      var middle = low + Math.floor((high - low) / 2);
      var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;
  
      if (currentOffset === offset) {
        return middle;
      } else if (currentOffset < offset) {
        low = middle + 1;
      } else if (currentOffset > offset) {
        high = middle - 1;
      }
    }
  
    if (low > 0) {
      return low - 1;
    } else {
      return 0;
    }
  };
  
  var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {
    var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
    var interval = 1;
  
    while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {
      index += interval;
      interval *= 2;
    }
  
    return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
  };
  
  var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {
    var size = itemType === 'column' ? props.width : props.height;
    var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
    // To ensure it reflects actual measurements instead of just estimates.
  
    var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);
    var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
    var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
  
    if (align === 'smart') {
      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
        align = 'auto';
      } else {
        align = 'center';
      }
    }
  
    switch (align) {
      case 'start':
        return maxOffset;
  
      case 'end':
        return minOffset;
  
      case 'center':
        return Math.round(minOffset + (maxOffset - minOffset) / 2);
  
      case 'auto':
      default:
        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
          return scrollOffset;
        } else if (minOffset > maxOffset) {
          // Because we only take into account the scrollbar size when calculating minOffset
          // this value can be larger than maxOffset when at the end of the list
          return minOffset;
        } else if (scrollOffset < minOffset) {
          return minOffset;
        } else {
          return maxOffset;
        }
  
    }
  };
  
  var VariableSizeGrid =
  /*#__PURE__*/
  createGridComponent({
    getColumnOffset: function getColumnOffset(props, index, instanceProps) {
      return getItemMetadata('column', props, index, instanceProps).offset;
    },
    getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {
      return findNearestItem('column', props, instanceProps, scrollLeft);
    },
    getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {
      var columnCount = props.columnCount,
          width = props.width;
      var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);
      var maxOffset = scrollLeft + width;
      var offset = itemMetadata.offset + itemMetadata.size;
      var stopIndex = startIndex;
  
      while (stopIndex < columnCount - 1 && offset < maxOffset) {
        stopIndex++;
        offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
      }
  
      return stopIndex;
    },
    getColumnWidth: function getColumnWidth(props, index, instanceProps) {
      return instanceProps.columnMetadataMap[index].size;
    },
    getEstimatedTotalHeight: getEstimatedTotalHeight,
    getEstimatedTotalWidth: getEstimatedTotalWidth,
    getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
      return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);
    },
    getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
      return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);
    },
    getRowOffset: function getRowOffset(props, index, instanceProps) {
      return getItemMetadata('row', props, index, instanceProps).offset;
    },
    getRowHeight: function getRowHeight(props, index, instanceProps) {
      return instanceProps.rowMetadataMap[index].size;
    },
    getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {
      return findNearestItem('row', props, instanceProps, scrollTop);
    },
    getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {
      var rowCount = props.rowCount,
          height = props.height;
      var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);
      var maxOffset = scrollTop + height;
      var offset = itemMetadata.offset + itemMetadata.size;
      var stopIndex = startIndex;
  
      while (stopIndex < rowCount - 1 && offset < maxOffset) {
        stopIndex++;
        offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
      }
  
      return stopIndex;
    },
    initInstanceProps: function initInstanceProps(props, instance) {
      var _ref5 = props,
          estimatedColumnWidth = _ref5.estimatedColumnWidth,
          estimatedRowHeight = _ref5.estimatedRowHeight;
      var instanceProps = {
        columnMetadataMap: {},
        estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
        estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
        lastMeasuredColumnIndex: -1,
        lastMeasuredRowIndex: -1,
        rowMetadataMap: {}
      };
  
      instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {
        if (shouldForceUpdate === void 0) {
          shouldForceUpdate = true;
        }
  
        instance.resetAfterIndices({
          columnIndex: columnIndex,
          shouldForceUpdate: shouldForceUpdate
        });
      };
  
      instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {
        if (shouldForceUpdate === void 0) {
          shouldForceUpdate = true;
        }
  
        instance.resetAfterIndices({
          rowIndex: rowIndex,
          shouldForceUpdate: shouldForceUpdate
        });
      };
  
      instance.resetAfterIndices = function (_ref6) {
        var columnIndex = _ref6.columnIndex,
            rowIndex = _ref6.rowIndex,
            _ref6$shouldForceUpda = _ref6.shouldForceUpdate,
            shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;
  
        if (typeof columnIndex === 'number') {
          instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);
        }
  
        if (typeof rowIndex === 'number') {
          instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);
        } // We could potentially optimize further by only evicting styles after this index,
        // But since styles are only cached while scrolling is in progress-
        // It seems an unnecessary optimization.
        // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
  
  
        instance._getItemStyleCache(-1);
  
        if (shouldForceUpdate) {
          instance.forceUpdate();
        }
      };
  
      return instanceProps;
    },
    shouldResetStyleCacheOnItemSizeChange: false,
    validateProps: function validateProps(_ref7) {
      var columnWidth = _ref7.columnWidth,
          rowHeight = _ref7.rowHeight;
  
      if (process.env.NODE_ENV !== 'production') {
        if (typeof columnWidth !== 'function') {
          throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
        } else if (typeof rowHeight !== 'function') {
          throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
        }
      }
    }
  });
  
  var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
  
  var defaultItemKey$1 = function defaultItemKey(index, data) {
    return index;
  }; // In DEV mode, this Set helps us only log a warning once per component instance.
  // This avoids spamming the console every time a render happens.
  
  
  var devWarningsDirection = null;
  var devWarningsTagName$1 = null;
  
  if (process.env.NODE_ENV !== 'production') {
    if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
      devWarningsDirection =
      /*#__PURE__*/
      new WeakSet();
      devWarningsTagName$1 =
      /*#__PURE__*/
      new WeakSet();
    }
  }
  
  function createListComponent(_ref) {
    var _class, _temp;
  
    var getItemOffset = _ref.getItemOffset,
        getEstimatedTotalSize = _ref.getEstimatedTotalSize,
        getItemSize = _ref.getItemSize,
        getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
        getStartIndexForOffset = _ref.getStartIndexForOffset,
        getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
        initInstanceProps = _ref.initInstanceProps,
        shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
        validateProps = _ref.validateProps;
    return _temp = _class =
    /*#__PURE__*/
    function (_PureComponent) {
      _inheritsLoose(List, _PureComponent);
  
      // Always use explicit constructor for React components.
      // It produces less code after transpilation. (#26)
      // eslint-disable-next-line no-useless-constructor
      function List(props) {
        var _this;
  
        _this = _PureComponent.call(this, props) || this;
        _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
        _this._outerRef = void 0;
        _this._resetIsScrollingTimeoutId = null;
        _this.state = {
          instance: _assertThisInitialized(_assertThisInitialized(_this)),
          isScrolling: false,
          scrollDirection: 'forward',
          scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
          scrollUpdateWasRequested: false
        };
        _this._callOnItemsRendered = void 0;
        _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
          return _this.props.onItemsRendered({
            overscanStartIndex: overscanStartIndex,
            overscanStopIndex: overscanStopIndex,
            visibleStartIndex: visibleStartIndex,
            visibleStopIndex: visibleStopIndex
          });
        });
        _this._callOnScroll = void 0;
        _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
          return _this.props.onScroll({
            scrollDirection: scrollDirection,
            scrollOffset: scrollOffset,
            scrollUpdateWasRequested: scrollUpdateWasRequested
          });
        });
        _this._getItemStyle = void 0;
  
        _this._getItemStyle = function (index) {
          var _this$props = _this.props,
              direction = _this$props.direction,
              itemSize = _this$props.itemSize,
              layout = _this$props.layout;
  
          var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
  
          var style;
  
          if (itemStyleCache.hasOwnProperty(index)) {
            style = itemStyleCache[index];
          } else {
            var _style;
  
            var _offset = getItemOffset(_this.props, index, _this._instanceProps);
  
            var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
  
            var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
            itemStyleCache[index] = style = (_style = {
              position: 'absolute'
            }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);
          }
  
          return style;
        };
  
        _this._getItemStyleCache = void 0;
        _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
          return {};
        });
  
        _this._onScrollHorizontal = function (event) {
          var _event$currentTarget = event.currentTarget,
              clientWidth = _event$currentTarget.clientWidth,
              scrollLeft = _event$currentTarget.scrollLeft,
              scrollWidth = _event$currentTarget.scrollWidth;
  
          _this.setState(function (prevState) {
            if (prevState.scrollOffset === scrollLeft) {
              // Scroll position may have been updated by cDM/cDU,
              // In which case we don't need to trigger another render,
              // And we don't want to update state.isScrolling.
              return null;
            }
  
            var direction = _this.props.direction;
            var scrollOffset = scrollLeft;
  
            if (direction === 'rtl') {
              // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
              // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
              // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
              // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
              switch (getRTLOffsetType()) {
                case 'negative':
                  scrollOffset = -scrollLeft;
                  break;
  
                case 'positive-descending':
                  scrollOffset = scrollWidth - clientWidth - scrollLeft;
                  break;
              }
            } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
  
  
            scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
            return {
              isScrolling: true,
              scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
              scrollOffset: scrollOffset,
              scrollUpdateWasRequested: false
            };
          }, _this._resetIsScrollingDebounced);
        };
  
        _this._onScrollVertical = function (event) {
          var _event$currentTarget2 = event.currentTarget,
              clientHeight = _event$currentTarget2.clientHeight,
              scrollHeight = _event$currentTarget2.scrollHeight,
              scrollTop = _event$currentTarget2.scrollTop;
  
          _this.setState(function (prevState) {
            if (prevState.scrollOffset === scrollTop) {
              // Scroll position may have been updated by cDM/cDU,
              // In which case we don't need to trigger another render,
              // And we don't want to update state.isScrolling.
              return null;
            } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
  
  
            var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
            return {
              isScrolling: true,
              scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
              scrollOffset: scrollOffset,
              scrollUpdateWasRequested: false
            };
          }, _this._resetIsScrollingDebounced);
        };
  
        _this._outerRefSetter = function (ref) {
          var outerRef = _this.props.outerRef;
          _this._outerRef = ref;
  
          if (typeof outerRef === 'function') {
            outerRef(ref);
          } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
            outerRef.current = ref;
          }
        };
  
        _this._resetIsScrollingDebounced = function () {
          if (_this._resetIsScrollingTimeoutId !== null) {
            cancelTimeout(_this._resetIsScrollingTimeoutId);
          }
  
          _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
        };
  
        _this._resetIsScrolling = function () {
          _this._resetIsScrollingTimeoutId = null;
  
          _this.setState({
            isScrolling: false
          }, function () {
            // Clear style cache after state update has been committed.
            // This way we don't break pure sCU for items that don't use isScrolling param.
            _this._getItemStyleCache(-1, null);
          });
        };
  
        return _this;
      }
  
      List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
        validateSharedProps$1(nextProps, prevState);
        validateProps(nextProps);
        return null;
      };
  
      var _proto = List.prototype;
  
      _proto.scrollTo = function scrollTo(scrollOffset) {
        scrollOffset = Math.max(0, scrollOffset);
        this.setState(function (prevState) {
          if (prevState.scrollOffset === scrollOffset) {
            return null;
          }
  
          return {
            scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
            scrollOffset: scrollOffset,
            scrollUpdateWasRequested: true
          };
        }, this._resetIsScrollingDebounced);
      };
  
      _proto.scrollToItem = function scrollToItem(index, align) {
        if (align === void 0) {
          align = 'auto';
        }
  
        var itemCount = this.props.itemCount;
        var scrollOffset = this.state.scrollOffset;
        index = Math.max(0, Math.min(index, itemCount - 1));
        this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
      };
  
      _proto.componentDidMount = function componentDidMount() {
        var _this$props2 = this.props,
            direction = _this$props2.direction,
            initialScrollOffset = _this$props2.initialScrollOffset,
            layout = _this$props2.layout;
  
        if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
          var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
  
          if (direction === 'horizontal' || layout === 'horizontal') {
            outerRef.scrollLeft = initialScrollOffset;
          } else {
            outerRef.scrollTop = initialScrollOffset;
          }
        }
  
        this._callPropsCallbacks();
      };
  
      _proto.componentDidUpdate = function componentDidUpdate() {
        var _this$props3 = this.props,
            direction = _this$props3.direction,
            layout = _this$props3.layout;
        var _this$state = this.state,
            scrollOffset = _this$state.scrollOffset,
            scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
  
        if (scrollUpdateWasRequested && this._outerRef != null) {
          var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
  
          if (direction === 'horizontal' || layout === 'horizontal') {
            if (direction === 'rtl') {
              // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
              // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
              // So we need to determine which browser behavior we're dealing with, and mimic it.
              switch (getRTLOffsetType()) {
                case 'negative':
                  outerRef.scrollLeft = -scrollOffset;
                  break;
  
                case 'positive-ascending':
                  outerRef.scrollLeft = scrollOffset;
                  break;
  
                default:
                  var clientWidth = outerRef.clientWidth,
                      scrollWidth = outerRef.scrollWidth;
                  outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
                  break;
              }
            } else {
              outerRef.scrollLeft = scrollOffset;
            }
          } else {
            outerRef.scrollTop = scrollOffset;
          }
        }
  
        this._callPropsCallbacks();
      };
  
      _proto.componentWillUnmount = function componentWillUnmount() {
        if (this._resetIsScrollingTimeoutId !== null) {
          cancelTimeout(this._resetIsScrollingTimeoutId);
        }
      };
  
      _proto.render = function render() {
        var _this$props4 = this.props,
            children = _this$props4.children,
            className = _this$props4.className,
            direction = _this$props4.direction,
            height = _this$props4.height,
            innerRef = _this$props4.innerRef,
            innerElementType = _this$props4.innerElementType,
            innerTagName = _this$props4.innerTagName,
            itemCount = _this$props4.itemCount,
            itemData = _this$props4.itemData,
            _this$props4$itemKey = _this$props4.itemKey,
            itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,
            layout = _this$props4.layout,
            outerElementType = _this$props4.outerElementType,
            outerTagName = _this$props4.outerTagName,
            style = _this$props4.style,
            useIsScrolling = _this$props4.useIsScrolling,
            width = _this$props4.width;
        var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
  
        var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
        var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
  
        var _this$_getRangeToRend = this._getRangeToRender(),
            startIndex = _this$_getRangeToRend[0],
            stopIndex = _this$_getRangeToRend[1];
  
        var items = [];
  
        if (itemCount > 0) {
          for (var _index = startIndex; _index <= stopIndex; _index++) {
            items.push(createElement(children, {
              data: itemData,
              key: itemKey(_index, itemData),
              index: _index,
              isScrolling: useIsScrolling ? isScrolling : undefined,
              style: this._getItemStyle(_index)
            }));
          }
        } // Read this value AFTER items have been created,
        // So their actual sizes (if variable) are taken into consideration.
  
  
        var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
        return createElement(outerElementType || outerTagName || 'div', {
          className: className,
          onScroll: onScroll,
          ref: this._outerRefSetter,
          style: _extends({
            position: 'relative',
            height: height,
            width: width,
            overflow: 'auto',
            WebkitOverflowScrolling: 'touch',
            willChange: 'transform',
            direction: direction
          }, style)
        }, createElement(innerElementType || innerTagName || 'div', {
          children: items,
          ref: innerRef,
          style: {
            height: isHorizontal ? '100%' : estimatedTotalSize,
            pointerEvents: isScrolling ? 'none' : undefined,
            width: isHorizontal ? estimatedTotalSize : '100%'
          }
        }));
      };
  
      _proto._callPropsCallbacks = function _callPropsCallbacks() {
        if (typeof this.props.onItemsRendered === 'function') {
          var itemCount = this.props.itemCount;
  
          if (itemCount > 0) {
            var _this$_getRangeToRend2 = this._getRangeToRender(),
                _overscanStartIndex = _this$_getRangeToRend2[0],
                _overscanStopIndex = _this$_getRangeToRend2[1],
                _visibleStartIndex = _this$_getRangeToRend2[2],
                _visibleStopIndex = _this$_getRangeToRend2[3];
  
            this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
          }
        }
  
        if (typeof this.props.onScroll === 'function') {
          var _this$state2 = this.state,
              _scrollDirection = _this$state2.scrollDirection,
              _scrollOffset = _this$state2.scrollOffset,
              _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
  
          this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
        }
      }; // Lazily create and cache item styles while scrolling,
      // So that pure component sCU will prevent re-renders.
      // We maintain this cache, and pass a style prop rather than index,
      // So that List can clear cached styles and force item re-render if necessary.
  
  
      _proto._getRangeToRender = function _getRangeToRender() {
        var _this$props5 = this.props,
            itemCount = _this$props5.itemCount,
            overscanCount = _this$props5.overscanCount;
        var _this$state3 = this.state,
            isScrolling = _this$state3.isScrolling,
            scrollDirection = _this$state3.scrollDirection,
            scrollOffset = _this$state3.scrollOffset;
  
        if (itemCount === 0) {
          return [0, 0, 0, 0];
        }
  
        var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
        var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
        // If there isn't at least one extra item, tab loops back around.
  
        var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
        var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
        return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
      };
  
      return List;
    }(PureComponent), _class.defaultProps = {
      direction: 'ltr',
      itemData: undefined,
      layout: 'vertical',
      overscanCount: 2,
      useIsScrolling: false
    }, _temp;
  } // NOTE: I considered further wrapping individual items with a pure ListItem component.
  // This would avoid ever calling the render function for the same index more than once,
  // But it would also add the overhead of a lot of components/fibers.
  // I assume people already do this (render function returning a class component),
  // So my doing it would just unnecessarily double the wrappers.
  
  var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
    var children = _ref2.children,
        direction = _ref2.direction,
        height = _ref2.height,
        layout = _ref2.layout,
        innerTagName = _ref2.innerTagName,
        outerTagName = _ref2.outerTagName,
        width = _ref2.width;
    var instance = _ref3.instance;
  
    if (process.env.NODE_ENV !== 'production') {
      if (innerTagName != null || outerTagName != null) {
        if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
          devWarningsTagName$1.add(instance);
          console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
        }
      } // TODO Deprecate direction "horizontal"
  
  
      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
  
      switch (direction) {
        case 'horizontal':
        case 'vertical':
          if (devWarningsDirection && !devWarningsDirection.has(instance)) {
            devWarningsDirection.add(instance);
            console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
          }
  
          break;
  
        case 'ltr':
        case 'rtl':
          // Valid values
          break;
  
        default:
          throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
      }
  
      switch (layout) {
        case 'horizontal':
        case 'vertical':
          // Valid values
          break;
  
        default:
          throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ("\"" + layout + "\" was specified."));
      }
  
      if (children == null) {
        throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
      }
  
      if (isHorizontal && typeof width !== 'number') {
        throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
      } else if (!isHorizontal && typeof height !== 'number') {
        throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
      }
    }
  };
  
  var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;
  
  var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {
    var _ref = props,
        itemSize = _ref.itemSize;
    var itemMetadataMap = instanceProps.itemMetadataMap,
        lastMeasuredIndex = instanceProps.lastMeasuredIndex;
  
    if (index > lastMeasuredIndex) {
      var offset = 0;
  
      if (lastMeasuredIndex >= 0) {
        var itemMetadata = itemMetadataMap[lastMeasuredIndex];
        offset = itemMetadata.offset + itemMetadata.size;
      }
  
      for (var i = lastMeasuredIndex + 1; i <= index; i++) {
        var size = itemSize(i);
        itemMetadataMap[i] = {
          offset: offset,
          size: size
        };
        offset += size;
      }
  
      instanceProps.lastMeasuredIndex = index;
    }
  
    return itemMetadataMap[index];
  };
  
  var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {
    var itemMetadataMap = instanceProps.itemMetadataMap,
        lastMeasuredIndex = instanceProps.lastMeasuredIndex;
    var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
  
    if (lastMeasuredItemOffset >= offset) {
      // If we've already measured items within this range just use a binary search as it's faster.
      return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
    } else {
      // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
      // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
      // The overall complexity for this approach is O(log n).
      return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
    }
  };
  
  var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {
    while (low <= high) {
      var middle = low + Math.floor((high - low) / 2);
      var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;
  
      if (currentOffset === offset) {
        return middle;
      } else if (currentOffset < offset) {
        low = middle + 1;
      } else if (currentOffset > offset) {
        high = middle - 1;
      }
    }
  
    if (low > 0) {
      return low - 1;
    } else {
      return 0;
    }
  };
  
  var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {
    var itemCount = props.itemCount;
    var interval = 1;
  
    while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {
      index += interval;
      interval *= 2;
    }
  
    return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
  };
  
  var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {
    var itemCount = _ref2.itemCount;
    var itemMetadataMap = _ref3.itemMetadataMap,
        estimatedItemSize = _ref3.estimatedItemSize,
        lastMeasuredIndex = _ref3.lastMeasuredIndex;
    var totalSizeOfMeasuredItems = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
    // https://github.com/bvaughn/react-window/pull/138
  
    if (lastMeasuredIndex >= itemCount) {
      lastMeasuredIndex = itemCount - 1;
    }
  
    if (lastMeasuredIndex >= 0) {
      var itemMetadata = itemMetadataMap[lastMeasuredIndex];
      totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
    }
  
    var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
    var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
    return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
  };
  
  var VariableSizeList =
  /*#__PURE__*/
  createListComponent({
    getItemOffset: function getItemOffset(props, index, instanceProps) {
      return getItemMetadata$1(props, index, instanceProps).offset;
    },
    getItemSize: function getItemSize(props, index, instanceProps) {
      return instanceProps.itemMetadataMap[index].size;
    },
    getEstimatedTotalSize: getEstimatedTotalSize,
    getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {
      var direction = props.direction,
          height = props.height,
          layout = props.layout,
          width = props.width; // TODO Deprecate direction "horizontal"
  
      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
      var size = isHorizontal ? width : height;
      var itemMetadata = getItemMetadata$1(props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
      // To ensure it reflects actual measurements instead of just estimates.
  
      var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
      var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
      var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
  
      if (align === 'smart') {
        if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
          align = 'auto';
        } else {
          align = 'center';
        }
      }
  
      switch (align) {
        case 'start':
          return maxOffset;
  
        case 'end':
          return minOffset;
  
        case 'center':
          return Math.round(minOffset + (maxOffset - minOffset) / 2);
  
        case 'auto':
        default:
          if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
            return scrollOffset;
          } else if (scrollOffset < minOffset) {
            return minOffset;
          } else {
            return maxOffset;
          }
  
      }
    },
    getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
      return findNearestItem$1(props, instanceProps, offset);
    },
    getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {
      var direction = props.direction,
          height = props.height,
          itemCount = props.itemCount,
          layout = props.layout,
          width = props.width; // TODO Deprecate direction "horizontal"
  
      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
      var size = isHorizontal ? width : height;
      var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);
      var maxOffset = scrollOffset + size;
      var offset = itemMetadata.offset + itemMetadata.size;
      var stopIndex = startIndex;
  
      while (stopIndex < itemCount - 1 && offset < maxOffset) {
        stopIndex++;
        offset += getItemMetadata$1(props, stopIndex, instanceProps).size;
      }
  
      return stopIndex;
    },
    initInstanceProps: function initInstanceProps(props, instance) {
      var _ref4 = props,
          estimatedItemSize = _ref4.estimatedItemSize;
      var instanceProps = {
        itemMetadataMap: {},
        estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,
        lastMeasuredIndex: -1
      };
  
      instance.resetAfterIndex = function (index, shouldForceUpdate) {
        if (shouldForceUpdate === void 0) {
          shouldForceUpdate = true;
        }
  
        instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); // We could potentially optimize further by only evicting styles after this index,
        // But since styles are only cached while scrolling is in progress-
        // It seems an unnecessary optimization.
        // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
  
        instance._getItemStyleCache(-1);
  
        if (shouldForceUpdate) {
          instance.forceUpdate();
        }
      };
  
      return instanceProps;
    },
    shouldResetStyleCacheOnItemSizeChange: false,
    validateProps: function validateProps(_ref5) {
      var itemSize = _ref5.itemSize;
  
      if (process.env.NODE_ENV !== 'production') {
        if (typeof itemSize !== 'function') {
          throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
        }
      }
    }
  });
  
  var FixedSizeGrid =
  /*#__PURE__*/
  createGridComponent({
    getColumnOffset: function getColumnOffset(_ref, index) {
      var columnWidth = _ref.columnWidth;
      return index * columnWidth;
    },
    getColumnWidth: function getColumnWidth(_ref2, index) {
      var columnWidth = _ref2.columnWidth;
      return columnWidth;
    },
    getRowOffset: function getRowOffset(_ref3, index) {
      var rowHeight = _ref3.rowHeight;
      return index * rowHeight;
    },
    getRowHeight: function getRowHeight(_ref4, index) {
      var rowHeight = _ref4.rowHeight;
      return rowHeight;
    },
    getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
      var rowCount = _ref5.rowCount,
          rowHeight = _ref5.rowHeight;
      return rowHeight * rowCount;
    },
    getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
      var columnCount = _ref6.columnCount,
          columnWidth = _ref6.columnWidth;
      return columnWidth * columnCount;
    },
    getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
      var columnCount = _ref7.columnCount,
          columnWidth = _ref7.columnWidth,
          width = _ref7.width;
      var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
      var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
      var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
  
      if (align === 'smart') {
        if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
          align = 'auto';
        } else {
          align = 'center';
        }
      }
  
      switch (align) {
        case 'start':
          return maxOffset;
  
        case 'end':
          return minOffset;
  
        case 'center':
          // "Centered" offset is usually the average of the min and max.
          // But near the edges of the list, this doesn't hold true.
          var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
  
          if (middleOffset < Math.ceil(width / 2)) {
            return 0; // near the beginning
          } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
            return lastColumnOffset; // near the end
          } else {
            return middleOffset;
          }
  
        case 'auto':
        default:
          if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
            return scrollLeft;
          } else if (minOffset > maxOffset) {
            // Because we only take into account the scrollbar size when calculating minOffset
            // this value can be larger than maxOffset when at the end of the list
            return minOffset;
          } else if (scrollLeft < minOffset) {
            return minOffset;
          } else {
            return maxOffset;
          }
  
      }
    },
    getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
      var rowHeight = _ref8.rowHeight,
          height = _ref8.height,
          rowCount = _ref8.rowCount;
      var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
      var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
      var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
  
      if (align === 'smart') {
        if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
          align = 'auto';
        } else {
          align = 'center';
        }
      }
  
      switch (align) {
        case 'start':
          return maxOffset;
  
        case 'end':
          return minOffset;
  
        case 'center':
          // "Centered" offset is usually the average of the min and max.
          // But near the edges of the list, this doesn't hold true.
          var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
  
          if (middleOffset < Math.ceil(height / 2)) {
            return 0; // near the beginning
          } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
            return lastRowOffset; // near the end
          } else {
            return middleOffset;
          }
  
        case 'auto':
        default:
          if (scrollTop >= minOffset && scrollTop <= maxOffset) {
            return scrollTop;
          } else if (minOffset > maxOffset) {
            // Because we only take into account the scrollbar size when calculating minOffset
            // this value can be larger than maxOffset when at the end of the list
            return minOffset;
          } else if (scrollTop < minOffset) {
            return minOffset;
          } else {
            return maxOffset;
          }
  
      }
    },
    getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
      var columnWidth = _ref9.columnWidth,
          columnCount = _ref9.columnCount;
      return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
    },
    getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
      var columnWidth = _ref10.columnWidth,
          columnCount = _ref10.columnCount,
          width = _ref10.width;
      var left = startIndex * columnWidth;
      var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
      return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
      ));
    },
    getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
      var rowHeight = _ref11.rowHeight,
          rowCount = _ref11.rowCount;
      return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
    },
    getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
      var rowHeight = _ref12.rowHeight,
          rowCount = _ref12.rowCount,
          height = _ref12.height;
      var top = startIndex * rowHeight;
      var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
      return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
      ));
    },
    initInstanceProps: function initInstanceProps(props) {// Noop
    },
    shouldResetStyleCacheOnItemSizeChange: true,
    validateProps: function validateProps(_ref13) {
      var columnWidth = _ref13.columnWidth,
          rowHeight = _ref13.rowHeight;
  
      if (process.env.NODE_ENV !== 'production') {
        if (typeof columnWidth !== 'number') {
          throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
        }
  
        if (typeof rowHeight !== 'number') {
          throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
        }
      }
    }
  });
  
  var FixedSizeList =
  /*#__PURE__*/
  createListComponent({
    getItemOffset: function getItemOffset(_ref, index) {
      var itemSize = _ref.itemSize;
      return index * itemSize;
    },
    getItemSize: function getItemSize(_ref2, index) {
      var itemSize = _ref2.itemSize;
      return itemSize;
    },
    getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
      var itemCount = _ref3.itemCount,
          itemSize = _ref3.itemSize;
      return itemSize * itemCount;
    },
    getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
      var direction = _ref4.direction,
          height = _ref4.height,
          itemCount = _ref4.itemCount,
          itemSize = _ref4.itemSize,
          layout = _ref4.layout,
          width = _ref4.width;
      // TODO Deprecate direction "horizontal"
      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
      var size = isHorizontal ? width : height;
      var lastItemOffset = Math.max(0, itemCount * itemSize - size);
      var maxOffset = Math.min(lastItemOffset, index * itemSize);
      var minOffset = Math.max(0, index * itemSize - size + itemSize);
  
      if (align === 'smart') {
        if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
          align = 'auto';
        } else {
          align = 'center';
        }
      }
  
      switch (align) {
        case 'start':
          return maxOffset;
  
        case 'end':
          return minOffset;
  
        case 'center':
          {
            // "Centered" offset is usually the average of the min and max.
            // But near the edges of the list, this doesn't hold true.
            var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
  
            if (middleOffset < Math.ceil(size / 2)) {
              return 0; // near the beginning
            } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
              return lastItemOffset; // near the end
            } else {
              return middleOffset;
            }
          }
  
        case 'auto':
        default:
          if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
            return scrollOffset;
          } else if (scrollOffset < minOffset) {
            return minOffset;
          } else {
            return maxOffset;
          }
  
      }
    },
    getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
      var itemCount = _ref5.itemCount,
          itemSize = _ref5.itemSize;
      return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
    },
    getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
      var direction = _ref6.direction,
          height = _ref6.height,
          itemCount = _ref6.itemCount,
          itemSize = _ref6.itemSize,
          layout = _ref6.layout,
          width = _ref6.width;
      // TODO Deprecate direction "horizontal"
      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
      var offset = startIndex * itemSize;
      var size = isHorizontal ? width : height;
      var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
      return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
      ));
    },
    initInstanceProps: function initInstanceProps(props) {// Noop
    },
    shouldResetStyleCacheOnItemSizeChange: true,
    validateProps: function validateProps(_ref7) {
      var itemSize = _ref7.itemSize;
  
      if (process.env.NODE_ENV !== 'production') {
        if (typeof itemSize !== 'number') {
          throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
        }
      }
    }
  });
  
  // Pulled from react-compat
  // https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
  function shallowDiffers(prev, next) {
    for (var attribute in prev) {
      if (!(attribute in next)) {
        return true;
      }
    }
  
    for (var _attribute in next) {
      if (prev[_attribute] !== next[_attribute]) {
        return true;
      }
    }
  
    return false;
  }
  
  // It knows to compare individual style props and ignore the wrapper object.
  // See https://reactjs.org/docs/react-api.html#reactmemo
  
  function areEqual(prevProps, nextProps) {
    var prevStyle = prevProps.style,
        prevRest = _objectWithoutPropertiesLoose(prevProps, ["style"]);
  
    var nextStyle = nextProps.style,
        nextRest = _objectWithoutPropertiesLoose(nextProps, ["style"]);
  
    return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
  }
  
  // It knows to compare individual style props and ignore the wrapper object.
  // See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
  
  function shouldComponentUpdate(nextProps, nextState) {
    return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
  }
  
  export { VariableSizeGrid, VariableSizeList, FixedSizeGrid, FixedSizeList, areEqual, shouldComponentUpdate };
  //# sourceMappingURL=index.esm.js.map
  