fix: missing Modal props and Overlay styles

src/component-library/Modal/Modal.tsx

@@ -17,7 +17,17 @@ type ModalProps = Props & InheritAttrs;
 
 const Modal = forwardRef<HTMLDivElement, ModalProps>(
   (
-    { children, isDismissable = true, align = 'center', hasMaxHeight, isKeyboardDismissDisabled, container, ...props },
+    {
+      children,
+      isDismissable = true,
+      align = 'center',
+      hasMaxHeight,
+      isKeyboardDismissDisabled,
+      shouldCloseOnBlur,
+      shouldCloseOnInteractOutside,
+      container,
+      ...props
+    },
     ref
   ): JSX.Element | null => {
     const domRef = useDOMRef(ref);
@@ -31,6 +41,8 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
           isDismissable={isDismissable}
           isOpen={isOpen}
           isKeyboardDismissDisabled={isKeyboardDismissDisabled}
+          shouldCloseOnBlur={shouldCloseOnBlur}
+          shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
           onClose={onClose}
         >
           <Dialog hasMaxHeight={hasMaxHeight} align={align} {...props}>

src/component-library/Modal/ModalWrapper.tsx

@@ -18,13 +18,29 @@ type ModalWrapperProps = Props & InheritAttrs;
 
 const ModalWrapper = forwardRef<HTMLDivElement, ModalWrapperProps>(
   (
-    { children, isDismissable = true, align = 'center', onClose, isKeyboardDismissDisabled, isOpen, ...props },
+    {
+      children,
+      isDismissable = true,
+      align = 'center',
+      onClose,
+      isKeyboardDismissDisabled,
+      isOpen,
+      shouldCloseOnInteractOutside,
+      shouldCloseOnBlur,
+      ...props
+    },
     ref
   ): JSX.Element | null => {
     // Handle interacting outside the dialog and pressing
     // the Escape key to close the modal.
     const { modalProps, underlayProps } = useModalOverlay(
-      { isDismissable, isKeyboardDismissDisabled, ...props },
+      {
+        isDismissable,
+        isKeyboardDismissDisabled,
+        shouldCloseOnInteractOutside,
+        shouldCloseOnBlur,
+        ...props
+      } as AriaOverlayProps,
       // These are the only props needed
       { isOpen: !!isOpen, close: onClose } as OverlayTriggerState,
       ref as RefObject<HTMLElement>

src/component-library/Overlay/Overlay.style.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const StyledOverlayWrapper = styled.div`
+  isolation: isolate;
+  background: transparent;
+`;
+
+export { StyledOverlayWrapper };

src/component-library/Overlay/Overlay.tsx

@@ -2,6 +2,7 @@ import { Overlay as AriaOverlay } from '@react-aria/overlays';
 import { ReactNode, useCallback, useState } from 'react';
 
 import { OpenTransition } from './OpenTransition';
+import { StyledOverlayWrapper } from './Overlay.style';
 
 type OverlayProps = {
   children: ReactNode;
@@ -53,7 +54,7 @@ const Overlay = ({
 
   return (
     <AriaOverlay portalContainer={container}>
-      <div>
+      <StyledOverlayWrapper>
         <OpenTransition
           in={isOpen}
           appear
@@ -66,7 +67,7 @@ const Overlay = ({
         >
           {children}
         </OpenTransition>
-      </div>
+      </StyledOverlayWrapper>
     </AriaOverlay>
   );
 };

src/pages/AMM/shared/components/SlippageManager/SlippageManager.tsx

@@ -17,7 +17,9 @@ const SlippageManager = forwardRef<HTMLDivElement, SlippageManagerProps>(
     const handleSelectionChange: ListProps['onSelectionChange'] = (key) => {
       const [selectedKey] = [...key];
 
-      if (!selectedKey) return;
+      if (!selectedKey) {
+        return setOpen(false);
+      }
 
       onChange?.(Number(selectedKey));
       setOpen(false);