@gravity-ui/navigation 3.3.9 → 3.4.0

package/build/cjs/components/Drawer/Drawer.d.ts

@@ -74,6 +74,12 @@ 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 declare const Drawer: React.FC<DrawerProps>;
 export {};

package/build/cjs/components/Drawer/__stories__/Drawer.stories.d.ts

@@ -5,4 +5,5 @@ export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import(
 export declare const ResizableItem: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
 export declare const DisablePortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
 export declare const HideVeil: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const ScrollLock: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
 export declare const UsePortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;

package/build/cjs/components/Drawer/__stories__/ScrollLock.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './ScrollLock.scss';
+export declare function ScrollLockShowcase(): React.JSX.Element;

package/build/cjs/components/Drawer/utils.d.ts

@@ -5,6 +5,7 @@ export declare const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
 export type DrawerDirection = 'right' | 'left' | 'top' | 'bottom';
 export type OnResizeHandler = (width: number, event: MouseEvent | TouchEvent) => void;
 export type OnResizeContinueHandler = (width: number) => void;
+export declare function useScrollLock(enabled: boolean): void;
 export interface UseResizeHandlersParams {
     onStart: () => void;
     onMove: (delta: number) => void;

package/build/cjs/{index-wmJ_X61I.js → index-D40EbfWh.js}

@@ -141,7 +141,7 @@ function styleInject(css, ref) {
 var css_248z$u = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed;z-index:var(--gn-aside-header-panel-z-index,98)}.gn-aside-header__panel{height:100%}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
 styleInject(css_248z$u);
 
-const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-C751PFJy.js'); }).then((module) => ({ default: module.TopAlert })));
+const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-Duvas6w0.js'); }).then((module) => ({ default: module.TopAlert })));
 const Layout = ({ compact, className, children, topAlert }) => {
     const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
     const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
@@ -4393,6 +4393,17 @@ function getEventClientPosition(e, direction) {
     }
     return direction === 'horizontal' ? e.clientX : e.clientY;
 }
+function useScrollLock(enabled) {
+    React__namespace.useEffect(() => {
+        if (!enabled)
+            return;
+        const originalStyle = window.getComputedStyle(document.body).overflow;
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = originalStyle;
+        };
+    }, [enabled]);
+}
 function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }) {
     const initialPosition = React__namespace.useRef(0);
     const currentPosition = React__namespace.useRef(0);
@@ -4430,7 +4441,7 @@ function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }
         window.addEventListener('selectstart', disableSelect, { passive: false });
         document.body.style.setProperty('cursor', direction === 'horizontal' ? 'col-resize' : 'row-resize');
         onStart();
-    }, [handleEnd, handleMove, onStart, direction]);
+    }, [handleEnd, handleMove, onStart, direction, disableSelect]);
     return {
         onMouseDown: handleStart,
         onTouchStart: handleStart,
@@ -4516,7 +4527,7 @@ const DrawerItem = React.forwardRef(function DrawerItem(props, ref) {
             }, [className]), style: style },
             resizerElement, children !== null && children !== undefined ? children : content)));
 });
-const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, hideVeil, disablePortal = true, keepMounted = false, }) => {
+const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, hideVeil, disablePortal = true, keepMounted = false, scrollLock = false, }) => {
     let someItemVisible = false;
     React.Children.forEach(children, (child) => {
         if (React.isValidElement(child) && child.type === DrawerItem) {
@@ -4541,9 +4552,11 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
     }, [onEscape, someItemVisible]);
     const containerRef = React.useRef(null);
     const veilRef = React.useRef(null);
-    const drawer = (React.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, nodeRef: containerRef }, (state) => {
+    const shouldApplyScrollLock = scrollLock && someItemVisible && hideVeil && !disablePortal;
+    useScrollLock(shouldApplyScrollLock);
+    return (React.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, nodeRef: containerRef }, (state) => {
         const childrenVisible = someItemVisible && state === 'entered';
-        return (React.createElement("div", { ref: containerRef, className: b$m({ hideVeil }, className), style: style },
+        const content = (React.createElement("div", { ref: containerRef, className: b$m({ hideVeil }, className), style: style },
             React.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$m('veil-transition'), nodeRef: veilRef },
                 React.createElement("div", { ref: veilRef, className: b$m('veil', { hidden: hideVeil }, veilClassName), onClick: onVeilClick })),
             React.Children.map(children, (child) => {
@@ -4554,11 +4567,16 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
                 }
                 return child;
             })));
+        if (disablePortal) {
+            return content;
+        }
+        // When hideVeil=true, we don't use FloatingOverlay to avoid blocking mouse events
+        if (hideVeil) {
+            return React.createElement(uikit.Portal, null, content);
+        }
+        return (React.createElement(uikit.Portal, null,
+            React.createElement(FloatingOverlay, { lockScroll: true }, content)));
     }));
-    if (disablePortal) {
-        return drawer;
-    }
-    return (React.createElement(uikit.Portal, null, someItemVisible ? React.createElement(FloatingOverlay, { lockScroll: true }, drawer) : drawer));
 };
 
 const Panels = () => {
@@ -5645,7 +5663,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
 var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px;background-color:var(--g-color-base-background)}.gn-mobile-header__header-container{background-color:var(--g-color-base-background);position:sticky;top:0;z-index:var(--gn-mobile-header-z-index,100)}.gn-mobile-header__header{align-items:center;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 10px}.gn-mobile-header__burger{padding:12px}.gn-mobile-header__panel-item{--gn-drawer-item-position:var(--gn-mobile-header-panel-position,absolute)}.gn-mobile-header__burger-menu,.gn-mobile-header__panel-item{background-color:var(--g-color-base-background);max-height:100%;max-width:90vw;width:320px}.gn-mobile-header__user-menu{overflow-y:auto}.gn-mobile-header__overlap-panel,.gn-mobile-header__panels{z-index:var(--gn-mobile-header-panel-z-index,98)}.gn-mobile-header__panels{inset:var(--mobile-header-min-heigth) 0 0;overflow:hidden;position:fixed}.gn-mobile-header__panel-item{top:unset}.gn-mobile-header__content{overflow:auto}";
 styleInject(css_248z$4);
 
-const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-C751PFJy.js'); }).then((module) => ({ default: module.TopAlert })));
+const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-Duvas6w0.js'); }).then((module) => ({ default: module.TopAlert })));
 const b$4 = block('mobile-header');
 const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
     const targetRef = useForwardRef(ref);
@@ -5961,4 +5979,4 @@ exports.styleInject = styleInject;
 exports.useAsideHeaderContext = useAsideHeaderContext;
 exports.useSettingsContext = useSettingsContext;
 exports.useSettingsSelectionContext = useSettingsSelectionContext;
-//# sourceMappingURL=index-wmJ_X61I.js.map
+//# sourceMappingURL=index-D40EbfWh.js.map