feat(Drawer): add scrollLock props

src/components/Drawer/Drawer.tsx

@@ -12,6 +12,7 @@ import {
     type OnResizeContinueHandler,
     type OnResizeHandler,
     useResizableDrawerItem,
+    useScrollLock,
 } from './utils';
 
 import './Drawer.scss';
@@ -199,6 +200,13 @@ export interface DrawerProps {
      * @default false
      * */
     keepMounted?: boolean;
+
+    /**
+     * Whether to lock page scroll when drawer is open.
+     * Applied only when hideVeil=true and disablePortal=false.
+     * @default false
+     */
+    scrollLock?: boolean;
 }
 
 export const Drawer: React.FC<DrawerProps> = ({
@@ -211,6 +219,7 @@ export const Drawer: React.FC<DrawerProps> = ({
     hideVeil,
     disablePortal = true,
     keepMounted = false,
+    scrollLock = false,
 }) => {
     let someItemVisible = false;
     React.Children.forEach(children, (child) => {
@@ -239,7 +248,10 @@ export const Drawer: React.FC<DrawerProps> = ({
     const containerRef = React.useRef<HTMLDivElement>(null);
     const veilRef = React.useRef<HTMLDivElement>(null);
 
-    const drawer = (
+    const shouldApplyScrollLock = scrollLock && someItemVisible && hideVeil && !disablePortal;
+    useScrollLock(shouldApplyScrollLock);
+
+    return (
         <Transition
             in={someItemVisible}
             timeout={{enter: 0, exit: TIMEOUT}}
@@ -249,7 +261,8 @@ export const Drawer: React.FC<DrawerProps> = ({
         >
             {(state) => {
                 const childrenVisible = someItemVisible && state === 'entered';
-                return (
+
+                const content = (
                     <div ref={containerRef} className={b({hideVeil}, className)} style={style}>
                         <CSSTransition
                             in={childrenVisible}
@@ -280,17 +293,22 @@ export const Drawer: React.FC<DrawerProps> = ({
                         })}
                     </div>
                 );
-            }}
-        </Transition>
-    );
 
-    if (disablePortal) {
-        return drawer;
-    }
+                if (disablePortal) {
+                    return content;
+                }
 
-    return (
-        <Portal>
-            {someItemVisible ? <FloatingOverlay lockScroll>{drawer}</FloatingOverlay> : drawer}
-        </Portal>
+                // When hideVeil=true, we don't use FloatingOverlay to avoid blocking mouse events
+                if (hideVeil) {
+                    return <Portal>{content}</Portal>;
+                }
+
+                return (
+                    <Portal>
+                        <FloatingOverlay lockScroll={true}>{content}</FloatingOverlay>
+                    </Portal>
+                );
+            }}
+        </Transition>
     );
 };

src/components/Drawer/__stories__/Drawer.stories.tsx

@@ -6,6 +6,7 @@ import {DisablePortalShowcase} from './DisablePortal';
 import {DrawerShowcase} from './DrawerShowcase';
 import {HideVeilShowcase} from './HideVeil';
 import {ResizableItemShowcase} from './ResizableItem';
+import {ScrollLockShowcase} from './ScrollLock';
 import {UsePortalShowcase} from './UsePortal';
 
 export default {
@@ -25,5 +26,8 @@ export const DisablePortal = DisablePortalTemplate.bind({});
 const HideVeilTemplate: StoryFn = () => <HideVeilShowcase />;
 export const HideVeil = HideVeilTemplate.bind({});
 
+const ScrollLockTemplate: StoryFn = () => <ScrollLockShowcase />;
+export const ScrollLock = ScrollLockTemplate.bind({});
+
 const UsePortalTemplate: StoryFn = () => <UsePortalShowcase />;
 export const UsePortal = UsePortalTemplate.bind({});

src/components/Drawer/__stories__/ScrollLock.scss

@@ -0,0 +1,42 @@
+.scroll-lock {
+    --gn-drawer-item-position: absolute;
+
+    width: 100dvw;
+    height: 100dvh;
+
+    display: flex;
+    flex-direction: column;
+
+    &__header {
+        padding: 20px;
+        border-bottom: 1px solid var(--g-color-line-generic);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__container {
+        position: relative;
+        flex-grow: 1;
+        padding: 16px;
+    }
+
+    &__drawer {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+    }
+
+    &__item {
+        width: 400px;
+        height: 100%;
+        overflow-x: hidden;
+    }
+
+    &__item-content {
+        box-sizing: border-box;
+        padding: 8px 16px;
+        height: 100%;
+        overflow-y: scroll;
+    }
+}

src/components/Drawer/__stories__/ScrollLock.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import {Button, Checkbox} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+import {Drawer, DrawerItem} from '../Drawer';
+
+import {PlaceholderText} from './moc';
+
+import './ScrollLock.scss';
+
+const b = cn('scroll-lock');
+
+export function ScrollLockShowcase() {
+    const [visible, setVisible] = React.useState(true);
+    const [scrollLock, setScrollLock] = React.useState(true);
+
+    return (
+        <div className={b()}>
+            <div className={b('header')}>
+                <Button view="action" onClick={() => setVisible((v) => !v)}>
+                    {visible ? 'Hide' : 'Show'}
+                </Button>
+                <Checkbox content="Scroll lock" checked={scrollLock} onUpdate={setScrollLock} />
+            </div>
+            <div className={b('container')}>
+                {Array.from({length: 50}, (_, index) => (
+                    <p key={index}>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, quos!
+                    </p>
+                ))}
+                <Drawer
+                    className={b('drawer')}
+                    hideVeil={true}
+                    disablePortal={false}
+                    scrollLock={scrollLock}
+                    onVeilClick={() => setVisible(false)}
+                >
+                    <DrawerItem id="item" className={b('item')} direction="right" visible={visible}>
+                        <div className={b('item-content')} tabIndex={0}>
+                            <PlaceholderText />
+                        </div>
+                    </DrawerItem>
+                </Drawer>
+            </div>
+        </div>
+    );
+}

src/components/Drawer/utils.ts

@@ -21,6 +21,19 @@ function getEventClientPosition(
     return direction === 'horizontal' ? e.clientX : e.clientY;
 }
 
+export function useScrollLock(enabled: boolean) {
+    React.useEffect(() => {
+        if (!enabled) return;
+
+        const originalStyle = window.getComputedStyle(document.body).overflow;
+        document.body.style.overflow = 'hidden';
+
+        return () => {
+            document.body.style.overflow = originalStyle;
+        };
+    }, [enabled]);
+}
+
 export interface UseResizeHandlersParams {
     onStart: () => void;
     onMove: (delta: number) => void;
@@ -99,7 +112,7 @@ export function useResizeHandlers({
 
             onStart();
         },
-        [handleEnd, handleMove, onStart, direction],
+        [handleEnd, handleMove, onStart, direction, disableSelect],
     );
 
     return {