From cb40b44e84e018999feeb623cdabf3bbc255f5be Mon Sep 17 00:00:00 2001
From: Mikhail Shatikhin <shatikhin@skbkontur.ru>
Date: Fri, 8 Nov 2024 12:54:39 +0500
Subject: [PATCH] fix: tests and fix

---
 .../react-ui/components/SidePage/SidePage.tsx |  8 ++++++
 .../__stories__/shadowDom.stories.tsx         | 26 +++++++++++++++----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/react-ui/components/SidePage/SidePage.tsx b/packages/react-ui/components/SidePage/SidePage.tsx
index 8df635dff2..1ae81bd96d 100644
--- a/packages/react-ui/components/SidePage/SidePage.tsx
+++ b/packages/react-ui/components/SidePage/SidePage.tsx
@@ -140,6 +140,10 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
   public componentDidMount() {
     globalObject.addEventListener?.('keydown', this.handleKeyDown);
     this.stackSubscription = ModalStack.add(this, this.handleStackChange);
+
+    if (this.layout) {
+      this.layout.addEventListener('scroll', LayoutEvents.emit);
+    }
   }
 
   public componentWillUnmount() {
@@ -148,6 +152,10 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
       this.stackSubscription.remove();
     }
     ModalStack.remove(this);
+
+    if (this.layout) {
+      this.layout.removeEventListener('scroll', LayoutEvents.emit);
+    }
   }
 
   /**
diff --git a/packages/react-ui/components/__stories__/shadowDom.stories.tsx b/packages/react-ui/components/__stories__/shadowDom.stories.tsx
index 9a4d6b9d0c..3462498311 100644
--- a/packages/react-ui/components/__stories__/shadowDom.stories.tsx
+++ b/packages/react-ui/components/__stories__/shadowDom.stories.tsx
@@ -48,7 +48,6 @@ import { MaskedInput } from '../MaskedInput';
 import { Modal } from '../Modal';
 import { SidePage } from '../SidePage';
 import { MiniModal } from '../MiniModal';
-import { MobileSimple } from '../Autocomplete/__stories__/Autocomplete.stories';
 
 export default { title: 'ShadowDom' };
 
@@ -127,6 +126,7 @@ const styleBodyWrapper = {
   flexDirection: 'column',
   height: 2000,
   backgroundColor: '#ccc',
+  maxWidth: 500,
 } as React.CSSProperties;
 
 export const SimpleComponents = () => (
@@ -172,18 +172,30 @@ export const ModalScenarios = () => {
   );
 
   const Menus = (
-    <Gapped>
+    <Gapped wrap>
       <Dropdown caption={'Dropdown'}>
         <MenuItem>MenuItem</MenuItem>
         <MenuItem>MenuItem</MenuItem>
         <MenuItem>MenuItem</MenuItem>
       </Dropdown>
-      <DropdownMenu caption={<Button>DropdownMenu</Button>}>
+      <DropdownMenu
+        caption={
+          <Hint text="DropdownMenu">
+            <Button>DropdownMenu</Button>
+          </Hint>
+        }
+      >
         <MenuItem>MenuItem</MenuItem>
         <MenuItem>MenuItem</MenuItem>
         <MenuItem>MenuItem</MenuItem>
       </DropdownMenu>
-      <TooltipMenu caption={<Button>TooltipMenu</Button>}>
+      <TooltipMenu
+        caption={
+          <Hint text="TooltipMenu">
+            <Button>TooltipMenu</Button>
+          </Hint>
+        }
+      >
         <MenuItem>MenuItem</MenuItem>
         <MenuItem>MenuItem</MenuItem>
         <MenuItem>MenuItem</MenuItem>
@@ -193,13 +205,17 @@ export const ModalScenarios = () => {
         <MenuItem>MenuItem</MenuItem>
         <MenuItem>MenuItem</MenuItem>
       </Kebab>
+      <DatePicker onValueChange={console.log} />
     </Gapped>
   );
 
   return (
     <shadowRoot.div>
       <StylesContainer>
-        {Actions}
+        <Gapped vertical>
+          {Actions}
+          {Menus}
+        </Gapped>
         {showMiniModal && (
           <MiniModal onClose={() => setShowMiniModal(false)}>
             <Modal.Header>MiniModalHeader</Modal.Header>