@gravity-ui/navigation 5.0.0 → 5.0.1

package/build/esm/components/AsideHeader/components/CompositeBar/utils.js

@@ -1,79 +1,94 @@
-import { ITEM_HEIGHT_COMPACT, ITEM_HEIGHT, ITEM_GAP } from '../../../constants.js';
-import { getGroupBlockHeight } from '../../utils/getGroupHeight.js';
+import { Ellipsis } from '@gravity-ui/icons';
+import { ITEM_HEIGHT } from '../../../constants.js';
+import { COLLAPSE_ITEM_ID } from './constants.js';
 
-function getGroupHeight(compositeItem, isCompactMode) {
-    const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;
-    return getGroupBlockHeight(visibleGroupItems, isCompactMode);
-}
-function getItemHeight(compositeItem, isCompactMode) {
-    var _a;
-    if ('items' in compositeItem && compositeItem.items && ((_a = compositeItem.items) === null || _a === undefined ? undefined : _a.length) > 0) {
-        return getGroupHeight(compositeItem, isCompactMode);
-    }
+function getItemHeight(compositeItem) {
     switch (compositeItem.type) {
         case 'action':
             return 50;
         case 'divider':
             return 15;
         default:
-            return isCompactMode ? ITEM_HEIGHT_COMPACT : ITEM_HEIGHT;
+            return ITEM_HEIGHT;
     }
 }
-function getItemsHeight(items, isCompactMode) {
-    const gaps = items.length > 1 ? (items.length - 1) * ITEM_GAP : 0;
-    return items.reduce((sum, item) => sum + getItemHeight(item, isCompactMode), 0) + gaps;
+function getItemsHeight(items) {
+    return items.reduce((sum, item) => sum + getItemHeight(item), 0);
 }
 function getSelectedItemIndex(compositeItems) {
     const index = compositeItems.findIndex(({ current }) => Boolean(current));
     return index === -1 ? undefined : index;
 }
-/** Removes consecutive dividers so that at most one divider is shown between other items. */
-function filterConsecutiveDividers(items) {
-    return items.filter((item, index) => {
-        if (item.type !== 'divider') {
-            return true;
+function getPinnedItems(compositeItems) {
+    const pinnedItems = [];
+    for (const compositeItem of compositeItems) {
+        if (compositeItem.pinned) {
+            pinnedItems.push(compositeItem);
+        }
+        else if (compositeItem.type === 'divider') {
+            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {
+                pinnedItems.push(compositeItem);
+            }
         }
-        const prev = items[index - 1];
-        return (prev === null || prev === undefined ? undefined : prev.type) !== 'divider';
-    });
-}
-/** Removes dividers from the start and end of the list. */
-function filterLeadingAndTrailingDividers(items) {
-    const firstNonDividerIndex = items.findIndex((item) => item.type !== 'divider');
-    if (firstNonDividerIndex === -1) {
-        return [];
-    }
-    let lastNonDividerIndex = items.length - 1;
-    while (lastNonDividerIndex >= firstNonDividerIndex &&
-        items[lastNonDividerIndex].type === 'divider') {
-        lastNonDividerIndex--;
-    }
-    if (lastNonDividerIndex < firstNonDividerIndex) {
-        return [];
     }
-    return items.slice(firstNonDividerIndex, lastNonDividerIndex + 1);
+    return pinnedItems;
 }
-function getVisibleItemsWithFilteredDividers(items, allPagesId) {
-    const visible = items
-        .filter((item) => !item.hidden)
-        .map((item) => {
-        if ('items' in item && item.items) {
-            return Object.assign(Object.assign({}, item), { items: filterRedundantDividers(item.items.filter((nested) => !nested.hidden), allPagesId) });
-        }
-        return item;
-    });
-    return filterRedundantDividers(visible, allPagesId);
+function getItemsMinHeight(compositeItems) {
+    const pinnedItems = getPinnedItems(compositeItems);
+    const afterMoreButtonItems = compositeItems.filter(({ afterMoreButton }) => afterMoreButton);
+    return (getItemsHeight(pinnedItems) +
+        getItemsHeight(afterMoreButtonItems) +
+        (pinnedItems.length === compositeItems.length ? 0 : ITEM_HEIGHT));
 }
-function filterRedundantDividers(items, allPagesId) {
-    const nonDividers = items.filter((item) => item.type !== 'divider');
-    const hasNoNonDividers = nonDividers.length === 0;
-    const isOnlyAllPagesItem = nonDividers.length === 1 && allPagesId !== undefined && nonDividers[0].id === allPagesId;
-    const hasNoRealContent = hasNoNonDividers || isOnlyAllPagesItem;
-    if (hasNoRealContent) {
-        return nonDividers;
+function getMoreButtonItem(menuMoreTitle) {
+    return {
+        id: COLLAPSE_ITEM_ID,
+        title: menuMoreTitle,
+        icon: Ellipsis,
+        iconSize: 18,
+    };
+}
+function getAutosizeListItems(compositeItems, height, collapseItem) {
+    var _a, _b, _c;
+    const afterMoreButtonItems = compositeItems.filter(({ afterMoreButton }) => afterMoreButton);
+    const regularItems = compositeItems.filter(({ afterMoreButton }) => !afterMoreButton);
+    const listItems = [...regularItems, ...afterMoreButtonItems];
+    const allItemsHeight = getItemsHeight(listItems);
+    if (allItemsHeight <= height) {
+        return { listItems, collapseItems: [] };
+    }
+    const collapseItemHeight = getItemHeight(collapseItem);
+    listItems.splice(regularItems.length, 0, collapseItem);
+    const collapseItems = [];
+    let listHeight = allItemsHeight + collapseItemHeight;
+    let index = listItems.length;
+    while (listHeight > height) {
+        if (index === 0) {
+            break;
+        }
+        index--;
+        const compositeItem = listItems[index];
+        if (compositeItem.pinned ||
+            compositeItem.id === COLLAPSE_ITEM_ID ||
+            compositeItem.afterMoreButton) {
+            continue;
+        }
+        if (compositeItem.type === 'divider') {
+            if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === undefined ? undefined : _a.type) === 'divider') {
+                listHeight -= getItemHeight(compositeItem);
+                listItems.splice(index, 1);
+            }
+            continue;
+        }
+        listHeight -= getItemHeight(compositeItem);
+        collapseItems.unshift(...listItems.splice(index, 1));
+    }
+    if (((_b = listItems[index]) === null || _b === undefined ? undefined : _b.type) === 'divider' &&
+        (index === 0 || ((_c = listItems[index - 1]) === null || _c === undefined ? undefined : _c.type) === 'divider')) {
+        listItems.splice(index, 1);
     }
-    return filterLeadingAndTrailingDividers(filterConsecutiveDividers(items));
+    return { listItems, collapseItems };
 }
 
-export { filterRedundantDividers, getItemHeight, getItemsHeight, getSelectedItemIndex, getVisibleItemsWithFilteredDividers };
+export { getAutosizeListItems, getItemHeight, getItemsHeight, getItemsMinHeight, getMoreButtonItem, getSelectedItemIndex };
 //# sourceMappingURL=utils.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {ITEM_GAP, ITEM_HEIGHT, ITEM_HEIGHT_COMPACT} from '../../../constants';\nimport {AsideHeaderItem, GroupedMenuItem, MenuItemsWithGroups} from '../../types';\nimport {getGroupBlockHeight} from '../../utils/getGroupHeight';\n\nfunction getGroupHeight(compositeItem: GroupedMenuItem, isCompactMode?: boolean) {\n    const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;\n\n    return getGroupBlockHeight(visibleGroupItems, isCompactMode);\n}\n\nexport function getItemHeight(compositeItem: MenuItemsWithGroups, isCompactMode?: boolean) {\n    if ('items' in compositeItem && compositeItem.items && compositeItem.items?.length > 0) {\n        return getGroupHeight(compositeItem, isCompactMode);\n    }\n\n    switch (compositeItem.type) {\n        case 'action':\n            return 50;\n        case 'divider':\n            return 15;\n\n        default:\n            return isCompactMode ? ITEM_HEIGHT_COMPACT : ITEM_HEIGHT;\n    }\n}\n\nexport function getItemsHeight<T extends AsideHeaderItem>(items: T[], isCompactMode?: boolean) {\n    const gaps = items.length > 1 ? (items.length - 1) * ITEM_GAP : 0;\n\n    return items.reduce((sum, item) => sum + getItemHeight(item, isCompactMode), 0) + gaps;\n}\n\nexport function getSelectedItemIndex(compositeItems: AsideHeaderItem[]) {\n    const index = compositeItems.findIndex(({current}) => Boolean(current));\n    return index === -1 ? undefined : index;\n}\n\n/** Removes consecutive dividers so that at most one divider is shown between other items. */\nfunction filterConsecutiveDividers<T extends AsideHeaderItem>(items: T[]): T[] {\n    return items.filter((item, index) => {\n        if (item.type !== 'divider') {\n            return true;\n        }\n\n        const prev = items[index - 1];\n\n        return prev?.type !== 'divider';\n    });\n}\n\n/** Removes dividers from the start and end of the list. */\nfunction filterLeadingAndTrailingDividers<T extends MenuItemsWithGroups>(items: T[]): T[] {\n    const firstNonDividerIndex = items.findIndex((item) => item.type !== 'divider');\n\n    if (firstNonDividerIndex === -1) {\n        return [];\n    }\n\n    let lastNonDividerIndex = items.length - 1;\n\n    while (\n        lastNonDividerIndex >= firstNonDividerIndex &&\n        items[lastNonDividerIndex].type === 'divider'\n    ) {\n        lastNonDividerIndex--;\n    }\n\n    if (lastNonDividerIndex < firstNonDividerIndex) {\n        return [];\n    }\n    return items.slice(firstNonDividerIndex, lastNonDividerIndex + 1);\n}\n\nexport function getVisibleItemsWithFilteredDividers(\n    items: MenuItemsWithGroups[],\n    allPagesId?: string,\n) {\n    const visible = items\n        .filter((item) => !item.hidden)\n        .map((item) => {\n            if ('items' in item && item.items) {\n                return {\n                    ...item,\n                    items: filterRedundantDividers(\n                        item.items.filter((nested) => !nested.hidden),\n                        allPagesId,\n                    ),\n                };\n            }\n            return item;\n        });\n\n    return filterRedundantDividers(visible, allPagesId);\n}\n\nexport function filterRedundantDividers<T extends MenuItemsWithGroups>(\n    items: T[],\n    allPagesId?: string,\n) {\n    const nonDividers = items.filter((item) => item.type !== 'divider');\n    const hasNoNonDividers = nonDividers.length === 0;\n    const isOnlyAllPagesItem =\n        nonDividers.length === 1 && allPagesId !== undefined && nonDividers[0].id === allPagesId;\n    const hasNoRealContent = hasNoNonDividers || isOnlyAllPagesItem;\n\n    if (hasNoRealContent) {\n        return nonDividers;\n    }\n\n    return filterLeadingAndTrailingDividers(filterConsecutiveDividers(items));\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {ITEM_HEIGHT} from '../../../constants';\nimport {AsideHeaderItem} from '../../types';\n\nimport {COLLAPSE_ITEM_ID} from './constants';\n\nexport function getItemHeight(compositeItem: AsideHeaderItem) {\n    switch (compositeItem.type) {\n        case 'action':\n            return 50;\n        case 'divider':\n            return 15;\n\n        default:\n            return ITEM_HEIGHT;\n    }\n}\n\nexport function getItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n    return items.reduce((sum, item) => sum + getItemHeight(item), 0);\n}\n\nexport function getSelectedItemIndex(compositeItems: AsideHeaderItem[]) {\n    const index = compositeItems.findIndex(({current}) => Boolean(current));\n    return index === -1 ? undefined : index;\n}\n\nfunction getPinnedItems(compositeItems: AsideHeaderItem[]) {\n    const pinnedItems: AsideHeaderItem[] = [];\n    for (const compositeItem of compositeItems) {\n        if (compositeItem.pinned) {\n            pinnedItems.push(compositeItem);\n        } else if (compositeItem.type === 'divider') {\n            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {\n                pinnedItems.push(compositeItem);\n            }\n        }\n    }\n    return pinnedItems;\n}\n\nexport function getItemsMinHeight(compositeItems: AsideHeaderItem[]) {\n    const pinnedItems = getPinnedItems(compositeItems);\n    const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n\n    return (\n        getItemsHeight(pinnedItems) +\n        getItemsHeight(afterMoreButtonItems) +\n        (pinnedItems.length === compositeItems.length ? 0 : ITEM_HEIGHT)\n    );\n}\n\nexport function getMoreButtonItem(menuMoreTitle?: string): AsideHeaderItem {\n    return {\n        id: COLLAPSE_ITEM_ID,\n        title: menuMoreTitle,\n        icon: Ellipsis,\n        iconSize: 18,\n    };\n}\n\nexport function getAutosizeListItems(\n    compositeItems: AsideHeaderItem[],\n    height: number,\n    collapseItem: AsideHeaderItem,\n): {\n    listItems: AsideHeaderItem[];\n    collapseItems: AsideHeaderItem[];\n} {\n    const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n    const regularItems = compositeItems.filter(({afterMoreButton}) => !afterMoreButton);\n    const listItems = [...regularItems, ...afterMoreButtonItems];\n\n    const allItemsHeight = getItemsHeight(listItems);\n    if (allItemsHeight <= height) {\n        return {listItems, collapseItems: []};\n    }\n\n    const collapseItemHeight = getItemHeight(collapseItem);\n\n    listItems.splice(regularItems.length, 0, collapseItem);\n    const collapseItems: AsideHeaderItem[] = [];\n\n    let listHeight = allItemsHeight + collapseItemHeight;\n    let index = listItems.length;\n    while (listHeight > height) {\n        if (index === 0) {\n            break;\n        }\n        index--;\n\n        const compositeItem = listItems[index];\n        if (\n            compositeItem.pinned ||\n            compositeItem.id === COLLAPSE_ITEM_ID ||\n            compositeItem.afterMoreButton\n        ) {\n            continue;\n        }\n        if (compositeItem.type === 'divider') {\n            if (index + 1 < listItems.length && listItems[index + 1]?.type === 'divider') {\n                listHeight -= getItemHeight(compositeItem);\n                listItems.splice(index, 1);\n            }\n            continue;\n        }\n        listHeight -= getItemHeight(compositeItem);\n        collapseItems.unshift(...listItems.splice(index, 1));\n    }\n    if (\n        listItems[index]?.type === 'divider' &&\n        (index === 0 || listItems[index - 1]?.type === 'divider')\n    ) {\n        listItems.splice(index, 1);\n    }\n\n    return {listItems, collapseItems};\n}\n"],"names":[],"mappings":"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"}

package/build/esm/components/AsideHeader/components/FirstPanel.js

@@ -1,63 +1,38 @@
-import React__default, { useRef, useCallback } from 'react';
+import React__default, { useRef } from 'react';
 import { setRef } from '@gravity-ui/uikit';
-import { CSSTransition } from 'react-transition-group';
-import { ASIDE_HEADER_EXPAND_TRANSITION_DELAY } from '../../constants.js';
 import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
+import i18n from '../i18n/index.js';
 import { b } from '../utils.js';
-import { useGroupedMenuItems } from './AllPagesPanel/useGroupedMenuItems.js';
+import './AllPagesPanel/AllPagesPanel.js';
+import '@gravity-ui/icons';
+import './AllPagesPanel/i18n/index.js';
+import { useVisibleMenuItems } from './AllPagesPanel/useVisibleMenuItems.js';
+import { CollapseButton } from './CollapseButton/CollapseButton.js';
 import { CompositeBar } from './CompositeBar/CompositeBar.js';
-import { FooterBar } from './FooterBar/FooterBar.js';
 import { Header } from './Header.js';
 import { Panels } from './Panels.js';
 
 const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
-const asideTransitionClassNames = {
-    enter: b('aside-transition-enter'),
-    enterActive: b('aside-transition-enter-active'),
-    enterDone: b('aside-transition-enter-done'),
-    exit: b('aside-transition-exit'),
-    exitActive: b('aside-transition-exit-active'),
-};
 const FirstPanel = React__default.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, onMenuMoreClick, renderFooter, onToggleGroupCollapsed, renderFooterAfter, pinned, customBackground, customBackgroundClassName, className, menuItems, menuGroups, qa, onExpand, onFold, setCollapseBlocker, isExpanded, isCompactMode, } = useAsideHeaderInnerContext();
-    const flatListItems = useGroupedMenuItems(menuItems, menuGroups);
+    const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, qa, } = useAsideHeaderInnerContext();
+    const visibleMenuItems = useVisibleMenuItems();
     const asideRef = useRef(null);
     React__default.useEffect(() => {
         setRef(ref, asideRef.current);
     }, [ref]);
-    const isExpandedByHover = !pinned && isExpanded;
-    const footerResult = renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
-        size,
-        isExpanded,
-        isPinned: pinned,
-        asideRef,
-        isCompactMode,
-    });
-    const canRenderFooterInHorizontalMode = Array.isArray(footerResult) && footerResult.length > 1;
-    const renderFooterContent = useCallback(() => {
-        if (canRenderFooterInHorizontalMode) {
-            return (React__default.createElement(FooterBar, { isPinned: pinned, isExpanded: isExpanded, renderAfter: renderFooterAfter, setCollapseBlocker: setCollapseBlocker }, footerResult));
-        }
-        return footerResult;
-    }, [
-        footerResult,
-        pinned,
-        isExpanded,
-        canRenderFooterInHorizontalMode,
-        setCollapseBlocker,
-        renderFooterAfter,
-    ]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(CSSTransition, { in: isExpandedByHover, timeout: ASIDE_HEADER_EXPAND_TRANSITION_DELAY, classNames: asideTransitionClassNames },
-            React__default.createElement("div", { className: b('aside', { ['compact-mode']: isCompactMode }, className), style: { width: size }, "data-qa": qa, onMouseEnter: onExpand, onMouseLeave: onFold },
-                React__default.createElement("div", { className: b('aside-popup-anchor'), ref: asideRef }),
-                customBackground && (React__default.createElement("div", { className: b('aside-custom-background', customBackgroundClassName) }, customBackground)),
-                React__default.createElement("div", { className: b('aside-content', { ['with-decoration']: headerDecoration }) },
-                    React__default.createElement(Header, null),
-                    (flatListItems === null || flatListItems === undefined ? undefined : flatListItems.length) ? (React__default.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, className: b('menu-items'), menuItemClassName: b('menu-item'), isExpanded: isExpanded, type: "menu", items: flatListItems, onItemClick: onItemClick, onMoreClick: onMenuMoreClick, onToggleGroupCollapsed: onToggleGroupCollapsed, isCompactMode: isCompactMode, setCollapseBlocker: setCollapseBlocker })) : (React__default.createElement("div", { className: b('menu-items') })),
-                    React__default.createElement("div", { className: b('footer', {
-                            horizontal: canRenderFooterInHorizontalMode && pinned,
-                        }) }, renderFooterContent())))),
+        React__default.createElement("div", { className: b('aside', className), style: { width: size }, "data-qa": qa },
+            React__default.createElement("div", { className: b('aside-popup-anchor'), ref: asideRef }),
+            customBackground && (React__default.createElement("div", { className: b('aside-custom-background', customBackgroundClassName) }, customBackground)),
+            React__default.createElement("div", { className: b('aside-content', { ['with-decoration']: headerDecoration }) },
+                React__default.createElement(Header, null),
+                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b('menu-items') })),
+                React__default.createElement("div", { className: b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
+                    size,
+                    compact: Boolean(compact),
+                    asideRef,
+                })),
+                !hideCollapseButton && React__default.createElement(CollapseButton, null))),
         React__default.createElement(Panels, null)));
 });
 FirstPanel.displayName = 'FirstPanel';

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

@@ -1 +1 @@
-{"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":["React"],"mappings":"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"}
+{"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';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\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\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        multipleTooltip,\n        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        qa,\n    } = useAsideHeaderInnerContext();\n    const visibleMenuItems = useVisibleMenuItems();\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    return (\n        <React.Fragment>\n            <div className={b('aside', className)} style={{width: size}} data-qa={qa}>\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                    {visibleMenuItems?.length ? (\n                        <CompositeBar\n                            compositeId={MENU_ITEMS_COMPOSITE_ID}\n                            type=\"menu\"\n                            compact={compact}\n                            items={visibleMenuItems}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\n                            multipleTooltip={multipleTooltip}\n                        />\n                    ) : (\n                        <div className={b('menu-items')} />\n                    )}\n                    <div className={b('footer')}>\n                        {renderFooter?.({\n                            size,\n                            compact: Boolean(compact),\n                            asideRef,\n                        })}\n                    </div>\n                    {!hideCollapseButton && <CollapseButton />}\n                </div>\n            </div>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,uBAAuB,GAAG,gDAAgD;AAEzE,MAAM,UAAU,GAAGA,cAAK,CAAC,UAAU,CAAiB,CAAC,MAAM,EAAE,GAAG,KAAI;AACvE,IAAA,MAAM,EACF,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,eAAe,EACf,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,yBAAyB,EACzB,SAAS,EACT,kBAAkB,EAClB,EAAE,GACL,GAAG,0BAA0B,EAAE;AAChC,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAE9C,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE7C,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,MAAM,CAAiB,GAAG,EAAE,QAAQ,CAAC,OAAO,CAAC;AACjD,KAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AAET,IAAA,QACIA,cAAA,CAAA,aAAA,CAACA,cAAK,CAAC,QAAQ,EAAA,IAAA;AACX,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,aAAW,EAAE,EAAA;YACpEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAI,CAAA;AACzD,YAAA,gBAAgB,KACbA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,yBAAyB,EAAE,yBAAyB,CAAC,EAClE,EAAA,gBAAgB,CACf,CACT;AAED,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AACvE,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAG,IAAA,CAAA;AACT,gBAAA,CAAA,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAA,SAAA,GAAhB,gBAAgB,CAAE,MAAM,KACrBA,cAAC,CAAA,aAAA,CAAA,YAAY,IACT,WAAW,EAAE,uBAAuB,EACpC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,gBAAgB,EACvB,aAAa,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAb,aAAa,GAAI,IAAI,CAAC,YAAY,CAAC,EAClD,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,eAAe,EAC5B,eAAe,EAAE,eAAe,EAClC,CAAA,KAEFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,GAAI,CACtC;AACD,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,EAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CAAG;oBACZ,IAAI;AACJ,oBAAA,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC;oBACzB,QAAQ;AACX,iBAAA,CAAC,CACA;AACL,gBAAA,CAAC,kBAAkB,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,CACxC,CACJ;AACN,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG,CACG;AAEzB,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

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

@@ -1,2 +1,2 @@
-.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-footer-item___Hi7NH{width:100%}
 .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/esm/components/AsideHeader/components/FooterItem/FooterItem.d.ts

@@ -1,7 +1,5 @@
 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/esm/components/AsideHeader/components/FooterItem/FooterItem.js

@@ -1,25 +1,14 @@
 import './FooterItem.css';
-import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { ASIDE_HEADER_ICON_SIZE } from '../../../constants.js';
 import { createBlock, block } from '../../../utils/cn.js';
-import { useAsideHeaderContextOptional } from '../../AsideHeaderContext.js';
-import { useFooterLayout } from '../../FooterLayoutContext.js';
 import { Item } from '../CompositeBar/Item/Item.js';
 import styles from './FooterItem.module.scss.js';
 
 const b = createBlock('footer-item', styles);
 const bGlobal = block('footer-item');
 function FooterItem(props) {
-    var _a, _b, _c;
-    const { layout, isExpanded: isExpandedProp } = props, restProps = __rest(props, ["layout", "isExpanded"]);
-    const context = useAsideHeaderContextOptional();
-    const contextIsExpanded = (_a = context === null || context === undefined ? undefined : context.isExpanded) !== null && _a !== undefined ? _a : true;
-    const footerLayoutCtx = 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__default.createElement(Item, Object.assign({}, restProps, { layout: effectiveLayout, iconSize: ASIDE_HEADER_ICON_SIZE, isExpanded: effectiveIsExpanded, setCollapseBlocker: context === null || context === undefined ? undefined : context.setCollapseBlocker, className: `${b({ collapsed: !effectiveIsExpanded, layout: effectiveLayout, 'footer-bar': isInFooterBar })} ${bGlobal()}` })));
+    return (React__default.createElement(Item, Object.assign({}, props, { iconSize: ASIDE_HEADER_ICON_SIZE, className: `${b({ compact: props.compact })} ${bGlobal()}` })));
 }
 
 export { FooterItem };

package/build/esm/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 {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":["React"],"mappings":";;;;;;;;;AAWA,MAAM,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC;AAC5C,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;AAO9B,SAAU,UAAU,CAAC,KAAsB,EAAA;;AAC7C,IAAA,MAAM,EAAC,MAAM,EAAE,UAAU,EAAE,cAAc,EAAA,GAAkB,KAAK,EAAlB,SAAS,GAAI,MAAA,CAAA,KAAK,EAA1D,CAAA,QAAA,EAAA,YAAA,CAAkD,CAAQ;AAChE,IAAA,MAAM,OAAO,GAAG,6BAA6B,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,GAAG,eAAe,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,QACIA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,SAAS,IACb,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAE,sBAAsB,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;;;;"}
+{"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":["React"],"mappings":";;;;;;AASA,MAAM,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC;AAC5C,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;AAI9B,SAAU,UAAU,CAAC,KAAsB,EAAA;AAC7C,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,KAAK,EAAA,EACT,QAAQ,EAAE,sBAAsB,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;;;;"}

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

@@ -1,4 +1,4 @@
-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"};
+var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH"};
 
 export { styles as default };
 //# sourceMappingURL=FooterItem.module.scss.js.map

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

@@ -1,34 +1,25 @@
 import React__default, { useCallback } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { Logo } from '../../Logo/Logo.js';
-import { HEADER_DIVIDER_HEIGHT_COMPACT, HEADER_DIVIDER_HEIGHT } from '../../constants.js';
-import { getCollapsedWidth } from '../../utils/getCollapsedWidth.js';
+import { ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT } from '../../constants.js';
 import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
 import { b } from '../utils.js';
-import { useGroupedMenuItems } from './AllPagesPanel/useGroupedMenuItems.js';
-import { CollapseButton } from './CollapseButton/CollapseButton.js';
 import { CompositeBar } from './CompositeBar/CompositeBar.js';
-import SvgDividerCollapsedCompact from '../../../assets/icons/divider-collapsed-compact.svg.js';
 import SvgDividerCollapsed from '../../../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, setCollapseBlocker, headerDecoration, subheaderItems, hideCollapseButton, isCompactMode, } = useAsideHeaderInnerContext();
-    const items = useGroupedMenuItems(subheaderItems || DEFAULT_SUBHEADER_ITEMS);
+    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems, compact } = useAsideHeaderInnerContext();
     const onLogoClick = useCallback((event) => {
         var _a;
         onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
         (_a = logo === null || logo === undefined ? undefined : logo.onClick) === null || _a === undefined ? undefined : _a.call(logo, event);
     }, [onClosePanel, logo]);
     return (React__default.createElement("div", { className: b('header', { ['with-decoration']: headerDecoration }) },
-        React__default.createElement("div", { className: b('logo-container', { 'without-logo': !logo }) },
-            logo && (React__default.createElement(Logo, Object.assign({}, logo, { placement: "header", isCompactMode: isCompactMode, onClick: onLogoClick, isExpanded: isExpanded, buttonClassName: b('logo-button'), iconPlaceClassName: b('logo-icon-place') }))),
-            !hideCollapseButton && (React__default.createElement(CollapseButton, { className: b('pin-button', { collapsed: !isExpanded }), isCompactMode: isCompactMode }))),
-        React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, menuItemClassName: b('menu-item'), type: "subheader", isExpanded: isExpanded, items: items, onItemClick: onItemClick, isCompactMode: isCompactMode, setCollapseBlocker: setCollapseBlocker }),
-        headerDecoration && (React__default.createElement(Icon, { data: isCompactMode
-                ? SvgDividerCollapsedCompact
-                : SvgDividerCollapsed, className: b('header-divider'), width: getCollapsedWidth(isCompactMode), height: isCompactMode ? HEADER_DIVIDER_HEIGHT_COMPACT : HEADER_DIVIDER_HEIGHT }))));
+        logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: b('logo-button'), iconPlaceClassName: b('logo-icon-place') }))),
+        React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, type: "subheader", compact: compact, items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
+        headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
 };
 
 export { Header };

package/build/esm/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 {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":["React","headerDividerCollapsedCompactIcon","headerDividerCollapsedIcon"],"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,GAAG,0BAA0B,EAAE;IAEhC,MAAM,KAAK,GAAG,mBAAmB,CAAC,cAAc,IAAI,uBAAuB,CAAC;AAE5E,IAAA,MAAM,WAAW,GAAG,WAAW,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,QACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAChE,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAC,cAAc,EAAE,CAAC,IAAI,EAAC,CAAC,EAAA;AACvD,YAAA,IAAI,KACDA,cAAA,CAAA,aAAA,CAAC,IAAI,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,EAAE,CAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAE,CAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;YAEA,CAAC,kBAAkB,KAChBA,cAAC,CAAA,aAAA,CAAA,cAAc,IACX,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,EAAC,SAAS,EAAE,CAAC,UAAU,EAAC,CAAC,EACpD,aAAa,EAAE,aAAa,EAC9B,CAAA,CACL,CACC;AAEN,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EACT,EAAA,WAAW,EAAE,mBAAmB,EAChC,iBAAiB,EAAE,CAAC,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,KACbA,cAAA,CAAA,aAAA,CAAC,IAAI,EACD,EAAA,IAAI,EACA;AACI,kBAAEC;AACF,kBAAEC,mBAA0B,EAEpC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,iBAAiB,CAAC,aAAa,CAAC,EACvC,MAAM,EAAE,aAAa,GAAG,6BAA6B,GAAG,qBAAqB,EAAA,CAC/E,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 {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT} from '../../constants';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {AsideHeaderItem} from '../types';\nimport {b} from '../utils';\n\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 {logo, onItemClick, onClosePanel, headerDecoration, subheaderItems, compact} =\n        useAsideHeaderInnerContext();\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            {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            <CompositeBar\n                compositeId={HEADER_COMPOSITE_ID}\n                type=\"subheader\"\n                compact={compact}\n                items={subheaderItems || DEFAULT_SUBHEADER_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":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;;;AAcA,MAAM,uBAAuB,GAAsB,EAAE;AACrD,MAAM,mBAAmB,GAAG,4CAA4C;AAEjE,MAAM,MAAM,GAAG,MAAK;AACvB,IAAA,MAAM,EAAC,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,OAAO,EAAC,GAC9E,0BAA0B,EAAE;AAEhC,IAAA,MAAM,WAAW,GAAG,WAAW,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,QACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAC/D,QAAA,IAAI,KACDA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,EACR,EAAA,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,CAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAE,CAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;QAEDA,cAAC,CAAA,aAAA,CAAA,YAAY,IACT,WAAW,EAAE,mBAAmB,EAChC,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,IAAI,uBAAuB,EAChD,WAAW,EAAE,WAAW,EAC1B,CAAA;QAED,gBAAgB,KACbA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,0BAA0B,EACjC,MAAM,EAAE,qBAAqB,EAC/B,CAAA,CACL,CACC;AAEd;;;;"}

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

@@ -1,2 +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}
+.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.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);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-x: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_compact___z-nL- .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_compact___z-nL- .AsideHeader-module__gn-aside-header__aside-content___w5GOS{background:transparent}.AsideHeader-module__gn-aside-header__header___m5aIU{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.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-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_compact___z-nL- .AsideHeader-module__gn-aside-header__header___m5aIU:before, .AsideHeader-module__gn-aside-header_compact___z-nL- .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_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO:after{display:none}.AsideHeader-module__gn-aside-header__logo-button___5u2iH .AsideHeader-module__gn-aside-header__logo-icon-place___3Oo9i{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.AsideHeader-module__gn-aside-header__menu-items___SOI2-{flex-grow:1}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.AsideHeader-module__gn-aside-header__panels___-fdu4{z-index:var(--gn-aside-header-panel-z-index,98)}.AsideHeader-module__gn-aside-header__panel___HywH6, .AsideHeader-module__gn-aside-header__panel___HywH6.g-drawer__item{bottom:0;height:auto;top: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{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.AsideHeader-module__gn-aside-header__content___4-mBl{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}

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

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

package/build/esm/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_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":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,MAAM,EAAC,GAAG,qBAAqB,EAAE;IAExC,MAAM,QAAQ,GAAG,MAAM,GAAG,wBAAwB,GAAG,6BAA6B;IAElF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAI,WAAW;AAE/D,IAAA,QACIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,CAAC,MAAM,IAAI,gBAAgB,IACxBA,cAAC,CAAA,aAAA,CAAA,IAAI,IACD,IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,4BAA4B,EACnC,MAAM,EAAE,qBAAqB,GAC/B,IACF,IAAI,CACN;YACND,cAAK,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_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":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,OAAO,EAAC,GAAG,qBAAqB,EAAE;IAEzC,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB;IAEnF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAI,WAAW;AAE/D,IAAA,QACIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,OAAO,IAAI,gBAAgB,IACxBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,0BAA0B,EACjC,MAAM,EAAE,qBAAqB,GAC/B,IACF,IAAI,CACN;YACND,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}