modal update & close handler

platform/core/src/services/UIModalService/index.js

@@ -33,7 +33,7 @@ const serviceImplementation = {
 function _show({
   content = null,
   contentProps = null,
-  shouldCloseOnEsc = false,
+  shouldCloseOnEsc = true,
   isOpen = true,
   closeButton = true,
   title = null,

platform/ui/src/components/Modal/Modal.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
 import classNames from 'classnames';
 
-import { Typography } from '@ohif/ui';
+import { Typography, useModal } from '@ohif/ui';
 
 const customStyle = {
   overlay: {
@@ -27,6 +27,12 @@ const Modal = ({
   onClose,
   children,
 }) => {
+  const { hide } = useModal();
+
+  const handleClose = () => {
+    hide();
+  };
+
   const renderHeader = () => {
     return (
       title && (
@@ -52,6 +58,7 @@ const Modal = ({
         `relative py-6 w-11/12 lg:w-10/12 xl:w-1/2 max-h-full outline-none bg-primary-dark border border-secondary-main text-white rounded ${className}`
       )}
       shouldCloseOnEsc={shouldCloseOnEsc}
+      onRequestClose={handleClose}
       isOpen={isOpen}
       title={title}
       style={customStyle}

platform/ui/src/contextProviders/ModalComponent.jsx

@@ -16,7 +16,7 @@ const ModalComponent = ({
 ModalComponent.defaultProps = {
   content: null,
   contentProps: null,
-  shouldCloseOnEsc: false,
+  shouldCloseOnEsc: true,
   isOpen: true,
   closeButton: true,
   title: null,

platform/ui/src/contextProviders/ModalProvider.jsx

@@ -19,7 +19,7 @@ export const useModal = () => useContext(ModalContext);
  * @typedef {Object} ModalProps
  * @property {ReactElement|HTMLElement} [content=null] Modal content.
  * @property {Object} [contentProps=null] Modal content props.
- * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [shouldCloseOnEsc=true] Modal is dismissible via the esc key.
  * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
  * @property {boolean} [closeButton=true] Should the modal body render the close button.
  * @property {string} [title=null] Should the modal render the title independently of the body content.
@@ -30,7 +30,7 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
   const DEFAULT_OPTIONS = {
     content: null,
     contentProps: null,
-    shouldCloseOnEsc: false,
+    shouldCloseOnEsc: true,
     isOpen: true,
     closeButton: true,
     title: null,