virtual-scroller 1.7.9 → 1.9.0

package/commonjs/react/VirtualScroller.js

@@ -5,658 +5,228 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _VirtualScroller = _interopRequireDefault(require("../VirtualScroller"));
+var _useState2 = _interopRequireDefault(require("./useState.js"));
 
-var _debug = require("../utility/debug");
+var _useVirtualScroller = _interopRequireDefault(require("./useVirtualScroller.js"));
 
-var _px = _interopRequireDefault(require("../utility/px"));
+var _useVirtualScrollerStartStop = _interopRequireDefault(require("./useVirtualScrollerStartStop.js"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-// `PropTypes.elementType` is available in some version of `prop-types`.
-// https://github.com/facebook/prop-types/issues/200
-var elementType = _propTypes["default"].elementType || _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func, _propTypes["default"].object]);
-
-var VirtualScroller =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(VirtualScroller, _React$Component);
+var _useInstanceMethods = _interopRequireDefault(require("./useInstanceMethods.js"));
 
-  // Handler function caches.
-  // Just so that the props passed to `itemComponent`
-  // are not changed on every `.render()` and so
-  // `itemComponent` won't re-render if it's a `PureComponent`.
-  // Item refs for `.renderItem(i)`.
-  // List items are rendered with `key`s
-  // so that React doesn't reuse `itemComponent`s
-  // in cases when `items` are changed.
-  function VirtualScroller(props) {
-    var _this;
+var _useItemKeys2 = _interopRequireDefault(require("./useItemKeys.js"));
 
-    _classCallCheck(this, VirtualScroller);
+var _useOnItemStateChange = _interopRequireDefault(require("./useOnItemStateChange.js"));
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(VirtualScroller).call(this, props)); // `this.previousItemsProperty` is only used for comparing
-    // `previousItems` with `newItems` inside `render()`.
+var _useOnItemHeightChange = _interopRequireDefault(require("./useOnItemHeightChange.js"));
 
-    _defineProperty(_assertThisInitialized(_this), "container", _react["default"].createRef());
+var _useHandleItemsChange = _interopRequireDefault(require("./useHandleItemsChange.js"));
 
-    _defineProperty(_assertThisInitialized(_this), "onItemStateChange", new Array(_this.props.items.length));
+var _useClassName = _interopRequireDefault(require("./useClassName.js"));
 
-    _defineProperty(_assertThisInitialized(_this), "onItemHeightChange", new Array(_this.props.items.length));
+var _useStyle = _interopRequireDefault(require("./useStyle.js"));
 
-    _defineProperty(_assertThisInitialized(_this), "itemRefs", new Array(_this.props.items.length));
+var _excluded = ["as", "items", "itemComponent", "itemComponentProps", "estimatedItemHeight", "bypass", "tbody", "preserveScrollPosition", "preserveScrollPositionOnPrependItems", "measureItemsBatchSize", "scrollableContainer", "getScrollableContainer", "getColumnsCount", "getItemId", "className", "onMount", "onItemFirstRender", "onItemInitialRender", "initialScrollPosition", "onScrollPositionChange", "onStateChange", "initialState"];
 
-    _defineProperty(_assertThisInitialized(_this), "itemKeyPrefixes", []);
-
-    _defineProperty(_assertThisInitialized(_this), "updateLayout", function () {
-      return _this.virtualScroller.updateLayout();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "layout", function () {
-      return _this.updateLayout();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onItemInitialRender", function () {
-      var onItemInitialRender = _this.props.onItemInitialRender;
-
-      if (onItemInitialRender) {
-        onItemInitialRender.apply(void 0, arguments);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onItemFirstRender", function () {
-      var onItemFirstRender = _this.props.onItemFirstRender;
-
-      if (onItemFirstRender) {
-        onItemFirstRender.apply(void 0, arguments);
-      }
-    });
-
-    _this.previousItemsProperty = props.items; // Generate unique `key` prefix for list item components.
-
-    _this.generateItemKeyPrefix(); // Create `VirtualScroller` instance.
-
-
-    _this.createVirtualScroller();
-
-    return _this;
-  }
-
-  _createClass(VirtualScroller, [{
-    key: "createVirtualScroller",
-    value: function createVirtualScroller() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          AsComponent = _this$props.as,
-          items = _this$props.items,
-          initialState = _this$props.initialState,
-          initialCustomState = _this$props.initialCustomState,
-          onStateChange = _this$props.onStateChange,
-          estimatedItemHeight = _this$props.estimatedItemHeight,
-          preserveScrollPositionOfTheBottomOfTheListOnMount = _this$props.preserveScrollPositionOfTheBottomOfTheListOnMount,
-          preserveScrollPositionAtBottomOnMount = _this$props.preserveScrollPositionAtBottomOnMount,
-          initialScrollPosition = _this$props.initialScrollPosition,
-          onScrollPositionChange = _this$props.onScrollPositionChange,
-          measureItemsBatchSize = _this$props.measureItemsBatchSize,
-          scrollableContainer = _this$props.scrollableContainer,
-          getScrollableContainer = _this$props.getScrollableContainer,
-          getColumnsCount = _this$props.getColumnsCount,
-          getItemId = _this$props.getItemId,
-          bypass = _this$props.bypass; // Create `virtual-scroller` instance.
-
-      this.virtualScroller = new _VirtualScroller["default"](function () {
-        return _this2.container.current;
-      }, items, {
-        _useTimeoutInRenderLoop: true,
-        estimatedItemHeight: estimatedItemHeight,
-        bypass: bypass,
-        // bypassBatchSize,
-        onItemInitialRender: this.onItemInitialRender,
-        // `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
-        onItemFirstRender: this.onItemFirstRender,
-        preserveScrollPositionOfTheBottomOfTheListOnMount: preserveScrollPositionOfTheBottomOfTheListOnMount,
-        // `preserveScrollPositionAtBottomOnMount` property name is deprecated,
-        // use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
-        preserveScrollPositionAtBottomOnMount: preserveScrollPositionAtBottomOnMount,
-        initialScrollPosition: initialScrollPosition,
-        onScrollPositionChange: onScrollPositionChange,
-        shouldUpdateLayoutOnScreenResize: this.shouldUpdateLayoutOnScreenResize,
-        measureItemsBatchSize: measureItemsBatchSize,
-        scrollableContainer: scrollableContainer,
-        // `getScrollableContainer` property is deprecated.
-        // Use `scrollableContainer` instead.
-        getScrollableContainer: getScrollableContainer,
-        getColumnsCount: getColumnsCount,
-        getItemId: getItemId,
-        tbody: AsComponent === 'tbody',
-        state: initialState,
-        customState: initialCustomState,
-        onStateChange: onStateChange,
-        getState: function getState() {
-          return _this2.state;
-        },
-        setState: function setState(newState, _ref) {
-          var willUpdateState = _ref.willUpdateState,
-              didUpdateState = _ref.didUpdateState;
-          _this2.willUpdateState = willUpdateState;
-          _this2.didUpdateState = didUpdateState;
-
-          if (_this2.state) {
-            // Update existing state.
-            //
-            // In case of hypothetically rewriting this in React hooks,
-            // it wouldn't simply be `setState({ ...prevState, ...newState })`.
-            // The reason is that `setState()` would be "asynchronous" (not immediate),
-            // and `...prevState` would be stale in cases when more than a single
-            // `setState()` call is made before the state actually updates,
-            // making `prevState` stale, and, as a consequence, losing some
-            // of the state updates.
-            // For example, the first `setState()` call updates shown item indexes,
-            // and the second `setState()` call updates `verticalSpacing`:
-            // if it was simply `setState({ ...prevState, ...newState })`,
-            // then the second state update could overwrite the first state update,
-            // resulting in incorrect items being shown/hidden.
-            //
-            // I guess, in hooks, it could be something like:
-            //
-            // const [firstShownItemIndex, setFirstShownItemIndex] = useState()
-            // ...
-            // const setState = useCallback((newState) => {
-            // 	for (const key in newState) {
-            // 		switch (key) {
-            // 			case 'firstShownItemIndex':
-            // 				setFirstShownItemIndex(newState[key])
-            // 				break
-            // 			...
-            // 		}
-            // 	}
-            // 	setFirstShownItemIndex
-            // }, [])
-            // const virtualScroller = new VirtualScrollerCore({
-            // 	setState,
-            // 	...
-            // })
-            // // `getState()` function would be updated on every render.
-            // virtualScroller.getState = () => ({
-            // 	firstShownItemIndex,
-            // 	...
-            // })
-            //
-            // But as long as it uses the classic `this.setState()`,
-            // it's fine and simple.
-            _this2.setState(newState);
-          } else {
-            // Set initial state.
-            willUpdateState(newState);
-            _this2.state = newState;
-            didUpdateState();
-          }
-        }
-      });
-    } // This is a proxy for `VirtualScroller`'s `.updateLayout` instance method.
-
-  }, {
-    key: "shouldUseRefs",
-    value: function shouldUseRefs() {
-      // There's no way to detect if `ref` can be passed to `component`:
-      // https://github.com/facebook/react/issues/16309
-      // So it only uses `ref`s for `React.Component`s.
-      var itemComponent = this.props.itemComponent;
-      return isComponentClass(itemComponent);
-    }
-    /**
-     * Returns a `key` for an `item`'s element.
-     * @param  {object} item — The item.
-     * @param  {number} i — Item's index in `items` list.
-     * @return {any}
-     */
-
-  }, {
-    key: "getItemKey",
-    value: function getItemKey(item, i) {
-      var getItemId = this.props.getItemId;
-
-      if (getItemId) {
-        return getItemId(item);
-      }
-
-      return "".concat(this.itemKeyPrefix, ":").concat(i);
-    }
-    /**
-     * A proxy to `VirtualScroller.getItemCoordinates(i)`.
-     * @param  {number} i
-     * @return {object}
-     */
-
-    /*
-    getItemCoordinates(i) {
-    	return this.virtualScroller.getItemCoordinates(i)
-    }
-    */
-
-    /**
-     * `updateItem(i)` has been renamed to `renderItem(i)`.
-     * @param {number} i
-     */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-  }, {
-    key: "updateItem",
-    value: function updateItem(i) {
-      return this.renderItem(i);
-    }
-    /**
-     * Re-renders an item.
-     * @param {number} i
-     */
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-  }, {
-    key: "renderItem",
-    value: function renderItem(i) {
-      var _this3 = this;
-
-      i = this.getItemIndex(i);
-
-      if (i === undefined) {
-        return (0, _debug.reportError)("Item ".concat(JSON.stringify(i), " not found when calling \".renderItem()\""));
-      }
-
-      if (this.shouldUseRefs()) {
-        // The item may be non-rendered when `.renderItem(i)` is called on it.
-        // For example, when there's a "parent comment" having several "replies"
-        // each of which has an autogenerated quote of the "parent comment"
-        // and then the "parent comment" is updated (for example, a YouTube video
-        // link gets parsed into an embedded video player) and all of its "replies"
-        // should be updated too to show the parsed video title instead of the URL,
-        // so `.renderItem(i)` is simply called on all of the "parent post"'s replies
-        // regardless of some of those replies being rendered or not.
-        if (this.itemRefs[i] && this.itemRefs[i].current) {
-          var items = this.props.items; // Stores `item` here because the `i` index
-          // might have changed when the callback is called,
-          // or the item even may have been removed.
-
-          var item = items[i];
-          this.itemRefs[i].current.forceUpdate(function () {
-            if (_this3._isMounted) {
-              // Recalculates the `i` index here because it
-              // might have changed when the callback is called,
-              // or the item even may have been removed.
-              var _i = items.indexOf(item);
-
-              if (_i >= 0) {
-                _this3.virtualScroller.onItemHeightChange(_i);
-              }
-            }
-          });
-        }
-      }
-    }
-  }, {
-    key: "getItemIndex",
-    value: function getItemIndex(i) {
-      if (typeof i === 'number') {
-        return i;
-      }
-
-      if (_typeof(i) === 'object' && i !== null) {
-        var _this$props2 = this.props,
-            items = _this$props2.items,
-            getItemId = _this$props2.getItemId;
-        var item = i;
-        i = 0;
-
-        while (i < items.length) {
-          if (getItemId) {
-            if (getItemId(item) === getItemId(items[i])) {
-              return i;
-            }
-          } else {
-            if (item === items[i]) {
-              return i;
-            }
-          }
-
-          i++;
-        }
-      }
-    } // Functional components can't have a `ref` assigned to them.
-    // Item `ref`s are only used for calling `.renderItem(i)` instance method,
-    // because `.renderItem(i)` calls `.forceUpdate()` on item `i`.
-    // If a developer is not using the `.renderItem(i)` instance method
-    // then `ref`s aren't required and will be omitted.
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-  }, {
-    key: "getItemRef",
-    value: function getItemRef(i) {
-      if (!this.itemRefs[i]) {
-        this.itemRefs[i] = _react["default"].createRef();
-      }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-      return this.itemRefs[i];
-    }
+function VirtualScroller(_ref, ref) {
+  var AsComponent = _ref.as,
+      items = _ref.items,
+      Component = _ref.itemComponent,
+      itemComponentProps = _ref.itemComponentProps,
+      estimatedItemHeight = _ref.estimatedItemHeight,
+      bypass = _ref.bypass,
+      tbody = _ref.tbody,
+      preserveScrollPosition = _ref.preserveScrollPosition,
+      preserveScrollPositionOnPrependItems = _ref.preserveScrollPositionOnPrependItems,
+      measureItemsBatchSize = _ref.measureItemsBatchSize,
+      scrollableContainer = _ref.scrollableContainer,
+      getScrollableContainer = _ref.getScrollableContainer,
+      getColumnsCount = _ref.getColumnsCount,
+      getItemId = _ref.getItemId,
+      className = _ref.className,
+      onMount = _ref.onMount,
+      onItemFirstRender = _ref.onItemFirstRender,
+      onItemInitialRender = _ref.onItemInitialRender,
+      initialScrollPosition = _ref.initialScrollPosition,
+      onScrollPositionChange = _ref.onScrollPositionChange,
+      onStateChange = _ref.onStateChange,
+      initialState = _ref.initialState,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  // List items "container" DOM Element reference.
+  var container = (0, _react.useRef)(); // Create a `VirtualScroller` instance.
+
+  var virtualScroller = (0, _useVirtualScroller["default"])({
+    items: items,
+    estimatedItemHeight: estimatedItemHeight,
+    bypass: bypass,
+    // bypassBatchSize,
+    tbody: tbody,
+    onItemInitialRender: onItemInitialRender,
+    // `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
+    onItemFirstRender: onItemFirstRender,
+    initialScrollPosition: initialScrollPosition,
+    onScrollPositionChange: onScrollPositionChange,
+    measureItemsBatchSize: measureItemsBatchSize,
+    // `scrollableContainer` property is deprecated.
+    // Use `getScrollableContainer()` property instead.
+    scrollableContainer: scrollableContainer,
+    getScrollableContainer: getScrollableContainer,
+    getColumnsCount: getColumnsCount,
+    getItemId: getItemId,
+    AsComponent: AsComponent,
+    initialState: initialState,
+    onStateChange: onStateChange
   }, {
-    key: "getOnItemStateChange",
-    value: function getOnItemStateChange(i) {
-      var _this4 = this;
+    container: container
+  }); // Only compute the initial state once.
 
-      if (!this.onItemStateChange[i]) {
-        this.onItemStateChange[i] = function (itemState) {
-          return _this4.virtualScroller.onItemStateChange(i, itemState);
-        };
-      }
+  var _initialState = (0, _react.useMemo)(function () {
+    return virtualScroller.getInitialState();
+  }, []); // Create state management functions.
 
-      return this.onItemStateChange[i];
-    }
-  }, {
-    key: "getOnItemHeightChange",
-    value: function getOnItemHeightChange(i) {
-      var _this5 = this;
 
-      if (!this.onItemHeightChange[i]) {
-        this.onItemHeightChange[i] = function () {
-          return _this5.virtualScroller.onItemHeightChange(i);
-        };
-      }
+  var _useState = (0, _useState2["default"])({
+    initialState: _initialState,
+    onRender: virtualScroller.onRender,
+    items: items
+  }),
+      getState = _useState.getState,
+      updateState = _useState.updateState; // Use custom (external) state storage in the `VirtualScroller`.
 
-      return this.onItemHeightChange[i];
-    }
-  }, {
-    key: "generateItemKeyPrefix",
-    value: function generateItemKeyPrefix() {
-      var prefix = String(Math.random()).slice(2);
-
-      if (this.itemKeyPrefixes.indexOf(prefix) >= 0) {
-        return this.generateItemKeyPrefix();
-      }
 
-      this.itemKeyPrefixes.push(prefix);
-      this.itemKeyPrefix = prefix;
+  (0, _react.useMemo)(function () {
+    virtualScroller.useState({
+      getState: getState,
+      updateState: updateState
+    });
+  }, []); // Start `VirtualScroller` on mount.
+  // Stop `VirtualScroller` on unmount.
+
+  (0, _useVirtualScrollerStartStop["default"])(virtualScroller); // List items are rendered with `key`s so that React doesn't
+  // "reuse" `itemComponent`s in cases when `items` are changed.
+
+  var _useItemKeys = (0, _useItemKeys2["default"])({
+    getItemId: getItemId
+  }),
+      getItemKey = _useItemKeys.getItemKey,
+      updateItemKeysForNewItems = _useItemKeys.updateItemKeysForNewItems; // Cache per-item `onItemStateChange` functions' "references"
+  // so that item components don't get re-rendered needlessly.
+
+
+  var getOnItemStateChange = (0, _useOnItemStateChange["default"])({
+    items: items,
+    virtualScroller: virtualScroller
+  }); // Cache per-item `onItemHeightChange` functions' "references"
+  // so that item components don't get re-rendered needlessly.
+
+  var getOnItemHeightChange = (0, _useOnItemHeightChange["default"])({
+    items: items,
+    virtualScroller: virtualScroller
+  }); // Detect if `items` have changed.
+
+  (0, _useHandleItemsChange["default"])(items, {
+    virtualScroller: virtualScroller,
+    // `preserveScrollPosition` property name is deprecated,
+    // use `preserveScrollPositionOnPrependItems` property instead.
+    preserveScrollPosition: preserveScrollPosition,
+    preserveScrollPositionOnPrependItems: preserveScrollPositionOnPrependItems,
+    updateItemKeysForNewItems: updateItemKeysForNewItems
+  }); // Add instance methods to the React component.
+
+  (0, _useInstanceMethods["default"])(ref, {
+    virtualScroller: virtualScroller
+  });
+  (0, _react.useLayoutEffect)(function () {
+    // (deprecated)
+    // `onMount()` option is deprecated due to no longer being used.
+    // If someone thinks there's a valid use case for it, create an issue.
+    if (onMount) {
+      onMount();
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var onMount = this.props.onMount; // `onMount()` option is deprecated due to no longer being used.
-      // If someone thinks there's a valid use case for it, create an issue.
-
-      if (onMount) {
-        onMount();
-      }
-
-      this._isMounted = true; // Start listening to scroll events.
-
-      this.virtualScroller.listen();
-    } // `getSnapshotBeforeUpdate()` is called right before `componentDidUpdate()`.
-
-  }, {
-    key: "getSnapshotBeforeUpdate",
-    value: function getSnapshotBeforeUpdate(prevProps, prevState) {
-      if (this.state !== prevState) {
-        this.willUpdateState(this.state, prevState);
-      } // Returns `null` to avoid React warning:
-      // "A snapshot value (or null) must be returned. You have returned undefined".
-
-
-      return null;
-    } // `componentDidUpdate()` is called immediately after React component has re-rendered.
-    // That would correspond to `useLayoutEffect()` in React Hooks.
+  }, []); // `willRender()` function is no longer used.
+  //
+  // // `getSnapshotBeforeUpdate()` is called right before `componentDidUpdate()`.
+  // // A hook equivalent/workaround for `getSnapshotBeforeUpdate()`:
+  // // https://github.com/facebook/react/issues/15221#issuecomment-583448887
+  // //
+  // getSnapshotBeforeUpdate(prevProps, prevState) {
+  // 	if (this.state !== prevState) {
+  // 		this.willRender(this.state, prevState)
+  // 	}
+  // 	// Returns `null` to avoid React warning:
+  // 	// "A snapshot value (or null) must be returned. You have returned undefined".
+  // 	return null
+  // }
 
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      // If `state` did change.
-      if (this.state !== prevState) {
-        this.didUpdateState(prevState);
-      } // If `items` property did change then update `virtual-scroller` items.
-      // This could have been done in `.render()` but `.setItems()` calls
-      // `.setState()` internally which would result in React throwing an error.
-
-
-      var _this$props3 = this.props,
-          items = _this$props3.items,
-          preserveScrollPosition = _this$props3.preserveScrollPosition,
-          preserveScrollPositionOnPrependItems = _this$props3.preserveScrollPositionOnPrependItems;
-
-      if (items !== prevProps.items) {
-        this.virtualScroller.setItems(items, {
-          // `preserveScrollPosition` property name is deprecated,
-          // use `preserveScrollPositionOnPrependItems` instead.
-          preserveScrollPositionOnPrependItems: preserveScrollPositionOnPrependItems || preserveScrollPosition
-        });
-      }
+  className = (0, _useClassName["default"])(className, {
+    tbody: tbody
+  });
+  var style = (0, _useStyle["default"])({
+    tbody: tbody,
+    virtualScroller: virtualScroller
+  });
+
+  var _virtualScroller$getS = virtualScroller.getState(),
+      renderedItems = _virtualScroller$getS.items,
+      itemStates = _virtualScroller$getS.itemStates,
+      firstShownItemIndex = _virtualScroller$getS.firstShownItemIndex,
+      lastShownItemIndex = _virtualScroller$getS.lastShownItemIndex;
+
+  return /*#__PURE__*/React.createElement(AsComponent, _extends({}, rest, {
+    ref: container,
+    className: className,
+    style: style
+  }), renderedItems.map(function (item, i) {
+    if (i >= firstShownItemIndex && i <= lastShownItemIndex) {
+      return /*#__PURE__*/React.createElement(Component, _extends({}, itemComponentProps, {
+        key: getItemKey(item, i),
+        state: itemStates && itemStates[i],
+        onStateChange: getOnItemStateChange(i),
+        onHeightChange: getOnItemHeightChange(i)
+      }), item);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this._isMounted = false; // Stop listening to scroll events.
 
-      this.virtualScroller.stop();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this6 = this;
-
-      var _this$props4 = this.props,
-          AsComponent = _this$props4.as,
-          Component = _this$props4.itemComponent,
-          itemComponentProps = _this$props4.itemComponentProps,
-          _items = _this$props4.items,
-          estimatedItemHeight = _this$props4.estimatedItemHeight,
-          bypass = _this$props4.bypass,
-          preserveScrollPositionOnPrependItems = _this$props4.preserveScrollPositionOnPrependItems,
-          preserveScrollPosition = _this$props4.preserveScrollPosition,
-          preserveScrollPositionOfTheBottomOfTheListOnMount = _this$props4.preserveScrollPositionOfTheBottomOfTheListOnMount,
-          preserveScrollPositionAtBottomOnMount = _this$props4.preserveScrollPositionAtBottomOnMount,
-          initialScrollPosition = _this$props4.initialScrollPosition,
-          onScrollPositionChange = _this$props4.onScrollPositionChange,
-          measureItemsBatchSize = _this$props4.measureItemsBatchSize,
-          scrollableContainer = _this$props4.scrollableContainer,
-          getScrollableContainer = _this$props4.getScrollableContainer,
-          getColumnsCount = _this$props4.getColumnsCount,
-          initialState = _this$props4.initialState,
-          initialCustomState = _this$props4.initialCustomState,
-          onStateChange = _this$props4.onStateChange,
-          onItemInitialRender = _this$props4.onItemInitialRender,
-          onItemFirstRender = _this$props4.onItemFirstRender,
-          getItemId = _this$props4.getItemId,
-          onMount = _this$props4.onMount,
-          className = _this$props4.className,
-          rest = _objectWithoutProperties(_this$props4, ["as", "itemComponent", "itemComponentProps", "items", "estimatedItemHeight", "bypass", "preserveScrollPositionOnPrependItems", "preserveScrollPosition", "preserveScrollPositionOfTheBottomOfTheListOnMount", "preserveScrollPositionAtBottomOnMount", "initialScrollPosition", "onScrollPositionChange", "measureItemsBatchSize", "scrollableContainer", "getScrollableContainer", "getColumnsCount", "initialState", "initialCustomState", "onStateChange", "onItemInitialRender", "onItemFirstRender", "getItemId", "onMount", "className"]);
-
-      var _this$virtualScroller = this.virtualScroller.getState(),
-          items = _this$virtualScroller.items,
-          itemStates = _this$virtualScroller.itemStates,
-          firstShownItemIndex = _this$virtualScroller.firstShownItemIndex,
-          lastShownItemIndex = _this$virtualScroller.lastShownItemIndex,
-          beforeItemsHeight = _this$virtualScroller.beforeItemsHeight,
-          afterItemsHeight = _this$virtualScroller.afterItemsHeight; // If `items` are about to be changed then
-      // store the scroll Y position for the first one
-      // of the current items.
-      // Previously it was being done in `componentDidUpdate()`
-      // but it was later found out that it wouldn't work
-      // for "Show previous" button because it would
-      // get hidden before `componentDidUpdate()` is called.
-      //
-      // Consider this code example:
-      //
-      // const { fromIndex, items } = this.state
-      // const items = allItems.slice(fromIndex)
-      // return (
-      // 	{fromIndex > 0 &&
-      // 		<button onClick={this.onShowPrevious}>
-      // 			Show previous
-      // 		</button>
-      // 	}
-      // 	<VirtualScroller
-      // 		items={items}
-      // 		itemComponent={ItemComponent}/>
-      // )
-      //
-      // Consider a user clicks "Show previous" to show the items from the start.
-      // By the time `componentDidUpdate()` is called on `<VirtualScroller/>`,
-      // the "Show previous" button has already been hidden
-      // (because there're no more "previous" items)
-      // which results in the scroll Y position jumping forward
-      // by the height of that "Show previous" button.
-      // This is because `<VirtualScroller/>` captures scroll Y
-      // position when items are prepended via `.setItems()`
-      // when the "Show previous" button is still being shown,
-      // and then restores scroll Y position in `.didUpdateState()`
-      // when the "Show previous" button has already been hidden:
-      // that's the reason for the scroll Y "jump".
-      //
-      // To prevent that, scroll Y position is captured at `render()`
-      // time rather than later in `componentDidUpdate()`: this way,
-      // scroll Y position is captured while the "Show previous" button
-      // is still being shown.
-      //
-
-
-      var newItems = this.props.items;
-      var previousItems = items; // this.virtualScroller.getState().items
-      // There's one case when `newItems !== previousItems` is `true`
-      // from the start: when `initialState.items` are passed.
-      // To handle that single case `this.previousItemsProperty`
-      // is tracked and `this.itemsPropertyHasChanged` flag is set.
-
-      if (!this.itemsPropertyWasChanged) {
-        this.itemsPropertyWasChanged = this.props.items !== this.previousItemsProperty;
-      }
-
-      this.previousItemsProperty = this.props.items;
-
-      if (this.itemsPropertyWasChanged && newItems !== previousItems) {
-        var itemsDiff = this.virtualScroller.getItemsDiff(previousItems, newItems);
-
-        if (itemsDiff && itemsDiff.prependedItemsCount === 0 && itemsDiff.appendedItemsCount > 0) {// If it's just items that have been appended
-          // then no need to re-generate the prefix
-          // and to fix scroll position and to clear caches.
-        } else {
-          // If the items update was incremental, then it's possible
-          // that some items were prepended, and so the scroll Y position
-          // should be restored after rendering those new items
-          // in order for the currently shown items to stay
-          // on the same position on screen.
-          // (only if explicitly opted into using this feature)
-          //
-          // If the items update wasn't incremental
-          // then there's no point in restoring scroll position.
-          //
-          // `preserveScrollPosition` property name is deprecated,
-          // use `preserveScrollPositionOnPrependItems` instead.
-          //
-          if (itemsDiff) {
-            var prependedItemsCount = itemsDiff.prependedItemsCount;
-
-            if (prependedItemsCount > 0) {
-              if (preserveScrollPositionOnPrependItems || preserveScrollPosition) {
-                if (firstShownItemIndex === 0) {
-                  this.virtualScroller.restoreScroll.captureScroll({
-                    previousItems: previousItems,
-                    newItems: newItems,
-                    prependedItemsCount: prependedItemsCount
-                  });
-                }
-              }
-            }
-          } // Reset the unique `key` prefix for item component keys.
-
-
-          if (!getItemId) {
-            this.generateItemKeyPrefix();
-          } // Reset item refs.
-
-
-          this.itemRefs = new Array(newItems.length);
-        }
-      }
-
-      var tbody = this.virtualScroller.tbody;
-      return _react["default"].createElement(AsComponent, _extends({}, rest, {
-        ref: this.container,
-        className: tbody ? className ? className + ' ' + 'VirtualScroller' : 'VirtualScroller' : className,
-        style: {
-          paddingTop: tbody ? undefined : (0, _px["default"])(beforeItemsHeight),
-          paddingBottom: tbody ? undefined : (0, _px["default"])(afterItemsHeight)
-        }
-      }), items.map(function (item, i) {
-        if (i >= firstShownItemIndex && i <= lastShownItemIndex) {
-          return _react["default"].createElement(Component, _extends({}, itemComponentProps, {
-            key: _this6.getItemKey(item, i),
-            ref: _this6.shouldUseRefs() ? _this6.getItemRef(i) : undefined,
-            state: itemStates && itemStates[i],
-            onStateChange: _this6.getOnItemStateChange(i),
-            onHeightChange: _this6.getOnItemHeightChange(i)
-          }), item);
-        }
-
-        return null;
-      }));
-    }
-  }]);
+    return null;
+  }));
+}
 
-  return VirtualScroller;
-}(_react["default"].Component);
-/**
- * Checks if the argument is a `React.Component` class.
- * https://overreacted.io/how-does-react-tell-a-class-from-a-function/
- * @param  {any}  Component
- * @return {object} [result] Returns `undefined` if it's not a `React.Component`. Returns an empty object if it's a `React.Component` (`.isReactComponent` is an empty object).
- */
+VirtualScroller = React.forwardRef(VirtualScroller);
+var _default = VirtualScroller; // `PropTypes.elementType` is available in some version of `prop-types`.
+// https://github.com/facebook/prop-types/issues/200
 
+exports["default"] = _default;
 
-exports["default"] = VirtualScroller;
+var elementType = _propTypes["default"].elementType || _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func, _propTypes["default"].object]);
 
-_defineProperty(VirtualScroller, "propTypes", {
+VirtualScroller.propTypes = {
   as: elementType,
-  items: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
+  items: _propTypes["default"].arrayOf(_propTypes["default"].any).isRequired,
   itemComponent: elementType.isRequired,
   itemComponentProps: _propTypes["default"].object,
   estimatedItemHeight: _propTypes["default"].number,
   bypass: _propTypes["default"].bool,
   // bypassBatchSize: PropTypes.number,
+  tbody: _propTypes["default"].bool,
   preserveScrollPositionOnPrependItems: _propTypes["default"].bool,
   // `preserveScrollPosition` property name is deprecated,
   // use `preserveScrollPositionOnPrependItems` instead.
   preserveScrollPosition: _propTypes["default"].bool,
-  preserveScrollPositionOfTheBottomOfTheListOnMount: _propTypes["default"].bool,
-  // `preserveScrollPositionAtBottomOnMount` property name is deprecated,
-  // use `preserveScrollPositionOfTheBottomOfTheListOnMount` property instead.
-  preserveScrollPositionAtBottomOnMount: _propTypes["default"].bool,
   measureItemsBatchSize: _propTypes["default"].number,
+  // `scrollableContainer` property is deprecated.
+  // Use `getScrollableContainer()` property instead.
   scrollableContainer: _propTypes["default"].any,
-  // `getScrollableContainer` property is deprecated.
-  // Use `scrollableContainer` instead.
   getScrollableContainer: _propTypes["default"].func,
   getColumnsCount: _propTypes["default"].func,
   getItemId: _propTypes["default"].func,
@@ -668,7 +238,6 @@ _defineProperty(VirtualScroller, "propTypes", {
   initialScrollPosition: _propTypes["default"].number,
   onScrollPositionChange: _propTypes["default"].func,
   onStateChange: _propTypes["default"].func,
-  initialCustomState: _propTypes["default"].object,
   initialState: _propTypes["default"].shape({
     items: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
     itemStates: _propTypes["default"].arrayOf(_propTypes["default"].any),
@@ -680,23 +249,8 @@ _defineProperty(VirtualScroller, "propTypes", {
     columnsCount: _propTypes["default"].number,
     verticalSpacing: _propTypes["default"].number
   })
-});
-
-_defineProperty(VirtualScroller, "defaultProps", {
-  as: 'div' // `this.state` is already reserved for `virtual-scroller`.
-  // static getDerivedStateFromProps(props, state) {
-  // 	return {
-  // 		prevProps: {
-  // 			items: props.items
-  // 		}
-  // 	}
-  // }
-
-});
-
-function isComponentClass(Component) {
-  // return Component.prototype instanceof React.Component
-  // `React.memo()` returns `.prototype === undefined` for some reason.
-  return Component.prototype && Component.prototype.isReactComponent;
-}
+};
+VirtualScroller.defaultProps = {
+  as: 'div'
+};
 //# sourceMappingURL=VirtualScroller.js.map