From 83b5901b5d4c3332f8a43eb158c946361d323555 Mon Sep 17 00:00:00 2001
From: Anton Korzunov <thekashey@gmail.com>
Date: Tue, 22 Jan 2019 12:49:16 +1100
Subject: [PATCH] fix: add scroll-lock to modals, fixes #25

---
 package.json                  |  2 +-
 packages/core-em/package.json |  1 +
 packages/core-sc/package.json |  1 +
 packages/shared/core/Modal.js | 47 +++++++++++++++++++----------------
 yarn.lock                     | 24 +++++++++++++++++-
 5 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 8f4444370..2ddcb92d1 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "bundlesize": [
     {
       "path": "./packages/core-em/dist/smooth-ui-core-em.min.js",
-      "maxSize": "20 kB"
+      "maxSize": "21 kB"
     },
     {
       "path": "./packages/core-sc/dist/smooth-ui-core-sc.min.js",
diff --git a/packages/core-em/package.json b/packages/core-em/package.json
index 7e112d7d6..145398d68 100644
--- a/packages/core-em/package.json
+++ b/packages/core-em/package.json
@@ -30,6 +30,7 @@
     "polished": "^2.3.3",
     "prop-types": "^15.6.2",
     "react-focus-lock": "^1.17.6",
+    "react-remove-scroll": "^1.0.1",
     "react-transition-group": "^2.5.3"
   },
   "peerDependencies": {
diff --git a/packages/core-sc/package.json b/packages/core-sc/package.json
index 2e337cae9..05f4491c7 100644
--- a/packages/core-sc/package.json
+++ b/packages/core-sc/package.json
@@ -30,6 +30,7 @@
     "polished": "^2.3.3",
     "prop-types": "^15.6.2",
     "react-focus-lock": "^1.17.6",
+    "react-remove-scroll": "^1.0.1",
     "react-transition-group": "^2.5.3"
   },
   "peerDependencies": {
diff --git a/packages/shared/core/Modal.js b/packages/shared/core/Modal.js
index d3932cc37..538a182a1 100644
--- a/packages/shared/core/Modal.js
+++ b/packages/shared/core/Modal.js
@@ -2,6 +2,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import FocusLock from 'react-focus-lock'
+import { RemoveScroll } from 'react-remove-scroll';
 import { css, withTheme } from './styled-engine'
 import { th, mixin } from './utils/system'
 import Transition from './Transition'
@@ -89,31 +90,33 @@ class ModalComponent extends React.Component {
           return (
             <Portal>
               <FocusLock returnFocus onActivation={this.onFocusLockActivation}>
-                <div
-                  className={cx(
-                    'sui-modal',
-                    `sui-modal-transition-${status}`,
-                    className,
-                  )}
-                  ref={this.handleDialogRef}
-                  onClick={wrapEvent(onClick, event => {
-                    event.stopPropagation()
-                    onClose()
-                  })}
-                  onKeyDown={wrapEvent(onKeyDown, event => {
-                    if (event.key === 'Escape') {
+                <RemoveScroll forwardProps>
+                  <div
+                    className={cx(
+                      'sui-modal',
+                      `sui-modal-transition-${status}`,
+                      className,
+                    )}
+                    ref={this.handleDialogRef}
+                    onClick={wrapEvent(onClick, event => {
                       event.stopPropagation()
                       onClose()
-                    }
-                  })}
-                  {...props}
-                >
-                  <ModalContext.Provider
-                    value={{ contentRef: this.contentRef, onClose }}
+                    })}
+                    onKeyDown={wrapEvent(onKeyDown, event => {
+                      if (event.key === 'Escape') {
+                        event.stopPropagation()
+                        onClose()
+                      }
+                    })}
+                    {...props}
                   >
-                    {children}
-                  </ModalContext.Provider>
-                </div>
+                    <ModalContext.Provider
+                      value={{ contentRef: this.contentRef, onClose }}
+                    >
+                      {children}
+                    </ModalContext.Provider>
+                  </div>
+                </RemoveScroll>
               </FocusLock>
             </Portal>
           )
diff --git a/yarn.lock b/yarn.lock
index 2ac95dcdd..1fac1f18a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11450,6 +11450,20 @@ react-powerplug@^1.0.0:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
+react-remove-scroll-bar@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-1.1.3.tgz#21eb49a0cc9628746d2b624880fb272a3541866a"
+  integrity sha512-mEPbImnGIxv+PyVTpeuGhWVl2aAQgSpB2yX4lL6ttsjT/XVVZwyPiz4gnCxBPoWYniQBLTL1IjZ/rrQLT9ZIJg==
+  dependencies:
+    react-style-singleton "^1.1.0"
+
+react-remove-scroll@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-1.0.1.tgz#b2033e87edfe19b7c8160b7d7b58e5bdf76f1caa"
+  integrity sha512-gSKT049UTFMvT1DhBlRCVqpPpcyqUs2b9Ncp81Dc0USh2c+la5yl70+BYK0jFWOMisMDcxaiOMpdIqpeKUO2Jw==
+  dependencies:
+    react-remove-scroll-bar "^1.1.3"
+
 react-router-dom@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
@@ -11490,6 +11504,14 @@ react-sizes@^1.0.4:
     lodash.throttle "^4.1.1"
     prop-types "^15.6.0"
 
+react-style-singleton@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-1.1.1.tgz#b2b698765519da812b80f55ab3c5fc5d849a2e63"
+  integrity sha512-0JD+XC5veR3oxf7GzIXipr89sM8R3rWnOR/gpzIV0DnoRBrcTvvkqyMu9icDYqM/6CWJhYcH5Jdy6Nim7PmoTQ==
+  dependencies:
+    invariant "^2.2.4"
+    tslib "^1.0.0"
+
 react-test-renderer@^16.0.0-0:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.5.2.tgz#92e9d2c6f763b9821b2e0b22f994ee675068b5ae"
@@ -13562,7 +13584,7 @@ tryer@^1.0.0:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
-tslib@^1.9.0:
+tslib@^1.0.0, tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==