@gravity-ui/navigation 3.3.9 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/Drawer/Drawer.d.ts +6 -0
- package/build/cjs/components/Drawer/__stories__/Drawer.stories.d.ts +1 -0
- package/build/cjs/components/Drawer/__stories__/ScrollLock.d.ts +3 -0
- package/build/cjs/components/Drawer/utils.d.ts +1 -0
- package/build/cjs/{index-wmJ_X61I.js → index-D40EbfWh.js} +29 -11
- package/build/{esm/index-DFIDnNIV.js.map → cjs/index-D40EbfWh.js.map} +1 -1
- package/build/cjs/{index-C751PFJy.js → index-Duvas6w0.js} +2 -2
- package/build/cjs/{index-C751PFJy.js.map → index-Duvas6w0.js.map} +1 -1
- package/build/cjs/index.js +1 -1
- package/build/esm/components/Drawer/Drawer.d.ts +6 -0
- package/build/esm/components/Drawer/__stories__/Drawer.stories.d.ts +1 -0
- package/build/esm/components/Drawer/__stories__/ScrollLock.d.ts +3 -0
- package/build/esm/components/Drawer/utils.d.ts +1 -0
- package/build/esm/{index-De4-cL6-.js → index-BHcJfNP_.js} +2 -2
- package/build/esm/{index-De4-cL6-.js.map → index-BHcJfNP_.js.map} +1 -1
- package/build/esm/{index-DFIDnNIV.js → index-DWA-PD7D.js} +29 -11
- package/build/{cjs/index-wmJ_X61I.js.map → esm/index-DWA-PD7D.js.map} +1 -1
- package/build/esm/index.js +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var uikit = require('@gravity-ui/uikit');
|
|
5
|
-
var index = require('./index-
|
|
5
|
+
var index = require('./index-D40EbfWh.js');
|
|
6
6
|
require('@bem-react/classname');
|
|
7
7
|
require('@gravity-ui/icons');
|
|
8
8
|
require('@gravity-ui/uikit/i18n');
|
|
@@ -67,4 +67,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
|
|
|
67
67
|
};
|
|
68
68
|
|
|
69
69
|
exports.TopAlert = TopAlert;
|
|
70
|
-
//# sourceMappingURL=index-
|
|
70
|
+
//# sourceMappingURL=index-Duvas6w0.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-Duvas6w0.js","sources":["../../../src/components/TopAlert/useTopAlertHeight.ts","../../../src/components/TopAlert/TopAlert.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n alertRef: React.RefObject<HTMLDivElement>;\n updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n const alertRef = React.useRef<HTMLDivElement>(null);\n\n const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n const gRootElement = document\n .getElementsByClassName(G_ROOT_CLASS_NAME)\n .item(0) as HTMLElement | null;\n gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n }, []);\n\n const updateTopSize = React.useCallback(() => {\n setAsideTopPanelHeight(alertRef.current?.clientHeight || 0);\n }, [setAsideTopPanelHeight]);\n\n React.useLayoutEffect(() => {\n const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n if (alert) {\n window.addEventListener('resize', updateTopSizeDebounce);\n updateTopSizeDebounce();\n }\n return () => {\n window.removeEventListener('resize', updateTopSizeDebounce);\n setAsideTopPanelHeight(0);\n };\n }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n return {\n alertRef,\n updateTopSize,\n };\n};\n","import React from 'react';\n\nimport {Alert, Text} from '@gravity-ui/uikit';\n\nimport {TopAlertProps} from '../types';\nimport {block} from '../utils/cn';\n\nimport {useTopAlertHeight} from './useTopAlertHeight';\n\nimport './TopAlert.scss';\n\nconst b = block('top-alert');\n\ntype Props = {\n alert?: TopAlertProps;\n className?: string;\n mobileView?: boolean;\n};\n\nexport const TopAlert = ({alert, className, mobileView = false}: Props) => {\n const {alertRef, updateTopSize} = useTopAlertHeight({alert});\n\n const [opened, setOpened] = React.useState(true);\n\n const handleClose = React.useCallback(() => {\n setOpened(false);\n alert?.onCloseTopAlert?.();\n }, [alert]);\n\n React.useEffect(() => {\n if (!opened) {\n updateTopSize();\n }\n }, [opened, updateTopSize]);\n\n if (!alert || !alert.message) {\n return null;\n }\n\n return (\n <div\n ref={alertRef}\n className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n >\n {opened && (\n <Alert\n className={b('', {\n centered: alert.centered,\n dense: alert.dense,\n })}\n corners=\"square\"\n layout=\"horizontal\"\n align={alert.align}\n theme={alert.theme || 'warning'}\n view={alert.view}\n icon={alert.icon}\n title={alert.title}\n message={\n mobileView ? (\n <Text ellipsisLines={5} variant=\"body-2\">\n {alert.message}\n </Text>\n ) : (\n alert.message\n )\n }\n actions={alert.actions}\n onClose={alert.closable ? handleClose : undefined}\n />\n )}\n </div>\n );\n};\n"],"names":["debounceFn","block","Alert","Text"],"mappings":"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"}
|
package/build/cjs/index.js
CHANGED
|
@@ -74,6 +74,12 @@ export interface DrawerProps {
|
|
|
74
74
|
* @default false
|
|
75
75
|
* */
|
|
76
76
|
keepMounted?: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* Whether to lock page scroll when drawer is open.
|
|
79
|
+
* Applied only when hideVeil=true and disablePortal=false.
|
|
80
|
+
* @default false
|
|
81
|
+
*/
|
|
82
|
+
scrollLock?: boolean;
|
|
77
83
|
}
|
|
78
84
|
export declare const Drawer: React.FC<DrawerProps>;
|
|
79
85
|
export {};
|
|
@@ -5,4 +5,5 @@ export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import(
|
|
|
5
5
|
export declare const ResizableItem: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
|
|
6
6
|
export declare const DisablePortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
|
|
7
7
|
export declare const HideVeil: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
|
|
8
|
+
export declare const ScrollLock: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
|
|
8
9
|
export declare const UsePortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
|
|
@@ -5,6 +5,7 @@ export declare const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
|
|
|
5
5
|
export type DrawerDirection = 'right' | 'left' | 'top' | 'bottom';
|
|
6
6
|
export type OnResizeHandler = (width: number, event: MouseEvent | TouchEvent) => void;
|
|
7
7
|
export type OnResizeContinueHandler = (width: number) => void;
|
|
8
|
+
export declare function useScrollLock(enabled: boolean): void;
|
|
8
9
|
export interface UseResizeHandlersParams {
|
|
9
10
|
onStart: () => void;
|
|
10
11
|
onMove: (delta: number) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { Alert, Text } from '@gravity-ui/uikit';
|
|
3
|
-
import { d as debounceFn, s as styleInject, b as block } from './index-
|
|
3
|
+
import { d as debounceFn, s as styleInject, b as block } from './index-DWA-PD7D.js';
|
|
4
4
|
import '@bem-react/classname';
|
|
5
5
|
import '@gravity-ui/icons';
|
|
6
6
|
import '@gravity-ui/uikit/i18n';
|
|
@@ -65,4 +65,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
|
|
|
65
65
|
};
|
|
66
66
|
|
|
67
67
|
export { TopAlert };
|
|
68
|
-
//# sourceMappingURL=index-
|
|
68
|
+
//# sourceMappingURL=index-BHcJfNP_.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-BHcJfNP_.js","sources":["../../../src/components/TopAlert/useTopAlertHeight.ts","../../../src/components/TopAlert/TopAlert.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n alertRef: React.RefObject<HTMLDivElement>;\n updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n const alertRef = React.useRef<HTMLDivElement>(null);\n\n const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n const gRootElement = document\n .getElementsByClassName(G_ROOT_CLASS_NAME)\n .item(0) as HTMLElement | null;\n gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n }, []);\n\n const updateTopSize = React.useCallback(() => {\n setAsideTopPanelHeight(alertRef.current?.clientHeight || 0);\n }, [setAsideTopPanelHeight]);\n\n React.useLayoutEffect(() => {\n const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n if (alert) {\n window.addEventListener('resize', updateTopSizeDebounce);\n updateTopSizeDebounce();\n }\n return () => {\n window.removeEventListener('resize', updateTopSizeDebounce);\n setAsideTopPanelHeight(0);\n };\n }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n return {\n alertRef,\n updateTopSize,\n };\n};\n","import React from 'react';\n\nimport {Alert, Text} from '@gravity-ui/uikit';\n\nimport {TopAlertProps} from '../types';\nimport {block} from '../utils/cn';\n\nimport {useTopAlertHeight} from './useTopAlertHeight';\n\nimport './TopAlert.scss';\n\nconst b = block('top-alert');\n\ntype Props = {\n alert?: TopAlertProps;\n className?: string;\n mobileView?: boolean;\n};\n\nexport const TopAlert = ({alert, className, mobileView = false}: Props) => {\n const {alertRef, updateTopSize} = useTopAlertHeight({alert});\n\n const [opened, setOpened] = React.useState(true);\n\n const handleClose = React.useCallback(() => {\n setOpened(false);\n alert?.onCloseTopAlert?.();\n }, [alert]);\n\n React.useEffect(() => {\n if (!opened) {\n updateTopSize();\n }\n }, [opened, updateTopSize]);\n\n if (!alert || !alert.message) {\n return null;\n }\n\n return (\n <div\n ref={alertRef}\n className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n >\n {opened && (\n <Alert\n className={b('', {\n centered: alert.centered,\n dense: alert.dense,\n })}\n corners=\"square\"\n layout=\"horizontal\"\n align={alert.align}\n theme={alert.theme || 'warning'}\n view={alert.view}\n icon={alert.icon}\n title={alert.title}\n message={\n mobileView ? (\n <Text ellipsisLines={5} variant=\"body-2\">\n {alert.message}\n </Text>\n ) : (\n alert.message\n )\n }\n actions={alert.actions}\n onClose={alert.closable ? handleClose : undefined}\n />\n )}\n </div>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -121,7 +121,7 @@ function styleInject(css, ref) {
|
|
|
121
121
|
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)}";
|
|
122
122
|
styleInject(css_248z$u);
|
|
123
123
|
|
|
124
|
-
const TopAlert$1 = React__default.lazy(() => import('./index-
|
|
124
|
+
const TopAlert$1 = React__default.lazy(() => import('./index-BHcJfNP_.js').then((module) => ({ default: module.TopAlert })));
|
|
125
125
|
const Layout = ({ compact, className, children, topAlert }) => {
|
|
126
126
|
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
127
127
|
const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
|
|
@@ -4373,6 +4373,17 @@ function getEventClientPosition(e, direction) {
|
|
|
4373
4373
|
}
|
|
4374
4374
|
return direction === 'horizontal' ? e.clientX : e.clientY;
|
|
4375
4375
|
}
|
|
4376
|
+
function useScrollLock(enabled) {
|
|
4377
|
+
React.useEffect(() => {
|
|
4378
|
+
if (!enabled)
|
|
4379
|
+
return;
|
|
4380
|
+
const originalStyle = window.getComputedStyle(document.body).overflow;
|
|
4381
|
+
document.body.style.overflow = 'hidden';
|
|
4382
|
+
return () => {
|
|
4383
|
+
document.body.style.overflow = originalStyle;
|
|
4384
|
+
};
|
|
4385
|
+
}, [enabled]);
|
|
4386
|
+
}
|
|
4376
4387
|
function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }) {
|
|
4377
4388
|
const initialPosition = React.useRef(0);
|
|
4378
4389
|
const currentPosition = React.useRef(0);
|
|
@@ -4410,7 +4421,7 @@ function useResizeHandlers({ onStart, onMove, onEnd, direction = 'horizontal', }
|
|
|
4410
4421
|
window.addEventListener('selectstart', disableSelect, { passive: false });
|
|
4411
4422
|
document.body.style.setProperty('cursor', direction === 'horizontal' ? 'col-resize' : 'row-resize');
|
|
4412
4423
|
onStart();
|
|
4413
|
-
}, [handleEnd, handleMove, onStart, direction]);
|
|
4424
|
+
}, [handleEnd, handleMove, onStart, direction, disableSelect]);
|
|
4414
4425
|
return {
|
|
4415
4426
|
onMouseDown: handleStart,
|
|
4416
4427
|
onTouchStart: handleStart,
|
|
@@ -4496,7 +4507,7 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
|
|
|
4496
4507
|
}, [className]), style: style },
|
|
4497
4508
|
resizerElement, children !== null && children !== undefined ? children : content)));
|
|
4498
4509
|
});
|
|
4499
|
-
const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, hideVeil, disablePortal = true, keepMounted = false, }) => {
|
|
4510
|
+
const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape, hideVeil, disablePortal = true, keepMounted = false, scrollLock = false, }) => {
|
|
4500
4511
|
let someItemVisible = false;
|
|
4501
4512
|
React__default.Children.forEach(children, (child) => {
|
|
4502
4513
|
if (React__default.isValidElement(child) && child.type === DrawerItem) {
|
|
@@ -4521,9 +4532,11 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
|
|
|
4521
4532
|
}, [onEscape, someItemVisible]);
|
|
4522
4533
|
const containerRef = React__default.useRef(null);
|
|
4523
4534
|
const veilRef = React__default.useRef(null);
|
|
4524
|
-
const
|
|
4535
|
+
const shouldApplyScrollLock = scrollLock && someItemVisible && hideVeil && !disablePortal;
|
|
4536
|
+
useScrollLock(shouldApplyScrollLock);
|
|
4537
|
+
return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, nodeRef: containerRef }, (state) => {
|
|
4525
4538
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
4526
|
-
|
|
4539
|
+
const content = (React__default.createElement("div", { ref: containerRef, className: b$m({ hideVeil }, className), style: style },
|
|
4527
4540
|
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$m('veil-transition'), nodeRef: veilRef },
|
|
4528
4541
|
React__default.createElement("div", { ref: veilRef, className: b$m('veil', { hidden: hideVeil }, veilClassName), onClick: onVeilClick })),
|
|
4529
4542
|
React__default.Children.map(children, (child) => {
|
|
@@ -4534,11 +4547,16 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
|
|
|
4534
4547
|
}
|
|
4535
4548
|
return child;
|
|
4536
4549
|
})));
|
|
4550
|
+
if (disablePortal) {
|
|
4551
|
+
return content;
|
|
4552
|
+
}
|
|
4553
|
+
// When hideVeil=true, we don't use FloatingOverlay to avoid blocking mouse events
|
|
4554
|
+
if (hideVeil) {
|
|
4555
|
+
return React__default.createElement(Portal, null, content);
|
|
4556
|
+
}
|
|
4557
|
+
return (React__default.createElement(Portal, null,
|
|
4558
|
+
React__default.createElement(FloatingOverlay, { lockScroll: true }, content)));
|
|
4537
4559
|
}));
|
|
4538
|
-
if (disablePortal) {
|
|
4539
|
-
return drawer;
|
|
4540
|
-
}
|
|
4541
|
-
return (React__default.createElement(Portal, null, someItemVisible ? React__default.createElement(FloatingOverlay, { lockScroll: true }, drawer) : drawer));
|
|
4542
4560
|
};
|
|
4543
4561
|
|
|
4544
4562
|
const Panels = () => {
|
|
@@ -5625,7 +5643,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
|
|
|
5625
5643
|
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}";
|
|
5626
5644
|
styleInject(css_248z$4);
|
|
5627
5645
|
|
|
5628
|
-
const TopAlert = React__default.lazy(() => import('./index-
|
|
5646
|
+
const TopAlert = React__default.lazy(() => import('./index-BHcJfNP_.js').then((module) => ({ default: module.TopAlert })));
|
|
5629
5647
|
const b$4 = block('mobile-header');
|
|
5630
5648
|
const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
|
|
5631
5649
|
const targetRef = useForwardRef(ref);
|
|
@@ -5916,4 +5934,4 @@ const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, mo
|
|
|
5916
5934
|
};
|
|
5917
5935
|
|
|
5918
5936
|
export { AsideHeader as A, DrawerItem as D, FooterItem$1 as F, HotkeysPanel as H, Logo as L, MOBILE_HEADER_EVENT_NAMES as M, PageLayout as P, Settings as S, Title as T, AsideHeaderContextProvider as a, block as b, PageLayoutAside as c, debounceFn as d, AsideFallback as e, Drawer as f, PublicActionBar as g, useSettingsSelectionContext as h, useSettingsContext as i, FooterItem as j, getMobileHeaderCustomEvent as k, MobileHeader as l, MobileLogo as m, Footer as n, MobileFooter as o, styleInject as s, useAsideHeaderContext as u };
|
|
5919
|
-
//# sourceMappingURL=index-
|
|
5937
|
+
//# sourceMappingURL=index-DWA-PD7D.js.map
|