feat: Close modal on backdrop/overlay click or on Esc keydown (#403)

* added feature to close overlay on backdrop click

* added escape event listener to close modal

packages/react/src/components/GenericModal/GenericModal.js

@@ -28,7 +28,7 @@ const renderIcon = (icon, variant) => {
 };
 
 const GenericModal = ({ variant = 'info', children, title, icon, onClose }) => (
-  <Modal>
+  <Modal onClose={onClose}>
     <Modal.Header>
       {renderIcon(icon, variant)}
       <Modal.Title>{title ?? 'Are_you_sure'}</Modal.Title>

packages/react/src/components/Message/MessageToolbox.js

@@ -91,12 +91,11 @@ export const MessageToolbox = ({
           <ActionButton
             ghost
             size="small"
-            icon={`${
-              message.starred &&
-              message.starred.find((u) => u._id === authenticatedUserId)
+            icon={`${message.starred &&
+                message.starred.find((u) => u._id === authenticatedUserId)
                 ? 'star-filled'
                 : 'star'
-            }`}
+              }`}
             onClick={() => handleStarMessage(message)}
           />
           <ActionButton
@@ -155,7 +154,7 @@ export const MessageToolbox = ({
         </Box>
       </Box>
       {showDeleteModal && (
-        <Modal>
+        <Modal onClose={handleOnClose}>
           <Modal.Header>
             <Modal.Title>
               <Icon name="trash" size="1.25rem" /> Delete this message?

packages/react/src/components/Modal/Modal.js

@@ -1,12 +1,13 @@
 import { css, useTheme } from '@emotion/react';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef, useCallback, useEffect } from 'react';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 import { Box } from '../Box';
 import { ModalBackdrop } from './ModalBackdrop';
 
 export const Modal = forwardRef(
-  ({ className = '', style = {}, open = true, children, ...props }, ref) => {
+  ({ className = '', style = {}, open = true, children, onClose = () => { }, ...props }, ref) => {
     const { classNames, styleOverrides } = useComponentOverrides('Modal');
+    const backDropRef = useRef(null);
     const theme = useTheme();
     const ModalCss = css`
       background: none;
@@ -25,8 +26,32 @@ export const Modal = forwardRef(
     if (!open) {
       return null;
     }
+
+    const handleClick = useCallback(
+      (e) => {
+        if (e.target === backDropRef.current) {
+          onClose();
+        }
+      },
+      [onClose]
+    );
+
+    const handleEscKey = useCallback((e) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    }, [onClose]);
+
+    useEffect(() => {
+      window.addEventListener('keydown', handleEscKey);
+
+      return () => {
+        window.removeEventListener('keydown', handleEscKey);
+      };
+    }, [handleEscKey]);
+
     return (
-      <ModalBackdrop>
+      <ModalBackdrop ref={backDropRef} onClick={handleClick}>
         <Box
           ref={ref}
           is="dialog"

packages/react/src/components/Modal/ModalBackdrop.js

@@ -1,22 +1,26 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Box } from '../Box';
 
-export const ModalBackdrop = ({ children }) => (
-  <Box
-    style={{
-      position: 'fixed',
-      zIndex: 10000,
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      background: '#333333B3',
-      width: '100%',
-      height: '100%',
-    }}
-  >
-    {children}
-  </Box>
-);
+export const ModalBackdrop = forwardRef(({ children, onClick = () => { } }, ref) => {
+  return (
+    <Box
+      ref={ref}
+      onClick={onClick}
+      style={{
+        position: 'fixed',
+        zIndex: 10000,
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#333333B3',
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      {children}
+    </Box>
+  )
+});

packages/react/src/components/ReportMessage/ReportWindowButtons.js

@@ -40,7 +40,7 @@ const ReportWindowButtons = ({ children, reportDescription, messageId }) => {
   };
 
   return (
-    <Modal>
+    <Modal onClose={handleOnClose}>
       <Modal.Header>
         <Modal.Title>
           <Icon name="report" size="1.25rem" /> Report this message?

packages/react/src/components/uiKit/blocks/ModalBlock.js

@@ -61,6 +61,7 @@ function ModalBlock({ view, errors, onSubmit, onClose, onCancel }) {
   );
   return (
     <Modal
+      onClose={onClose}
       open
       id={id}
       ref={ref}