react-window 1.8.7 → 1.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-window",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "React components for efficiently rendering large, scrollable lists and tabular data",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [

package/src/FixedSizeList.js

@@ -4,6 +4,8 @@ import createListComponent from './createListComponent';
 
 import type { Props, ScrollToAlign } from './createListComponent';
 
+type InstanceProps = any;
+
 const FixedSizeList = createListComponent({
   getItemOffset: ({ itemSize }: Props<any>, index: number): number =>
     index * ((itemSize: any): number),
@@ -18,7 +20,9 @@ const FixedSizeList = createListComponent({
     { direction, height, itemCount, itemSize, layout, width }: Props<any>,
     index: number,
     align: ScrollToAlign,
-    scrollOffset: number
+    scrollOffset: number,
+    instanceProps: InstanceProps,
+    scrollbarSize: number
   ): number => {
     // TODO Deprecate direction "horizontal"
     const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
@@ -33,7 +37,10 @@ const FixedSizeList = createListComponent({
     );
     const minOffset = Math.max(
       0,
-      index * ((itemSize: any): number) - size + ((itemSize: any): number)
+      index * ((itemSize: any): number) -
+        size +
+        ((itemSize: any): number) +
+        scrollbarSize
     );
 
     if (align === 'smart') {

package/src/VariableSizeList.js

@@ -183,7 +183,8 @@ const VariableSizeList = createListComponent({
     index: number,
     align: ScrollToAlign,
     scrollOffset: number,
-    instanceProps: InstanceProps
+    instanceProps: InstanceProps,
+    scrollbarSize: number
   ): number => {
     const { direction, height, layout, width } = props;
 
@@ -202,7 +203,7 @@ const VariableSizeList = createListComponent({
     );
     const minOffset = Math.max(
       0,
-      itemMetadata.offset - size + itemMetadata.size
+      itemMetadata.offset - size + itemMetadata.size + scrollbarSize
     );
 
     if (align === 'smart') {

package/src/createListComponent.js

@@ -3,7 +3,7 @@
 import memoizeOne from 'memoize-one';
 import { createElement, PureComponent } from 'react';
 import { cancelTimeout, requestTimeout } from './timer';
-import { getRTLOffsetType } from './domHelpers';
+import { getScrollbarSize, getRTLOffsetType } from './domHelpers';
 
 import type { TimeoutID } from './timer';
 
@@ -213,18 +213,38 @@ export default function createListComponent({
     }
 
     scrollToItem(index: number, align: ScrollToAlign = 'auto'): void {
-      const { itemCount } = this.props;
+      const { itemCount, layout } = this.props;
       const { scrollOffset } = this.state;
 
       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.
+      let scrollbarSize = 0;
+      if (this._outerRef) {
+        const outerRef = ((this._outerRef: any): HTMLElement);
+        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
+          this._instanceProps,
+          scrollbarSize
         )
       );
     }