From ad3bd4eb63346fd7fce27b9d4f7968df70c24b81 Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Tue, 29 Oct 2024 02:33:19 +0300
Subject: [PATCH] refactor: update ModalRoot/ModalPage/ModalCard

---
 packages/vkui/package.json                    |   2 +-
 .../components/Backdrop/Backdrop.module.css   |  55 ++
 .../vkui/src/components/Backdrop/Backdrop.tsx |  45 +
 .../vkui/src/components/Group/Group.test.tsx  |  12 +-
 .../src/components/Group/GroupContainer.tsx   |   4 +-
 .../ModalCard/ModalCard.e2e-playground.tsx    |  14 +-
 .../components/ModalCard/ModalCard.module.css | 105 ++-
 .../ModalCard/ModalCard.stories.tsx           |  72 +-
 .../components/ModalCard/ModalCard.test.tsx   |  71 +-
 .../src/components/ModalCard/ModalCard.tsx    | 116 +--
 .../ModalCard/ModalCardInternal.tsx           | 203 +++++
 ...rd-mobile-android-chromium-dark-1-snap.png |   4 +-
 ...odalcard-mobile-ios-webkit-dark-1-snap.png |   4 +-
 .../ModalCardBase/ModalCardBase.module.css    |   1 -
 .../ModalCardBase/ModalCardBase.tsx           |   9 +-
 .../ModalOutlet/ModalOutlet.module.css        |  16 +
 .../components/ModalOutlet/ModalOutlet.tsx    |  31 +
 .../components/ModalPage/ModalPage.module.css | 247 +++---
 .../ModalPage/ModalPage.stories.tsx           | 479 ++++++++---
 .../components/ModalPage/ModalPage.test.tsx   |  58 +-
 .../src/components/ModalPage/ModalPage.tsx    | 202 +----
 .../components/ModalPage/ModalPageContext.tsx |   8 -
 .../ModalPage/ModalPageInternal.tsx           | 214 +++++
 .../src/components/ModalPage/checklist.md     |  25 +
 .../vkui/src/components/ModalPage/types.ts    | 104 +++
 .../ModalPageContent.module.css               |   4 +
 .../ModalPageContent/ModalPageContent.tsx     |  25 +
 .../ModalPageFooter.module.css                |  14 +
 .../ModalPageFooter/ModalPageFooter.tsx       |  25 +
 .../ModalPageHeader.e2e-playground.tsx        |  13 +-
 .../ModalPageHeader.module.css                |  10 +-
 .../ModalPageHeader.stories.tsx               |   3 +-
 .../ModalPageHeader/ModalPageHeader.tsx       |  10 +-
 .../components/ModalRoot/ModalRoot.module.css |  59 --
 .../ModalRoot/ModalRoot.stories.tsx           |  67 +-
 .../components/ModalRoot/ModalRoot.test.tsx   | 688 ++++------------
 .../src/components/ModalRoot/ModalRoot.tsx    | 769 ++----------------
 .../ModalRoot/ModalRootAdaptive.test.tsx      |  41 -
 .../ModalRoot/ModalRootAdaptive.tsx           |  21 -
 .../components/ModalRoot/ModalRootContext.tsx |  63 +-
 .../components/ModalRoot/ModalRootDesktop.tsx | 243 ------
 .../vkui/src/components/ModalRoot/Readme.md   |  91 +--
 .../src/components/ModalRoot/constants.ts     |   1 -
 .../vkui/src/components/ModalRoot/types.ts    |  71 +-
 .../ModalRoot/useModalManager.test.tsx        | 302 -------
 .../components/ModalRoot/useModalManager.tsx  | 298 ++-----
 .../ModalRoot/useModalRootContext.tsx         |   3 +-
 .../ModalRoot/withModalRootContext.tsx        |   2 +-
 .../components/PanelHeader/PanelHeader.tsx    |   4 +-
 .../SplitLayout/SplitLayout.stories.tsx       |   2 +-
 packages/vkui/src/context/ModalContext.tsx    |  18 +
 packages/vkui/src/hooks/useKeyboard.ts        |  56 --
 .../vkui/src/hooks/useVirtualKeyboardState.ts | 170 ++++
 packages/vkui/src/index.ts                    |   4 +-
 packages/vkui/src/lib/dom.tsx                 |  49 ++
 packages/vkui/src/storybook/ModalWrapper.tsx  |   4 +-
 packages/vkui/src/styles/constants.css        |   3 +
 styleguide/config.js                          |   2 +-
 58 files changed, 2193 insertions(+), 3043 deletions(-)
 create mode 100644 packages/vkui/src/components/Backdrop/Backdrop.module.css
 create mode 100644 packages/vkui/src/components/Backdrop/Backdrop.tsx
 create mode 100644 packages/vkui/src/components/ModalCard/ModalCardInternal.tsx
 create mode 100644 packages/vkui/src/components/ModalOutlet/ModalOutlet.module.css
 create mode 100644 packages/vkui/src/components/ModalOutlet/ModalOutlet.tsx
 delete mode 100644 packages/vkui/src/components/ModalPage/ModalPageContext.tsx
 create mode 100644 packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
 create mode 100644 packages/vkui/src/components/ModalPage/checklist.md
 create mode 100644 packages/vkui/src/components/ModalPage/types.ts
 create mode 100644 packages/vkui/src/components/ModalPageContent/ModalPageContent.module.css
 create mode 100644 packages/vkui/src/components/ModalPageContent/ModalPageContent.tsx
 create mode 100644 packages/vkui/src/components/ModalPageFooter/ModalPageFooter.module.css
 create mode 100644 packages/vkui/src/components/ModalPageFooter/ModalPageFooter.tsx
 delete mode 100644 packages/vkui/src/components/ModalRoot/ModalRoot.module.css
 delete mode 100644 packages/vkui/src/components/ModalRoot/ModalRootAdaptive.test.tsx
 delete mode 100644 packages/vkui/src/components/ModalRoot/ModalRootAdaptive.tsx
 delete mode 100644 packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx
 delete mode 100644 packages/vkui/src/components/ModalRoot/constants.ts
 delete mode 100644 packages/vkui/src/components/ModalRoot/useModalManager.test.tsx
 create mode 100644 packages/vkui/src/context/ModalContext.tsx
 delete mode 100644 packages/vkui/src/hooks/useKeyboard.ts
 create mode 100644 packages/vkui/src/hooks/useVirtualKeyboardState.ts

diff --git a/packages/vkui/package.json b/packages/vkui/package.json
index 739ff70f3b..3fbd99bf52 100644
--- a/packages/vkui/package.json
+++ b/packages/vkui/package.json
@@ -66,7 +66,7 @@
     "test:e2e-update": "../../scripts/generate_env_docker.sh -u && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e:ci": "yarn run -T playwright test --config playwright-ct.config.ts",
     "test:e2e-update:ci": "yarn run test:e2e:ci --update-snapshots",
-    "lint:generated-files": "yarn run -T tsc scripts/generateCSSCustomMedias.mjs --checkJs --module ESNext --moduleResolution node --resolveJsonModule --allowSyntheticDefaultImports --noEmit && yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
+    "lint:generated-files": "yarn run -T tsc scripts/generateCSSCustomMedias.mjs --checkJs --module ESNext --moduleResolution node --resolveJsonModule --allowSyntheticDefaultImports --jsx react-jsx --noEmit && yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
     "storybook": "bash -c 'source .env && yarn run -T cross-env SANDBOX=\\.storybook storybook dev -p ${STORYBOOK_DEV_PORT:=6006}'",
     "storybook:build": "yarn run -T cross-env SANDBOX=\\.storybook FROM_STORYBOOK=1 storybook build",
     "generate:css-custom-medias": "node scripts/generateCSSCustomMedias.mjs"
diff --git a/packages/vkui/src/components/Backdrop/Backdrop.module.css b/packages/vkui/src/components/Backdrop/Backdrop.module.css
new file mode 100644
index 0000000000..285106588f
--- /dev/null
+++ b/packages/vkui/src/components/Backdrop/Backdrop.module.css
@@ -0,0 +1,55 @@
+.host {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 0.5s ease;
+  will-change: opacity;
+}
+
+.hostStateEnter {
+  opacity: 0;
+  transition-property: none;
+}
+
+.hostStateEntering {
+  opacity: var(--vkui_internal--backdrop--opacity);
+  transition-timing-function: ease-in;
+}
+
+.hostStateEntered {
+  opacity: var(--vkui_internal--backdrop--opacity);
+}
+
+.hostStateExit {
+  opacity: var(--vkui_internal--backdrop--opacity);
+  transition-property: none;
+}
+
+.hostStateExiting {
+  opacity: 0;
+  transition-timing-function: ease-out;
+}
+
+.hostStateExited {
+  opacity: 0;
+  transition-property: none;
+}
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .hostStateEntering,
+  .hostStateExiting {
+    transition-duration: var(--vkui--animation_duration_l);
+  }
+}
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .hostStateEntering {
+    transition-duration: 0.2s;
+  }
+
+  .hostStateExiting {
+    transition-duration: 0.1s;
+  }
+}
diff --git a/packages/vkui/src/components/Backdrop/Backdrop.tsx b/packages/vkui/src/components/Backdrop/Backdrop.tsx
new file mode 100644
index 0000000000..c6b4d6de96
--- /dev/null
+++ b/packages/vkui/src/components/Backdrop/Backdrop.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { classNames } from '@vkontakte/vkjs';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation/useCSSTransition';
+import type { HasRootRef } from '../../types';
+import styles from './Backdrop.module.css';
+
+const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {
+  appear: styles['hostStateEnter'],
+  appearing: styles['hostStateEntering'],
+  appeared: styles['hostStateEntered'],
+  enter: styles['hostStateEnter'],
+  entering: styles['hostStateEntering'],
+  entered: styles['hostStateEntered'],
+  exit: styles['hostStateExit'],
+  exiting: styles['hostStateExiting'],
+  exited: styles['hostStateExited'],
+};
+
+export interface BackdropProps extends HasRootRef<HTMLDivElement> {
+  visible?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+/**
+ * @private
+ */
+export const Backdrop = ({ visible, getRootRef, onClick, ...restProps }: BackdropProps) => {
+  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(visible, {
+    enableAppear: true,
+  });
+  const handleRef = useExternRef(getRootRef, ref);
+
+  return (
+    <div
+      {...restProps}
+      ref={handleRef}
+      aria-hidden="true"
+      className={classNames(styles.host, transitionStateClassNames[transitionState])}
+      onClick={onClick}
+      onTransitionEnd={onTransitionEnd}
+    />
+  );
+};
diff --git a/packages/vkui/src/components/Group/Group.test.tsx b/packages/vkui/src/components/Group/Group.test.tsx
index c8a65fab81..990b6a6b17 100644
--- a/packages/vkui/src/components/Group/Group.test.tsx
+++ b/packages/vkui/src/components/Group/Group.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { classNames, noop } from '@vkontakte/vkjs';
+import { ModalContext } from '../../context/ModalContext';
 import type { SizeTypeValues } from '../../lib/adaptivity';
 import { baselineComponent } from '../../testing/utils';
 import { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';
@@ -8,7 +9,6 @@ import {
   type AppRootContextInterface,
   DEFAULT_APP_ROOT_CONTEXT_VALUE,
 } from '../AppRoot/AppRootContext';
-import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { Group, type GroupProps } from './Group';
 import styles from './Group.module.css';
 
@@ -75,17 +75,11 @@ describe('Group', () => {
           }}
         >
           <AdaptivityContext.Provider value={{ sizeX }}>
-            <ModalRootContext.Provider
-              value={{
-                isInsideModal,
-                updateModalHeight: noop,
-                registerModal: noop,
-              }}
-            >
+            <ModalContext.Provider value={isInsideModal ? 'test' : null}>
               <Group mode={mode} data-testid="group">
                 <div />
               </Group>
-            </ModalRootContext.Provider>
+            </ModalContext.Provider>
           </AdaptivityContext.Provider>
         </AppRootContext.Provider>,
       );
diff --git a/packages/vkui/src/components/Group/GroupContainer.tsx b/packages/vkui/src/components/Group/GroupContainer.tsx
index 1eb16f6bfb..494537a002 100644
--- a/packages/vkui/src/components/Group/GroupContainer.tsx
+++ b/packages/vkui/src/components/Group/GroupContainer.tsx
@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useModalContext } from '../../context/ModalContext';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import type { SizeTypeValues } from '../../lib/adaptivity';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { AppRootContext } from '../AppRoot/AppRootContext';
-import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Group.module.css';
 
@@ -90,7 +90,7 @@ export const GroupContainer: React.FC<GroupContainerProps> = ({
   tabIndex: tabIndexProp,
   ...restProps
 }: GroupContainerProps) => {
-  const { isInsideModal } = React.useContext(ModalRootContext);
+  const isInsideModal = useModalContext().id !== null;
   const { sizeX = 'none' } = useAdaptivity();
 
   const mode = useGroupMode(modeProps, sizeX, isInsideModal);
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx b/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
index 00b576a148..c35c278d7a 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
@@ -9,7 +9,6 @@ import {
 import { Button } from '../Button/Button';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
 import { Image } from '../Image/Image';
-import { ModalRoot } from '../ModalRoot/ModalRootAdaptive';
 import { Spacing } from '../Spacing/Spacing';
 import { Textarea } from '../Textarea/Textarea';
 import { UsersStack } from '../UsersStack/UsersStack';
@@ -127,15 +126,14 @@ export const ModalCardPlayground = (props: ComponentPlaygroundProps) => {
       AppWrapper={AppWrapper}
     >
       {(props: ModalCardProps) => (
-        <div style={{ height: 500, transform: 'translateZ(0)' }}>
-          <ModalRoot
-            activeModal={props.nav}
+        <div style={{ height: 500, overflow: 'hidden', transform: 'translateZ(0)' }}>
+          <ModalCard
+            open
             // Note: с включенным фокусом ломаются скриншоты на движке Webkit из-за фокуса сразу
             // на несколько окон
-            noFocusToDialog
-          >
-            <ModalCard {...props} />
-          </ModalRoot>
+            disableAutoFocus
+            {...props}
+          />
         </div>
       )}
     </ComponentPlayground>
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.module.css b/packages/vkui/src/components/ModalCard/ModalCard.module.css
index a421a00508..07b5b9dda5 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.module.css
+++ b/packages/vkui/src/components/ModalCard/ModalCard.module.css
@@ -1,65 +1,82 @@
 .host {
-  box-sizing: border-box;
-  position: absolute;
-  inset-block-start: 0;
-  padding: 8px;
-  inset-inline-start: 0;
+  padding: var(--vkui--spacing_size_m);
+  margin-inline: auto;
   inline-size: 100%;
-  block-size: 100%;
-  display: flex;
-  align-items: flex-end;
+  box-sizing: border-box;
 }
 
 .host:focus {
   outline: none;
 }
 
-.in {
-  inline-size: 100%;
-  margin-inline: auto;
-  transform: translateY(calc(100% + 16px));
-  transition: transform 340ms var(--vkui--animation_easing_platform);
+.hostMaxWidthS {
+  max-inline-size: calc(400px + var(--vkui--spacing_size_2xl));
 }
 
-/**
- * iOS
- */
+.hostMaxWidthM {
+  max-inline-size: calc(414px + var(--vkui--spacing_size_2xl));
+}
 
-.ios .in {
-  max-inline-size: 414px;
+.hostMaxWidthL {
+  max-inline-size: calc(440px + var(--vkui--spacing_size_2xl));
 }
 
-/**
- * Android + vkcom
- */
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .host {
+    --vkui_internal_ModalCard--snapPoint: 100%;
+    --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
 
-.android .in {
-  max-inline-size: 440px;
-}
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
+    transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--snapPoint)), 0);
+    transition: transform var(--vkui--animation_duration_l) var(--vkui--animation_easing_platform);
+  }
 
-.vkcom .in {
-  max-inline-size: 400px;
-}
+  .hostStateEnter {
+    transform: translate3d(0, 100%, 0);
+    transition-property: none;
+  }
 
-/**
- * Desktop
- */
+  .hostStateEntering {
+    transition-property: transform;
+    transition-delay: 0.2s;
+  }
 
-.desktop {
-  align-items: center;
-}
+  .hostStateExiting {
+    transform: translate3d(0, 100%, 0);
+    transition-property: transform;
+  }
 
-.desktop .in {
-  transform: unset;
-  opacity: 0;
-  transition: opacity 340ms var(--vkui--animation_easing_platform);
+  .hostStateExited {
+    transform: translate3d(0, 100%, 0);
+    transition-property: transform;
+  }
 }
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .host {
+    margin-block: auto;
+    opacity: 1;
+    transition: opacity 340ms var(--vkui--animation_easing_platform);
+  }
+
+  .hostStateEnter {
+    opacity: 0;
+    transition-property: none;
+  }
+
+  .hostStateEntering {
+    opacity: 1;
+  }
+
+  .hostStateExiting {
+    opacity: 0;
+  }
 
-/**
- * CMP:
- * ModalRoot
- */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalModalRoot--touched) .in {
-  transition: none;
+  .hostStateExited {
+    opacity: 0;
+  }
 }
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.stories.tsx b/packages/vkui/src/components/ModalCard/ModalCard.stories.tsx
index f5af257b3b..9e6c75371b 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.stories.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCard.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Icon56MoneyTransferOutline, Icon56NotificationOutline } from '@vkontakte/icons';
-import { ModalWrapper } from '../../storybook/ModalWrapper';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { getAvatarUrl } from '../../testing/mock';
 import { Avatar } from '../Avatar/Avatar';
@@ -23,17 +22,14 @@ export default story;
 
 type Story = StoryObj<ModalCardProps>;
 
-const MODAL_CARD_MONEY_SEND = 'money-send';
-const MODAL_CARD_APP_TO_MENU = 'app-to-menu';
-const MODAL_CARD_ABOUT = 'say-about';
-const MODAL_CARD_NOTIFICATIONS = 'notifications';
-const MODAL_CARD_CHAT_INVITE = 'chat-invite';
-
 export const SimpleCard: Story = {
-  render: () => (
-    <ModalWrapper modalId={MODAL_CARD_MONEY_SEND}>
+  render: function Render() {
+    const [open, setOpen] = React.useState(true);
+    const handleClose = () => setOpen(false);
+    return (
       <ModalCard
-        id={MODAL_CARD_MONEY_SEND}
+        open={open}
+        onClose={handleClose}
         icon={<Icon56MoneyTransferOutline />}
         title="Отправляйте деньги друзьям, используя банковскую карту"
         description="Номер карты получателя не нужен — он сам решит, куда зачислить средства."
@@ -43,15 +39,18 @@ export const SimpleCard: Story = {
           </Button>
         }
       />
-    </ModalWrapper>
-  ),
+    );
+  },
 };
 
 export const CardWithAvatar: Story = {
-  render: () => (
-    <ModalWrapper modalId={MODAL_CARD_APP_TO_MENU}>
+  render: function Render() {
+    const [open, setOpen] = React.useState(true);
+    const handleClose = () => setOpen(false);
+    return (
       <ModalCard
-        id={MODAL_CARD_APP_TO_MENU}
+        open={open}
+        onClose={handleClose}
         icon={<Image borderRadius="l" src={getAvatarUrl('app_zagadki', 200)} size={72} />}
         title="Добавить игру «Загадки детства» в меню?"
         description="Игра появится под списком разделов на экране меню и будет всегда под рукой."
@@ -61,15 +60,18 @@ export const CardWithAvatar: Story = {
           </Button>
         }
       />
-    </ModalWrapper>
-  ),
+    );
+  },
 };
 
 export const CardWithTextArea: Story = {
-  render: () => (
-    <ModalWrapper modalId={MODAL_CARD_ABOUT}>
+  render: function Render() {
+    const [open, setOpen] = React.useState(true);
+    const handleClose = () => setOpen(false);
+    return (
       <ModalCard
-        id={MODAL_CARD_ABOUT}
+        open={open}
+        onClose={handleClose}
         title="Расскажите о себе"
         actions={
           <Button size="l" mode="primary" stretched>
@@ -79,15 +81,18 @@ export const CardWithTextArea: Story = {
       >
         <Textarea defaultValue="В Грузии" />
       </ModalCard>
-    </ModalWrapper>
-  ),
+    );
+  },
 };
 
 export const CardWithMultipleButtons: Story = {
-  render: () => (
-    <ModalWrapper modalId={MODAL_CARD_NOTIFICATIONS}>
+  render: function Render() {
+    const [open, setOpen] = React.useState(true);
+    const handleClose = () => setOpen(false);
+    return (
       <ModalCard
-        id={MODAL_CARD_NOTIFICATIONS}
+        open={open}
+        onClose={handleClose}
         icon={<Icon56NotificationOutline />}
         title="Приложение запрашивает разрешение на отправку Вам уведомлений"
         actions={
@@ -101,15 +106,18 @@ export const CardWithMultipleButtons: Story = {
           </ButtonGroup>
         }
       />
-    </ModalWrapper>
-  ),
+    );
+  },
 };
 
 export const CardWithComplexContent: Story = {
-  render: () => (
-    <ModalWrapper modalId={MODAL_CARD_CHAT_INVITE}>
+  render: function Render() {
+    const [open, setOpen] = React.useState(true);
+    const handleClose = () => setOpen(false);
+    return (
       <ModalCard
-        id={MODAL_CARD_CHAT_INVITE}
+        open={open}
+        onClose={handleClose}
         icon={<Avatar src={getAvatarUrl('chat_basketball', 200)} size={72} />}
         title="Баскетбол на выходных"
         titleComponent="h2"
@@ -147,6 +155,6 @@ export const CardWithComplexContent: Story = {
           <br />и ещё 3 человека
         </UsersStack>
       </ModalCard>
-    </ModalWrapper>
-  ),
+    );
+  },
 };
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.test.tsx b/packages/vkui/src/components/ModalCard/ModalCard.test.tsx
index 71214ee774..e99bafad03 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.test.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCard.test.tsx
@@ -1,58 +1,85 @@
 import { render, screen } from '@testing-library/react';
-import { baselineComponent } from '../../testing/utils';
+import { baselineComponent, waitCSSTransitionEnd } from '../../testing/utils';
 import { ConfigProvider } from '../ConfigProvider/ConfigProvider';
 import { ModalCard } from './ModalCard';
 
-describe('ModalCard', () => {
-  baselineComponent((p) => <ModalCard nav="id" {...p} />, {
+export const waitModalCardCSSTransitionEnd = async (el: HTMLElement) =>
+  await waitCSSTransitionEnd(el);
+
+describe(ModalCard, () => {
+  baselineComponent((p) => <ModalCard open nav="id" {...p} />, {
     // TODO [a11y]: "ARIA dialog and alertdialog nodes should have an accessible name (aria-dialog-name)"
     //              https://dequeuniversity.com/rules/axe/4.5/aria-dialog-name?application=axeAPI
     a11y: false,
   });
 
-  test('testid for modal card content', () => {
-    const { rerender } = render(<ModalCard nav="id" />);
+  test('mount and unmount', async () => {
+    const result = render(<ModalCard id="host" data-testid="host" />);
+    expect(result.queryByTestId('host')).not.toBeInTheDocument();
+
+    result.rerender(<ModalCard open id="host" data-testid="host" />);
+    await waitModalCardCSSTransitionEnd(result.getByTestId('host'));
+    expect(result.getByTestId('host')).toBeInTheDocument();
+
+    result.rerender(<ModalCard id="host" data-testid="host" />);
+    await waitModalCardCSSTransitionEnd(result.getByTestId('host'));
+    expect(result.queryByTestId('host')).not.toBeInTheDocument();
+  });
 
-    expect(screen.queryByTestId('modal-page-id')).not.toBeTruthy();
-    expect(screen.queryByTestId('modal-dismiss-button')).not.toBeTruthy();
+  test('testid for modal card content', async () => {
+    const result = render(<ModalCard open nav="host" data-testid="host" />);
+    await waitModalCardCSSTransitionEnd(result.getByTestId('host'));
+    expect(result.queryByTestId('modal-dismiss-button')).not.toBeTruthy();
 
-    rerender(
+    result.rerender(
       <ModalCard
         nav="id"
-        data-testid="modal-page-id"
+        open
+        data-testid="host"
         modalDismissButtonTestId="modal-dismiss-button"
       />,
     );
+    await waitModalCardCSSTransitionEnd(result.getByTestId('host'));
+    expect(result.queryByTestId('modal-dismiss-button')).not.toBeTruthy();
 
-    expect(screen.queryByTestId('modal-page-id')).toBeTruthy();
-    expect(screen.queryByTestId('modal-dismiss-button')).not.toBeTruthy();
-
-    rerender(
+    result.rerender(
       <ConfigProvider platform="vkcom">
-        <ModalCard nav="id" modalDismissButtonTestId="modal-dismiss-button" />
+        <ModalCard
+          nav="host"
+          open
+          data-testid="host"
+          modalDismissButtonTestId="modal-dismiss-button"
+        />
       </ConfigProvider>,
     );
-
-    expect(screen.queryByTestId('modal-dismiss-button')).toBeTruthy();
+    await waitModalCardCSSTransitionEnd(result.getByTestId('host'));
+    expect(result.queryByTestId('modal-dismiss-button')).toBeTruthy();
   });
 
-  test('can specify tags for header and subheader', () => {
-    const { rerender } = render(
-      <ModalCard title="Баскетбол на выходных" description="Приглашение в беседу" />,
+  test('can specify tags for header and subheader', async () => {
+    const result = render(
+      <ModalCard
+        open
+        data-testid="host"
+        title="Баскетбол на выходных"
+        description="Приглашение в беседу"
+      />,
     );
-
+    await waitModalCardCSSTransitionEnd(result.getByTestId('host'));
     expect(screen.getByText('Баскетбол на выходных').tagName.toLowerCase()).toMatch('span');
     expect(screen.getByText('Приглашение в беседу').tagName.toLowerCase()).toMatch('span');
 
-    rerender(
+    result.rerender(
       <ModalCard
+        open
+        data-testid="host"
         title="Баскетбол на выходных"
         titleComponent="h2"
         description="Приглашение в беседу"
         descriptionComponent="h3"
       />,
     );
-
+    await waitModalCardCSSTransitionEnd(result.getByTestId('host'));
     expect(screen.getByText('Баскетбол на выходных').tagName.toLowerCase()).toMatch('h2');
     expect(screen.getByText('Приглашение в беседу').tagName.toLowerCase()).toMatch('h3');
   });
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.tsx b/packages/vkui/src/components/ModalCard/ModalCard.tsx
index ddecc3f4d5..f5d926525d 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCard.tsx
@@ -1,91 +1,61 @@
 'use client';
 
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
+import { useId } from 'react';
+import { ModalContext } from '../../context/ModalContext';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
-import { ModalCardBase, type ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';
-import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
-import { RootComponent } from '../RootComponent/RootComponent';
-import styles from './ModalCard.module.css';
-
-const platformClassNames = {
-  ios: styles.ios,
-  android: styles.android,
-  vkcom: styles.vkcom,
-};
-
-export interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}
+import { useModalManager } from '../ModalRoot/useModalManager';
+import { ModalCardInternal, type ModalCardInternalProps } from './ModalCardInternal';
 
 const warn = warnOnce('ModalCard');
 
+export interface ModalCardProps extends Pick<NavIdProps, 'nav'>, ModalCardInternalProps {
+  keepMounted?: boolean;
+}
+
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */
 export const ModalCard = ({
-  icon,
-  title,
-  titleComponent,
-  description,
-  descriptionComponent,
-  children,
-  actions,
-  onClose,
+  id: idProp,
   nav,
-  id,
-  size,
-  modalDismissButtonTestId,
-  getRootRef,
-  dismissButtonMode,
-  dismissLabel,
+  open = false,
+  modalOverlayTestId,
+  disableAutoFocus,
+  onOpen,
+  onOpened,
+  onClose,
+  onClosed,
+  keepMounted = false,
   ...restProps
 }: ModalCardProps): React.ReactNode => {
-  const { isDesktop } = useAdaptivityWithJSMediaQueries();
-  const platform = usePlatform();
-
-  const modalContext = React.useContext(ModalRootContext);
-  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), 'card');
-  const rootRef = useExternRef(getRootRef, refs.modalElement);
-
-  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);
+  const generatingId = useId();
+  const id = getNavId({ nav, id: idProp }, warn) || generatingId;
+
+  const { unmounted, ...resolvedProps } = useModalManager({
+    id,
+    open,
+    keepMounted,
+    modalOverlayTestId,
+    disableAutoFocus,
+    onOpen,
+    onOpened,
+    onClose,
+    onClosed,
+  });
+
+  if (unmounted) {
+    return null;
+  }
 
   return (
-    <RootComponent
-      {...restProps}
-      getRootRef={rootRef}
-      tabIndex={-1}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={contextValue.labelId}
-      id={id}
-      baseClassName={classNames(
-        styles.host,
-        platformClassNames.hasOwnProperty(platform)
-          ? platformClassNames[platform]
-          : platformClassNames.android,
-        isDesktop && styles.desktop,
-      )}
-    >
-      <ModalCardBase
-        className={styles.in}
-        getRootRef={refs.innerElement}
-        icon={icon}
-        title={title}
-        titleComponent={titleComponent}
-        description={description}
-        descriptionComponent={descriptionComponent}
-        actions={actions}
-        onClose={onClose || modalContext.onClose}
-        size={size}
-        modalDismissButtonTestId={modalDismissButtonTestId}
-        dismissButtonMode={dismissButtonMode}
-        dismissLabel={dismissLabel}
-      >
-        {children}
-      </ModalCardBase>
-    </RootComponent>
+    <ModalContext.Provider value={id}>
+      <ModalCardInternal
+        id={id}
+        aria-labelledby={`${id}-label`}
+        {...resolvedProps}
+        {...restProps}
+      />
+    </ModalContext.Provider>
   );
 };
diff --git a/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx b/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx
new file mode 100644
index 0000000000..40c327474a
--- /dev/null
+++ b/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx
@@ -0,0 +1,203 @@
+'use client';
+
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';
+import { Keys, pressedKey } from '../../lib/accessibility';
+import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';
+import { useBottomSheet, type UseBottomSheetHandlers } from '../../lib/sheet';
+import { useScrollLock } from '../AppRoot/ScrollContext';
+import { Backdrop } from '../Backdrop/Backdrop';
+import { ModalCardBase, type ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';
+import { ModalOutlet } from '../ModalOutlet/ModalOutlet';
+import styles from './ModalCard.module.css';
+
+const sizeByPlatformClassNames = {
+  vkcom: styles['hostMaxWidthS'],
+  ios: styles['hostMaxWidthM'],
+  android: styles['hostMaxWidthL'],
+};
+
+const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {
+  appear: styles['hostStateEnter'],
+  appearing: styles['hostStateEntering'],
+
+  enter: styles['hostStateEnter'],
+  entering: styles['hostStateEntering'],
+
+  exiting: styles['hostStateExiting'],
+  exited: styles['hostStateExited'],
+};
+
+export interface ModalCardInternalProps
+  extends Omit<ModalCardBaseProps, 'onTransitionEnd' | keyof UseBottomSheetHandlers> {
+  open?: boolean;
+  /**
+   * Отключает фокус на интерактивный элемент после открытия модалки.
+   */
+  disableAutoFocus?: boolean;
+  /**
+   * Отключает закрытие нажатием на кнопку ESC.
+   */
+  disableCloseOnEscKey?: boolean;
+  /**
+   * Скрывает задний фон, чтобы элементы за модальным окном были доступны.
+   */
+  disableBackdrop?: boolean;
+  /**
+   * `data-testid` для оверлея.
+   */
+  modalOverlayTestId?: string;
+  /**
+   * Будет вызвано при начале открытия модалки.
+   */
+  onOpen?: VoidFunction;
+  /**
+   * Будет вызвано при окончательном открытии модалки.
+   */
+  onOpened?: VoidFunction;
+  /**
+   * Будет вызвано при окончательном закрытии модалки.
+   */
+  onClosed?: VoidFunction;
+}
+
+/**
+ * В компоненте заложена вся логика модального окна.
+ *
+ * @private
+ */
+export const ModalCardInternal = ({
+  icon,
+  title,
+  titleComponent,
+  description,
+  descriptionComponent,
+  children,
+  actions,
+  id,
+  size,
+  open,
+  style: styleProp,
+  className,
+  preventClose,
+  modalOverlayTestId,
+  modalDismissButtonTestId,
+  getRootRef,
+  dismissButtonMode,
+  dismissLabel,
+  disableAutoFocus,
+  disableBackdrop,
+  disableCloseOnEscKey,
+  onOpen,
+  onOpened,
+  onClose = noop,
+  onClosed,
+  ...restProps
+}: ModalCardInternalProps): React.ReactNode => {
+  const platform = usePlatform();
+  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {
+    enableAppear: true,
+    onEnter() {
+      onOpen?.();
+    },
+    onEntered() {
+      onOpened?.();
+    },
+    onExited() {
+      onClosed?.();
+    },
+  });
+  const opened = transitionState === 'appeared' || transitionState === 'entered';
+  const hidden = transitionState === 'exited';
+  const closable = !preventClose && opened;
+
+  const { isDesktop } = useAdaptivityWithJSMediaQueries();
+  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';
+
+  const [keyboardOpened, safeAreaBottomInset] = useVirtualKeyboardState(bottomSheetEnabled);
+  const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(
+    bottomSheetEnabled,
+    {
+      blocked: keyboardOpened,
+      initialSnapPoint: 'auto',
+      sheetCSSProperty: '--vkui_internal_ModalCard--snapPoint',
+      backdropCSSProperty: '--vkui_internal--backdrop--opacity',
+      onDismiss() {
+        onClose();
+      },
+    },
+  );
+  const handleRef = useExternRef<HTMLDivElement>(setSheetEl, ref, getRootRef);
+  const style = keyboardOpened
+    ? {
+        ...styleProp,
+        '--vkui_internal_ModalCard--safeAreaInsetBottom': `${safeAreaBottomInset}px`,
+      }
+    : styleProp;
+  const backdrop = disableBackdrop ? null : (
+    <Backdrop
+      getRootRef={setBackdropEl}
+      data-testid={modalOverlayTestId}
+      visible={open}
+      onClick={
+        closable
+          ? function handleBackdropClick() {
+              onClose();
+            }
+          : undefined
+      }
+    />
+  );
+  const handleEscKeyDown =
+    disableCloseOnEscKey || !closable
+      ? undefined
+      : (event: React.KeyboardEvent<HTMLElement>) => {
+          if (pressedKey(event) === Keys.ESCAPE) {
+            onClose();
+          }
+        };
+
+  useScrollLock(!hidden);
+  useFocusTrap(ref, { autoFocus: !disableAutoFocus, disabled: !opened || hidden });
+
+  return (
+    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>
+      {backdrop}
+      <ModalCardBase
+        {...restProps}
+        tabIndex={-1}
+        role="dialog"
+        aria-modal="true"
+        id={id}
+        getRootRef={handleRef}
+        style={style}
+        className={classNames(
+          styles.host,
+          sizeByPlatformClassNames[platform],
+          transitionStateClassNames[transitionState],
+          className,
+        )}
+        onTransitionEnd={onTransitionEnd}
+        {...bottomSheetEventHandlers}
+        icon={icon}
+        title={title}
+        titleComponent={titleComponent}
+        description={description}
+        descriptionComponent={descriptionComponent}
+        actions={actions}
+        onClose={onClose}
+        size={size}
+        modalDismissButtonTestId={modalDismissButtonTestId}
+        dismissButtonMode={dismissButtonMode}
+        dismissLabel={dismissLabel}
+      >
+        {children}
+      </ModalCardBase>
+    </ModalOutlet>
+  );
+};
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-dark-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-dark-1-snap.png
index 3487bd1aaa..d8047ff2b5 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:14e19a333136f3660b7b5f315a66e1b7a5957f20af220f5ca4748f50924194a0
-size 142321
+oid sha256:c2e4f39fdd2a32edfc049f35b17f5a9017b724056b75c33dc5c15783caa8bdac
+size 136860
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-dark-1-snap.png
index 9fd5fd4745..96bc065794 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a9d2a0099d3c71b8244159da8045c2b965df78f51740bcff2077c24b2449bd9d
-size 148887
+oid sha256:5efcd916b826c336f107d8dd0ff5376d5cadff043d7cf50456af62434480df52
+size 144773
diff --git a/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css b/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css
index a808a4207e..d9f0a0a221 100644
--- a/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css
+++ b/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css
@@ -4,7 +4,6 @@
   background: var(--vkui--color_background_modal);
   border-radius: 12px;
   padding: 16px;
-  margin-block-end: var(--vkui_internal--safe_area_inset_bottom);
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx b/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
index 9480c3cdfe..8112c9af4c 100644
--- a/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
+++ b/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { useKeyboard } from '../../hooks/useKeyboard';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';
@@ -106,7 +105,6 @@ export const ModalCardBase = ({
 }: ModalCardBaseProps): React.ReactNode => {
   const platform = usePlatform();
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
-  const isSoftwareKeyboardOpened = useKeyboard().isOpened;
 
   const size = isDesktop ? sizeProp : undefined;
   const withSafeZone =
@@ -130,12 +128,7 @@ export const ModalCardBase = ({
         ...style,
       }}
     >
-      <div
-        className={classNames(
-          styles.container,
-          isSoftwareKeyboardOpened && styles.containerSoftwareKeyboardOpened,
-        )}
-      >
+      <div className={styles.container}>
         {hasReactNode(icon) && <div className={styles.icon}>{icon}</div>}
         {hasReactNode(title) && (
           <Title level="2" weight="2" className={styles.title} Component={titleComponent}>
diff --git a/packages/vkui/src/components/ModalOutlet/ModalOutlet.module.css b/packages/vkui/src/components/ModalOutlet/ModalOutlet.module.css
new file mode 100644
index 0000000000..4a3cd9a76f
--- /dev/null
+++ b/packages/vkui/src/components/ModalOutlet/ModalOutlet.module.css
@@ -0,0 +1,16 @@
+.host:not([hidden]) {
+  isolation: isolate;
+  position: fixed;
+  inset: 0;
+  z-index: var(--vkui--z_index_modal);
+  overflow: hidden;
+}
+
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .host:not([hidden]) {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+}
diff --git a/packages/vkui/src/components/ModalOutlet/ModalOutlet.tsx b/packages/vkui/src/components/ModalOutlet/ModalOutlet.tsx
new file mode 100644
index 0000000000..961fc0db54
--- /dev/null
+++ b/packages/vkui/src/components/ModalOutlet/ModalOutlet.tsx
@@ -0,0 +1,31 @@
+import { classNames } from '@vkontakte/vkjs';
+import type { HTMLAttributesWithRootRef } from '../../types';
+import styles from './ModalOutlet.module.css';
+
+export interface ModalOutletProps
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'hidden' | 'aria-hidden'> {
+  hidden?: boolean;
+}
+
+/**
+ * @private
+ */
+export const ModalOutlet = ({
+  className,
+  hidden,
+  children,
+  getRootRef,
+  ...restProps
+}: ModalOutletProps) => {
+  return (
+    <div
+      ref={getRootRef}
+      className={classNames(className, styles.host)}
+      hidden={hidden}
+      aria-hidden={hidden}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/vkui/src/components/ModalPage/ModalPage.module.css b/packages/vkui/src/components/ModalPage/ModalPage.module.css
index 54cc2ad8c7..4b3c7ffb28 100644
--- a/packages/vkui/src/components/ModalPage/ModalPage.module.css
+++ b/packages/vkui/src/components/ModalPage/ModalPage.module.css
@@ -1,158 +1,157 @@
 .host {
-  inline-size: 100%;
-  block-size: 100%;
-  overflow: hidden;
-  position: absolute;
-  box-sizing: border-box;
-  pointer-events: none;
-}
+  --vkui_internal_ModalPage--userHeight: 100%;
+  --vkui_internal_ModalPage--desktopMaxWidth: 100%;
 
-.host:focus {
-  outline: none;
-}
-
-.desktop {
   display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.inWrap {
   inline-size: 100%;
-  block-size: 100%;
-  position: absolute;
-  inset-inline: 0;
-  inset-block-end: 0;
+  block-size: var(--vkui_internal_ModalPage--userHeight);
   margin-inline: auto;
-  display: flex;
-  align-items: flex-end;
-  pointer-events: initial;
-  transform: translateY(100%);
-  transition: transform 320ms var(--vkui--animation_easing_platform);
+  outline: none;
+  box-sizing: border-box;
 }
 
-.ios .inWrap {
-  transition: transform 400ms var(--vkui--animation_easing_platform);
-}
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .host {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    max-inline-size: var(--vkui--size_popup_small--regular);
+    pointer-events: none;
+  }
 
-.desktop .inWrap {
-  position: relative;
-  align-items: initial;
-  margin-block: 32px;
-  margin-inline: 56px;
-  block-size: auto;
-  max-block-size: 640px;
-  opacity: 0;
-  transform: none;
-  transition: opacity 340ms var(--vkui--animation_easing_platform);
-}
+  .hostSafeAreaInsetTop {
+    max-block-size: calc(100% - var(--vkui_internal--safe_area_inset_top));
+  }
 
-@media (max-height: 672px) {
-  .desktop .inWrap {
-    max-block-size: calc(100% - 32px * 2);
+  .hostSafeAreaInsetTopWithCustomOffset {
+    max-block-size: calc(
+      100% - (var(--vkui_internal--safe_area_inset_top) + var(--vkui_internal--panel_header_height))
+    );
   }
 }
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .host {
+    position: relative;
+    margin-block: auto;
+    max-inline-size: var(--vkui_internal_ModalPage--desktopMaxWidth);
+    max-block-size: calc(100% - 64px); /* FIXME 64px??? */
+    block-size: auto;
+  }
 
-.sizeS .inWrap {
-  max-inline-size: var(--vkui--size_popup_small--regular);
-}
+  .hostMaxWidthS {
+    --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_small--regular);
+  }
 
-.sizeM .inWrap {
-  max-inline-size: var(--vkui--size_popup_medium--regular);
-}
+  .hostMaxWidthM {
+    --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_medium--regular);
+  }
 
-.sizeL .inWrap {
-  max-inline-size: var(--vkui--size_popup_large--regular);
+  .hostMaxWidthL {
+    --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_large--regular);
+  }
 }
 
-.in {
-  background-color: var(--vkui--color_background_modal);
-  overflow: visible;
-  position: relative;
-  box-sizing: border-box;
-  inline-size: 100%;
-  block-size: 100%;
-  display: flex;
-  flex-direction: column;
-  border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
-  border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
-
-  --vkui_internal--background: var(--vkui--color_background_modal);
-}
+.document {
+  --vkui_internal_ModalPageDocument--snapPoint: auto;
+  --vkui_internal_ModalPageDocument--safeAreaInsetBottom: var(
+    --vkui_internal--safe_area_inset_bottom
+  );
 
-.desktop .in {
-  block-size: auto;
-  box-shadow: var(--vkui--elevation3);
-  border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
-  border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
-}
-
-.header {
   inline-size: 100%;
-}
+  block-size: var(--vkui_internal_ModalPageDocument--snapPoint);
+  box-sizing: border-box;
 
-.contentWrap {
-  position: relative;
+  /*
+   * Удерживает высоту в пределах 100% родителя при переполнении контента.
+   */
   display: flex;
-  block-size: 100%;
+  flex-shrink: 1;
   flex-direction: column;
-  overflow: hidden;
-  border-end-start-radius: inherit;
-  border-end-end-radius: inherit;
 }
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .document {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-end: 0;
+    max-block-size: 100%;
+    padding-block-end: var(--vkui_internal_ModalPageDocument--safeAreaInsetBottom);
+    pointer-events: auto;
+    touch-action: pan-y;
+    transform: translate3d(0, 0, 0);
+    transition: block-size var(--vkui--animation_duration_l) cubic-bezier(0.22, 1, 0.6, 1.03);
+  }
 
-.header:empty + .contentWrap {
-  border-radius: inherit;
-}
+  .documentStateEnter {
+    transform: translate3d(0, 100%, 0);
+  }
 
-.content {
-  block-size: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  box-sizing: border-box;
-}
+  .documentStateEntering {
+    transform: translate3d(0, 0, 0);
+    transition: transform var(--vkui--animation_duration_l) var(--vkui--animation_easing_platform)
+      0.1s;
+  }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.desktop .content,
-:global(.vkuiInternalModalRoot__modal--expandable) .content {
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
+  .documentStateExiting {
+    transform: translate3d(0, 100%, 0);
+    transition: transform var(--vkui--animation_duration_l) var(--vkui--animation_easing_platform);
+  }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.desktop .contentIn,
-:global(.vkuiInternalModalRoot__modal--expandable) .contentIn {
-  block-size: 100%;
+  .documentStateExited {
+    transform: translate3d(0, 100%, 0);
+  }
 }
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .document {
+    position: relative;
+  }
 
-/* существует для того, чтобы использовать в расчёте translateY
- * чтобы поднять ModalPage не только на высоту контента, но и на высоту bottom-inset
- * особенно важно для ModalPage c динамической высотой
- */
-.bottomInset {
-  block-size: var(--vkui_internal--safe_area_inset_bottom);
-  flex-shrink: 0;
-}
+  .documentStateEnter {
+    opacity: 0;
+  }
 
-/**
- * CMP:
- * ModalRoot
- *
- * [дополнительно] также ищи в файле `ModalRoot__modal--expandable`
- */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalModalRoot--touched) .inWrap {
-  transition: none;
-}
+  .documentStateEntering {
+    opacity: 1;
+    transition: opacity 0.2s ease-in 0.1s;
+  }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalModalRoot--switching) .inWrap {
-  pointer-events: none;
+  .documentStateExiting {
+    opacity: 0;
+    transition: opacity 0.1s ease-out;
+  }
+
+  .documentStateExited {
+    opacity: 0;
+  }
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalModalRoot__modal--collapsed) .content,
-:global(.vkuiInternalModalRoot__modal--dragging) .content {
+.children {
+  inline-size: 100%;
+  block-size: 100%;
+  border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
+  border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
+  background-color: var(--vkui--color_background_modal);
   overflow: hidden;
-  touch-action: pan-y;
+
+  /*
+   * Удерживает высоту в пределах 100% родителя при переполнении контента.
+   *
+   * - см. `ModalPageHeader`
+   * - см. `ModalPageContent`
+   * - см. `ModalPageFooter`
+   */
+  display: flex;
+  flex-shrink: 1;
+  flex-direction: column;
+}
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .children {
+    border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
+    border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
+    box-shadow: var(--vkui--elevation3);
+  }
 }
diff --git a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx
index c0eed6b737..a3417f6a98 100644
--- a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx
+++ b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx
@@ -4,28 +4,36 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Icon24Dismiss, Icon56MoneyTransferOutline } from '@vkontakte/icons';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { usePlatform } from '../../hooks/usePlatform';
-import { ModalWrapper } from '../../storybook/ModalWrapper';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
-import { getRandomUser, getRandomUsers } from '../../testing/mock';
+import { cities, getRandomUser, getRandomUsers } from '../../testing/mock';
 import { Avatar } from '../Avatar/Avatar';
+import { Button } from '../Button/Button';
+import { Card } from '../Card/Card';
+import { CardScroll } from '../CardScroll/CardScroll';
 import { CellButton } from '../CellButton/CellButton';
 import { Checkbox } from '../Checkbox/Checkbox';
+import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { DateInput } from '../DateInput/DateInput';
+import { Div } from '../Div/Div';
 import { FormItem } from '../FormItem/FormItem';
 import { Gradient } from '../Gradient/Gradient';
 import { Group } from '../Group/Group';
 import { Header } from '../Header/Header';
+import { HorizontalCell } from '../HorizontalCell/HorizontalCell';
+import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
 import { Input } from '../Input/Input';
+import { ModalPageFooter } from '../ModalPageFooter/ModalPageFooter';
 import { ModalPageHeader } from '../ModalPageHeader/ModalPageHeader';
-import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { PanelHeaderClose } from '../PanelHeaderClose/PanelHeaderClose';
 import { PanelHeaderSubmit } from '../PanelHeaderSubmit/PanelHeaderSubmit';
 import { Placeholder } from '../Placeholder/Placeholder';
 import { Radio } from '../Radio/Radio';
+import { SegmentedControl } from '../SegmentedControl/SegmentedControl';
 import { SelectMimicry } from '../SelectMimicry/SelectMimicry';
 import { SimpleCell } from '../SimpleCell/SimpleCell';
 import { ModalPage, type ModalPageProps } from './ModalPage';
+import type { CloseEventPayload } from './types';
 
 const story: Meta<ModalPageProps> = {
   title: 'Modals/ModalPage',
@@ -37,29 +45,20 @@ export default story;
 
 type Story = StoryObj<ModalPageProps>;
 
-const MODAL_PAGE_FILTERS = 'filters';
-const MODAL_PAGE_FULLSCREEN = 'fullscreen';
-const MODAL_PAGE_DYNAMIC = 'dynamic';
 const randomUser = getRandomUser();
 const users = getRandomUsers(25);
 
-const DoneButton = () => {
-  const { onClose } = React.useContext(ModalRootContext);
-
-  return <PanelHeaderSubmit onClick={onClose} />;
+const DoneButton = ({ onClick }: React.ComponentProps<'div'>) => {
+  return <PanelHeaderSubmit onClick={onClick} />;
 };
 
-const AndroidCloseButton = ({ className }: { className?: string }) => {
-  const { onClose } = React.useContext(ModalRootContext);
-
-  return <PanelHeaderClose className={className} onClick={onClose} />;
+const AndroidCloseButton = ({ className, onClick }: React.ComponentProps<'div'>) => {
+  return <PanelHeaderClose className={className} onClick={onClick} />;
 };
 
-const IosCloseButton = ({ className }: { className?: string }) => {
-  const { onClose } = React.useContext(ModalRootContext);
-
+const IosCloseButton = ({ className, onClick }: React.ComponentProps<'div'>) => {
   return (
-    <PanelHeaderButton onClick={onClose} className={className}>
+    <PanelHeaderButton onClick={onClick} className={className}>
       <Icon24Dismiss />
     </PanelHeaderButton>
   );
@@ -72,32 +71,43 @@ export const DynamicModalPage: Story = {
     const [expanded, setExpanded] = React.useState(false);
     const toggle = React.useCallback(() => setExpanded(!expanded), [expanded]);
 
+    const [open, setOpen] = React.useState(true);
+    const handleButtonClick = () => {
+      setOpen(false);
+    };
+
     return (
-      <ModalWrapper modalId={MODAL_PAGE_DYNAMIC}>
-        <ModalPage
-          id={MODAL_PAGE_DYNAMIC}
-          dynamicContentHeight
-          header={
-            <ModalPageHeader
-              before={
-                sizeX.compact &&
-                platform === 'android' && <AndroidCloseButton className={sizeX.compact.className} />
-              }
-              after={
-                sizeX.compact &&
-                platform === 'ios' && <IosCloseButton className={sizeX.compact.className} />
-              }
-            >
-              Dynamic modal
-            </ModalPageHeader>
-          }
-        >
-          <Group>
-            <CellButton onClick={toggle}>{expanded ? 'collapse' : 'expand'}</CellButton>
-            {expanded && <Placeholder icon={<Icon56MoneyTransferOutline />} />}
-          </Group>
-        </ModalPage>
-      </ModalWrapper>
+      <ModalPage
+        open={open}
+        dynamicContentHeight
+        header={
+          <ModalPageHeader
+            before={
+              sizeX.compact &&
+              platform === 'android' && (
+                <AndroidCloseButton
+                  className={sizeX.compact.className}
+                  onClick={handleButtonClick}
+                />
+              )
+            }
+            after={
+              sizeX.compact &&
+              platform === 'ios' && (
+                <IosCloseButton className={sizeX.compact.className} onClick={handleButtonClick} />
+              )
+            }
+          >
+            Dynamic modal
+          </ModalPageHeader>
+        }
+        onClose={() => setOpen(false)}
+      >
+        <Group>
+          <CellButton onClick={toggle}>{expanded ? 'collapse' : 'expand'}</CellButton>
+          {expanded && <Placeholder icon={<Icon56MoneyTransferOutline />} />}
+        </Group>
+      </ModalPage>
     );
   },
 };
@@ -107,47 +117,56 @@ export const FullscreenModalPage: Story = {
     const platform = usePlatform();
     const { sizeX } = useAdaptivityConditionalRender();
 
+    const [open, setOpen] = React.useState(true);
+    const handleButtonClick = () => {
+      setOpen(false);
+    };
+
     return (
-      <ModalWrapper modalId={MODAL_PAGE_FULLSCREEN}>
-        <ModalPage
-          id={MODAL_PAGE_FULLSCREEN}
-          settlingHeight={100}
-          hideCloseButton={platform === 'ios'}
+      <ModalPage
+        open={open}
+        settlingHeight={100}
+        hideCloseButton={platform === 'ios'}
+        header={
+          <ModalPageHeader
+            before={
+              sizeX.compact &&
+              platform === 'android' && (
+                <AndroidCloseButton
+                  className={sizeX.compact.className}
+                  onClick={handleButtonClick}
+                />
+              )
+            }
+            after={platform === 'ios' && <IosCloseButton onClick={handleButtonClick} />}
+          >
+            @{randomUser.screen_name}
+          </ModalPageHeader>
+        }
+        onClose={() => setOpen(false)}
+      >
+        <Gradient mode="tint">
+          <Placeholder
+            icon={<Avatar size={96} src={randomUser.photo_100} />}
+            title={randomUser.first_name + ' ' + randomUser.last_name}
+          ></Placeholder>
+        </Gradient>
+        <Group
           header={
-            <ModalPageHeader
-              before={
-                sizeX.compact &&
-                platform === 'android' && <AndroidCloseButton className={sizeX.compact.className} />
-              }
-              after={platform === 'ios' && <IosCloseButton />}
-            >
-              @{randomUser.screen_name}
-            </ModalPageHeader>
+            <Header mode="secondary" indicator="25">
+              Друзья
+            </Header>
           }
         >
-          <Gradient mode="tint">
-            <Placeholder
-              icon={<Avatar size={96} src={randomUser.photo_100} />}
-              title={randomUser.first_name + ' ' + randomUser.last_name}
-            ></Placeholder>
-          </Gradient>
-          <Group
-            header={
-              <Header mode="secondary" indicator="25">
-                Друзья
-              </Header>
-            }
-          >
-            {users.map((user) => {
-              return (
-                <SimpleCell before={<Avatar src={user.photo_100} />} key={user.id}>
-                  {user.name}
-                </SimpleCell>
-              );
-            })}
-          </Group>
-        </ModalPage>
-      </ModalWrapper>
+          {users.map((user) => {
+            return (
+              <SimpleCell before={<Avatar src={user.photo_100} />} key={user.id}>
+                {user.name}
+              </SimpleCell>
+            );
+          })}
+        </Group>
+      </ModalPage>
     );
   },
 };
@@ -156,74 +175,268 @@ export const ModalPageWithFilters: Story = {
   render: function Render() {
     const [dateOfBirth, setDateOfBirth] = useState<Date | undefined>(new Date(1901, 0, 1));
     const { sizeX } = useAdaptivityConditionalRender();
+    const [open, setOpen] = React.useState(true);
+    const handleButtonClick = () => {
+      setOpen(false);
+    };
 
     return (
-      <ModalWrapper modalId={MODAL_PAGE_FILTERS}>
+      <ModalPage
+        open={open}
+        header={
+          <ModalPageHeader
+            before={
+              sizeX.compact && (
+                <AndroidCloseButton
+                  className={sizeX.compact.className}
+                  onClick={handleButtonClick}
+                />
+              )
+            }
+            after={<DoneButton onClick={handleButtonClick} />}
+          >
+            Фильтры
+          </ModalPageHeader>
+        }
+        onClose={() => setOpen(false)}
+      >
+        <Group>
+          <FormItem top="Страна">
+            <SelectMimicry placeholder="Выбрать страну" />
+          </FormItem>
+          <FormItem top="Город">
+            <SelectMimicry placeholder="Выбрать город" disabled />
+          </FormItem>
+        </Group>
+        <Group>
+          <FormItem top="Пол">
+            <Radio name="sex" value={0} defaultChecked>
+              Любой
+            </Radio>
+            <Radio name="sex" value={1}>
+              Мужской
+            </Radio>
+            <Radio name="sex" value={2}>
+              Женский
+            </Radio>
+          </FormItem>
+        </Group>
+        <Group>
+          <FormItem top="Школа">
+            <SelectMimicry placeholder="Выбрать школу" disabled />
+          </FormItem>
+          <FormItem top="Университет">
+            <SelectMimicry placeholder="Выбрать университет" disabled />
+          </FormItem>
+        </Group>
+        <Group>
+          <FormItem top="Дополнительно">
+            <Checkbox>С фотографией</Checkbox>
+            <Checkbox>Сейчас на сайте</Checkbox>
+          </FormItem>
+        </Group>
+        <Group>
+          <FormItem top="Работа">
+            <Input placeholder="Место работы" />
+          </FormItem>
+          <FormItem>
+            <Input placeholder="Должность" />
+          </FormItem>
+          <FormItem top="Дата рождения">
+            <DateInput
+              value={dateOfBirth}
+              onChange={setDateOfBirth}
+              minDateTime={new Date(1901, 0, 1)}
+              maxDateTime={new Date(2006, 0, 1)}
+            />
+          </FormItem>
+        </Group>
+      </ModalPage>
+    );
+  },
+};
+
+export const Sandbox: Story = {
+  render: function Render() {
+    const platform = usePlatform();
+    const { sizeX } = useAdaptivityConditionalRender();
+    const [open, setOpen] = React.useState(true);
+    const [expanded, setExpanded] = React.useState(false);
+    const commonFriends = React.useMemo(() => getRandomUsers(30), []);
+    const toggle = React.useCallback(() => setExpanded(!expanded), [expanded]);
+
+    const [settlingHeight, setSettlingHeight] = React.useState(50);
+
+    const handleModalClose = (event?: CloseEventPayload) => {
+      // eslint-disable-next-line no-console
+      console.log('reason', event?.reason);
+      setOpen(false);
+    };
+
+    return (
+      <>
+        <Button onClick={() => setOpen((prev) => !prev)}>Открыть модалку</Button>
         <ModalPage
-          id={MODAL_PAGE_FILTERS}
+          id="test"
+          open={open}
           header={
             <ModalPageHeader
-              before={sizeX.compact && <AndroidCloseButton className={sizeX.compact.className} />}
-              after={<DoneButton />}
+              before={
+                sizeX.compact &&
+                platform === 'android' && (
+                  <AndroidCloseButton
+                    className={sizeX.compact.className}
+                    onClick={() => handleModalClose()}
+                  />
+                )
+              }
+              after={
+                sizeX.compact &&
+                platform === 'ios' && (
+                  <IosCloseButton
+                    className={sizeX.compact.className}
+                    onClick={() => handleModalClose()}
+                  />
+                )
+              }
             >
-              Фильтры
+              Dynamic modal
             </ModalPageHeader>
           }
+          footer={
+            <ModalPageFooter>
+              <Input name="footer" type="text" placeholder="message" />
+            </ModalPageFooter>
+          }
+          settlingHeight={settlingHeight}
+          height="100%"
+          // dynamicContentHeight
+          onClose={handleModalClose}
         >
-          <Group>
-            <FormItem top="Страна">
-              <SelectMimicry placeholder="Выбрать страну" />
-            </FormItem>
-            <FormItem top="Город">
-              <SelectMimicry placeholder="Выбрать город" disabled />
-            </FormItem>
-          </Group>
-          <Group>
-            <FormItem top="Пол">
-              <Radio name="sex" value={0} defaultChecked>
-                Любой
-              </Radio>
-              <Radio name="sex" value={1}>
-                Мужской
-              </Radio>
-              <Radio name="sex" value={2}>
-                Женский
-              </Radio>
-            </FormItem>
-          </Group>
-          <Group>
-            <FormItem top="Школа">
-              <SelectMimicry placeholder="Выбрать школу" disabled />
-            </FormItem>
-            <FormItem top="Университет">
-              <SelectMimicry placeholder="Выбрать университет" disabled />
-            </FormItem>
-          </Group>
-          <Group>
-            <FormItem top="Дополнительно">
-              <Checkbox>С фотографией</Checkbox>
-              <Checkbox>Сейчас на сайте</Checkbox>
-            </FormItem>
-          </Group>
-          <Group>
-            <FormItem top="Работа">
-              <Input placeholder="Место работы" />
+          <FormItem top="settlingHeight">
+            <SegmentedControl
+              options={[
+                { label: '50%', value: 50 },
+                { label: '100%', value: 100 },
+              ]}
+              onChange={(value) => setSettlingHeight(value as number)}
+            />
+          </FormItem>
+          <Div>
+            <Div
+              style={{ borderRadius: 12, border: '1px solid tomato' }}
+              onTouchStart={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <code>event.stopPropagation()</code> zone
+            </Div>
+          </Div>
+          <div>
+            <FormItem label="top">
+              <Input name="top" placeholder="Some text top" />
             </FormItem>
+            <Group header={<Header mode="secondary">Недавние</Header>}>
+              <HorizontalScroll>
+                <div style={{ display: 'flex' }}>
+                  {commonFriends.map((item) => {
+                    return (
+                      <HorizontalCell key={item.id} title={item.first_name}>
+                        <Avatar size={56} src={item.photo_200} />
+                      </HorizontalCell>
+                    );
+                  })}
+                </div>
+              </HorizontalScroll>
+            </Group>
             <FormItem>
-              <Input placeholder="Должность" />
+              <CustomSelect
+                options={cities}
+                placeholder="forceDropdownPortal={false}"
+                forceDropdownPortal={false}
+              />
             </FormItem>
-
-            <FormItem top="Дата рождения">
-              <DateInput
-                value={dateOfBirth}
-                onChange={setDateOfBirth}
-                minDateTime={new Date(1901, 0, 1)}
-                maxDateTime={new Date(2006, 0, 1)}
+            <FormItem>
+              <CustomSelect
+                options={cities}
+                placeholder="forceDropdownPortal={true}"
+                forceDropdownPortal={true}
               />
             </FormItem>
-          </Group>
+            <Div>
+              But I must explain to you how all this mistaken idea of denouncing pleasure and
+              praising pain was born and I will give you a complete account of the system, and
+              expound the
+            </Div>
+            <CardScroll>
+              {Array(50)
+                .fill(null)
+                .map((_, index) => (
+                  <Card key={index}>
+                    <div style={{ height: 96 }} />
+                  </Card>
+                ))}
+            </CardScroll>
+            <CellButton onClick={toggle}>{expanded ? 'Show more' : 'Hide more'}</CellButton>
+            {expanded && (
+              <Div>
+                actual teachings of the great explorer of the truth, the master-builder of human
+                happiness. No one rejects, dislikes, or avoids pleasure itself, because it is
+                pleasure, but because those who do not know how to pursue pleasure rationally
+                encounter consequences that are extremely painful. Nor again is there anyone who
+                loves or pursues or desires to obtain pain of itself, because it is pain, but
+                because occasionally circumstances occur in which toil and pain can procure him some
+                great pleasure. To take a trivial example, which of us ever undertakes laborious
+                physical exercise, except to obtain some advantage from it? But who has any right to
+                find fault with a man who chooses to enjoy a pleasure that has no annoying
+                consequences, or one who avoids a pain that produces no resultant pleasure? But I
+                must explain to you how all this mistaken idea of denouncing pleasure and praising
+                pain was born and I will give you a complete account of the system, and expound the
+                actual teachings of the great explorer of the truth, the master-builder of human
+                happiness. No one rejects, dislikes, or avoids pleasure itself, because it is
+                pleasure, but because those who do not know how to pursue pleasure rationally
+                encounter consequences that are extremely painful. Nor again is there anyone who
+                loves or pursues or desires to obtain pain of itself, because it is pain, but
+                because occasionally circumstances occur in which toil and pain can procure him some
+                great pleasure. To take a trivial example, which of us ever undertakes laborious
+                physical exercise, except to obtain some advantage from it? But who has any right to
+                find fault with a man who chooses to enjoy a pleasure that has no annoying
+                consequences, or one who avoids a pain that produces no resultant pleasure? But I
+                must explain to you how all this mistaken idea of denouncing pleasure and praising
+                pain was born and I will give you a complete account of the system, and expound the
+                actual teachings of the great explorer of the truth, the master-builder of human
+                <FormItem>
+                  <Input name="middle" placeholder="Some text" />
+                </FormItem>
+                happiness. No one rejects, dislikes, or avoids pleasure itself, because it is
+                pleasure, but because those who do not know how to pursue pleasure rationally
+                encounter consequences that are extremely painful. Nor again is there anyone who
+                loves or pursues or desires to obtain pain of itself, because it is pain, but
+                because occasionally circumstances occur in which toil and pain can procure him some
+                great pleasure. To take a trivial example, which of us ever undertakes laborious
+                physical exercise, except to obtain some advantage from it? But who has any right to
+                find fault with a man who chooses to enjoy a pleasure that has no annoying
+                consequences, or one who avoids a pain that produces no resultant pleasure? But I
+                must explain to you how all this mistaken idea of denouncing pleasure and praising
+                pain was born and I will give you a complete account of the system, and expound the
+                actual teachings of the great explorer of the truth, the master-builder of human
+                happiness. No one rejects, dislikes, or avoids pleasure itself, because it is
+                pleasure, but because those who do not know how to pursue pleasure rationally
+                encounter consequences that are extremely painful. Nor again is there anyone who
+                loves or pursues or desires to obtain pain of itself, because it is pain, but
+                because occasionally circumstances occur in which toil and pain can procure him some
+                great pleasure. To take a trivial example, which of us ever undertakes laborious
+                physical exercise, except to obtain some advantage from it? But who has any right to
+                find fault with a man who chooses to enjoy a pleasure that has no annoying
+                consequences, or one who avoids a pain that produces no resultant pleasure?
+              </Div>
+            )}
+            <FormItem label="bottom">
+              <Input name="bottom" placeholder="Some text bottom" />
+            </FormItem>
+          </div>
         </ModalPage>
-      </ModalWrapper>
+      </>
     );
   },
 };
diff --git a/packages/vkui/src/components/ModalPage/ModalPage.test.tsx b/packages/vkui/src/components/ModalPage/ModalPage.test.tsx
index 8312f83bd7..df8a8d6eb1 100644
--- a/packages/vkui/src/components/ModalPage/ModalPage.test.tsx
+++ b/packages/vkui/src/components/ModalPage/ModalPage.test.tsx
@@ -1,41 +1,63 @@
-import { render, screen } from '@testing-library/react';
-import { baselineComponent } from '../../testing/utils';
+import { render } from '@testing-library/react';
+import { baselineComponent, waitCSSTransitionEnd } from '../../testing/utils';
 import { ConfigProvider } from '../ConfigProvider/ConfigProvider';
 import { ModalPage } from './ModalPage';
 
-describe('ModalPage', () => {
-  baselineComponent((props) => <ModalPage nav="id" {...props} />, {
+export const waitModalPageCSSTransitionEnd = async (el: HTMLElement) =>
+  await waitCSSTransitionEnd(
+    el && el.firstElementChild instanceof HTMLElement ? el.firstElementChild : null,
+  );
+
+describe(ModalPage, () => {
+  baselineComponent((props) => <ModalPage open nav="id" {...props} />, {
     // TODO [a11y]: "ARIA dialog and alertdialog nodes should have an accessible name (aria-dialog-name)"
     //              https://dequeuniversity.com/rules/axe/4.5/aria-dialog-name?application=axeAPI
     a11y: false,
   });
 
-  test('testid for modal page content', () => {
-    const { rerender } = render(<ModalPage nav="id" />);
+  test('mount and unmount', async () => {
+    const result = render(<ModalPage id="host" data-testid="host" />);
+    expect(result.queryByTestId('host')).not.toBeInTheDocument();
+
+    result.rerender(<ModalPage open id="host" data-testid="host" />);
+    await waitModalPageCSSTransitionEnd(result.getByTestId('host'));
+    expect(result.getByTestId('host')).toBeInTheDocument();
+
+    result.rerender(<ModalPage id="host" data-testid="host" />);
+    await waitModalPageCSSTransitionEnd(result.getByTestId('host'));
+    expect(result.queryByTestId('host')).not.toBeInTheDocument();
+  });
 
-    expect(screen.queryByTestId('modal-page-id')).not.toBeTruthy();
-    expect(screen.queryByTestId('modal-content-id')).not.toBeTruthy();
-    expect(screen.queryByTestId('modal-dismiss-button')).not.toBeTruthy();
+  test('testid for modal page content', async () => {
+    const result = render(<ModalPage open nav="host" data-testid="modal-page-id" />);
+    await waitModalPageCSSTransitionEnd(result.getByTestId('modal-page-id'));
+    expect(result.queryByTestId('modal-content-id')).not.toBeTruthy();
+    expect(result.queryByTestId('modal-dismiss-button')).not.toBeTruthy();
 
-    rerender(
+    result.rerender(
       <ModalPage
         nav="id"
+        open
         data-testid="modal-page-id"
         modalContentTestId="modal-content-id"
         modalDismissButtonTestId="modal-dismiss-button"
       />,
     );
+    await waitModalPageCSSTransitionEnd(result.getByTestId('modal-page-id'));
+    expect(result.queryByTestId('modal-content-id')).toBeTruthy();
+    expect(result.queryByTestId('modal-dismiss-button')).not.toBeTruthy();
 
-    expect(screen.queryByTestId('modal-page-id')).toBeTruthy();
-    expect(screen.queryByTestId('modal-content-id')).toBeTruthy();
-    expect(screen.queryByTestId('modal-dismiss-button')).not.toBeTruthy();
-
-    rerender(
+    result.rerender(
       <ConfigProvider platform="vkcom">
-        <ModalPage nav="id" modalDismissButtonTestId="modal-dismiss-button" />
+        <ModalPage
+          nav="host"
+          open
+          data-testid="modal-page-id"
+          modalDismissButtonTestId="modal-dismiss-button"
+        />
       </ConfigProvider>,
     );
-
-    expect(screen.queryByTestId('modal-dismiss-button')).toBeTruthy();
+    await waitModalPageCSSTransitionEnd(result.getByTestId('modal-page-id'));
+    expect(result.queryByTestId('modal-dismiss-button')).toBeTruthy();
   });
 });
diff --git a/packages/vkui/src/components/ModalPage/ModalPage.tsx b/packages/vkui/src/components/ModalPage/ModalPage.tsx
index 1c82f365de..399c199605 100644
--- a/packages/vkui/src/components/ModalPage/ModalPage.tsx
+++ b/packages/vkui/src/components/ModalPage/ModalPage.tsx
@@ -1,184 +1,66 @@
 'use client';
 
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useOrientationChange } from '../../hooks/useOrientationChange';
-import { usePlatform } from '../../hooks/usePlatform';
+import { useId } from 'react';
+import { ModalContext } from '../../context/ModalContext';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
-import { multiRef } from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
-import type { HTMLAttributesWithRootRef } from '../../types';
-import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
-import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
-import { RootComponent } from '../RootComponent/RootComponent';
-import { ModalPageContext } from './ModalPageContext';
-import styles from './ModalPage.module.css';
+import { useModalManager } from '../ModalRoot/useModalManager';
+import { ModalPageInternal } from './ModalPageInternal';
+import type { ModalPageInternalProps } from './types';
 
-const sizeClassName = {
-  s: styles.sizeS,
-  m: styles.sizeM,
-  l: styles.sizeL,
-};
+const warn = warnOnce('ModalPage');
 
-export interface ModalPageProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {
-  /**
-   * Шапка модальной страницы, `<ModalPageHeader />`
-   */
-  header?: React.ReactNode;
-  /**
-   * Задаёт контенту максимальную ширину для десктопной версии.
-   */
-  size?: 's' | 'm' | 'l' | number;
-  /**
-   * Задаёт модальному окну фиксированную высоту.
-   * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах "50%".
-   * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.
-   */
-  height?: string | number;
-  /**
-   * Будет вызвано при начале открытия модалки.
-   */
-  onOpen?: VoidFunction;
-  /**
-   * Будет вызвано при окончательном открытии модалки.
-   */
-  onOpened?: VoidFunction;
-  /**
-   * Будет вызвано при начале закрытия модалки.
-   */
-  onClose?: VoidFunction;
-  /**
-   * Будет вызвано при окончательном закрытии модалки.
-   */
-  onClosed?: VoidFunction;
-  /**
-   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.
-   */
-  settlingHeight?: number;
-  /**
-   * Если высота контента в модальной странице может поменяться, нужно установить это свойство
-   */
-  dynamicContentHeight?: boolean;
-  getModalContentRef?: React.Ref<HTMLDivElement>;
-  /**
-   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)
-   */
-  hideCloseButton?: boolean;
-  modalContentTestId?: string;
-  /**
-   * `data-testid` для кнопки закрытия
-   */
-  modalDismissButtonTestId?: string;
-  /**
-   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)
-   *
-   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте
-   */
-  preventClose?: boolean;
+export interface ModalPageProps extends ModalPageInternalProps, NavIdProps {
+  keepMounted?: boolean;
 }
 
-const warn = warnOnce('ModalPage');
-
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
  */
 export const ModalPage = ({
-  children,
-  header,
-  size: sizeProp = 's',
+  id: idProp,
+  nav,
+  open = false,
+  modalOverlayTestId,
+  disableAutoFocus,
   onOpen,
   onOpened,
   onClose,
   onClosed,
-  settlingHeight, // 75
-  dynamicContentHeight,
-  getModalContentRef,
-  nav,
-  id: idProp,
-  hideCloseButton = false,
-  height,
-  modalContentTestId,
-  modalDismissButtonTestId,
-  getRootRef,
-  preventClose,
+  size = 's',
+  settlingHeight = 50,
+  keepMounted = false,
   ...restProps
-}: ModalPageProps): React.ReactNode => {
-  const generatingId = React.useId();
-  const id = idProp || generatingId;
+}: ModalPageProps) => {
+  const generatingId = useId();
+  const id = getNavId({ nav, id: idProp }, warn) || generatingId;
 
-  const { updateModalHeight } = React.useContext(ModalRootContext);
+  const { unmounted, ...resolvedProps } = useModalManager({
+    id,
+    open,
+    keepMounted,
+    modalOverlayTestId,
+    disableAutoFocus,
+    onOpen,
+    onOpened,
+    onClose,
+    onClosed,
+  });
 
-  const platform = usePlatform();
-  const orientation = useOrientationChange();
-  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();
-
-  React.useEffect(() => {
-    if (dynamicContentHeight) {
-      updateModalHeight();
-    }
-  }, [children, dynamicContentHeight, orientation, updateModalHeight]);
-
-  const isCloseButtonShown = !hideCloseButton && isDesktop;
-  const size = isDesktop ? sizeProp : 's';
-
-  const modalContext = React.useContext(ModalRootContext);
-  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), 'page');
-  const rootRef = useExternRef(getRootRef, refs.modalElement);
-
-  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);
+  if (unmounted) {
+    return null;
+  }
 
   return (
-    <ModalPageContext.Provider value={contextValue}>
-      <RootComponent
-        {...restProps}
-        getRootRef={rootRef}
-        tabIndex={-1}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={contextValue.labelId}
+    <ModalContext.Provider value={id}>
+      <ModalPageInternal
         id={id}
-        baseClassName={classNames(
-          styles.host,
-          platform === 'ios' && styles.ios,
-          isDesktop && styles.desktop,
-          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',
-          typeof size === 'string' && sizeClassName[size],
-        )}
-      >
-        <div
-          className={styles.inWrap}
-          style={{
-            maxWidth: typeof size === 'number' ? size : undefined,
-            height,
-          }}
-          ref={refs.innerElement}
-        >
-          <div className={styles.in}>
-            <div className={styles.header} ref={refs.headerElement}>
-              {header}
-            </div>
-
-            <div className={styles.contentWrap}>
-              <div
-                className={styles.content}
-                ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}
-                {...(modalContentTestId && { 'data-testid': modalContentTestId })}
-              >
-                <div className={styles.contentIn}>{children}</div>
-              </div>
-              <div ref={refs.bottomInset} className={styles.bottomInset} />
-            </div>
-            {isCloseButtonShown && (
-              <ModalDismissButton
-                data-testid={modalDismissButtonTestId}
-                onClick={onClose || modalContext.onClose}
-              />
-            )}
-          </div>
-        </div>
-      </RootComponent>
-    </ModalPageContext.Provider>
+        size={size}
+        aria-labelledby={`${id}-label`}
+        settlingHeight={settlingHeight}
+        {...resolvedProps}
+        {...restProps}
+      />
+    </ModalContext.Provider>
   );
 };
diff --git a/packages/vkui/src/components/ModalPage/ModalPageContext.tsx b/packages/vkui/src/components/ModalPage/ModalPageContext.tsx
deleted file mode 100644
index 113dcc20a8..0000000000
--- a/packages/vkui/src/components/ModalPage/ModalPageContext.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-export interface ModalPageContextInterface {
-  labelId?: string;
-}
-
-export const ModalPageContext: React.Context<ModalPageContextInterface> =
-  React.createContext<ModalPageContextInterface>({});
diff --git a/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx b/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
new file mode 100644
index 0000000000..6d0c84c15f
--- /dev/null
+++ b/packages/vkui/src/components/ModalPage/ModalPageInternal.tsx
@@ -0,0 +1,214 @@
+'use client';
+
+import { type KeyboardEvent } from 'react';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';
+import { Keys, pressedKey } from '../../lib/accessibility';
+import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';
+import { useBottomSheet } from '../../lib/sheet';
+import type { CSSCustomProperties } from '../../types';
+import { useScrollLock } from '../AppRoot/ScrollContext';
+import { Backdrop } from '../Backdrop/Backdrop';
+import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
+import { ModalOutlet } from '../ModalOutlet/ModalOutlet';
+import { ModalPageContent } from '../ModalPageContent/ModalPageContent';
+import type { ModalPageInternalProps } from './types';
+import styles from './ModalPage.module.css';
+
+const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {
+  appear: styles['documentStateEnter'],
+  appearing: styles['documentStateEntering'],
+
+  enter: styles['documentStateEnter'],
+  entering: styles['documentStateEntering'],
+
+  exiting: styles['documentStateExiting'],
+  exited: styles['documentStateExited'],
+};
+
+/**
+ * В компоненте заложена вся логика модального окна.
+ *
+ * @private
+ */
+export const ModalPageInternal = ({
+  open,
+  header,
+  footer,
+  size: desktopMaxWidth,
+  height,
+  children,
+  className,
+  style,
+  dynamicContentHeight,
+  settlingHeight,
+  preventClose,
+  getModalContentRef,
+  modalOverlayTestId,
+  modalContentTestId,
+  modalDismissButtonTestId,
+  disableAutoFocus,
+  hideCloseButton,
+  disableCloseOnEscKey,
+  disableBackdrop,
+  onOpen,
+  onOpened,
+  onClose = noop,
+  onClosed,
+  ...restProps
+}: ModalPageInternalProps) => {
+  const { hasCustomPanelHeaderAfter } = useConfigProvider();
+  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {
+    enableAppear: true,
+    onEnter() {
+      onOpen?.();
+    },
+    onEntered() {
+      onOpened?.();
+    },
+    onExited() {
+      onClosed?.();
+    },
+  });
+  const opened = transitionState === 'appeared' || transitionState === 'entered';
+  const hidden = transitionState === 'exited';
+  const closable = !preventClose && opened;
+
+  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();
+  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';
+  const [keyboardOpened, safeAreaBottomInset] = useVirtualKeyboardState(bottomSheetEnabled);
+
+  const [{ initialStyle, setSheetEl, setSheetScrollEl, setBackdropEl }, bottomSheetEventHandlers] =
+    useBottomSheet(bottomSheetEnabled, {
+      blocked: keyboardOpened,
+      initialSnapPoint: dynamicContentHeight ? 'auto' : settlingHeight,
+      sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',
+      backdropCSSProperty: '--vkui_internal--backdrop--opacity',
+      onDismiss() {
+        onClose({ reason: 'swipe-down' });
+      },
+    });
+  const documentStyle = keyboardOpened
+    ? {
+        '--vkui_internal_ModalPageDocument--safeAreaInsetBottom': `${safeAreaBottomInset}px`,
+        ...initialStyle,
+      }
+    : initialStyle;
+  const handleSheetRef = useExternRef<HTMLDivElement>(setSheetEl, ref);
+  const handleSheetScrollRef = useExternRef<HTMLDivElement>(setSheetScrollEl, getModalContentRef);
+
+  const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(desktopMaxWidth);
+  const backdrop = disableBackdrop ? null : (
+    <Backdrop
+      getRootRef={setBackdropEl}
+      data-testid={modalOverlayTestId}
+      visible={open}
+      onClick={
+        closable
+          ? function handleBackdropClick(event) {
+              onClose(Object.assign({ reason: 'click-backdrop' as const }, event));
+            }
+          : undefined
+      }
+    />
+  );
+  const closeButton =
+    hideCloseButton || !isDesktop ? null : (
+      <ModalDismissButton
+        data-testid={modalDismissButtonTestId}
+        onClick={
+          closable
+            ? function handleDismissButtonClick(event) {
+                onClose(Object.assign({ reason: 'click-close-button' as const }, event));
+              }
+            : undefined
+        }
+      />
+    );
+  const handleEscKeyDown =
+    disableCloseOnEscKey || !closable
+      ? undefined
+      : (event: KeyboardEvent<HTMLElement>) => {
+          if (pressedKey(event) === Keys.ESCAPE) {
+            onClose(Object.assign({ reason: 'escape-key' as const }, event));
+          }
+        };
+
+  useScrollLock(!hidden);
+
+  return (
+    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>
+      {backdrop}
+      <FocusTrap
+        {...restProps}
+        autoFocus={!disableAutoFocus}
+        role="dialog"
+        aria-modal="true"
+        disabled={!opened || hidden}
+        className={classNames(
+          className,
+          styles.host,
+          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',
+          hasCustomPanelHeaderAfter
+            ? styles.hostSafeAreaInsetTopWithCustomOffset
+            : styles.hostSafeAreaInsetTop,
+          desktopMaxWidthClassName,
+        )}
+        style={{
+          ...style,
+          ...desktopMaxWidthStyle,
+          ...getHeightCSSVariable(height),
+        }}
+      >
+        <div
+          {...bottomSheetEventHandlers}
+          ref={handleSheetRef}
+          role="document"
+          style={documentStyle}
+          className={classNames(styles.document, transitionStateClassNames[transitionState])}
+          onTransitionEnd={onTransitionEnd}
+        >
+          <div className={styles.children}>
+            {hasReactNode(header) && header}
+            <ModalPageContent getRootRef={handleSheetScrollRef} data-testid={modalContentTestId}>
+              {children}
+            </ModalPageContent>
+            {hasReactNode(footer) && footer}
+          </div>
+          {closeButton}
+        </div>
+      </FocusTrap>
+    </ModalOutlet>
+  );
+};
+
+const desktopMaxWidthClassNames = {
+  s: styles['hostMaxWidthS'],
+  m: styles['hostMaxWidthM'],
+  l: styles['hostMaxWidthL'],
+};
+
+function resolveDesktopMaxWidth(
+  desktopMaxWidth: ModalPageInternalProps['size'] = 's',
+): [string | undefined, CSSCustomProperties | undefined] {
+  if (typeof desktopMaxWidth === 'string') {
+    return [desktopMaxWidthClassNames[desktopMaxWidth], undefined];
+  }
+
+  return [
+    undefined,
+    typeof desktopMaxWidth === 'number'
+      ? { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }
+      : undefined,
+  ];
+}
+
+function getHeightCSSVariable(height?: number | string): CSSCustomProperties | undefined {
+  return height !== undefined
+    ? { '--vkui_internal_ModalPage--userHeight': `${height}` }
+    : undefined;
+}
diff --git a/packages/vkui/src/components/ModalPage/checklist.md b/packages/vkui/src/components/ModalPage/checklist.md
new file mode 100644
index 0000000000..928be4f473
--- /dev/null
+++ b/packages/vkui/src/components/ModalPage/checklist.md
@@ -0,0 +1,25 @@
+## Features
+
+- [x] открытие до определенного размера
+- [x] закрытие на ESC
+  - [x] должна быть возможность **отключить** поведение
+- [x] отключение backdrop, чтобы не блокировался контент
+- [x] возможность самому управлять состоянием закрытия
+  - [x] создать коллбек обработчик
+- [x] стики контента
+  - [x] шапка
+  - [x] подвал
+    - [x] едет вниз вместе
+- [x] закрытие на нажатие на задний фон
+- [x] закрытие при сильном смахивании вниз
+- [x] анимации
+  - [x] bounce
+  - [x] rubber: натяжение при перетаскивании
+- [x] не блокирует скролл
+  - [x] горизонтальный
+  - [x] вертикальный
+- [x] не блокирует поле ввода
+- [x] backdrop становится светлее в зависимости от процента сворачивания
+- [x] есть возможность отключить на опр-ых элементах
+  - [x] используя stopPropagation()
+  - [x] используя data-атрибут
diff --git a/packages/vkui/src/components/ModalPage/types.ts b/packages/vkui/src/components/ModalPage/types.ts
new file mode 100644
index 0000000000..bd0348eff8
--- /dev/null
+++ b/packages/vkui/src/components/ModalPage/types.ts
@@ -0,0 +1,104 @@
+import type { HTMLAttributesWithRootRef } from '../../types';
+
+export type CloseReason = 'click-backdrop' | 'click-close-button' | 'escape-key' | 'swipe-down';
+
+export type CloseEventPayload =
+  | (React.MouseEvent<HTMLElement> & { reason: Extract<CloseReason, 'click-backdrop'> })
+  | (React.MouseEvent<HTMLElement> & { reason: Extract<CloseReason, 'click-close-button'> })
+  | { reason: Extract<CloseReason, 'swipe-down'> }
+  | (React.KeyboardEvent<HTMLElement> & { reason: Extract<CloseReason, 'escape-key'> });
+
+type OmittedStyleAttribute = {
+  style?: Omit<React.CSSProperties, 'height' | 'maxWidth' | 'maxHeight'>;
+};
+
+export interface ModalPageInternalProps
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'style'>,
+    OmittedStyleAttribute {
+  open?: boolean;
+  /**
+   * Шапка модальной страницы, `<ModalPageHeader />`
+   */
+  header?: React.ReactNode;
+  /**
+   * Подвал модальной страницы, `<ModalPageFooter />`
+   */
+  footer?: React.ReactNode;
+  /**
+   * Задаёт контенту максимальную ширину на десктопе.
+   */
+  size?: 's' | 'm' | 'l' | number;
+  /**
+   * Задаёт модальному окну фиксированную высоту.
+   * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах "50%".
+   * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.
+   */
+  height?: string | number;
+  /**
+   * Процент, на который изначально будет открыта модальная страница.
+   *
+   * > ⚠️ Следует использовать следующие значения: `25`, `50`, `75`, `100`.
+   * > При передаче `< 25` значение приведётся к `25`, при передаче `> 75` значение приведётся к `75`.
+   *
+   * Игнорируется при включении `dynamicContentHeight`.
+   */
+  settlingHeight?: number;
+  /**
+   * Если высота контента в модальной странице может поменяться, нужно установить это свойство
+   */
+  dynamicContentHeight?: boolean;
+  /**
+   * Отключает фокус на интерактивный элемент после открытия модалки.
+   */
+  disableAutoFocus?: boolean;
+  /**
+   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)
+   */
+  hideCloseButton?: boolean;
+  /**
+   * Отключает закрытие нажатием на кнопку ESC.
+   */
+  disableCloseOnEscKey?: boolean;
+  /**
+   * Скрывает задний фон, чтобы элементы за модальным окном были доступны.
+   */
+  disableBackdrop?: boolean;
+  /**
+   * `data-testid` для содержимого модального окна.
+   */
+  modalContentTestId?: string;
+  /**
+   * Возвращает DOM-элемент содержимого модального окна.
+   */
+  getModalContentRef?: React.Ref<HTMLDivElement>;
+  /**
+   * `data-testid` для оверлея.
+   */
+  modalOverlayTestId?: string;
+  /**
+   * `data-testid` для кнопки закрытия
+   */
+  modalDismissButtonTestId?: string;
+  /**
+   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)
+   *
+   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте
+   */
+  preventClose?: boolean;
+  /**
+   * Будет вызвано при начале открытия модалки.
+   */
+  onOpen?: VoidFunction;
+  /**
+   * Будет вызвано при окончательном открытии модалки.
+   */
+  onOpened?: VoidFunction;
+  /**
+   * Будет вызвано при начале закрытия модалки.
+   */
+  onClose?: (payload: CloseEventPayload) => void;
+  /**
+   * Будет вызвано при окончательном закрытии модалки.
+   */
+  onClosed?: VoidFunction;
+}
diff --git a/packages/vkui/src/components/ModalPageContent/ModalPageContent.module.css b/packages/vkui/src/components/ModalPageContent/ModalPageContent.module.css
new file mode 100644
index 0000000000..e49ee3c0d8
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageContent/ModalPageContent.module.css
@@ -0,0 +1,4 @@
+.host {
+  /* см. `.children {}` в `ModalPage` */
+  flex: 1 1 100%;
+}
diff --git a/packages/vkui/src/components/ModalPageContent/ModalPageContent.tsx b/packages/vkui/src/components/ModalPageContent/ModalPageContent.tsx
new file mode 100644
index 0000000000..20a9771263
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageContent/ModalPageContent.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { classNames } from '@vkontakte/vkjs';
+import type { HTMLAttributesWithRootRef } from '../../types';
+import { CustomScrollView } from '../CustomScrollView/CustomScrollView';
+import styles from './ModalPageContent.module.css';
+
+export type ModalPageContentProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+
+export const ModalPageContent = ({
+  children,
+  className,
+  getRootRef,
+  ...restProps
+}: ModalPageContentProps) => {
+  return (
+    <CustomScrollView
+      className={classNames(className, styles.host)}
+      getRootRef={getRootRef}
+      {...restProps}
+    >
+      {children}
+    </CustomScrollView>
+  );
+};
diff --git a/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.module.css b/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.module.css
new file mode 100644
index 0000000000..26933317cd
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.module.css
@@ -0,0 +1,14 @@
+.host {
+  inline-size: 100%;
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+  background-color: var(--vkui--color_background_modal);
+
+  /* см. `.children {}` в `ModalPage` */
+  flex: 0 0 auto;
+}
+
+.inner {
+  padding-block: 16px;
+  padding-inline: 24px;
+}
diff --git a/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.tsx b/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.tsx
new file mode 100644
index 0000000000..7900ba7494
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import type { HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { Separator } from '../Separator/Separator';
+import styles from './ModalPageFooter.module.css';
+
+export interface ModalPageFooterProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  noSeparator?: boolean;
+}
+
+export const ModalPageFooter = ({
+  noSeparator = false,
+  children,
+  ...restProps
+}: ModalPageFooterProps) => {
+  const { sizeX } = useAdaptivityWithJSMediaQueries();
+  return (
+    <RootComponent baseClassName={styles.host} {...restProps}>
+      {!noSeparator && <Separator padding={sizeX !== 'regular'} />}
+      <div className={styles.inner}>{children}</div>
+    </RootComponent>
+  );
+};
diff --git a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.e2e-playground.tsx b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.e2e-playground.tsx
index ca49051bae..61e36f5216 100644
--- a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.e2e-playground.tsx
+++ b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.e2e-playground.tsx
@@ -1,20 +1,13 @@
 import { Icon24Cancel, Icon24Dismiss, Icon24Done } from '@vkontakte/icons';
-import { noop } from '@vkontakte/vkjs';
 import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
-import { ModalRootContext } from '../ModalRoot/ModalRootContext';
+import { ModalContext } from '../../context/ModalContext';
 import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { ModalPageHeader, type ModalPageHeaderProps } from './ModalPageHeader';
 
 const renderModalPageHeaderWithModalRoot = (props: ModalPageHeaderProps) => (
-  <ModalRootContext.Provider
-    value={{
-      isInsideModal: true,
-      updateModalHeight: noop,
-      registerModal: noop,
-    }}
-  >
+  <ModalContext.Provider value="test">
     <ModalPageHeader {...props} />
-  </ModalRootContext.Provider>
+  </ModalContext.Provider>
 );
 
 const children = ['Заголовок', 'Невероятно длинный заголовок выезжает за шапку даже на десктопе'];
diff --git a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.module.css b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.module.css
index 2ecc15fad1..6e689b6eab 100644
--- a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.module.css
+++ b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.module.css
@@ -1,12 +1,18 @@
 .host {
   --vkui_internal--safe_area_inset_top: 0;
+
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+
+  /* см. `.children {}` в `ModalPage` */
+  flex: 0 0 auto;
 }
 
-.withGaps {
+.hostWithGaps {
   padding-inline: 4px;
 }
 
-.desktop.withGaps {
+.hostDesktop.hostWithGaps {
   padding-inline: 8px;
 }
 
diff --git a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.stories.tsx b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.stories.tsx
index 774526c521..1c051c4658 100644
--- a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.stories.tsx
+++ b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.stories.tsx
@@ -26,8 +26,7 @@ const MODAL_ID = 'MODAL_ID';
 
 const HeaderButton = ({ children }: { children: React.ReactNode }) => {
   const { onClose } = React.useContext(ModalRootContext);
-
-  return <PanelHeaderButton onClick={onClose}>{children}</PanelHeaderButton>;
+  return <PanelHeaderButton onClick={() => onClose?.(MODAL_ID)}>{children}</PanelHeaderButton>;
 };
 
 export const Example: Story = {
diff --git a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx
index 4896ca7ae1..60a05602d5 100644
--- a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx
+++ b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx
@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useModalContext } from '../../context/ModalContext';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HasRef, HasRootRef } from '../../types';
-import { ModalPageContext } from '../ModalPage/ModalPageContext';
 import { PanelHeader, type PanelHeaderProps } from '../PanelHeader/PanelHeader';
 import { Separator } from '../Separator/Separator';
 import styles from './ModalPageHeader.module.css';
@@ -31,15 +31,15 @@ export const ModalPageHeader = ({
 }: ModalPageHeaderProps): React.ReactNode => {
   const platform = usePlatform();
   const { isDesktop, sizeX } = useAdaptivityWithJSMediaQueries();
-  const { labelId } = React.useContext(ModalPageContext);
+  const modalContext = useModalContext();
 
   return (
     <>
       <div
         className={classNames(
           styles.host,
-          platform !== 'vkcom' && styles.withGaps,
-          isDesktop && styles.desktop,
+          platform !== 'vkcom' && styles.hostWithGaps,
+          isDesktop && styles.hostDesktop,
         )}
         ref={getRootRef}
       >
@@ -47,7 +47,7 @@ export const ModalPageHeader = ({
           className={classNames('vkuiInternalModalPageHeader__in', className)}
           typographyProps={{
             Component: 'h2',
-            id: labelId,
+            id: modalContext.labelId,
             ...typographyProps,
           }}
           {...restProps}
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.module.css b/packages/vkui/src/components/ModalRoot/ModalRoot.module.css
deleted file mode 100644
index d60c0dff1d..0000000000
--- a/packages/vkui/src/components/ModalRoot/ModalRoot.module.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.host {
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-.mask {
-  opacity: 1;
-  inline-size: 100%;
-  block-size: 100%;
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  background: rgba(0, 0, 0, 0.4);
-  user-select: none;
-  transition: opacity 167ms ease-out;
-  animation: animation-modalroot-fade-in 0.32s ease;
-}
-
-.touched .mask {
-  transition: none;
-}
-
-.switching .mask {
-  /** Во время автоматической анимации смены модалок с фоном взаимодействовать нельзя */
-  pointer-events: none;
-}
-
-.viewport {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-:not(.desktop).host .viewport {
-  inset-block-start: var(--vkui_internal--safe_area_inset_top);
-}
-
-:not(.desktop).hasCustomPanelHeaderAfterSlot .viewport {
-  inset-block-start: calc(
-    var(--vkui_internal--safe_area_inset_top) + var(--vkui_internal--panel_header_height)
-  );
-}
-
-.modal {
-  position: absolute;
-  inline-size: 100%;
-  block-size: 100%;
-  box-sizing: border-box;
-}
-
-@keyframes animation-modalroot-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.stories.tsx b/packages/vkui/src/components/ModalRoot/ModalRoot.stories.tsx
index e937237425..4a7af7ac38 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRoot.stories.tsx
+++ b/packages/vkui/src/components/ModalRoot/ModalRoot.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ModalWrapper } from '../../storybook/ModalWrapper';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { Button } from '../Button/Button';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
 import { Group } from '../Group/Group';
 import { Input } from '../Input/Input';
 import { ModalPage } from '../ModalPage/ModalPage';
@@ -10,9 +11,8 @@ import { Placeholder } from '../Placeholder/Placeholder';
 import { Spinner } from '../Spinner/Spinner';
 import { SplitCol } from '../SplitCol/SplitCol';
 import { SplitLayout } from '../SplitLayout/SplitLayout';
-import { ModalRoot } from './ModalRootAdaptive';
+import { ModalRoot } from './ModalRoot';
 import type { ModalRootProps } from './types';
-import { useModalRootContext } from './useModalRootContext';
 
 const story: Meta<ModalRootProps> = {
   title: 'Modals/ModalRoot',
@@ -28,10 +28,64 @@ const MODAL_PAGE_DYNAMIC = 'modal-page-dynamic';
 const MODAL_ROOT_WITH_AUTO_FOCUS = 'modal-root-with-auto-focus';
 const MODAL_PAGE_WITH_AUTO_FOCUS = 'modal-page-with-auto-focus';
 
+export const Managing: Story = {
+  render: function Render() {
+    const [activeModal, setActiveModal] = React.useState<string | null>(null);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      const { id } = event.currentTarget.dataset;
+      if (id) {
+        setActiveModal(id);
+      }
+    };
+
+    return (
+      <>
+        <ButtonGroup>
+          <Button data-id="1" onClick={handleClick}>
+            1
+          </Button>
+          <Button data-id="2" onClick={handleClick}>
+            2
+          </Button>
+          <Button data-id="3" onClick={handleClick}>
+            3
+          </Button>
+        </ButtonGroup>
+        <ModalRoot activeModal={activeModal} onClose={() => setActiveModal(null)}>
+          <ModalPage id="1">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse sint, veritatis rem alias
+            minima expedita laborum. Nam ipsa quos fugit modi quidem, corporis deleniti, veritatis,
+            asperiores aliquid ducimus perferendis excepturi?
+            <Button data-id="2" onClick={handleClick}>
+              2
+            </Button>
+          </ModalPage>
+          <ModalPage id="2" dynamicContentHeight>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse sint, veritatis rem alias
+            minima expedita laborum. Nam ipsa quos fugit modi quidem, corporis deleniti, veritatis,
+            asperiores aliquid ducimus perferendis excepturi?
+            <Button data-id="3" onClick={handleClick}>
+              3
+            </Button>
+          </ModalPage>
+          <ModalPage id="3">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse sint, veritatis rem alias
+            minima expedita laborum. Nam ipsa quos fugit modi quidem, corporis deleniti, veritatis,
+            asperiores aliquid ducimus perferendis excepturi?
+            <Button data-id="1" onClick={handleClick}>
+              1
+            </Button>
+          </ModalPage>
+        </ModalRoot>
+      </>
+    );
+  },
+};
+
 export const ModalDynamicHeight: Story = {
   render: function Render() {
     const [isLoading, setIsLoading] = React.useState(true);
-    const { updateModalHeight } = useModalRootContext();
     const timer = React.useRef<ReturnType<typeof setTimeout>>();
 
     React.useEffect(() => {
@@ -44,13 +98,6 @@ export const ModalDynamicHeight: Story = {
       };
     }, []);
 
-    // После установки стейта и перерисовки компонента SelectModal сообщим ModalRoot об изменениях
-    React.useEffect(() => {
-      if (!isLoading) {
-        updateModalHeight();
-      }
-    }, [isLoading, updateModalHeight]);
-
     return (
       <ModalWrapper modalId={MODAL_PAGE_DYNAMIC}>
         <ModalPage id={MODAL_PAGE_DYNAMIC} dynamicContentHeight>
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx b/packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx
index eb13e22020..12349e3a4d 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx
+++ b/packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx
@@ -1,104 +1,147 @@
 import * as React from 'react';
 import { act } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { baselineComponent, mountTest, userEvent, waitCSSTransitionEnd } from '../../testing/utils';
-import { Button } from '../Button/Button';
+import { baselineComponent, fakeTimers } from '../../testing/utils';
 import { ModalCard } from '../ModalCard/ModalCard';
+import { waitModalCardCSSTransitionEnd } from '../ModalCard/ModalCard.test';
 import { ModalPage } from '../ModalPage/ModalPage';
-import { ModalRootTouch } from './ModalRoot';
-import { ModalRootDesktop } from './ModalRootDesktop';
-import { withModalRootContext } from './withModalRootContext';
-import styles from './ModalRoot.module.css';
-import modalPageStyles from '../ModalPage/ModalPage.module.css';
-
-const clickFade = async () => await userEvent.click(document.querySelector(`.${styles.mask}`)!);
-
-beforeEach(() => {
-  jest.useFakeTimers();
-});
-afterEach(() => {
-  jest.clearAllTimers();
-  jest.useRealTimers();
-});
+import { waitModalPageCSSTransitionEnd } from '../ModalPage/ModalPage.test';
+import { ModalRoot } from './ModalRoot';
+
+fakeTimers();
+
+describe(ModalRoot, () => {
+  baselineComponent(ModalRoot, { forward: false, a11y: false, getRootRef: false });
+
+  describe.each([
+    { displayName: 'ModalPage', Component: ModalPage },
+    { displayName: 'ModalCard', Component: ModalCard },
+  ])('With $displayName', ({ displayName, Component }) => {
+    const waitCSSTransitionEndConditionally = async (el: HTMLElement) =>
+      displayName === 'ModalPage'
+        ? await waitModalPageCSSTransitionEnd(el)
+        : await waitModalCardCSSTransitionEnd(el);
+
+    test.each(['global', 'local'])('mount and unmount (should use %s callbacks)', async (type) => {
+      const globalCallbacks = { onOpen: jest.fn(), onOpened: jest.fn(), onClose: jest.fn(), onClosed: jest.fn() }; // prettier-ignore
+      const localCallbacks = { onOpen: jest.fn(), onOpened: jest.fn(), onClose: jest.fn(), onClosed: jest.fn() }; // prettier-ignore
+
+      const h = render(
+        <ModalRoot activeModal="m" {...globalCallbacks}>
+          {type === 'local' ? (
+            <Component id="m" data-testid="m" {...localCallbacks} />
+          ) : (
+            <Component id="m" data-testid="m" />
+          )}
+        </ModalRoot>,
+      );
+      await waitCSSTransitionEndConditionally(h.getByTestId('m'));
+      expect(h.getByTestId('m')).toBeInTheDocument();
+
+      h.rerender(
+        <ModalRoot activeModal={null} {...globalCallbacks}>
+          {type === 'local' ? (
+            <Component id="m" data-testid="m" {...localCallbacks} />
+          ) : (
+            <Component id="m" data-testid="m" />
+          )}
+        </ModalRoot>,
+      );
+      await waitCSSTransitionEndConditionally(h.getByTestId('m'));
+      expect(h.queryByTestId('m')).not.toBeInTheDocument();
+
+      if (type === 'global') {
+        expect(globalCallbacks.onOpen).toHaveBeenCalledTimes(1);
+        expect(globalCallbacks.onOpen).toHaveBeenCalledWith('m');
+        expect(globalCallbacks.onOpened).toHaveBeenCalledTimes(1);
+        expect(globalCallbacks.onOpened).toHaveBeenCalledWith('m');
+        expect(globalCallbacks.onClose).toHaveBeenCalledTimes(0);
+        expect(globalCallbacks.onClosed).toHaveBeenCalledTimes(1);
+        expect(globalCallbacks.onClosed).toHaveBeenCalledWith('m');
+      } else {
+        expect(globalCallbacks.onOpen).toHaveBeenCalledTimes(0);
+        expect(globalCallbacks.onOpened).toHaveBeenCalledTimes(0);
+        expect(globalCallbacks.onClose).toHaveBeenCalledTimes(0);
+        expect(globalCallbacks.onClosed).toHaveBeenCalledTimes(0);
+
+        expect(localCallbacks.onOpen).toHaveBeenCalledTimes(1);
+        expect(localCallbacks.onOpen).toHaveBeenCalledWith();
+        expect(localCallbacks.onOpened).toHaveBeenCalledTimes(1);
+        expect(localCallbacks.onOpened).toHaveBeenCalledWith();
+        expect(localCallbacks.onClose).toHaveBeenCalledTimes(0);
+        expect(localCallbacks.onClosed).toHaveBeenCalledTimes(1);
+        expect(localCallbacks.onClosed).toHaveBeenCalledWith();
+      }
+    });
 
-const mockDate = () => {
-  const startGestureDate = new Date(2024, 7, 5);
-  jest.useFakeTimers();
-  jest.setSystemTime(startGestureDate);
-  const endGestureDate = new Date(startGestureDate);
+    test('open by prop vs open by context', async () => {
+      const h = render(
+        <ModalRoot activeModal={null}>
+          <Component id="m" open data-testid="m" />
+        </ModalRoot>,
+      );
+      expect(h.queryByTestId('m')).not.toBeInTheDocument();
 
-  return {
-    next: (ms = 500) => {
-      endGestureDate.setMilliseconds(endGestureDate.getMilliseconds() + ms);
-      jest.setSystemTime(endGestureDate);
-    },
-  };
-};
+      h.rerender(
+        <ModalRoot activeModal="m">
+          <Component id="m" open data-testid="m" />
+        </ModalRoot>,
+      );
+      await waitCSSTransitionEndConditionally(h.getByTestId('m'));
+      expect(h.queryByTestId('m')).toBeInTheDocument();
+    });
 
-describe.each([
-  ['ModalRootTouch', ModalRootTouch],
-  ['ModalRootDesktop', ModalRootDesktop],
-] as const)('%s', (name, ModalRoot: any) => {
-  baselineComponent<any>(ModalRoot, { forward: false, a11y: false, getRootRef: false });
-  describe('With ModalPage', () =>
-    mountTest(() => (
-      <ModalRoot activeModal="m">
-        <ModalPage id="m" />
-      </ModalRoot>
-    )));
-  describe('With ModalCard', () =>
-    mountTest(() => (
-      <ModalRoot activeModal="m">
-        <ModalCard id="m" />
-      </ModalRoot>
-    )));
+    test('keepMounted', async () => {
+      const h = render(
+        <ModalRoot activeModal={null}>
+          <Component id="m" keepMounted data-testid="m" />
+        </ModalRoot>,
+      );
+      expect(h.queryByTestId('m')).toBeInTheDocument();
+    });
+  });
 
   describe('shows active modal', () => {
     const modals = [
       <ModalPage id="m" data-testid="m" key="m" />,
       <ModalPage id="other" data-testid="other" key="o" />,
     ];
-    it('on mount', () => {
+    it('on mount', async () => {
       const h = render(<ModalRoot activeModal="m">{modals}</ModalRoot>);
+      await waitModalPageCSSTransitionEnd(h.getByTestId('m'));
       expect(h.queryByTestId('m')).not.toBeNull();
       expect(h.queryByTestId('other')).toBeNull();
     });
-    it('shows via prop update', () => {
+    it('shows via prop update', async () => {
       const h = render(<ModalRoot activeModal={null}>{modals}</ModalRoot>);
-      act(jest.runAllTimers);
+      expect(h.queryByTestId('m')).toBeNull();
+      expect(h.queryByTestId('other')).toBeNull();
+
       h.rerender(<ModalRoot activeModal="m">{modals}</ModalRoot>);
-      act(jest.runAllTimers);
+      await waitModalPageCSSTransitionEnd(h.getByTestId('m'));
       expect(h.queryByTestId('m')).not.toBeNull();
       expect(h.queryByTestId('other')).toBeNull();
     });
     it('hides via prop update', async () => {
       const h = render(<ModalRoot activeModal="m">{modals}</ModalRoot>);
-      act(jest.runAllTimers);
-      await waitCSSTransitionEnd(getFirstHTMLElementChild(h.getByTestId('m')));
+      await waitModalPageCSSTransitionEnd(h.getByTestId('m'));
       expect(h.queryByTestId('m')).not.toBeNull();
       expect(h.queryByTestId('other')).toBeNull();
 
       h.rerender(<ModalRoot activeModal={null}>{modals}</ModalRoot>);
-      act(jest.runAllTimers);
-      await waitCSSTransitionEnd(getFirstHTMLElementChild(h.getByTestId('m')));
+      await waitModalPageCSSTransitionEnd(h.getByTestId('m'));
       expect(h.queryByTestId('m')).toBeNull();
       expect(h.queryByTestId('other')).toBeNull();
     });
     it('changes via prop update', async () => {
       const h = render(<ModalRoot activeModal="m">{modals}</ModalRoot>);
-      act(jest.runAllTimers);
-      await waitCSSTransitionEnd(getFirstHTMLElementChild(h.getByTestId('m')));
+      await waitModalPageCSSTransitionEnd(h.getByTestId('m'));
       expect(h.queryByTestId('m')).not.toBeNull();
       expect(h.queryByTestId('other')).toBeNull();
 
       h.rerender(<ModalRoot activeModal="other">{modals}</ModalRoot>);
-      act(jest.runAllTimers);
-      if (
-        name === 'ModalRootTouch' /* note: 'ModalRootDesktop' смена `activeModal` без анимаций */
-      ) {
-        await waitCSSTransitionEnd(getFirstHTMLElementChild(h.getByTestId('m')));
-      }
-      await waitCSSTransitionEnd(getFirstHTMLElementChild(h.getByTestId('other')));
+      await waitModalPageCSSTransitionEnd(h.getByTestId('m'));
+      await waitModalPageCSSTransitionEnd(h.getByTestId('other'));
       expect(h.queryByTestId('m')).toBeNull();
       expect(h.queryByTestId('other')).not.toBeNull();
     });
@@ -109,115 +152,70 @@ describe.each([
       it('calls modal onClose', async () => {
         const onClose = jest.fn();
         const onCloseRoot = jest.fn();
-        render(
+        const h = render(
           <ModalRoot onClose={onCloseRoot} activeModal="m">
-            <ModalPage id="m" onClose={onClose} />
+            <ModalPage id="m" data-testid="m" modalOverlayTestId="overlay" onClose={onClose} />
           </ModalRoot>,
         );
-        // wait for animations
-        act(jest.runAllTimers);
-        await clickFade();
+        await waitModalPageCSSTransitionEnd(h.getByTestId('m'));
+        fireEvent.click(h.getByTestId('overlay'));
         expect(onClose).toHaveBeenCalledTimes(1);
         expect(onCloseRoot).not.toHaveBeenCalled();
       });
       it('calls root onClose if modal has no onClose', async () => {
         const onCloseRoot = jest.fn();
-        render(
+        const h = render(
           <ModalRoot onClose={onCloseRoot} activeModal="m">
-            <ModalPage id="m" />
+            <ModalPage id="m" data-testid="m" modalOverlayTestId="overlay" />
           </ModalRoot>,
         );
-        // wait for animations
-        act(jest.runAllTimers);
-        await clickFade();
+        await waitModalPageCSSTransitionEnd(h.getByTestId('m'));
+        fireEvent.click(h.getByTestId('overlay'));
         expect(onCloseRoot).toHaveBeenCalledTimes(1);
       });
       it('does not call root onClose when preventClose is provided', async () => {
         const onCloseRoot = jest.fn();
-        render(
+        const h = render(
           <ModalRoot onClose={onCloseRoot} activeModal="m">
-            <ModalPage id="m" preventClose />
+            <ModalPage preventClose id="m" data-testid="m" modalOverlayTestId="overlay" />
           </ModalRoot>,
         );
-        // wait for animations
-        act(jest.runAllTimers);
-        await clickFade();
-        expect(onCloseRoot).not.toHaveBeenCalled();
-        await userEvent.keyboard('{Escape}');
+        await waitModalPageCSSTransitionEnd(h.getByTestId('m'));
+        fireEvent.click(h.getByTestId('overlay'));
+        fireEvent.keyDown(h.getByTestId('m'), { key: 'Escape', code: 'Escape' });
         expect(onCloseRoot).not.toHaveBeenCalled();
       });
     });
-    if (name === 'ModalRootDesktop') {
-      it('on esc click', async () => {
-        const onCloseRoot = jest.fn();
-        render(
-          <ModalRoot onClose={onCloseRoot} activeModal="m">
-            <ModalPage id="m" />
-          </ModalRoot>,
-        );
-        // wait for animations
-        act(jest.runAllTimers);
-        await userEvent.keyboard('{Escape}');
-        expect(onCloseRoot).toHaveBeenCalledTimes(1);
-      });
-    }
-  });
-
-  it('check modal mask with fast modal change', async () => {
-    const onClose = jest.fn();
-    const modals = [
-      <ModalPage id="m" key="m" />,
-      <ModalPage id="other" key="o" onClose={onClose} />,
-    ];
-
-    const h = render(<ModalRoot activeModal="m">{modals}</ModalRoot>);
-    act(jest.runAllTimers);
-    h.rerender(<ModalRoot activeModal={null}>{modals}</ModalRoot>);
-    h.rerender(<ModalRoot activeModal="other">{modals}</ModalRoot>);
-    act(jest.runAllTimers);
-
-    // check if mask is present
-    expect(document.querySelector<HTMLElement>(`.${styles.mask}`)?.style.opacity).toBe('1');
-
-    // onClose is working
-    await clickFade();
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('disables native pull-to-refresh when modal is open', async () => {
-    const modals = [<ModalPage id="m" data-testid="m" key="m" />, <ModalPage id="other" key="o" />];
-
-    const component = render(<ModalRoot activeModal={null}>{modals}</ModalRoot>, {
-      baseElement: document.documentElement,
+    it('on esc click', async () => {
+      const onCloseRoot = jest.fn();
+      const h = render(
+        <ModalRoot onClose={onCloseRoot} activeModal="m">
+          <ModalPage id="m" data-testid="m" />
+        </ModalRoot>,
+      );
+      await waitModalPageCSSTransitionEnd(h.getByTestId('m'));
+      fireEvent.keyDown(h.getByTestId('m'), { key: 'Escape', code: 'Escape' });
+      expect(onCloseRoot).toHaveBeenCalledTimes(1);
     });
-    act(jest.runAllTimers);
-
-    expect(document.querySelector('.vkui--disable-overscroll-behavior')).toBeFalsy();
-
-    component.rerender(<ModalRoot activeModal="m">{modals}</ModalRoot>);
-    act(jest.runAllTimers);
-    await waitCSSTransitionEnd(getFirstHTMLElementChild(component.getByTestId('m')));
-
-    if (name === 'ModalRootTouch') {
-      expect(document.querySelector('.vkui--disable-overscroll-behavior')).toBeTruthy();
-    } else {
-      expect(document.querySelector('.vkui--disable-overscroll-behavior')).toBeFalsy();
-    }
-
-    component.rerender(<ModalRoot activeModal={null}>{modals}</ModalRoot>);
-    act(jest.runAllTimers);
-    await waitCSSTransitionEnd(getFirstHTMLElementChild(component.getByTestId('m')));
-
-    expect(document.querySelector('.vkui--disable-overscroll-behavior')).toBeFalsy();
   });
 
-  it('modalOverlayTestId for ModalRoot', () => {
-    render(
+  it('check modalOverlayTestId prop vs context priority', async () => {
+    const h = render(
       <ModalRoot activeModal="page" modalOverlayTestId="modal-mask">
-        <ModalPage id="page" />
+        <ModalPage id="page" data-testid="page" />
       </ModalRoot>,
     );
+    await waitModalPageCSSTransitionEnd(h.getByTestId('page'));
     expect(screen.queryByTestId('modal-mask')).toBeTruthy();
+
+    h.rerender(
+      <ModalRoot activeModal="page" modalOverlayTestId="modal-mask">
+        <ModalPage id="page" data-testid="page" modalOverlayTestId="custom-mask" />
+      </ModalRoot>,
+    );
+    await waitModalPageCSSTransitionEnd(h.getByTestId('page'));
+    expect(screen.queryByTestId('modal-mask')).toBeFalsy();
+    expect(screen.queryByTestId('custom-mask')).toBeTruthy();
   });
 
   describe('focus', () => {
@@ -251,29 +249,29 @@ describe.each([
       const component = render(<ModalRoot activeModal="modal-page">{modals}</ModalRoot>, {
         baseElement: document.documentElement,
       });
-      act(jest.runAllTimers);
-      await waitCSSTransitionEnd(getFirstHTMLElementChild(component.getByTestId('modal-page')));
-
+      await waitModalPageCSSTransitionEnd(component.getByTestId('modal-page'));
+      act(jest.runOnlyPendingTimers);
       expect(modalPageRef.current).toHaveFocus();
 
       component.rerender(<ModalRoot activeModal="modal-card">{modals}</ModalRoot>);
-      act(jest.runAllTimers);
-      await waitCSSTransitionEnd(getFirstHTMLElementChild(component.getByTestId('modal-card')));
+      await waitModalPageCSSTransitionEnd(component.getByTestId('modal-page'));
+      await waitModalCardCSSTransitionEnd(component.getByTestId('modal-card'));
+      act(jest.runOnlyPendingTimers);
 
       expect(modalCardRef.current).toHaveFocus();
     });
 
-    it('should focus on controllable element instead modal if it is focused', () => {
-      render(<ModalRoot activeModal="modal-page-with-input">{modals}</ModalRoot>, {
+    it('should focus on controllable element instead modal if it is focused', async () => {
+      const h = render(<ModalRoot activeModal="modal-page-with-input">{modals}</ModalRoot>, {
         baseElement: document.documentElement,
       });
-      act(jest.runAllTimers);
+      await waitModalPageCSSTransitionEnd(h.getByTestId('modal-page-with-input'));
 
       expect(modalPageWithInputRef.current).not.toHaveFocus();
       expect(inputInnerModalPageRef.current).toHaveFocus();
     });
 
-    it('should focus on controllable element only (if it is focused)', () => {
+    it('should focus on controllable element only (if it is focused)', async () => {
       const component = render(
         <ModalRoot activeModal="modal-page" noFocusToDialog>
           {modals}
@@ -282,8 +280,7 @@ describe.each([
           baseElement: document.documentElement,
         },
       );
-      act(jest.runAllTimers);
-
+      await waitModalPageCSSTransitionEnd(component.getByTestId('modal-page'));
       expect(modalPageRef.current).not.toHaveFocus();
 
       component.rerender(
@@ -291,389 +288,10 @@ describe.each([
           {modals}
         </ModalRoot>,
       );
-      act(jest.runAllTimers);
+      await waitModalPageCSSTransitionEnd(component.getByTestId('modal-page-with-input'));
 
       expect(modalPageWithInputRef.current).not.toHaveFocus();
       expect(inputInnerModalPageRef.current).toHaveFocus();
     });
   });
 });
-
-function getFirstHTMLElementChild(el: HTMLElement | null) {
-  return el && el.firstElementChild instanceof HTMLElement ? el.firstElementChild : null;
-}
-
-describe(ModalRootTouch, () => {
-  describe('check correct update height', () => {
-    const updateHeightSetup = async ({
-      content,
-      defaultModalContentClientHeight,
-      defaultContentInScrollHeight,
-    }: {
-      content: React.ReactElement;
-      defaultModalContentClientHeight: number;
-      defaultContentInScrollHeight: number;
-    }) => {
-      let modalContentClientHeight = defaultModalContentClientHeight;
-      let contentInScrollHeight = defaultContentInScrollHeight;
-      let innerElementTransform = '';
-
-      const Fixture = () => {
-        return (
-          <ModalRootTouch activeModal="modal-page">
-            <ModalPage
-              id="modal-page"
-              data-testid="modal-page"
-              key="1"
-              getRootRef={(element) => {
-                if (!element) {
-                  return;
-                }
-                jest
-                  .spyOn((element.firstElementChild! as HTMLElement).style, 'transform', 'set')
-                  .mockImplementation((newTransform) => (innerElementTransform = newTransform));
-                jest
-                  .spyOn(element, 'offsetHeight', 'get')
-                  .mockImplementation(() => modalContentClientHeight);
-              }}
-              getModalContentRef={(element) => {
-                if (!element) {
-                  return;
-                }
-                jest
-                  .spyOn(element, 'clientHeight', 'get')
-                  .mockImplementation(() => modalContentClientHeight);
-                jest
-                  .spyOn(element.firstElementChild!, 'scrollHeight', 'get')
-                  .mockImplementation(() => contentInScrollHeight);
-              }}
-            >
-              {content}
-            </ModalPage>
-          </ModalRootTouch>
-        );
-      };
-
-      const component = render(<Fixture />, {
-        baseElement: document.documentElement,
-      });
-      act(jest.runAllTimers);
-      await waitCSSTransitionEnd(getFirstHTMLElementChild(component.getByTestId('modal-page')));
-
-      return {
-        component,
-        set modalContentClientHeight(height: number) {
-          modalContentClientHeight = height;
-        },
-        set contentInScrollHeight(height: number) {
-          contentInScrollHeight = height;
-        },
-        get innerElementTransform() {
-          return innerElementTransform;
-        },
-      };
-    };
-
-    it('should update modal height without expandable', async () => {
-      const ModalPageContent = withModalRootContext(({ updateModalHeight }) => {
-        return (
-          <div>
-            <Button onClick={updateModalHeight} data-testid="update-height">
-              Обновить
-            </Button>
-          </div>
-        );
-      });
-
-      const mockedData = await updateHeightSetup({
-        content: <ModalPageContent />,
-        defaultContentInScrollHeight: 700,
-        defaultModalContentClientHeight: 800,
-      });
-
-      expect(mockedData.innerElementTransform).toBe('translate3d(0, 12.5%, 0)');
-
-      mockedData.modalContentClientHeight = 1000;
-      mockedData.contentInScrollHeight = 700;
-
-      fireEvent.click(mockedData.component.getByTestId('update-height'));
-      act(jest.runAllTimers);
-
-      expect(mockedData.innerElementTransform).toBe('translate3d(0, 30%, 0)');
-    });
-
-    it('should update modal height with expandable', async () => {
-      const ModalPageContent = withModalRootContext(({ updateModalHeight }) => {
-        return (
-          <div>
-            <Button onClick={updateModalHeight} data-testid="update-height">
-              Обновить
-            </Button>
-          </div>
-        );
-      });
-
-      const mockedData = await updateHeightSetup({
-        content: <ModalPageContent />,
-        defaultModalContentClientHeight: 600,
-        defaultContentInScrollHeight: 800,
-      });
-
-      expect(mockedData.innerElementTransform).toBe('translate3d(0, 25%, 0)');
-
-      mockedData.modalContentClientHeight = 700;
-      mockedData.contentInScrollHeight = 1000;
-
-      fireEvent.click(mockedData.component.getByTestId('update-height'));
-      act(jest.runAllTimers);
-
-      expect(mockedData.innerElementTransform).toBe('translate3d(0, 25%, 0)');
-    });
-  });
-
-  describe('touch move events check to modal page', () => {
-    const touchMoveSetup = async ({
-      onClose,
-      settlingHeight,
-      modalPageHeight = 664,
-      modalPageContentClientHeight,
-      contentScrollHeight,
-    }: {
-      onClose: VoidFunction;
-      settlingHeight?: number;
-      modalPageHeight?: number;
-      modalPageContentClientHeight: number;
-      contentScrollHeight: number;
-    }) => {
-      let innerElementTransform = '';
-
-      Object.defineProperty(window, 'innerHeight', {
-        writable: true,
-        configurable: true,
-        value: 720,
-      });
-
-      const Fixture = () => {
-        return (
-          <ModalRootTouch activeModal="modal-page">
-            <ModalPage
-              id="modal-page"
-              data-testid="modal-page"
-              key="1"
-              settlingHeight={settlingHeight}
-              onClose={onClose}
-              getRootRef={(element) => {
-                if (!element) {
-                  return;
-                }
-                jest
-                  .spyOn((element.firstElementChild as HTMLDivElement).style, 'transform', 'set')
-                  .mockImplementation((newTransform) => (innerElementTransform = newTransform));
-                jest
-                  .spyOn(element, 'offsetHeight', 'get')
-                  .mockImplementation(() => modalPageHeight);
-              }}
-              getModalContentRef={(element) => {
-                if (!element) {
-                  return;
-                }
-                jest
-                  .spyOn(element, 'clientHeight', 'get')
-                  .mockImplementation(() => modalPageContentClientHeight);
-                jest
-                  .spyOn(element.firstElementChild!, 'scrollHeight', 'get')
-                  .mockImplementation(() => contentScrollHeight);
-              }}
-            >
-              <div></div>
-            </ModalPage>
-          </ModalRootTouch>
-        );
-      };
-
-      const component = render(<Fixture />, {
-        baseElement: document.documentElement,
-      });
-
-      const header = component.container.getElementsByClassName(modalPageStyles.header)[0];
-      act(jest.runAllTimers);
-      await waitCSSTransitionEnd(getFirstHTMLElementChild(component.getByTestId('modal-page')));
-
-      return {
-        component,
-        get header() {
-          return header;
-        },
-        get innerElementTransform() {
-          return innerElementTransform;
-        },
-      };
-    };
-
-    it('should hide modal page by touch', async () => {
-      const date = mockDate();
-
-      const onClose = jest.fn();
-
-      const mockedData = await touchMoveSetup({
-        onClose,
-        modalPageContentClientHeight: 608,
-        contentScrollHeight: 1291,
-      });
-      fireEvent.mouseDown(mockedData.header, {
-        clientY: 250,
-      });
-      fireEvent.mouseMove(mockedData.header, {
-        clientY: 350,
-      });
-      date.next();
-      fireEvent.mouseUp(mockedData.header, {
-        client: 350,
-      });
-
-      expect(onClose).toHaveBeenCalledTimes(1);
-    });
-
-    it('should expand and then collapse modal page by touch', async () => {
-      const date = mockDate();
-
-      const onClose = jest.fn();
-
-      const mockedData = await touchMoveSetup({
-        onClose,
-        modalPageContentClientHeight: 608,
-        contentScrollHeight: 1291,
-      });
-      expect(mockedData.innerElementTransform).toBe('translate3d(0, 25%, 0)');
-      fireEvent.mouseDown(mockedData.header, {
-        clientY: 250,
-      });
-      fireEvent.mouseMove(mockedData.header, {
-        clientY: 190,
-      });
-      date.next();
-      fireEvent.mouseUp(mockedData.header, {
-        client: 190,
-      });
-      act(jest.runAllTimers);
-      expect(mockedData.innerElementTransform).toBe('translate3d(0, 0%, 0)');
-
-      fireEvent.mouseDown(mockedData.header, {
-        clientY: 95,
-      });
-      fireEvent.mouseMove(mockedData.header, {
-        clientY: 180,
-      });
-      date.next();
-      fireEvent.mouseUp(mockedData.header, {
-        client: 180,
-      });
-      act(jest.runAllTimers);
-      expect(mockedData.innerElementTransform).toBe('translate3d(0, 25%, 0)');
-
-      expect(onClose).toHaveBeenCalledTimes(0);
-    });
-
-    it('should close modal page when settlingHeight 100 by touch', async () => {
-      const date = mockDate();
-
-      const onClose = jest.fn();
-
-      const mockedData = await touchMoveSetup({
-        onClose,
-        settlingHeight: 100,
-        modalPageContentClientHeight: 600,
-        contentScrollHeight: 1200,
-      });
-
-      expect(mockedData.innerElementTransform).toBe('translate3d(0, 0%, 0)');
-      fireEvent.mouseDown(mockedData.header, {
-        clientY: 95,
-      });
-      fireEvent.mouseMove(mockedData.header, {
-        clientY: 250,
-      });
-      date.next();
-      fireEvent.mouseUp(mockedData.header, {
-        client: 250,
-      });
-      act(jest.runAllTimers);
-      expect(onClose).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('modal card touch move events', () => {
-    const touchMoveSetup = async ({ onClose }: { onClose: VoidFunction }) => {
-      let content: HTMLDivElement;
-      let transform = '';
-      Object.defineProperty(window, 'innerHeight', {
-        writable: true,
-        configurable: true,
-        value: 720,
-      });
-      const Fixture = () => {
-        return (
-          <ModalRootTouch activeModal="modal-card">
-            <ModalCard
-              id="modal-card"
-              data-testid="modal-card"
-              key="1"
-              onClose={onClose}
-              getRootRef={(element) => {
-                if (!element) {
-                  return;
-                }
-                content = element.firstElementChild as HTMLDivElement;
-                jest.spyOn(content, 'offsetHeight', 'get').mockImplementation(() => 320);
-                jest
-                  .spyOn(content.style, 'transform', 'set')
-                  .mockImplementation((newTransform) => (transform = newTransform));
-              }}
-            >
-              <div></div>
-            </ModalCard>
-          </ModalRootTouch>
-        );
-      };
-
-      const component = render(<Fixture />, {
-        baseElement: document.documentElement,
-      });
-      act(jest.runAllTimers);
-      await waitCSSTransitionEnd(getFirstHTMLElementChild(component.getByTestId('modal-card')));
-
-      return {
-        component,
-        get transform() {
-          return transform;
-        },
-        get content() {
-          return content;
-        },
-      };
-    };
-
-    it('should close modal card by touch', async () => {
-      const date = mockDate();
-      const onClose = jest.fn();
-      const mockedData = await touchMoveSetup({
-        onClose,
-      });
-      expect(mockedData.transform).toBe('translate3d(0, 0%, 0)');
-      fireEvent.mouseDown(mockedData.content, {
-        clientY: 400,
-      });
-      fireEvent.mouseMove(mockedData.content, {
-        clientY: 500,
-      });
-      act(jest.runAllTimers);
-      date.next();
-      expect(mockedData.transform).toBe('translate3d(0, 31.25%, 0)');
-      fireEvent.mouseUp(mockedData.content, {
-        clientY: 500,
-      });
-      act(jest.runAllTimers);
-      expect(onClose).toHaveBeenCalledTimes(1);
-    });
-  });
-});
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
index dd7717f69c..387411cf01 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
+++ b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
@@ -1,727 +1,62 @@
 'use client';
 
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { clamp } from '../../helpers/math';
-import { withContext } from '../../hoc/withContext';
-import { withPlatform } from '../../hoc/withPlatform';
-import { type DOMProps, withDOM } from '../../lib/dom';
-import { getNavId } from '../../lib/getNavId';
-import { rubber } from '../../lib/touch';
+import { noop } from '@vkontakte/vkjs';
 import { warnOnce } from '../../lib/warnOnce';
-import { ConfigProviderContext } from '../ConfigProvider/ConfigProviderContext';
-import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { type CustomTouchEvent, Touch } from '../Touch/Touch';
-import TouchRootContext from '../Touch/TouchContext';
-import { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';
-import { MODAL_PAGE_DEFAULT_PERCENT_HEIGHT } from './constants';
-import type { ModalRootWithDOMProps, ModalsStateEntry, TranslateRange } from './types';
-import { type ModalTransitionProps, withModalManager } from './useModalManager';
-import styles from './ModalRoot.module.css';
+import { ModalRootContext } from './ModalRootContext';
+import type { ModalRootProps } from './types';
 
 const warn = warnOnce('ModalRoot');
 
-function numberInRange(number: number, range: TranslateRange | undefined) {
-  if (!range) {
-    return false;
-  }
-  return number >= range[0] && number <= range[1];
-}
-
-function rangeTranslate(number: number) {
-  return clamp(number, 0, 98);
-}
-
-interface ModalRootState {
-  touchDown?: boolean;
-  dragging?: boolean;
-  modalOpenedLog: string[];
-}
-
-class ModalRootTouchComponent extends React.Component<
-  ModalRootWithDOMProps & DOMProps & ModalTransitionProps,
-  ModalRootState
-> {
-  constructor(props: ModalRootWithDOMProps & ModalTransitionProps) {
-    super(props);
-    this.state = {
-      touchDown: false,
-      dragging: false,
-      modalOpenedLog: [],
-    };
-
-    this.maskElementRef = React.createRef();
-
-    this.modalRootContext = {
-      updateModalHeight: this.updateModalHeight,
-      registerModal: ({ id, ...data }) => Object.assign(this.props.getModalState(id) ?? {}, data),
-      onClose: () => this.props.onExit(),
-      isInsideModal: true,
-    };
-
-    this.frameIds = {};
-  }
-
-  private readonly maskElementRef: React.RefObject<HTMLDivElement>;
-  private readonly viewportRef = React.createRef<HTMLDivElement>();
-  private maskAnimationFrame: number | undefined = undefined;
-  private readonly modalRootContext: ModalRootContextInterface;
-  private readonly frameIds: {
-    [index: string]: number;
-  };
-  private restoreFocusTo: HTMLElement | undefined | null = undefined;
-
-  get timeout(): number {
-    return this.props.platform === 'ios' ? 400 : 320;
-  }
-
-  get document(): Document {
-    return this.props.document as Document;
-  }
-
-  get window(): Window {
-    return this.props.window as Window;
-  }
-
-  getModals() {
-    return React.Children.toArray(this.props.children) as React.ReactElement[];
-  }
-
-  componentDidMount() {
-    // Отслеживаем изменение размеров viewport
-    this.window?.addEventListener('resize', this.updateModalHeight, false);
-  }
-
-  componentWillUnmount() {
-    this.toggleDocumentScrolling(true);
-    this.window.removeEventListener('resize', this.updateModalHeight, false);
-  }
-
-  componentDidUpdate(prevProps: ModalRootWithDOMProps & ModalTransitionProps) {
-    // transition phase 2: animate exiting modal
-    if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {
-      this.closeModal(this.props.exitingModal);
-    }
-
-    // transition phase 3: animate entering modal
-    if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
-      const enteringState = this.props.getModalState(this.props.enteringModal);
-      this.props.onEnter();
-      this.waitTransitionFinish(enteringState, () => {
-        if (enteringState) {
-          if (enteringState.innerElement) {
-            enteringState.innerElement.style.transitionDelay = '';
-          }
-          this.onEntered(enteringState);
-        }
-      });
-
-      if (enteringState?.innerElement) {
-        enteringState.innerElement.style.transitionDelay = this.props.delayEnter
-          ? `${this.timeout}ms`
-          : '';
-        this.animateTranslate(enteringState, enteringState.translateY);
-        this.setMaskOpacity(enteringState, 1);
-      }
-    }
-
-    // focus restoration
-    if (this.props.activeModal && !prevProps.activeModal) {
-      this.restoreFocusTo = this.document.activeElement as HTMLElement;
-    }
-    if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
-      this.restoreFocusTo.focus();
-      this.restoreFocusTo = null;
-    }
-
-    this.toggleDocumentScrolling(!this.props.activeModal && !this.props.exitingModal);
-  }
-
-  /* Отключает скролл документа */
-  toggleDocumentScrolling(enabled: boolean) {
-    if (enabled) {
-      // восстанавливаем значение overscroll behavior
-      // eslint-disable-next-line no-restricted-properties
-      this.document.documentElement.classList.remove('vkui--disable-overscroll-behavior');
-    } else {
-      // отключаем нативный pull-to-refresh при открытом модальном окне
-      // чтобы он не срабатывал при закрытии модалки смахиванием вниз
-      // eslint-disable-next-line no-restricted-properties
-      this.document.documentElement.classList.add('vkui--disable-overscroll-behavior');
-    }
-  }
-
-  checkPageContentHeight() {
-    const modalState = this.props.getModalState(this.props.activeModal);
-
-    if (modalState?.type === 'page' && modalState?.modalElement) {
-      const prevModalState = { ...modalState };
-      initPageModal(modalState);
-      const currentModalState = { ...modalState };
-
-      let needAnimate = false;
-
-      if (prevModalState.expandable === currentModalState.expandable) {
-        if (prevModalState.translateYFrom !== currentModalState.translateYFrom) {
-          needAnimate = true;
-        }
-      } else {
-        needAnimate = true;
-      }
-
-      if (needAnimate) {
-        this.animateTranslate(modalState, modalState.translateY);
-      }
-    }
-  }
-
-  updateModalHeight = () => {
-    const modalState = this.props.getModalState(this.props.activeModal);
-
-    if (modalState && modalState.type === 'page') {
-      if (this.props.enteringModal) {
-        this.waitTransitionFinish(modalState, () => {
-          requestAnimationFrame(() => this.checkPageContentHeight());
-        });
-      } else {
-        requestAnimationFrame(() => this.checkPageContentHeight());
-      }
-    }
-  };
-
-  onEntered({ id, modalElement }: ModalsStateEntry) {
-    if (
-      !this.props.noFocusToDialog &&
-      modalElement &&
-      !modalElement.contains(this.document.activeElement)
-    ) {
-      modalElement.focus();
-    }
-
-    this.props.onEntered(id);
-  }
-
-  closeModal(id: string) {
-    // Сбрасываем состояния, которые могут помешать закрытию модального окна
-    this.setState({ touchDown: false });
-
-    const prevModalState = this.props.getModalState(id);
-
-    if (!prevModalState) {
-      id && warn(`closeActiveModal: модальное окно (страница) ${id} не существует`, 'error');
-      return;
-    }
-    if (!this.state.modalOpenedLog.length) {
-      this.setState((prevState) => ({
-        modalOpenedLog: [...prevState.modalOpenedLog, id],
-      }));
-    }
-    const nextModalState = this.props.getModalState(this.props.activeModal);
-    const nextIsPage = !!nextModalState && nextModalState.type === 'page';
-
-    const prevIsPage = !!prevModalState && prevModalState.type === 'page';
-    this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));
-    const exitTranslate =
-      prevIsPage &&
-      nextIsPage &&
-      (prevModalState.translateY ?? 0) <= (nextModalState?.translateYFrom ?? 0) &&
-      !this.props.isBack
-        ? (nextModalState?.translateYFrom ?? 0) + 10
-        : 100;
-    this.animateTranslate(prevModalState, exitTranslate);
-
-    if (!nextModalState) {
-      // NOTE: was only for clean exit
-      this.setMaskOpacity(prevModalState, 0);
-      this.setState({ modalOpenedLog: [] });
-      prevModalState.translateY = undefined;
-      prevModalState.expandable = undefined;
-    } else if (nextModalState.id && !this.state.modalOpenedLog.includes(nextModalState.id)) {
-      nextModalState.translateY = undefined;
-      this.setState((prevState) => ({
-        modalOpenedLog: [...prevState.modalOpenedLog, nextModalState.id!],
-      }));
-    }
-  }
-
-  onTouchMove = (e: CustomTouchEvent) => {
-    if (this.props.exitingModal) {
-      return;
-    }
-    const modalState = this.props.getModalState(this.props.activeModal);
-    if (!modalState) {
-      return;
-    }
-
-    if (modalState.type === 'page') {
-      return this.onPageTouchMove(e, modalState);
-    }
-
-    if (modalState.type === 'card') {
-      return this.onCardTouchMove(e, modalState);
-    }
-  };
-
-  onPageTouchMove(event: CustomTouchEvent, modalState: ModalsStateEntry) {
-    const { shiftY, originalEvent } = event;
-    const target = originalEvent.target as HTMLElement;
-
-    if (!event.isY) {
-      if (this.viewportRef.current?.contains(target)) {
-        originalEvent.preventDefault();
-      }
-      return;
-    }
-
-    if (!modalState.innerElement?.contains(target)) {
-      return originalEvent.preventDefault();
-    }
-
-    originalEvent.stopPropagation();
-
-    const { expandable, contentScrolled, collapsed, expanded } = modalState;
-
-    if (!this.state.touchDown) {
-      modalState.touchStartContentScrollTop = modalState.contentElement?.scrollTop ?? 0;
-      this.setState({ touchDown: true });
-    }
-
-    if (contentScrolled) {
-      return;
-    }
-
-    if (modalState.touchMovePositive === null) {
-      modalState.touchMovePositive = shiftY > 0;
-    }
-
-    if (
-      !modalState.expandable ||
-      collapsed ||
-      (expanded && modalState.touchMovePositive && modalState.touchStartContentScrollTop === 0) ||
-      modalState.headerElement?.contains(target)
-    ) {
-      originalEvent.preventDefault();
-
-      if ((!expandable && shiftY < 0) || !this.window) {
-        return;
-      }
-
-      !this.state.dragging && this.setState({ dragging: true });
-
-      const shiftYPercent = (shiftY / this.window.innerHeight) * 100;
-      const shiftYCurrent = rubber(shiftYPercent, 72, 0.8, this.props.platform !== 'ios');
-
-      modalState.touchShiftYPercent = shiftYPercent;
-      modalState.translateYCurrent = rangeTranslate((modalState.translateY ?? 0) + shiftYCurrent);
-
-      this.animateTranslate(modalState, modalState.translateYCurrent);
-      this.setMaskOpacity(modalState);
-    }
-  }
-
-  onCardTouchMove(event: CustomTouchEvent, modalState: ModalsStateEntry) {
-    const { originalEvent, shiftY } = event;
-    const target = originalEvent.target as HTMLElement;
-    if (modalState.innerElement?.contains(target)) {
-      if (!this.state.touchDown) {
-        this.setState({ touchDown: true, dragging: true });
-      }
-
-      const shiftYPercent = (shiftY / modalState.innerElement.offsetHeight) * 100;
-      const shiftYCurrent = rubber(shiftYPercent, 72, 1.2, this.props.platform !== 'ios');
-
-      modalState.touchShiftYPercent = shiftYPercent;
-      modalState.translateYCurrent = Math.max(0, (modalState.translateY ?? 0) + shiftYCurrent);
-
-      this.animateTranslate(modalState, modalState.translateYCurrent);
-      this.setMaskOpacity(modalState);
-    }
-  }
-
-  onTouchEnd = (e: CustomTouchEvent) => {
-    const modalState = this.props.getModalState(this.props.activeModal);
-
-    if (modalState?.type === 'page') {
-      return this.onPageTouchEnd(e, modalState);
-    }
-
-    if (modalState?.type === 'card') {
-      return this.onCardTouchEnd(e, modalState);
-    }
-  };
-
-  onPageTouchEnd(event: CustomTouchEvent, modalState: ModalsStateEntry) {
-    const { startY, shiftY } = event;
-
-    modalState.contentScrolled = false;
-    modalState.touchMovePositive = null;
-
-    let setStateCallback;
-
-    if (this.state.dragging && this.window) {
-      const shiftYEndPercent = ((startY + shiftY) / this.window.innerHeight) * 100;
-
-      let translateY = modalState.translateYCurrent ?? 0;
-      const expectTranslateY =
-        (translateY / event.duration) *
-        240 *
-        0.6 *
-        ((modalState.touchShiftYPercent ?? 0) < 0 ? -1 : 1);
-      translateY = rangeTranslate(translateY + expectTranslateY);
-
-      if (modalState.settlingHeight !== 100) {
-        if (numberInRange(translateY, modalState.expandedRange)) {
-          translateY = modalState.expandedRange?.[0] ?? 0;
-        } else if (numberInRange(translateY, modalState.collapsedRange)) {
-          translateY = modalState.translateYFrom ?? 0;
-        } else if (numberInRange(translateY, modalState.hiddenRange)) {
-          translateY = modalState.preventClose ? modalState.translateYFrom ?? 0 : 100;
-        } else {
-          translateY = modalState.translateYFrom ?? 0;
-        }
-      } else {
-        if (numberInRange(translateY, [0, 25])) {
-          translateY = 0;
-        } else {
-          translateY = modalState.preventClose ? modalState.translateYFrom ?? 0 : 100;
-        }
-      }
-
-      if (translateY !== 100 && shiftYEndPercent >= 75 && !modalState.preventClose) {
-        translateY = 100;
-      }
-
-      modalState.translateY = translateY;
-      modalState.translateYCurrent = translateY;
-      modalState.collapsed = numberInRange(translateY, modalState.collapsedRange);
-      modalState.expanded = translateY === 0;
-      modalState.hidden = translateY === 100;
-
-      if (modalState.hidden) {
-        this.props.onExit();
-      }
-
-      setStateCallback = () => {
-        if (!modalState.hidden) {
-          this.animateTranslate(modalState, modalState.translateY);
-        }
-
-        this.setMaskOpacity(modalState);
-      };
-    }
-
-    this.setState(
-      {
-        touchDown: false,
-        dragging: false,
-      },
-      setStateCallback,
-    );
-  }
-
-  onCardTouchEnd({ duration }: CustomTouchEvent, modalState: ModalsStateEntry) {
-    let setStateCallback;
-
-    if (this.state.dragging) {
-      let translateY = modalState.translateYCurrent ?? 0;
-
-      const expectTranslateY =
-        (translateY / duration) * 240 * 0.6 * ((modalState.touchShiftYPercent ?? 0) < 0 ? -1 : 1);
-      translateY = Math.max(0, translateY + expectTranslateY);
-
-      if (translateY >= 30) {
-        translateY = 100;
-      } else {
-        translateY = 0;
-      }
-
-      modalState.translateY = translateY;
-      modalState.hidden = translateY === 100;
-
-      if (modalState.hidden) {
-        this.props.onExit();
-      }
-
-      setStateCallback = () => {
-        if (!modalState.hidden) {
-          this.animateTranslate(modalState, modalState.translateY);
-        }
-
-        this.setMaskOpacity(modalState);
-      };
-    }
-
-    this.setState(
-      {
-        touchDown: false,
-        dragging: false,
-      },
-      setStateCallback,
-    );
-  }
-
-  onScroll = (e: React.SyntheticEvent) => {
-    const activeModal = this.props.activeModal;
-
-    const target = e.target as HTMLElement;
-
-    if (!activeModal) {
-      return;
-    }
-    const modalState = this.props.getModalState(activeModal);
-    if (modalState?.type === 'page' && modalState?.contentElement?.contains(target)) {
-      modalState.contentScrolled = true;
-
-      if (modalState.contentScrollStopTimeout) {
-        clearTimeout(modalState.contentScrollStopTimeout);
-      }
-
-      modalState.contentScrollStopTimeout = setTimeout(() => {
-        if (modalState.contentScrolled) {
-          modalState.contentScrolled = false;
-        }
-      }, 250);
-    }
-  };
-
-  waitTransitionFinish(modalState: ModalsStateEntry | undefined, eventHandler: () => void) {
-    const el = modalState ? modalState.innerElement : null;
-    if (el) {
-      el.addEventListener('transitionend', eventHandler, { once: true });
-    } else {
-      setTimeout(eventHandler, this.timeout);
-    }
-  }
-
-  /**
-   * Анимирует сдвиг модалки
-   *
-   * @param {ModalsStateEntry} modalState
-   * @param {number} percent Процент сдвига: 0 – полностью открыта, 100 – полностью закрыта
-   */
-  animateTranslate(modalState: ModalsStateEntry, percent: number | undefined) {
-    const frameId = `animateTranslateFrame${modalState.id}`;
-
-    cancelAnimationFrame(this.frameIds[frameId]);
-
-    this.frameIds[frameId] = requestAnimationFrame(() => {
-      if (!modalState.innerElement) {
-        return;
-      }
-      modalState.innerElement.style.transform = `translate3d(0, ${percent}%, 0)`;
-    });
-  }
-
-  /* Устанавливает прозрачность для полупрозрачной подложки */
-  setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number | null = null) {
-    if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {
-      return;
-    }
-    if (this.maskAnimationFrame) {
-      cancelAnimationFrame(this.maskAnimationFrame);
-    }
-    this.maskAnimationFrame = requestAnimationFrame(() => {
-      if (this.maskElementRef.current) {
-        const { translateY = 0, translateYCurrent = 0 } = modalState;
-
-        const opacity =
-          forceOpacity === null
-            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0
-            : forceOpacity;
-        this.maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();
-        this.maskElementRef.current.style.transitionDelay =
-          opacity && this.props.delayEnter ? `${this.timeout}ms` : '';
-      }
-    });
-  }
-
-  render() {
-    const { activeModal, exitingModal, enteringModal, modalOverlayTestId } = this.props;
-    const { touchDown, dragging } = this.state;
-
-    if (!activeModal && !exitingModal) {
-      return null;
-    }
-
-    return (
-      <TouchRootContext.Provider value={true}>
-        <ModalRootContext.Provider value={this.modalRootContext}>
-          <Touch
-            className={classNames(
-              styles.host,
-              this.props.configProvider?.hasCustomPanelHeaderAfter &&
-                styles.hasCustomPanelHeaderAfterSlot,
-              touchDown && classNames(styles.touched, 'vkuiInternalModalRoot--touched'),
-              !!(enteringModal || exitingModal) &&
-                classNames(styles.switching, 'vkuiInternalModalRoot--switching'),
-            )}
-            onMove={this.onTouchMove}
-            onEnd={this.onTouchEnd}
-            onScroll={this.onScroll}
-          >
-            <div
-              data-testid={modalOverlayTestId}
-              className={styles.mask}
-              onClick={this.props.onExit}
-              ref={this.maskElementRef}
-            />
-            <div className={styles.viewport} ref={this.viewportRef}>
-              {this.getModals().map((Modal) => {
-                const modalId = getNavId(Modal.props, warn);
-                const _modalState = this.props.getModalState(modalId);
-                if ((modalId !== activeModal && modalId !== exitingModal) || !_modalState) {
-                  return null;
-                }
-                const modalState = { ..._modalState };
-
-                const isPage = modalState.type === 'page';
-                const key = `modal-${modalId}`;
-
-                return (
-                  <FocusTrap
-                    key={key}
-                    onClose={this.props.onExit}
-                    timeout={this.timeout}
-                    className={classNames(
-                      styles.modal,
-
-                      dragging && 'vkuiInternalModalRoot__modal--dragging',
-
-                      isPage && modalState.expandable && 'vkuiInternalModalRoot__modal--expandable',
-                      isPage && modalState.collapsed && 'vkuiInternalModalRoot__modal--collapsed',
-                    )}
-                    autoFocus={false}
-                    restoreFocus={false}
-                  >
-                    {Modal}
-                  </FocusTrap>
-                );
-              })}
-            </div>
-          </Touch>
-        </ModalRootContext.Provider>
-      </TouchRootContext.Provider>
-    );
-  }
-}
-
-export const ModalRootTouch: React.FC<ModalRootWithDOMProps> = withContext(
-  withPlatform(
-    withDOM<ModalRootWithDOMProps>(withModalManager(initModal)(ModalRootTouchComponent)),
-  ),
-  ConfigProviderContext,
-  'configProvider',
-);
-
 /**
- * Инициализирует модалку перед анимацией открытия
+ * @see https://vkcom.github.io/VKUI/#/ModalRoot
  */
-function initModal(modalState: ModalsStateEntry) {
-  switch (modalState.type) {
-    case 'page':
-      modalState.settlingHeight = modalState.settlingHeight || MODAL_PAGE_DEFAULT_PERCENT_HEIGHT;
-      return initPageModal(modalState);
-    case 'card':
-      return initCardModal(modalState);
-    default:
-      process.env.NODE_ENV === 'development' &&
-        warn(`initActiveModal: modalState.type="${modalState.type}" не поддерживается`, 'error');
-  }
-}
-
-function initPageModal(modalState: ModalsStateEntry) {
-  const { contentElement, bottomInset } = modalState;
-  const contentElementHeight = calculateModalContentHeight(
-    contentElement?.firstElementChild as HTMLElement,
-    modalState.expandable,
+export const ModalRoot = ({
+  activeModal,
+  children,
+  modalOverlayTestId,
+  noFocusToDialog,
+  onOpen,
+  onOpened,
+  onClose,
+  onClosed,
+}: ModalRootProps): React.ReactNode => {
+  return (
+    <ModalRootContext.Provider
+      value={{
+        isInsideModal: true,
+
+        // base props
+        activeModal,
+        modalOverlayTestId,
+        noFocusToDialog,
+
+        // callbacks
+        onOpen,
+        onOpened,
+        onClose,
+        onClosed,
+
+        // TODO [>=8] Удалить метод
+        updateModalHeight:
+          /* istanbul ignore next: deprecated */
+          process.env.NODE_ENV === 'development'
+            ? () => {
+                warn('Метод updateModalHeight() устарел и будет удалён в VKUI v8');
+              }
+            : noop,
+
+        // TODO [>=8] Удалить метод
+        registerModal:
+          /* istanbul ignore next: deprecated */
+          process.env.NODE_ENV === 'development'
+            ? () => {
+                warn('Метод registerModal() устарел и будет удалён в VKUI v8');
+              }
+            : noop,
+      }}
+    >
+      {children}
+    </ModalRootContext.Provider>
   );
-  const bottomInsetHeight = bottomInset?.offsetHeight || 0;
-  const contentHeight = contentElementHeight + bottomInsetHeight;
-  let prevTranslateY = modalState.translateY;
-  let prevExpandable = modalState.expandable;
-
-  modalState.expandable =
-    contentHeight > (contentElement?.clientHeight ?? 0) || modalState.settlingHeight === 100;
-
-  let collapsed = false;
-  let expanded = false;
-  let translateYFrom;
-  let translateY;
-  let expandedRange: TranslateRange;
-  let collapsedRange: TranslateRange | undefined;
-  let hiddenRange: TranslateRange;
-
-  const hasCollapsedState = Boolean(modalState.expandable && modalState.settlingHeight !== 100);
-  if (modalState.expandable) {
-    translateYFrom = 100 - (modalState.settlingHeight ?? 0);
-
-    const shiftHalf = translateYFrom / 2;
-    const visiblePart = 100 - translateYFrom;
-
-    expandedRange = [0, shiftHalf];
-    collapsedRange = hasCollapsedState ? [shiftHalf, translateYFrom + visiblePart / 4] : undefined;
-    hiddenRange = [translateYFrom + visiblePart / 4, 100];
-
-    collapsed = hasCollapsedState && translateYFrom > 0;
-    expanded = translateYFrom <= 0;
-    translateY = translateYFrom;
-  } else {
-    const headerHeight = modalState.headerElement?.offsetHeight ?? 0;
-    const height = contentHeight + headerHeight;
-
-    translateYFrom =
-      100 - (height / (modalState.innerElement?.parentElement?.offsetHeight ?? 0)) * 100;
-    translateY = translateYFrom;
-
-    expandedRange = [translateY, translateY + 25];
-    collapsedRange = undefined;
-    hiddenRange = [translateY + 25, translateY + 100];
-  }
-
-  // Свойство expandable может измениться из-за высоты контента, в таком случае на всю высоту не разворачиваем
-  const shouldExpand = prevExpandable && modalState.expandable;
-  // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран
-  if ((shouldExpand && translateY > (prevTranslateY ?? 100)) || modalState.settlingHeight === 100) {
-    translateY = 0;
-  }
-
-  // Если модалка уже раскрыта обновляем состояния
-  if (translateY === 0) {
-    expanded = true;
-    collapsed = false;
-  }
-
-  modalState.expandedRange = expandedRange;
-  modalState.collapsedRange = collapsedRange;
-  modalState.hiddenRange = hiddenRange;
-  modalState.translateY = translateY;
-  modalState.translateYFrom = translateYFrom;
-  modalState.collapsed = collapsed;
-  modalState.expanded = expanded;
-}
-
-function initCardModal(modalState: ModalsStateEntry) {
-  modalState.translateY = 0;
-}
-
-function calculateModalContentHeight(
-  element: HTMLElement,
-  isExpandable: ModalsStateEntry['expandable'],
-) {
-  if (!isExpandable) {
-    return element.scrollHeight;
-  }
-
-  /*
-   * В режиме expandable мы назначаем контейнеру контента высоту 100%, что не даёт
-   * получить реальную высоту контента.
-   * Поэтому мы пересчитываем высоту, временно устанавливая height: auto;
-   * */
-  const currentHeightStyle = element.style.height;
-  element.style.height = 'auto';
-
-  const elementHeight = element.scrollHeight;
-  element.style.height = currentHeightStyle;
-
-  return elementHeight;
-}
+};
diff --git a/packages/vkui/src/components/ModalRoot/ModalRootAdaptive.test.tsx b/packages/vkui/src/components/ModalRoot/ModalRootAdaptive.test.tsx
deleted file mode 100644
index 689c6b8d88..0000000000
--- a/packages/vkui/src/components/ModalRoot/ModalRootAdaptive.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ModalRoot } from './ModalRootAdaptive';
-
-let isDesktop = true;
-jest.mock('../../hooks/useAdaptivityWithJSMediaQueries', () => ({
-  useAdaptivityWithJSMediaQueries: () => ({
-    isDesktop,
-  }),
-}));
-
-jest.mock('./ModalRootDesktop', () => ({
-  ModalRootDesktop: () => {
-    return <div data-testid="ModalRootDesktop"></div>;
-  },
-}));
-
-jest.mock('./ModalRoot', () => ({
-  ModalRootTouch: () => {
-    return <div data-testid="ModalRootTouch"></div>;
-  },
-}));
-
-describe(ModalRoot, () => {
-  it('check use correct component to render modal root', () => {
-    isDesktop = true;
-    const { rerender } = render(
-      <ModalRoot activeModal="1">
-        <></>
-      </ModalRoot>,
-    );
-    expect(screen.getByTestId('ModalRootDesktop')).toBeInTheDocument();
-
-    isDesktop = false;
-    rerender(
-      <ModalRoot activeModal="1">
-        <></>
-      </ModalRoot>,
-    );
-    expect(screen.getByTestId('ModalRootTouch')).toBeInTheDocument();
-  });
-});
diff --git a/packages/vkui/src/components/ModalRoot/ModalRootAdaptive.tsx b/packages/vkui/src/components/ModalRoot/ModalRootAdaptive.tsx
deleted file mode 100644
index 53533c2a59..0000000000
--- a/packages/vkui/src/components/ModalRoot/ModalRootAdaptive.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { useScrollLock } from '../AppRoot/ScrollContext';
-import { ModalRootTouch } from './ModalRoot';
-import { ModalRootDesktop } from './ModalRootDesktop';
-import type { ModalRootProps } from './types';
-
-/**
- * @see https://vkcom.github.io/VKUI/#/ModalRoot
- */
-export const ModalRoot = (props: ModalRootProps): React.ReactNode => {
-  const { isDesktop } = useAdaptivityWithJSMediaQueries();
-
-  useScrollLock(!!props.activeModal);
-
-  const RootComponent = isDesktop ? ModalRootDesktop : ModalRootTouch;
-
-  return <RootComponent {...props} />;
-};
diff --git a/packages/vkui/src/components/ModalRoot/ModalRootContext.tsx b/packages/vkui/src/components/ModalRoot/ModalRootContext.tsx
index 0a52c06171..7f260d98c9 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRootContext.tsx
+++ b/packages/vkui/src/components/ModalRoot/ModalRootContext.tsx
@@ -1,54 +1,9 @@
-import * as React from 'react';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import type { ModalElements, ModalsStateEntry, ModalType } from './types';
-
-export type ModalRegistryEntry = ModalElements & Required<Pick<ModalsStateEntry, 'type' | 'id'>>;
-type ModalRefs = { [k in keyof ModalElements]: (e: ModalElements[k]) => void };
-
-export interface ModalRootContextInterface {
-  updateModalHeight: VoidFunction;
-  registerModal: (data: ModalRegistryEntry) => void;
-  onClose?: VoidFunction;
-  isInsideModal: boolean;
-}
-
-export const ModalRootContext: React.Context<ModalRootContextInterface> =
-  React.createContext<ModalRootContextInterface>({
-    updateModalHeight: () => undefined,
-    registerModal: () => undefined,
-    isInsideModal: false,
-  });
-
-/**
- * All referenced elements must be static
- */
-export function useModalRegistry(
-  id: string | undefined,
-  type: ModalType,
-): {
-  refs: Required<ModalRefs>;
-} {
-  const modalContext = React.useContext(ModalRootContext);
-  const elements = React.useRef<ModalElements>({}).current;
-  useIsomorphicLayoutEffect(() => {
-    if (id !== undefined) {
-      modalContext.registerModal({ ...elements, type, id });
-      // unset refs on  unmount to prevent leak
-      const reset = Object.keys(elements).reduce<ModalRegistryEntry>(
-        (acc, k) => ({ ...acc, [k]: null }),
-        { type, id },
-      );
-      return () => modalContext.registerModal(reset);
-    }
-    return undefined;
-  }, []);
-
-  const refs = React.useRef<Required<ModalRefs>>({
-    modalElement: (e) => (elements.modalElement = e),
-    innerElement: (e) => (elements.innerElement = e),
-    headerElement: (e) => (elements.headerElement = e),
-    contentElement: (e) => (elements.contentElement = e),
-    bottomInset: (e) => (elements.bottomInset = e),
-  }).current;
-  return { refs };
-}
+import { createContext } from 'react';
+import { noop } from '@vkontakte/vkjs';
+import type { ModalRootContextInterface } from './types';
+
+export const ModalRootContext = createContext<ModalRootContextInterface>({
+  updateModalHeight: noop,
+  registerModal: noop,
+  isInsideModal: false,
+});
diff --git a/packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx b/packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx
deleted file mode 100644
index 98a743477d..0000000000
--- a/packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { classNames, noop } from '@vkontakte/vkjs';
-import { clamp } from '../../helpers/math';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
-import { usePrevious } from '../../hooks/usePrevious';
-import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
-import { useDOM } from '../../lib/dom';
-import { getNavId } from '../../lib/getNavId';
-import { warnOnce } from '../../lib/warnOnce';
-import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
-import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';
-import type { ModalRootWithDOMProps, ModalsStateEntry } from './types';
-import { useModalManager } from './useModalManager';
-import styles from './ModalRoot.module.css';
-
-const warn = warnOnce('ModalRoot');
-
-export const ModalRootDesktop = ({
-  activeModal: activeModalProp,
-  children,
-  noFocusToDialog = false,
-  onOpen,
-  onOpened,
-  onClose,
-  onClosed,
-  modalOverlayTestId,
-}: ModalRootWithDOMProps): React.ReactNode => {
-  const maskElementRef = React.useRef<HTMLDivElement>(null);
-  const maskAnimationFrame = React.useRef<number | undefined>(undefined);
-  const restoreFocusTo = React.useRef<HTMLElement | undefined>(undefined);
-
-  const { document } = useDOM();
-  const { hasCustomPanelHeaderAfter, platform } = useConfigProvider();
-  const {
-    activeModal,
-    exitingModal,
-    onExit,
-    getModalState,
-    enteringModal,
-    onEnter,
-    onEntered: onEnteredProp,
-    onExited,
-    history,
-    delayEnter,
-  } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);
-
-  const waitTransitionFinish = useWaitTransitionFinish();
-  const prevProps = usePrevious({
-    exitingModal,
-    enteringModal,
-    activeModal,
-  });
-  const modalRootContext: ModalRootContextInterface = useObjectMemo({
-    updateModalHeight: () => undefined,
-    registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),
-    onClose: onExit,
-    isInsideModal: true,
-  });
-
-  const timeout = platform === 'ios' ? 400 : 320;
-  const modals = React.Children.toArray(children) as React.ReactElement[];
-
-  /* Анимирует сдвиг модального окна */
-  const animateModalOpacity = (modalState: ModalsStateEntry | undefined, display: boolean) => {
-    if (modalState?.innerElement) {
-      modalState.innerElement.style.transition = '';
-      modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';
-      modalState.innerElement.style.opacity = display ? '1' : '0';
-    }
-  };
-
-  /* Устанавливает прозрачность для полупрозрачной подложки */
-  const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number | null = null) => {
-    if (forceOpacity === null && history?.[0] !== modalState.id) {
-      return;
-    }
-
-    if (maskAnimationFrame.current) {
-      cancelAnimationFrame(maskAnimationFrame.current);
-    }
-    maskAnimationFrame.current = requestAnimationFrame(() => {
-      if (maskElementRef.current) {
-        const { translateY = 0, translateYCurrent = 0 } = modalState;
-
-        const opacity =
-          forceOpacity === null
-            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0
-            : forceOpacity;
-        maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();
-      }
-    });
-  };
-
-  const onEntered = ({ id, modalElement }: ModalsStateEntry) => {
-    if (!noFocusToDialog && modalElement && !modalElement.contains(document!.activeElement)) {
-      modalElement.focus();
-    }
-
-    onEnteredProp(id);
-  };
-
-  const openModal = () => {
-    if (!enteringModal || !prevProps) {
-      return;
-    }
-
-    const enteringState = getModalState(enteringModal);
-    onEnter();
-
-    // Анимация открытия модального окна
-    if (!prevProps.exitingModal) {
-      requestAnimationFrame(() => {
-        if (enteringModal === enteringModal && enteringState) {
-          waitTransitionFinish(enteringState.innerElement, () => onEntered(enteringState), timeout);
-          animateModalOpacity(enteringState, true);
-          setMaskOpacity(enteringState, 1);
-        }
-      });
-
-      return;
-    }
-
-    // Переход между модальными окнами без анимации
-    requestAnimationFrame(() => {
-      if (enteringState?.innerElement) {
-        enteringState.innerElement.style.transition = 'none';
-        enteringState.innerElement.style.opacity = '1';
-        setMaskOpacity(enteringState, 1);
-      }
-    });
-
-    if (enteringState) {
-      onEntered(enteringState);
-    }
-  };
-
-  const closeModal = (id: string) => {
-    const prevModalState = getModalState(id);
-    if (!prevModalState) {
-      return;
-    }
-
-    // Анимация закрытия модального окна
-    if (!activeModal) {
-      requestAnimationFrame(() => {
-        waitTransitionFinish(
-          prevModalState?.innerElement,
-          (event) => {
-            // Исключаем дочерние элементы
-            if (event && event.target === prevModalState?.innerElement) {
-              onExited(id);
-            } else if (!event) {
-              // Вызвался по тайм-ауту
-              onExited(id);
-            }
-          },
-          timeout,
-        );
-        animateModalOpacity(prevModalState, false);
-        setMaskOpacity(prevModalState, 0);
-      });
-
-      return;
-    }
-
-    // Переход между модальными окнами без анимации
-    onExited(id);
-  };
-
-  React.useEffect(() => {
-    if (!prevProps) {
-      return;
-    }
-
-    // transition phase 2: animate exiting modal
-    if (exitingModal && exitingModal !== prevProps.exitingModal) {
-      closeModal(exitingModal);
-    }
-
-    // transition phase 3: animate entering modal
-    if (enteringModal && enteringModal !== prevProps.enteringModal) {
-      openModal();
-    }
-
-    // focus restoration
-    if (activeModal && !prevProps.activeModal) {
-      restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement | undefined;
-    }
-    if (!activeModal && !exitingModal && restoreFocusTo.current) {
-      restoreFocusTo.current.focus();
-      restoreFocusTo.current = undefined;
-    }
-  });
-
-  if (!activeModal && !exitingModal) {
-    return null;
-  }
-
-  return (
-    <ModalRootContext.Provider value={modalRootContext}>
-      <div
-        className={classNames(
-          styles.host,
-          hasCustomPanelHeaderAfter && styles.hasCustomPanelHeaderAfterSlot,
-          styles.desktop,
-        )}
-      >
-        <div
-          data-testid={modalOverlayTestId}
-          className={styles.mask}
-          ref={maskElementRef}
-          onClick={onExit}
-        />
-        <div className={styles.viewport}>
-          {modals.map((Modal: React.ReactElement) => {
-            const modalId = getNavId(Modal.props, warn);
-            if (modalId !== activeModal && modalId !== exitingModal) {
-              return null;
-            }
-
-            const key = `modal-${modalId}`;
-
-            return (
-              <FocusTrap
-                autoFocus={false}
-                restoreFocus={false}
-                onClose={onExit}
-                timeout={timeout}
-                key={key}
-                className={styles.modal}
-              >
-                {Modal}
-              </FocusTrap>
-            );
-          })}
-        </div>
-      </div>
-    </ModalRootContext.Provider>
-  );
-};
diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md
index bf14879ef4..83662595a6 100644
--- a/packages/vkui/src/components/ModalRoot/Readme.md
+++ b/packages/vkui/src/components/ModalRoot/Readme.md
@@ -62,7 +62,7 @@ const MODAL_CARD_ABOUT = 'say-about';
 const MODAL_CARD_NOTIFICATIONS = 'notifications';
 const MODAL_CARD_CHAT_INVITE = 'chat-invite';
 
-const DynamicModalPage = ({ updateModalHeight, onClose, ...props }) => {
+const DynamicModalPage = ({ onClose, ...props }) => {
   const platform = usePlatform();
   const { sizeX } = useAdaptivityConditionalRender();
   const [expanded, setExpanded] = React.useState(false);
@@ -103,11 +103,11 @@ const DynamicModalPage = ({ updateModalHeight, onClose, ...props }) => {
 const App = () => {
   const { sizeX } = useAdaptivityConditionalRender();
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
-  const [activeModal, setActiveModal] = useState(null);
-  const [modalHistory, setModalHistory] = useState([]);
-  const [dateOfBirth, setDateOfBirth] = useState(new Date(1901, 0, 1));
+  const [activeModal, setActiveModal] = React.useState(null);
+  const [modalHistory, setModalHistory] = React.useState([]);
+  const [dateOfBirth, setDateOfBirth] = React.useState(new Date(1901, 0, 1));
   const [randomUser] = useState(() => getRandomUser());
-  const [users] = useState(() =>
+  const [users] = React.useState(() =>
     'k'
       .repeat(25)
       .split('')
@@ -572,81 +572,10 @@ const App = () => {
 
 Используйте параметр `height`.
 Высоту можно задать как числом (`height={300}`) так и в проценах (`height={'80%'}`).
-Работает и для мобильной версии и для декстопной.
+Работает и для мобильной версии и для десктопной.
 В мобильной версии при появлении модального окна на высоту по умолчанию также влияет значение `settlingHeight`.
 Чтобы отключить его влияние достаточно задать `settlingHeight={100}`.
 
-### Я указал `dynamicContentHeight` у `ModalPage`, но высота модальной страницы не меняется
-
-Если содержимое вашей модальной страницы вынесено в отдельный компонент, и при смене контента не обновляется высота, используйте хук `useModalRootContext` и вызывайте `updateModalHeight` после действий, которые могут привести к смене высоты содержимого.
-
-`src/App.js`
-
-```jsx static
-import SelectModal from './SelectModal';
-
-const App = () => {
-  const [activeModal, setActiveModal] = React.useState('select');
-
-  const modal = (
-    <ModalRoot activeModal={activeModal}>
-      <ModalPage id="select" dynamicContentHeight>
-        <SelectModal />
-      </ModalPage>
-    </ModalRoot>
-  );
-
-  return (
-    <SplitLayout modal={modal}>
-      <SplitCol>
-        <View activePanel="main">
-          <Panel id="main">...</Panel>
-        </View>
-      </SplitCol>
-    </SplitLayout>
-  );
-};
-```
-
-`src/SelectModal.js`
-
-```jsx static
-import { useModalRootContext } from '@vkontakte/vkui';
-
-export const SelectModal = () => {
-  const [items, setItems] = React.useState([]);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const { updateModalHeight } = useModalRootContext();
-
-  const fetchItems = () => {
-    fetch('')
-      .then((r) => r.json())
-      .then((items) => {
-        setItems(items);
-        setIsLoading(false);
-      });
-  };
-
-  React.useEffect(fetchItems, []);
-
-  // После установки стейта и перерисовки компонента SelectModal сообщим ModalRoot об изменениях
-  React.useEffect(updateModalHeight, [items.length]);
-
-  return (
-    <div className="SelectModal">
-      {isLoading && <Spinner />}
-      {!isLoading && (
-        <Group>
-          {items.map((item) => (
-            <Cell key={item.id}>{item.title}</Cell>
-          ))}
-        </Group>
-      )}
-    </div>
-  );
-};
-```
-
 ### В мобильной версии при параметре `autoFocus` у контрола ломается поведение карточки
 
 К сожалению, из-за особенностей React, `autoFocus` ломает CSS анимацию.
@@ -658,7 +587,7 @@ export const SelectModal = () => {
 
 ```jsx static
 const App = () => {
-  const inputRef = useRef(null);
+  const inputRef = React.useRef(null);
 
   const handleOpen = React.useCallback((id) => {
     if (id === 'modal-with-auto-focus' && inputRef.current) {
@@ -684,7 +613,7 @@ const App = () => {
 
 ```jsx static
 const App = () => {
-  const inputRef = useRef(null);
+  const inputRef = React.useRef(null);
 
   const handleOpen = React.useCallback(() => {
     if (inputRef.current) {
@@ -705,8 +634,8 @@ const App = () => {
 
 ```jsx { "props": { "layout": false, "adaptivity": true } }
 const Example = () => {
-  const firstInputRef = useRef(null);
-  const secondInputRef = useRef(null);
+  const firstInputRef = React.useRef(null);
+  const secondInputRef = React.useRef(null);
   const [activeModal, setActiveModal] = React.useState(false);
 
   const handleOpenOfModalRoot = React.useCallback((id) => {
diff --git a/packages/vkui/src/components/ModalRoot/constants.ts b/packages/vkui/src/components/ModalRoot/constants.ts
deleted file mode 100644
index 882fe0827b..0000000000
--- a/packages/vkui/src/components/ModalRoot/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = 75;
diff --git a/packages/vkui/src/components/ModalRoot/types.ts b/packages/vkui/src/components/ModalRoot/types.ts
index 9cbef48943..85b266a032 100644
--- a/packages/vkui/src/components/ModalRoot/types.ts
+++ b/packages/vkui/src/components/ModalRoot/types.ts
@@ -1,13 +1,18 @@
-import type { DOMContextInterface } from '../../lib/dom';
-import type { HasPlatform } from '../../types';
-import type { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
+/** TODO [>=8] Удалить deprecated типы */
 
+/**
+ * @deprecated будет удалён в **VKUI v8**
+ */
 export type ModalType = 'page' | 'card';
 
+/**
+ * @deprecated будет удалён в **VKUI v8**
+ */
 export type TranslateRange = [number, number];
 
-export type ModalsState = { [index: string]: ModalsStateEntry };
-
+/**
+ * @deprecated будет удалён в **VKUI v8**
+ */
 export interface ModalElements {
   modalElement?: HTMLElement | null;
   innerElement?: HTMLElement | null;
@@ -16,6 +21,9 @@ export interface ModalElements {
   bottomInset?: HTMLElement | null;
 }
 
+/**
+ * @deprecated будет удалён в **VKUI v8**
+ */
 export interface ModalsStateEntry extends ModalElements {
   id: string | null;
   /**
@@ -72,44 +80,67 @@ export interface ModalsStateEntry extends ModalElements {
   preventClose?: boolean;
 }
 
-export interface ModalRootProps {
+export type ModalRootCallbackFunction = (modalId: string) => void;
+
+type ModalRootBaseProps = {
   activeModal?: string | null;
-  children: React.ReactElement | Iterable<React.ReactElement>;
+
+  /**
+   * `data-testid` для маски
+   */
+  modalOverlayTestId?: string;
+
+  /**
+   * Отключает фокус на контейнер диалогового окна при открытии.
+   */
+  noFocusToDialog?: boolean;
 
   /**
    * Будет вызвано при начале открытия активной модалки с её id
    */
-  onOpen?: (modalId: string) => void;
+  onOpen?: ModalRootCallbackFunction;
 
   /**
    * Будет вызвано при окончательном открытии активной модалки с её id
    */
-  onOpened?: (modalId: string) => void;
+  onOpened?: ModalRootCallbackFunction;
 
   /**
    * Будет вызвано при начале закрытия активной модалки с её id
    */
-  onClose?: (modalId: string) => void;
+  onClose?: ModalRootCallbackFunction;
 
   /**
    * Будет вызвано при окончательном закрытии активной модалки с её id
    */
-  onClosed?: (modalId: string) => void;
+  onClosed?: ModalRootCallbackFunction;
+};
+
+export interface ModalRootProps extends ModalRootBaseProps {
+  children: React.ReactElement | Iterable<React.ReactElement>;
+}
 
+type ModalRootContextBaseInterface = {
   /**
-   * `data-testid` для маски
+   * Обозначает, в контексте ли модального окна мы сейчас.
    */
-  modalOverlayTestId?: string;
+  isInsideModal: boolean;
 
   /**
-   * Отключает фокус на контейнер диалогового окна при открытии.
+   * С **VKUI v7** задача с обновлением высоты контента при `dynamicContentHeight` решается через CSS.
+   *
+   * @deprecated будет удалён в **VKUI v8**
    */
-  noFocusToDialog?: boolean;
-}
+  updateModalHeight: VoidFunction;
 
-export interface ModalRootWithDOMProps extends HasPlatform, ModalRootProps, DOMContextInterface {
   /**
-   * @ignore
+   * С **VKUI v7** регистрация модальных окон больше не требуется.
+   *
+   * @deprecated будет удалён в **VKUI v8**
    */
-  configProvider?: ConfigProviderContextInterface;
-}
+  registerModal: (data: ModalElements & Required<Pick<ModalsStateEntry, 'type' | 'id'>>) => void;
+};
+
+export interface ModalRootContextInterface
+  extends ModalRootContextBaseInterface,
+    ModalRootBaseProps {}
diff --git a/packages/vkui/src/components/ModalRoot/useModalManager.test.tsx b/packages/vkui/src/components/ModalRoot/useModalManager.test.tsx
deleted file mode 100644
index 8c01a61b81..0000000000
--- a/packages/vkui/src/components/ModalRoot/useModalManager.test.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-import * as React from 'react';
-import { act } from 'react';
-import { renderHook } from '@testing-library/react';
-import { noop } from '@vkontakte/vkjs';
-import { modalTransitionReducer, useModalManager } from './useModalManager';
-
-const MockModal = (p: any) => <div {...p} />;
-
-describe(useModalManager, () => {
-  describe('manages multi-phase transition', () => {
-    const modals = [<MockModal id="m1" key="m1" />, <MockModal id="m2" key="m2" />];
-    it('can enter on mount', () => {
-      const handle = renderHook(({ id }) => useModalManager(id, modals), {
-        initialProps: { id: 'm1' },
-      });
-      expect(handle.result.current).toMatchObject({
-        activeModal: 'm1',
-        enteringModal: 'm1',
-        exitingModal: null,
-        delayEnter: false,
-      });
-      act(() => {
-        handle.result.current.onEntered('m1');
-      });
-      expect(handle.result.current).toMatchObject({
-        activeModal: 'm1',
-        enteringModal: null,
-        exitingModal: null,
-      });
-    });
-    it('can enter on update', () => {
-      const handle = renderHook(({ id }) => useModalManager(id, modals), {
-        initialProps: { id: null as string | null },
-      });
-      expect(handle.result.current).toMatchObject({
-        activeModal: null,
-        enteringModal: null,
-        exitingModal: null,
-      });
-      handle.rerender({ id: 'm1' });
-      expect(handle.result.current).toMatchObject({
-        activeModal: 'm1',
-        enteringModal: 'm1',
-        exitingModal: null,
-        delayEnter: false,
-      });
-
-      act(() => {
-        handle.result.current.onEntered('m1');
-      });
-      expect(handle.result.current).toMatchObject({
-        activeModal: 'm1',
-        enteringModal: null,
-        exitingModal: null,
-      });
-    });
-    const flushMount = (initId: string | null = null) => {
-      const handle = renderHook(({ id }) => useModalManager(id, modals), {
-        initialProps: { id: initId },
-      });
-      act(() => {
-        handle.result.current.onEntered(initId);
-      });
-      return handle;
-    };
-    it('can exit', () => {
-      const handle = flushMount('m1');
-      handle.rerender({ id: null });
-      expect(handle.result.current).toMatchObject({
-        activeModal: null,
-        enteringModal: null,
-        exitingModal: 'm1',
-      });
-      act(() => {
-        handle.result.current.onExited('m1');
-      });
-      expect(handle.result.current).toMatchObject({
-        activeModal: null,
-        enteringModal: null,
-        exitingModal: null,
-      });
-    });
-    it.each([
-      ['card', 'card', true],
-      ['page', 'page', false],
-    ] as const)('transitions %s -> %s with delay=%s', (t1, t2, delayEnter) => {
-      const handle = flushMount('m1');
-      handle.result.current.getModalState('m1')!.type = t1;
-      handle.result.current.getModalState('m2')!.type = t2;
-      handle.rerender({ id: 'm2' });
-      expect(handle.result.current).toMatchObject({
-        activeModal: 'm2',
-        enteringModal: 'm2',
-        exitingModal: 'm1',
-        delayEnter,
-      });
-      act(() => {
-        handle.result.current.onExited('m1');
-      });
-      expect(handle.result.current).toMatchObject({
-        activeModal: 'm2',
-        enteringModal: 'm2',
-        exitingModal: null,
-      });
-      act(() => {
-        handle.result.current.onEntered('m2');
-      });
-      expect(handle.result.current).toMatchObject({
-        activeModal: 'm2',
-        enteringModal: null,
-        exitingModal: null,
-      });
-    });
-  });
-
-  describe('maintains transition history', () => {
-    it('initializes with activeModal', () => {
-      const handle = renderHook(() => useModalManager('m1', <MockModal id="m1" />, noop, noop));
-      expect(handle.result.current.history).toEqual(['m1']);
-    });
-    it('initializes empty if activeModal=null', () => {
-      const handle = renderHook(() => useModalManager(null, []));
-      expect(handle.result.current.history).toEqual([]);
-    });
-    it('Handles transition forward', () => {
-      const { history, isBack } = modalTransitionReducer(
-        {
-          history: [],
-        },
-        { type: 'setActive', id: 'm1' },
-      );
-      expect(history).toEqual(['m1']);
-      expect(isBack).toBe(false);
-    });
-    it('Handles transition back', () => {
-      const { history, isBack } = modalTransitionReducer(
-        {
-          history: ['m1', 'm2', 'm3'],
-        },
-        { type: 'setActive', id: 'm2' },
-      );
-      expect(history).toEqual(['m1', 'm2']);
-      expect(isBack).toBe(true);
-    });
-    it('resets on activeModal=null', () => {
-      const { history, isBack } = modalTransitionReducer(
-        {
-          history: ['m1', 'm2', 'm3'],
-        },
-        { type: 'setActive', id: null },
-      );
-      expect(history).toEqual([]);
-      expect(isBack).toBe(false);
-    });
-  });
-
-  describe('ignores missing modal', () => {
-    it('on init', () => {
-      const handle = renderHook(() => useModalManager('m1', []));
-      expect(handle.result.current.activeModal).toEqual(null);
-      expect(handle.result.current.history).toEqual([]);
-    });
-    it('on update', () => {
-      const handle = renderHook(({ id }) => useModalManager(id, []), {
-        initialProps: { id: null as string | null },
-      });
-      handle.rerender({ id: 'm1' });
-      expect(handle.result.current.activeModal).toEqual(null);
-    });
-  });
-
-  it('handles dynamic modals', () => {
-    // const handle = renderHook(({ id = "m1", children = [] }) =>
-    //   useModalManager(id, children, noop)
-    // );
-    // handle.rerender({ children: <MockModal id="m2" /> });
-
-    const handle = renderHook(({ id, children }) => useModalManager(id, children), {
-      initialProps: {
-        id: 'm1' as string | null,
-        children: [] as React.ReactNode | undefined,
-      },
-    });
-    handle.rerender({
-      children: <MockModal id="m2" />,
-      id: 'm1',
-    });
-    expect(handle.result.current.getModalState('m2')).toBeTruthy();
-  });
-
-  describe('open phase', () => {
-    it('calls active modal onOpen', () => {
-      const onOpenOfComponent = jest.fn();
-      const onOpenOfArgument = jest.fn();
-      const handle = renderHook(() =>
-        useModalManager('m1', <MockModal id="m1" onOpen={onOpenOfComponent} />, onOpenOfArgument),
-      );
-      handle.result.current.onEnter();
-      expect(onOpenOfComponent).toHaveBeenCalledTimes(1);
-      expect(onOpenOfArgument).toHaveBeenCalledTimes(0);
-    });
-    it('calls own onOpen if missing in modal props', () => {
-      const onOpen = jest.fn();
-      const handle = renderHook(() => useModalManager('m1', <MockModal id="m1" />, onOpen));
-      handle.result.current.onEnter();
-      expect(onOpen).toHaveBeenCalledTimes(1);
-    });
-    it('calls active modal onOpened', () => {
-      const onOpenedOfComponent = jest.fn();
-      const onOpenedOfArgument = jest.fn();
-      const handle = renderHook(() =>
-        useModalManager(
-          'm1',
-          <MockModal id="m1" onOpened={onOpenedOfComponent} settlingHeight={100} />,
-          noop,
-          onOpenedOfArgument,
-        ),
-      );
-      act(() => {
-        handle.result.current.onEntered('m1');
-      });
-      expect(onOpenedOfComponent).toHaveBeenCalledTimes(1);
-      expect(onOpenedOfArgument).toHaveBeenCalledTimes(0);
-    });
-    it('calls own onOpened if missing in modal props', () => {
-      const onOpened = jest.fn();
-      const handle = renderHook(() => useModalManager('m1', <MockModal id="m1" />, noop, onOpened));
-      act(() => {
-        handle.result.current.onEntered('m1');
-      });
-      expect(onOpened).toHaveBeenCalledTimes(1);
-    });
-
-    it('should show error when activeModal does not exist', () => {
-      process.env.NODE_ENV = 'development';
-      const error = jest.spyOn(console, 'error').mockImplementation(noop);
-      renderHook(() => useModalManager('m2', <MockModal id="m1" />, noop));
-      expect(error).toHaveBeenCalledWith(
-        '%c[VKUI/ModalRoot] Переход невозможен - модальное окно (страница) m2 не существует',
-        undefined,
-      );
-      error.mockClear();
-      process.env.NODE_ENV = 'test';
-    });
-  });
-
-  describe('exit phase', () => {
-    it('calls active modal onClose', () => {
-      const onCloseOfComponent = jest.fn();
-      const onCloseOfArgument = jest.fn();
-      const handle = renderHook(() =>
-        useModalManager(
-          'm1',
-          <MockModal id="m1" onClose={onCloseOfComponent} />,
-          noop,
-          noop,
-          onCloseOfArgument,
-        ),
-      );
-      handle.result.current.onExit();
-      expect(onCloseOfComponent).toHaveBeenCalledTimes(1);
-      expect(onCloseOfArgument).toHaveBeenCalledTimes(0);
-    });
-    it('calls own onClose if missing in modal props', () => {
-      const onClose = jest.fn();
-      const handle = renderHook(() =>
-        useModalManager('m1', <MockModal id="m1" />, noop, noop, onClose),
-      );
-      handle.result.current.onExit();
-      expect(onClose).toHaveBeenCalledTimes(1);
-    });
-    it('calls active modal onClosed', () => {
-      const onClosedOfComponent = jest.fn();
-      const onClosedOfArgument = jest.fn();
-      const handle = renderHook(() =>
-        useModalManager(
-          'm1',
-          <MockModal id="m1" onClosed={onClosedOfComponent} />,
-          noop,
-          noop,
-          noop,
-          onClosedOfArgument,
-        ),
-      );
-      act(() => {
-        handle.result.current.onExited('m1');
-      });
-      expect(onClosedOfComponent).toHaveBeenCalledTimes(1);
-      expect(onClosedOfArgument).toHaveBeenCalledTimes(0);
-    });
-    it('calls own onClosed if missing in modal props', () => {
-      const onClosed = jest.fn();
-      const handle = renderHook(() =>
-        useModalManager('m1', <MockModal id="m1" />, noop, noop, noop, onClosed),
-      );
-      act(() => {
-        handle.result.current.onExited('m1');
-      });
-      expect(onClosed).toHaveBeenCalledTimes(1);
-    });
-  });
-});
diff --git a/packages/vkui/src/components/ModalRoot/useModalManager.tsx b/packages/vkui/src/components/ModalRoot/useModalManager.tsx
index 41c79fcb7c..9bb8a2a076 100644
--- a/packages/vkui/src/components/ModalRoot/useModalManager.tsx
+++ b/packages/vkui/src/components/ModalRoot/useModalManager.tsx
@@ -1,244 +1,86 @@
-'use client';
-
-import * as React from 'react';
-import { isFunction, noop } from '@vkontakte/vkjs';
-import { getNavId } from '../../lib/getNavId';
+import { useContext, useState } from 'react';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { warnOnce } from '../../lib/warnOnce';
-import type { HasChildren } from '../../types';
-import type { ModalsState, ModalsStateEntry } from './types';
-
-interface ModalTransitionState {
-  activeModal?: string | null;
-  enteringModal?: string | null;
-  exitingModal?: string | null;
-  history?: string[];
-  isBack?: boolean | null;
+import type { AnyFunction } from '../../types';
+import { ModalRootContext } from './ModalRootContext';
+import type { ModalRootCallbackFunction } from './types';
+
+export interface UseModalManager {
+  id: string;
+  open: boolean;
+  keepMounted: boolean;
+  modalOverlayTestId?: string;
+  disableAutoFocus?: boolean;
+  onOpen?: AnyFunction;
+  onOpened?: AnyFunction;
+  onClose?: AnyFunction;
+  onClosed?: AnyFunction;
 }
 
-export interface ModalTransitionProps extends ModalTransitionState {
-  onEnter: VoidFunction;
-  onEntered: (id: string | null) => void;
-  onExit: VoidFunction;
-  onExited: (id: string | null) => void;
-  getModalState: (id: string | undefined | null) => ModalsStateEntry | undefined;
-  delayEnter: boolean;
+export interface UseModalManagerResolvedProps {
+  open: boolean;
+  modalOverlayTestId?: string;
+  disableAutoFocus?: boolean;
+  onOpen?: AnyFunction;
+  onOpened?: AnyFunction;
+  onClose?: AnyFunction;
+  onClosed?: AnyFunction;
 }
 
-function getModals(children: React.ReactNode | React.ReactNode[]) {
-  return React.Children.toArray(children) as React.ReactElement[];
-}
-
-const warn = warnOnce('ModalRoot');
-
-export function modalTransitionReducer(
-  state: ModalTransitionState,
-  action: {
-    type: 'setActive' | 'entered' | 'exited' | 'inited';
-    id: string | null;
-  },
-): ModalTransitionState {
-  if (action.type === 'setActive' && action.id !== state.activeModal) {
-    const nextModal = action.id;
-    // preserve exiting modal if switching mid-transition
-    const prevModal = state.exitingModal || state.activeModal;
-    let history = state.history ? [...state.history] : [];
-    const isBack = Boolean(nextModal && history.includes(nextModal));
-
-    if (nextModal === null) {
-      history = [];
-    } else if (isBack) {
-      history = history.splice(0, history.indexOf(nextModal) + 1);
-    } else {
-      history.push(nextModal);
-    }
-
-    return {
-      activeModal: nextModal,
-      // not entering yet
-      enteringModal: null,
-      exitingModal: prevModal,
-      history,
-      isBack,
-    };
-  }
-  if (action.type === 'entered' && action.id === state.enteringModal) {
-    return { ...state, enteringModal: null };
-  }
-  if (action.type === 'exited' && action.id === state.exitingModal) {
-    return { ...state, exitingModal: null };
-  }
-  if (action.type === 'inited' && action.id === state.activeModal) {
-    return { ...state, enteringModal: action.id };
-  }
-  return state;
-}
-
-/**
- * Реализует переход модалок. При смене activeModal m1 -> m2:
- * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода
- * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода
- * одновременный переход между ModalPage:
- *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2
- *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации
- * ИЛИ дожидаемся скрытия ModalCard
- *   3b. activeModal: m2, exitingModal: null, enteringModal: m2
- *   4b. enteringModal переходит в null после завершения анимации
- * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
- */
-export function useModalManager(
-  activeModal: string | null | undefined,
-  children: React.ReactNode | React.ReactNode[],
-  onOpen: (id: string) => void = noop,
-  onOpened: (id: string) => void = noop,
-  onClose: (id: string) => void = noop,
-  onClosed: (id: string) => void = noop,
-  initModal: (state: ModalsStateEntry) => void = noop,
-): ModalTransitionProps {
-  const modalsState = React.useRef<ModalsState>({}).current;
-  getModals(children).forEach((Modal) => {
-    const modalProps = Modal.props;
-    const id = getNavId(modalProps, warn);
-    const state: ModalsStateEntry = (id !== undefined && modalsState[id]) || {
-      id: id ?? null,
-    };
-
-    state.onOpen = Modal.props.onOpen;
-    state.onOpened = Modal.props.onOpened;
-    state.onClose = Modal.props.onClose;
-    state.onClosed = Modal.props.onClosed;
-    state.preventClose = Modal.props.preventClose;
-    // ModalPage props
-    if (typeof modalProps.settlingHeight === 'number') {
-      state.settlingHeight = modalProps.settlingHeight;
-    }
-
-    if (state.id !== null) {
-      modalsState[state.id] = state;
-    }
-  });
-
-  const isMissing = activeModal && !modalsState[activeModal];
-  const safeActiveModal = isMissing ? null : activeModal;
-  const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {
-    activeModal: safeActiveModal,
-    enteringModal: null,
-    exitingModal: null,
-    history: safeActiveModal ? [safeActiveModal] : [],
-    isBack: false,
-  });
-
-  // Map props to state, render activeModal for init
-  useIsomorphicLayoutEffect(() => {
-    // ignore non-existent activeModal
-    if (process.env.NODE_ENV === 'development' && isMissing) {
-      warn(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, 'error');
-    }
-    dispatchTransition({ type: 'setActive', id: safeActiveModal ?? null });
-  }, [activeModal]);
-
-  // Init activeModal & set enteringModal
-  useIsomorphicLayoutEffect(() => {
-    if (transitionState.activeModal) {
-      initModal(modalsState[transitionState.activeModal]);
-      dispatchTransition({ type: 'inited', id: transitionState.activeModal });
-    }
-  }, [transitionState.activeModal]);
-
-  const isCard = (id: string | null | undefined) => id != null && modalsState[id]?.type === 'card';
-  const onEntered = React.useCallback(
-    (id: string | null) => {
-      if (id) {
-        const modalState = modalsState[id];
-
-        if (isFunction(modalState.onOpened)) {
-          modalState.onOpened();
-        } else if (isFunction(onOpened)) {
-          onOpened(id);
-        }
-      }
-
-      dispatchTransition({ type: 'entered', id });
-    },
-    [modalsState, onOpened],
-  );
-  const onExited = React.useCallback(
-    (id: string | null) => {
-      if (id) {
-        const modalState = modalsState[id];
-
-        if (isFunction(modalState.onClosed)) {
-          modalState.onClosed();
-        } else if (isFunction(onClosed)) {
-          onClosed(id);
-        }
+export type UseModalManagerResult =
+  | { unmounted: true }
+  | ({ unmounted: false } & UseModalManagerResolvedProps);
+
+export const useModalManager = ({
+  id,
+  open,
+  keepMounted,
+  modalOverlayTestId,
+  disableAutoFocus,
+  onOpen,
+  onOpened,
+  onClose,
+  onClosed,
+}: UseModalManager): UseModalManagerResult => {
+  const context = useContext(ModalRootContext);
+  const opened = context.isInsideModal ? context.activeModal === id : open;
+
+  const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);
+
+  useIsomorphicLayoutEffect(
+    function unsetUnmounted() {
+      if (!keepMounted && opened) {
+        setUnmounted((prev) => (prev ? false : prev));
       }
-
-      dispatchTransition({ type: 'exited', id });
     },
-    [modalsState, onClosed],
-  );
-  const delayEnter = Boolean(
-    transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)),
-  );
-  const getModalState = React.useCallback(
-    (id: string | undefined | null) => (id ? modalsState[id] : undefined),
-    [modalsState],
+    [opened, keepMounted],
   );
 
-  function onEnter() {
-    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];
-    if (modalState) {
-      if (isFunction(modalState.onOpen)) {
-        modalState.onOpen();
-      } else if (isFunction(onOpen) && modalState.id) {
-        onOpen(modalState.id);
-      }
-    }
-  }
-
-  function onExit() {
-    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];
-    if (modalState && !modalState.preventClose) {
-      if (isFunction(modalState.onClose)) {
-        modalState.onClose();
-      } else if (isFunction(onClose) && modalState.id) {
-        onClose(modalState.id);
-      }
-    }
+  if (unmounted) {
+    return { unmounted: true };
   }
 
   return {
-    onEnter,
-    onEntered,
-    onExit,
-    onExited,
-    ...transitionState,
-    delayEnter,
-    getModalState,
-  };
-}
+    unmounted: false,
+    open: opened,
+    modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,
+    disableAutoFocus: disableAutoFocus || context.noFocusToDialog,
+    onOpen: onOpen || getContextCallback(id, context.onOpen),
+    onOpened: onOpened || getContextCallback(id, context.onOpened),
+    onClose: onClose || getContextCallback(id, context.onClose),
+    onClosed: function handleClosed(...args: any[]) {
+      if (!keepMounted) {
+        setUnmounted(true);
+      }
 
-type WithModalManager<Props extends ModalTransitionProps> = HasChildren &
-  Omit<Props, keyof ModalTransitionProps> & {
-    activeModal?: string | null;
+      if (onClosed) {
+        onClosed(...args);
+      } else {
+        context.onClosed?.(id);
+      }
+    },
   };
+};
 
-export function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {
-  return function <Props extends ModalTransitionProps>(
-    Wrapped: React.ComponentType<Props>,
-  ): React.ComponentType<WithModalManager<Props>> {
-    return function WithModalManager(props) {
-      const transitionManager = useModalManager(
-        props.activeModal,
-        props.children,
-        (props as any).onOpen,
-        (props as any).onOpened,
-        (props as any).onClose,
-        (props as any).onClosed,
-        initModal,
-      );
-      return <Wrapped {...(props as any)} {...transitionManager} />;
-    };
-  };
+function getContextCallback(id: string, fn: ModalRootCallbackFunction | undefined) {
+  return fn ? () => fn(id) : undefined;
 }
diff --git a/packages/vkui/src/components/ModalRoot/useModalRootContext.tsx b/packages/vkui/src/components/ModalRoot/useModalRootContext.tsx
index 9dbbcb505a..e76b6b72f8 100644
--- a/packages/vkui/src/components/ModalRoot/useModalRootContext.tsx
+++ b/packages/vkui/src/components/ModalRoot/useModalRootContext.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';
+import { ModalRootContext } from './ModalRootContext';
+import type { ModalRootContextInterface } from './types';
 
 export const useModalRootContext = (): ModalRootContextInterface =>
   React.useContext(ModalRootContext);
diff --git a/packages/vkui/src/components/ModalRoot/withModalRootContext.tsx b/packages/vkui/src/components/ModalRoot/withModalRootContext.tsx
index 67170443c4..911982a197 100644
--- a/packages/vkui/src/components/ModalRoot/withModalRootContext.tsx
+++ b/packages/vkui/src/components/ModalRoot/withModalRootContext.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import type { ModalRootContextInterface } from './ModalRootContext';
+import type { ModalRootContextInterface } from './types';
 import { useModalRootContext } from './useModalRootContext';
 
 type PickedProps = Pick<ModalRootContextInterface, 'updateModalHeight'>;
diff --git a/packages/vkui/src/components/PanelHeader/PanelHeader.tsx b/packages/vkui/src/components/PanelHeader/PanelHeader.tsx
index a6cd4b3b4f..6f2ae43504 100644
--- a/packages/vkui/src/components/PanelHeader/PanelHeader.tsx
+++ b/packages/vkui/src/components/PanelHeader/PanelHeader.tsx
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useModalContext } from '../../context/ModalContext';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -13,7 +14,6 @@ import type {
 } from '../../types';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { FixedLayout } from '../FixedLayout/FixedLayout';
-import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Separator } from '../Separator/Separator';
@@ -84,7 +84,7 @@ interface PanelHeaderInProps {
 const PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => {
   const { Component = 'span', ...restProps } = typographyProps;
   const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();
-  const { isInsideModal } = React.useContext(ModalRootContext);
+  const isInsideModal = useModalContext().id !== null;
   const platform = usePlatform();
 
   const afterSlotProps =
diff --git a/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx b/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx
index a17021db75..a0fa888356 100644
--- a/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx
+++ b/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx
@@ -16,7 +16,7 @@ import { CellButton } from '../CellButton/CellButton';
 import { Group } from '../Group/Group';
 import { ModalPage } from '../ModalPage/ModalPage';
 import { ModalPageHeader } from '../ModalPageHeader/ModalPageHeader';
-import { ModalRoot } from '../ModalRoot/ModalRootAdaptive';
+import { ModalRoot } from '../ModalRoot/ModalRoot';
 import { Panel } from '../Panel/Panel';
 import { PanelHeader } from '../PanelHeader/PanelHeader';
 import { Placeholder } from '../Placeholder/Placeholder';
diff --git a/packages/vkui/src/context/ModalContext.tsx b/packages/vkui/src/context/ModalContext.tsx
new file mode 100644
index 0000000000..88cff64f28
--- /dev/null
+++ b/packages/vkui/src/context/ModalContext.tsx
@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+/** @private */
+export type ModalContextInterface = string;
+
+/** @private */
+export const ModalContext = createContext<ModalContextInterface | null>(null);
+
+/** @private */
+export type UseModalContextResult =
+  | { id: null; labelId?: undefined }
+  | { id: string; labelId: string };
+
+/** @private */
+export const useModalContext = (): UseModalContextResult => {
+  const id = useContext(ModalContext);
+  return id === null ? { id } : { id, labelId: `${id}-label` };
+};
diff --git a/packages/vkui/src/hooks/useKeyboard.ts b/packages/vkui/src/hooks/useKeyboard.ts
deleted file mode 100644
index 363b6d050f..0000000000
--- a/packages/vkui/src/hooks/useKeyboard.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { useDOM } from '../lib/dom';
-import { useGlobalEventListener } from './useGlobalEventListener';
-
-interface SoftwareKeyboardState {
-  isOpened: boolean;
-}
-
-/**
- Проверяет, закрыла ли клавиатура часть экрана, 24% подошло к большинству устройств
- Работает на iOS и Android, где софт-клавиатура ресайзит viewport в браузерах
- */
-export function getPreciseKeyboardState(window: any): boolean {
-  const {
-    innerHeight,
-    screen: { availHeight },
-  } = window;
-
-  const coveredViewportPercentage = Math.round((1 - innerHeight / availHeight) * 100);
-  return coveredViewportPercentage > 24;
-}
-
-const eventOptions = {
-  passive: true,
-  capture: false,
-};
-
-export function useKeyboard(): SoftwareKeyboardState {
-  const { document } = useDOM();
-
-  const [isOpened, setIsOpened] = React.useState(false);
-
-  const onFocus = React.useCallback(
-    (event: FocusEvent | true) => {
-      const isOpened =
-        (event === true || event.type === 'focusin') &&
-        (document?.activeElement?.tagName === 'INPUT' ||
-          document?.activeElement?.tagName === 'TEXTAREA');
-      setIsOpened(isOpened);
-    },
-    [document?.activeElement?.tagName],
-  );
-
-  /**
-   У полей с autoFocus не отлавливаются события focus, для этого вызываем вручную,
-   чтобы иметь хоть какое-то понимание происходящего.
-   */
-  React.useEffect(() => {
-    onFocus(true);
-  }, [onFocus]);
-
-  useGlobalEventListener(document, 'focusout', onFocus, eventOptions);
-  useGlobalEventListener(document, 'focusin', onFocus, eventOptions);
-
-  return { isOpened };
-}
diff --git a/packages/vkui/src/hooks/useVirtualKeyboardState.ts b/packages/vkui/src/hooks/useVirtualKeyboardState.ts
new file mode 100644
index 0000000000..042ddb8f63
--- /dev/null
+++ b/packages/vkui/src/hooks/useVirtualKeyboardState.ts
@@ -0,0 +1,170 @@
+import { useEffect, useRef, useState } from 'react';
+import { debounce, throttle } from '@vkontakte/vkjs';
+import { clamp } from '../helpers/math';
+import {
+  getVisualViewport,
+  isHTMLContentEditableElement,
+  useDOM,
+  type VisualViewport,
+} from '../lib/dom';
+
+type KeyboardOpened = boolean;
+
+type SafeAreaBottomInset = number;
+
+export type VirtualKeyboardState = [KeyboardOpened, SafeAreaBottomInset];
+
+/**
+ * > см. [Неудобно работать с клавиатурой в ModalPage на iOS #3792](https://github.com/VKCOM/VKUI/discussions/3792)
+ *
+ * Для реализации модальных окон для тач-устройств, мы вынуждены отслеживать открытие виртуальной
+ * клавиатуры. По состоянию `opened` компоненты должны временно блокировать дальнейшее взаимодействие
+ * с ними. Например, отключить закрытие по свайпу, чтобы не мешать пользователю работать с полями
+ * ввода.
+ *
+ * Помимо этого в **Safari** и в **Chrome Android** нам нужно отслеживать прокрутку области видимости
+ * пользователем, т.к. в упомянутых браузерах, виртуальная клавиатура поднимает контент вверх
+ * не изменяя её высоту. Из-за этого появляется возможность прокручивать `window`, что визуально
+ * выглядит плохо. В хуке мы ловим фокус на поле ввода и далее, если это тач-устройство, то
+ * отлавливаем события прокрутки на `window`, чтобы сохранять текущую её позицию через `scrollTo(x, y)`.
+ *
+ * **Troubleshooting**
+ *
+ * - В **Safari** и в **Chrome Android** шапка будет выдвигаться вверх – хаки с выставлением `offsetTop`
+ *   из `VisualViewport` порождают reflow/repaint и прыгания контента.
+ *
+ * **Полезные ссылки**
+ *
+ * - [The Eccentric Ways of iOS Safari with the Keyboard](https://web.archive.org/web/20240920081850/https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d?gi=5411141a13e0)
+ * - [Dealing with the visual viewport](https://web.archive.org/web/20240920082109/https://rdavis.io/articles/dealing-with-the-visual-viewport)
+ * - [How to get the document height in iOS Safari when the on-screen keyboard is open](https://web.archive.org/web/20240920082743/https://martijnhols.nl/gists/how-to-get-document-height-ios-safari-osk)
+ */
+export function useVirtualKeyboardState(enabled = true): VirtualKeyboardState {
+  const { window, document } = useDOM();
+
+  const [focusedEl, setFocusedEl] = useState<Element | null>(null);
+  const [keyboardOpened, setKeyboardOpened] = useState<KeyboardOpened>(false);
+  const [safeAreaBottomInset, setSafeAreaBottomInset] = useState<SafeAreaBottomInset>(0);
+
+  const prevVisualViewportRef = useRef<VisualViewport | null>(null);
+
+  useEffect(
+    function handleFocusedEl() {
+      if (!enabled || !window || !document) {
+        return;
+      }
+
+      const handleFocus = (event: FocusEvent | true) => {
+        const activeElement = event === true ? document.activeElement : (event.target as Element);
+
+        if (isHTMLContentEditableElement(activeElement)) {
+          const patchedEvent = event === true ? { type: 'focusin' } : event;
+          switch (patchedEvent.type) {
+            case 'focusin':
+              prevVisualViewportRef.current = getVisualViewport(window);
+              setFocusedEl(activeElement);
+              break;
+            case 'focusout':
+              prevVisualViewportRef.current = null;
+              setKeyboardOpened(false);
+              setSafeAreaBottomInset(0);
+              setFocusedEl(null);
+              break;
+          }
+        }
+      };
+
+      /**
+       * У полей с autoFocus не отлавливаются события `focus`, для этого вызываем обработчик
+       * вручную, чтобы иметь хоть какое-то понимание происходящего.
+       */
+      handleFocus(true);
+
+      const eventOptions = { passive: true, capture: false };
+      document.addEventListener('focusin', handleFocus, eventOptions);
+      document.addEventListener('focusout', handleFocus, eventOptions);
+
+      return () => {
+        prevVisualViewportRef.current = null;
+        document.removeEventListener('focusin', handleFocus, eventOptions);
+        document.removeEventListener('focusout', handleFocus, eventOptions);
+      };
+    },
+    [enabled, window, document],
+  );
+
+  useEffect(
+    function handleVirtualKeyboardOpened() {
+      if (!focusedEl || !window) {
+        return;
+      }
+
+      let preventFirstSafeAreaBottomInsetCalc = true;
+      const handleResize = debounce(() => {
+        if (prevVisualViewportRef.current === null) {
+          return;
+        }
+
+        const nextVisualViewport = getVisualViewport(window);
+
+        const { offsetTop: prevOffsetTop, height: prevHeight } = prevVisualViewportRef.current;
+        const { offsetTop: nextOffsetTop, height: nextHeight } = nextVisualViewport;
+        if (prevOffsetTop !== nextOffsetTop || prevHeight !== nextHeight) {
+          setKeyboardOpened(true);
+          setSafeAreaBottomInset(
+            preventFirstSafeAreaBottomInsetCalc ? 0 : clamp(prevHeight - nextHeight, 0, 50),
+          );
+          preventFirstSafeAreaBottomInsetCalc = false;
+          prevVisualViewportRef.current = nextVisualViewport;
+
+          requestAnimationFrame(function preserveFocusedElIntoViewSchedule() {
+            if ('scrollIntoViewIfNeeded' in focusedEl) {
+              // @ts-expect-error: TS18046 не стандартный метод https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
+              focusedEl.scrollIntoViewIfNeeded(false);
+            } else {
+              focusedEl.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+            }
+          });
+        }
+      }, 100);
+
+      if (window.visualViewport) {
+        window.visualViewport.addEventListener('resize', handleResize);
+      } else {
+        window.addEventListener('resize', handleResize);
+      }
+
+      return function dispose() {
+        if (window.visualViewport) {
+          window.visualViewport?.removeEventListener('resize', handleResize);
+        } else {
+          window.removeEventListener('resize', handleResize);
+        }
+      };
+    },
+    [focusedEl, window],
+  );
+
+  useEffect(
+    function preventWindowScrollIfKeyboardOpened() {
+      if (!keyboardOpened || !window) {
+        return;
+      }
+
+      const prevent = throttle(() => {
+        if (prevVisualViewportRef.current) {
+          window.scrollTo(0, prevVisualViewportRef.current.offsetTop);
+        }
+      }, 100);
+
+      window.addEventListener('scroll', prevent, { passive: true });
+
+      return function dispose() {
+        window.removeEventListener('scroll', prevent);
+      };
+    },
+    [keyboardOpened, window],
+  );
+
+  return [keyboardOpened, safeAreaBottomInset];
+}
diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts
index 058719e375..bb115848f7 100644
--- a/packages/vkui/src/index.ts
+++ b/packages/vkui/src/index.ts
@@ -140,10 +140,12 @@ export type {
 /**
  * Modals
  */
-export { ModalRoot } from './components/ModalRoot/ModalRootAdaptive';
+export { ModalRoot } from './components/ModalRoot/ModalRoot';
 export type { ModalRootProps } from './components/ModalRoot/types';
 export { withModalRootContext } from './components/ModalRoot/withModalRootContext';
 export { ModalRootContext } from './components/ModalRoot/ModalRootContext';
+export { ModalPageFooter } from './components/ModalPageFooter/ModalPageFooter';
+export { ModalPageContent } from './components/ModalPageContent/ModalPageContent';
 export { ModalPage } from './components/ModalPage/ModalPage';
 export type { ModalPageProps } from './components/ModalPage/ModalPage';
 export { ModalPageHeader } from './components/ModalPageHeader/ModalPageHeader';
diff --git a/packages/vkui/src/lib/dom.tsx b/packages/vkui/src/lib/dom.tsx
index 177dfafb07..89d8043ab5 100644
--- a/packages/vkui/src/lib/dom.tsx
+++ b/packages/vkui/src/lib/dom.tsx
@@ -266,3 +266,52 @@ export const hasSelectionWithRangeType = (node: unknown) => {
   const selection = getWindow(node).getSelection();
   return selection ? selection.type === 'Range' : false;
 };
+
+export const isHTMLContentEditableElement = (
+  el: Element | null,
+): el is HTMLInputElement | HTMLTextAreaElement | HTMLElement => {
+  if (el === null) {
+    return false;
+  }
+
+  if (el.tagName === 'INPUT') {
+    // @ts-expect-error: TS2339 за счёт `tagName` удовлетворяемся, что это `HTMLInputElement`
+    return el.type === 'text' || el.type === 'number' || el.type === 'search';
+  }
+
+  return (
+    el.tagName === 'TEXTAREA' ||
+    // eslint-disable-next-line no-restricted-properties
+    el.closest('[contenteditable=true]') !== null
+  );
+};
+
+export type VisualViewport = {
+  offsetTop: number;
+  offsetLeft: number;
+  width: number;
+  height: number;
+};
+
+/**
+ * Фоллбек `visualViewport` для **Safari 12**.
+ */
+export function getVisualViewport(win: Window): VisualViewport {
+  const result: VisualViewport = { offsetTop: 0, offsetLeft: 0, width: 0, height: 0 };
+  if (win.visualViewport) {
+    const { offsetTop, offsetLeft, width, height } = win.visualViewport;
+    result.offsetTop = Math.round(offsetTop);
+    result.offsetLeft = offsetLeft;
+    result.width = width;
+    result.height = Math.round(height);
+
+    return result;
+  }
+
+  // TODO[Safari@>=13] Удалить фоллбек
+  result.offsetTop = win.pageYOffset;
+  result.offsetLeft = win.pageXOffset;
+  result.width = win.innerWidth; // note: вызывает reflow в отличии от visualViewport
+  result.height = win.innerHeight; // note: вызывает reflow в отличии от visualViewport
+  return result;
+}
diff --git a/packages/vkui/src/storybook/ModalWrapper.tsx b/packages/vkui/src/storybook/ModalWrapper.tsx
index c042bb727a..519280dcbc 100644
--- a/packages/vkui/src/storybook/ModalWrapper.tsx
+++ b/packages/vkui/src/storybook/ModalWrapper.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Button } from '../components/Button/Button';
-import { ModalRoot } from '../components/ModalRoot/ModalRootAdaptive';
+import { ModalRoot } from '../components/ModalRoot/ModalRoot';
 import { Placeholder } from '../components/Placeholder/Placeholder';
 import { SplitCol } from '../components/SplitCol/SplitCol';
 import { SplitLayout } from '../components/SplitLayout/SplitLayout';
@@ -12,7 +12,7 @@ export const ModalWrapper = ({
   modalId,
 }: {
   children: React.ReactElement | Iterable<React.ReactElement>;
-  modalId: string;
+  modalId: string | null;
 }) => {
   const [activeModal, setActiveModal] = React.useState<string | null>(modalId);
 
diff --git a/packages/vkui/src/styles/constants.css b/packages/vkui/src/styles/constants.css
index aa9260edd9..4369090898 100644
--- a/packages/vkui/src/styles/constants.css
+++ b/packages/vkui/src/styles/constants.css
@@ -85,6 +85,9 @@
 
   /* Spacing size */
   --vkui_internal--spacing_size: 0px;
+
+  /** Backdrop props */
+  --vkui_internal--backdrop--opacity: 1;
 }
 
 @supports (padding-top: constant(safe-area-inset-top)) {
diff --git a/styleguide/config.js b/styleguide/config.js
index 03c28919df..61e6bccb74 100644
--- a/styleguide/config.js
+++ b/styleguide/config.js
@@ -202,7 +202,7 @@ const baseConfig = {
         {
           name: 'Modals',
           components: () => [
-            `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/ModalRoot/ModalRootAdaptive.tsx`,
+            `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/ModalRoot/ModalRoot.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/ModalPage/ModalPage.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/ModalPageHeader/ModalPageHeader.tsx`,
             `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/ModalCard/ModalCard.tsx`,