fix: tests and fix

skbkontur · Nov 11, 2024 · cb40b44 · cb40b44
1 parent dfe8cfe
commit cb40b44
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git 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
@@ -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>