@gravity-ui/navigation 3.3.9 → 3.4.1

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

@@ -49,6 +49,8 @@ export interface DrawerItemProps {
      * @default false
      * */
     keepMounted?: boolean;
+    /** Optional inline styles to be applied to the DrawerItem component. */
+    style?: React.CSSProperties;
 }
 export declare const DrawerItem: React.ForwardRefExoticComponent<DrawerItemProps & React.RefAttributes<HTMLDivElement>>;
 type DrawerChild = React.ReactElement<DrawerItemProps>;
@@ -63,17 +65,23 @@ export interface DrawerProps {
     veilClassName?: string;
     /** Optional callback function that is called when the veil (overlay) is clicked. */
     onVeilClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    /** Optional callback function that is called when the escape key is pressed, if the drawer is open. */
+    /** Optional callback function that is called when the escape key is pressed if the drawer is open. */
     onEscape?: (event: KeyboardEvent) => void;
     /** Optional flag to hide the background darkening */
     hideVeil?: boolean;
-    /** Optional flag to not use `Portal` for drawer */
+    /** Optional flag to doesn't use `Portal` for drawer */
     disablePortal?: boolean;
     /**
      * Keep child components mounted when closed
      * @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-CLs1L-sq.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-ClUpN5oD.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,
@@ -4480,7 +4491,7 @@ styleInject(css_248z$l);
 const b$m = block('drawer');
 const TIMEOUT = 300;
 const DrawerItem = React.forwardRef(function DrawerItem(props, ref) {
-    const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResizeContinue, onResize, keepMounted = false, } = props;
+    const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResizeContinue, onResize, keepMounted = false, style = {}, } = props;
     const [isInitialRender, setInitialRender] = React.useState(true);
     const itemRef = React.useRef(null);
     const handleRef = uikit.useForkRef(ref, itemRef);
@@ -4494,15 +4505,18 @@ const DrawerItem = React.forwardRef(function DrawerItem(props, ref) {
         onResize,
         onResizeContinue,
     });
-    const style = {};
-    if (resizable) {
-        if (['left', 'right'].includes(direction)) {
-            style.width = `${resizedWidth}px`;
-        }
-        else {
-            style.height = `${resizedWidth}px`;
+    const innerStyle = React.useMemo(() => {
+        const css = Object.assign({}, style);
+        if (resizable) {
+            if (['left', 'right'].includes(direction)) {
+                css.width = `${resizedWidth}px`;
+            }
+            else {
+                css.height = `${resizedWidth}px`;
+            }
         }
-    }
+        return css;
+    }, [direction, resizable, resizedWidth, style]);
     React.useEffect(() => {
         setInitialRender(true);
     }, [direction]);
@@ -4513,10 +4527,10 @@ const DrawerItem = React.forwardRef(function DrawerItem(props, ref) {
                 direction: cssDirection,
                 hidden: isInitialRender && !visible,
                 resize: isResizing,
-            }, [className]), style: style },
+            }, [className]), style: innerStyle },
             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 +4555,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 +4570,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 = () => {
@@ -5629,10 +5650,23 @@ styleInject(css_248z$5);
 
 const b$5 = block('mobile-overlap-panel');
 const OverlapPanel = ({ title, renderContent, className, onClose, action, closeTitle = i18n('overlap_button_close'), visible, topOffset, }) => {
-    return (React.createElement(Drawer, { className: b$5('', { action: Boolean(action) }, className), onVeilClick: onClose, onEscape: onClose, style: {
-            top: topOffset,
-        } },
-        React.createElement(DrawerItem, { id: "overlap", visible: visible, className: b$5('drawer-item') },
+    const topOffsetValue = typeof topOffset === 'number' ? `${topOffset}px` : topOffset;
+    const [itemPosition, setItemPosition] = React.useState();
+    const drawerStyle = React.useMemo(() => ({ top: `calc(${topOffsetValue} + var(--gn-top-alert-height, 0px))` }), [topOffsetValue]);
+    const drawerItemStyle = React.useMemo(() => itemPosition === 'absolute'
+        ? {}
+        : { top: `calc(${topOffsetValue} + var(--gn-top-alert-height, 0px))` }, [topOffsetValue, itemPosition]);
+    const itemRef = React.useRef(null);
+    // It is necessary to determine the position of the DrawerItem in order to correctly set the top offset
+    React.useLayoutEffect(() => {
+        if (itemRef.current) {
+            const style = getComputedStyle(itemRef.current);
+            const position = style.position;
+            setItemPosition(position);
+        }
+    }, []);
+    return (React.createElement(Drawer, { className: b$5('', { action: Boolean(action) }, className), onVeilClick: onClose, onEscape: onClose, style: drawerStyle },
+        React.createElement(DrawerItem, { id: "overlap", ref: itemRef, visible: visible, className: b$5('drawer-item'), style: drawerItemStyle },
             React.createElement("div", { className: b$5('header') },
                 React.createElement(uikit.Button, { size: "l", view: "flat", className: b$5('close'), onClick: onClose, "aria-label": closeTitle },
                     React.createElement(uikit.Icon, { className: b$5('icon'), data: icons.ArrowLeft, size: MOBILE_HEADER_ICON_SIZE })),
@@ -5645,7 +5679,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-ClUpN5oD.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 +5995,4 @@ exports.styleInject = styleInject;
 exports.useAsideHeaderContext = useAsideHeaderContext;
 exports.useSettingsContext = useSettingsContext;
 exports.useSettingsSelectionContext = useSettingsSelectionContext;
-//# sourceMappingURL=index-wmJ_X61I.js.map
+//# sourceMappingURL=index-CLs1L-sq.js.map