From c382b8f9cd85f0a8482d64adc23ea11a9d326d76 Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Tue, 26 Mar 2024 14:15:09 +0300
Subject: [PATCH] feat: create ModalPageV2

---
 .../src/components/AppRoot/ScrollContext.tsx  |   6 +
 .../CustomScrollView.module.css               |   4 +
 .../components/ModalPage/ModalPageContext.tsx |   4 +-
 .../ModalPageBackdrop.module.css              |  28 +++
 .../ModalPageBackdrop/ModalPageBackdrop.tsx   |  22 ++
 .../ModalPageContent.module.css               |   6 +
 .../ModalPageContent/ModalPageContent.tsx     |  15 ++
 .../ModalPageFooter.module.css                |  14 ++
 .../ModalPageFooter/ModalPageFooter.tsx       |  21 ++
 .../ModalPageHeader.module.css                |   5 +
 .../ModalPageV2/ModalPageV2.module.css        | 150 +++++++++++++
 .../ModalPageV2/ModalPageV2.stories.tsx       | 175 +++++++++++++++
 .../components/ModalPageV2/ModalPageV2.tsx    | 212 ++++++++++++++++++
 .../src/components/ModalPageV2/checklist.md   |  29 +++
 .../vkui/src/components/ModalPageV2/index.ts  |   2 +
 .../vkui/src/components/ModalPageV2/types.ts  |  73 ++++++
 packages/vkui/src/lib/adaptivity/functions.ts |   9 +-
 .../lib/animation/CSSAnimationController.ts   |  12 +
 packages/vkui/src/lib/animation/index.ts      |   8 +-
 .../lib/bottomSheet/BottomSheetController.ts  | 148 ++++++++++++
 .../CSSAnimationBackdropController.ts         |  67 ++++++
 .../CSSAnimationTargetController.ts           |  48 ++++
 .../UIScrollableChildrenObserver.ts           | 101 +++++++++
 packages/vkui/src/lib/bottomSheet/index.ts    |   1 +
 packages/vkui/src/lib/dom.tsx                 |   6 +
 25 files changed, 1162 insertions(+), 4 deletions(-)
 create mode 100644 packages/vkui/src/components/ModalPageBackdrop/ModalPageBackdrop.module.css
 create mode 100644 packages/vkui/src/components/ModalPageBackdrop/ModalPageBackdrop.tsx
 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
 create mode 100644 packages/vkui/src/components/ModalPageV2/ModalPageV2.module.css
 create mode 100644 packages/vkui/src/components/ModalPageV2/ModalPageV2.stories.tsx
 create mode 100644 packages/vkui/src/components/ModalPageV2/ModalPageV2.tsx
 create mode 100644 packages/vkui/src/components/ModalPageV2/checklist.md
 create mode 100644 packages/vkui/src/components/ModalPageV2/index.ts
 create mode 100644 packages/vkui/src/components/ModalPageV2/types.ts
 create mode 100644 packages/vkui/src/lib/animation/CSSAnimationController.ts
 create mode 100644 packages/vkui/src/lib/bottomSheet/BottomSheetController.ts
 create mode 100644 packages/vkui/src/lib/bottomSheet/CSSAnimationBackdropController.ts
 create mode 100644 packages/vkui/src/lib/bottomSheet/CSSAnimationTargetController.ts
 create mode 100644 packages/vkui/src/lib/bottomSheet/UIScrollableChildrenObserver.ts
 create mode 100644 packages/vkui/src/lib/bottomSheet/index.ts

diff --git a/packages/vkui/src/components/AppRoot/ScrollContext.tsx b/packages/vkui/src/components/AppRoot/ScrollContext.tsx
index 3da20f9954..04ecd0839c 100644
--- a/packages/vkui/src/components/AppRoot/ScrollContext.tsx
+++ b/packages/vkui/src/components/AppRoot/ScrollContext.tsx
@@ -11,6 +11,7 @@ const clearDisableScrollStyle = (node: HTMLElement) => {
     top: '',
     left: '',
     right: '',
+    overscrollBehavior: '',
     overflowY: '',
     overflowX: '',
   });
@@ -93,9 +94,12 @@ export const GlobalScrollController = ({ children }: ScrollControllerProps): Rea
       top: `-${scrollY}px`,
       left: `-${scrollX}px`,
       right: '0',
+      overscrollBehavior: 'none',
       overflowY,
       overflowX,
     });
+    // eslint-disable-next-line no-restricted-properties
+    document!.documentElement.classList.add('vkui--disable-overscroll-behavior');
     setScrollLock(true);
   }, [document, window]);
 
@@ -104,6 +108,8 @@ export const GlobalScrollController = ({ children }: ScrollControllerProps): Rea
     const scrollX = document!.body.style.left;
 
     clearDisableScrollStyle(document!.body);
+    // eslint-disable-next-line no-restricted-properties
+    document!.documentElement.classList.remove('vkui--disable-overscroll-behavior');
     window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
     setScrollLock(false);
   }, [document, window]);
diff --git a/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css b/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css
index 6b4412460c..49e6f862a1 100644
--- a/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css
+++ b/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css
@@ -3,6 +3,10 @@
   block-size: 100%;
   overflow: hidden;
   position: relative;
+
+  /* Для срабатывания `height: 100%` у `.CustomScrollView__box`, когда не во всех родителях есть `height: 100%`. */
+  display: flex;
+  flex-direction: column;
 }
 
 .CustomScrollView__box {
diff --git a/packages/vkui/src/components/ModalPage/ModalPageContext.tsx b/packages/vkui/src/components/ModalPage/ModalPageContext.tsx
index 113dcc20a8..34b4f16e23 100644
--- a/packages/vkui/src/components/ModalPage/ModalPageContext.tsx
+++ b/packages/vkui/src/components/ModalPage/ModalPageContext.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { createContext } from 'react';
 
 export interface ModalPageContextInterface {
   labelId?: string;
 }
 
 export const ModalPageContext: React.Context<ModalPageContextInterface> =
-  React.createContext<ModalPageContextInterface>({});
+  createContext<ModalPageContextInterface>({});
diff --git a/packages/vkui/src/components/ModalPageBackdrop/ModalPageBackdrop.module.css b/packages/vkui/src/components/ModalPageBackdrop/ModalPageBackdrop.module.css
new file mode 100644
index 0000000000..23644de52b
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageBackdrop/ModalPageBackdrop.module.css
@@ -0,0 +1,28 @@
+.ModalPageBackdrop {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background-color: rgba(0, 0, 0);
+  opacity: 0.4;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ModalPageBackdrop--visible {
+  animation: modal-page-backdrop-fade-in 0.2s ease-in;
+}
+
+.ModalPageBackdrop--invisible {
+  animation: modal-page-backdrop-fade-out 0.1s ease-out forwards;
+}
+
+@keyframes modal-page-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes modal-page-backdrop-fade-out {
+  to {
+    opacity: 0;
+  }
+}
diff --git a/packages/vkui/src/components/ModalPageBackdrop/ModalPageBackdrop.tsx b/packages/vkui/src/components/ModalPageBackdrop/ModalPageBackdrop.tsx
new file mode 100644
index 0000000000..70f91b3cf0
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageBackdrop/ModalPageBackdrop.tsx
@@ -0,0 +1,22 @@
+import { classNames } from '@vkontakte/vkjs';
+import type { HasRootRef } from '../../types';
+import styles from './ModalPageBackdrop.module.css';
+
+export interface ModalPageBackdropProps extends HasRootRef<HTMLDivElement> {
+  visible: boolean;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+export const ModalPageBackdrop = ({ visible, getRootRef, onClick }: ModalPageBackdropProps) => {
+  return (
+    <div
+      ref={getRootRef}
+      aria-hidden="true"
+      className={classNames(
+        styles['ModalPageBackdrop'],
+        visible ? styles['ModalPageBackdrop--visible'] : styles['ModalPageBackdrop--invisible'],
+      )}
+      onClick={onClick}
+    />
+  );
+};
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..eb91751343
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageContent/ModalPageContent.module.css
@@ -0,0 +1,6 @@
+.ModalPageContent {
+  /* см. `.ModalPageV2__children {}` */
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 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..9bbd296468
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageContent/ModalPageContent.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+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, ...restProps }: ModalPageContentProps) => {
+  return (
+    <CustomScrollView className={classNames(className, styles.ModalPageContent)} {...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..c6885f7518
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.module.css
@@ -0,0 +1,14 @@
+.ModalPageFooter {
+  inline-size: 100%;
+
+  /* см. `.ModalPageV2__children {}` */
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  background-color: var(--vkui--color_background_modal);
+}
+
+.ModalPageFooter__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..3361d95d49
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageFooter/ModalPageFooter.tsx
@@ -0,0 +1,21 @@
+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) => {
+  return (
+    <RootComponent baseClassName={styles.ModalPageFooter} {...restProps}>
+      {!noSeparator && <Separator wide />}
+      <div className={styles.ModalPageFooter__inner}>{children}</div>
+    </RootComponent>
+  );
+};
diff --git a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.module.css b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.module.css
index ebed86c94d..e477ba7b9b 100644
--- a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.module.css
+++ b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.module.css
@@ -1,5 +1,10 @@
 .ModalPageHeader {
   --vkui_internal--safe_area_inset_top: 0;
+
+  /* см. `.ModalPageV2__children {}` */
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
 }
 
 .ModalPageHeader--withGaps {
diff --git a/packages/vkui/src/components/ModalPageV2/ModalPageV2.module.css b/packages/vkui/src/components/ModalPageV2/ModalPageV2.module.css
new file mode 100644
index 0000000000..cf9bec3f28
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageV2/ModalPageV2.module.css
@@ -0,0 +1,150 @@
+.ModalPageV2Root:not([hidden]) {
+  position: fixed;
+  inset: 0;
+  z-index: var(--vkui--z_index_modal);
+  overflow: hidden;
+}
+
+.ModalPageV2 {
+  --vkui_internal_ModalPage--transform-default: none;
+
+  inline-size: 100%;
+  outline: none;
+
+  /* Для ограничения высоты `.ModalPageV2__container`. */
+  display: flex;
+}
+
+.ModalPageV2__container {
+  position: relative;
+  inline-size: 100%;
+
+  /* Для срабатывания `height: 100%` у `.ModalPageV2__children`. */
+  display: flex;
+  flex-direction: column;
+  transform: var(--vkui_internal_ModalPage--transform-default);
+}
+
+.ModalPageV2__children {
+  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);
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+
+  /*
+   * Удерживает высоту в пределах 100% родителя при переполнении контента.
+   *
+   * - см. `.ModalPageHeader {}`
+   * - см. `.ModalPageContent {}`
+   * - см. `.ModalPageFooter {}`
+   */
+  display: flex;
+  flex-shrink: 1;
+  flex-direction: column;
+}
+
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .ModalPageV2 {
+    position: absolute;
+    inset-inline: 0;
+    inset-block: auto var(--vkui_internal--safe_area_inset_bottom);
+    margin-inline: auto;
+    margin-block-start: var(--vkui_internal--safe_area_inset_top);
+    block-size: auto;
+    max-inline-size: var(--vkui--size_popup_small--regular);
+    max-block-size: calc(100% - var(--vkui_internal--safe_area_inset_top));
+  }
+
+  .ModalPageV2--enter {
+    animation: animation-slide-up 0.2s ease-out 0.1s backwards;
+  }
+
+  .ModalPageV2--exit {
+    animation: animation-slide-down 0.1s ease-in forwards;
+  }
+
+  .ModalPageV2__container::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    margin-block-start: -1px; /* убирает зазор под `.ModalPageV2__children`  */
+    inline-size: 100%;
+    block-size: 50%;
+    background-color: var(--vkui--color_background_modal);
+    pointer-events: none;
+    touch-action: none;
+  }
+
+  .Modal__CloseButton {
+    display: none;
+  }
+}
+
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .ModalPageV2Root:not([hidden]) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ModalPageV2 {
+    position: relative;
+    max-block-size: calc(100% - 64px);
+  }
+
+  .ModalPageV2--enter {
+    animation: animation-fade-in 0.2s ease-in 0.1s backwards;
+  }
+
+  .ModalPageV2--exit {
+    animation: animation-fade-out 0.1s ease-out forwards;
+  }
+
+  .ModalPageV2__container {
+    box-shadow: var(--vkui--elevation3);
+  }
+
+  .ModalPageV2__children {
+    border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
+    border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
+  }
+
+  .ModalPageV2--maxWidth-s {
+    max-inline-size: var(--vkui--size_popup_small--regular);
+  }
+
+  .ModalPageV2--maxWidth-m {
+    max-inline-size: var(--vkui--size_popup_medium--regular);
+  }
+
+  .ModalPageV2--maxWidth-l {
+    max-inline-size: var(--vkui--size_popup_large--regular);
+  }
+}
+
+@keyframes animation-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes animation-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes animation-slide-up {
+  from {
+    transform: translateY(100%);
+  }
+}
+@keyframes animation-slide-down {
+  to {
+    transform: translateY(100%);
+  }
+}
diff --git a/packages/vkui/src/components/ModalPageV2/ModalPageV2.stories.tsx b/packages/vkui/src/components/ModalPageV2/ModalPageV2.stories.tsx
new file mode 100644
index 0000000000..08bbfd005f
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageV2/ModalPageV2.stories.tsx
@@ -0,0 +1,175 @@
+import * as React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Icon24Dismiss } from '@vkontakte/icons';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
+import { usePlatform } from '../../hooks/usePlatform';
+import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { cities, getRandomUsers } from '../../testing/mock';
+import { Avatar } from '../Avatar/Avatar';
+import { Button } from '../Button/Button';
+import { CellButton } from '../CellButton/CellButton';
+import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { Div } from '../Div/Div';
+import { FormItem } from '../FormItem/FormItem';
+import { Group } from '../Group/Group';
+import { Header } from '../Header/Header';
+import { HorizontalCell } from '../HorizontalCell/HorizontalCell';
+import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
+import { ModalPageContent } from '../ModalPageContent/ModalPageContent';
+import { ModalPageFooter } from '../ModalPageFooter/ModalPageFooter';
+import { ModalPageHeader } from '../ModalPageHeader/ModalPageHeader';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
+import { PanelHeaderClose } from '../PanelHeaderClose/PanelHeaderClose';
+import { Textarea } from '../Textarea/Textarea';
+import { ModalPageV2 } from './ModalPageV2';
+import type { CloseEventPayload, ModalPageV2Props } from './types';
+
+const story: Meta<ModalPageV2Props> = {
+  title: 'Experimental/ModalPageV2',
+  component: ModalPageV2,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<ModalPageV2Props>;
+
+const AndroidCloseButton = ({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}) => {
+  return <PanelHeaderClose className={className} onClick={onClick} />;
+};
+
+const IosCloseButton = ({ className, onClick }: { className?: string; onClick?: () => void }) => {
+  return (
+    <PanelHeaderButton onClick={onClick} className={className}>
+      <Icon24Dismiss />
+    </PanelHeaderButton>
+  );
+};
+
+export const DynamicModalPage: 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 handleModalClose = (event?: CloseEventPayload) => {
+      // eslint-disable-next-line no-console
+      console.log(event?.reason);
+      setOpen(false);
+    };
+
+    return (
+      <div>
+        <Button onClick={() => setOpen((prev) => !prev)}>Открыть модалку</Button>
+        <ModalPageV2 id="test" open={open} onClose={handleModalClose} settlingHeight={100}>
+          <ModalPageHeader
+            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>
+          <ModalPageContent>
+            <FormItem>
+              <Textarea placeholder="Some text" />
+            </FormItem>
+            <Group header={<Header mode="secondary">Недавние</Header>}>
+              <HorizontalScroll>
+                <div style={{ display: 'flex' }}>
+                  {commonFriends.map((item) => {
+                    return (
+                      <HorizontalCell key={item.id} header={item.first_name}>
+                        <Avatar size={56} src={item.photo_200} />
+                      </HorizontalCell>
+                    );
+                  })}
+                </div>
+              </HorizontalScroll>
+            </Group>
+            <CustomSelect options={cities} forceDropdownPortal={false} />
+            <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>
+            <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
+                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>
+            )}
+          </ModalPageContent>
+          <ModalPageFooter>
+            <Button stretched>Button</Button>
+          </ModalPageFooter>
+        </ModalPageV2>
+      </div>
+    );
+  },
+};
diff --git a/packages/vkui/src/components/ModalPageV2/ModalPageV2.tsx b/packages/vkui/src/components/ModalPageV2/ModalPageV2.tsx
new file mode 100644
index 0000000000..577efc2744
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageV2/ModalPageV2.tsx
@@ -0,0 +1,212 @@
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
+import { useKeyboard } from '../../hooks/useKeyboard';
+import { isSmallTablePlus } from '../../lib/adaptivity';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
+import { BottomSheetController } from '../../lib/bottomSheet';
+import { hasSelectionWithRangeType } from '../../lib/dom';
+import { useScrollLock } from '../AppRoot/ScrollContext';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
+import { ModalPageBackdrop } from '../ModalPageBackdrop/ModalPageBackdrop';
+import type { ModalPageV2Props } from './types';
+import styles from './ModalPageV2.module.css';
+
+const animationStateClassNames = {
+  enter: styles['ModalPageV2--enter'],
+  entering: styles['ModalPageV2--enter'],
+  entered: undefined,
+  exit: styles['ModalPageV2--exit'],
+  exiting: styles['ModalPageV2--exit'],
+  exited: undefined,
+};
+
+const desktopMaxWidthClassName = {
+  s: styles['ModalPageV2--maxWidth-s'],
+  m: styles['ModalPageV2--maxWidth-m'],
+  l: styles['ModalPageV2--maxWidth-l'],
+};
+
+export const ModalPageV2 = ({
+  open,
+  desktopMaxWidth = 's',
+  // height,
+  children,
+  className,
+  disableAutoFocus,
+  disableCloseButton,
+  disableCloseOnEscKey,
+  disableBackdrop,
+  closeButtonTestId,
+  closable: closableProp = true,
+  dynamicContentHeight,
+  settlingHeight = 100,
+  onOpen,
+  onOpened,
+  onClose = noop,
+  onClosed = noop,
+  ...restProps
+}: ModalPageV2Props) => {
+  const { isOpened: disableTouchForTextfieldFocused } = useKeyboard();
+  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
+    open ? 'enter' : 'exit',
+    {
+      onEnter: onOpen,
+      onEntered: onOpened,
+      onExited: onClosed,
+    },
+    !open,
+  );
+  const opened = animationState === 'entered';
+  const hidden = animationState === 'exited';
+  const closable = closableProp && opened;
+  const touchable = !disableTouchForTextfieldFocused && closable;
+
+  const bsController = React.useRef<BottomSheetController | null>(null);
+  const backdropRef = React.useRef<HTMLDivElement>(null);
+  const touchableContainerRef = React.useRef<HTMLDivElement>(null);
+
+  const initialOffset = 100 - settlingHeight;
+  const initialStyle =
+    initialOffset !== 0
+      ? { '--vkui_internal_ModalPage--transform-default': `translateY(${initialOffset}%)` }
+      : null;
+
+  const handleBackdropClick = (event: React.MouseEvent<HTMLElement>) => {
+    onClose(Object.assign({ reason: 'click-backdrop' as const }, event));
+  };
+
+  const backdrop = disableBackdrop ? null : (
+    <ModalPageBackdrop
+      getRootRef={backdropRef}
+      visible={open}
+      onClick={closable ? handleBackdropClick : undefined}
+    />
+  );
+
+  const handleClosesButton = (event: React.MouseEvent<HTMLElement>) => {
+    onClose(Object.assign({ reason: 'click-close-button' as const }, event));
+  };
+
+  const closeButton = disableCloseButton ? null : (
+    <ModalDismissButton
+      className={styles['Modal__CloseButton']}
+      data-testid={closeButtonTestId}
+      onClick={closable ? handleClosesButton : undefined}
+    />
+  );
+
+  const handleEscKeyDown = React.useCallback(
+    (event: KeyboardEvent) => {
+      onClose(Object.assign({ reason: 'escape-key' as const }, event));
+    },
+    [onClose],
+  );
+
+  useGlobalEscKeyDown(!disableCloseOnEscKey && closable, handleEscKeyDown);
+
+  const handleSwipeDown = () => {
+    onClose({ reason: 'swipe-down' });
+  };
+
+  const handleTouchStart = (event: React.TouchEvent<HTMLElement>) => {
+    if (
+      // FIXME надо проверять на desktop иначе, текущий брейкпоинт не учитывает landscape
+      isSmallTablePlus(event.currentTarget) ||
+      hasSelectionWithRangeType(event.currentTarget)
+    ) {
+      return;
+    }
+
+    if (!bsController.current) {
+      bsController.current = new BottomSheetController(
+        touchableContainerRef.current!,
+        backdropRef.current!,
+        handleSwipeDown,
+      );
+    }
+
+    bsController.current.panStart(event.nativeEvent, initialOffset);
+  };
+
+  const handleTouchEnd = () => {
+    if (bsController.current) {
+      bsController.current.panEnd();
+    }
+  };
+
+  React.useEffect(
+    function onTouchMoveWithPassiveIsFalseForPreventScrollIfNeeded() {
+      const touchableContainerEl = touchableContainerRef.current;
+
+      if (!touchable || !touchableContainerEl) {
+        return;
+      }
+
+      const handleTouchMove = function (this: HTMLElement, event: TouchEvent) {
+        if (hasSelectionWithRangeType(this)) {
+          return;
+        }
+
+        if (bsController.current) {
+          bsController.current.panMove(event);
+        }
+      };
+
+      const eventOptions = { capture: false, passive: false };
+      touchableContainerEl.addEventListener('touchmove', handleTouchMove, eventOptions);
+      return function handleUnmount() {
+        touchableContainerEl.removeEventListener('touchmove', handleTouchMove, eventOptions);
+      };
+    },
+    [touchable],
+  );
+
+  React.useEffect(
+    function handleAnimationExitedForDestroyBottomSheetController() {
+      if (hidden && bsController.current) {
+        bsController.current.destroy();
+        bsController.current = null;
+      }
+    },
+    [hidden],
+  );
+
+  useScrollLock(!hidden);
+
+  return (
+    <div className={styles.ModalPageV2Root} hidden={hidden} aria-hidden={hidden}>
+      {backdrop}
+      <FocusTrap
+        {...restProps}
+        {...animationHandlers}
+        tabIndex={-1}
+        autoFocus={disableAutoFocus}
+        role="dialog"
+        aria-modal="true"
+        className={classNames(
+          className,
+          styles.ModalPageV2,
+          typeof desktopMaxWidth === 'string' && desktopMaxWidthClassName[desktopMaxWidth],
+          animationStateClassNames[animationState],
+        )}
+      >
+        <div
+          ref={touchableContainerRef}
+          className={styles.ModalPageV2__container}
+          style={{
+            maxWidth: typeof desktopMaxWidth === 'number' ? desktopMaxWidth : undefined,
+            // height,
+            ...initialStyle,
+          }}
+          onTouchStart={touchable ? handleTouchStart : undefined}
+          onTouchEnd={touchable ? handleTouchEnd : undefined}
+        >
+          <div className={styles.ModalPageV2__children}>{children}</div>
+        </div>
+        {closeButton}
+      </FocusTrap>
+    </div>
+  );
+};
diff --git a/packages/vkui/src/components/ModalPageV2/checklist.md b/packages/vkui/src/components/ModalPageV2/checklist.md
new file mode 100644
index 0000000000..139e595aa6
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageV2/checklist.md
@@ -0,0 +1,29 @@
+## Features
+
+- [ ] открытие до определенного размера, но по умолчанию открывается на доступную высоту контента
+  > референс Apple Maps: на 2/3 экрана ().
+  - ❓заданных точек или размеров экрана? а если недостаточно контента?
+  - ❓есть ли в Android
+- [ ] неполное закрытие
+  > референс Apple Shortcuts
+- [ ] вызов вручную вызывать закрытие (например, кнопка закрытия с иконкой крестик)
+- [x] закрытие на ESC
+  - [x] должна быть возможность **отключить** поведение
+- [x] отключение backdrop, чтобы не блокировался контент
+- [x] возможность самому управлять состоянием закрытия
+  - [x] создать коллбек обработчик
+- [x] стики контента
+  - [x] шапка
+  - [x] подвал
+    - едет вниз вместе
+- [x] закрытие на нажатие на задний фон
+- [x] закрытие при сильном смахивании вниз
+- [x] анимации
+  - [x] bounce (❓есть ли в Android)
+  - [x] rubber: натяжение при перетаскивании (❓есть ли в Android)
+- [x] не блокирует скролл
+  - [x] горизонтальный
+  - [x] вертикальный
+  - ❓iframes
+- [x] не блокирует поле ввода
+- [x] backdrop становится светлее в зависимости от процента сворачивания
diff --git a/packages/vkui/src/components/ModalPageV2/index.ts b/packages/vkui/src/components/ModalPageV2/index.ts
new file mode 100644
index 0000000000..5968bb386c
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageV2/index.ts
@@ -0,0 +1,2 @@
+export { ModalPageV2 } from './ModalPageV2';
+export type { CloseReason, ModalPageV2Props } from './types';
diff --git a/packages/vkui/src/components/ModalPageV2/types.ts b/packages/vkui/src/components/ModalPageV2/types.ts
new file mode 100644
index 0000000000..bcf133cf50
--- /dev/null
+++ b/packages/vkui/src/components/ModalPageV2/types.ts
@@ -0,0 +1,73 @@
+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'> }
+  | (KeyboardEvent & { reason: Extract<CloseReason, 'escape-key'> });
+
+export interface ModalPageV2Props extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  open: boolean;
+  /**
+   * Задаёт контенту максимальную ширину на десктопе.
+   */
+  desktopMaxWidth?: 's' | 'm' | 'l' | number;
+  /**
+   * Задаёт модальному окну фиксированную высоту.
+   * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах "50%".
+   * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.
+   */
+  // height?: string | number;
+  /**
+   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.
+   */
+  settlingHeight?: number;
+  /**
+   * Если высота контента в модальной странице может поменяться, нужно установить это свойство
+   */
+  dynamicContentHeight?: boolean;
+  /**
+   * Отключает фокус на интерактивный элемент после открытия модалки.
+   */
+  disableAutoFocus?: boolean;
+  /**
+   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)
+   */
+  disableCloseButton?: boolean;
+  /**
+   * Отключает закрытие нажатием на кнопку ESC.
+   */
+  disableCloseOnEscKey?: boolean;
+  /**
+   * Скрывает задний фон, чтобы элементы за модальным окном были доступны.
+   */
+  disableBackdrop?: boolean;
+  /**
+   * `data-testid` для кнопки закрытия
+   */
+  closeButtonTestId?: string;
+  /**
+   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)
+   *
+   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте
+   */
+  closable?: boolean;
+  /**
+   * Будет вызвано при начале открытия модалки.
+   */
+  onOpen?: VoidFunction;
+  /**
+   * Будет вызвано при окончательном открытии модалки.
+   */
+  onOpened?: VoidFunction;
+  /**
+   * Будет вызвано при начале закрытия модалки.
+   */
+  onClose?: (payload: CloseEventPayload) => void;
+  /**
+   * Будет вызвано при окончательном закрытии модалки.
+   */
+  onClosed?: () => void;
+}
diff --git a/packages/vkui/src/lib/adaptivity/functions.ts b/packages/vkui/src/lib/adaptivity/functions.ts
index 866a376e64..3e77e19d25 100644
--- a/packages/vkui/src/lib/adaptivity/functions.ts
+++ b/packages/vkui/src/lib/adaptivity/functions.ts
@@ -1,6 +1,7 @@
 import type { Exact } from '../../types';
+import { getWindow } from '../dom';
 import { type PlatformType } from '../platform';
-import { BREAKPOINTS } from './breakpoints';
+import { BREAKPOINTS, MEDIA_QUERIES } from './breakpoints';
 import {
   SizeTypeValues,
   VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP,
@@ -138,6 +139,12 @@ export function tryToCheckIsDesktop(
   return (widthIsLikeDesktop && otherParametersIsLikeDesktop) || IS_VKCOM_CRUTCH;
 }
 
+export function isSmallTablePlus(el: HTMLElement) {
+  const win = getWindow(el);
+  // eslint-disable-next-line no-restricted-properties
+  return win ? win.matchMedia(MEDIA_QUERIES.SMALL_TABLET_PLUS).matches : false;
+}
+
 /**
  * Конвертирует `viewWidth` в CSS брейкпоинты (см. тесты для наглядности).
  *
diff --git a/packages/vkui/src/lib/animation/CSSAnimationController.ts b/packages/vkui/src/lib/animation/CSSAnimationController.ts
new file mode 100644
index 0000000000..828bb3e868
--- /dev/null
+++ b/packages/vkui/src/lib/animation/CSSAnimationController.ts
@@ -0,0 +1,12 @@
+export abstract class CSSAnimationController {
+  inlineStylesModified = false;
+  waitingTransitionEnd = false;
+
+  constructor(public readonly el: HTMLElement) {}
+
+  abstract setInlineStyles(v: number): this;
+
+  abstract unsetInlineStyles(): this;
+
+  abstract unsetInlineStylesWithTransition(): this;
+}
diff --git a/packages/vkui/src/lib/animation/index.ts b/packages/vkui/src/lib/animation/index.ts
index 0f734ae631..f8874b4bf9 100644
--- a/packages/vkui/src/lib/animation/index.ts
+++ b/packages/vkui/src/lib/animation/index.ts
@@ -1,5 +1,11 @@
-export { useCSSKeyframesAnimationController } from './useCSSKeyframesAnimationController';
+export {
+  type AnimationState,
+  type AnimationHandlers,
+  type UseCSSAnimationControllerCallback,
+  useCSSKeyframesAnimationController,
+} from './useCSSKeyframesAnimationController';
 export { REDUCE_MOTION_MEDIA_QUERY, useReducedMotion } from './useReducedMotion';
 export { rubberbandIfOutOfBounds } from './rubberbandIfOutOfBounds';
 export { animationFadeClassNames } from './fades';
 export { transformOriginClassNames } from './transformOrigin';
+export { CSSAnimationController } from './CSSAnimationController';
diff --git a/packages/vkui/src/lib/bottomSheet/BottomSheetController.ts b/packages/vkui/src/lib/bottomSheet/BottomSheetController.ts
new file mode 100644
index 0000000000..1ff230badc
--- /dev/null
+++ b/packages/vkui/src/lib/bottomSheet/BottomSheetController.ts
@@ -0,0 +1,148 @@
+import { rubberbandIfOutOfBounds } from '../animation';
+import { UIPanGestureRecognizer, type VCoords } from '../touch/UIPanGestureRecognizer';
+import { CSSAnimationBackdropController } from './CSSAnimationBackdropController';
+import { CSSAnimationTargetController } from './CSSAnimationTargetController';
+import { UIScrollableChildrenObserver } from './UIScrollableChildrenObserver';
+
+const MINIMUM_DISTANCE_FOR_MOVING_START = 10;
+const MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 1300;
+
+export class BottomSheetController {
+  private readonly panGestureRecognizer: UIPanGestureRecognizer;
+  private readonly animationTargetController: CSSAnimationTargetController;
+  private readonly animationBackdropController: CSSAnimationBackdropController;
+  private readonly scrollableChildrenObserver: UIScrollableChildrenObserver;
+  private readonly lowerBound = 75;
+
+  private isPanStarted = false;
+  // private expanded = false;
+
+  private targetHeight = 0;
+  private currentShiftY = 0;
+  private nextShiftY = 0;
+
+  constructor(
+    private readonly targetEl: HTMLElement,
+    backdropEl: HTMLElement,
+    private readonly onClose: () => void,
+  ) {
+    this.panGestureRecognizer = new UIPanGestureRecognizer();
+    this.scrollableChildrenObserver = new UIScrollableChildrenObserver();
+    this.animationTargetController = new CSSAnimationTargetController(targetEl);
+    this.animationBackdropController = new CSSAnimationBackdropController(backdropEl);
+  }
+
+  panStart(event: TouchEvent, currentShiftY: number) {
+    this.currentShiftY = currentShiftY;
+    this.targetHeight = this.targetEl.offsetHeight;
+    this.panGestureRecognizer.setStartCoords(event);
+    this.scrollableChildrenObserver.observe(
+      this.targetEl,
+      // @ts-expect-error: TS2345 Argument of type 'EventTarget' is not assignable to parameter of type 'HTMLElement'
+      event.target,
+    );
+    this.isPanStarted = true;
+  }
+
+  panMove(event: TouchEvent) {
+    if (!this.isPanStarted) {
+      return;
+    }
+
+    this.panGestureRecognizer.setInitialTimeOnce();
+    this.panGestureRecognizer.setEndCoords(event);
+
+    const scheduleCallingShouldStartMovingFn = () => {
+      const velocity = this.panGestureRecognizer.velocity();
+      const panDirection = this.getPanDirection(velocity);
+
+      if (this.shouldStartMoving(panDirection)) {
+        if (panDirection === 'down') {
+          this.scrollableChildrenObserver.preventYScrollBounceOnTop(event);
+        }
+
+        const { y1, y2 } = this.panGestureRecognizer;
+        const offsetPercent = y2 - y1;
+        this.nextShiftY = (offsetPercent / this.targetHeight) * 100;
+        this.nextShiftY += this.currentShiftY;
+        this.nextShiftY = rubberbandIfOutOfBounds(this.nextShiftY, 0, 100);
+
+        this.animationBackdropController.setInlineStyles(this.nextShiftY);
+        this.animationTargetController.setInlineStyles(this.nextShiftY);
+      }
+    };
+
+    requestAnimationFrame(scheduleCallingShouldStartMovingFn);
+  }
+
+  panEnd() {
+    const nextShiftY = this.nextShiftY;
+
+    if (nextShiftY > this.lowerBound || this.isPanGestureForClose()) {
+      this.onClose();
+    } else {
+      requestAnimationFrame(() => {
+        this.animationBackdropController.unsetInlineStylesWithTransition();
+        this.animationTargetController
+          .setInitialValue(this.currentShiftY)
+          .unsetInlineStylesWithTransition();
+      });
+    }
+
+    this.isPanStarted = false;
+    this.nextShiftY = 0;
+    this.panGestureRecognizer.reset();
+    this.scrollableChildrenObserver.disconnect();
+  }
+
+  destroy() {
+    this.animationBackdropController.unsetInlineStyles();
+    this.animationTargetController.unsetInlineStyles();
+    this.panGestureRecognizer.reset();
+    this.scrollableChildrenObserver.disconnect();
+  }
+
+  private shouldStartMoving(panDirection?: 'up' | 'down') {
+    const hasExpectedPanGestureDistance =
+      this.panGestureRecognizer.distance() > MINIMUM_DISTANCE_FOR_MOVING_START;
+
+    if (!hasExpectedPanGestureDistance || this.scrollableChildrenObserver.isScrolling) {
+      return false;
+    }
+
+    switch (panDirection) {
+      case 'up':
+        if (this.scrollableChildrenObserver.hasYScroll) {
+          return this.currentShiftY !== 0;
+        }
+
+        return true;
+      case 'down':
+        return !this.scrollableChildrenObserver.isYScrolled;
+      default:
+        return true;
+    }
+  }
+
+  private getPanDirection(velocity: VCoords) {
+    if (Math.abs(velocity.y) > Math.abs(velocity.x)) {
+      if (velocity.y > 0) {
+        return 'down';
+      } else if (velocity.y < 0) {
+        return 'up';
+      }
+    }
+
+    return;
+  }
+
+  private isPanGestureForClose() {
+    const velocity = this.panGestureRecognizer.velocity();
+
+    if (this.getPanDirection(velocity) !== 'down' || this.scrollableChildrenObserver.isScrolling) {
+      return false;
+    }
+
+    return velocity.y >= MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
+  }
+}
diff --git a/packages/vkui/src/lib/bottomSheet/CSSAnimationBackdropController.ts b/packages/vkui/src/lib/bottomSheet/CSSAnimationBackdropController.ts
new file mode 100644
index 0000000000..a27c63edc8
--- /dev/null
+++ b/packages/vkui/src/lib/bottomSheet/CSSAnimationBackdropController.ts
@@ -0,0 +1,67 @@
+import { CSSAnimationController } from '../animation';
+
+export class CSSAnimationBackdropController extends CSSAnimationController {
+  private readonly initialValue: number;
+
+  constructor(
+    public readonly el: HTMLElement,
+    private readonly opacityCSSPropertyKey = 'opacity',
+  ) {
+    super(el);
+
+    const initialValueRaw = getComputedStyle(el).getPropertyValue(opacityCSSPropertyKey);
+
+    if (initialValueRaw === '') {
+      throw Error(`${opacityCSSPropertyKey} not exists`);
+    }
+
+    this.initialValue = Number(initialValueRaw);
+  }
+
+  /**
+   * @param value 0 - 100
+   */
+  setInlineStyles(value: number) {
+    if (value < 0 || value > 100) {
+      return this;
+    }
+
+    this.clearTransition();
+    const nextValue = this.initialValue - this.initialValue * (value / 100);
+    this.el.style.setProperty(this.opacityCSSPropertyKey, `${nextValue}`);
+    this.inlineStylesModified = true;
+
+    return this;
+  }
+
+  unsetInlineStyles = () => {
+    this.clearTransition();
+    this.el.style.removeProperty(this.opacityCSSPropertyKey);
+    this.inlineStylesModified = false;
+    return this;
+  };
+
+  unsetInlineStylesWithTransition() {
+    if (this.inlineStylesModified) {
+      this.clearTransition();
+      this.setTransition();
+      this.el.style.setProperty(this.opacityCSSPropertyKey, String(this.initialValue));
+    }
+    return this;
+  }
+
+  private setTransition() {
+    this.el.addEventListener('transitionend', this.unsetInlineStyles, { once: true });
+    this.el.style.setProperty('transition', 'opacity 300ms ease-in-out');
+    this.waitingTransitionEnd = true;
+  }
+
+  private clearTransition() {
+    if (this.waitingTransitionEnd) {
+      this.el.removeEventListener('transitionend', this.unsetInlineStyles);
+      this.el.style.removeProperty('transition');
+      this.waitingTransitionEnd = false;
+    }
+    return this;
+  }
+}
diff --git a/packages/vkui/src/lib/bottomSheet/CSSAnimationTargetController.ts b/packages/vkui/src/lib/bottomSheet/CSSAnimationTargetController.ts
new file mode 100644
index 0000000000..679de07eb2
--- /dev/null
+++ b/packages/vkui/src/lib/bottomSheet/CSSAnimationTargetController.ts
@@ -0,0 +1,48 @@
+import { CSSAnimationController } from '../animation';
+
+export class CSSAnimationTargetController extends CSSAnimationController {
+  private initialValue = 0;
+
+  constructor(public readonly el: HTMLElement) {
+    super(el);
+  }
+
+  setInitialValue(value: number) {
+    this.initialValue = value;
+    return this;
+  }
+
+  setInlineStyles(value: number) {
+    this.clearTransition();
+    this.el.style.setProperty('transform', `translateY(${value}%)`);
+    return this;
+  }
+
+  unsetInlineStyles = () => {
+    this.clearTransition();
+    this.el.style.removeProperty('transform');
+    return this;
+  };
+
+  unsetInlineStylesWithTransition() {
+    this.clearTransition();
+    this.setTransition();
+    this.el.style.setProperty('transform', `translateY(${this.initialValue}%)`);
+    return this;
+  }
+
+  private setTransition() {
+    this.el.addEventListener('transitionend', this.unsetInlineStyles, { once: true });
+    this.el.style.setProperty('transition', 'transform 300ms ease-in-out');
+    this.waitingTransitionEnd = true;
+  }
+
+  private clearTransition() {
+    if (this.waitingTransitionEnd) {
+      this.el.removeEventListener('transitionend', this.unsetInlineStyles);
+      this.el.style.removeProperty('transition');
+      this.waitingTransitionEnd = false;
+    }
+    return this;
+  }
+}
diff --git a/packages/vkui/src/lib/bottomSheet/UIScrollableChildrenObserver.ts b/packages/vkui/src/lib/bottomSheet/UIScrollableChildrenObserver.ts
new file mode 100644
index 0000000000..aa0a0809d3
--- /dev/null
+++ b/packages/vkui/src/lib/bottomSheet/UIScrollableChildrenObserver.ts
@@ -0,0 +1,101 @@
+import { getParentNode, isHTMLElement } from '../dom';
+
+export class UIScrollableChildrenObserver {
+  private static readonly EVENT_OPTIONS = { capture: true, passive: true };
+
+  /**
+   * Функция из `@floating/utils/dom` не подходит, т.к. ей удовлетворяет любой заданный `overflow`.
+   *
+   * @see https://github.com/floating-ui/floating-ui/blob/%40floating-ui/dom%401.6.3/packages/utils/src/dom.ts#L52
+   */
+  private static isOverflowElement(element: Element): boolean {
+    const { overflow, overflowX, overflowY, display } = getComputedStyle(element);
+    return (
+      /auto|scroll/.test(overflow + overflowY + overflowX) &&
+      !['inline', 'contents'].includes(display)
+    );
+  }
+
+  private static getNearestOverflowAncestor(rootNode: Node, targetNode: Node): HTMLElement | null {
+    const parentNode = getParentNode(targetNode);
+
+    if (rootNode === parentNode) {
+      return null;
+    }
+
+    if (isHTMLElement(parentNode) && UIScrollableChildrenObserver.isOverflowElement(parentNode)) {
+      return parentNode;
+    }
+
+    return UIScrollableChildrenObserver.getNearestOverflowAncestor(rootNode, parentNode);
+  }
+
+  private static getAvailableOverflow(overflowAncestor: HTMLElement) {
+    const { clientWidth, scrollWidth, clientHeight, scrollHeight } = overflowAncestor;
+
+    return {
+      x: clientWidth < scrollWidth,
+      y: clientHeight < scrollHeight,
+    };
+  }
+
+  get isScrollable() {
+    return this.scrollableEl !== null;
+  }
+
+  get hasYScroll() {
+    return this.availableOverflow.y;
+  }
+
+  get isYScrolled() {
+    return this.scrollableEl ? this.scrollableEl.scrollTop > 0 : false;
+  }
+
+  isScrolling = false;
+
+  private readonly handleScroll = () => {
+    this.isScrolling = true;
+  };
+  private scrollableEl: HTMLElement | null = null;
+  private readonly availableOverflow = { x: false, y: false };
+
+  observe(rootEl: HTMLElement, targetEl: HTMLElement) {
+    const overflowAncestor = UIScrollableChildrenObserver.getNearestOverflowAncestor(
+      rootEl,
+      targetEl,
+    );
+
+    if (overflowAncestor) {
+      const { x, y } = UIScrollableChildrenObserver.getAvailableOverflow(overflowAncestor);
+      this.availableOverflow.x = x;
+      this.availableOverflow.y = y;
+      this.scrollableEl = overflowAncestor;
+      this.scrollableEl.addEventListener(
+        'scroll',
+        this.handleScroll,
+        UIScrollableChildrenObserver.EVENT_OPTIONS,
+      );
+    }
+  }
+
+  disconnect() {
+    this.isScrolling = false;
+    this.availableOverflow.x = false;
+    this.availableOverflow.y = false;
+
+    if (this.scrollableEl) {
+      this.scrollableEl.removeEventListener(
+        'scroll',
+        this.handleScroll,
+        UIScrollableChildrenObserver.EVENT_OPTIONS,
+      );
+      this.scrollableEl = null;
+    }
+  }
+
+  preventYScrollBounceOnTop(event: Event) {
+    if (this.isScrollable && this.hasYScroll && !this.isYScrolled) {
+      event.preventDefault();
+    }
+  }
+}
diff --git a/packages/vkui/src/lib/bottomSheet/index.ts b/packages/vkui/src/lib/bottomSheet/index.ts
new file mode 100644
index 0000000000..6ddc9477c9
--- /dev/null
+++ b/packages/vkui/src/lib/bottomSheet/index.ts
@@ -0,0 +1 @@
+export { BottomSheetController } from './BottomSheetController';
diff --git a/packages/vkui/src/lib/dom.tsx b/packages/vkui/src/lib/dom.tsx
index c73227f679..c778fcda9d 100644
--- a/packages/vkui/src/lib/dom.tsx
+++ b/packages/vkui/src/lib/dom.tsx
@@ -13,6 +13,7 @@ export {
   getNodeScroll,
   isHTMLElement,
   isElement,
+  getParentNode,
 } from '@vkontakte/vkui-floating-ui/utils/dom';
 
 export { canUseDOM, canUseEventListeners, onDOMLoaded } from '@vkontakte/vkjs';
@@ -258,3 +259,8 @@ export const initializeBrowserGesturePreventionEffect = (window: Window): VoidFu
     window.removeEventListener('touchmove', handleWindowTouchMove, options);
   };
 };
+
+export const hasSelectionWithRangeType = (targetEl: HTMLElement) => {
+  const selection = getWindow(targetEl).getSelection();
+  return selection ? selection.type === 'Range' : false;
+};