Update From Original

CHANGELOG.md

@@ -1,6 +1,16 @@
 Changelog
 ------------
 
+### 1.6.2
+* 🐛 Bugfix for RTL  when scrolling back towards the beginning (right) of the list.
+
+### 1.6.1
+* 🐛 Bugfix to account for differences between Chrome and non-Chrome browsers with regard to RTL and "scroll" events.
+
+### 1.6.0
+* 🎉 RTL support added for lists and grids. Special thanks to [davidgarsan](https://github.com/davidgarsan) for his support. - [#156](https://github.com/bvaughn/react-window/pull/156)
+* 🐛 Grid `scrollToItem` methods take scrollbar size into account when aligning items - [#153](https://github.com/bvaughn/react-window/issues/153)
+
 ### 1.5.2
 * 🐛 Edge case bug fix for `VariableSizeList` and `VariableSizeGrid` when the number of items decreases while a scroll is in progress. - ([iamsolankiamit](https://github.com/iamsolankiamit) - [#138](https://github.com/bvaughn/react-window/pull/138))
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-window",
-  "version": "1.5.2",
+  "version": "1.6.2",
   "description":
     "React components for efficiently rendering large, scrollable lists and tabular data",
   "author":
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "memoize-one": "^3.1.1"
+    "memoize-one": ">=3.1.1 <6"
   },
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0",
@@ -99,9 +99,9 @@
     "react-dom": "^16.7.0",
     "react-scripts": "^1.1.1",
     "react-test-renderer": "^16.7.0",
-    "rollup": "^0.65.0",
-    "rollup-plugin-babel": "^4.0.2",
-    "rollup-plugin-commonjs": "^8.2.1",
-    "rollup-plugin-node-resolve": "^3.0.2"
+    "rollup": "^1.4.1",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.2.1",
+    "rollup-plugin-node-resolve": "^4.0.1"
   }
 }

rollup.config.js

@@ -1,6 +1,7 @@
 import babel from 'rollup-plugin-babel';
 import commonjs from 'rollup-plugin-commonjs';
 import nodeResolve from 'rollup-plugin-node-resolve';
+
 import pkg from './package.json';
 
 const input = './src/index.js';

src/FixedSizeGrid.js

@@ -27,7 +27,9 @@ const FixedSizeGrid = createGridComponent({
     { columnCount, columnWidth, width }: Props<any>,
     columnIndex: number,
     align: ScrollToAlign,
-    scrollLeft: number
+    scrollLeft: number,
+    instanceProps: typeof undefined,
+    scrollbarSize: number
   ): number => {
     const maxOffset = Math.max(
       0,
@@ -40,6 +42,7 @@ const FixedSizeGrid = createGridComponent({
       0,
       columnIndex * ((columnWidth: any): number) -
         width +
+        scrollbarSize +
         ((columnWidth: any): number)
     );
 
@@ -66,7 +69,9 @@ const FixedSizeGrid = createGridComponent({
     { rowHeight, height, rowCount }: Props<any>,
     rowIndex: number,
     align: ScrollToAlign,
-    scrollTop: number
+    scrollTop: number,
+    instanceProps: typeof undefined,
+    scrollbarSize: number
   ): number => {
     const maxOffset = Math.max(
       0,
@@ -79,6 +84,7 @@ const FixedSizeGrid = createGridComponent({
       0,
       rowIndex * ((rowHeight: any): number) -
         height +
+        scrollbarSize +
         ((rowHeight: any): number)
     );
 

src/FixedSizeList.js

@@ -15,12 +15,14 @@ const FixedSizeList = createListComponent({
     ((itemSize: any): number) * itemCount,
 
   getOffsetForIndexAndAlignment: (
-    { direction, height, itemCount, itemSize, width }: Props<any>,
+    { direction, height, itemCount, itemSize, layout, width }: Props<any>,
     index: number,
     align: ScrollToAlign,
     scrollOffset: number
   ): number => {
-    const size = (((direction === 'horizontal' ? width : height): any): number);
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const size = (((isHorizontal ? width : height): any): number);
     const maxOffset = Math.max(
       0,
       Math.min(
@@ -62,12 +64,14 @@ const FixedSizeList = createListComponent({
     ),
 
   getStopIndexForStartIndex: (
-    { direction, height, itemCount, itemSize, width }: Props<any>,
+    { direction, height, itemCount, itemSize, layout, width }: Props<any>,
     startIndex: number,
     scrollOffset: number
   ): number => {
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
     const offset = startIndex * ((itemSize: any): number);
-    const size = (((direction === 'horizontal' ? width : height): any): number);
+    const size = (((isHorizontal ? width : height): any): number);
     return Math.max(
       0,
       Math.min(

src/VariableSizeGrid.js

@@ -233,7 +233,8 @@ const getOffsetForIndexAndAlignment = (
   index: number,
   align: ScrollToAlign,
   scrollOffset: number,
-  instanceProps: InstanceProps
+  instanceProps: InstanceProps,
+  scrollbarSize: number
 ): number => {
   const size = itemType === 'column' ? props.width : props.height;
   const itemMetadata = getItemMetadata(itemType, props, index, instanceProps);
@@ -249,7 +250,10 @@ const getOffsetForIndexAndAlignment = (
     0,
     Math.min(estimatedTotalSize - size, itemMetadata.offset)
   );
-  const minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
+  const minOffset = Math.max(
+    0,
+    itemMetadata.offset - size + scrollbarSize + itemMetadata.size
+  );
 
   switch (align) {
     case 'start':
@@ -324,31 +328,35 @@ const VariableSizeGrid = createGridComponent({
     index: number,
     align: ScrollToAlign,
     scrollOffset: number,
-    instanceProps: InstanceProps
+    instanceProps: InstanceProps,
+    scrollbarSize: number
   ): number =>
     getOffsetForIndexAndAlignment(
       'column',
       props,
       index,
       align,
       scrollOffset,
-      instanceProps
+      instanceProps,
+      scrollbarSize
     ),
 
   getOffsetForRowAndAlignment: (
     props: Props<any>,
     index: number,
     align: ScrollToAlign,
     scrollOffset: number,
-    instanceProps: InstanceProps
+    instanceProps: InstanceProps,
+    scrollbarSize: number
   ): number =>
     getOffsetForIndexAndAlignment(
       'row',
       props,
       index,
       align,
       scrollOffset,
-      instanceProps
+      instanceProps,
+      scrollbarSize
     ),
 
   getRowOffset: (

src/VariableSizeList.js

@@ -185,9 +185,11 @@ const VariableSizeList = createListComponent({
     scrollOffset: number,
     instanceProps: InstanceProps
   ): number => {
-    const { direction, height, width } = props;
+    const { direction, height, layout, width } = props;
 
-    const size = (((direction === 'horizontal' ? width : height): any): number);
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const size = (((isHorizontal ? width : height): any): number);
     const itemMetadata = getItemMetadata(props, index, instanceProps);
 
     // Get estimated total size after ItemMetadata is computed,
@@ -234,9 +236,11 @@ const VariableSizeList = createListComponent({
     scrollOffset: number,
     instanceProps: InstanceProps
   ): number => {
-    const { direction, height, itemCount, width } = props;
+    const { direction, height, itemCount, layout, width } = props;
 
-    const size = (((direction === 'horizontal' ? width : height): any): number);
+    // TODO Deprecate direction "horizontal"
+    const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
+    const size = (((isHorizontal ? width : height): any): number);
     const itemMetadata = getItemMetadata(props, startIndex, instanceProps);
     const maxOffset = scrollOffset + size;