@gravity-ui/navigation 6.6.0 → 7.0.0-beta.1

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

@@ -1,40 +1,159 @@
-import React__default, { useRef } from 'react';
-import { setRef } from '@gravity-ui/uikit';
+import React__default, { useState, useRef, useCallback } from 'react';
+import { useUniqId, setRef } from '@gravity-ui/uikit';
 import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
 import i18n from '../i18n/index.js';
+import { getQuickAccessMenuItems } from '../quickAccess.js';
 import { b } from '../utils.js';
 import './AllPagesPanel/AllPagesPanel.js';
 import '@gravity-ui/icons';
 import '../types.js';
 import './AllPagesPanel/i18n/index.js';
 import { useVisibleMenuItems } from './AllPagesPanel/useVisibleMenuItems.js';
+import { AsideDivider } from './AsideDivider.js';
 import { CollapseButton } from './CollapseButton/CollapseButton.js';
+import { useCollapseAnchor, CollapseAnchorContext } from './CollapseButton/useCollapseAnchor.js';
 import { CompositeBar } from './CompositeBar/CompositeBar.js';
+import { ScrollableWithScrollbar } from './CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js';
+import { COMPOSITE_BAR_ITEM_ID_ATTRIBUTE } from './CompositeBar/constants.js';
 import { Header } from './Header.js';
 import { Panels } from './Panels.js';
 
 const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
+const QUICK_ACCESS_COMPOSITE_ID = 'gravity-ui/navigation-quick-access-composite-bar';
+const FOCUSABLE_ITEM_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function findCompositeBar(root, id) {
+    return Array.from(root.querySelectorAll('[id]')).find((element) => element.id === id);
+}
+function findCompositeBarItemFocusTarget(root, itemId) {
+    var _a;
+    if (!root) {
+        return undefined;
+    }
+    const itemElements = Array.from(root.querySelectorAll(`[${COMPOSITE_BAR_ITEM_ID_ATTRIBUTE}]`));
+    const itemElement = itemId
+        ? itemElements.find((element) => element.getAttribute(COMPOSITE_BAR_ITEM_ID_ATTRIBUTE) === itemId)
+        : itemElements[0];
+    if (!itemElement) {
+        return undefined;
+    }
+    if (itemElement.matches(FOCUSABLE_ITEM_SELECTOR)) {
+        return itemElement;
+    }
+    const wrappingFocusable = itemElement.closest(FOCUSABLE_ITEM_SELECTOR);
+    if (wrappingFocusable && root.contains(wrappingFocusable)) {
+        return wrappingFocusable;
+    }
+    return (_a = itemElement.querySelector(FOCUSABLE_ITEM_SELECTOR)) !== null && _a !== undefined ? _a : undefined;
+}
 const FirstPanel = React__default.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuOverflow, collapsedMenuGroupIds, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, aboveMenuContent, qa, } = useAsideHeaderInnerContext();
+    const { size, onItemClick, headerDecoration, hideSectionDividers, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuGroupNestedIcons, menuOverflow, collapsedMenuGroupIds, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, aboveMenuContent, enableQuickAccess = false, quickAccessHighlightInMainMenu = false, quickAccessIsAvailable, onToggleQuickAccess, qa, } = useAsideHeaderInnerContext();
+    const panelId = useUniqId();
+    const collapseAnchor = useCollapseAnchor(!hideCollapseButton, compact);
     const visibleMenuItems = useVisibleMenuItems();
+    const quickAccessEnabled = enableQuickAccess;
+    const quickAccessItems = React__default.useMemo(() => (quickAccessEnabled ? getQuickAccessMenuItems(visibleMenuItems, menuGroups) : []), [menuGroups, quickAccessEnabled, visibleMenuItems]);
+    const suppressedCurrentItemIds = React__default.useMemo(() => quickAccessEnabled && !quickAccessHighlightInMainMenu
+        ? new Set(quickAccessItems.map((item) => item.id))
+        : undefined, [quickAccessEnabled, quickAccessHighlightInMainMenu, quickAccessItems]);
+    const hasQuickAccessItems = quickAccessItems.length > 0;
+    const [menuScrollOverflows, setMenuScrollOverflows] = useState(false);
     const asideRef = useRef(null);
+    const pendingQuickAccessFocusRef = useRef();
+    const handleMenuScrollOverflowChange = useCallback((overflows) => {
+        setMenuScrollOverflows(overflows);
+    }, []);
+    const handleQuickAccessToggle = React__default.useCallback((item, event) => {
+        var _a, _b;
+        if (item.quickAccess &&
+            (event === null || event === undefined ? undefined : event.detail) === 0 &&
+            event.currentTarget.ownerDocument.activeElement === event.currentTarget) {
+            const itemIndex = quickAccessItems.findIndex((quickAccessItem) => quickAccessItem.id === item.id);
+            pendingQuickAccessFocusRef.current = {
+                itemId: item.id,
+                nextItemId: (_a = quickAccessItems[itemIndex + 1]) === null || _a === undefined ? undefined : _a.id,
+                previousItemId: (_b = quickAccessItems[itemIndex - 1]) === null || _b === undefined ? undefined : _b.id,
+                trigger: event.currentTarget,
+            };
+        }
+        onToggleQuickAccess(item);
+    }, [onToggleQuickAccess, quickAccessItems]);
+    React__default.useEffect(() => {
+        var _a, _b, _c, _d, _e;
+        const pendingFocus = pendingQuickAccessFocusRef.current;
+        if (!pendingFocus ||
+            quickAccessItems.some((quickAccessItem) => quickAccessItem.id === pendingFocus.itemId)) {
+            return;
+        }
+        const ownerDocument = pendingFocus.trigger.ownerDocument;
+        const asideRoot = (_a = asideRef.current) === null || _a === undefined ? undefined : _a.parentElement;
+        if (!asideRoot) {
+            pendingQuickAccessFocusRef.current = undefined;
+            return;
+        }
+        const quickAccessRoot = findCompositeBar(asideRoot, QUICK_ACCESS_COMPOSITE_ID);
+        const menuRoot = findCompositeBar(asideRoot, MENU_ITEMS_COMPOSITE_ID);
+        const remainingQuickAccessIds = new Set(quickAccessItems.map((item) => item.id));
+        const adjacentQuickAccessItemId = [
+            pendingFocus.nextItemId,
+            pendingFocus.previousItemId,
+        ].find((itemId) => itemId && remainingQuickAccessIds.has(itemId));
+        const focusTarget = (_e = (_d = (_c = (_b = findCompositeBarItemFocusTarget(quickAccessRoot, adjacentQuickAccessItemId)) !== null && _b !== undefined ? _b : findCompositeBarItemFocusTarget(menuRoot, pendingFocus.itemId)) !== null && _c !== undefined ? _c : findCompositeBarItemFocusTarget(quickAccessRoot)) !== null && _d !== undefined ? _d : findCompositeBarItemFocusTarget(menuRoot)) !== null && _e !== undefined ? _e : asideRoot.querySelector(FOCUSABLE_ITEM_SELECTOR);
+        const ownerWindow = ownerDocument.defaultView;
+        if (!focusTarget || !ownerWindow) {
+            pendingQuickAccessFocusRef.current = undefined;
+            return;
+        }
+        // Finish the keyboard activation first: focus applied during the click can otherwise
+        // be reset to body when the removed button completes its native activation lifecycle.
+        ownerWindow.requestAnimationFrame(() => {
+            if (pendingQuickAccessFocusRef.current !== pendingFocus) {
+                return;
+            }
+            pendingQuickAccessFocusRef.current = undefined;
+            const nextActiveElement = ownerDocument.activeElement;
+            // Do not steal focus if the user moved it before an asynchronous controlled update.
+            if (nextActiveElement === ownerDocument.body ||
+                nextActiveElement === ownerDocument.documentElement) {
+                focusTarget.focus();
+            }
+        });
+    }, [quickAccessItems]);
+    const quickAccessCompositeBar = (React__default.createElement(CompositeBar, { menuItemClassName: b('menu-item'), compositeId: QUICK_ACCESS_COMPOSITE_ID, type: "quick-access", compact: compact, items: quickAccessItems, onItemClick: onItemClick, enableQuickAccessPin: quickAccessIsAvailable, onToggleQuickAccess: handleQuickAccessToggle }));
+    const menuCompositeBar = (React__default.createElement(CompositeBar, { menuItemClassName: b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, layoutWidth: size, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuGroupNestedIcons: menuGroupNestedIcons, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, menuOverflow: menuOverflow, collapsedMenuGroupIds: collapsedMenuGroupIds, defaultCollapsedMenuGroupIds: defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed: onToggleMenuGroupCollapsed, enableQuickAccessPin: quickAccessIsAvailable, onToggleQuickAccess: onToggleQuickAccess, suppressCurrentItemIds: suppressedCurrentItemIds }));
+    const quickAccessSection = hasQuickAccessItems ? (React__default.createElement("div", { className: b('quick-access'), "data-gn-aside-current-container": true },
+        !compact && (React__default.createElement("div", { className: b('quick-access-title'), "data-gn-aside-part": "quick-access-title" }, i18n('quick_access_title'))),
+        quickAccessCompositeBar,
+        React__default.createElement(AsideDivider, { className: b('quick-access-divider'), transitionId: "quick-access" }))) : null;
+    const menuSection = visibleMenuItems.length ? (menuCompositeBar) : (React__default.createElement("div", { className: b('menu-items') }));
     React__default.useEffect(() => {
         setRef(ref, asideRef.current);
     }, [ref]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: b('aside', { 'menu-overflow-scroll': menuOverflow === 'scroll' && !compact }, className), style: { width: size }, "data-qa": qa },
+        React__default.createElement("div", { className: b('aside', className), style: { width: size }, "data-qa": qa, "data-gn-aside-panel": true, id: panelId, ref: collapseAnchor.panelRef },
             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("div", { className: b('aside-content', {
+                    'with-decoration': headerDecoration,
+                    'hide-section-dividers': hideSectionDividers,
+                    'with-quick-access': quickAccessEnabled,
+                    'with-quick-access-items': quickAccessEnabled && hasQuickAccessItems,
+                }) },
                 React__default.createElement(Header, null),
                 aboveMenuContent,
-                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { menuItemClassName: b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, menuOverflow: menuOverflow, collapsedMenuGroupIds: collapsedMenuGroupIds, defaultCollapsedMenuGroupIds: defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed: onToggleMenuGroupCollapsed })) : (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(ScrollableWithScrollbar, { className: b('unified-menu-scroll'), onOverflowChange: handleMenuScrollOverflowChange, showScrollDividers: hideSectionDividers },
+                    React__default.createElement("div", { className: b('unified-menu-content'), "data-gn-aside-current-container": true },
+                        quickAccessSection,
+                        menuSection)),
+                React__default.createElement("div", { className: b('footer', { 'with-divider': menuScrollOverflows }), ref: collapseAnchor.footerRef },
+                    React__default.createElement(CollapseAnchorContext.Provider, { value: collapseAnchor.context },
+                        React__default.createElement(AsideDivider, { className: b('footer-divider'), transitionId: "footer" }), renderFooter === null || renderFooter === undefined ? undefined :
+                        renderFooter({
+                            size,
+                            compact: Boolean(compact),
+                            asideRef,
+                        }),
+                        !hideCollapseButton && !collapseAnchor.selected && (React__default.createElement("div", { "data-gn-collapse-fallback": true, "data-gn-collapse-anchor": "", className: b('collapse-fallback'), ref: collapseAnchor.fallbackRef })))))),
+        !hideCollapseButton && (React__default.createElement(CollapseButton, { panelId: panelId, slotRef: collapseAnchor.slotRef })),
         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, {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        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        menuGroups,\n        menuOverflow,\n        collapsedMenuGroupIds,\n        defaultCollapsedMenuGroupIds,\n        onToggleMenuGroupCollapsed,\n        aboveMenuContent,\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\n                className={b(\n                    'aside',\n                    {'menu-overflow-scroll': menuOverflow === 'scroll' && !compact},\n                    className,\n                )}\n                style={{width: size}}\n                data-qa={qa}\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                    {aboveMenuContent}\n                    {visibleMenuItems?.length ? (\n                        <CompositeBar\n                            menuItemClassName={b('menu-item')}\n                            compositeId={MENU_ITEMS_COMPOSITE_ID}\n                            type=\"menu\"\n                            compact={compact}\n                            items={visibleMenuItems}\n                            menuGroups={menuGroups}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\n                            menuOverflow={menuOverflow}\n                            collapsedMenuGroupIds={collapsedMenuGroupIds}\n                            defaultCollapsedMenuGroupIds={defaultCollapsedMenuGroupIds}\n                            onToggleMenuGroupCollapsed={onToggleMenuGroupCollapsed}\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":"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"}
+{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useCallback, useRef, useState} from 'react';\n\nimport {setRef, useUniqId} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {getQuickAccessMenuItems} from '../quickAccess';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {AsideDivider} from './AsideDivider';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CollapseAnchorContext, useCollapseAnchor} from './CollapseButton/useCollapseAnchor';\nimport {CompositeBar} from './CompositeBar';\nimport type {QuickAccessToggleHandler} from './CompositeBar/Item/Item.types';\nimport {ScrollableWithScrollbar} from './CompositeBar/ScrollableWithScrollbar';\nimport {COMPOSITE_BAR_ITEM_ID_ATTRIBUTE} from './CompositeBar/constants';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\nconst QUICK_ACCESS_COMPOSITE_ID = 'gravity-ui/navigation-quick-access-composite-bar';\nconst FOCUSABLE_ITEM_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\ntype PendingQuickAccessFocus = {\n    itemId: string;\n    nextItemId?: string;\n    previousItemId?: string;\n    trigger: HTMLButtonElement;\n};\n\nfunction findCompositeBar(root: HTMLElement, id: string) {\n    return Array.from(root.querySelectorAll<HTMLElement>('[id]')).find(\n        (element) => element.id === id,\n    );\n}\n\nfunction findCompositeBarItemFocusTarget(root?: HTMLElement, itemId?: string) {\n    if (!root) {\n        return undefined;\n    }\n\n    const itemElements = Array.from(\n        root.querySelectorAll<HTMLElement>(`[${COMPOSITE_BAR_ITEM_ID_ATTRIBUTE}]`),\n    );\n    const itemElement = itemId\n        ? itemElements.find(\n              (element) => element.getAttribute(COMPOSITE_BAR_ITEM_ID_ATTRIBUTE) === itemId,\n          )\n        : itemElements[0];\n\n    if (!itemElement) {\n        return undefined;\n    }\n\n    if (itemElement.matches(FOCUSABLE_ITEM_SELECTOR)) {\n        return itemElement;\n    }\n\n    const wrappingFocusable = itemElement.closest<HTMLElement>(FOCUSABLE_ITEM_SELECTOR);\n\n    if (wrappingFocusable && root.contains(wrappingFocusable)) {\n        return wrappingFocusable;\n    }\n\n    return itemElement.querySelector<HTMLElement>(FOCUSABLE_ITEM_SELECTOR) ?? undefined;\n}\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        hideSectionDividers,\n        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        menuGroups,\n        menuGroupNestedIcons,\n        menuOverflow,\n        collapsedMenuGroupIds,\n        defaultCollapsedMenuGroupIds,\n        onToggleMenuGroupCollapsed,\n        aboveMenuContent,\n        enableQuickAccess = false,\n        quickAccessHighlightInMainMenu = false,\n        quickAccessIsAvailable,\n        onToggleQuickAccess,\n        qa,\n    } = useAsideHeaderInnerContext();\n    const panelId = useUniqId();\n    const collapseAnchor = useCollapseAnchor(!hideCollapseButton, compact);\n    const visibleMenuItems = useVisibleMenuItems();\n    const quickAccessEnabled = enableQuickAccess;\n    const quickAccessItems = React.useMemo(\n        () => (quickAccessEnabled ? getQuickAccessMenuItems(visibleMenuItems, menuGroups) : []),\n        [menuGroups, quickAccessEnabled, visibleMenuItems],\n    );\n    const suppressedCurrentItemIds = React.useMemo(\n        () =>\n            quickAccessEnabled && !quickAccessHighlightInMainMenu\n                ? new Set(quickAccessItems.map((item) => item.id))\n                : undefined,\n        [quickAccessEnabled, quickAccessHighlightInMainMenu, quickAccessItems],\n    );\n    const hasQuickAccessItems = quickAccessItems.length > 0;\n    const [menuScrollOverflows, setMenuScrollOverflows] = useState(false);\n    const asideRef = useRef<HTMLDivElement>(null);\n    const pendingQuickAccessFocusRef = useRef<PendingQuickAccessFocus>();\n\n    const handleMenuScrollOverflowChange = useCallback((overflows: boolean) => {\n        setMenuScrollOverflows(overflows);\n    }, []);\n\n    const handleQuickAccessToggle = React.useCallback<QuickAccessToggleHandler>(\n        (item, event) => {\n            if (\n                item.quickAccess &&\n                event?.detail === 0 &&\n                event.currentTarget.ownerDocument.activeElement === event.currentTarget\n            ) {\n                const itemIndex = quickAccessItems.findIndex(\n                    (quickAccessItem) => quickAccessItem.id === item.id,\n                );\n\n                pendingQuickAccessFocusRef.current = {\n                    itemId: item.id,\n                    nextItemId: quickAccessItems[itemIndex + 1]?.id,\n                    previousItemId: quickAccessItems[itemIndex - 1]?.id,\n                    trigger: event.currentTarget,\n                };\n            }\n\n            onToggleQuickAccess(item);\n        },\n        [onToggleQuickAccess, quickAccessItems],\n    );\n\n    React.useEffect(() => {\n        const pendingFocus = pendingQuickAccessFocusRef.current;\n\n        if (\n            !pendingFocus ||\n            quickAccessItems.some((quickAccessItem) => quickAccessItem.id === pendingFocus.itemId)\n        ) {\n            return;\n        }\n\n        const ownerDocument = pendingFocus.trigger.ownerDocument;\n        const asideRoot = asideRef.current?.parentElement;\n\n        if (!asideRoot) {\n            pendingQuickAccessFocusRef.current = undefined;\n            return;\n        }\n\n        const quickAccessRoot = findCompositeBar(asideRoot, QUICK_ACCESS_COMPOSITE_ID);\n        const menuRoot = findCompositeBar(asideRoot, MENU_ITEMS_COMPOSITE_ID);\n        const remainingQuickAccessIds = new Set(quickAccessItems.map((item) => item.id));\n        const adjacentQuickAccessItemId = [\n            pendingFocus.nextItemId,\n            pendingFocus.previousItemId,\n        ].find((itemId) => itemId && remainingQuickAccessIds.has(itemId));\n        const focusTarget =\n            findCompositeBarItemFocusTarget(quickAccessRoot, adjacentQuickAccessItemId) ??\n            findCompositeBarItemFocusTarget(menuRoot, pendingFocus.itemId) ??\n            findCompositeBarItemFocusTarget(quickAccessRoot) ??\n            findCompositeBarItemFocusTarget(menuRoot) ??\n            asideRoot.querySelector<HTMLElement>(FOCUSABLE_ITEM_SELECTOR);\n        const ownerWindow = ownerDocument.defaultView;\n\n        if (!focusTarget || !ownerWindow) {\n            pendingQuickAccessFocusRef.current = undefined;\n            return;\n        }\n\n        // Finish the keyboard activation first: focus applied during the click can otherwise\n        // be reset to body when the removed button completes its native activation lifecycle.\n        ownerWindow.requestAnimationFrame(() => {\n            if (pendingQuickAccessFocusRef.current !== pendingFocus) {\n                return;\n            }\n\n            pendingQuickAccessFocusRef.current = undefined;\n            const nextActiveElement = ownerDocument.activeElement;\n\n            // Do not steal focus if the user moved it before an asynchronous controlled update.\n            if (\n                nextActiveElement === ownerDocument.body ||\n                nextActiveElement === ownerDocument.documentElement\n            ) {\n                focusTarget.focus();\n            }\n        });\n    }, [quickAccessItems]);\n\n    const quickAccessCompositeBar = (\n        <CompositeBar\n            menuItemClassName={b('menu-item')}\n            compositeId={QUICK_ACCESS_COMPOSITE_ID}\n            type=\"quick-access\"\n            compact={compact}\n            items={quickAccessItems}\n            onItemClick={onItemClick}\n            enableQuickAccessPin={quickAccessIsAvailable}\n            onToggleQuickAccess={handleQuickAccessToggle}\n        />\n    );\n\n    const menuCompositeBar = (\n        <CompositeBar\n            menuItemClassName={b('menu-item')}\n            compositeId={MENU_ITEMS_COMPOSITE_ID}\n            layoutWidth={size}\n            type=\"menu\"\n            compact={compact}\n            items={visibleMenuItems}\n            menuGroups={menuGroups}\n            menuGroupNestedIcons={menuGroupNestedIcons}\n            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n            onItemClick={onItemClick}\n            onMoreClick={onMenuMoreClick}\n            menuOverflow={menuOverflow}\n            collapsedMenuGroupIds={collapsedMenuGroupIds}\n            defaultCollapsedMenuGroupIds={defaultCollapsedMenuGroupIds}\n            onToggleMenuGroupCollapsed={onToggleMenuGroupCollapsed}\n            enableQuickAccessPin={quickAccessIsAvailable}\n            onToggleQuickAccess={onToggleQuickAccess}\n            suppressCurrentItemIds={suppressedCurrentItemIds}\n        />\n    );\n\n    const quickAccessSection = hasQuickAccessItems ? (\n        <div className={b('quick-access')} data-gn-aside-current-container>\n            {!compact && (\n                <div className={b('quick-access-title')} data-gn-aside-part=\"quick-access-title\">\n                    {i18n('quick_access_title')}\n                </div>\n            )}\n            {quickAccessCompositeBar}\n            <AsideDivider className={b('quick-access-divider')} transitionId=\"quick-access\" />\n        </div>\n    ) : null;\n\n    const menuSection = visibleMenuItems.length ? (\n        menuCompositeBar\n    ) : (\n        <div className={b('menu-items')} />\n    );\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    return (\n        <React.Fragment>\n            <div\n                className={b('aside', className)}\n                style={{width: size}}\n                data-qa={qa}\n                data-gn-aside-panel\n                id={panelId}\n                ref={collapseAnchor.panelRef}\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\n                    className={b('aside-content', {\n                        'with-decoration': headerDecoration,\n                        'hide-section-dividers': hideSectionDividers,\n                        'with-quick-access': quickAccessEnabled,\n                        'with-quick-access-items': quickAccessEnabled && hasQuickAccessItems,\n                    })}\n                >\n                    <Header />\n                    {aboveMenuContent}\n                    <ScrollableWithScrollbar\n                        className={b('unified-menu-scroll')}\n                        onOverflowChange={handleMenuScrollOverflowChange}\n                        showScrollDividers={hideSectionDividers}\n                    >\n                        <div className={b('unified-menu-content')} data-gn-aside-current-container>\n                            {quickAccessSection}\n                            {menuSection}\n                        </div>\n                    </ScrollableWithScrollbar>\n                    <div\n                        className={b('footer', {'with-divider': menuScrollOverflows})}\n                        ref={collapseAnchor.footerRef}\n                    >\n                        <CollapseAnchorContext.Provider value={collapseAnchor.context}>\n                            <AsideDivider className={b('footer-divider')} transitionId=\"footer\" />\n                            {renderFooter?.({\n                                size,\n                                compact: Boolean(compact),\n                                asideRef,\n                            })}\n                            {!hideCollapseButton && !collapseAnchor.selected && (\n                                <div\n                                    data-gn-collapse-fallback\n                                    data-gn-collapse-anchor=\"\"\n                                    className={b('collapse-fallback')}\n                                    ref={collapseAnchor.fallbackRef}\n                                />\n                            )}\n                        </CollapseAnchorContext.Provider>\n                    </div>\n                </div>\n            </div>\n            {!hideCollapseButton && (\n                <CollapseButton panelId={panelId} slotRef={collapseAnchor.slotRef} />\n            )}\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["React"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-.FooterItem-module__gn-footer-item___Hi7NH{border-radius:var(--gn-aside-header-item-expanded-radius);width:100%}
+.FooterItem-module__gn-footer-item___Hi7NH{border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--gn-aside-header-density-item-expanded-radius,8px));width:100%}.FooterItem-module__gn-footer-item___Hi7NH[data-gn-collapse-anchor]:not(.FooterItem-module__gn-footer-item_compact___rth8I){margin-inline:0 24px;width:calc(100% - 24px)}.FooterItem-module__gn-footer-item___Hi7NH[data-gn-collapse-anchor]:not(.FooterItem-module__gn-footer-item_compact___rth8I)[data-type=action]{margin-inline:10px 34px;width:calc(100% - 44px)}
 .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.js

@@ -1,8 +1,10 @@
 import './FooterItem.css';
 import { __rest } from 'tslib';
 import React__default from 'react';
-import { ASIDE_HEADER_ICON_SIZE } from '../../../constants.js';
 import { createBlock, block } from '../../../utils/cn.js';
+import { useAsideHeaderContext } from '../../AsideHeaderContext.js';
+import { getAsideHeaderDensityConfig } from '../../density.js';
+import { CollapseAnchorContext } from '../CollapseButton/useCollapseAnchor.js';
 import { Item } from '../CompositeBar/Item/Item.js';
 import styles from './FooterItem.module.scss.js';
 
@@ -10,7 +12,21 @@ const b = createBlock('footer-item', styles);
 const bGlobal = block('footer-item');
 function FooterItem(_a) {
     var { regularSize } = _a, props = __rest(_a, ["regularSize"]);
-    return (React__default.createElement(Item, Object.assign({}, props, { iconSize: ASIDE_HEADER_ICON_SIZE, className: `${b({ compact: props.compact })} ${bGlobal({ 'regular-size': regularSize })}` })));
+    const anchor = React__default.useContext(CollapseAnchorContext);
+    const register = anchor === null || anchor === undefined ? undefined : anchor.register;
+    const [registrationId] = React__default.useState(() => Symbol());
+    const cleanup = React__default.useRef();
+    const rowRef = React__default.useCallback((element) => {
+        var _a;
+        (_a = cleanup.current) === null || _a === undefined ? undefined : _a.call(cleanup);
+        cleanup.current = undefined;
+        if (element && register)
+            cleanup.current = register(element, registrationId);
+    }, [register, registrationId]);
+    const suppressTooltip = Boolean((anchor === null || anchor === undefined ? undefined : anchor.compact) && anchor.selectedId === registrationId);
+    const { menuDensity } = useAsideHeaderContext();
+    const { iconSize } = getAsideHeaderDensityConfig(menuDensity);
+    return (React__default.createElement(Item, Object.assign({}, props, { rowRef: rowRef, enableTooltip: suppressTooltip ? false : props.enableTooltip, iconSize: iconSize, className: `${b({ compact: props.compact })} ${bGlobal({ 'regular-size': regularSize })}` })));
 }
 
 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 {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    /**\n     * When `true`, the item is rendered with the same geometry as regular menu\n     * items (40px row, 38px icon background) instead of the reduced footer size.\n     */\n    regularSize?: boolean;\n}\n\nexport function FooterItem({regularSize, ...props}: FooterItemProps) {\n    return (\n        <Item\n            {...props}\n            iconSize={ASIDE_HEADER_ICON_SIZE}\n            className={`${b({compact: props.compact})} ${bGlobal({'regular-size': regularSize})}`}\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;AAU9B,SAAU,UAAU,CAAC,EAAwC,EAAA;AAAxC,IAAA,IAAA,EAAC,WAAW,EAA4B,GAAA,EAAA,EAAvB,KAAK,GAAA,MAAA,CAAA,EAAA,EAAtB,eAAuB,CAAD;AAC7C,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,KAAK,EACT,EAAA,QAAQ,EAAE,sBAAsB,EAChC,SAAS,EAAE,CAAG,EAAA,CAAC,CAAC,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAC,CAAC,CAAA,CAAA,EAAI,OAAO,CAAC,EAAC,cAAc,EAAE,WAAW,EAAC,CAAC,CAAE,CAAA,EAAA,CAAA,CACvF;AAEV;;;;"}
+{"version":3,"file":"FooterItem.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterItem/FooterItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {block, createBlock} from '../../../utils/cn';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {getAsideHeaderDensityConfig} from '../../density';\nimport {AsideHeaderItem} from '../../types';\nimport {CollapseAnchorContext} from '../CollapseButton/useCollapseAnchor';\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    /**\n     * When `true`, the item is rendered with the same geometry as regular menu\n     * items (40px row, 38px icon background) instead of the reduced footer size.\n     */\n    regularSize?: boolean;\n}\n\nexport function FooterItem({regularSize, ...props}: FooterItemProps) {\n    const anchor = React.useContext(CollapseAnchorContext);\n    const register = anchor?.register;\n    const [registrationId] = React.useState(() => Symbol());\n    const cleanup = React.useRef<() => void>();\n    const rowRef = React.useCallback(\n        (element: HTMLElement | null) => {\n            cleanup.current?.();\n            cleanup.current = undefined;\n            if (element && register) cleanup.current = register(element, registrationId);\n        },\n        [register, registrationId],\n    );\n    const suppressTooltip = Boolean(anchor?.compact && anchor.selectedId === registrationId);\n    const {menuDensity} = useAsideHeaderContext();\n    const {iconSize} = getAsideHeaderDensityConfig(menuDensity);\n\n    return (\n        <Item\n            {...props}\n            rowRef={rowRef}\n            enableTooltip={suppressTooltip ? false : props.enableTooltip}\n            iconSize={iconSize}\n            className={`${b({compact: props.compact})} ${bGlobal({'regular-size': regularSize})}`}\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;AAU9B,SAAU,UAAU,CAAC,EAAwC,EAAA;AAAxC,IAAA,IAAA,EAAC,WAAW,EAA4B,GAAA,EAAA,EAAvB,KAAK,GAAA,MAAA,CAAA,EAAA,EAAtB,eAAuB,CAAD;IAC7C,MAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,SAAA,GAAA,SAAA,GAAA,MAAM,CAAE,QAAQ;AACjC,IAAA,MAAM,CAAC,cAAc,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,MAAM,MAAM,EAAE,CAAC;AACvD,IAAA,MAAM,OAAO,GAAGA,cAAK,CAAC,MAAM,EAAc;IAC1C,MAAM,MAAM,GAAGA,cAAK,CAAC,WAAW,CAC5B,CAAC,OAA2B,KAAI;;AAC5B,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,OAAA,CAAI;AACnB,QAAA,OAAO,CAAC,OAAO,GAAG,SAAS;QAC3B,IAAI,OAAO,IAAI,QAAQ;YAAE,OAAO,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;AAChF,KAAC,EACD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC7B;AACD,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,CAAA,MAAM,aAAN,MAAM,KAAA,SAAA,GAAA,SAAA,GAAN,MAAM,CAAE,OAAO,KAAI,MAAM,CAAC,UAAU,KAAK,cAAc,CAAC;AACxF,IAAA,MAAM,EAAC,WAAW,EAAC,GAAG,qBAAqB,EAAE;IAC7C,MAAM,EAAC,QAAQ,EAAC,GAAG,2BAA2B,CAAC,WAAW,CAAC;IAE3D,QACIA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,IACT,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,eAAe,GAAG,KAAK,GAAG,KAAK,CAAC,aAAa,EAC5D,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAA,EAAG,CAAC,CAAC,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAC,CAAC,CAAI,CAAA,EAAA,OAAO,CAAC,EAAC,cAAc,EAAE,WAAW,EAAC,CAAC,CAAA,CAAE,EACvF,CAAA,CAAA;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"};
+var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH","gn-footer-item_compact":"FooterItem-module__gn-footer-item_compact___rth8I","gnFooterItemCompact":"FooterItem-module__gn-footer-item_compact___rth8I"};
 
 export { styles as default };
 //# sourceMappingURL=FooterItem.module.scss.js.map

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

@@ -1,25 +1,28 @@
 import React__default, { useCallback } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { Logo } from '../../Logo/Logo.js';
-import { ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT } from '../../constants.js';
 import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
+import { getAsideHeaderDecorationHeight, getAsideHeaderDensityConfig } from '../density.js';
 import { b } from '../utils.js';
+import { AsideDivider } from './AsideDivider.js';
 import { CompositeBar } from './CompositeBar/CompositeBar.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, onItemClick, onClosePanel, headerDecoration, subheaderItems, compact } = useAsideHeaderInnerContext();
+    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems, compact, menuDensity, } = useAsideHeaderInnerContext();
+    const { compactWidth } = getAsideHeaderDensityConfig(menuDensity);
     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 }) },
-        logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: b('logo-button'), iconPlaceClassName: b('logo-icon-place') }))),
+        logo && (React__default.createElement(Logo, Object.assign({}, logo, { "data-gn-aside-transition-row": "logo", className: b('logo', logo.className), onClick: onLogoClick, compact: compact, buttonClassName: b('logo-button'), iconPlaceClassName: b('logo-icon-place') }))),
         React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, type: "subheader", menuItemClassName: b('menu-item'), 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 }))));
+        React__default.createElement(AsideDivider, { className: b('header-bottom-divider'), transitionId: "header" }),
+        headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: compactWidth, height: getAsideHeaderDecorationHeight(menuDensity) }))));
 };
 
 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 {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                menuItemClassName={b('menu-item')}\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;AAED,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACT,WAAW,EAAE,mBAAmB,EAChC,IAAI,EAAC,WAAW,EAChB,iBAAiB,EAAE,CAAC,CAAC,WAAW,CAAC,EACjC,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;;;;"}
+{"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 {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {getAsideHeaderDecorationHeight, getAsideHeaderDensityConfig} from '../density';\nimport {AsideHeaderItem} from '../types';\nimport {b} from '../utils';\n\nimport {AsideDivider} from './AsideDivider';\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        onItemClick,\n        onClosePanel,\n        headerDecoration,\n        subheaderItems,\n        compact,\n        menuDensity,\n    } = useAsideHeaderInnerContext();\n    const {compactWidth} = getAsideHeaderDensityConfig(menuDensity);\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                    data-gn-aside-transition-row=\"logo\"\n                    className={b('logo', logo.className)}\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                menuItemClassName={b('menu-item')}\n                compact={compact}\n                items={subheaderItems || DEFAULT_SUBHEADER_ITEMS}\n                onItemClick={onItemClick}\n            />\n\n            <AsideDivider className={b('header-bottom-divider')} transitionId=\"header\" />\n            {headerDecoration && (\n                <Icon\n                    data={headerDividerCollapsedIcon}\n                    className={b('header-divider')}\n                    width={compactWidth}\n                    height={getAsideHeaderDecorationHeight(menuDensity)}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;;;;AAeA,MAAM,uBAAuB,GAAsB,EAAE;AACrD,MAAM,mBAAmB,GAAG,4CAA4C;AAEjE,MAAM,MAAM,GAAG,MAAK;AACvB,IAAA,MAAM,EACF,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,WAAW,GACd,GAAG,0BAA0B,EAAE;IAChC,MAAM,EAAC,YAAY,EAAC,GAAG,2BAA2B,CAAC,WAAW,CAAC;AAE/D,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,cAAA,CAAA,aAAA,CAAC,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,oCACqB,MAAM,EACnC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,EACpC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,CAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAE,CAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;AAED,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACT,WAAW,EAAE,mBAAmB,EAChC,IAAI,EAAC,WAAW,EAChB,iBAAiB,EAAE,CAAC,CAAC,WAAW,CAAC,EACjC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,IAAI,uBAAuB,EAChD,WAAW,EAAE,WAAW,EAC1B,CAAA;AAEF,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAE,CAAC,CAAC,uBAAuB,CAAC,EAAE,YAAY,EAAC,QAAQ,EAAG,CAAA;AAC5E,QAAA,gBAAgB,KACbA,cAAC,CAAA,aAAA,CAAA,IAAI,EACD,EAAA,IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,8BAA8B,CAAC,WAAW,CAAC,EAAA,CACrD,CACL,CACC;AAEd;;;;"}

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

@@ -1,2 +1,12 @@
 .AsideHeader-module__g-root___EuNRw{--gn-aside-top-panel-height:0px}
-.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:56px;--_--item-margin-inline:8px;--gn-aside-header-item-expanded-radius:8px;--_--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_menu-overflow-scroll___l-td6 .AsideHeader-module__gn-aside-header__aside-content___w5GOS{min-height:0;overflow:hidden}.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__menu-item___q2y31:not(:has([data-type=action])){margin-inline:var(--_--item-margin-inline)}.AsideHeader-module__gn-aside-header__menu-item___q2y31:has([data-type=regular]), .AsideHeader-module__gn-aside-header__menu-item_type_regular___XYYbc, .AsideHeader-module__gn-aside-header__root-menu-item___eNfkk[class]:hover{border-radius:var(--gn-aside-header-item-expanded-radius,8px)}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline)}.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}
+.AsideHeader-module__gn-aside-header___Z0Sa7{--gn-aside-header-min-width:var(--_--gn-aside-header-density-compact-width,56px);--_--item-margin-inline:var(
+      --_--gn-aside-header-density-item-margin-inline,8px
+  );--_--item-expanded-radius:var(
+      --_--gn-aside-header-density-item-expanded-radius,8px
+  );--_--item-icon-background-size:var(
+      --gn-aside-header-item-icon-background-size,var(--_--gn-aside-header-density-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);--_--section-divider-gap:var(--g-spacing-1);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.AsideHeader-module__gn-aside-header__compact-transition___bBGfN{--_--gn-aside-width-transition:width 0.2s ease-in-out;--_--gn-aside-collapse-geometry-transition:inset-inline-end 0.2s ease-in-out,width 0.2s ease-in-out,border-radius 0.2s ease-in-out;--_--gn-aside-drawer-transition:left 0.2s ease-in-out,background-color var(--_--animation-duration,300ms)}.AsideHeader-module__gn-aside-header__compact-transition_disabled___ztpdX{--_--gn-aside-width-transition:none;--_--gn-aside-collapse-geometry-transition:none;--_--gn-aside-drawer-transition:background-color var(--_--animation-duration,300ms)}.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));overflow:hidden;position:sticky;top:var(--gn-top-alert-height,0);transition:var(--_--gn-aside-width-transition);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%;inset-inline-end:0;position:absolute;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;min-height:0;overflow:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:var(--gn-aside-header-size);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;transition:var(--_--gn-aside-width-transition);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__aside___AyP0y[data-gn-aside-animating] [data-gn-aside-divider]{flex-shrink:0}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .AsideHeader-module__gn-aside-header__aside-content___w5GOS{overflow:visible}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .g-list__item, .AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .g-list__item-content{min-width:0;overflow:visible}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] [data-gn-aside-scrollport]{width:var(--_--gn-aside-header-expanded-width)}.AsideHeader-module__gn-aside-header__aside___AyP0y[data-gn-aside-animating] .AsideHeader-module__gn-aside-header__unified-menu-content___cpugB{width:var(--gn-aside-header-size)}.AsideHeader-module__gn-aside-header__header___m5aIU{--gn-aside-header-header-divider-height:var(
+      --_--gn-aside-header-density-header-divider-height,29px
+  );box-sizing:border-box;flex:none;padding-bottom:var(--_--header-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{color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;top:calc(100% - var(--gn-aside-header-header-divider-height));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 .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo{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__aside-content_with-quick-access___Yucty:not(.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB) .AsideHeader-module__gn-aside-header__header___m5aIU{padding-bottom:var(--_--header-padding-bottom,var(--_--section-divider-gap))}.AsideHeader-module__gn-aside-header__aside-content_with-quick-access___Yucty:not(.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB) .AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo{bottom:0}.AsideHeader-module__gn-aside-header__aside-content_with-quick-access___Yucty:not(.AsideHeader-module__gn-aside-header__aside-content_with-quick-access-items___oU0Yz):not(.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB) .AsideHeader-module__gn-aside-header__header___m5aIU{margin-bottom:var(--_--section-divider-gap)}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header___m5aIU:before{display:block}.AsideHeader-module__gn-aside-header_compact___z-nL- .AsideHeader-module__gn-aside-header__header_with-decoration___3dTJO{--_--header-padding-bottom:calc(var(--gn-aside-header-header-divider-height)*22/29)}.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 .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo{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__logo___QvKKT{--_--gn-logo-height:var(
+      --_--gn-aside-header-density-item-height,40px
+  )}.AsideHeader-module__gn-aside-header__quick-access___ykXmy{box-sizing:border-box;flex:none;margin-bottom:var(--_--section-divider-gap);padding-block:var(--_--section-divider-gap);position:relative;width:100%}.AsideHeader-module__gn-aside-header__quick-access-divider___AzkVl{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:0;content:"";height:1px;left:var(--_--item-margin-inline);position:absolute;right:var(--_--item-margin-inline);width:auto;z-index:1}.AsideHeader-module__gn-aside-header__quick-access-title___im4TL{color:var(--g-color-text-secondary);font-family:var(--g-text-caption-font-family);font-size:var(--g-text-caption-2-font-size);font-weight:var(--g-text-caption-font-weight);line-height:var(--g-text-caption-2-line-height);margin-inline:var(--_--item-margin-inline);padding-inline:calc(var(--_--gn-aside-header-density-item-height, 40px) + var(--_--gn-aside-header-density-item-title-gap, var(--g-spacing-2))) var(--_--gn-aside-header-density-item-title-gap-end,var(--g-spacing-4));padding-bottom:var(--g-spacing-1);user-select:none}.AsideHeader-module__gn-aside-header__unified-menu-scroll___EHnK-{flex:1 1 auto;min-height:0}.AsideHeader-module__gn-aside-header__unified-menu-content___cpugB{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:0}.AsideHeader-module__gn-aside-header___Z0Sa7 [data-gn-aside-current-container]>:not([data-gn-aside-current-indicator-layer]):not([data-gn-aside-divider]){position:relative;z-index:1}.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__menu-item___q2y31:has([data-type=regular]), .AsideHeader-module__gn-aside-header__menu-item_type_regular___XYYbc, .AsideHeader-module__gn-aside-header__root-menu-item___eNfkk[class]:hover{border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--item-expanded-radius))}.AsideHeader-module__gn-aside-header__collapse-fallback___R6O7X{flex-shrink:0;height:var(--_--gn-aside-header-density-footer-item-height,32px)}.AsideHeader-module__gn-aside-header__footer___vmoTl{display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) var(--_--item-margin-inline);position:relative}.AsideHeader-module__gn-aside-header__footer___vmoTl .AsideHeader-module__gn-aside-header__footer-divider___9Jewp{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));content:"";height:1px;left:calc(var(--_--item-margin-inline)*-1);opacity:0;pointer-events:none;position:absolute;right:calc(var(--_--item-margin-inline)*-1);top:calc(var(--g-spacing-2)*-1);transition:opacity .3s ease-in-out}.AsideHeader-module__gn-aside-header__footer_with-divider___66E1w .AsideHeader-module__gn-aside-header__footer-divider___9Jewp{opacity:1}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU{margin-bottom:0;padding-bottom:0}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU:before{height:100%}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__footer-divider___9Jewp, .AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-bottom-divider___x9Bzo, .AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__header___m5aIU .AsideHeader-module__gn-aside-header__header-divider___lIG-e{display:none}.AsideHeader-module__gn-aside-header__aside-content_hide-section-dividers___9BZdB .AsideHeader-module__gn-aside-header__footer___vmoTl{margin-top: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.g-drawer[data-floating-ui-status]{transition:var(--_--gn-aside-drawer-transition)}.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);transition:var(--_--gn-aside-width-transition);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}@media (prefers-reduced-motion:reduce){.AsideHeader-module__gn-aside-header__aside-custom-background___-bqdE, .AsideHeader-module__gn-aside-header__aside___AyP0y, .AsideHeader-module__gn-aside-header__content___4-mBl, .AsideHeader-module__gn-aside-header__panels___-fdu4.g-drawer[data-floating-ui-status]{transition:none}}.AsideHeader-module__gn-aside-header__all-pages-panel___O94IU{width:fit-content!important}

package/build/esm/components/AsideHeader/components/PageLayout/AsideFallback.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { QAProps } from '@gravity-ui/uikit';
 interface Props extends QAProps {
     headerDecoration?: boolean;
+    hideSectionDividers?: boolean;
     subheaderItemsCount?: number;
 }
 export declare const AsideFallback: React.FC<Props>;

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

@@ -1,20 +1,26 @@
 import './AsideFallback.css';
 import React__default from 'react';
 import { Icon } from '@gravity-ui/uikit';
-import { ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT } from '../../../constants.js';
 import { useAsideHeaderContext } from '../../AsideHeaderContext.js';
+import { getAsideHeaderDecorationHeight, getAsideHeaderDensityConfig } from '../../density.js';
 import { b } from '../../utils.js';
+import { AsideDivider } from '../AsideDivider.js';
 import SvgDividerCollapsed from '../../../../assets/icons/divider-collapsed.svg.js';
 
-const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
-    const { compact } = useAsideHeaderContext();
+const AsideFallback = ({ headerDecoration, hideSectionDividers, subheaderItemsCount = 0, qa, }) => {
+    const { compact, menuDensity } = useAsideHeaderContext();
+    const { compactWidth, itemHeight } = getAsideHeaderDensityConfig(menuDensity);
     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 }) },
+    const subheaderHeight = (1 + subheaderItemsCount) * itemHeight;
+    return (React__default.createElement("div", { className: b('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa, "data-gn-aside-panel": true },
+        React__default.createElement("div", { className: b('aside-content', {
+                'with-decoration': headerDecoration,
+                'hide-section-dividers': hideSectionDividers,
+            }) },
             React__default.createElement("div", { className: b('header', { 'with-decoration': headerDecoration }) },
                 React__default.createElement("div", { style: { height: subheaderHeight } }),
-                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(AsideDivider, { className: b('header-bottom-divider'), transitionId: "header" }),
+                compact && headerDecoration ? (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: compactWidth, height: getAsideHeaderDecorationHeight(menuDensity) })) : 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_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;;;;"}
+{"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 {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {getAsideHeaderDecorationHeight, getAsideHeaderDensityConfig} from '../../density';\nimport {b} from '../../utils';\nimport {AsideDivider} from '../AsideDivider';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\ninterface Props extends QAProps {\n    headerDecoration?: boolean;\n    hideSectionDividers?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({\n    headerDecoration,\n    hideSectionDividers,\n    subheaderItemsCount = 0,\n    qa,\n}) => {\n    const {compact, menuDensity} = useAsideHeaderContext();\n    const {compactWidth, itemHeight} = getAsideHeaderDensityConfig(menuDensity);\n\n    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * itemHeight;\n\n    return (\n        <div\n            className={b('aside')}\n            style={{width: `var(${widthVar})`}}\n            data-qa={qa}\n            data-gn-aside-panel\n        >\n            <div\n                className={b('aside-content', {\n                    'with-decoration': headerDecoration,\n                    'hide-section-dividers': hideSectionDividers,\n                })}\n            >\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    <AsideDivider className={b('header-bottom-divider')} transitionId=\"header\" />\n                    {compact && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={compactWidth}\n                            height={getAsideHeaderDecorationHeight(menuDensity)}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;;AAiBa,MAAA,aAAa,GAAoB,CAAC,EAC3C,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,GAAG,CAAC,EACvB,EAAE,GACL,KAAI;IACD,MAAM,EAAC,OAAO,EAAE,WAAW,EAAC,GAAG,qBAAqB,EAAE;IACtD,MAAM,EAAC,YAAY,EAAE,UAAU,EAAC,GAAG,2BAA2B,CAAC,WAAW,CAAC;IAE3E,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB;IAEnF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAI,UAAU;AAE9D,IAAA,QACIA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aACzB,EAAE,EAAA,qBAAA,EAAA,IAAA,EAAA;AAGX,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE;AAC1B,gBAAA,iBAAiB,EAAE,gBAAgB;AACnC,gBAAA,uBAAuB,EAAE,mBAAmB;aAC/C,CAAC,EAAA;YAEFA,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;AACzC,gBAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAE,CAAC,CAAC,uBAAuB,CAAC,EAAE,YAAY,EAAC,QAAQ,EAAG,CAAA;AAC5E,gBAAA,OAAO,IAAI,gBAAgB,IACxBA,cAAC,CAAA,aAAA,CAAA,IAAI,EACD,EAAA,IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,8BAA8B,CAAC,WAAW,CAAC,GACrD,IACF,IAAI,CACN;YACND,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}

package/build/esm/components/AsideHeader/components/PageLayout/AsideLayoutTransition.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+import { type CurrentSnapshot } from './currentIndicatorModel';
+type Part = {
+    element: HTMLElement;
+    rect: DOMRect;
+    anchor: DOMRect;
+    opacity: number;
+    transform: string;
+    backgroundColor: string;
+    borderRadius: string;
+    clipPath: string;
+    clipRect?: DOMRect;
+};
+type Row = Part & {
+    icon?: Part;
+    title?: Part;
+    surface?: Part;
+    group?: string;
+};
+type Group = {
+    part: Part;
+    headerKey: string;
+};
+type Divider = Part & {
+    id: string;
+    group?: string;
+};
+type Snapshot = {
+    rows: Map<string, Row>;
+    groups: Map<string, Group>;
+    dividers: Map<string, Divider>;
+    width: number;
+    layoutWidth: number;
+    current?: CurrentSnapshot;
+    collapse?: {
+        element: HTMLElement;
+        y: number;
+        anchor: Element | null;
+    };
+};
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+    compact: boolean;
+    compactTransition?: boolean;
+};
+type BeforeSnapshot = Snapshot & {
+    appearances: Map<Part, HTMLElement>;
+};
+/**
+ * FLIP boundary for the aside: snapshot before React mutates the DOM, then
+ * translate the target rows from their old positions before the browser paints.
+ * Text is never scaled and the actual target layout is present from the start.
+ * Departing rows/titles are decorative, inert copies, removed on animation finish.
+ */
+export declare class AsideLayoutTransition extends React.Component<Props, Record<string, never>, BeforeSnapshot | null> {
+    private root;
+    private currentIndicator;
+    private currentIdentities;
+    private presentationObserver;
+    private animations;
+    private surfacePaint;
+    private overlay?;
+    private scrollOverlay?;
+    private animatedPanel?;
+    private departingRows;
+    private departingTitles;
+    private generation;
+    private pendingStart?;
+    private departingGroups;
+    private departingDividers;
+    getSnapshotBeforeUpdate(previous: Props): BeforeSnapshot | null;
+    componentDidUpdate(_previous: Props, _state: Record<string, never>, before: BeforeSnapshot | null): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+    private start;
+    private addGhost;
+    private cancel;
+    private cancelSurfacePaint;
+    private reconcileObservation;
+}
+export {};