react-window 1.8.7 → 1.8.9

package/dist/index.esm.js

@@ -1245,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"
@@ -1271,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;
@@ -1319,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';
@@ -1417,9 +1434,9 @@ function createListComponent(_ref) {
     ;
 
     _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,
@@ -1624,7 +1641,7 @@ var VariableSizeList = /*#__PURE__*/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,
@@ -1637,7 +1654,7 @@ var VariableSizeList = /*#__PURE__*/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) {
@@ -1925,7 +1942,7 @@ var FixedSizeList = /*#__PURE__*/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,
@@ -1937,7 +1954,7 @@ var FixedSizeList = /*#__PURE__*/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) {