From c95b7993233c49b45fe53e879c77aa88c5aa217b Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Wed, 25 Sep 2024 10:46:08 +0300
Subject: [PATCH] feat(Modal): disable scroll outside of modal when it is open
 (#2433)

---
 packages/core/package.json                    |  1 +
 .../src/components/ModalNew/Modal/Modal.tsx   | 49 ++++++++++---------
 packages/core/src/tests/constants.ts          |  2 +
 yarn.lock                                     | 13 ++++-
 4 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 14086d134e..c79b56055c 100644
--- a/packages/core/package.json
+++ b/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",
diff --git a/packages/core/src/components/ModalNew/Modal/Modal.tsx b/packages/core/src/components/ModalNew/Modal/Modal.tsx
index 616be8f629..9b4adcd6b2 100644
--- a/packages/core/src/components/ModalNew/Modal/Modal.tsx
+++ b/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>
     );
   }
diff --git a/packages/core/src/tests/constants.ts b/packages/core/src/tests/constants.ts
index 20524779ef..f8c8a4e3b1 100644
--- a/packages/core/src/tests/constants.ts
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index efd367b6eb..420a7aaccf 100644
--- a/yarn.lock
+++ b/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 @@ react-remove-scroll@2.5.5:
     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"