fix: drawer is broken (#2351)

Author: astandrik

src/components/Drawer/Drawer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
 import {DrawerItem, Drawer as GravityDrawer} from '@gravity-ui/navigation';
-import {ActionTooltip, Button, Flex, Icon, Text} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, Flex, Icon, Portal, Text} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {isNumeric} from '../../utils/utils';
@@ -52,7 +52,7 @@ const DrawerPaneContentWrapper = ({
     });
 
     const drawerRef = React.useRef<HTMLDivElement>(null);
-    const {containerWidth} = useDrawerContext();
+    const {containerWidth, itemContainerRef} = useDrawerContext();
     // Calculate drawer width based on container width percentage if specified
     const calculatedWidth = React.useMemo(() => {
         if (isPercentageWidth && containerWidth > 0) {
@@ -103,29 +103,36 @@ const DrawerPaneContentWrapper = ({
         (event.nativeEvent as DrawerEvent)._capturedInsideDrawer = true;
     };
 
+    const itemContainer = itemContainerRef?.current;
+    if (!itemContainer) {
+        return null;
+    }
+
     return (
-        <GravityDrawer
-            onEscape={onClose}
-            onVeilClick={onClose}
-            hideVeil
-            className={b('container', className)}
-        >
-            <DrawerItem
-                id={drawerId}
-                visible={isVisible}
-                resizable
-                maxResizeWidth={containerWidth}
-                width={isPercentageWidth ? calculatedWidth : drawerWidth}
-                onResize={handleResizeDrawer}
-                direction={direction}
-                className={b('item')}
-                ref={detectClickOutside ? drawerRef : undefined}
+        <Portal container={itemContainer}>
+            <GravityDrawer
+                onEscape={onClose}
+                onVeilClick={onClose}
+                hideVeil
+                className={b('container', className)}
             >
-                <div className={b('click-handler')} onClickCapture={handleClickInsideDrawer}>
-                    {children}
-                </div>
-            </DrawerItem>
-        </GravityDrawer>
+                <DrawerItem
+                    id={drawerId}
+                    visible={isVisible}
+                    resizable
+                    maxResizeWidth={containerWidth}
+                    width={isPercentageWidth ? calculatedWidth : drawerWidth}
+                    onResize={handleResizeDrawer}
+                    direction={direction}
+                    className={b('item')}
+                    ref={detectClickOutside ? drawerRef : undefined}
+                >
+                    <div className={b('click-handler')} onClickCapture={handleClickInsideDrawer}>
+                        {children}
+                    </div>
+                </DrawerItem>
+            </GravityDrawer>
+        </Portal>
     );
 };
 

src/components/Drawer/DrawerContext.tsx

@@ -8,11 +8,13 @@ const b = cn('ydb-drawer');
 
 export interface DrawerContextType {
     containerWidth: number;
+    itemContainerRef: React.RefObject<HTMLDivElement> | null;
     setContainerWidth: React.Dispatch<React.SetStateAction<number>>;
 }
 
 const DrawerContext = React.createContext<DrawerContextType>({
     containerWidth: 0,
+    itemContainerRef: null,
     setContainerWidth: () => {},
 });
 
@@ -24,6 +26,7 @@ interface DrawerContextProviderProps {
 export const DrawerContextProvider = ({children, className}: DrawerContextProviderProps) => {
     const [containerWidth, setContainerWidth] = React.useState(0);
     const containerRef = React.useRef<HTMLDivElement>(null);
+    const itemContainerRef = React.useRef<HTMLDivElement>(null);
 
     React.useEffect(() => {
         if (!containerRef.current) {
@@ -55,6 +58,7 @@ export const DrawerContextProvider = ({children, className}: DrawerContextProvid
         () => ({
             containerWidth,
             setContainerWidth,
+            itemContainerRef,
         }),
         [containerWidth],
     );
@@ -63,6 +67,11 @@ export const DrawerContextProvider = ({children, className}: DrawerContextProvid
         <DrawerContext.Provider value={value}>
             <div ref={containerRef} className={b('drawer-container', className)}>
                 {children}
+                {/* 
+                    Children styles should not affect drawer container behaviour 
+                    So we mount it out of children in a separate portal
+                */}
+                <div ref={itemContainerRef} className={b('item-container')} />
             </div>
         </DrawerContext.Provider>
     );