@cloud-ru/ds-drawer 1.0.1-preview-c048fbb9.0 → 1.0.1-preview-cd0cd6fb.0

package/dist/cjs/components/DrawerCustom/DrawerCustom.js

@@ -50,13 +50,14 @@ function DrawerFrame(props) {
     // (`showBlackout=false`): иначе два независимых обработчика закрывают и вложенный, и родительский.
     (0, utils_1.useModalOpenState)(open, onClose, { closeOnPopstate, closeByCloseWatcher: !showBlackout });
     const focusTrapRef = (0, hooks_1.useDrawerFocusTrap)(Boolean(open));
+    const outerScrollLock = (0, hooks_1.useOuterScrollLock)(Boolean(open));
     // Без явного container портал идёт через PortalContextProvider (как у Modal): скоуп к локальному
     // элементу и отказ от body-level scroll lock, который rc-drawer ставит при рендере в document.body.
     const portalContextRef = (0, portal_context_1.usePortalContext)();
     const resolvedContainer = container ?? (portalContextRef.current ? () => portalContextRef.current : undefined);
     return ((0, jsx_runtime_1.jsx)(RcDrawer, { resizable: drawerResizable, panelRef: checkElement, mask: showBlackout, maskClosable: showBlackout, keyboard: showBlackout, "data-showblackout": showBlackout, open: open, onClose: onClose, push: push, getContainer: resolvedContainer, placement: position, destroyOnHidden: true, rootClassName: (0, classnames_1.default)(styles_module_scss_1.default.drawerRoot, rootClassName), style: drawerPanelStyle, classNames: {
             section: (0, classnames_1.default)(styles_module_scss_1.default.drawer, className),
-        }, size: isPredefinedWidth ? 'null' : width, ...(0, utils_1.extractSupportProps)(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : constants_2.motionProps), children: (0, jsx_runtime_1.jsxs)(react_remove_scroll_1.RemoveScroll, { enabled: showBlackout, removeScrollBar: false, ref: focusTrapRef, className: styles_module_scss_1.default.focusScope, children: [showButtonClosed && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.showButtonClosedWrapper, children: (0, jsx_runtime_1.jsx)(popup_private_1.PopupCloseButton, { className: styles_module_scss_1.default.showButtonClosed, "aria-label": 'close drawer', "data-test-id": constants_1.TEST_IDS.closeButton, onClick: onClose }) })), (0, jsx_runtime_1.jsx)(bottom_sheet_1.OverlaySurfaceProvider, { surface: bottom_sheet_1.OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
+        }, size: isPredefinedWidth ? 'null' : width, ...(0, utils_1.extractSupportProps)(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : constants_2.motionProps), children: (0, jsx_runtime_1.jsxs)(react_remove_scroll_1.RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles_module_scss_1.default.focusScope, children: [showButtonClosed && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.showButtonClosedWrapper, children: (0, jsx_runtime_1.jsx)(popup_private_1.PopupCloseButton, { className: styles_module_scss_1.default.showButtonClosed, "aria-label": 'close drawer', "data-test-id": constants_1.TEST_IDS.closeButton, onClick: onClose }) })), (0, jsx_runtime_1.jsx)(bottom_sheet_1.OverlaySurfaceProvider, { surface: bottom_sheet_1.OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
 }
 /**
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.

package/dist/cjs/components/DrawerCustom/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useDrawerFocusTrap';
+export * from './useOuterScrollLock';

package/dist/cjs/components/DrawerCustom/hooks/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useDrawerFocusTrap"), exports);
+__exportStar(require("./useOuterScrollLock"), exports);

package/dist/cjs/components/DrawerCustom/hooks/useOuterScrollLock.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Есть ли снаружи чужой scroll-lock (модалка, из которой открыли дровер).
+ *
+ * Такой лок гасит колесо и touchmove вне своего поддерева, а дровер живёт в отдельном портале —
+ * без собственного лока поверх него тело дровера не прокручивается. Свой лок нужен только в этом
+ * случае: без блэкаута и без внешнего лока страница под дровером должна скроллиться.
+ */
+export declare function useOuterScrollLock(open: boolean): boolean;

package/dist/cjs/components/DrawerCustom/hooks/useOuterScrollLock.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOuterScrollLock = useOuterScrollLock;
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+/** Атрибут, которым `react-remove-scroll-bar` помечает `body` на время активного лока. */
+const SCROLL_LOCK_ATTRIBUTE = 'data-scroll-locked';
+/**
+ * Есть ли снаружи чужой scroll-lock (модалка, из которой открыли дровер).
+ *
+ * Такой лок гасит колесо и touchmove вне своего поддерева, а дровер живёт в отдельном портале —
+ * без собственного лока поверх него тело дровера не прокручивается. Свой лок нужен только в этом
+ * случае: без блэкаута и без внешнего лока страница под дровером должна скроллиться.
+ */
+function useOuterScrollLock(open) {
+    const [outerLock, setOuterLock] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!open || !(0, utils_1.isBrowser)()) {
+            setOuterLock(false);
+            return;
+        }
+        // Свой лок дровера идёт с `removeScrollBar: false` и этот атрибут не ставит — самовозбуждения нет.
+        const readLock = () => setOuterLock(document.body.hasAttribute(SCROLL_LOCK_ATTRIBUTE));
+        readLock();
+        const observer = new MutationObserver(readLock);
+        observer.observe(document.body, { attributes: true, attributeFilter: [SCROLL_LOCK_ATTRIBUTE] });
+        return () => observer.disconnect();
+    }, [open]);
+    return outerLock;
+}

package/dist/esm/components/DrawerCustom/DrawerCustom.js

@@ -12,7 +12,7 @@ import { TEST_IDS, WIDTH_AS_VALUES } from '../../constants.js';
 import { DialogBody, DialogFooter, DialogHeader, } from '../../helperComponents/index.js';
 import { interopDefault } from '../../utils/interopDefault.js';
 import { motionProps } from './constants.js';
-import { useDrawerFocusTrap } from './hooks/index.js';
+import { useDrawerFocusTrap, useOuterScrollLock } from './hooks/index.js';
 import { useDrawerResize } from './hooks/useDrawerResize.js';
 import styles from './styles.module.css';
 const RcDrawer = interopDefault(RcDrawerImport);
@@ -44,13 +44,14 @@ function DrawerFrame(props) {
     // (`showBlackout=false`): иначе два независимых обработчика закрывают и вложенный, и родительский.
     useModalOpenState(open, onClose, { closeOnPopstate, closeByCloseWatcher: !showBlackout });
     const focusTrapRef = useDrawerFocusTrap(Boolean(open));
+    const outerScrollLock = useOuterScrollLock(Boolean(open));
     // Без явного container портал идёт через PortalContextProvider (как у Modal): скоуп к локальному
     // элементу и отказ от body-level scroll lock, который rc-drawer ставит при рендере в document.body.
     const portalContextRef = usePortalContext();
     const resolvedContainer = container ?? (portalContextRef.current ? () => portalContextRef.current : undefined);
     return (_jsx(RcDrawer, { resizable: drawerResizable, panelRef: checkElement, mask: showBlackout, maskClosable: showBlackout, keyboard: showBlackout, "data-showblackout": showBlackout, open: open, onClose: onClose, push: push, getContainer: resolvedContainer, placement: position, destroyOnHidden: true, rootClassName: cn(styles.drawerRoot, rootClassName), style: drawerPanelStyle, classNames: {
             section: cn(styles.drawer, className),
-        }, size: isPredefinedWidth ? 'null' : width, ...extractSupportProps(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : motionProps), children: _jsxs(RemoveScroll, { enabled: showBlackout, removeScrollBar: false, ref: focusTrapRef, className: styles.focusScope, children: [showButtonClosed && (_jsx("div", { className: styles.showButtonClosedWrapper, children: _jsx(PopupCloseButton, { className: styles.showButtonClosed, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton, onClick: onClose }) })), _jsx(OverlaySurfaceProvider, { surface: OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
+        }, size: isPredefinedWidth ? 'null' : width, ...extractSupportProps(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : motionProps), children: _jsxs(RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles.focusScope, children: [showButtonClosed && (_jsx("div", { className: styles.showButtonClosedWrapper, children: _jsx(PopupCloseButton, { className: styles.showButtonClosed, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton, onClick: onClose }) })), _jsx(OverlaySurfaceProvider, { surface: OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
 }
 /**
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.

package/dist/esm/components/DrawerCustom/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useDrawerFocusTrap.js';
+export * from './useOuterScrollLock.js';

package/dist/esm/components/DrawerCustom/hooks/index.js

@@ -1 +1,2 @@
 export * from './useDrawerFocusTrap.js';
+export * from './useOuterScrollLock.js';

package/dist/esm/components/DrawerCustom/hooks/useOuterScrollLock.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Есть ли снаружи чужой scroll-lock (модалка, из которой открыли дровер).
+ *
+ * Такой лок гасит колесо и touchmove вне своего поддерева, а дровер живёт в отдельном портале —
+ * без собственного лока поверх него тело дровера не прокручивается. Свой лок нужен только в этом
+ * случае: без блэкаута и без внешнего лока страница под дровером должна скроллиться.
+ */
+export declare function useOuterScrollLock(open: boolean): boolean;

package/dist/esm/components/DrawerCustom/hooks/useOuterScrollLock.js

@@ -0,0 +1,27 @@
+import { isBrowser } from '@cloud-ru/ds-utils';
+import { useEffect, useState } from 'react';
+/** Атрибут, которым `react-remove-scroll-bar` помечает `body` на время активного лока. */
+const SCROLL_LOCK_ATTRIBUTE = 'data-scroll-locked';
+/**
+ * Есть ли снаружи чужой scroll-lock (модалка, из которой открыли дровер).
+ *
+ * Такой лок гасит колесо и touchmove вне своего поддерева, а дровер живёт в отдельном портале —
+ * без собственного лока поверх него тело дровера не прокручивается. Свой лок нужен только в этом
+ * случае: без блэкаута и без внешнего лока страница под дровером должна скроллиться.
+ */
+export function useOuterScrollLock(open) {
+    const [outerLock, setOuterLock] = useState(false);
+    useEffect(() => {
+        if (!open || !isBrowser()) {
+            setOuterLock(false);
+            return;
+        }
+        // Свой лок дровера идёт с `removeScrollBar: false` и этот атрибут не ставит — самовозбуждения нет.
+        const readLock = () => setOuterLock(document.body.hasAttribute(SCROLL_LOCK_ATTRIBUTE));
+        readLock();
+        const observer = new MutationObserver(readLock);
+        observer.observe(document.body, { attributes: true, attributeFilter: [SCROLL_LOCK_ATTRIBUTE] });
+        return () => observer.disconnect();
+    }, [open]);
+    return outerLock;
+}