chore: introduced ModalWrapper, now we use it instead of Modal from u…

…ikit [#768]

packages/ui/src/ui/components/Modal/Modal.tsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import block from 'bem-cn-lite';
 
-import {Modal as ModalImpl} from '@gravity-ui/uikit';
+import {ModalWrapper as ModalImpl} from '../ModalWrapper/ModalWrapper';
 import Icon from '../Icon/Icon';
 
 import withHandledScrollBar from '../../hocs/components/Modal/withHandledScrollBar';

packages/ui/src/ui/components/Modal/SimpleModal.tsx

@@ -3,7 +3,8 @@ import block from 'bem-cn-lite';
 
 import Icon from '../Icon/Icon';
 
-import {Button, Loader, Modal as ModalImpl} from '@gravity-ui/uikit';
+import {Button, Loader} from '@gravity-ui/uikit';
+import {ModalWrapper as ModalImpl} from '../ModalWrapper/ModalWrapper';
 
 import withHandledScrollBar from '../../hocs/components/Modal/withHandledScrollBar';
 

packages/ui/src/ui/components/ModalWrapper/ModalWrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {Modal, ModalProps} from '@gravity-ui/uikit';
+import {useHotkeysScope} from '../../hooks/use-hotkeysjs-scope';
+
+type ModalWrapperProps = ModalProps & {hotkeyScope?: string};
+
+export const ModalWrapper: React.FC<ModalWrapperProps> = (props) => {
+    const {hotkeyScope = 'yt-modal', ...restProps} = props;
+
+    // We don't want to trigger any page hotkeys when modal is visible,
+    // therefore we switing to dialog hotkeys scope.
+    useHotkeysScope(hotkeyScope, Boolean(restProps.open));
+
+    return <Modal {...restProps} />;
+};