feat: add scroll-lock to modals, fixes #25 (#103)

Author: theKashey

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",

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": {

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": {

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'
@@ -90,31 +91,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>
           )

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==