feat(Modal): disable scroll outside of modal when it is open (#2433)

Author: YossiSaadi

packages/core/package.json

@@ -114,6 +114,7 @@
     "react-inlinesvg": "^3.0.1",
     "react-is": "^16.9.0",
     "react-popper": "^2.3.0",
+    "react-remove-scroll": "^2.6.0",
     "react-select": "^3.2.0",
     "react-transition-group": "^4.4.5",
     "react-virtualized-auto-sizer": "^1.0.7",

packages/core/src/components/ModalNew/Modal/Modal.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useCallback, useMemo, useState } from "react";
 import cx from "classnames";
+import { RemoveScroll } from "react-remove-scroll";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../tests/constants";
 import styles from "./Modal.module.scss";
@@ -71,30 +72,32 @@ const Modal = forwardRef(
 
     return (
       <ModalProvider value={contextValue}>
-        <div
-          data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
-          className={styles.overlay}
-          onClick={onBackdropClick}
-          aria-hidden
-        />
-        <div
-          ref={ref}
-          className={cx(styles.modal, getStyle(styles, camelCase("size-" + size)), className)}
-          id={id}
-          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}
-          role="dialog"
-          aria-modal
-          aria-labelledby={titleId}
-          aria-describedby={descriptionId}
-        >
-          <ModalTopActions
-            renderAction={renderHeaderAction}
-            color={closeButtonTheme}
-            closeButtonAriaLabel={closeButtonAriaLabel}
-            onClose={onClose}
+        <RemoveScroll>
+          <div
+            data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
+            className={styles.overlay}
+            onClick={onBackdropClick}
+            aria-hidden
           />
-          {children}
-        </div>
+          <div
+            ref={ref}
+            className={cx(styles.modal, getStyle(styles, camelCase("size-" + size)), className)}
+            id={id}
+            data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}
+            role="dialog"
+            aria-modal
+            aria-labelledby={titleId}
+            aria-describedby={descriptionId}
+          >
+            <ModalTopActions
+              renderAction={renderHeaderAction}
+              color={closeButtonTheme}
+              closeButtonAriaLabel={closeButtonAriaLabel}
+              onClose={onClose}
+            />
+            {children}
+          </div>
+        </RemoveScroll>
       </ModalProvider>
     );
   }

packages/core/src/tests/constants.ts

@@ -105,6 +105,8 @@ export enum ComponentDefaultTestId {
   MODAL_FOOTER_BUTTONS = "modal-footer-buttons",
   MODAL_NEXT = "modal",
   MODAL_NEXT_OVERLAY = "modal-overlay",
+  MODAL_NEXT_HEADER = "modal-header",
+  MODAL_NEXT_CONTENT = "modal-content",
   FORMATTED_NUMBER = "formatted-number",
   HIDDEN_TEXT = "hidden-text",
   DIALOG_CONTENT_CONTAINER = "dialog-content-container",

yarn.lock

@@ -16888,7 +16888,7 @@ react-refresh@^0.14.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-remove-scroll-bar@^2.3.3:
+react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.6:
   version "2.3.6"
   resolved "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
   integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
@@ -16907,6 +16907,17 @@ [email protected]:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-remove-scroll@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz#fb03a0845d7768a4f1519a99fdb84983b793dc07"
+  integrity sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==
+  dependencies:
+    react-remove-scroll-bar "^2.3.6"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-resizable@^3.0.4:
   version "3.0.5"
   resolved "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz#362721f2efbd094976f1780ae13f1ad7739786c1"