@gravity-ui/navigation 3.4.0 → 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,11 +65,11 @@ 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

package/build/cjs/{index-D40EbfWh.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-Duvas6w0.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]);
@@ -4491,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);
@@ -4505,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]);
@@ -4524,7 +4527,7 @@ 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, scrollLock = false, }) => {
@@ -5647,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 })),
@@ -5663,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-Duvas6w0.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);
@@ -5979,4 +5995,4 @@ exports.styleInject = styleInject;
 exports.useAsideHeaderContext = useAsideHeaderContext;
 exports.useSettingsContext = useSettingsContext;
 exports.useSettingsSelectionContext = useSettingsSelectionContext;
-//# sourceMappingURL=index-D40EbfWh.js.map
+//# sourceMappingURL=index-CLs1L-sq.js.map