react-window 1.8.6 → 1.8.8

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 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 _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import memoizeOne from 'memoize-one';
 import { createElement, PureComponent } from 'react';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
@@ -115,20 +115,14 @@ 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();
+    devWarningsOverscanCount = /*#__PURE__*/new WeakSet();
+    devWarningsOverscanRowsColumnsCount = /*#__PURE__*/new WeakSet();
+    devWarningsTagName = /*#__PURE__*/new WeakSet();
   }
 }
 
 function createGridComponent(_ref2) {
-  var _class, _temp;
+  var _class;
 
   var getColumnOffset = _ref2.getColumnOffset,
       getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
@@ -145,9 +139,7 @@ function createGridComponent(_ref2) {
       initInstanceProps = _ref2.initInstanceProps,
       shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
       validateProps = _ref2.validateProps;
-  return _temp = _class =
-  /*#__PURE__*/
-  function (_PureComponent) {
+  return _class = /*#__PURE__*/function (_PureComponent) {
     _inheritsLoose(Grid, _PureComponent);
 
     // Always use explicit constructor for React components.
@@ -157,11 +149,11 @@ function createGridComponent(_ref2) {
       var _this;
 
       _this = _PureComponent.call(this, props) || this;
-      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_this));
       _this._resetIsScrollingTimeoutId = null;
       _this._outerRef = void 0;
       _this.state = {
-        instance: _assertThisInitialized(_assertThisInitialized(_this)),
+        instance: _assertThisInitialized(_this),
         isScrolling: false,
         horizontalScrollDirection: 'forward',
         scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
@@ -570,11 +562,11 @@ function createGridComponent(_ref2) {
 
         this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
       }
-    }; // Lazily create and cache item styles while scrolling,
+    } // 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,
@@ -633,7 +625,7 @@ function createGridComponent(_ref2) {
     direction: 'ltr',
     itemData: undefined,
     useIsScrolling: false
-  }, _temp;
+  }, _class;
 }
 
 var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
@@ -881,9 +873,7 @@ var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemT
   }
 };
 
-var VariableSizeGrid =
-/*#__PURE__*/
-createGridComponent({
+var VariableSizeGrid = /*#__PURE__*/createGridComponent({
   getColumnOffset: function getColumnOffset(props, index, instanceProps) {
     return getItemMetadata('column', props, index, instanceProps).offset;
   },
@@ -1030,17 +1020,13 @@ 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();
+    devWarningsDirection = /*#__PURE__*/new WeakSet();
+    devWarningsTagName$1 = /*#__PURE__*/new WeakSet();
   }
 }
 
 function createListComponent(_ref) {
-  var _class, _temp;
+  var _class;
 
   var getItemOffset = _ref.getItemOffset,
       getEstimatedTotalSize = _ref.getEstimatedTotalSize,
@@ -1051,9 +1037,7 @@ function createListComponent(_ref) {
       initInstanceProps = _ref.initInstanceProps,
       shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
       validateProps = _ref.validateProps;
-  return _temp = _class =
-  /*#__PURE__*/
-  function (_PureComponent) {
+  return _class = /*#__PURE__*/function (_PureComponent) {
     _inheritsLoose(List, _PureComponent);
 
     // Always use explicit constructor for React components.
@@ -1063,11 +1047,11 @@ function createListComponent(_ref) {
       var _this;
 
       _this = _PureComponent.call(this, props) || this;
-      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_this));
       _this._outerRef = void 0;
       _this._resetIsScrollingTimeoutId = null;
       _this.state = {
-        instance: _assertThisInitialized(_assertThisInitialized(_this)),
+        instance: _assertThisInitialized(_this),
         isScrolling: false,
         scrollDirection: 'forward',
         scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
@@ -1261,17 +1245,34 @@ function createListComponent(_ref) {
         align = 'auto';
       }
 
-      var itemCount = this.props.itemCount;
+      var _this$props2 = this.props,
+          itemCount = _this$props2.itemCount,
+          layout = _this$props2.layout;
       var scrollOffset = this.state.scrollOffset;
-      index = Math.max(0, Math.min(index, itemCount - 1));
-      this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
+      index = Math.max(0, Math.min(index, itemCount - 1)); // 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.
+      // This is an edge case for lists; normally they only scroll in the dominant direction.
+
+      var scrollbarSize = 0;
+
+      if (this._outerRef) {
+        var outerRef = this._outerRef;
+
+        if (layout === 'vertical') {
+          scrollbarSize = outerRef.scrollWidth > outerRef.clientWidth ? getScrollbarSize() : 0;
+        } else {
+          scrollbarSize = outerRef.scrollHeight > outerRef.clientHeight ? getScrollbarSize() : 0;
+        }
+      }
+
+      this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps, scrollbarSize));
     };
 
     _proto.componentDidMount = function componentDidMount() {
-      var _this$props2 = this.props,
-          direction = _this$props2.direction,
-          initialScrollOffset = _this$props2.initialScrollOffset,
-          layout = _this$props2.layout;
+      var _this$props3 = this.props,
+          direction = _this$props3.direction,
+          initialScrollOffset = _this$props3.initialScrollOffset,
+          layout = _this$props3.layout;
 
       if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
         var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
@@ -1287,9 +1288,9 @@ function createListComponent(_ref) {
     };
 
     _proto.componentDidUpdate = function componentDidUpdate() {
-      var _this$props3 = this.props,
-          direction = _this$props3.direction,
-          layout = _this$props3.layout;
+      var _this$props4 = this.props,
+          direction = _this$props4.direction,
+          layout = _this$props4.layout;
       var _this$state = this.state,
           scrollOffset = _this$state.scrollOffset,
           scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
@@ -1335,24 +1336,24 @@ function createListComponent(_ref) {
     };
 
     _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 _this$props5 = this.props,
+          children = _this$props5.children,
+          className = _this$props5.className,
+          direction = _this$props5.direction,
+          height = _this$props5.height,
+          innerRef = _this$props5.innerRef,
+          innerElementType = _this$props5.innerElementType,
+          innerTagName = _this$props5.innerTagName,
+          itemCount = _this$props5.itemCount,
+          itemData = _this$props5.itemData,
+          _this$props5$itemKey = _this$props5.itemKey,
+          itemKey = _this$props5$itemKey === void 0 ? defaultItemKey$1 : _this$props5$itemKey,
+          layout = _this$props5.layout,
+          outerElementType = _this$props5.outerElementType,
+          outerTagName = _this$props5.outerTagName,
+          style = _this$props5.style,
+          useIsScrolling = _this$props5.useIsScrolling,
+          width = _this$props5.width;
       var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
 
       var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
@@ -1426,16 +1427,16 @@ function createListComponent(_ref) {
 
         this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
       }
-    }; // Lazily create and cache item styles while scrolling,
+    } // 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$props6 = this.props,
+          itemCount = _this$props6.itemCount,
+          overscanCount = _this$props6.overscanCount;
       var _this$state3 = this.state,
           isScrolling = _this$state3.isScrolling,
           scrollDirection = _this$state3.scrollDirection,
@@ -1461,7 +1462,7 @@ function createListComponent(_ref) {
     layout: 'vertical',
     overscanCount: 2,
     useIsScrolling: false
-  }, _temp;
+  }, _class;
 } // 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.
@@ -1632,9 +1633,7 @@ var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {
   return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
 };
 
-var VariableSizeList =
-/*#__PURE__*/
-createListComponent({
+var VariableSizeList = /*#__PURE__*/createListComponent({
   getItemOffset: function getItemOffset(props, index, instanceProps) {
     return getItemMetadata$1(props, index, instanceProps).offset;
   },
@@ -1642,7 +1641,7 @@ createListComponent({
     return instanceProps.itemMetadataMap[index].size;
   },
   getEstimatedTotalSize: getEstimatedTotalSize,
-  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
     var direction = props.direction,
         height = props.height,
         layout = props.layout,
@@ -1655,7 +1654,7 @@ createListComponent({
 
     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);
+    var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size + scrollbarSize);
 
     if (align === 'smart') {
       if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
@@ -1751,9 +1750,7 @@ createListComponent({
   }
 });
 
-var FixedSizeGrid =
-/*#__PURE__*/
-createGridComponent({
+var FixedSizeGrid = /*#__PURE__*/createGridComponent({
   getColumnOffset: function getColumnOffset(_ref, index) {
     var columnWidth = _ref.columnWidth;
     return index * columnWidth;
@@ -1931,9 +1928,7 @@ createGridComponent({
   }
 });
 
-var FixedSizeList =
-/*#__PURE__*/
-createListComponent({
+var FixedSizeList = /*#__PURE__*/createListComponent({
   getItemOffset: function getItemOffset(_ref, index) {
     var itemSize = _ref.itemSize;
     return index * itemSize;
@@ -1947,7 +1942,7 @@ createListComponent({
         itemSize = _ref3.itemSize;
     return itemSize * itemCount;
   },
-  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset, instanceProps, scrollbarSize) {
     var direction = _ref4.direction,
         height = _ref4.height,
         itemCount = _ref4.itemCount,
@@ -1959,7 +1954,7 @@ createListComponent({
     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);
+    var minOffset = Math.max(0, index * itemSize - size + itemSize + scrollbarSize);
 
     if (align === 'smart') {
       if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
@@ -2055,15 +2050,17 @@ function shallowDiffers(prev, next) {
   return false;
 }
 
+var _excluded = ["style"],
+    _excluded2 = ["style"];
 // 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"]);
+      prevRest = _objectWithoutPropertiesLoose(prevProps, _excluded);
 
   var nextStyle = nextProps.style,
-      nextRest = _objectWithoutPropertiesLoose(nextProps, ["style"]);
+      nextRest = _objectWithoutPropertiesLoose(nextProps, _excluded2);
 
   return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
 }
@@ -2075,5 +2072,5 @@ function shouldComponentUpdate(nextProps, nextState) {
   return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
 }
 
-export { VariableSizeGrid, VariableSizeList, FixedSizeGrid, FixedSizeList, areEqual, shouldComponentUpdate };
+export { FixedSizeGrid, FixedSizeList, VariableSizeGrid, VariableSizeList, areEqual, shouldComponentUpdate };
 //# sourceMappingURL=index.esm.js.map