fix: APP-2253 removed scroll from modals and bottom sheet components

packages/ui-components/src/components/backdrop/backdrop.tsx

@@ -1,4 +1,4 @@
-import React, {ReactNode} from 'react';
+import React, {ReactNode, useEffect} from 'react';
 import styled, {CSSProperties} from 'styled-components';
 
 export interface BackdropProps {
@@ -26,6 +26,27 @@ export const Backdrop: React.FC<BackdropProps> = ({
   ...props
 }) => {
   // TODO:Implement Backdrop to use as wrapper
+
+  useEffect(() => {
+    const html = document.querySelector('html');
+    if (!html) return;
+    html.style.overflow = visible ? 'hidden' : 'auto';
+  }, [visible]);
+
+  useEffect(() => {
+    function lockScrollOnResize() {
+      const html = document.querySelector('html');
+      if (!visible || !html) return;
+      html.style.overflow = 'hidden';
+    }
+
+    window?.addEventListener?.('resize', lockScrollOnResize);
+
+    return () => {
+      window?.removeEventListener?.('resize', lockScrollOnResize);
+    };
+  }, [visible]);
+
   return (
     <StyledBackdrop
       data-testid="backdrop-container"
@@ -42,11 +63,12 @@ type StyledBackdropProps = {
   visible: boolean;
 };
 
-const StyledBackdrop = styled.div.attrs(({visible}: StyledBackdropProps) => {
+export const BackdropStyles = ({visible}: {visible: boolean}) => {
   const className: string = visible
     ? 'visible opacity-100 z-20'
     : 'invisible opacity-0';
-  const style: CSSProperties = {
+
+  const css: CSSProperties = {
     position: 'fixed',
     top: 0,
     left: 0,
@@ -60,5 +82,10 @@ const StyledBackdrop = styled.div.attrs(({visible}: StyledBackdropProps) => {
     marginTop: 0,
   };
 
-  return {className, style};
+  return {className, css};
+};
+
+const StyledBackdrop = styled.div.attrs(({visible}: StyledBackdropProps) => {
+  const {className, css} = BackdropStyles({visible});
+  return {className, style: css};
 })<StyledBackdropProps>``;

packages/ui-components/src/components/modal/modal.tsx

@@ -1,7 +1,14 @@
 import React, {ReactNode, CSSProperties} from 'react';
 import styled from 'styled-components';
-import {Root, Title, Content, Close, Portal} from '@radix-ui/react-dialog';
-import {Backdrop} from '../backdrop';
+import {
+  Root,
+  Title,
+  Content,
+  Close,
+  Portal,
+  Overlay,
+} from '@radix-ui/react-dialog';
+import {BackdropStyles} from '../backdrop';
 import {IconClose} from '../icons';
 
 export interface ModalProps {
@@ -52,7 +59,7 @@ export const Modal: React.FC<ModalProps> = ({
     <>
       <Root open={isOpen}>
         <Portal>
-          <Backdrop visible={isOpen} />
+          <ModalOverlay />
           <ModalContainer
             data-testid="modal-content"
             onInteractOutside={onInteractOutside}
@@ -125,3 +132,8 @@ const ModalClose = styled(Close).attrs({
   className:
     'flex-shrink-0 text-ui-500 w-4 h-4 rounded-lg bg-ui-50 outline:none',
 })``;
+
+const ModalOverlay = styled(Overlay).attrs(() => {
+  const {className, css} = BackdropStyles({visible: true});
+  return {className, style: css};
+})``;