From 1dc9f65f42d1aadd8b48783328100d4f0515fa4c Mon Sep 17 00:00:00 2001
From: Roman Akhmadullin <akhmadullin_roman@mail.ru>
Date: Fri, 16 Jul 2021 13:08:54 +1000
Subject: [PATCH 1/3] chore: add story for a grid list with enabled
 useWindowAsScrollContainer

---
 src/.stories/Storybook.scss |  8 ++++++++
 src/.stories/index.js       | 20 ++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/.stories/Storybook.scss b/src/.stories/Storybook.scss
index 9c62f41bd..2f2e2a48d 100644
--- a/src/.stories/Storybook.scss
+++ b/src/.stories/Storybook.scss
@@ -11,6 +11,10 @@ $focusedOutlineColor: #4c9ffe;
   align-items: center;
 }
 
+.rootAutoHeight {
+  height: auto;
+}
+
 // Base styles
 .list {
   width: 400px;
@@ -122,6 +126,10 @@ $focusedOutlineColor: #4c9ffe;
   background-color: transparent;
 }
 
+.gridAutoHeight {
+  height: auto;
+}
+
 .gridItem {
   width: 130px;
   height: 130px;
diff --git a/src/.stories/index.js b/src/.stories/index.js
index 5981f3cb9..980de4777 100644
--- a/src/.stories/index.js
+++ b/src/.stories/index.js
@@ -597,6 +597,26 @@ storiesOf('General | Layout / Grid', module)
         />
       </div>
     );
+  })
+  .add('Window as scroll container', () => {
+    return (
+      <div className={classNames(style.root, style.rootAutoHeight)}>
+        <ListWrapper
+          component={SortableList}
+          axis={'xy'}
+          items={getItems(40, false)}
+          helperClass={style.stylizedHelper}
+          useWindowAsScrollContainer
+          className={classNames(
+            style.list,
+            style.stylizedList,
+            style.grid,
+            style.gridAutoHeight,
+          )}
+          itemClass={classNames(style.stylizedItem, style.gridItem)}
+        />
+      </div>
+    );
   });
 
 storiesOf('General | Configuration / Options', module)

From fcdea48080c05945d9458f19bff344209238b129 Mon Sep 17 00:00:00 2001
From: Roman Akhmadullin <akhmadullin_roman@mail.ru>
Date: Fri, 16 Jul 2021 13:13:09 +1000
Subject: [PATCH 2/3] fix: fix incorrect sorting behavior in grid layout with
 enabled useWindowAsScrollContainer

---
 src/SortableContainer/index.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js
index 9b24a0456..72bc57a77 100644
--- a/src/SortableContainer/index.js
+++ b/src/SortableContainer/index.js
@@ -260,6 +260,12 @@ export default function sortableContainer(
         const margin = getElementMargin(node);
         const gridGap = getContainerGridGap(this.container);
         const containerBoundingRect = this.scrollContainer.getBoundingClientRect();
+
+        // Need for correct sorting behavior in grid layout with enabled `useWindowAsScrollContainer`
+        if (useWindowAsScrollContainer) {
+          containerBoundingRect.width = this.container.clientWidth;
+        }
+
         const dimensions = getHelperDimensions({index, node, collection});
 
         this.node = node;
@@ -645,9 +651,9 @@ export default function sortableContainer(
 
         // For keyboard sorting, we want user input to dictate the position of the nodes
         const mustShiftBackward =
-          isKeySorting && (index > this.index && index <= prevIndex);
+          isKeySorting && index > this.index && index <= prevIndex;
         const mustShiftForward =
-          isKeySorting && (index < this.index && index >= prevIndex);
+          isKeySorting && index < this.index && index >= prevIndex;
 
         const translate = {
           x: 0,

From 70b02b46af89221d24fa731d830a6f9267e17433 Mon Sep 17 00:00:00 2001
From: Roman Akhmadullin <akhmadullin_roman@mail.ru>
Date: Fri, 16 Jul 2021 13:23:25 +1000
Subject: [PATCH 3/3] fix: delete unused variables from stories index file

---
 src/.stories/index.js | 35 ++++++++++++++---------------------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/.stories/index.js b/src/.stories/index.js
index 980de4777..dfc5bae66 100644
--- a/src/.stories/index.js
+++ b/src/.stories/index.js
@@ -438,22 +438,20 @@ const ShrinkingSortableList = SortableContainer(
   },
 );
 
-const NestedSortableList = SortableContainer(
-  ({className, items, isSorting}) => {
-    return (
-      <div className={className}>
-        {items.map((value, index) => (
-          <Category
-            tabbable
-            key={`category-${value}`}
-            index={index}
-            value={value}
-          />
-        ))}
-      </div>
-    );
-  },
-);
+const NestedSortableList = SortableContainer(({className, items}) => {
+  return (
+    <div className={className}>
+      {items.map((value, index) => (
+        <Category
+          tabbable
+          key={`category-${value}`}
+          index={index}
+          value={value}
+        />
+      ))}
+    </div>
+  );
+});
 
 storiesOf('General | Layout / Vertical list', module)
   .add('Basic setup', () => {
@@ -515,11 +513,6 @@ storiesOf('General | Layout / Horizontal list', module).add(
 
 storiesOf('General | Layout / Grid', module)
   .add('Basic setup', () => {
-    const transformOrigin = {
-      x: 0,
-      y: 0,
-    };
-
     return (
       <div className={style.root}>
         <ListWrapper