@depup/react-virtualized 9.22.6-depup.0

package/dist/es/Collection/CollectionView.js

@@ -0,0 +1,544 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { polyfill } from 'react-lifecycles-compat';
+import createCallbackMemoizer from '../utils/createCallbackMemoizer';
+import getScrollbarSize from 'dom-helpers/scrollbarSize';
+
+// @TODO Merge Collection and CollectionView
+
+/**
+ * Specifies the number of milliseconds during which to disable pointer events while a scroll is in progress.
+ * This improves performance and makes scrolling smoother.
+ */
+var IS_SCROLLING_TIMEOUT = 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'
+};
+
+/**
+ * Monitors changes in properties (eg. cellCount) and state (eg. scroll offsets) to determine when rendering needs to occur.
+ * This component does not render any visible content itself; it defers to the specified :cellLayoutManager.
+ */
+var CollectionView = /*#__PURE__*/function (_React$PureComponent) {
+  function CollectionView() {
+    var _this;
+    _classCallCheck(this, CollectionView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, CollectionView, [].concat(args));
+
+    // If this component is being rendered server-side, getScrollbarSize() will return undefined.
+    // We handle this case in componentDidMount()
+    _defineProperty(_this, "state", {
+      isScrolling: false,
+      scrollLeft: 0,
+      scrollTop: 0
+    });
+    _defineProperty(_this, "_calculateSizeAndPositionDataOnNextUpdate", false);
+    // Invokes callbacks only when their values have changed.
+    _defineProperty(_this, "_onSectionRenderedMemoizer", createCallbackMemoizer());
+    _defineProperty(_this, "_onScrollMemoizer", createCallbackMemoizer(false));
+    _defineProperty(_this, "_invokeOnSectionRenderedHelper", function () {
+      var _this$props = _this.props,
+        cellLayoutManager = _this$props.cellLayoutManager,
+        onSectionRendered = _this$props.onSectionRendered;
+      _this._onSectionRenderedMemoizer({
+        callback: onSectionRendered,
+        indices: {
+          indices: cellLayoutManager.getLastRenderedIndices()
+        }
+      });
+    });
+    _defineProperty(_this, "_setScrollingContainerRef", function (ref) {
+      _this._scrollingContainer = ref;
+    });
+    _defineProperty(_this, "_updateScrollPositionForScrollToCell", function () {
+      var _this$props2 = _this.props,
+        cellLayoutManager = _this$props2.cellLayoutManager,
+        height = _this$props2.height,
+        scrollToAlignment = _this$props2.scrollToAlignment,
+        scrollToCell = _this$props2.scrollToCell,
+        width = _this$props2.width;
+      var _this$state = _this.state,
+        scrollLeft = _this$state.scrollLeft,
+        scrollTop = _this$state.scrollTop;
+      if (scrollToCell >= 0) {
+        var scrollPosition = cellLayoutManager.getScrollPositionForCell({
+          align: scrollToAlignment,
+          cellIndex: scrollToCell,
+          height: height,
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          width: width
+        });
+        if (scrollPosition.scrollLeft !== scrollLeft || scrollPosition.scrollTop !== scrollTop) {
+          _this._setScrollPosition(scrollPosition);
+        }
+      }
+    });
+    _defineProperty(_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) {
+        return;
+      }
+
+      // Prevent pointer events from interrupting a smooth scroll
+      _this._enablePointerEventsAfterDelay();
+
+      // 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 scrollTop never exceeds the total height.
+      var _this$props3 = _this.props,
+        cellLayoutManager = _this$props3.cellLayoutManager,
+        height = _this$props3.height,
+        isScrollingChange = _this$props3.isScrollingChange,
+        width = _this$props3.width;
+      var scrollbarSize = _this._scrollbarSize;
+      var _cellLayoutManager$ge = cellLayoutManager.getTotalSize(),
+        totalHeight = _cellLayoutManager$ge.height,
+        totalWidth = _cellLayoutManager$ge.width;
+      var scrollLeft = Math.max(0, Math.min(totalWidth - width + scrollbarSize, event.target.scrollLeft));
+      var scrollTop = Math.max(0, Math.min(totalHeight - height + scrollbarSize, event.target.scrollTop));
+
+      // 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) {
+        // Browsers with cancelable scroll events (eg. Firefox) interrupt scrolling animations if scrollTop/scrollLeft is set.
+        // Other browsers (eg. Safari) don't scroll as well without the help under certain conditions (DOM or style changes during scrolling).
+        // All things considered, this seems to be the best current work around that I'm aware of.
+        // For more information see https://github.com/bvaughn/react-virtualized/pull/124
+        var scrollPositionChangeReason = event.cancelable ? SCROLL_POSITION_CHANGE_REASONS.OBSERVED : SCROLL_POSITION_CHANGE_REASONS.REQUESTED;
+
+        // Synchronously set :isScrolling the first time (since _setNextState will reschedule its animation frame each time it's called)
+        if (!_this.state.isScrolling) {
+          isScrollingChange(true);
+        }
+        _this.setState({
+          isScrolling: true,
+          scrollLeft: scrollLeft,
+          scrollPositionChangeReason: scrollPositionChangeReason,
+          scrollTop: scrollTop
+        });
+      }
+      _this._invokeOnScrollMemoizer({
+        scrollLeft: scrollLeft,
+        scrollTop: scrollTop,
+        totalWidth: totalWidth,
+        totalHeight: totalHeight
+      });
+    });
+    _this._scrollbarSize = getScrollbarSize();
+    if (_this._scrollbarSize === undefined) {
+      _this._scrollbarSizeMeasured = false;
+      _this._scrollbarSize = 0;
+    } else {
+      _this._scrollbarSizeMeasured = true;
+    }
+    return _this;
+  }
+
+  /**
+   * Forced recompute of cell sizes and positions.
+   * This function should be called if cell sizes have changed but nothing else has.
+   * Since cell positions are calculated by callbacks, the collection view has no way of detecting when the underlying data has changed.
+   */
+  _inherits(CollectionView, _React$PureComponent);
+  return _createClass(CollectionView, [{
+    key: "recomputeCellSizesAndPositions",
+    value: function recomputeCellSizesAndPositions() {
+      this._calculateSizeAndPositionDataOnNextUpdate = true;
+      this.forceUpdate();
+    }
+
+    /* ---------------------------- Component lifecycle methods ---------------------------- */
+
+    /**
+     * @private
+     * 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: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props4 = this.props,
+        cellLayoutManager = _this$props4.cellLayoutManager,
+        scrollLeft = _this$props4.scrollLeft,
+        scrollToCell = _this$props4.scrollToCell,
+        scrollTop = _this$props4.scrollTop;
+
+      // If this component was first rendered server-side, scrollbar size will be undefined.
+      // In that event we need to remeasure.
+      if (!this._scrollbarSizeMeasured) {
+        this._scrollbarSize = getScrollbarSize();
+        this._scrollbarSizeMeasured = true;
+        this.setState({});
+      }
+      if (scrollToCell >= 0) {
+        this._updateScrollPositionForScrollToCell();
+      } else if (scrollLeft >= 0 || scrollTop >= 0) {
+        this._setScrollPosition({
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop
+        });
+      }
+
+      // Update onSectionRendered callback.
+      this._invokeOnSectionRenderedHelper();
+      var _cellLayoutManager$ge2 = cellLayoutManager.getTotalSize(),
+        totalHeight = _cellLayoutManager$ge2.height,
+        totalWidth = _cellLayoutManager$ge2.width;
+
+      // Initialize onScroll callback.
+      this._invokeOnScrollMemoizer({
+        scrollLeft: scrollLeft || 0,
+        scrollTop: scrollTop || 0,
+        totalHeight: totalHeight,
+        totalWidth: totalWidth
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$props5 = this.props,
+        height = _this$props5.height,
+        scrollToAlignment = _this$props5.scrollToAlignment,
+        scrollToCell = _this$props5.scrollToCell,
+        width = _this$props5.width;
+      var _this$state2 = this.state,
+        scrollLeft = _this$state2.scrollLeft,
+        scrollPositionChangeReason = _this$state2.scrollPositionChangeReason,
+        scrollTop = _this$state2.scrollTop;
+
+      // 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) {
+        if (scrollLeft >= 0 && scrollLeft !== prevState.scrollLeft && scrollLeft !== this._scrollingContainer.scrollLeft) {
+          this._scrollingContainer.scrollLeft = scrollLeft;
+        }
+        if (scrollTop >= 0 && scrollTop !== prevState.scrollTop && scrollTop !== this._scrollingContainer.scrollTop) {
+          this._scrollingContainer.scrollTop = scrollTop;
+        }
+      }
+
+      // Update scroll offsets if the current :scrollToCell values requires it
+      if (height !== prevProps.height || scrollToAlignment !== prevProps.scrollToAlignment || scrollToCell !== prevProps.scrollToCell || width !== prevProps.width) {
+        this._updateScrollPositionForScrollToCell();
+      }
+
+      // Update onRowsRendered callback if start/stop indices have changed
+      this._invokeOnSectionRenderedHelper();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._disablePointerEventsTimeoutId) {
+        clearTimeout(this._disablePointerEventsTimeoutId);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props6 = this.props,
+        autoHeight = _this$props6.autoHeight,
+        cellCount = _this$props6.cellCount,
+        cellLayoutManager = _this$props6.cellLayoutManager,
+        className = _this$props6.className,
+        height = _this$props6.height,
+        horizontalOverscanSize = _this$props6.horizontalOverscanSize,
+        id = _this$props6.id,
+        noContentRenderer = _this$props6.noContentRenderer,
+        style = _this$props6.style,
+        verticalOverscanSize = _this$props6.verticalOverscanSize,
+        width = _this$props6.width;
+      var _this$state3 = this.state,
+        isScrolling = _this$state3.isScrolling,
+        scrollLeft = _this$state3.scrollLeft,
+        scrollTop = _this$state3.scrollTop;
+
+      // Memoization reset
+      if (this._lastRenderedCellCount !== cellCount || this._lastRenderedCellLayoutManager !== cellLayoutManager || this._calculateSizeAndPositionDataOnNextUpdate) {
+        this._lastRenderedCellCount = cellCount;
+        this._lastRenderedCellLayoutManager = cellLayoutManager;
+        this._calculateSizeAndPositionDataOnNextUpdate = false;
+        cellLayoutManager.calculateSizeAndPositionData();
+      }
+      var _cellLayoutManager$ge3 = cellLayoutManager.getTotalSize(),
+        totalHeight = _cellLayoutManager$ge3.height,
+        totalWidth = _cellLayoutManager$ge3.width;
+
+      // Safely expand the rendered area by the specified overscan amount
+      var left = Math.max(0, scrollLeft - horizontalOverscanSize);
+      var top = Math.max(0, scrollTop - verticalOverscanSize);
+      var right = Math.min(totalWidth, scrollLeft + width + horizontalOverscanSize);
+      var bottom = Math.min(totalHeight, scrollTop + height + verticalOverscanSize);
+      var childrenToDisplay = height > 0 && width > 0 ? cellLayoutManager.cellRenderers({
+        height: bottom - top,
+        isScrolling: isScrolling,
+        width: right - left,
+        x: left,
+        y: top
+      }) : [];
+      var collectionStyle = {
+        boxSizing: 'border-box',
+        direction: 'ltr',
+        height: autoHeight ? 'auto' : height,
+        position: 'relative',
+        WebkitOverflowScrolling: 'touch',
+        width: width,
+        willChange: 'transform'
+      };
+
+      // 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 = totalHeight > height ? this._scrollbarSize : 0;
+      var horizontalScrollBarSize = totalWidth > width ? this._scrollbarSize : 0;
+
+      // 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
+      collectionStyle.overflowX = totalWidth + verticalScrollBarSize <= width ? 'hidden' : 'auto';
+      collectionStyle.overflowY = totalHeight + horizontalScrollBarSize <= height ? 'hidden' : 'auto';
+      return /*#__PURE__*/React.createElement("div", {
+        ref: this._setScrollingContainerRef,
+        "aria-label": this.props['aria-label'],
+        className: clsx('ReactVirtualized__Collection', className),
+        id: id,
+        onScroll: this._onScroll,
+        role: "grid",
+        style: _objectSpread(_objectSpread({}, collectionStyle), style),
+        tabIndex: 0
+      }, cellCount > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "ReactVirtualized__Collection__innerScrollContainer",
+        style: {
+          height: totalHeight,
+          maxHeight: totalHeight,
+          maxWidth: totalWidth,
+          overflow: 'hidden',
+          pointerEvents: isScrolling ? 'none' : '',
+          width: totalWidth
+        }
+      }, childrenToDisplay), cellCount === 0 && noContentRenderer());
+    }
+
+    /* ---------------------------- Helper methods ---------------------------- */
+
+    /**
+     * Sets an :isScrolling flag for a small window of time.
+     * This flag is used to disable pointer events on the scrollable portion of the Collection.
+     * This prevents jerky/stuttery mouse-wheel scrolling.
+     */
+  }, {
+    key: "_enablePointerEventsAfterDelay",
+    value: function _enablePointerEventsAfterDelay() {
+      var _this2 = this;
+      if (this._disablePointerEventsTimeoutId) {
+        clearTimeout(this._disablePointerEventsTimeoutId);
+      }
+      this._disablePointerEventsTimeoutId = setTimeout(function () {
+        var isScrollingChange = _this2.props.isScrollingChange;
+        isScrollingChange(false);
+        _this2._disablePointerEventsTimeoutId = null;
+        _this2.setState({
+          isScrolling: false
+        });
+      }, IS_SCROLLING_TIMEOUT);
+    }
+  }, {
+    key: "_invokeOnScrollMemoizer",
+    value: function _invokeOnScrollMemoizer(_ref) {
+      var _this3 = this;
+      var scrollLeft = _ref.scrollLeft,
+        scrollTop = _ref.scrollTop,
+        totalHeight = _ref.totalHeight,
+        totalWidth = _ref.totalWidth;
+      this._onScrollMemoizer({
+        callback: function callback(_ref2) {
+          var scrollLeft = _ref2.scrollLeft,
+            scrollTop = _ref2.scrollTop;
+          var _this3$props = _this3.props,
+            height = _this3$props.height,
+            onScroll = _this3$props.onScroll,
+            width = _this3$props.width;
+          onScroll({
+            clientHeight: height,
+            clientWidth: width,
+            scrollHeight: totalHeight,
+            scrollLeft: scrollLeft,
+            scrollTop: scrollTop,
+            scrollWidth: totalWidth
+          });
+        },
+        indices: {
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop
+        }
+      });
+    }
+  }, {
+    key: "_setScrollPosition",
+    value: function _setScrollPosition(_ref3) {
+      var scrollLeft = _ref3.scrollLeft,
+        scrollTop = _ref3.scrollTop;
+      var newState = {
+        scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.REQUESTED
+      };
+      if (scrollLeft >= 0) {
+        newState.scrollLeft = scrollLeft;
+      }
+      if (scrollTop >= 0) {
+        newState.scrollTop = scrollTop;
+      }
+      if (scrollLeft >= 0 && scrollLeft !== this.state.scrollLeft || scrollTop >= 0 && scrollTop !== this.state.scrollTop) {
+        this.setState(newState);
+      }
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      if (nextProps.cellCount === 0 && (prevState.scrollLeft !== 0 || prevState.scrollTop !== 0)) {
+        return {
+          scrollLeft: 0,
+          scrollTop: 0,
+          scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.REQUESTED
+        };
+      } else if (nextProps.scrollLeft !== prevState.scrollLeft || nextProps.scrollTop !== prevState.scrollTop) {
+        return {
+          scrollLeft: nextProps.scrollLeft != null ? nextProps.scrollLeft : prevState.scrollLeft,
+          scrollTop: nextProps.scrollTop != null ? nextProps.scrollTop : prevState.scrollTop,
+          scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.REQUESTED
+        };
+      }
+      return null;
+    }
+  }]);
+}(React.PureComponent);
+_defineProperty(CollectionView, "defaultProps", {
+  'aria-label': 'grid',
+  horizontalOverscanSize: 0,
+  noContentRenderer: function noContentRenderer() {
+    return null;
+  },
+  onScroll: function onScroll() {
+    return null;
+  },
+  onSectionRendered: function onSectionRendered() {
+    return null;
+  },
+  scrollToAlignment: 'auto',
+  scrollToCell: -1,
+  style: {},
+  verticalOverscanSize: 0
+});
+CollectionView.propTypes = process.env.NODE_ENV !== "production" ? {
+  'aria-label': PropTypes.string,
+  /**
+   * 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,
+  /**
+   * Number of cells in collection.
+   */
+  cellCount: PropTypes.number.isRequired,
+  /**
+   * Calculates cell sizes and positions and manages rendering the appropriate cells given a specified window.
+   */
+  cellLayoutManager: PropTypes.object.isRequired,
+  /**
+   * Optional custom CSS class name to attach to root Collection element.
+   */
+  className: PropTypes.string,
+  /**
+   * Height of Collection; this property determines the number of visible (vs virtualized) rows.
+   */
+  height: PropTypes.number.isRequired,
+  /**
+   * Optional custom id to attach to root Collection element.
+   */
+  id: PropTypes.string,
+  /**
+   * Enables the `Collection` to horiontally "overscan" its content similar to how `Grid` does.
+   * This can reduce flicker around the edges when a user scrolls quickly.
+   */
+  horizontalOverscanSize: PropTypes.number.isRequired,
+  isScrollingChange: PropTypes.func,
+  /**
+   * Optional renderer to be used in place of rows when either :rowCount or :cellCount is 0.
+   */
+  noContentRenderer: PropTypes.func.isRequired,
+  /**
+   * 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.
+   * ({ clientHeight, clientWidth, scrollHeight, scrollLeft, scrollTop, scrollWidth }): void
+   */
+  onScroll: PropTypes.func.isRequired,
+  /**
+   * Callback invoked with information about the section of the Collection that was just rendered.
+   * This callback is passed a named :indices parameter which is an Array of the most recently rendered section indices.
+   */
+  onSectionRendered: PropTypes.func.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: PropTypes.oneOf(['auto', 'end', 'start', 'center']).isRequired,
+  /**
+   * Cell index to ensure visible (by forcefully scrolling if necessary).
+   */
+  scrollToCell: PropTypes.number.isRequired,
+  /**
+   * Vertical offset.
+   */
+  scrollTop: PropTypes.number,
+  /**
+   * Optional custom inline style to attach to root Collection element.
+   */
+  style: PropTypes.object,
+  /**
+   * Enables the `Collection` to vertically "overscan" its content similar to how `Grid` does.
+   * This can reduce flicker around the edges when a user scrolls quickly.
+   */
+  verticalOverscanSize: PropTypes.number.isRequired,
+  /**
+   * Width of Collection; this property determines the number of visible (vs virtualized) columns.
+   */
+  width: PropTypes.number.isRequired
+} : {};
+polyfill(CollectionView);
+export default CollectionView;

package/dist/es/Collection/Section.jest.js

@@ -0,0 +1,60 @@
+import Section from './Section';
+describe('Section', function () {
+  function helper() {
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 100 : _ref$height,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 200 : _ref$width,
+      _ref$x = _ref.x,
+      x = _ref$x === void 0 ? 0 : _ref$x,
+      _ref$y = _ref.y,
+      y = _ref$y === void 0 ? 0 : _ref$y;
+    return new Section({
+      height: height,
+      width: width,
+      x: x,
+      y: y
+    });
+  }
+  it('should add a new cell index', function () {
+    var section = helper();
+    expect(section.getCellIndices()).toEqual([]);
+    section.addCellIndex({
+      index: 0
+    });
+    expect(section.getCellIndices()).toEqual([0]);
+    section.addCellIndex({
+      index: 1
+    });
+    expect(section.getCellIndices()).toEqual([0, 1]);
+  });
+  it('should not add a duplicate cell index', function () {
+    var section = helper();
+    section.addCellIndex({
+      index: 0
+    });
+    section.addCellIndex({
+      index: 1
+    });
+    section.addCellIndex({
+      index: 0
+    });
+    section.addCellIndex({
+      index: 1
+    });
+    section.addCellIndex({
+      index: 2
+    });
+    expect(section.getCellIndices()).toEqual([0, 1, 2]);
+  });
+  it('should define a working toString() method for debugging', function () {
+    var section = helper({
+      height: 100,
+      width: 200,
+      x: 25,
+      y: 50
+    });
+    expect(section.toString()).toEqual('25,50 200x100');
+  });
+});

package/dist/es/Collection/Section.js

@@ -0,0 +1,51 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+/*:: import type {Index, SizeAndPositionInfo} from './types';*/
+/**
+ * A section of the Window.
+ * Window Sections are used to group nearby cells.
+ * This enables us to more quickly determine which cells to display in a given region of the Window.
+ * Sections have a fixed size and contain 0 to many cells (tracked by their indices).
+ */
+var Section = /*#__PURE__*/function () {
+  function Section(_ref /*:: */) {
+    var height = _ref /*:: */.height,
+      width = _ref /*:: */.width,
+      x = _ref /*:: */.x,
+      y = _ref /*:: */.y;
+    _classCallCheck(this, Section);
+    this.height = height;
+    this.width = width;
+    this.x = x;
+    this.y = y;
+    this._indexMap = {};
+    this._indices = [];
+  }
+
+  /** Add a cell to this section. */
+  return _createClass(Section, [{
+    key: "addCellIndex",
+    value: function addCellIndex(_ref2 /*:: */) {
+      var index = _ref2 /*:: */.index;
+      if (!this._indexMap[index]) {
+        this._indexMap[index] = true;
+        this._indices.push(index);
+      }
+    }
+
+    /** Get all cell indices that have been added to this section. */
+  }, {
+    key: "getCellIndices",
+    value: function getCellIndices() /*: Array<number>*/{
+      return this._indices;
+    }
+
+    /** Intended for debugger/test purposes only */
+  }, {
+    key: "toString",
+    value: function toString() {
+      return "".concat(this.x, ",").concat(this.y, " ").concat(this.width, "x").concat(this.height);
+    }
+  }]);
+}();
+export { Section as default };