@cloud-ru/ds-drawer 1.0.4 → 1.0.5-preview-98332145.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-drawer",
-  "version": "1.0.4",
+  "version": "1.0.5-preview-98332145.0",
   "description": "Пакет выезжающих панелей — компоненты Drawer и DrawerCustom с едиными токенами позиции и ширины.",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     "classnames": "^2.5.1",
     "react-remove-scroll": "^2.7.2",
     "tabbable": "^6.5.0",
-    "@cloud-ru/ds-adaptive": "^1.0.1",
-    "@cloud-ru/ds-materials": "^1.0.1",
-    "@cloud-ru/ds-bottom-sheet": "^1.0.3",
-    "@cloud-ru/ds-scroll": "^1.0.2",
-    "@cloud-ru/ds-tooltip": "^1.0.3",
-    "@cloud-ru/ds-popup-private": "^1.0.3",
-    "@cloud-ru/ds-portal-context": "^1.0.1",
-    "@cloud-ru/ds-utils": "^1.1.0"
+    "@cloud-ru/ds-adaptive": "1.0.1",
+    "@cloud-ru/ds-materials": "1.0.1",
+    "@cloud-ru/ds-popup-private": "1.0.3",
+    "@cloud-ru/ds-bottom-sheet": "1.0.4-preview-98332145.0",
+    "@cloud-ru/ds-scroll": "1.0.2",
+    "@cloud-ru/ds-portal-context": "1.0.1",
+    "@cloud-ru/ds-tooltip": "1.0.3",
+    "@cloud-ru/ds-utils": "1.1.0"
   }
 }

package/src/components/DrawerCustom/DrawerCustom.tsx

@@ -84,7 +84,9 @@ function DrawerFrame(props: DrawerCustomProps) {
   const outerScrollLock = useOuterScrollLock(Boolean(open));
 
   // Без явного container портал идёт через PortalContextProvider (как у Modal): скоуп к локальному
-  // элементу и отказ от body-level scroll lock, который rc-drawer ставит при рендере в document.body.
+  // контейнеру вместо document.body. Скролл фона лочит `RemoveScroll` — у `@rc-component/drawer`
+  // своего body scroll lock больше нет; wheel по mask / нескроллируемым зонам панели не должен
+  // крутить страницу под дровером.
   const portalContextRef = usePortalContext();
   const resolvedContainer =
     container ?? (portalContextRef.current ? () => portalContextRef.current as HTMLElement : undefined);
@@ -119,12 +121,17 @@ function DrawerFrame(props: DrawerCustomProps) {
       prefixCls='snack-rc-drawer'
       {...(disableMotions ? {} : motionProps)}
     >
-      {/* Свой лок в стеке `react-remove-scroll`: иначе лок модалки-родителя гасит скролл дровера. */}
+      {/*
+        Свой лок в стеке `react-remove-scroll`: иначе лок модалки-родителя гасит скролл дровера.
+        `removeScrollBar={false}` — не ставим `data-scroll-locked` на body (см. useOuterScrollLock).
+        Нельзя `display: contents`: capture `onWheel` на contents-узле в части браузеров не
+        срабатывает → wheel по search/header/mask уходит в скролл страницы под дровером.
+      */}
       <RemoveScroll
         enabled={showBlackout || outerScrollLock}
         removeScrollBar={false}
         ref={focusTrapRef}
-        className={styles.focusScope}
+        className={styles.scrollLock}
       >
         {showButtonClosed && (
           <div className={styles.showButtonClosedWrapper}>

package/src/components/DrawerCustom/styles.module.scss

@@ -44,6 +44,8 @@ $panelMotions: (
       position: absolute;
       z-index: initial;
       inset: 0;
+      // Не даём wheel/touch «протечь» к скроллу страницы под маской.
+      overscroll-behavior: none;
 
       opacity: 1;
       background-color: base.$sn-theme-color-blackout;
@@ -75,6 +77,8 @@ $panelMotions: (
 
       position: relative;
 
+      overflow: hidden;
+      overscroll-behavior: none;
       display: flex;
       flex-direction: column;
       flex-grow: 1;
@@ -307,8 +311,19 @@ $panelMotions: (
   @include m.with-material('acrylic', #{drawer});
 }
 
-.focusScope {
-  display: contents;
+.scrollLock {
+  // Реальный flex-бокс (не `display: contents`): иначе capture `onWheel` у RemoveScroll
+  // в части браузеров не вызывается, и колесо по header/search/пустым зонам крутит фон.
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
 }
 
 .showButtonClosed {