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

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

@@ -4,39 +4,158 @@ var React = require('react');
 var uikit = require('@gravity-ui/uikit');
 var AsideHeaderContext = require('../AsideHeaderContext.js');
 var index = require('../i18n/index.js');
+var quickAccess = require('../quickAccess.js');
 var utils = require('../utils.js');
 require('./AllPagesPanel/AllPagesPanel.js');
 require('@gravity-ui/icons');
 require('../types.js');
 require('./AllPagesPanel/i18n/index.js');
 var useVisibleMenuItems = require('./AllPagesPanel/useVisibleMenuItems.js');
+var AsideDivider = require('./AsideDivider.js');
 var CollapseButton = require('./CollapseButton/CollapseButton.js');
+var useCollapseAnchor = require('./CollapseButton/useCollapseAnchor.js');
 var CompositeBar = require('./CompositeBar/CompositeBar.js');
+var ScrollableWithScrollbar = require('./CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js');
+var constants = require('./CompositeBar/constants.js');
 var Header = require('./Header.js');
 var Panels = require('./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(`[${constants.COMPOSITE_BAR_ITEM_ID_ATTRIBUTE}]`));
+    const itemElement = itemId
+        ? itemElements.find((element) => element.getAttribute(constants.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.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuOverflow, collapsedMenuGroupIds, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, aboveMenuContent, qa, } = AsideHeaderContext.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, } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const panelId = uikit.useUniqId();
+    const collapseAnchor = useCollapseAnchor.useCollapseAnchor(!hideCollapseButton, compact);
     const visibleMenuItems = useVisibleMenuItems.useVisibleMenuItems();
+    const quickAccessEnabled = enableQuickAccess;
+    const quickAccessItems = React.useMemo(() => (quickAccessEnabled ? quickAccess.getQuickAccessMenuItems(visibleMenuItems, menuGroups) : []), [menuGroups, quickAccessEnabled, visibleMenuItems]);
+    const suppressedCurrentItemIds = React.useMemo(() => quickAccessEnabled && !quickAccessHighlightInMainMenu
+        ? new Set(quickAccessItems.map((item) => item.id))
+        : undefined, [quickAccessEnabled, quickAccessHighlightInMainMenu, quickAccessItems]);
+    const hasQuickAccessItems = quickAccessItems.length > 0;
+    const [menuScrollOverflows, setMenuScrollOverflows] = React.useState(false);
     const asideRef = React.useRef(null);
+    const pendingQuickAccessFocusRef = React.useRef();
+    const handleMenuScrollOverflowChange = React.useCallback((overflows) => {
+        setMenuScrollOverflows(overflows);
+    }, []);
+    const handleQuickAccessToggle = React.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.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.createElement(CompositeBar.CompositeBar, { menuItemClassName: utils.b('menu-item'), compositeId: QUICK_ACCESS_COMPOSITE_ID, type: "quick-access", compact: compact, items: quickAccessItems, onItemClick: onItemClick, enableQuickAccessPin: quickAccessIsAvailable, onToggleQuickAccess: handleQuickAccessToggle }));
+    const menuCompositeBar = (React.createElement(CompositeBar.CompositeBar, { menuItemClassName: utils.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 : index.default('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, menuOverflow: menuOverflow, collapsedMenuGroupIds: collapsedMenuGroupIds, defaultCollapsedMenuGroupIds: defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed: onToggleMenuGroupCollapsed, enableQuickAccessPin: quickAccessIsAvailable, onToggleQuickAccess: onToggleQuickAccess, suppressCurrentItemIds: suppressedCurrentItemIds }));
+    const quickAccessSection = hasQuickAccessItems ? (React.createElement("div", { className: utils.b('quick-access'), "data-gn-aside-current-container": true },
+        !compact && (React.createElement("div", { className: utils.b('quick-access-title'), "data-gn-aside-part": "quick-access-title" }, index.default('quick_access_title'))),
+        quickAccessCompositeBar,
+        React.createElement(AsideDivider.AsideDivider, { className: utils.b('quick-access-divider'), transitionId: "quick-access" }))) : null;
+    const menuSection = visibleMenuItems.length ? (menuCompositeBar) : (React.createElement("div", { className: utils.b('menu-items') }));
     React.useEffect(() => {
         uikit.setRef(ref, asideRef.current);
     }, [ref]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: utils.b('aside', { 'menu-overflow-scroll': menuOverflow === 'scroll' && !compact }, className), style: { width: size }, "data-qa": qa },
+        React.createElement("div", { className: utils.b('aside', className), style: { width: size }, "data-qa": qa, "data-gn-aside-panel": true, id: panelId, ref: collapseAnchor.panelRef },
             React.createElement("div", { className: utils.b('aside-popup-anchor'), ref: asideRef }),
             customBackground && (React.createElement("div", { className: utils.b('aside-custom-background', customBackgroundClassName) }, customBackground)),
-            React.createElement("div", { className: utils.b('aside-content', { ['with-decoration']: headerDecoration }) },
+            React.createElement("div", { className: utils.b('aside-content', {
+                    'with-decoration': headerDecoration,
+                    'hide-section-dividers': hideSectionDividers,
+                    'with-quick-access': quickAccessEnabled,
+                    'with-quick-access-items': quickAccessEnabled && hasQuickAccessItems,
+                }) },
                 React.createElement(Header.Header, null),
                 aboveMenuContent,
-                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React.createElement(CompositeBar.CompositeBar, { menuItemClassName: utils.b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : index.default('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, menuOverflow: menuOverflow, collapsedMenuGroupIds: collapsedMenuGroupIds, defaultCollapsedMenuGroupIds: defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed: onToggleMenuGroupCollapsed })) : (React.createElement("div", { className: utils.b('menu-items') })),
-                React.createElement("div", { className: utils.b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
-                    size,
-                    compact: Boolean(compact),
-                    asideRef,
-                })),
-                !hideCollapseButton && React.createElement(CollapseButton.CollapseButton, null))),
+                React.createElement(ScrollableWithScrollbar.ScrollableWithScrollbar, { className: utils.b('unified-menu-scroll'), onOverflowChange: handleMenuScrollOverflowChange, showScrollDividers: hideSectionDividers },
+                    React.createElement("div", { className: utils.b('unified-menu-content'), "data-gn-aside-current-container": true },
+                        quickAccessSection,
+                        menuSection)),
+                React.createElement("div", { className: utils.b('footer', { 'with-divider': menuScrollOverflows }), ref: collapseAnchor.footerRef },
+                    React.createElement(useCollapseAnchor.CollapseAnchorContext.Provider, { value: collapseAnchor.context },
+                        React.createElement(AsideDivider.AsideDivider, { className: utils.b('footer-divider'), transitionId: "footer" }), renderFooter === null || renderFooter === undefined ? undefined :
+                        renderFooter({
+                            size,
+                            compact: Boolean(compact),
+                            asideRef,
+                        }),
+                        !hideCollapseButton && !collapseAnchor.selected && (React.createElement("div", { "data-gn-collapse-fallback": true, "data-gn-collapse-anchor": "", className: utils.b('collapse-fallback'), ref: collapseAnchor.fallbackRef })))))),
+        !hideCollapseButton && (React.createElement(CollapseButton.CollapseButton, { panelId: panelId, slotRef: collapseAnchor.slotRef })),
         React.createElement(Panels.Panels, null)));
 });
 FirstPanel.displayName = 'FirstPanel';

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

@@ -1 +1 @@
-{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\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":["useAsideHeaderInnerContext","useVisibleMenuItems","useRef","setRef","b","Header","CompositeBar","i18n","CollapseButton","Panels"],"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":["COMPOSITE_BAR_ITEM_ID_ATTRIBUTE","useAsideHeaderInnerContext","useUniqId","useCollapseAnchor","useVisibleMenuItems","getQuickAccessMenuItems","useState","useRef","useCallback","CompositeBar","b","i18n","AsideDivider","setRef","Header","ScrollableWithScrollbar","CollapseAnchorContext","CollapseButton","Panels"],"mappings":"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"}

package/build/cjs/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/cjs/components/AsideHeader/components/FooterItem/FooterItem.js

@@ -3,8 +3,10 @@ import './FooterItem.css';
 
 var tslib = require('tslib');
 var React = require('react');
-var constants = require('../../../constants.js');
 var cn = require('../../../utils/cn.js');
+var AsideHeaderContext = require('../../AsideHeaderContext.js');
+var density = require('../../density.js');
+var useCollapseAnchor = require('../CollapseButton/useCollapseAnchor.js');
 var Item = require('../CompositeBar/Item/Item.js');
 var FooterItem_module = require('./FooterItem.module.scss.js');
 
@@ -12,7 +14,21 @@ const b = cn.createBlock('footer-item', FooterItem_module.default);
 const bGlobal = cn.block('footer-item');
 function FooterItem(_a) {
     var { regularSize } = _a, props = tslib.__rest(_a, ["regularSize"]);
-    return (React.createElement(Item.Item, Object.assign({}, props, { iconSize: constants.ASIDE_HEADER_ICON_SIZE, className: `${b({ compact: props.compact })} ${bGlobal({ 'regular-size': regularSize })}` })));
+    const anchor = React.useContext(useCollapseAnchor.CollapseAnchorContext);
+    const register = anchor === null || anchor === undefined ? undefined : anchor.register;
+    const [registrationId] = React.useState(() => Symbol());
+    const cleanup = React.useRef();
+    const rowRef = React.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 } = AsideHeaderContext.useAsideHeaderContext();
+    const { iconSize } = density.getAsideHeaderDensityConfig(menuDensity);
+    return (React.createElement(Item.Item, Object.assign({}, props, { rowRef: rowRef, enableTooltip: suppressTooltip ? false : props.enableTooltip, iconSize: iconSize, className: `${b({ compact: props.compact })} ${bGlobal({ 'regular-size': regularSize })}` })));
 }
 
 exports.FooterItem = FooterItem;

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

@@ -1 +1 @@
-{"version":3,"file":"FooterItem.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterItem/FooterItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../constants';\nimport {block, createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem} from '../../types';\nimport {Item} from '../CompositeBar/Item/Item';\n\nimport styles from './FooterItem.module.scss';\n\nconst b = createBlock('footer-item', styles);\nconst bGlobal = block('footer-item');\n\nexport interface FooterItemProps extends AsideHeaderItem {\n    /**\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":["createBlock","styles","block","__rest","Item","ASIDE_HEADER_ICON_SIZE"],"mappings":";;;;;;;;;AASA,MAAM,CAAC,GAAGA,cAAW,CAAC,aAAa,EAAEC,yBAAM,CAAC;AAC5C,MAAM,OAAO,GAAGC,QAAK,CAAC,aAAa,CAAC;AAU9B,SAAU,UAAU,CAAC,EAAwC,EAAA;AAAxC,IAAA,IAAA,EAAC,WAAW,EAA4B,GAAA,EAAA,EAAvB,KAAK,GAAAC,YAAA,CAAA,EAAA,EAAtB,eAAuB,CAAD;AAC7C,IAAA,QACI,KAAA,CAAA,aAAA,CAACC,SAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,KAAK,EACT,EAAA,QAAQ,EAAEC,gCAAsB,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":["createBlock","styles","block","__rest","CollapseAnchorContext","useAsideHeaderContext","getAsideHeaderDensityConfig","Item"],"mappings":";;;;;;;;;;;AAWA,MAAM,CAAC,GAAGA,cAAW,CAAC,aAAa,EAAEC,yBAAM,CAAC;AAC5C,MAAM,OAAO,GAAGC,QAAK,CAAC,aAAa,CAAC;AAU9B,SAAU,UAAU,CAAC,EAAwC,EAAA;AAAxC,IAAA,IAAA,EAAC,WAAW,EAA4B,GAAA,EAAA,EAAvB,KAAK,GAAAC,YAAA,CAAA,EAAA,EAAtB,eAAuB,CAAD;IAC7C,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAACC,uCAAqB,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,SAAA,GAAA,SAAA,GAAA,MAAM,CAAE,QAAQ;AACjC,IAAA,MAAM,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,MAAM,EAAE,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,EAAc;IAC1C,MAAM,MAAM,GAAG,KAAK,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,GAAGC,wCAAqB,EAAE;IAC7C,MAAM,EAAC,QAAQ,EAAC,GAAGC,mCAA2B,CAAC,WAAW,CAAC;IAE3D,QACI,KAAC,CAAA,aAAA,CAAAC,SAAI,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/cjs/components/AsideHeader/components/FooterItem/FooterItem.module.scss.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH"};
+var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH","gn-footer-item_compact":"FooterItem-module__gn-footer-item_compact___rth8I","gnFooterItemCompact":"FooterItem-module__gn-footer-item_compact___rth8I"};
 
 exports.default = styles;
 //# sourceMappingURL=FooterItem.module.scss.js.map

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

@@ -5,23 +5,27 @@ var uikit = require('@gravity-ui/uikit');
 var Logo = require('../../Logo/Logo.js');
 var constants = require('../../constants.js');
 var AsideHeaderContext = require('../AsideHeaderContext.js');
+var density = require('../density.js');
 var utils = require('../utils.js');
+var AsideDivider = require('./AsideDivider.js');
 var CompositeBar = require('./CompositeBar/CompositeBar.js');
 var dividerCollapsed = require('../../../assets/icons/divider-collapsed.svg.js');
 
 const DEFAULT_SUBHEADER_ITEMS = [];
 const HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';
 const Header = () => {
-    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems, compact } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems, compact, menuDensity, } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const { compactWidth } = density.getAsideHeaderDensityConfig(menuDensity);
     const onLogoClick = React.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.createElement("div", { className: utils.b('header', { ['with-decoration']: headerDecoration }) },
-        logo && (React.createElement(Logo.Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: utils.b('logo-button'), iconPlaceClassName: utils.b('logo-icon-place') }))),
+        logo && (React.createElement(Logo.Logo, Object.assign({}, logo, { "data-gn-aside-transition-row": "logo", className: utils.b('logo', logo.className), onClick: onLogoClick, compact: compact, buttonClassName: utils.b('logo-button'), iconPlaceClassName: utils.b('logo-icon-place') }))),
         React.createElement(CompositeBar.CompositeBar, { compositeId: HEADER_COMPOSITE_ID, type: "subheader", menuItemClassName: utils.b('menu-item'), compact: compact, items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
-        headerDecoration && (React.createElement(uikit.Icon, { data: dividerCollapsed.default, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT }))));
+        React.createElement(AsideDivider.AsideDivider, { className: utils.b('header-bottom-divider'), transitionId: "header" }),
+        headerDecoration && (React.createElement(uikit.Icon, { data: dividerCollapsed.default, className: utils.b('header-divider'), width: compactWidth, height: constants.HEADER_DIVIDER_HEIGHT }))));
 };
 
 exports.Header = Header;

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../src/components/AsideHeader/components/Header.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {Logo} from '../../Logo';\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT} from '../../constants';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {AsideHeaderItem} from '../types';\nimport {b} from '../utils';\n\nimport {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":["useAsideHeaderInnerContext","useCallback","b","Logo","CompositeBar","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"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,GAC9EA,6CAA0B,EAAE;AAEhC,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAC3B,CAAC,KAAgD,KAAI;;AACjD,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;QAChB,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,KAAK,CAAC;AAC1B,KAAC,EACD,CAAC,YAAY,EAAE,IAAI,CAAC,CACvB;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,OAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAC/D,QAAA,IAAI,KACD,KAAC,CAAA,aAAA,CAAAC,SAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,EACR,EAAA,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAED,OAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAEA,OAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;AAED,QAAA,KAAA,CAAA,aAAA,CAACE,yBAAY,EAAA,EACT,WAAW,EAAE,mBAAmB,EAChC,IAAI,EAAC,WAAW,EAChB,iBAAiB,EAAEF,OAAC,CAAC,WAAW,CAAC,EACjC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,IAAI,uBAAuB,EAChD,WAAW,EAAE,WAAW,EAC1B,CAAA;QAED,gBAAgB,KACb,KAAA,CAAA,aAAA,CAACG,UAAI,EAAA,EACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEJ,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEK,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,EAC/B,CAAA,CACL,CACC;AAEd;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../../../src/components/AsideHeader/components/Header.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {Logo} from '../../Logo';\nimport {HEADER_DIVIDER_HEIGHT} from '../../constants';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {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={HEADER_DIVIDER_HEIGHT}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["useAsideHeaderInnerContext","getAsideHeaderDensityConfig","useCallback","b","Logo","CompositeBar","AsideDivider","Icon","headerDividerCollapsedIcon","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,uBAAuB,GAAsB,EAAE;AACrD,MAAM,mBAAmB,GAAG,4CAA4C;AAEjE,MAAM,MAAM,GAAG,MAAK;AACvB,IAAA,MAAM,EACF,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,WAAW,GACd,GAAGA,6CAA0B,EAAE;IAChC,MAAM,EAAC,YAAY,EAAC,GAAGC,mCAA2B,CAAC,WAAW,CAAC;AAE/D,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAC3B,CAAC,KAAgD,KAAI;;AACjD,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;QAChB,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,KAAK,CAAC;AAC1B,KAAC,EACD,CAAC,YAAY,EAAE,IAAI,CAAC,CACvB;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,OAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAC/D,QAAA,IAAI,KACD,KAAA,CAAA,aAAA,CAACC,SAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,oCACqB,MAAM,EACnC,SAAS,EAAED,OAAC,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,EACpC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAEA,OAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAEA,OAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;AAED,QAAA,KAAA,CAAA,aAAA,CAACE,yBAAY,EAAA,EACT,WAAW,EAAE,mBAAmB,EAChC,IAAI,EAAC,WAAW,EAChB,iBAAiB,EAAEF,OAAC,CAAC,WAAW,CAAC,EACjC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,IAAI,uBAAuB,EAChD,WAAW,EAAE,WAAW,EAC1B,CAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAACG,yBAAY,EAAA,EAAC,SAAS,EAAEH,OAAC,CAAC,uBAAuB,CAAC,EAAE,YAAY,EAAC,QAAQ,EAAG,CAAA;QAC5E,gBAAgB,KACb,KAAA,CAAA,aAAA,CAACI,UAAI,EAAA,EACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEL,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,YAAY,EACnB,MAAM,EAAEM,+BAAqB,EAC/B,CAAA,CACL,CACC;AAEd;;;;"}

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

@@ -1,2 +1,10 @@
 .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: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 .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(--_--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, .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/cjs/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/cjs/components/AsideHeader/components/PageLayout/AsideFallback.js

@@ -5,18 +5,25 @@ var React = require('react');
 var uikit = require('@gravity-ui/uikit');
 var constants = require('../../../constants.js');
 var AsideHeaderContext = require('../../AsideHeaderContext.js');
+var density = require('../../density.js');
 var utils = require('../../utils.js');
+var AsideDivider = require('../AsideDivider.js');
 var dividerCollapsed = require('../../../../assets/icons/divider-collapsed.svg.js');
 
-const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
-    const { compact } = AsideHeaderContext.useAsideHeaderContext();
+const AsideFallback = ({ headerDecoration, hideSectionDividers, subheaderItemsCount = 0, qa, }) => {
+    const { compact, menuDensity } = AsideHeaderContext.useAsideHeaderContext();
+    const { compactWidth, itemHeight } = density.getAsideHeaderDensityConfig(menuDensity);
     const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
-    const subheaderHeight = (1 + subheaderItemsCount) * constants.ITEM_HEIGHT;
-    return (React.createElement("div", { className: utils.b('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa },
-        React.createElement("div", { className: utils.b('aside-content', { 'with-decoration': headerDecoration }) },
+    const subheaderHeight = (1 + subheaderItemsCount) * itemHeight;
+    return (React.createElement("div", { className: utils.b('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa, "data-gn-aside-panel": true },
+        React.createElement("div", { className: utils.b('aside-content', {
+                'with-decoration': headerDecoration,
+                'hide-section-dividers': hideSectionDividers,
+            }) },
             React.createElement("div", { className: utils.b('header', { 'with-decoration': headerDecoration }) },
                 React.createElement("div", { style: { height: subheaderHeight } }),
-                compact && headerDecoration ? (React.createElement(uikit.Icon, { data: dividerCollapsed.default, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT })) : null),
+                React.createElement(AsideDivider.AsideDivider, { className: utils.b('header-bottom-divider'), transitionId: "header" }),
+                compact && headerDecoration ? (React.createElement(uikit.Icon, { data: dividerCollapsed.default, className: utils.b('header-divider'), width: compactWidth, height: constants.HEADER_DIVIDER_HEIGHT })) : null),
             React.createElement("div", { style: { flex: 1 } }))));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"AsideFallback.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon, QAProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {b} from '../../utils';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\ninterface Props extends QAProps {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {\n    const {compact} = useAsideHeaderContext();\n\n    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;\n\n    return (\n        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {compact && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COMPACT_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["useAsideHeaderContext","ITEM_HEIGHT","b","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,OAAO,EAAC,GAAGA,wCAAqB,EAAE;IAEzC,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB;IAEnF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAIC,qBAAW;AAE/D,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,OAAO,IAAI,gBAAgB,IACxB,KAAA,CAAA,aAAA,CAACC,UAAI,EAAA,EACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEF,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEG,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,GAC/B,IACF,IAAI,CACN;YACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}
+{"version":3,"file":"AsideFallback.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon, QAProps} from '@gravity-ui/uikit';\n\nimport {HEADER_DIVIDER_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {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={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["useAsideHeaderContext","getAsideHeaderDensityConfig","b","AsideDivider","Icon","headerDividerCollapsedIcon","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;;;AAkBa,MAAA,aAAa,GAAoB,CAAC,EAC3C,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,GAAG,CAAC,EACvB,EAAE,GACL,KAAI;IACD,MAAM,EAAC,OAAO,EAAE,WAAW,EAAC,GAAGA,wCAAqB,EAAE;IACtD,MAAM,EAAC,YAAY,EAAE,UAAU,EAAC,GAAGC,mCAA2B,CAAC,WAAW,CAAC;IAE3E,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB;IAEnF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAI,UAAU;AAE9D,IAAA,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,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,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEA,OAAC,CAAC,eAAe,EAAE;AAC1B,gBAAA,iBAAiB,EAAE,gBAAgB;AACnC,gBAAA,uBAAuB,EAAE,mBAAmB;aAC/C,CAAC,EAAA;YAEF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,OAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACzC,gBAAA,KAAA,CAAA,aAAA,CAACC,yBAAY,EAAA,EAAC,SAAS,EAAED,OAAC,CAAC,uBAAuB,CAAC,EAAE,YAAY,EAAC,QAAQ,EAAG,CAAA;AAC5E,gBAAA,OAAO,IAAI,gBAAgB,IACxB,KAAA,CAAA,aAAA,CAACE,UAAI,EAAA,EACD,IAAI,EAAEC,wBAA0B,EAChC,SAAS,EAAEH,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,YAAY,EACnB,MAAM,EAAEI,+BAAqB,GAC/B,IACF,IAAI,CACN;YACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}

package/build/cjs/components/AsideHeader/components/PageLayout/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 {};