@gravity-ui/navigation 5.0.0-beta.3 → 5.0.0

package/build/cjs/components/AsideHeader/components/FirstPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\nimport {CSSTransition} from 'react-transition-group';\n\nimport {ASIDE_HEADER_EXPAND_TRANSITION_DELAY} from '../../constants';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nimport {useGroupedMenuItems} from './AllPagesPanel/useGroupedMenuItems';\nimport {CompositeBar} from './CompositeBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nconst asideTransitionClassNames = {\n    enter: b('aside-transition-enter'),\n    enterActive: b('aside-transition-enter-active'),\n    enterDone: b('aside-transition-enter-done'),\n    exit: b('aside-transition-exit'),\n    exitActive: b('aside-transition-exit-active'),\n};\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        multipleTooltip,\n        onMenuMoreClick,\n        renderFooter,\n        onToggleGroupCollapsed,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        menuItems,\n        menuGroups,\n        qa,\n        onExpand,\n        onFold,\n        isExpanded,\n    } = useAsideHeaderInnerContext();\n\n    const flatListItems = useGroupedMenuItems(menuItems, menuGroups);\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    const isExpandedByHover = compact && isExpanded;\n\n    return (\n        <React.Fragment>\n            <CSSTransition\n                in={isExpandedByHover}\n                timeout={ASIDE_HEADER_EXPAND_TRANSITION_DELAY}\n                classNames={asideTransitionClassNames}\n            >\n                <div\n                    className={b('aside', className)}\n                    style={{width: size}}\n                    data-qa={qa}\n                    onMouseEnter={onExpand}\n                    onMouseLeave={onFold}\n                >\n                    <div className={b('aside-popup-anchor')} ref={asideRef} />\n                    {customBackground && (\n                        <div className={b('aside-custom-background', customBackgroundClassName)}>\n                            {customBackground}\n                        </div>\n                    )}\n\n                    <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n                        <Header />\n\n                        {flatListItems?.length ? (\n                            <CompositeBar\n                                compositeId={MENU_ITEMS_COMPOSITE_ID}\n                                className={b('menu-items')}\n                                groupClassName={b('menu-items-group')}\n                                menuItemClassName={b('menu-item')}\n                                compact={!isExpanded}\n                                type=\"menu\"\n                                items={flatListItems}\n                                onItemClick={onItemClick}\n                                onMoreClick={onMenuMoreClick}\n                                onToggleGroupCollapsed={onToggleGroupCollapsed}\n                                multipleTooltip={multipleTooltip}\n                            />\n                        ) : (\n                            <div className={b('menu-items')} />\n                        )}\n\n                        <div className={b('footer')}>\n                            {renderFooter?.({\n                                size,\n                                compact: Boolean(!isExpanded),\n                                asideRef,\n                            })}\n                        </div>\n                    </div>\n                </div>\n            </CSSTransition>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["b","useAsideHeaderInnerContext","useGroupedMenuItems","useRef","setRef","CSSTransition","ASIDE_HEADER_EXPAND_TRANSITION_DELAY","Header","CompositeBar","Panels"],"mappings":"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"}
+{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useCallback, useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\nimport {CSSTransition} from 'react-transition-group';\n\nimport {ASIDE_HEADER_EXPAND_TRANSITION_DELAY} from '../../constants';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nimport {useGroupedMenuItems} from './AllPagesPanel/useGroupedMenuItems';\nimport {CompositeBar} from './CompositeBar';\nimport {FooterBar} from './FooterBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nconst asideTransitionClassNames = {\n    enter: b('aside-transition-enter'),\n    enterActive: b('aside-transition-enter-active'),\n    enterDone: b('aside-transition-enter-done'),\n    exit: b('aside-transition-exit'),\n    exitActive: b('aside-transition-exit-active'),\n};\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        onMenuMoreClick,\n        renderFooter,\n        onToggleGroupCollapsed,\n        renderFooterAfter,\n        pinned,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        menuItems,\n        menuGroups,\n        qa,\n        onExpand,\n        onFold,\n        setCollapseBlocker,\n        isExpanded,\n        isCompactMode,\n    } = useAsideHeaderInnerContext();\n\n    const flatListItems = useGroupedMenuItems(menuItems, menuGroups);\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    const isExpandedByHover = !pinned && isExpanded;\n    const footerResult = renderFooter?.({\n        size,\n        isExpanded,\n        isPinned: pinned,\n        asideRef,\n        isCompactMode,\n    });\n    const canRenderFooterInHorizontalMode = Array.isArray(footerResult) && footerResult.length > 1;\n\n    const renderFooterContent = useCallback(() => {\n        if (canRenderFooterInHorizontalMode) {\n            return (\n                <FooterBar\n                    isPinned={pinned}\n                    isExpanded={isExpanded}\n                    renderAfter={renderFooterAfter}\n                    setCollapseBlocker={setCollapseBlocker}\n                >\n                    {footerResult}\n                </FooterBar>\n            );\n        }\n\n        return footerResult;\n    }, [\n        footerResult,\n        pinned,\n        isExpanded,\n        canRenderFooterInHorizontalMode,\n        setCollapseBlocker,\n        renderFooterAfter,\n    ]);\n\n    return (\n        <React.Fragment>\n            <CSSTransition\n                in={isExpandedByHover}\n                timeout={ASIDE_HEADER_EXPAND_TRANSITION_DELAY}\n                classNames={asideTransitionClassNames}\n            >\n                <div\n                    className={b('aside', {['compact-mode']: isCompactMode}, className)}\n                    style={{width: size}}\n                    data-qa={qa}\n                    onMouseEnter={onExpand}\n                    onMouseLeave={onFold}\n                >\n                    <div className={b('aside-popup-anchor')} ref={asideRef} />\n                    {customBackground && (\n                        <div className={b('aside-custom-background', customBackgroundClassName)}>\n                            {customBackground}\n                        </div>\n                    )}\n\n                    <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n                        <Header />\n\n                        {flatListItems?.length ? (\n                            <CompositeBar\n                                compositeId={MENU_ITEMS_COMPOSITE_ID}\n                                className={b('menu-items')}\n                                menuItemClassName={b('menu-item')}\n                                isExpanded={isExpanded}\n                                type=\"menu\"\n                                items={flatListItems}\n                                onItemClick={onItemClick}\n                                onMoreClick={onMenuMoreClick}\n                                onToggleGroupCollapsed={onToggleGroupCollapsed}\n                                isCompactMode={isCompactMode}\n                                setCollapseBlocker={setCollapseBlocker}\n                            />\n                        ) : (\n                            <div className={b('menu-items')} />\n                        )}\n\n                        <div\n                            className={b('footer', {\n                                horizontal: canRenderFooterInHorizontalMode && pinned,\n                            })}\n                        >\n                            {renderFooterContent()}\n                        </div>\n                    </div>\n                </div>\n            </CSSTransition>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["b","useAsideHeaderInnerContext","useGroupedMenuItems","useRef","setRef","useCallback","FooterBar","CSSTransition","ASIDE_HEADER_EXPAND_TRANSITION_DELAY","Header","CompositeBar","Panels"],"mappings":"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"}

package/build/cjs/components/AsideHeader/components/FooterBar/FooterBar.css

@@ -0,0 +1 @@
+.FooterBar-module__gn-footer-bar___dunXC, .FooterBar-module__gn-footer-bar__items___xBsUq{display:flex;flex-direction:column;width:100%}.FooterBar-module__gn-footer-bar__items_horizontal___DEeK6{border-bottom:1px solid var(--gn-aside-bottom-divider-color,var(--g-color-line-generic));border-top:1px solid var(--gn-aside-bottom-divider-color,var(--g-color-line-generic));flex-direction:row;height:var(--_--item-height)}.FooterBar-module__gn-footer-bar__item___KAJSe{align-items:center;display:flex;justify-content:center}.FooterBar-module__gn-footer-bar__items_horizontal___DEeK6 .FooterBar-module__gn-footer-bar__item___KAJSe{flex:1 1 0;height:100%;min-width:0}.FooterBar-module__gn-footer-bar__items_horizontal___DEeK6 .FooterBar-module__gn-footer-bar__item___KAJSe:not(:last-child){border-right:1px solid var(--gn-aside-bottom-divider-color,var(--g-color-line-generic))}.FooterBar-module__gn-footer-bar__items_vertical___3A7jw .FooterBar-module__gn-footer-bar__item___KAJSe:not(:last-child){margin-bottom:2px}.FooterBar-module__gn-footer-bar__items___xBsUq:not(.FooterBar-module__gn-footer-bar__items_horizontal___DEeK6) .FooterBar-module__gn-footer-bar__item___KAJSe{height:var(--_--item-height);margin-bottom:2px;width:100%}.FooterBar-module__gn-footer-bar__items___xBsUq:not(.FooterBar-module__gn-footer-bar__items_horizontal___DEeK6) .FooterBar-module__gn-footer-bar__item___KAJSe:last-child{margin-bottom:0}.FooterBar-module__gn-footer-bar__after___yB8To{height:var(--_--item-height);width:100%}.FooterBar-module__gn-footer-bar__after_horizontal___t4KyN{box-sizing:border-box;margin-block:var(--g-spacing-2);padding-inline:var(--_--item-margin-inline)}.FooterBar-module__gn-footer-bar__dropdown-switcher___Czw-L{width:100%}.FooterBar-module__gn-footer-bar__dropdown-popup___nWoMR{--_--item-height:36px;padding:var(--g-spacing-1)}.FooterBar-module__gn-footer-bar__dropdown-popup___nWoMR .g-menu .g-menu__list-item .g-menu__item{height:var(--_--item-height);padding:0}

package/build/cjs/components/AsideHeader/components/FooterBar/FooterBar.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SetCollapseBlocker } from '../../types';
+export interface FooterBarProps {
+    /** Array of footer elements (ReactNode[]) */
+    children: React.ReactNode[];
+    /** Render function for additional content after items (e.g., user profile). Receives options with setCollapseBlocker. */
+    renderAfter?: (options?: {
+        setCollapseBlocker?: SetCollapseBlocker;
+    }) => React.ReactNode;
+    /** Registers a temporary block on collapse (e.g. while dropdown is open). Returns release function. */
+    setCollapseBlocker?: SetCollapseBlocker;
+    /** When `true`, the navigation is pinned (expanded). Items render horizontally. */
+    isPinned: boolean;
+    /** When `true`, the navigation is expanded (hover or pinned). */
+    isExpanded: boolean;
+    /** Maximum number of visible items before showing "more" button. Default: 5 */
+    maxVisibleItems?: number;
+}
+export declare const FooterBar: React.NamedExoticComponent<FooterBarProps>;

package/build/cjs/components/AsideHeader/components/FooterBar/FooterBar.js

@@ -0,0 +1,95 @@
+import './FooterBar.css';
+'use strict';
+
+var React = require('react');
+var icons = require('@gravity-ui/icons');
+var uikit = require('@gravity-ui/uikit');
+var constants = require('../../../constants.js');
+var cn = require('../../../utils/cn.js');
+var FooterLayoutContext = require('../../FooterLayoutContext.js');
+var index = require('../../i18n/index.js');
+var FooterItem = require('../FooterItem/FooterItem.js');
+var constants$1 = require('./constants.js');
+var FooterBar_module = require('./FooterBar.module.scss.js');
+
+const isValidFooterElement = (child) => {
+    return React.isValidElement(child) && child.type === FooterItem.FooterItem;
+};
+const getChildKey = (child, fallbackIndex) => {
+    if (React.isValidElement(child) && child.key) {
+        return child.key;
+    }
+    return fallbackIndex;
+};
+// Get title from child props for tooltip
+const getChildTitle = (child) => {
+    if (React.isValidElement(child) && child.props) {
+        return child.props.title;
+    }
+    return undefined;
+};
+const b = cn.createBlock('footer-bar', FooterBar_module.default);
+const FooterBar = React.memo(({ children, renderAfter, setCollapseBlocker, isPinned, isExpanded, maxVisibleItems = constants$1.MAX_VISIBLE_ITEMS, }) => {
+    const childArray = React.Children.toArray(children).filter(Boolean);
+    // If only 1 element, render in vertical mode regardless of isPinned
+    const isHorizontal = isPinned && childArray.length > 1;
+    const handleDropdownOpenToggle = React.useCallback((isOpened) => {
+        setCollapseBlocker === null || setCollapseBlocker === undefined ? undefined : setCollapseBlocker(isOpened);
+    }, [setCollapseBlocker]);
+    const renderDropdownChild = React.useCallback((child) => {
+        if (!isValidFooterElement(child)) {
+            return child;
+        }
+        // In dropdown, always show text
+        return React.cloneElement(child, {
+            isExpanded: true,
+            layout: 'vertical',
+        });
+    }, []);
+    const { visibleChildren, hiddenChildren } = React.useMemo(() => {
+        if (childArray.length <= maxVisibleItems) {
+            return {
+                visibleChildren: childArray,
+                hiddenChildren: [],
+            };
+        }
+        // Reserve one slot for "more" button
+        const visibleCount = maxVisibleItems - 1;
+        return {
+            visibleChildren: childArray.slice(0, visibleCount),
+            hiddenChildren: childArray.slice(visibleCount),
+        };
+    }, [childArray, maxVisibleItems]);
+    const value = React.useMemo(() => ({
+        layout: isHorizontal ? 'horizontal' : 'vertical',
+        isExpanded,
+    }), [isHorizontal, isExpanded]);
+    const dropdownItems = React.useMemo(() => hiddenChildren.map((child) => ({
+        text: renderDropdownChild(child),
+        action: () => { }, // clicks are handled by the child itself
+    })), [hiddenChildren, renderDropdownChild]);
+    const afterContent = React.useMemo(() => (renderAfter ? renderAfter({ setCollapseBlocker }) : null), [renderAfter, setCollapseBlocker]);
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('items', { horizontal: isHorizontal }) },
+            React.createElement(FooterLayoutContext.FooterLayoutContext.Provider, { value: value }, visibleChildren.map((child, index) => {
+                const title = getChildTitle(child);
+                // In horizontal mode, wrap in Tooltip to show title on hover
+                if (isHorizontal && title) {
+                    return (React.createElement(uikit.Tooltip, { key: getChildKey(child, index), content: title, placement: "top", openDelay: constants.ASIDE_HEADER_EXPAND_DELAY },
+                        React.createElement("div", { className: b('item') }, child)));
+                }
+                return (React.createElement("div", { key: getChildKey(child, index), className: b('item') }, child));
+            })),
+            hiddenChildren.length > 0 && (React.createElement("div", { className: b('item', { more: true }) },
+                React.createElement(uikit.DropdownMenu, { onOpenToggle: handleDropdownOpenToggle, items: dropdownItems, popupProps: {
+                        placement: isHorizontal ? 'top' : 'right',
+                        className: b('dropdown-popup'),
+                    }, switcherWrapperClassName: b('dropdown-switcher'), renderSwitcher: ({ onClick }) => (React.createElement(FooterItem.FooterItem, { id: "more", title: index.default('label_others'), icon: icons.Ellipsis, isExpanded: !isHorizontal && isExpanded, layout: isHorizontal ? 'horizontal' : 'vertical', onItemClick: (_, __, event) => {
+                            onClick(event);
+                        } })) })))),
+        afterContent && (React.createElement("div", { className: b('after', { horizontal: isHorizontal }) }, afterContent))));
+});
+FooterBar.displayName = 'FooterBar';
+
+exports.FooterBar = FooterBar;
+//# sourceMappingURL=FooterBar.js.map

package/build/cjs/components/AsideHeader/components/FooterBar/FooterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterBar.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterBar/FooterBar.tsx"],"sourcesContent":["import React, {memo, useCallback, useMemo} from 'react';\n\nimport {Ellipsis} from '@gravity-ui/icons';\nimport type {DropdownMenuItem} from '@gravity-ui/uikit';\nimport {DropdownMenu, Tooltip} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_EXPAND_DELAY} from '../../../constants';\nimport {createBlock} from '../../../utils/cn';\nimport {FooterLayoutContext, FooterLayoutContextValue} from '../../FooterLayoutContext';\nimport i18n from '../../i18n';\nimport {SetCollapseBlocker} from '../../types';\nimport {FooterItem} from '../FooterItem/FooterItem';\n\nimport {MAX_VISIBLE_ITEMS} from './constants';\n\nimport styles from './FooterBar.module.scss';\n\nconst isValidFooterElement = (child: React.ReactNode): child is React.ReactElement => {\n    return React.isValidElement(child) && child.type === FooterItem;\n};\n\nconst getChildKey = (child: React.ReactNode, fallbackIndex: number): string | number => {\n    if (React.isValidElement(child) && child.key) {\n        return child.key;\n    }\n    return fallbackIndex;\n};\n\n// Get title from child props for tooltip\nconst getChildTitle = (child: React.ReactNode): React.ReactNode => {\n    if (React.isValidElement(child) && child.props) {\n        return (child.props as {title?: React.ReactNode}).title;\n    }\n    return undefined;\n};\n\nconst b = createBlock('footer-bar', styles);\n\nexport interface FooterBarProps {\n    /** Array of footer elements (ReactNode[]) */\n    children: React.ReactNode[];\n    /** Render function for additional content after items (e.g., user profile). Receives options with setCollapseBlocker. */\n    renderAfter?: (options?: {setCollapseBlocker?: SetCollapseBlocker}) => React.ReactNode;\n    /** Registers a temporary block on collapse (e.g. while dropdown is open). Returns release function. */\n    setCollapseBlocker?: SetCollapseBlocker;\n    /** When `true`, the navigation is pinned (expanded). Items render horizontally. */\n    isPinned: boolean;\n    /** When `true`, the navigation is expanded (hover or pinned). */\n    isExpanded: boolean;\n    /** Maximum number of visible items before showing \"more\" button. Default: 5 */\n    maxVisibleItems?: number;\n}\n\nexport const FooterBar = memo<FooterBarProps>(\n    ({\n        children,\n        renderAfter,\n        setCollapseBlocker,\n        isPinned,\n        isExpanded,\n        maxVisibleItems = MAX_VISIBLE_ITEMS,\n    }) => {\n        const childArray = React.Children.toArray(children).filter(Boolean);\n\n        // If only 1 element, render in vertical mode regardless of isPinned\n        const isHorizontal = isPinned && childArray.length > 1;\n\n        const handleDropdownOpenToggle = useCallback(\n            (isOpened: boolean) => {\n                setCollapseBlocker?.(isOpened);\n            },\n            [setCollapseBlocker],\n        );\n\n        const renderDropdownChild = useCallback((child: React.ReactNode): React.ReactNode => {\n            if (!isValidFooterElement(child)) {\n                return child;\n            }\n\n            // In dropdown, always show text\n            return React.cloneElement(child, {\n                isExpanded: true,\n                layout: 'vertical',\n            });\n        }, []);\n\n        const {visibleChildren, hiddenChildren} = useMemo(() => {\n            if (childArray.length <= maxVisibleItems) {\n                return {\n                    visibleChildren: childArray,\n                    hiddenChildren: [],\n                };\n            }\n\n            // Reserve one slot for \"more\" button\n            const visibleCount = maxVisibleItems - 1;\n            return {\n                visibleChildren: childArray.slice(0, visibleCount),\n                hiddenChildren: childArray.slice(visibleCount),\n            };\n        }, [childArray, maxVisibleItems]);\n\n        const value: FooterLayoutContextValue = useMemo(\n            () => ({\n                layout: isHorizontal ? 'horizontal' : 'vertical',\n                isExpanded,\n            }),\n            [isHorizontal, isExpanded],\n        );\n\n        const dropdownItems: DropdownMenuItem[] = useMemo(\n            () =>\n                hiddenChildren.map((child) => ({\n                    text: renderDropdownChild(child),\n                    action: () => {}, // clicks are handled by the child itself\n                })),\n            [hiddenChildren, renderDropdownChild],\n        );\n\n        const afterContent = React.useMemo(\n            () => (renderAfter ? renderAfter({setCollapseBlocker}) : null),\n            [renderAfter, setCollapseBlocker],\n        );\n\n        return (\n            <div className={b()}>\n                <div className={b('items', {horizontal: isHorizontal})}>\n                    <FooterLayoutContext.Provider value={value}>\n                        {visibleChildren.map((child, index) => {\n                            const title = getChildTitle(child);\n\n                            // In horizontal mode, wrap in Tooltip to show title on hover\n                            if (isHorizontal && title) {\n                                return (\n                                    <Tooltip\n                                        key={getChildKey(child, index)}\n                                        content={title}\n                                        placement=\"top\"\n                                        openDelay={ASIDE_HEADER_EXPAND_DELAY}\n                                    >\n                                        <div className={b('item')}>{child}</div>\n                                    </Tooltip>\n                                );\n                            }\n\n                            return (\n                                <div key={getChildKey(child, index)} className={b('item')}>\n                                    {child}\n                                </div>\n                            );\n                        })}\n                    </FooterLayoutContext.Provider>\n\n                    {hiddenChildren.length > 0 && (\n                        <div className={b('item', {more: true})}>\n                            <DropdownMenu\n                                onOpenToggle={handleDropdownOpenToggle}\n                                items={dropdownItems}\n                                popupProps={{\n                                    placement: isHorizontal ? 'top' : 'right',\n                                    className: b('dropdown-popup'),\n                                }}\n                                switcherWrapperClassName={b('dropdown-switcher')}\n                                renderSwitcher={({onClick}) => (\n                                    <FooterItem\n                                        id=\"more\"\n                                        title={i18n('label_others')}\n                                        icon={Ellipsis}\n                                        isExpanded={!isHorizontal && isExpanded}\n                                        layout={isHorizontal ? 'horizontal' : 'vertical'}\n                                        onItemClick={(_, __, event) => {\n                                            onClick(event as React.MouseEvent<HTMLElement>);\n                                        }}\n                                    />\n                                )}\n                            />\n                        </div>\n                    )}\n                </div>\n\n                {afterContent && (\n                    <div className={b('after', {horizontal: isHorizontal})}>{afterContent}</div>\n                )}\n            </div>\n        );\n    },\n);\n\nFooterBar.displayName = 'FooterBar';\n"],"names":["FooterItem","createBlock","styles","memo","MAX_VISIBLE_ITEMS","useCallback","useMemo","FooterLayoutContext","Tooltip","ASIDE_HEADER_EXPAND_DELAY","DropdownMenu","i18n","Ellipsis"],"mappings":"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"}

package/build/cjs/components/AsideHeader/components/FooterBar/FooterBar.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"gn-footer-bar":"FooterBar-module__gn-footer-bar___dunXC","gnFooterBar":"FooterBar-module__gn-footer-bar___dunXC","gn-footer-bar__items":"FooterBar-module__gn-footer-bar__items___xBsUq","gnFooterBarItems":"FooterBar-module__gn-footer-bar__items___xBsUq","gn-footer-bar__items_horizontal":"FooterBar-module__gn-footer-bar__items_horizontal___DEeK6","gnFooterBarItemsHorizontal":"FooterBar-module__gn-footer-bar__items_horizontal___DEeK6","gn-footer-bar__item":"FooterBar-module__gn-footer-bar__item___KAJSe","gnFooterBarItem":"FooterBar-module__gn-footer-bar__item___KAJSe","gn-footer-bar__items_vertical":"FooterBar-module__gn-footer-bar__items_vertical___3A7jw","gnFooterBarItemsVertical":"FooterBar-module__gn-footer-bar__items_vertical___3A7jw","gn-footer-bar__after":"FooterBar-module__gn-footer-bar__after___yB8To","gnFooterBarAfter":"FooterBar-module__gn-footer-bar__after___yB8To","gn-footer-bar__after_horizontal":"FooterBar-module__gn-footer-bar__after_horizontal___t4KyN","gnFooterBarAfterHorizontal":"FooterBar-module__gn-footer-bar__after_horizontal___t4KyN","gn-footer-bar__dropdown-switcher":"FooterBar-module__gn-footer-bar__dropdown-switcher___Czw-L","gnFooterBarDropdownSwitcher":"FooterBar-module__gn-footer-bar__dropdown-switcher___Czw-L","gn-footer-bar__dropdown-popup":"FooterBar-module__gn-footer-bar__dropdown-popup___nWoMR","gnFooterBarDropdownPopup":"FooterBar-module__gn-footer-bar__dropdown-popup___nWoMR"};
+
+exports.default = styles;
+//# sourceMappingURL=FooterBar.module.scss.js.map

package/build/cjs/components/AsideHeader/components/FooterBar/FooterBar.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterBar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/build/cjs/components/AsideHeader/components/FooterBar/constants.d.ts

@@ -0,0 +1 @@
+export declare const MAX_VISIBLE_ITEMS = 5;

package/build/cjs/components/AsideHeader/components/FooterBar/constants.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const MAX_VISIBLE_ITEMS = 5;
+
+exports.MAX_VISIBLE_ITEMS = MAX_VISIBLE_ITEMS;
+//# sourceMappingURL=constants.js.map

package/build/cjs/components/AsideHeader/components/FooterBar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterBar/constants.ts"],"sourcesContent":["export const MAX_VISIBLE_ITEMS = 5;\n"],"names":[],"mappings":";;AAAO,MAAM,iBAAiB,GAAG;;;;"}

package/build/cjs/components/AsideHeader/components/FooterBar/index.d.ts

@@ -0,0 +1 @@
+export { FooterBar } from './FooterBar';

package/build/cjs/components/AsideHeader/components/FooterItem/FooterItem.css

@@ -1,2 +1,2 @@
-.FooterItem-module__gn-footer-item___Hi7NH{--gn-aside-header-item-expanded-radius:6px;border-radius:var(--gn-aside-header-item-expanded-radius);height:36px;margin-bottom:2px;width:100%}.FooterItem-module__gn-footer-item___Hi7NH:last-child{margin-bottom:0}
+.FooterItem-module__gn-footer-item___Hi7NH{height:var(--_--item-height)}.FooterItem-module__gn-footer-item_layout_horizontal___WaBU0{display:flex;justify-content:center}.FooterItem-module__gn-footer-item_layout_vertical___SjEa5{border-radius:var(--gn-aside-header-item-expanded-radius);width:100%}.FooterItem-module__gn-footer-item_layout_vertical___SjEa5:not(.FooterItem-module__gn-footer-item_footer-bar___zcMtA){margin-bottom:2px}.FooterItem-module__gn-footer-item___Hi7NH:last-child{margin-bottom:0}
 .FooterItem-module__gn-mobile-header-footer-item___dk-Wo{flex-grow:1;position:relative}.FooterItem-module__gn-mobile-header-footer-item__button___KSu25{align-items:center;background:none;border:none;box-sizing:border-box;color:inherit;cursor:pointer;display:flex;font-family:var(--g-text-body-font-family);font-size:inherit;font-weight:var(--g-text-body-font-weight);justify-content:center;outline:none;padding:13px 10px;width:100%}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo .FooterItem-module__gn-mobile-header-footer-item__icon___Spltd{color:var(--g-color-text-misc)}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo+.FooterItem-module__gn-mobile-header-footer-item___dk-Wo:before{border-left:1px solid var(--g-color-base-generic);bottom:8px;content:"";left:0;position:absolute;top:8px}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo:empty{display:none}

package/build/cjs/components/AsideHeader/components/FooterItem/FooterItem.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { AsideHeaderItem } from '../../types';
 export interface FooterItemProps extends AsideHeaderItem {
+    /** Layout mode: 'horizontal' shows icon only, 'vertical' shows icon and title. Used by FooterBar. */
+    layout?: 'horizontal' | 'vertical';
 }
 export declare function FooterItem(props: FooterItemProps): React.JSX.Element;

package/build/cjs/components/AsideHeader/components/FooterItem/FooterItem.js

@@ -1,16 +1,27 @@
 import './FooterItem.css';
 'use strict';
 
+var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
 var React = require('react');
 var constants = require('../../../constants.js');
 var cn = require('../../../utils/cn.js');
+var AsideHeaderContext = require('../../AsideHeaderContext.js');
+var FooterLayoutContext = require('../../FooterLayoutContext.js');
 var Item = require('../CompositeBar/Item/Item.js');
 var FooterItem_module = require('./FooterItem.module.scss.js');
 
 const b = cn.createBlock('footer-item', FooterItem_module.default);
 const bGlobal = cn.block('footer-item');
 function FooterItem(props) {
-    return (React.createElement(Item.Item, Object.assign({}, props, { iconSize: constants.ASIDE_HEADER_ICON_SIZE, className: `${b({ compact: props.compact })} ${bGlobal()}` })));
+    var _a, _b, _c;
+    const { layout, isExpanded: isExpandedProp } = props, restProps = tslib_es6.__rest(props, ["layout", "isExpanded"]);
+    const context = AsideHeaderContext.useAsideHeaderContextOptional();
+    const contextIsExpanded = (_a = context === null || context === undefined ? undefined : context.isExpanded) !== null && _a !== undefined ? _a : true;
+    const footerLayoutCtx = FooterLayoutContext.useFooterLayout();
+    const effectiveLayout = (_b = layout !== null && layout !== undefined ? layout : footerLayoutCtx === null || footerLayoutCtx === undefined ? undefined : footerLayoutCtx.layout) !== null && _b !== undefined ? _b : 'vertical';
+    const effectiveIsExpanded = (_c = isExpandedProp !== null && isExpandedProp !== undefined ? isExpandedProp : footerLayoutCtx === null || footerLayoutCtx === undefined ? undefined : footerLayoutCtx.isExpanded) !== null && _c !== undefined ? _c : contextIsExpanded;
+    const isInFooterBar = Boolean(footerLayoutCtx);
+    return (React.createElement(Item.Item, Object.assign({}, restProps, { layout: effectiveLayout, iconSize: constants.ASIDE_HEADER_ICON_SIZE, isExpanded: effectiveIsExpanded, setCollapseBlocker: context === null || context === undefined ? undefined : context.setCollapseBlocker, className: `${b({ collapsed: !effectiveIsExpanded, layout: effectiveLayout, 'footer-bar': isInFooterBar })} ${bGlobal()}` })));
 }
 
 exports.FooterItem = FooterItem;

package/build/cjs/components/AsideHeader/components/FooterItem/FooterItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterItem.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterItem/FooterItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../constants';\nimport {block, createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem} from '../../types';\nimport {Item} from '../CompositeBar/Item/Item';\n\nimport styles from './FooterItem.module.scss';\n\nconst b = createBlock('footer-item', styles);\nconst bGlobal = block('footer-item');\n\nexport interface FooterItemProps extends AsideHeaderItem {}\n\nexport function FooterItem(props: FooterItemProps) {\n    return (\n        <Item\n            {...props}\n            iconSize={ASIDE_HEADER_ICON_SIZE}\n            className={`${b({compact: props.compact})} ${bGlobal()}`}\n        />\n    );\n}\n"],"names":["createBlock","styles","block","Item","ASIDE_HEADER_ICON_SIZE"],"mappings":";;;;;;;;AASA,MAAM,CAAC,GAAGA,cAAW,CAAC,aAAa,EAAEC,yBAAM,CAAC;AAC5C,MAAM,OAAO,GAAGC,QAAK,CAAC,aAAa,CAAC;AAI9B,SAAU,UAAU,CAAC,KAAsB,EAAA;AAC7C,IAAA,QACI,KAAA,CAAA,aAAA,CAACC,SAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,KAAK,EAAA,EACT,QAAQ,EAAEC,gCAAsB,EAChC,SAAS,EAAE,CAAG,EAAA,CAAC,CAAC,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAC,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAE,CAAA,EAAA,CAAA,CAC1D;AAEV;;;;"}
+{"version":3,"file":"FooterItem.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterItem/FooterItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../constants';\nimport {block, createBlock} from '../../../utils/cn';\nimport {useAsideHeaderContextOptional} from '../../AsideHeaderContext';\nimport {useFooterLayout} from '../../FooterLayoutContext';\nimport {AsideHeaderItem} from '../../types';\nimport {Item} from '../CompositeBar/Item/Item';\n\nimport styles from './FooterItem.module.scss';\n\nconst b = createBlock('footer-item', styles);\nconst bGlobal = block('footer-item');\n\nexport interface FooterItemProps extends AsideHeaderItem {\n    /** Layout mode: 'horizontal' shows icon only, 'vertical' shows icon and title. Used by FooterBar. */\n    layout?: 'horizontal' | 'vertical';\n}\n\nexport function FooterItem(props: FooterItemProps) {\n    const {layout, isExpanded: isExpandedProp, ...restProps} = props;\n    const context = useAsideHeaderContextOptional();\n    const contextIsExpanded = context?.isExpanded ?? true;\n\n    const footerLayoutCtx = useFooterLayout();\n    const effectiveLayout = layout ?? footerLayoutCtx?.layout ?? 'vertical';\n    const effectiveIsExpanded = isExpandedProp ?? footerLayoutCtx?.isExpanded ?? contextIsExpanded;\n    const isInFooterBar = Boolean(footerLayoutCtx);\n\n    return (\n        <Item\n            {...restProps}\n            layout={effectiveLayout}\n            iconSize={ASIDE_HEADER_ICON_SIZE}\n            isExpanded={effectiveIsExpanded}\n            setCollapseBlocker={context?.setCollapseBlocker}\n            className={`${b({collapsed: !effectiveIsExpanded, layout: effectiveLayout, 'footer-bar': isInFooterBar})} ${bGlobal()}`}\n        />\n    );\n}\n"],"names":["createBlock","styles","block","__rest","useAsideHeaderContextOptional","useFooterLayout","Item","ASIDE_HEADER_ICON_SIZE"],"mappings":";;;;;;;;;;;AAWA,MAAM,CAAC,GAAGA,cAAW,CAAC,aAAa,EAAEC,yBAAM,CAAC;AAC5C,MAAM,OAAO,GAAGC,QAAK,CAAC,aAAa,CAAC;AAO9B,SAAU,UAAU,CAAC,KAAsB,EAAA;;AAC7C,IAAA,MAAM,EAAC,MAAM,EAAE,UAAU,EAAE,cAAc,EAAA,GAAkB,KAAK,EAAlB,SAAS,GAAIC,gBAAA,CAAA,KAAK,EAA1D,CAAA,QAAA,EAAA,YAAA,CAAkD,CAAQ;AAChE,IAAA,MAAM,OAAO,GAAGC,gDAA6B,EAAE;AAC/C,IAAA,MAAM,iBAAiB,GAAG,CAAA,EAAA,GAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,UAAU,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,IAAI;AAErD,IAAA,MAAM,eAAe,GAAGC,mCAAe,EAAE;AACzC,IAAA,MAAM,eAAe,GAAG,CAAA,EAAA,GAAA,MAAM,KAAN,IAAA,IAAA,MAAM,iBAAN,MAAM,GAAI,eAAe,KAAA,IAAA,IAAf,eAAe,KAAf,SAAA,GAAA,SAAA,GAAA,eAAe,CAAE,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,UAAU;AACvE,IAAA,MAAM,mBAAmB,GAAG,CAAA,EAAA,GAAA,cAAc,KAAd,IAAA,IAAA,cAAc,iBAAd,cAAc,GAAI,eAAe,KAAA,IAAA,IAAf,eAAe,KAAf,SAAA,GAAA,SAAA,GAAA,eAAe,CAAE,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,iBAAiB;AAC9F,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,eAAe,CAAC;IAE9C,QACI,KAAC,CAAA,aAAA,CAAAC,SAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,SAAS,IACb,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAEC,gCAAsB,EAChC,UAAU,EAAE,mBAAmB,EAC/B,kBAAkB,EAAE,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,kBAAkB,EAC/C,SAAS,EAAE,CAAG,EAAA,CAAC,CAAC,EAAC,SAAS,EAAE,CAAC,mBAAmB,EAAE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAC,CAAC,CAAI,CAAA,EAAA,OAAO,EAAE,CAAA,CAAE,EACzH,CAAA,CAAA;AAEV;;;;"}

package/build/cjs/components/AsideHeader/components/FooterItem/FooterItem.module.scss.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH"};
+var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH","gn-footer-item_layout_horizontal":"FooterItem-module__gn-footer-item_layout_horizontal___WaBU0","gnFooterItemLayoutHorizontal":"FooterItem-module__gn-footer-item_layout_horizontal___WaBU0","gn-footer-item_layout_vertical":"FooterItem-module__gn-footer-item_layout_vertical___SjEa5","gnFooterItemLayoutVertical":"FooterItem-module__gn-footer-item_layout_vertical___SjEa5","gn-footer-item_footer-bar":"FooterItem-module__gn-footer-item_footer-bar___zcMtA","gnFooterItemFooterBar":"FooterItem-module__gn-footer-item_footer-bar___zcMtA"};
 
 exports.default = styles;
 //# sourceMappingURL=FooterItem.module.scss.js.map

package/build/cjs/components/AsideHeader/components/Header.js

@@ -4,18 +4,19 @@ var React = require('react');
 var uikit = require('@gravity-ui/uikit');
 var Logo = require('../../Logo/Logo.js');
 var constants = require('../../constants.js');
+var getCollapsedWidth = require('../../utils/getCollapsedWidth.js');
 var AsideHeaderContext = require('../AsideHeaderContext.js');
 var utils = require('../utils.js');
 var useGroupedMenuItems = require('./AllPagesPanel/useGroupedMenuItems.js');
 var CollapseButton = require('./CollapseButton/CollapseButton.js');
 var CompositeBar = require('./CompositeBar/CompositeBar.js');
+var dividerCollapsedCompact = require('../../../assets/icons/divider-collapsed-compact.svg.js');
 var dividerCollapsed = require('../../../assets/icons/divider-collapsed.svg.js');
 
 const DEFAULT_SUBHEADER_ITEMS = [];
 const HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';
 const Header = () => {
-    const { logo, isExpanded, onItemClick, onClosePanel, headerDecoration, subheaderItems, hideCollapseButton, } = AsideHeaderContext.useAsideHeaderInnerContext();
-    const compact = !isExpanded;
+    const { logo, isExpanded, onItemClick, onClosePanel, setCollapseBlocker, headerDecoration, subheaderItems, hideCollapseButton, isCompactMode, } = AsideHeaderContext.useAsideHeaderInnerContext();
     const items = useGroupedMenuItems.useGroupedMenuItems(subheaderItems || DEFAULT_SUBHEADER_ITEMS);
     const onLogoClick = React.useCallback((event) => {
         var _a;
@@ -24,10 +25,12 @@ const Header = () => {
     }, [onClosePanel, logo]);
     return (React.createElement("div", { className: utils.b('header', { ['with-decoration']: headerDecoration }) },
         React.createElement("div", { className: utils.b('logo-container', { 'without-logo': !logo }) },
-            logo && (React.createElement(Logo.Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: utils.b('logo-button'), iconPlaceClassName: utils.b('logo-icon-place') }))),
-            !hideCollapseButton && React.createElement(CollapseButton.CollapseButton, { className: utils.b('pin-button', { compact }) })),
-        React.createElement(CompositeBar.CompositeBar, { compositeId: HEADER_COMPOSITE_ID, menuItemClassName: utils.b('menu-item'), type: "subheader", compact: compact, items: items, onItemClick: onItemClick }),
-        headerDecoration && (React.createElement(uikit.Icon, { data: dividerCollapsed.default, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT }))));
+            logo && (React.createElement(Logo.Logo, Object.assign({}, logo, { placement: "header", isCompactMode: isCompactMode, onClick: onLogoClick, isExpanded: isExpanded, buttonClassName: utils.b('logo-button'), iconPlaceClassName: utils.b('logo-icon-place') }))),
+            !hideCollapseButton && (React.createElement(CollapseButton.CollapseButton, { className: utils.b('pin-button', { collapsed: !isExpanded }), isCompactMode: isCompactMode }))),
+        React.createElement(CompositeBar.CompositeBar, { compositeId: HEADER_COMPOSITE_ID, menuItemClassName: utils.b('menu-item'), type: "subheader", isExpanded: isExpanded, items: items, onItemClick: onItemClick, isCompactMode: isCompactMode, setCollapseBlocker: setCollapseBlocker }),
+        headerDecoration && (React.createElement(uikit.Icon, { data: isCompactMode
+                ? dividerCollapsedCompact.default
+                : dividerCollapsed.default, className: utils.b('header-divider'), width: getCollapsedWidth.getCollapsedWidth(isCompactMode), height: isCompactMode ? constants.HEADER_DIVIDER_HEIGHT_COMPACT : constants.HEADER_DIVIDER_HEIGHT }))));
 };
 
 exports.Header = Header;

package/build/cjs/components/AsideHeader/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../src/components/AsideHeader/components/Header.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {Logo} from '../../Logo';\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT} from '../../constants';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {AsideHeaderItem} from '../types';\nimport {b} from '../utils';\n\nimport {useGroupedMenuItems} from './AllPagesPanel/useGroupedMenuItems';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CompositeBar} from './CompositeBar';\n\nimport headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';\n\nconst DEFAULT_SUBHEADER_ITEMS: AsideHeaderItem[] = [];\nconst HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';\n\nexport const Header = () => {\n    const {\n        logo,\n        isExpanded,\n        onItemClick,\n        onClosePanel,\n        headerDecoration,\n        subheaderItems,\n        hideCollapseButton,\n    } = useAsideHeaderInnerContext();\n\n    const compact = !isExpanded;\n\n    const items = useGroupedMenuItems(subheaderItems || DEFAULT_SUBHEADER_ITEMS);\n\n    const onLogoClick = useCallback(\n        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            onClosePanel?.();\n            logo?.onClick?.(event);\n        },\n        [onClosePanel, logo],\n    );\n\n    return (\n        <div className={b('header', {['with-decoration']: headerDecoration})}>\n            <div className={b('logo-container', {'without-logo': !logo})}>\n                {logo && (\n                    <Logo\n                        {...logo}\n                        onClick={onLogoClick}\n                        compact={compact}\n                        buttonClassName={b('logo-button')}\n                        iconPlaceClassName={b('logo-icon-place')}\n                    />\n                )}\n\n                {!hideCollapseButton && <CollapseButton className={b('pin-button', {compact})} />}\n            </div>\n\n            <CompositeBar\n                compositeId={HEADER_COMPOSITE_ID}\n                menuItemClassName={b('menu-item')}\n                type=\"subheader\"\n                compact={compact}\n                items={items}\n                onItemClick={onItemClick}\n            />\n\n            {headerDecoration && (\n                <Icon\n                    data={headerDividerCollapsedIcon}\n                    className={b('header-divider')}\n                    width={ASIDE_HEADER_COMPACT_WIDTH}\n                    height={HEADER_DIVIDER_HEIGHT}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["useAsideHeaderInnerContext","useGroupedMenuItems","useCallback","b","Logo","CollapseButton","CompositeBar","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,uBAAuB,GAAsB,EAAE;AACrD,MAAM,mBAAmB,GAAG,4CAA4C;AAEjE,MAAM,MAAM,GAAG,MAAK;AACvB,IAAA,MAAM,EACF,IAAI,EACJ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,kBAAkB,GACrB,GAAGA,6CAA0B,EAAE;AAEhC,IAAA,MAAM,OAAO,GAAG,CAAC,UAAU;IAE3B,MAAM,KAAK,GAAGC,uCAAmB,CAAC,cAAc,IAAI,uBAAuB,CAAC;AAE5E,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAC3B,CAAC,KAAgD,KAAI;;AACjD,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;QAChB,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,KAAK,CAAC;AAC1B,KAAC,EACD,CAAC,YAAY,EAAE,IAAI,CAAC,CACvB;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,OAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAChE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEA,OAAC,CAAC,gBAAgB,EAAE,EAAC,cAAc,EAAE,CAAC,IAAI,EAAC,CAAC,EAAA;AACvD,YAAA,IAAI,KACD,KAAC,CAAA,aAAA,CAAAC,SAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,EACR,EAAA,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAED,OAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAEA,OAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;AAEA,YAAA,CAAC,kBAAkB,IAAI,KAAA,CAAA,aAAA,CAACE,6BAAc,EAAA,EAAC,SAAS,EAAEF,OAAC,CAAC,YAAY,EAAE,EAAC,OAAO,EAAC,CAAC,GAAI,CAC/E;AAEN,QAAA,KAAA,CAAA,aAAA,CAACG,yBAAY,EAAA,EACT,WAAW,EAAE,mBAAmB,EAChC,iBAAiB,EAAEH,OAAC,CAAC,WAAW,CAAC,EACjC,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EAC1B,CAAA;QAED,gBAAgB,KACb,KAAA,CAAA,aAAA,CAACI,UAAI,EAAA,EACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEL,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEM,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,EAC/B,CAAA,CACL,CACC;AAEd;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../../../src/components/AsideHeader/components/Header.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {Logo} from '../../Logo';\nimport {HEADER_DIVIDER_HEIGHT, HEADER_DIVIDER_HEIGHT_COMPACT} from '../../constants';\nimport {getCollapsedWidth} from '../../utils/getCollapsedWidth';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {AsideHeaderItem} from '../types';\nimport {b} from '../utils';\n\nimport {useGroupedMenuItems} from './AllPagesPanel/useGroupedMenuItems';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CompositeBar} from './CompositeBar';\n\nimport headerDividerCollapsedCompactIcon from '../../../../assets/icons/divider-collapsed-compact.svg';\nimport headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';\n\nconst DEFAULT_SUBHEADER_ITEMS: AsideHeaderItem[] = [];\nconst HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';\n\nexport const Header = () => {\n    const {\n        logo,\n        isExpanded,\n        onItemClick,\n        onClosePanel,\n        setCollapseBlocker,\n        headerDecoration,\n        subheaderItems,\n        hideCollapseButton,\n        isCompactMode,\n    } = useAsideHeaderInnerContext();\n\n    const items = useGroupedMenuItems(subheaderItems || DEFAULT_SUBHEADER_ITEMS);\n\n    const onLogoClick = useCallback(\n        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            onClosePanel?.();\n            logo?.onClick?.(event);\n        },\n        [onClosePanel, logo],\n    );\n\n    return (\n        <div className={b('header', {['with-decoration']: headerDecoration})}>\n            <div className={b('logo-container', {'without-logo': !logo})}>\n                {logo && (\n                    <Logo\n                        {...logo}\n                        placement=\"header\"\n                        isCompactMode={isCompactMode}\n                        onClick={onLogoClick}\n                        isExpanded={isExpanded}\n                        buttonClassName={b('logo-button')}\n                        iconPlaceClassName={b('logo-icon-place')}\n                    />\n                )}\n\n                {!hideCollapseButton && (\n                    <CollapseButton\n                        className={b('pin-button', {collapsed: !isExpanded})}\n                        isCompactMode={isCompactMode}\n                    />\n                )}\n            </div>\n\n            <CompositeBar\n                compositeId={HEADER_COMPOSITE_ID}\n                menuItemClassName={b('menu-item')}\n                type=\"subheader\"\n                isExpanded={isExpanded}\n                items={items}\n                onItemClick={onItemClick}\n                isCompactMode={isCompactMode}\n                setCollapseBlocker={setCollapseBlocker}\n            />\n\n            {headerDecoration && (\n                <Icon\n                    data={\n                        isCompactMode\n                            ? headerDividerCollapsedCompactIcon\n                            : headerDividerCollapsedIcon\n                    }\n                    className={b('header-divider')}\n                    width={getCollapsedWidth(isCompactMode)}\n                    height={isCompactMode ? HEADER_DIVIDER_HEIGHT_COMPACT : HEADER_DIVIDER_HEIGHT}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["useAsideHeaderInnerContext","useGroupedMenuItems","useCallback","b","Logo","CollapseButton","CompositeBar","Icon","headerDividerCollapsedCompactIcon","headerDividerCollapsedIcon","getCollapsedWidth","HEADER_DIVIDER_HEIGHT_COMPACT","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,uBAAuB,GAAsB,EAAE;AACrD,MAAM,mBAAmB,GAAG,4CAA4C;AAEjE,MAAM,MAAM,GAAG,MAAK;IACvB,MAAM,EACF,IAAI,EACJ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,aAAa,GAChB,GAAGA,6CAA0B,EAAE;IAEhC,MAAM,KAAK,GAAGC,uCAAmB,CAAC,cAAc,IAAI,uBAAuB,CAAC;AAE5E,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAC3B,CAAC,KAAgD,KAAI;;AACjD,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;QAChB,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,KAAK,CAAC;AAC1B,KAAC,EACD,CAAC,YAAY,EAAE,IAAI,CAAC,CACvB;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,OAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAChE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEA,OAAC,CAAC,gBAAgB,EAAE,EAAC,cAAc,EAAE,CAAC,IAAI,EAAC,CAAC,EAAA;AACvD,YAAA,IAAI,KACD,KAAA,CAAA,aAAA,CAACC,SAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,IAAI,EACR,EAAA,SAAS,EAAC,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAED,OAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAEA,OAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;YAEA,CAAC,kBAAkB,KAChB,KAAC,CAAA,aAAA,CAAAE,6BAAc,IACX,SAAS,EAAEF,OAAC,CAAC,YAAY,EAAE,EAAC,SAAS,EAAE,CAAC,UAAU,EAAC,CAAC,EACpD,aAAa,EAAE,aAAa,EAC9B,CAAA,CACL,CACC;AAEN,QAAA,KAAA,CAAA,aAAA,CAACG,yBAAY,EACT,EAAA,WAAW,EAAE,mBAAmB,EAChC,iBAAiB,EAAEH,OAAC,CAAC,WAAW,CAAC,EACjC,IAAI,EAAC,WAAW,EAChB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,kBAAkB,EAAE,kBAAkB,EACxC,CAAA;AAED,QAAA,gBAAgB,KACb,KAAA,CAAA,aAAA,CAACI,UAAI,EACD,EAAA,IAAI,EACA;AACI,kBAAEC;AACF,kBAAEC,wBAA0B,EAEpC,SAAS,EAAEN,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEO,mCAAiB,CAAC,aAAa,CAAC,EACvC,MAAM,EAAE,aAAa,GAAGC,uCAA6B,GAAGC,+BAAqB,EAAA,CAC/E,CACL,CACC;AAEd;;;;"}

package/build/cjs/components/AsideHeader/components/PageLayout/AsideFallback.css

@@ -0,0 +1,2 @@
+.AsideHeader-module__g-root___EuNRw{--gn-aside-top-panel-height:0px}
+.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:56px;--_--item-height:36px;--_--item-margin-inline:10px;--gn-aside-header-item-expanded-radius:6px;--gn-aside-header-header-divider-height:29px;--_--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%}.AsideHeader-module__gn-aside-header__aside___AyP0y{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);transition:width .15s ease-in-out;width:inherit;z-index:var(--gn-aside-header-z-index,100)}.AsideHeader-module__gn-aside-header__aside___AyP0y: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}.AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM{inset:0;position:absolute;z-index:1}.AsideHeader-module__gn-aside-header__aside-content___w5GOS{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.AsideHeader-module__gn-aside-header__aside-content___w5GOS>.AsideHeader-module__gn-aside-header-logo___6MdXx{margin:8px 0}.AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye{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))}.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header__aside_compact-mode___x4hPl{--_--item-height:28px;--_--item-margin-inline:6px;--_--item-collapsed-radius:4px;--gn-aside-header-item-expanded-radius:4px;--gn-aside-header-header-divider-height:22px;--gn-aside-header-min-width:40px}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX{left:0;position:fixed;top:0}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX+.AsideHeader-module__gn-aside-header__content___4-mBl{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);width:100%;z-index:var(--gn-aside-header-content-z-index,95)}.AsideHeader-module__gn-aside-header__content_expanded-by-hover___b0Rcg{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__header___m5aIU{background-color:var(--gn-aside-top-decoration-background-color);box-sizing:border-box;flex:none;padding-bottom:25px;padding-top:8px;position:relative;width:100%;z-index:1}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{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}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:before{background-color:var(--gn-aside-top-divider-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}.AsideHeader-module__gn-aside-header__header___m5aIU: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}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:after{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH{margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container___pK10O{align-items:center;display:flex;justify-content:space-between;margin-inline:var(--_--item-margin-inline);margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container_without-logo___pSqqc{border-bottom:1px solid var(--g-color-line-generic);margin-bottom:var(--g-spacing-2);padding-bottom:var(--g-spacing-2)}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--_--item-height);width:var(--_--item-height)}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer___vmoTl{background-color:var(--gn-aside-bottom-background-color);display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer_horizontal___QTq4U{margin:0}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panels___-fdu4, .AsideHeader-module__gn-aside-header__panels___-fdu4.g-drawer{inset:var(--gn-top-alert-height,0) 0 0;position:fixed}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:var(--gn-top-alert-height,0)}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);background:var(--g-color-base-background);position:fixed;top:0;width:100%}.AsideHeader-module__gn-aside-header__pin-button___M61Ht{margin-left:auto}.AsideHeader-module__gn-aside-header__pin-button_collapsed___mwHr1{margin-right:auto}.AsideHeader-module__gn-aside-header__panel-content___Y2lCR{height:100%}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}

package/build/cjs/components/AsideHeader/components/PageLayout/AsideFallback.js

@@ -1,3 +1,4 @@
+import './AsideFallback.css';
 'use strict';
 
 var React = require('react');
@@ -8,14 +9,14 @@ var utils = require('../../utils.js');
 var dividerCollapsed = require('../../../../assets/icons/divider-collapsed.svg.js');
 
 const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
-    const { compact } = AsideHeaderContext.useAsideHeaderContext();
-    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
+    const { pinned } = AsideHeaderContext.useAsideHeaderContext();
+    const widthVar = pinned ? '--gn-aside-header-size' : '--gn-aside-header-min-width';
     const subheaderHeight = (1 + subheaderItemsCount) * constants.ITEM_HEIGHT;
     return (React.createElement("div", { className: utils.b('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa },
         React.createElement("div", { className: utils.b('aside-content', { 'with-decoration': headerDecoration }) },
             React.createElement("div", { className: utils.b('header', { 'with-decoration': headerDecoration }) },
                 React.createElement("div", { style: { height: subheaderHeight } }),
-                compact && headerDecoration ? (React.createElement(uikit.Icon, { data: dividerCollapsed.default, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT })) : null),
+                !pinned && headerDecoration ? (React.createElement(uikit.Icon, { data: dividerCollapsed.default, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COLLAPSED_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT })) : null),
             React.createElement("div", { style: { flex: 1 } }))));
 };
 

package/build/cjs/components/AsideHeader/components/PageLayout/AsideFallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsideFallback.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon, QAProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {b} from '../../utils';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\ninterface Props extends QAProps {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {\n    const {compact} = useAsideHeaderContext();\n\n    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;\n\n    return (\n        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {compact && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COMPACT_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["useAsideHeaderContext","ITEM_HEIGHT","b","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,OAAO,EAAC,GAAGA,wCAAqB,EAAE;IAEzC,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB;IAEnF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAIC,qBAAW;AAE/D,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,OAAO,IAAI,gBAAgB,IACxB,KAAA,CAAA,aAAA,CAACC,UAAI,EAAA,EACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEF,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEG,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,GAC/B,IACF,IAAI,CACN;YACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}
+{"version":3,"file":"AsideFallback.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon, QAProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_COLLAPSED_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {b} from '../../utils';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\ninterface Props extends QAProps {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {\n    const {pinned} = useAsideHeaderContext();\n\n    const widthVar = pinned ? '--gn-aside-header-size' : '--gn-aside-header-min-width';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;\n\n    return (\n        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {!pinned && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COLLAPSED_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["useAsideHeaderContext","ITEM_HEIGHT","b","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COLLAPSED_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,MAAM,EAAC,GAAGA,wCAAqB,EAAE;IAExC,MAAM,QAAQ,GAAG,MAAM,GAAG,wBAAwB,GAAG,6BAA6B;IAElF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAIC,qBAAW;AAE/D,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,CAAC,MAAM,IAAI,gBAAgB,IACxB,KAAC,CAAA,aAAA,CAAAC,UAAI,IACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEF,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEG,sCAA4B,EACnC,MAAM,EAAEC,+BAAqB,GAC/B,IACF,IAAI,CACN;YACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}

package/build/cjs/components/AsideHeader/components/PageLayout/PageLayout.css

@@ -0,0 +1,2 @@
+.AsideHeader-module__g-root___EuNRw{--gn-aside-top-panel-height:0px}
+.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:56px;--_--item-height:36px;--_--item-margin-inline:10px;--gn-aside-header-item-expanded-radius:6px;--gn-aside-header-header-divider-height:29px;--_--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%}.AsideHeader-module__gn-aside-header__aside___AyP0y{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);transition:width .15s ease-in-out;width:inherit;z-index:var(--gn-aside-header-z-index,100)}.AsideHeader-module__gn-aside-header__aside___AyP0y: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}.AsideHeader-module__gn-aside-header__aside-popup-anchor___N3tgM{inset:0;position:absolute;z-index:1}.AsideHeader-module__gn-aside-header__aside-content___w5GOS{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.AsideHeader-module__gn-aside-header__aside-content___w5GOS>.AsideHeader-module__gn-aside-header-logo___6MdXx{margin:8px 0}.AsideHeader-module__gn-aside-header__aside-content_with-decoration___UsCye{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))}.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.AsideHeader-module__gn-aside-header__aside_compact-mode___x4hPl{--_--item-height:28px;--_--item-margin-inline:6px;--_--item-collapsed-radius:4px;--gn-aside-header-item-expanded-radius:4px;--gn-aside-header-header-divider-height:22px;--gn-aside-header-min-width:40px}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside___AyP0y{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX{left:0;position:fixed;top:0}.AsideHeader-module__gn-aside-header__aside-transition-enter-active___nVB3u+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter-done___zfhNX+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-enter___QJvnr+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit-active___NzI3l+.AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__aside-transition-exit___n28FX+.AsideHeader-module__gn-aside-header__content___4-mBl{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);width:100%;z-index:var(--gn-aside-header-content-z-index,95)}.AsideHeader-module__gn-aside-header__content_expanded-by-hover___b0Rcg{padding-left:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__header___m5aIU{background-color:var(--gn-aside-top-decoration-background-color);box-sizing:border-box;flex:none;padding-bottom:25px;padding-top:8px;position:relative;width:100%;z-index:1}.AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{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}.AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:before{background-color:var(--gn-aside-top-divider-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}.AsideHeader-module__gn-aside-header__header___m5aIU: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}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:block}.AsideHeader-module__gn-aside-header_collapsed___Mnljj .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:after{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH{margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container___pK10O{align-items:center;display:flex;justify-content:space-between;margin-inline:var(--_--item-margin-inline);margin-bottom:2px}.AsideHeader-module__gn-aside-header__logo-container_without-logo___pSqqc{border-bottom:1px solid var(--g-color-line-generic);margin-bottom:var(--g-spacing-2);padding-bottom:var(--g-spacing-2)}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--_--item-height);width:var(--_--item-height)}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer___vmoTl{background-color:var(--gn-aside-bottom-background-color);display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__footer_horizontal___QTq4U{margin:0}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panels___-fdu4, .AsideHeader-module__gn-aside-header__panels___-fdu4.g-drawer{inset:var(--gn-top-alert-height,0) 0 0;position:fixed}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top:var(--gn-top-alert-height,0)}.AsideHeader-module__gn-aside-header__pane-container___y-v2e{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.AsideHeader-module__gn-aside-header__top-alert___hY12r{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);background:var(--g-color-base-background);position:fixed;top:0;width:100%}.AsideHeader-module__gn-aside-header__pin-button___M61Ht{margin-left:auto}.AsideHeader-module__gn-aside-header__pin-button_collapsed___mwHr1{margin-right:auto}.AsideHeader-module__gn-aside-header__panel-content___Y2lCR{height:100%}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}

package/build/cjs/components/AsideHeader/components/PageLayout/PageLayout.d.ts

@@ -2,9 +2,11 @@ import React, { PropsWithChildren } from 'react';
 import { ContentProps } from '../../../Content';
 import { LayoutProps } from '../../types';
 export interface PageLayoutProps extends PropsWithChildren<LayoutProps> {
-    onChangeCompact?: (compact: boolean) => void;
+    onChangePinned?: (pinned: boolean) => void;
+    /** When `true`, menu items use compact height. */
+    isCompactMode?: boolean;
 }
-declare const PageLayout: (({ compact, className, children, topAlert, onChangeCompact }: PageLayoutProps) => React.JSX.Element) & {
+declare const PageLayout: (({ pinned, className, children, topAlert, onChangePinned, isCompactMode, }: PageLayoutProps) => React.JSX.Element) & {
     Content: React.FC<React.PropsWithChildren<Pick<ContentProps, "renderContent">>>;
 };
 export { PageLayout };

package/build/cjs/components/AsideHeader/components/PageLayout/PageLayout.js

@@ -1,8 +1,10 @@
+import './PageLayout.css';
 'use strict';
 
 var React = require('react');
 var Content = require('../../../Content/Content.js');
 var constants = require('../../../constants.js');
+var getCollapsedWidth = require('../../../utils/getCollapsedWidth.js');
 var AsideHeaderContext = require('../../AsideHeaderContext.js');
 var useIsExpanded = require('../../hooks/useIsExpanded.js');
 var utils = require('../../utils.js');
@@ -20,17 +22,18 @@ function calcEstimatedTopAlertHeight(topAlert) {
         (topAlert.title ? TITLE_HEIGHT_BONUS : 0) -
         (topAlert.dense ? DENSE_HEIGHT_REDUCTION : 0));
 }
-const Layout = ({ compact, className, children, topAlert, onChangeCompact }) => {
-    const { isExpanded, onExpand, onFold } = useIsExpanded.useIsExpanded(compact);
-    const size = isExpanded ? constants.ASIDE_HEADER_EXPANDED_WIDTH : constants.ASIDE_HEADER_COMPACT_WIDTH;
+const Layout = ({ pinned, className, children, topAlert, onChangePinned, isCompactMode, }) => {
+    const { isExpanded, onExpand, onFold, setCollapseBlocker } = useIsExpanded.useIsExpanded(pinned);
+    const size = isExpanded ? constants.ASIDE_HEADER_EXPANDED_WIDTH : getCollapsedWidth.getCollapsedWidth(isCompactMode);
     const asideHeaderContextValue = React.useMemo(() => ({
         size,
-        compact,
+        pinned,
         isExpanded,
-        onChangeCompact,
+        onChangePinned,
         onExpand,
         onFold,
-    }), [size, compact, isExpanded, onChangeCompact, onExpand, onFold]);
+        setCollapseBlocker,
+    }), [size, pinned, isExpanded, onChangePinned, onExpand, onFold, setCollapseBlocker]);
     const estimatedTopAlertHeight = calcEstimatedTopAlertHeight(topAlert);
     // Reserve margin immediately on server render through inline variable on container.
     // After TopAlert mount, the exact height will be set by hook.
@@ -48,7 +51,7 @@ const Layout = ({ compact, className, children, topAlert, onChangeCompact }) =>
     };
     const preloadHeightValue = getPreloadHeightValue();
     return (React.createElement(AsideHeaderContext.AsideHeaderContextProvider, { value: asideHeaderContextValue },
-        React.createElement("div", { className: utils.b({ compact: !isExpanded }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
+        React.createElement("div", { className: utils.b({ collapsed: !isExpanded }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
             typeof preloadHeightValue === 'number' ? (React.createElement("style", { dangerouslySetInnerHTML: {
                     __html: `.g-root{--gn-top-alert-height:${preloadHeightValue}px;}`,
                 } })) : null,
@@ -57,8 +60,8 @@ const Layout = ({ compact, className, children, topAlert, onChangeCompact }) =>
             React.createElement("div", { className: utils.b('pane-container') }, children))));
 };
 const ConnectedContent = ({ children, renderContent, }) => {
-    const { size, compact, isExpanded } = AsideHeaderContext.useAsideHeaderContext();
-    const isExpandedByHover = compact && isExpanded;
+    const { size, pinned, isExpanded } = AsideHeaderContext.useAsideHeaderContext();
+    const isExpandedByHover = !pinned && isExpanded;
     return (React.createElement(Content.Content, { size: size, className: utils.b('content', { 'expanded-by-hover': isExpandedByHover }), renderContent: renderContent }, children));
 };
 const PageLayout = Object.assign(Layout, {

package/build/cjs/components/AsideHeader/components/PageLayout/PageLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, {PropsWithChildren, Suspense, useMemo} from 'react';\n\nimport {Content, ContentProps} from '../../../Content';\nimport {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../../constants';\nimport {TopAlertProps} from '../../../types';\nimport {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {useIsExpanded} from '../../hooks/useIsExpanded';\nimport {LayoutProps} from '../../types';\nimport {b} from '../../utils';\n\nconst TopAlert = React.lazy(() =>\n    import('../../../TopAlert').then((module) => ({default: module.TopAlert})),\n);\n\n// Constants for TopAlert height calculation (in pixels)\nconst BASE_ALERT_HEIGHT = 60; // Base height of the alert component\nconst TITLE_HEIGHT_BONUS = 14; // Additional height when title is present\nconst DENSE_HEIGHT_REDUCTION = 16; // Height reduction when dense mode is enabled\n\nfunction calcEstimatedTopAlertHeight(topAlert?: TopAlertProps) {\n    if (!topAlert || 'render' in topAlert) {\n        return 0;\n    }\n\n    return (\n        BASE_ALERT_HEIGHT +\n        (topAlert.title ? TITLE_HEIGHT_BONUS : 0) -\n        (topAlert.dense ? DENSE_HEIGHT_REDUCTION : 0)\n    );\n}\n\nexport interface PageLayoutProps extends PropsWithChildren<LayoutProps> {\n    onChangeCompact?: (compact: boolean) => void;\n}\n\nconst Layout = ({compact, className, children, topAlert, onChangeCompact}: PageLayoutProps) => {\n    const {isExpanded, onExpand, onFold} = useIsExpanded(compact);\n\n    const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : ASIDE_HEADER_COMPACT_WIDTH;\n\n    const asideHeaderContextValue = useMemo(\n        () => ({\n            size,\n            compact,\n            isExpanded,\n            onChangeCompact,\n            onExpand,\n            onFold,\n        }),\n        [size, compact, isExpanded, onChangeCompact, onExpand, onFold],\n    );\n\n    const estimatedTopAlertHeight = calcEstimatedTopAlertHeight(topAlert);\n\n    // Reserve margin immediately on server render through inline variable on container.\n    // After TopAlert mount, the exact height will be set by hook.\n    const getPreloadHeightValue = (): number | undefined => {\n        if (!topAlert || 'render' in topAlert || typeof topAlert.preloadHeight === 'undefined') {\n            return undefined;\n        }\n\n        if (topAlert.preloadHeight === true) {\n            return estimatedTopAlertHeight;\n        }\n\n        if (typeof topAlert.preloadHeight === 'number') {\n            return topAlert.preloadHeight;\n        }\n\n        return undefined;\n    };\n\n    const preloadHeightValue = getPreloadHeightValue();\n\n    return (\n        <AsideHeaderContextProvider value={asideHeaderContextValue}>\n            <div\n                className={b({compact: !isExpanded}, className)}\n                style={{\n                    ...({'--gn-aside-header-size': `${size}px`} as React.CSSProperties),\n                }}\n            >\n                {typeof preloadHeightValue === 'number' ? (\n                    <style\n                        dangerouslySetInnerHTML={{\n                            __html: `.g-root{--gn-top-alert-height:${preloadHeightValue}px;}`,\n                        }}\n                    />\n                ) : null}\n                {topAlert && (\n                    <Suspense fallback={null}>\n                        <TopAlert className={b('top-alert')} alert={topAlert} />\n                    </Suspense>\n                )}\n                <div className={b('pane-container')}>{children}</div>\n            </div>\n        </AsideHeaderContextProvider>\n    );\n};\n\nconst ConnectedContent: React.FC<PropsWithChildren<Pick<ContentProps, 'renderContent'>>> = ({\n    children,\n    renderContent,\n}) => {\n    const {size, compact, isExpanded} = useAsideHeaderContext();\n    const isExpandedByHover = compact && isExpanded;\n\n    return (\n        <Content\n            size={size}\n            className={b('content', {'expanded-by-hover': isExpandedByHover})}\n            renderContent={renderContent}\n        >\n            {children}\n        </Content>\n    );\n};\n\nconst PageLayout = Object.assign(Layout, {\n    Content: ConnectedContent,\n});\n\nexport {PageLayout};\n"],"names":["useIsExpanded","ASIDE_HEADER_EXPANDED_WIDTH","ASIDE_HEADER_COMPACT_WIDTH","useMemo","AsideHeaderContextProvider","b","Suspense","useAsideHeaderContext","Content"],"mappings":"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"}
+{"version":3,"file":"PageLayout.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import React, {PropsWithChildren, Suspense, useMemo} from 'react';\n\nimport {Content, ContentProps} from '../../../Content';\nimport {ASIDE_HEADER_EXPANDED_WIDTH} from '../../../constants';\nimport {TopAlertProps} from '../../../types';\nimport {getCollapsedWidth} from '../../../utils/getCollapsedWidth';\nimport {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {useIsExpanded} from '../../hooks/useIsExpanded';\nimport {LayoutProps} from '../../types';\nimport {b} from '../../utils';\n\nconst TopAlert = React.lazy(() =>\n    import('../../../TopAlert').then((module) => ({default: module.TopAlert})),\n);\n\n// Constants for TopAlert height calculation (in pixels)\nconst BASE_ALERT_HEIGHT = 60; // Base height of the alert component\nconst TITLE_HEIGHT_BONUS = 14; // Additional height when title is present\nconst DENSE_HEIGHT_REDUCTION = 16; // Height reduction when dense mode is enabled\n\nfunction calcEstimatedTopAlertHeight(topAlert?: TopAlertProps) {\n    if (!topAlert || 'render' in topAlert) {\n        return 0;\n    }\n\n    return (\n        BASE_ALERT_HEIGHT +\n        (topAlert.title ? TITLE_HEIGHT_BONUS : 0) -\n        (topAlert.dense ? DENSE_HEIGHT_REDUCTION : 0)\n    );\n}\n\nexport interface PageLayoutProps extends PropsWithChildren<LayoutProps> {\n    onChangePinned?: (pinned: boolean) => void;\n    /** When `true`, menu items use compact height. */\n    isCompactMode?: boolean;\n}\n\nconst Layout = ({\n    pinned,\n    className,\n    children,\n    topAlert,\n    onChangePinned,\n    isCompactMode,\n}: PageLayoutProps) => {\n    const {isExpanded, onExpand, onFold, setCollapseBlocker} = useIsExpanded(pinned);\n\n    const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : getCollapsedWidth(isCompactMode);\n\n    const asideHeaderContextValue = useMemo(\n        () => ({\n            size,\n            pinned,\n            isExpanded,\n            onChangePinned,\n            onExpand,\n            onFold,\n            setCollapseBlocker,\n        }),\n        [size, pinned, isExpanded, onChangePinned, onExpand, onFold, setCollapseBlocker],\n    );\n\n    const estimatedTopAlertHeight = calcEstimatedTopAlertHeight(topAlert);\n\n    // Reserve margin immediately on server render through inline variable on container.\n    // After TopAlert mount, the exact height will be set by hook.\n    const getPreloadHeightValue = (): number | undefined => {\n        if (!topAlert || 'render' in topAlert || typeof topAlert.preloadHeight === 'undefined') {\n            return undefined;\n        }\n\n        if (topAlert.preloadHeight === true) {\n            return estimatedTopAlertHeight;\n        }\n\n        if (typeof topAlert.preloadHeight === 'number') {\n            return topAlert.preloadHeight;\n        }\n\n        return undefined;\n    };\n\n    const preloadHeightValue = getPreloadHeightValue();\n\n    return (\n        <AsideHeaderContextProvider value={asideHeaderContextValue}>\n            <div\n                className={b({collapsed: !isExpanded}, className)}\n                style={{\n                    ...({'--gn-aside-header-size': `${size}px`} as React.CSSProperties),\n                }}\n            >\n                {typeof preloadHeightValue === 'number' ? (\n                    <style\n                        dangerouslySetInnerHTML={{\n                            __html: `.g-root{--gn-top-alert-height:${preloadHeightValue}px;}`,\n                        }}\n                    />\n                ) : null}\n                {topAlert && (\n                    <Suspense fallback={null}>\n                        <TopAlert className={b('top-alert')} alert={topAlert} />\n                    </Suspense>\n                )}\n                <div className={b('pane-container')}>{children}</div>\n            </div>\n        </AsideHeaderContextProvider>\n    );\n};\n\nconst ConnectedContent: React.FC<PropsWithChildren<Pick<ContentProps, 'renderContent'>>> = ({\n    children,\n    renderContent,\n}) => {\n    const {size, pinned, isExpanded} = useAsideHeaderContext();\n    const isExpandedByHover = !pinned && isExpanded;\n\n    return (\n        <Content\n            size={size}\n            className={b('content', {'expanded-by-hover': isExpandedByHover})}\n            renderContent={renderContent}\n        >\n            {children}\n        </Content>\n    );\n};\n\nconst PageLayout = Object.assign(Layout, {\n    Content: ConnectedContent,\n});\n\nexport {PageLayout};\n"],"names":["useIsExpanded","ASIDE_HEADER_EXPANDED_WIDTH","getCollapsedWidth","useMemo","AsideHeaderContextProvider","b","Suspense","useAsideHeaderContext","Content"],"mappings":"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"}