From ad9680a27c5c123379cdce33793a2964c77da842 Mon Sep 17 00:00:00 2001
From: leutinatasya <leutinatasya@yandex-team.ru>
Date: Fri, 3 May 2024 18:05:22 +0300
Subject: [PATCH 1/3] fix(Sheet): resize sheet if image in content is loaded

---
 src/components/Sheet/SheetContent.tsx         | 17 +++--
 .../DefaultShowcase.stories.tsx               |  6 +-
 .../MultipleSheets.scss                       | 15 +++++
 .../MultipleSheets.stories.tsx                | 67 +++++++++++++++++++
 .../Sheet/__stories__/Sheet.stories.tsx       | 11 ---
 5 files changed, 99 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.scss
 create mode 100644 src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.stories.tsx

diff --git a/src/components/Sheet/SheetContent.tsx b/src/components/Sheet/SheetContent.tsx
index ec98f6ca5f..b565b4a1b8 100644
--- a/src/components/Sheet/SheetContent.tsx
+++ b/src/components/Sheet/SheetContent.tsx
@@ -71,7 +71,7 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     sheetInnerContentRef = React.createRef<HTMLDivElement>();
     sheetTitleRef = React.createRef<HTMLDivElement>();
     velocityTracker = new VelocityTracker();
-    observer: MutationObserver | null = null;
+    observer: ResizeObserver | null = null;
 
     state: SheetContentState = {
         startScrollTop: 0,
@@ -408,6 +408,10 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
 
         const sheetHeight = this.sheetTitleHeight + this.innerContentHeight + this.sheetTopHeight;
 
+        if (sheetHeight === this.state.prevSheetHeight && !this.state.inWindowResizeScope) {
+            return;
+        }
+
         const availableViewportHeight =
             window.innerHeight * MAX_CONTENT_HEIGHT_FROM_VIEWPORT_COEFFICIENT;
 
@@ -427,10 +431,13 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     private addListeners() {
         window.addEventListener('resize', this.onResizeWindow);
 
-        if (this.sheetRef.current) {
-            const config = {subtree: true, childList: true};
-            this.observer = new MutationObserver(this.onResize);
-            this.observer.observe(this.sheetRef.current, config);
+        if (this.sheetContentRef.current) {
+            this.observer = new ResizeObserver(() => {
+                if (!this.state.inWindowResizeScope) {
+                    this.onResize();
+                }
+            });
+            this.observer.observe(this.sheetContentRef.current);
         }
     }
 
diff --git a/src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.stories.tsx b/src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.stories.tsx
index 29ff9f71a9..cdd4bb1769 100644
--- a/src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.stories.tsx
+++ b/src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.stories.tsx
@@ -32,7 +32,10 @@ export default {
     component: Sheet,
 } as Meta;
 
-export const Showcase: StoryFn<SheetProps> = (args: SheetProps) => {
+export const Default: StoryFn<SheetProps> = ({
+    allowHideOnContentScroll = false,
+    ...args
+}: SheetProps) => {
     const [visible, setVisible] = React.useState(false);
     const [withExtraOuterContent, setWithExtraOuterContent] = React.useState(false);
     const [withExtraInnerContent, setWithExtraInnerContent] = React.useState(false);
@@ -64,6 +67,7 @@ export const Showcase: StoryFn<SheetProps> = (args: SheetProps) => {
             )}
             <Sheet
                 {...args}
+                allowHideOnContentScroll={allowHideOnContentScroll}
                 visible={visible}
                 onClose={() => setVisible(false)}
                 title={withTitle ? 'Sheet title' : undefined}
diff --git a/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.scss b/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.scss
new file mode 100644
index 0000000000..ac6ba33abf
--- /dev/null
+++ b/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.scss
@@ -0,0 +1,15 @@
+.sheet-stories-with-image-showcase {
+    display: flex;
+    justify-content: center;
+
+    &__show-btn {
+        margin: 20px 0;
+    }
+
+    img {
+        object-fit: contain;
+        border: none;
+        max-width: 100%;
+        vertical-align: middle;
+    }
+}
diff --git a/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.stories.tsx b/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.stories.tsx
new file mode 100644
index 0000000000..276ece349c
--- /dev/null
+++ b/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.stories.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Button} from '../../..';
+import {cn} from '../../../utils/cn';
+import {Sheet} from '../../Sheet';
+import type {SheetProps} from '../../Sheet';
+
+import './MultipleSheets.scss';
+
+const b = cn('sheet-stories-with-image-showcase');
+
+export default {
+    title: 'Components/Overlays/Sheet',
+    component: Sheet,
+} as Meta;
+
+export const MultipleSheets: StoryFn<SheetProps> = (args: SheetProps) => {
+    const [visible, setVisible] = React.useState(false);
+    const [moreContentVisible, setMoreContentVisible] = React.useState(false);
+
+    return (
+        <div className={b()}>
+            <Button className={b('show-btn')} onClick={() => setVisible(true)}>
+                Show modal
+            </Button>
+            <Sheet {...args} visible={visible} id="main" onClose={() => setVisible(false)}>
+                <img
+                    src="https://avatars.githubusercontent.com/u/107542106"
+                    width="100%"
+                    alt="example"
+                />
+                <Button
+                    size="xl"
+                    width="max"
+                    className={b('show-btn')}
+                    onClick={() => setMoreContentVisible(true)}
+                >
+                    Show one more modal
+                </Button>
+            </Sheet>
+            <Sheet
+                {...args}
+                id="more-content"
+                visible={moreContentVisible}
+                onClose={() => setMoreContentVisible(false)}
+            >
+                <div className={b('text')}>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam consequatur
+                    quasi quo temporibus. Optio tenetur, aliquam ratione natus asperiores
+                    necessitatibus? Cumque nulla nesciunt esse minus cum nam rerum illum dicta.
+                </div>
+                <div>
+                    <Button
+                        size="xl"
+                        width="max"
+                        className={b('show-btn')}
+                        onClick={() => setMoreContentVisible(false)}
+                    >
+                        Close
+                    </Button>
+                </div>
+            </Sheet>
+        </div>
+    );
+};
diff --git a/src/components/Sheet/__stories__/Sheet.stories.tsx b/src/components/Sheet/__stories__/Sheet.stories.tsx
index 29fe94b49e..4b5d79840a 100644
--- a/src/components/Sheet/__stories__/Sheet.stories.tsx
+++ b/src/components/Sheet/__stories__/Sheet.stories.tsx
@@ -2,18 +2,7 @@ import type {Meta} from '@storybook/react';
 
 import {Sheet} from '../Sheet';
 
-import {Showcase} from './DefaultShowcase/DefaultShowcase.stories';
-import {WithMenuShowcase} from './WithMenuShowcase/WithMenuShowcase.stories';
-
 export default {
     title: 'Components/Overlays/Sheet',
     component: Sheet,
 } as Meta;
-
-export const Default = Showcase.bind({});
-
-Default.args = {
-    allowHideOnContentScroll: false,
-};
-
-export const WithMenu = WithMenuShowcase.bind({});

From a28dedc848feb7f9ec6fc51a218edc81b613ffbc Mon Sep 17 00:00:00 2001
From: leutinatasya <leutinatasya@yandex-team.ru>
Date: Mon, 6 May 2024 10:30:43 +0300
Subject: [PATCH 2/3] fix: css class name

---
 .../__stories__/MultipleSheetsShowcase/MultipleSheets.scss      | 2 +-
 .../MultipleSheetsShowcase/MultipleSheets.stories.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.scss b/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.scss
index ac6ba33abf..d31ae63709 100644
--- a/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.scss
+++ b/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.scss
@@ -1,4 +1,4 @@
-.sheet-stories-with-image-showcase {
+.sheet-stories-with-multiple-sheets {
     display: flex;
     justify-content: center;
 
diff --git a/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.stories.tsx b/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.stories.tsx
index 276ece349c..085efe501f 100644
--- a/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.stories.tsx
+++ b/src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.stories.tsx
@@ -9,7 +9,7 @@ import type {SheetProps} from '../../Sheet';
 
 import './MultipleSheets.scss';
 
-const b = cn('sheet-stories-with-image-showcase');
+const b = cn('sheet-stories-with-multiple-sheets');
 
 export default {
     title: 'Components/Overlays/Sheet',

From 989f6dc2a40d0f90db4265e4f4846b53a40aee2b Mon Sep 17 00:00:00 2001
From: leutinatasya <leutinatasya@yandex-team.ru>
Date: Mon, 6 May 2024 12:41:02 +0300
Subject: [PATCH 3/3] fix: observer target

---
 src/components/Sheet/SheetContent.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Sheet/SheetContent.tsx b/src/components/Sheet/SheetContent.tsx
index b565b4a1b8..d4241e3ee0 100644
--- a/src/components/Sheet/SheetContent.tsx
+++ b/src/components/Sheet/SheetContent.tsx
@@ -431,13 +431,13 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     private addListeners() {
         window.addEventListener('resize', this.onResizeWindow);
 
-        if (this.sheetContentRef.current) {
+        if (this.sheetInnerContentRef.current) {
             this.observer = new ResizeObserver(() => {
                 if (!this.state.inWindowResizeScope) {
                     this.onResize();
                 }
             });
-            this.observer.observe(this.sheetContentRef.current);
+            this.observer.observe(this.sheetInnerContentRef.current);
         }
     }