> = function ({
+ children,
+ className,
+ ...args
+}) {
+ const goBack = useReturnToFn();
+ const { formatMessage } = useIntl();
+
return (
-
- {displayMode === 'page' ? (
-
- ) : null}
- {children}
-
+
+
+
+
+
+
);
-});
+};
+
+const OverlayModal: React.FC> =
+ function ({ children, className }) {
+ const goBack = useReturnToFn();
+ const { formatMessage } = useIntl();
+
+ return (
+
+ isOpen || goBack()}>
+
+
+
goBack()}
+ onPointerDownOutside={(e) => e.preventDefault()}>
+
+
+
+
+
+
+ );
+ };
/**
* A Modal or dialog box component
@@ -43,39 +101,11 @@ export const Scrim = React.forwardRef<
*/
const Modal: React.FC<
{ displayMode: 'modal' | 'page' } & DialogHTMLAttributes
-> = function ({ children, className, displayMode = 'modal', ...args }) {
- const goBack = useReturnToFn();
- const { formatMessage } = useIntl();
-
- return (
-
- isOpen || goBack()}>
-
- goBack()}>
- e.preventDefault()}>
-
-
-
-
-
-
+> = function ({ displayMode, ...args }) {
+ return displayMode === 'modal' ? (
+
+ ) : (
+
);
};
diff --git a/src/components/Modal/styles.module.css b/src/components/Modal/styles.module.css
index 5192af7202..f2fd7ad766 100644
--- a/src/components/Modal/styles.module.css
+++ b/src/components/Modal/styles.module.css
@@ -5,6 +5,7 @@
align-items: center;
justify-content: center;
padding: 10px;
+ pointer-events: auto;
}
.modalContainer {