@gravity-ui/navigation 3.10.1 → 5.0.0-beta.1

package/build/esm/{index-Cqnwnlke.js → index-OhAIuDEO.js}

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import React__default, { useMemo, Suspense, useRef, useCallback, useState, useEffect, Component, createElement, useContext, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useEffect, useCallback, useMemo, Suspense, useContext, useLayoutEffect } from 'react';
 import { withNaming } from '@bem-react/classname';
-import { Button, Icon, Flex, Text, Tooltip, List, Portal, Popup, ActionTooltip, useForkRef, setRef, HelpMark, Hotkey, TextInput, Loader, Sheet, eventBroker, Menu, DropdownMenu } from '@gravity-ui/uikit';
-import { Pin, PinFill, Ellipsis, Gear, Xmark, ListUl, ArrowLeft } from '@gravity-ui/icons';
+import { Icon, Portal, Button, Popup, List, useForkRef, setRef, Flex, Text, Tooltip, HelpMark, Hotkey, TextInput, Loader, Sheet, eventBroker, Menu, DropdownMenu } from '@gravity-ui/uikit';
+import { Ellipsis, Pin, PinFill, ChevronDown, ChevronRight, Gear, Xmark, ListUl, ArrowLeft } from '@gravity-ui/icons';
 import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
 import { jsx } from 'react/jsx-runtime';
 import ReactDOM from 'react-dom';
@@ -52,10 +52,10 @@ className, cssSizeVariableName = '--gn-aside-header-size', renderContent, childr
     return (React__default.createElement("div", { className: className, style: Object.assign({}, { [cssSizeVariableName]: `${size}px` }) }, typeof renderContent === 'function' ? (React__default.createElement(RenderContent, { size: size, renderContent: renderContent })) : (children)));
 };
 
-const ASIDE_HEADER_ICON_SIZE = 18;
+const ASIDE_HEADER_ICON_SIZE = 16;
 const ASIDE_HEADER_COMPACT_WIDTH = 56;
 const ASIDE_HEADER_EXPANDED_WIDTH = 236;
-const ITEM_HEIGHT = 40;
+const ITEM_HEIGHT = 36;
 const HEADER_DIVIDER_HEIGHT = 29;
 
 const AsideHeaderInnerContext = React__default.createContext(undefined);
@@ -72,6 +72,10 @@ const useAsideHeaderInnerContext = () => {
 const AsideHeaderContext = React__default.createContext({
     compact: false,
     size: 0,
+    isExpanded: false,
+    onChangeCompact: () => { },
+    onMouseEnter: () => { },
+    onMouseLeave: () => { },
 });
 AsideHeaderContext.displayName = 'AsideHeaderContext';
 const AsideHeaderContextProvider = AsideHeaderContext.Provider;
@@ -85,11 +89,100 @@ const useAsideHeaderContext = () => {
     return contextValue;
 };
 
+function defaultComparator(value, previousValue) {
+    return value !== previousValue;
+}
+function isTogglingOn(currentValue, previousValue) {
+    return !previousValue && Boolean(currentValue);
+}
+function isTogglingOff(currentValue, previousValue) {
+    return Boolean(previousValue) && !currentValue;
+}
+function useDelayedToggle(currentValue, config, maybeShouldThrottleFn) {
+    const shouldThrottleFn = defaultComparator;
+    const timerRef = useRef(null);
+    const valueCacheRef = useRef(currentValue);
+    const [value, setValue] = useState(currentValue);
+    const delayConfig = config;
+    useEffect(() => {
+        function clear() {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        }
+        if (currentValue !== valueCacheRef.current) {
+            clear();
+            const shouldThrottle = shouldThrottleFn(currentValue, valueCacheRef.current);
+            const previousValue = valueCacheRef.current;
+            valueCacheRef.current = currentValue;
+            if (shouldThrottle) {
+                let delay;
+                if (isTogglingOn(currentValue, previousValue)) {
+                    delay = delayConfig.enableDelay;
+                }
+                else if (isTogglingOff(currentValue, previousValue)) {
+                    delay = delayConfig.disableDelay;
+                }
+                else {
+                    delay = delayConfig.enableDelay;
+                }
+                timerRef.current = setTimeout(() => {
+                    setValue(currentValue);
+                }, delay);
+            }
+            else {
+                setValue(currentValue);
+            }
+        }
+        return clear;
+    }, [currentValue, delayConfig.enableDelay, delayConfig.disableDelay, shouldThrottleFn]);
+    return value;
+}
+
+const HOVER_DELAY = 150;
+const useIsExpanded = (externalCompact) => {
+    const [isExpanded, setIsExpanded] = useState(!externalCompact);
+    const [isMouseInside, setIsMouseInside] = useState(false);
+    useEffect(() => {
+        if (externalCompact && isExpanded) {
+            return;
+        }
+        setIsExpanded(!externalCompact);
+        // We need to run this effect only when externalCompact changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [externalCompact]);
+    const shouldExpand = externalCompact && isMouseInside;
+    const delayedShouldExpand = useDelayedToggle(shouldExpand, {
+        enableDelay: HOVER_DELAY,
+        disableDelay: HOVER_DELAY,
+    });
+    // Update isExpanded based on hover
+    useEffect(() => {
+        if (externalCompact) {
+            setIsExpanded(delayedShouldExpand);
+        }
+        // We need to run this effect only when delayedShouldExpand changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [delayedShouldExpand]);
+    const handleMouseEnter = useCallback(() => {
+        setIsMouseInside(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        setIsMouseInside(false);
+    }, []);
+    return {
+        isExpanded,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+    };
+};
+
 const NAMESPACE = 'gn-';
 withNaming({ e: '__', m: '_' });
 const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });
 
-const b$v = block('aside-header');
+const b$u = block('aside-header');
 
 function styleInject(css, ref) {
   if ( ref === undefined ) ref = {};
@@ -118,63 +211,36 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$u = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);display:flex;flex-direction:column;inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed}.gn-aside-header__panel{flex-grow:1;height:auto}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
-styleInject(css_248z$u);
+var css_248z$t = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:36px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__aside_expanded-by-hover{left:0;position:fixed;top:0}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button{margin:0 10px 2px}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--_--item-icon-background-size)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__menu-item,.gn-aside-header__menu-items-group{margin-inline:10px}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) 10px}.gn-aside-header__panels{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);display:flex;flex-direction:column;inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed}.gn-aside-header__panel{flex-grow:1;height:auto}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);background:var(--g-color-base-background);position:fixed;top:0;width:100%}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}.gn-aside-header__content_expanded-by-hover{padding-left:var(--gn-aside-header-min-width)}";
+styleInject(css_248z$t);
 
-const TopAlert$1 = React__default.lazy(() => import('./index-n2JA2W2G.js').then((module) => ({ default: module.TopAlert })));
-const Layout = ({ compact, className, children, topAlert }) => {
-    const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
-    const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
+const TopAlert$1 = React__default.lazy(() => import('./index-B2xnhTBt.js').then((module) => ({ default: module.TopAlert })));
+const Layout = ({ compact, className, children, topAlert, onChangeCompact }) => {
+    const { isExpanded, onMouseEnter, onMouseLeave } = useIsExpanded(compact);
+    const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : ASIDE_HEADER_COMPACT_WIDTH;
+    const asideHeaderContextValue = useMemo(() => ({
+        size,
+        compact,
+        isExpanded,
+        onChangeCompact,
+        onMouseEnter,
+        onMouseLeave,
+    }), [size, compact, isExpanded, onChangeCompact, onMouseEnter, onMouseLeave]);
     return (React__default.createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
-        React__default.createElement("div", { className: b$v({ compact }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
+        React__default.createElement("div", { className: b$u({ compact: !isExpanded }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
             topAlert && (React__default.createElement(Suspense, { fallback: null },
-                React__default.createElement(TopAlert$1, { className: b$v('top-alert'), alert: topAlert }))),
-            React__default.createElement("div", { className: b$v('pane-container') }, children))));
+                React__default.createElement(TopAlert$1, { className: b$u('top-alert'), alert: topAlert }))),
+            React__default.createElement("div", { className: b$u('pane-container') }, children))));
 };
 const ConnectedContent = ({ children, renderContent, }) => {
-    const { size } = useAsideHeaderContext();
-    return (React__default.createElement(Content, { size: size, className: b$v('content'), renderContent: renderContent }, children));
+    const { size, compact, isExpanded } = useAsideHeaderContext();
+    const isExpandedByHover = compact && isExpanded;
+    return (React__default.createElement(Content, { size: size, className: b$u('content', { 'expanded-by-hover': isExpandedByHover }), renderContent: renderContent }, children));
 };
 const PageLayout = Object.assign(Layout, {
     Content: ConnectedContent,
 });
 
-var css_248z$t = ".gn-all-pages-list-item{align-items:center;background:none;border:none;color:inherit;column-gap:var(--g-spacing-4);cursor:pointer;display:flex;font:inherit;height:40px;outline:inherit;padding:0 var(--g-spacing-6);text-decoration:inherit;width:100%}.gn-all-pages-list-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-all-pages-list-item__text{flex:1;text-align:initial}.gn-all-pages-list-item__icon{color:var(--g-color-text-misc)}.gn-all-pages-list-item_edit-mode{padding:0 0 0 var(--g-spacing-4)}";
-styleInject(css_248z$t);
-
-const b$u = block('all-pages-list-item');
-const AllPagesListItem = (props) => {
-    const { item, editMode, onToggle } = props;
-    const ref = useRef(null);
-    const onPinButtonClick = useCallback((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        onToggle();
-    }, [onToggle]);
-    const onItemClick = (e) => {
-        if (editMode) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
-    const [Tag, tagProps] = item.link ? ['a', { href: item.link }] : ['button', {}];
-    const makeNode = useCallback((params) => {
-        return (React__default.createElement(Tag, Object.assign({}, tagProps, { className: b$u(), onClick: onItemClick, ref: ref }),
-            params.icon,
-            React__default.createElement("span", { className: b$u('text') }, params.title),
-            editMode && !item.preventUserRemoving && (React__default.createElement(Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
-                React__default.createElement(Button.Icon, null, item.hidden ? React__default.createElement(Pin, null) : React__default.createElement(PinFill, null))))));
-    }, [Tag, tagProps, onItemClick, editMode, item, onPinButtonClick]);
-    const iconNode = item.icon ? (React__default.createElement(Icon, { className: b$u('icon'), data: item.icon, size: item.iconSize })) : null;
-    const titleNode = item.title;
-    const params = { icon: iconNode, title: titleNode };
-    const opts = { collapsed: false, compact: false, item, ref };
-    if (typeof item.itemWrapper === 'function') {
-        return item.itemWrapper(params, makeNode, opts);
-    }
-    return makeNode(params);
-};
-
 var en$4 = {
 	"menu-item.all-pages.title": "All pages",
 	"all-panel.menu.category.allOther": "All other",
@@ -195,6 +261,7 @@ const COMPONENT$4 = 'AllPagesPanel';
 var i18n$4 = addComponentKeysets({ en: en$4, ru: ru$4 }, `${NAMESPACE}${COMPONENT$4}`);
 
 const ALL_PAGES_ID = 'all-pages';
+const UNGROUPED_ID = 'ungrouped';
 function getAllPagesMenuItem() {
     return {
         id: ALL_PAGES_ID,
@@ -204,519 +271,138 @@ function getAllPagesMenuItem() {
     };
 }
 
-const useGroupedMenuItems = (items) => {
-    const allPagesMenuItems = useMemo(() => {
-        const filteredItems = items.filter((item) => item.type !== 'divider' && item.id !== ALL_PAGES_ID);
-        filteredItems.sort((a, b) => {
-            if (a.type === 'action') {
+const useGroupedMenuItems = (menuItems, menuGroups, isEditMode = false) => {
+    return useMemo(() => {
+        const visibleItems = menuItems.filter((item) => {
+            if (isEditMode && item.id === ALL_PAGES_ID) {
+                return false;
+            }
+            return true;
+        });
+        visibleItems.sort(({ type: typeA }, { type: typeB }) => {
+            if (typeA === 'action') {
                 return 1;
             }
-            if (b.type === 'action') {
+            if (typeB === 'action') {
                 return -1;
             }
             return 0;
         });
-        const groupedItems = filteredItems.reduce((acc, item) => {
-            const category = item.category || i18n$4('all-panel.menu.category.allOther');
-            if (!acc[category]) {
-                acc[category] = [];
+        const groupsMap = new Map();
+        menuGroups === null || menuGroups === undefined ? undefined : menuGroups.forEach((group) => {
+            groupsMap.set(group.id, group);
+        });
+        const groupedItems = new Map();
+        const processedGroups = new Set();
+        visibleItems.forEach((item) => {
+            const groupId = item.groupId;
+            if (groupId) {
+                if (!groupedItems.has(groupId)) {
+                    groupedItems.set(groupId, []);
+                }
+                const group = groupedItems.get(groupId);
+                if (group) {
+                    group.push(item);
+                }
+            }
+        });
+        const flatListItems = [];
+        visibleItems.forEach((item) => {
+            var _a, _b;
+            const groupId = item.groupId;
+            if (groupId) {
+                if (!processedGroups.has(groupId)) {
+                    processedGroups.add(groupId);
+                    const items = groupedItems.get(groupId) || [];
+                    if (items.length > 0) {
+                        const itemsWithVisible = items.filter((sortedItem) => !sortedItem.hidden);
+                        const group = groupsMap.get(groupId);
+                        const isAllGroupItemsHidden = itemsWithVisible.length === 0;
+                        const isGroupHidden = isAllGroupItemsHidden
+                            ? true
+                            : ((_a = group === null || group === undefined ? undefined : group.hidden) !== null && _a !== undefined ? _a : false);
+                        flatListItems.push({
+                            id: groupId,
+                            title: (_b = group === null || group === undefined ? undefined : group.title) !== null && _b !== undefined ? _b : groupId,
+                            icon: group === null || group === undefined ? undefined : group.icon,
+                            hidden: isGroupHidden,
+                            isDisabled: isAllGroupItemsHidden,
+                            collapsible: group === null || group === undefined ? undefined : group.collapsible,
+                            collapsedByDefault: group === null || group === undefined ? undefined : group.collapsedByDefault,
+                            isCollapsed: group === null || group === undefined ? undefined : group.collapsed,
+                            groupId: groupId,
+                            items,
+                        });
+                    }
+                }
             }
-            acc[category].push(item);
-            return acc;
-        }, {});
-        return groupedItems;
-    }, [items]);
-    return allPagesMenuItems;
+            if (!groupId) {
+                flatListItems.push(item);
+            }
+        });
+        return flatListItems;
+    }, [menuItems, menuGroups, isEditMode]);
 };
 
-var css_248z$s = ".gn-all-pages-panel{box-sizing:border-box;height:100%;min-width:300px;padding:var(--g-spacing-4) var(--g-spacing-6)}.gn-all-pages-panel__content{flex:1;margin:0 calc(var(--g-spacing-6)*-1);overflow:auto}.gn-all-pages-panel__category{padding:0 var(--g-spacing-6)}.gn-all-pages-panel__discoverable-feature-wrapper{display:flex}.gn-all-pages-panel__item_editMode{padding:0 var(--g-spacing-6)}.gn-all-pages-panel__drag-placeholder{text-wrap:nowrap;padding-left:88px;padding-right:68px;visibility:hidden}";
-styleInject(css_248z$s);
-
-const b$t = block('all-pages-panel');
-const AllPagesPanel = (props) => {
-    const { startEditIcon, onEditModeChanged, className } = props;
-    const { menuItems, defaultMenuItems, onMenuItemsChanged, editMenuProps } = useAsideHeaderInnerContext();
-    const menuItemsRef = useRef(menuItems);
-    menuItemsRef.current = menuItems;
-    const [isEditMode, setIsEditMode] = useState(false);
-    const [draggingItemTitle, setDraggingItemTitle] = useState(null);
-    const toggleEditMode = useCallback(() => {
-        setIsEditMode((prev) => !prev);
-    }, []);
-    const groupedItems = useGroupedMenuItems(menuItems);
-    useEffect(() => {
-        var _a;
-        onEditModeChanged === null || onEditModeChanged === undefined ? undefined : onEditModeChanged(isEditMode);
-        if (isEditMode) {
-            (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onOpenEditMode) === null || _a === undefined ? undefined : _a.call(editMenuProps);
-        }
-    }, [isEditMode, onEditModeChanged, editMenuProps]);
-    const onItemClick = useCallback((item, _index, _fromKeyboard, event) => {
-        var _a;
-        (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, false, event);
-    }, []);
-    const togglePageVisibility = useCallback((item) => {
-        var _a;
-        if (!onMenuItemsChanged) {
-            return;
-        }
-        const changedItem = Object.assign(Object.assign({}, item), { hidden: !item.hidden });
-        const originItems = menuItemsRef.current.filter((menuItem) => menuItem.id !== ALL_PAGES_ID);
-        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onToggleMenuItem) === null || _a === undefined ? undefined : _a.call(editMenuProps, changedItem);
-        onMenuItemsChanged(originItems.map((menuItem) => {
-            if (menuItem.id !== changedItem.id) {
-                return menuItem;
-            }
-            return changedItem;
-        }));
-    }, [onMenuItemsChanged, editMenuProps]);
-    const onDragEnd = useCallback(() => {
-        setDraggingItemTitle(null);
-    }, [setDraggingItemTitle]);
-    const itemRender = useCallback((item, _isActive, _itemIndex) => {
-        const onDragStart = () => {
-            setDraggingItemTitle(item.title);
-        };
-        return (React__default.createElement(AllPagesListItem, { item: item, onDragStart: onDragStart, onDragEnd: onDragEnd, editMode: isEditMode, onToggle: () => togglePageVisibility(item), enableSorting: editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting }));
-    }, [isEditMode, togglePageVisibility, onDragEnd, setDraggingItemTitle, editMenuProps]);
-    const onResetToDefaultClick = useCallback(() => {
-        var _a;
-        if (!onMenuItemsChanged) {
-            return;
-        }
-        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onResetSettingsToDefault) === null || _a === undefined ? undefined : _a.call(editMenuProps);
-        const originItems = defaultMenuItems === null || defaultMenuItems === undefined ? undefined : defaultMenuItems.filter((item) => item.id !== ALL_PAGES_ID);
-        if (originItems) {
-            onMenuItemsChanged(originItems);
-        }
-    }, [onMenuItemsChanged, editMenuProps, defaultMenuItems]);
-    const changeItemsOrder = useCallback(({ oldIndex, newIndex }) => {
-        var _a;
-        const newItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
-        const element = newItems.splice(oldIndex, 1)[0];
-        newItems.splice(newIndex, 0, element);
-        onMenuItemsChanged === null || onMenuItemsChanged === undefined ? undefined : onMenuItemsChanged(newItems.filter((item) => item.type !== 'divider'));
-        setDraggingItemTitle(null);
-        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onChangeItemsOrder) === null || _a === undefined ? undefined : _a.call(editMenuProps, element, oldIndex, newIndex);
-    }, [onMenuItemsChanged, editMenuProps]);
-    const sortableItems = useMemo(() => {
-        return menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID && !item.afterMoreButton && item.type !== 'divider');
-    }, [menuItems]);
-    return (React__default.createElement(Flex, { className: b$t(null, className), gap: "5", direction: "column" },
-        React__default.createElement(Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
-            React__default.createElement(Text, { variant: "subheader-2" }, isEditMode ? i18n$4('all-panel.title.editing') : i18n$4('all-panel.title.main')),
-            React__default.createElement(Tooltip, { content: i18n$4('all-panel.title.editing') },
-                React__default.createElement(Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default.createElement(Icon, { data: Gear })))),
-        React__default.createElement(Flex, { className: b$t('content'), gap: "5", direction: "column" }, isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting) ? (React__default.createElement("div", null,
-            React__default.createElement(List, { itemClassName: b$t('item', { editMode: true }), itemHeight: 40, onSortEnd: changeItemsOrder, sortable: true, virtualized: false, filterable: false, items: sortableItems, onItemClick: onItemClick, renderItem: itemRender }),
-            draggingItemTitle && (React__default.createElement("div", { className: b$t('drag-placeholder') }, draggingItemTitle)))) : (Object.keys(groupedItems).map((category) => {
-            return (React__default.createElement(Flex, { key: category, direction: "column", gap: "3" },
-                React__default.createElement(Text, { className: b$t('category'), variant: "body-1", color: "secondary" }, category),
-                React__default.createElement(List, { virtualized: false, filterable: false, items: groupedItems[category], onItemClick: onItemClick, renderItem: itemRender })));
-        }))),
-        isEditMode && (React__default.createElement(Button, { onClick: onResetToDefaultClick }, i18n$4('all-panel.resetToDefault')))));
+var button_collapse$1 = "Collapse";
+var button_expand$1 = "Expand";
+var label_more$1 = "More";
+var en$3 = {
+	button_collapse: button_collapse$1,
+	button_expand: button_expand$1,
+	label_more: label_more$1
 };
 
-const useVisibleMenuItems = () => {
-    const { menuItems, allPagesIsAvailable } = useAsideHeaderInnerContext();
-    return useMemo(() => {
-        if (!allPagesIsAvailable) {
-            return menuItems;
-        }
-        let lastVisibleIndex = 0;
-        return menuItems.filter((item, index, items) => {
-            if (item.hidden) {
-                return false;
-            }
-            if (index > 0 &&
-                item.type === 'divider' &&
-                (items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)) {
-                return false;
-            }
-            lastVisibleIndex = index;
-            return true;
-        });
-    }, [allPagesIsAvailable, menuItems]);
+var button_collapse = "Свернуть";
+var button_expand = "Развернуть";
+var label_more = "Ещё";
+var ru$3 = {
+	button_collapse: button_collapse,
+	button_expand: button_expand,
+	label_more: label_more
 };
 
-/**
- * Detect Element Resize.
- * https://github.com/sdecima/javascript-detect-element-resize
- * Sebastian Decima
- *
- * Forked from version 0.5.3; includes the following modifications:
- * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
- * 2) Defer initialization code via a top-level function wrapper (to support SSR).
- * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
- * 4) Add nonce for style element.
- * 5) Use 'export' statement over 'module.exports' assignment
- **/
-
-// Check `document` and `window` in case of server-side rendering
-let windowObject;
-if (typeof window !== "undefined") {
-  windowObject = window;
-
-  // eslint-disable-next-line no-restricted-globals
-} else if (typeof self !== "undefined") {
-  // eslint-disable-next-line no-restricted-globals
-  windowObject = self;
-} else {
-  windowObject = global;
-}
-let cancelFrame = null;
-let requestFrame = null;
-const TIMEOUT_DURATION = 20;
-const clearTimeoutFn = windowObject.clearTimeout;
-const setTimeoutFn = windowObject.setTimeout;
-const cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;
-const requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;
-if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
-  // For environments that don't support animation frame,
-  // fallback to a setTimeout based approach.
-  cancelFrame = clearTimeoutFn;
-  requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
-    return setTimeoutFn(callback, TIMEOUT_DURATION);
-  };
-} else {
-  // Counter intuitively, environments that support animation frames can be trickier.
-  // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
-  // In this case, we should fallback to a setTimeout() implementation.
-  cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
-    cancelAnimationFrameFn(animationFrameID);
-    clearTimeoutFn(timeoutID);
-  };
-  requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
-    const animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
-      clearTimeoutFn(timeoutID);
-      callback();
-    });
-    const timeoutID = setTimeoutFn(function timeoutCallback() {
-      cancelAnimationFrameFn(animationFrameID);
-      callback();
-    }, TIMEOUT_DURATION);
-    return [animationFrameID, timeoutID];
-  };
-}
-function createDetectElementResize(nonce) {
-  let animationKeyframes;
-  let animationName;
-  let animationStartEvent;
-  let animationStyle;
-  let checkTriggers;
-  let resetTriggers;
-  let scrollListener;
-  const attachEvent = typeof document !== "undefined" && document.attachEvent;
-  if (!attachEvent) {
-    resetTriggers = function (element) {
-      const triggers = element.__resizeTriggers__,
-        expand = triggers.firstElementChild,
-        contract = triggers.lastElementChild,
-        expandChild = expand.firstElementChild;
-      contract.scrollLeft = contract.scrollWidth;
-      contract.scrollTop = contract.scrollHeight;
-      expandChild.style.width = expand.offsetWidth + 1 + "px";
-      expandChild.style.height = expand.offsetHeight + 1 + "px";
-      expand.scrollLeft = expand.scrollWidth;
-      expand.scrollTop = expand.scrollHeight;
-    };
-    checkTriggers = function (element) {
-      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
-    };
-    scrollListener = function (e) {
-      // Don't measure (which forces) reflow for scrolls that happen inside of children!
-      if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) {
-        return;
-      }
-      const element = this;
-      resetTriggers(this);
-      if (this.__resizeRAF__) {
-        cancelFrame(this.__resizeRAF__);
-      }
-      this.__resizeRAF__ = requestFrame(function animationFrame() {
-        if (checkTriggers(element)) {
-          element.__resizeLast__.width = element.offsetWidth;
-          element.__resizeLast__.height = element.offsetHeight;
-          element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
-            fn.call(element, e);
-          });
-        }
-      });
-    };
+const COMPONENT$3 = 'AsideHeader';
+var i18n$3 = addComponentKeysets({ en: en$3, ru: ru$3 }, `${NAMESPACE}${COMPONENT$3}`);
 
-    /* Detect CSS Animations support to detect element display/re-attach */
-    let animation = false;
-    let keyframeprefix = "";
-    animationStartEvent = "animationstart";
-    const domPrefixes = "Webkit Moz O ms".split(" ");
-    let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
-    let pfx = "";
-    {
-      const elm = document.createElement("fakeelement");
-      if (elm.style.animationName !== undefined) {
-        animation = true;
-      }
-      if (animation === false) {
-        for (let i = 0; i < domPrefixes.length; i++) {
-          if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
-            pfx = domPrefixes[i];
-            keyframeprefix = "-" + pfx.toLowerCase() + "-";
-            animationStartEvent = startEvents[i];
-            animation = true;
-            break;
-          }
-        }
-      }
-    }
-    animationName = "resizeanim";
-    animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
-    animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
-  }
-  const createStyles = function (doc) {
-    if (!doc.getElementById("detectElementResize")) {
-      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-      const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
-        head = doc.head || doc.getElementsByTagName("head")[0],
-        style = doc.createElement("style");
-      style.id = "detectElementResize";
-      style.type = "text/css";
-      if (nonce != null) {
-        style.setAttribute("nonce", nonce);
-      }
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(doc.createTextNode(css));
-      }
-      head.appendChild(style);
-    }
-  };
-  const addResizeListener = function (element, fn) {
-    if (attachEvent) {
-      element.attachEvent("onresize", fn);
-    } else {
-      if (!element.__resizeTriggers__) {
-        const doc = element.ownerDocument;
-        const elementStyle = windowObject.getComputedStyle(element);
-        if (elementStyle && elementStyle.position === "static") {
-          element.style.position = "relative";
-        }
-        createStyles(doc);
-        element.__resizeLast__ = {};
-        element.__resizeListeners__ = [];
-        (element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
-        const expandTrigger = doc.createElement("div");
-        expandTrigger.className = "expand-trigger";
-        expandTrigger.appendChild(doc.createElement("div"));
-        const contractTrigger = doc.createElement("div");
-        contractTrigger.className = "contract-trigger";
-        element.__resizeTriggers__.appendChild(expandTrigger);
-        element.__resizeTriggers__.appendChild(contractTrigger);
-        element.appendChild(element.__resizeTriggers__);
-        resetTriggers(element);
-        element.addEventListener("scroll", scrollListener, true);
-
-        /* Listen for a css animation to detect element display/re-attach */
-        if (animationStartEvent) {
-          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
-            if (e.animationName === animationName) {
-              resetTriggers(element);
-            }
-          };
-          element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
-        }
-      }
-      element.__resizeListeners__.push(fn);
-    }
-  };
-  const removeResizeListener = function (element, fn) {
-    if (attachEvent) {
-      element.detachEvent("onresize", fn);
-    } else {
-      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-      if (!element.__resizeListeners__.length) {
-        element.removeEventListener("scroll", scrollListener, true);
-        if (element.__resizeTriggers__.__animationListener__) {
-          element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
-          element.__resizeTriggers__.__animationListener__ = null;
-        }
-        try {
-          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
-        } catch (e) {
-          // Preact compat; see developit/preact-compat/issues/228
-        }
-      }
-    }
-  };
-  return {
-    addResizeListener,
-    removeResizeListener
-  };
-}
+var _path$1;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+var SvgControlMenuButton = function SvgControlMenuButton(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 8,
+    height: 8,
+    fill: "currentColor",
+    viewBox: "0 0 8 8"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "m.72 7.64 6.39-3.2a.5.5 0 0 0 0-.89L.72.36A.5.5 0 0 0 0 .81v6.38c0 .37.4.61.72.45"
+  })));
+};
 
-class AutoSizer extends Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      height: this.props.defaultHeight || 0,
-      scaledHeight: this.props.defaultHeight || 0,
-      scaledWidth: this.props.defaultWidth || 0,
-      width: this.props.defaultWidth || 0
-    };
-    this._autoSizer = null;
-    this._detectElementResize = null;
-    this._parentNode = null;
-    this._resizeObserver = null;
-    this._timeoutId = null;
-    this._onResize = () => {
-      this._timeoutId = null;
-      const {
-        disableHeight,
-        disableWidth,
-        onResize
-      } = this.props;
-      if (this._parentNode) {
-        // Guard against AutoSizer component being removed from the DOM immediately after being added.
-        // This can result in invalid style values which can result in NaN values if we don't handle them.
-        // See issue #150 for more context.
-
-        const style = window.getComputedStyle(this._parentNode) || {};
-        const paddingLeft = parseFloat(style.paddingLeft || "0");
-        const paddingRight = parseFloat(style.paddingRight || "0");
-        const paddingTop = parseFloat(style.paddingTop || "0");
-        const paddingBottom = parseFloat(style.paddingBottom || "0");
-        const rect = this._parentNode.getBoundingClientRect();
-        const scaledHeight = rect.height - paddingTop - paddingBottom;
-        const scaledWidth = rect.width - paddingLeft - paddingRight;
-        const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
-        const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
-        if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
-          this.setState({
-            height,
-            width,
-            scaledHeight,
-            scaledWidth
-          });
-          if (typeof onResize === "function") {
-            onResize({
-              height,
-              scaledHeight,
-              scaledWidth,
-              width
-            });
-          }
-        }
-      }
-    };
-    this._setRef = autoSizer => {
-      this._autoSizer = autoSizer;
-    };
-  }
-  componentDidMount() {
-    const {
-      nonce
-    } = this.props;
-    const parentNode = this._autoSizer ? this._autoSizer.parentNode : null;
-    if (parentNode != null && parentNode.ownerDocument && parentNode.ownerDocument.defaultView && parentNode instanceof parentNode.ownerDocument.defaultView.HTMLElement) {
-      // Delay access of parentNode until mount.
-      // This handles edge-cases where the component has already been unmounted before its ref has been set,
-      // As well as libraries like react-lite which have a slightly different lifecycle.
-      this._parentNode = parentNode;
-
-      // Use ResizeObserver from the same context where parentNode (which we will observe) was defined
-      // Using just global can result into onResize events not being emitted in cases with multiple realms
-      const ResizeObserverInstance = parentNode.ownerDocument.defaultView.ResizeObserver;
-      if (ResizeObserverInstance != null) {
-        this._resizeObserver = new ResizeObserverInstance(() => {
-          // Guard against "ResizeObserver loop limit exceeded" error;
-          // could be triggered if the state update causes the ResizeObserver handler to run long.
-          // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
-          this._timeoutId = setTimeout(this._onResize, 0);
+var css_248z$s = ".gn-collapse-button{--_--focus-outline-color:var(--g-color-line-focus);--_--focus-outline-offset:0;align-items:center;background:none;border:none;border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));box-sizing:content-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;min-height:20px;outline:none;padding:0;position:relative;width:100%}.gn-collapse-button:before{content:\"\";inset:0 2px 2px;position:absolute;z-index:-1}.gn-collapse-button:focus-visible:before{outline:var(--_--focus-outline-color) solid 2px;outline-offset:var(--_--focus-outline-offset)}.gn-collapse-button:not(.gn-collapse-button_compact) .gn-collapse-button__icon{transform:rotate(180deg)}.gn-collapse-button:hover .gn-collapse-button__icon{color:var(--g-color-text-primary)}.gn-collapse-button__icon{color:var(--g-color-text-secondary)}";
+styleInject(css_248z$s);
+
+const b$t = block('collapse-button');
+const CollapseButton = ({ className }) => {
+    const { compact, onChangeCompact } = useAsideHeaderContext();
+    const { expandTitle, collapseTitle, collapseButtonWrapper } = useAsideHeaderInnerContext();
+    const onCollapseButtonClick = useCallback(() => {
+        const newCompact = !compact;
+        onChangeCompact === null || onChangeCompact === undefined ? undefined : onChangeCompact(newCompact);
+    }, [compact, onChangeCompact]);
+    const buttonTitle = compact
+        ? expandTitle || i18n$3('button_expand')
+        : collapseTitle || i18n$3('button_collapse');
+    const defaultButton = (React__default.createElement("button", { className: b$t({ compact: compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
+        React__default.createElement(Icon, { data: SvgControlMenuButton, className: b$t('icon'), width: "16", height: "10" })));
+    if (collapseButtonWrapper) {
+        return collapseButtonWrapper(defaultButton, {
+            compact,
+            onChangeCompact,
         });
-        this._resizeObserver.observe(parentNode);
-      } else {
-        // Defer requiring resize handler in order to support server-side rendering.
-        // See issue #41
-        this._detectElementResize = createDetectElementResize(nonce);
-        this._detectElementResize.addResizeListener(parentNode, this._onResize);
-      }
-      this._onResize();
-    }
-  }
-  componentWillUnmount() {
-    if (this._parentNode) {
-      if (this._detectElementResize) {
-        this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
-      }
-      if (this._timeoutId !== null) {
-        clearTimeout(this._timeoutId);
-      }
-      if (this._resizeObserver) {
-        this._resizeObserver.disconnect();
-      }
-    }
-  }
-  render() {
-    const {
-      children,
-      defaultHeight,
-      defaultWidth,
-      disableHeight = false,
-      disableWidth = false,
-      doNotBailOutOnEmptyChildren = false,
-      nonce,
-      onResize,
-      style = {},
-      tagName = "div",
-      ...rest
-    } = this.props;
-    const {
-      height,
-      scaledHeight,
-      scaledWidth,
-      width
-    } = this.state;
-
-    // Outer div should not force width/height since that may prevent containers from shrinking.
-    // Inner component should overflow and use calculated width/height.
-    // See issue #68 for more information.
-    const outerStyle = {
-      overflow: "visible"
-    };
-    const childParams = {};
-
-    // Avoid rendering children before the initial measurements have been collected.
-    // At best this would just be wasting cycles.
-    let bailoutOnChildren = false;
-    if (!disableHeight) {
-      if (height === 0) {
-        bailoutOnChildren = true;
-      }
-      outerStyle.height = 0;
-      childParams.height = height;
-      childParams.scaledHeight = scaledHeight;
     }
-    if (!disableWidth) {
-      if (width === 0) {
-        bailoutOnChildren = true;
-      }
-      outerStyle.width = 0;
-      childParams.width = width;
-      childParams.scaledWidth = scaledWidth;
-    }
-    if (doNotBailOutOnEmptyChildren) {
-      bailoutOnChildren = false;
-    }
-    return createElement(tagName, {
-      ref: this._setRef,
-      style: {
-        ...outerStyle,
-        ...style
-      },
-      ...rest
-    }, !bailoutOnChildren && children(childParams));
-  }
-}
+    return defaultButton;
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1385,7 +1071,7 @@ const b$s = block('composite-bar-highlighted-item');
 const DEBOUNCE_TIME = 200;
 const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
     const { openModalSubscriber } = useAsideHeaderInnerContext();
-    const [{ top, left, width, height }, setPosition] = useState({
+    const [position, setPosition] = useState({
         top: 0,
         left: 0,
         width: 0,
@@ -1405,11 +1091,13 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
     const handleResize = useCallback(() => handleResizeDebounced(), [handleResizeDebounced]);
     useEffect(() => {
         if (!isModalOpen) {
-            return;
+            return undefined;
         }
         handleResize();
         window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
     }, [handleResize, isModalOpen]);
     openModalSubscriber === null || openModalSubscriber === undefined ? undefined : openModalSubscriber((open) => {
         setIsModalOpen(open);
@@ -1418,180 +1106,64 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
         return null;
     }
     return (React__default.createElement(Portal, null,
-        React__default.createElement("div", { className: b$s(), style: { left, top, width, height }, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
+        React__default.createElement("div", { className: b$s(), style: position, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
             React__default.createElement("div", { className: b$s('icon') }, iconNode))));
 };
 HighlightedItem.displayName = 'HighlightedItem';
 
 const ITEM_TYPE_REGULAR = 'regular';
 const COLLAPSE_ITEM_ID = 'collapse-item-id';
-const POPUP_PLACEMENT = ['right-start', 'right-end', 'right'];
-const POPUP_ITEM_HEIGHT = 28;
 
-function getItemHeight$1(item) {
-    if (!isMenuItem(item)) {
-        return ITEM_HEIGHT;
-    }
-    switch (item.type) {
-        case 'action':
-            return 50;
-        case 'divider':
-            return 15;
-        default:
-            return ITEM_HEIGHT;
-    }
-}
-function getItemsHeight(items) {
-    return items.reduce((sum, item) => sum + getItemHeight$1(item), 0);
-}
-function getSelectedItemIndex$1(items) {
-    const index = items.findIndex(({ current }) => Boolean(current));
-    return index === -1 ? undefined : index;
-}
-function getPinnedItems(items) {
-    const pinnedItems = [];
-    for (const item of items) {
-        if (item.pinned) {
-            pinnedItems.push(item);
-        }
-        else if (item.type === 'divider') {
-            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {
-                pinnedItems.push(item);
-            }
-        }
-    }
-    return pinnedItems;
-}
-function getItemsMinHeight(items) {
-    const pinnedItems = getPinnedItems(items);
-    const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
-    return (getItemsHeight(pinnedItems) +
-        getItemsHeight(afterMoreButtonItems) +
-        (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
-}
-function getMoreButtonItem(menuMoreTitle) {
-    return {
-        id: COLLAPSE_ITEM_ID,
-        title: menuMoreTitle,
-        icon: Ellipsis,
-        iconSize: 18,
-    };
-}
-function getAutosizeListItems(items, height, collapseItem) {
-    var _a, _b, _c;
-    const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
-    const regularItems = items.filter((item) => !item.afterMoreButton);
-    const listItems = [...regularItems, ...afterMoreButtonItems];
-    const allItemsHeight = getItemsHeight(listItems);
-    if (allItemsHeight <= height) {
-        return { listItems, collapseItems: [] };
-    }
-    const collapseItemHeight = getItemHeight$1(collapseItem);
-    listItems.splice(regularItems.length, 0, collapseItem);
-    const collapseItems = [];
-    let listHeight = allItemsHeight + collapseItemHeight;
-    let index = listItems.length;
-    while (listHeight > height) {
-        if (index === 0) {
-            break;
-        }
-        index--;
-        const item = listItems[index];
-        if (item.pinned || item.id === COLLAPSE_ITEM_ID || item.afterMoreButton) {
-            continue;
-        }
-        if (item.type === 'divider') {
-            if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === undefined ? undefined : _a.type) === 'divider') {
-                listHeight -= getItemHeight$1(item);
-                listItems.splice(index, 1);
-            }
-            continue;
-        }
-        listHeight -= getItemHeight$1(item);
-        collapseItems.unshift(...listItems.splice(index, 1));
-    }
-    if (((_b = listItems[index]) === null || _b === undefined ? undefined : _b.type) === 'divider' &&
-        (index === 0 || ((_c = listItems[index - 1]) === null || _c === undefined ? undefined : _c.type) === 'divider')) {
-        listItems.splice(index, 1);
-    }
-    return { listItems, collapseItems };
-}
-function isMenuItem(item) {
-    return (item === null || item === undefined ? undefined : item.id) !== undefined;
-}
-
-var css_248z$q = ".gn-composite-bar-item{--gn-composite-bar-item-action-size:36px;--_--horizontal-divider-line-color:var(--g-color-line-generic);--_--item-background-color-hover:var(--g-color-base-simple-hover);--_--item-general-icon-color:var(--g-color-text-primary);--_--item-icon-color:var(--g-color-text-complementary);--_--item-text-color:var(--g-color-text-primary);--_--item-collapsed-radius:7px;--_--item-selected-text-color:var(--g-color-text-primary);--_--item-selected-background-color:var(--g-color-base-selection);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;min-width:0;outline:inherit;padding:0;text-decoration:inherit;width:100%}.gn-composite-bar-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-item__icon{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color))}.gn-composite-bar-item_current .gn-composite-bar-item__icon{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-item-icon-color,var(--_--item-icon-color)))}.gn-composite-bar-highlighted-item .gn-composite-bar-item__icon,.gn-composite-bar_subheader .gn-composite-bar-item__icon,.gn-footer-item .gn-composite-bar-item__icon{color:var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color))}.gn-composite-bar-highlighted-item.gn-composite-bar-item_current .gn-composite-bar-item__icon,.gn-composite-bar_subheader .gn-composite-bar-item_current .gn-composite-bar-item__icon,.gn-footer-item.gn-composite-bar-item_current .gn-composite-bar-item__icon{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.gn-composite-bar-item__icon-tooltip .g-action-tooltip__description{color:var(--g-color-text-light-primary);margin-block-start:0}.gn-composite-bar-item__icon-place{align-items:center;display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--gn-aside-header-min-width)}.gn-composite-bar-item__title{align-items:center;display:flex;margin-right:16px;overflow:hidden}.gn-composite-bar-item__title-text{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--gn-aside-header-item-text-color,var(--_--item-text-color));display:-webkit-box;overflow:hidden;text-align:start}.gn-composite-bar-item_current .gn-composite-bar-item__title-text{color:var(--gn-aside-header-item-current-text-color,var(--_--item-selected-text-color))}.gn-composite-bar-item__title-adornment{margin:0 10px}.gn-composite-bar-item__collapse-item{--_--item-icon-color:var(--g-color-text-misc);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;outline:inherit;padding:0 16px;text-decoration:inherit;width:100%}.gn-composite-bar-item__collapse-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-item__collapse-item-icon{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color));margin-right:10px}.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment{margin-right:0}.gn-composite-bar-item__menu-divider{border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));cursor:default;margin:0 8px;width:100%}.gn-composite-bar-item__collapse-items-popup-content{padding:4px 0}.gn-composite-bar-item__link{align-items:center;display:flex;height:100%;width:100%}.gn-composite-bar-item__link,.gn-composite-bar-item__link:active,.gn-composite-bar-item__link:focus,.gn-composite-bar-item__link:hover,.gn-composite-bar-item__link:visited{color:inherit;outline:none;text-decoration:none}.gn-composite-bar-item__btn-icon{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.gn-composite-bar-item_type_action{background:var(--g-color-base-float);border-radius:var(--gn-composite-bar-item-action-size);box-shadow:0 0 0 1px rgba(0,0,0,.03),0 5px 6px rgba(0,0,0,.12);height:var(--gn-composite-bar-item-action-size);justify-content:center;margin:0 10px 8px;transition:transform .1s ease-out,background-color .15s linear}.gn-composite-bar-item_type_action:focus-visible{box-shadow:0 0 0 2px var(--g-color-line-misc)}.gn-composite-bar-item_type_action:hover{background-color:var(--g-color-base-float-hover)}.gn-composite-bar-item_type_action:active{box-shadow:0 1px 2px var(--g-color-sfx-shadow);transform:scale(.96);transition:none}.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place{width:var(--gn-composite-bar-item-action-size)}.gn-composite-bar-item_type_action.gn-footer-item{width:calc(100% - 20px)}.gn-composite-bar-item__icon-tooltip_item-type_action{margin-left:10px}.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item:not(.gn-composite-bar-item_compact):hover.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item_compact.gn-composite-bar-item_type_action{width:var(--gn-composite-bar-item-action-size)}.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title{margin:0}.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.gn-composite-bar-item_compact:hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact:hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}";
+var css_248z$q = ".gn-composite-bar-item{--gn-composite-bar-item-action-size:36px;--_--item-icon-background-size:36px;--_--horizontal-divider-line-color:var(--g-color-line-generic);--_--item-background-color-hover:var(--g-color-base-simple-hover);--_--item-general-icon-color:var(--g-color-text-primary);--_--item-icon-color:var(--g-color-text-complementary);--_--item-text-color:var(--g-color-text-primary);--_--item-collapsed-radius:7px;--_--item-selected-text-color:var(--g-color-text-primary);--_--item-selected-background-color:var(--g-color-base-selection);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;min-width:0;outline:inherit;padding:0;text-decoration:inherit;width:100%}.gn-composite-bar-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-item__icon{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color))}.gn-composite-bar-item_current .gn-composite-bar-item__icon{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-item-icon-color,var(--_--item-icon-color)))}.gn-composite-bar-highlighted-item .gn-composite-bar-item__icon,.gn-composite-bar_subheader .gn-composite-bar-item__icon,.gn-footer-item .gn-composite-bar-item__icon{color:var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color))}.gn-composite-bar-highlighted-item.gn-composite-bar-item_current .gn-composite-bar-item__icon,.gn-composite-bar_subheader .gn-composite-bar-item_current .gn-composite-bar-item__icon,.gn-footer-item.gn-composite-bar-item_current .gn-composite-bar-item__icon{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.gn-composite-bar-item__icon-tooltip .g-action-tooltip__description{color:var(--g-color-text-light-primary);margin-block-start:0}.gn-composite-bar-item__icon-place{align-items:center;display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--_--item-icon-background-size,36px)}.gn-composite-bar-item__title{align-items:center;display:flex;justify-content:space-between;margin:0 var(--g-spacing-4) 0 var(--g-spacing-2);overflow:hidden}.gn-composite-bar-item__visibility-button{margin-left:auto}.gn-composite-bar-item__title-text{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--gn-aside-header-item-text-color,var(--_--item-text-color));display:-webkit-box;overflow:hidden;text-align:start}.gn-composite-bar-item_current .gn-composite-bar-item__title-text{color:var(--gn-aside-header-item-current-text-color,var(--_--item-selected-text-color))}.gn-composite-bar-item__title-adornment{margin:0 10px}.gn-composite-bar-item__collapse-item{--_--item-icon-color:var(--g-color-text-misc);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;outline:inherit;padding:0 16px;text-decoration:inherit;width:100%}.gn-composite-bar-item__collapse-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-item__collapse-item-icon{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color));margin-right:10px}.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment{margin-right:0}.gn-composite-bar-item__menu-divider{border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));cursor:default;margin:0 10px;width:100%}.gn-composite-bar-item__collapse-items-popup-content{padding:4px 0}.gn-composite-bar-item__link{align-items:center;display:flex;height:100%;width:100%}.gn-composite-bar-item__link,.gn-composite-bar-item__link:active,.gn-composite-bar-item__link:focus,.gn-composite-bar-item__link:hover,.gn-composite-bar-item__link:visited{color:inherit;outline:none;text-decoration:none}.gn-composite-bar-item__btn-icon{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.gn-composite-bar-item_type_action{background:var(--g-color-base-float);border-radius:var(--gn-composite-bar-item-action-size);box-shadow:0 0 0 1px rgba(0,0,0,.03),0 5px 6px rgba(0,0,0,.12);height:var(--gn-composite-bar-item-action-size);justify-content:center;margin-bottom:var(--g-spacing-2);transition:transform .1s ease-out,background-color .15s linear}.gn-composite-bar-item_type_action:focus-visible{box-shadow:0 0 0 2px var(--g-color-line-misc)}.gn-composite-bar-item_type_action:hover{background-color:var(--g-color-base-float-hover)}.gn-composite-bar-item_type_action:active{box-shadow:0 1px 2px var(--g-color-sfx-shadow);transform:scale(.96);transition:none}.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place{width:var(--gn-composite-bar-item-action-size)}.gn-composite-bar-item_type_action.gn-footer-item{width:calc(100% - 20px)}.gn-composite-bar-item__icon-tooltip_item-type_action{margin-left:10px}.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item:not(.gn-composite-bar-item_compact):hover.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item_compact.gn-composite-bar-item_type_action{width:var(--gn-composite-bar-item-action-size)}.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title{margin:0}.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-18px;margin-top:-18px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.gn-composite-bar-item_compact:hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact:hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-18px;margin-top:-18px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-18px;margin-top:-18px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}";
 styleInject(css_248z$q);
 
 const b$r = block('composite-bar-item');
-function renderItemTitle(item) {
-    let titleNode = React__default.createElement("div", { className: b$r('title-text') }, item.title);
-    if (item.rightAdornment) {
+function renderItemTitle(params) {
+    let titleNode = React__default.createElement("div", { className: b$r('title-text') }, params.title);
+    if (params.rightAdornment) {
         titleNode = (React__default.createElement(React__default.Fragment, null,
             titleNode,
-            React__default.createElement("div", { className: b$r('title-adornment') }, item.rightAdornment)));
+            React__default.createElement("div", { className: b$r('title-adornment') }, params.rightAdornment)));
     }
     return titleNode;
 }
 const defaultPopupPlacement = ['right-end'];
 const defaultPopupOffset = { mainAxis: 8, crossAxis: -20 };
 const Item$1 = (props) => {
-    const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupAnchorElement, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onOpenChangePopup, onItemClick, onItemClickCapture, onCollapseItemClick, bringForward, } = props;
-    const { compact } = useAsideHeaderContext();
-    const [open, toggleOpen] = React__default.useState(false);
+    const { className, onMouseLeave, onMouseEnter, popupVisible = false, popupRef: anchoreRefProp, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onOpenChangePopup, onItemClick, onItemClickCapture, itemWrapper, bringForward, rightAdornment, title, href, qa, compact, editMode = false, onToggleVisibility, hidden, preventUserRemoving, } = props;
     const ref = React__default.useRef(null);
-    const anchorRef = popupAnchorElement ? { current: popupAnchorElement } : popupAnchor || ref;
+    const anchorRef = (anchoreRefProp === null || anchoreRefProp === undefined ? undefined : anchoreRefProp.current) ? anchoreRefProp : ref;
     const highlightedRef = React__default.useRef(null);
-    const type = item.type || ITEM_TYPE_REGULAR;
-    const current = item.current || false;
-    const tooltipText = item.tooltipText || item.title;
-    const icon = item.icon;
-    const iconSize = item.iconSize || ASIDE_HEADER_ICON_SIZE;
-    const iconQa = item.iconQa;
-    const collapsedItem = item.id === COLLAPSE_ITEM_ID;
-    const handleClosePopup = React__default.useCallback((event) => {
-        var _a;
-        if (event instanceof MouseEvent &&
-            event.target &&
-            ((_a = ref.current) === null || _a === undefined ? undefined : _a.contains(event.target))) {
-            return;
-        }
-        onClosePopup === null || onClosePopup === undefined ? undefined : onClosePopup();
-    }, [onClosePopup]);
-    const handleOpenChangePopup = React__default.useCallback((open, event, reason) => {
+    const type = props.type || ITEM_TYPE_REGULAR;
+    const current = props.current || false;
+    const icon = props.icon;
+    const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;
+    const iconQa = props.iconQa;
+    const onPinButtonClick = React__default.useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onToggleVisibility === null || onToggleVisibility === undefined ? undefined : onToggleVisibility();
+    }, [onToggleVisibility]);
+    const handleOpenChangePopup = React__default.useCallback((newOpen, event, reason) => {
         var _a;
         if (event instanceof MouseEvent &&
             event.target &&
             ((_a = ref.current) === null || _a === undefined ? undefined : _a.contains(event.target))) {
             return;
         }
-        onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(open, event, reason);
-    }, [onClosePopup]);
-    if (item.type === 'divider') {
+        onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(newOpen, event, reason);
+    }, [onOpenChangePopup]);
+    if (type === 'divider') {
         return React__default.createElement("div", { className: b$r('menu-divider') });
     }
     const makeIconNode = (iconEl) => {
-        return compact ? (React__default.createElement(ActionTooltip, { title: "", description: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$r('icon-tooltip', { 'item-type': type }) },
-            React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave(), className: b$r('btn-icon') }, iconEl))) : (iconEl);
+        return compact ? React__default.createElement("div", { className: b$r('btn-icon') }, iconEl) : iconEl;
     };
     const makeNode = ({ icon: iconEl, title: titleEl }) => {
-        const [Tag, tagProps] = item.link
-            ? ['a', { href: item.link }]
-            : ['button', {}];
+        const [Tag, tagProps] = href ? ['a', { href }] : ['button', {}];
         const createdNode = (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Tag, Object.assign({}, tagProps, { className: b$r({ type, current, compact }, [className, item.className]), ref: ref, "data-qa": item.qa, onClick: (event) => {
-                    if (collapsedItem) {
-                        /**
-                         * If we call onItemClick for collapsedItem then:
-                         * - User get unexpected item in onItemClick callback
-                         * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
-                         */
-                        toggleOpen(!open);
-                        onCollapseItemClick === null || onCollapseItemClick === undefined ? undefined : onCollapseItemClick();
-                    }
-                    else {
-                        onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event);
-                    }
+            React__default.createElement(Tag, Object.assign({}, tagProps, { className: b$r({ type, current, compact }, className), ref: ref, "data-qa": qa, onClick: (event) => {
+                    onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, false, event);
                 }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
                     if (!compact) {
                         onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
@@ -1602,64 +1174,33 @@ const Item$1 = (props) => {
                     }
                 } }),
                 React__default.createElement("div", { className: b$r('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
-                React__default.createElement("div", { className: b$r('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)),
-            renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React__default.createElement(Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: handleClosePopup, onOpenChange: handleOpenChangePopup }, renderPopupContent()))));
+                React__default.createElement("div", { className: b$r('title'), title: typeof title === 'string' ? title : undefined }, titleEl),
+                editMode && !preventUserRemoving && onToggleVisibility ? (React__default.createElement(Button, { onClick: onPinButtonClick, view: hidden ? 'flat-secondary' : 'flat-action', className: b$r('visibility-button') },
+                    React__default.createElement(Button.Icon, null, hidden ? React__default.createElement(Pin, null) : React__default.createElement(PinFill, null)))) : null),
+            renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React__default.createElement(Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorElement: anchorRef.current, onOpenChange: handleOpenChangePopup }, renderPopupContent()))));
         return createdNode;
     };
     const iconNode = icon ? (React__default.createElement(Icon, { qa: iconQa, data: icon, size: iconSize, className: b$r('icon') })) : null;
-    const titleNode = renderItemTitle(item);
+    const titleNode = renderItemTitle({ title, rightAdornment });
     const params = { icon: iconNode, title: titleNode };
     let highlightedNode = null;
     let node;
-    const opts = { compact: Boolean(compact), collapsed: false, item, ref };
-    if (typeof item.itemWrapper === 'function') {
-        node = item.itemWrapper(params, makeNode, opts);
+    const opts = { compact: Boolean(compact), collapsed: false, item: props, ref };
+    if (typeof itemWrapper === 'function') {
+        node = itemWrapper(params, makeNode, opts);
         highlightedNode =
             bringForward &&
-                item.itemWrapper(params, ({ icon: iconEl }) => makeIconNode(iconEl), opts);
+                itemWrapper(params, ({ icon: iconEl }) => makeIconNode(iconEl), opts);
     }
     else {
         node = makeNode(params);
         highlightedNode = bringForward && makeIconNode(iconNode);
     }
     return (React__default.createElement(React__default.Fragment, null,
-        bringForward && (React__default.createElement(HighlightedItem, { iconNode: highlightedNode, iconRef: highlightedRef, onClick: (event) => onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, false, event), onClickCapture: onItemClickCapture })),
-        node,
-        open && collapsedItem && (collapseItems === null || collapseItems === undefined ? undefined : collapseItems.length) && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React__default.createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
+        bringForward && (React__default.createElement(HighlightedItem, { iconNode: highlightedNode, iconRef: highlightedRef, onClick: (event) => onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, false, event), onClickCapture: onItemClickCapture })),
+        node));
 };
 Item$1.displayName = 'Item';
-function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
-    const { compact } = useAsideHeaderContext();
-    return (collapseItems === null || collapseItems === undefined ? undefined : collapseItems.length) ? (React__default.createElement(Popup, { strategy: "fixed", placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
-        React__default.createElement("div", { className: b$r('collapse-items-popup-content') },
-            React__default.createElement(List, { itemClassName: b$r('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, onItemClick: onClose, renderItem: (collapseItem) => {
-                    const makeCollapseNode = ({ title: titleEl, icon: iconEl, }) => {
-                        const [Tag, tagProps] = collapseItem.link
-                            ? ['a', { href: collapseItem.link }]
-                            : ['button', {}];
-                        return (React__default.createElement(Tag, Object.assign({}, tagProps, { className: b$r('collapse-item'), onClick: (event) => {
-                                onItemClick === null || onItemClick === undefined ? undefined : onItemClick(collapseItem, true, event);
-                            } }),
-                            iconEl,
-                            titleEl));
-                    };
-                    const titleNode = renderItemTitle(collapseItem);
-                    const iconNode = collapseItem.icon && (React__default.createElement(Icon, { data: collapseItem.icon, size: 14, className: b$r('collapse-item-icon') }));
-                    const params = { title: titleNode, icon: iconNode };
-                    const opts = {
-                        compact: Boolean(compact),
-                        collapsed: true,
-                        item: collapseItem,
-                        ref: anchorRef,
-                    };
-                    if (typeof collapseItem.itemWrapper === 'function') {
-                        return collapseItem.itemWrapper(params, makeCollapseNode, opts);
-                    }
-                    else {
-                        return makeCollapseNode(params);
-                    }
-                } })))) : null;
-}
 
 const multipleTooltipContextDefaults = {
     active: false,
@@ -1691,32 +1232,68 @@ const POPUP_OFFSET = { mainAxis: 4, crossAxis: -32 };
 const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
     const { activeIndex, hideCollapseItemTooltip } = React__default.useContext(MultipleTooltipContext);
     const activeItem = activeIndex === undefined ? null : items[activeIndex];
-    return (React__default.createElement(Popup, { open: open, className: b$q('popup'), anchorRef: anchorRef, strategy: "fixed", placement: placement, offset: POPUP_OFFSET },
+    return (React__default.createElement(Popup, { open: open, className: b$q('popup'), anchorElement: anchorRef.current, strategy: "fixed", placement: placement, offset: POPUP_OFFSET },
         React__default.createElement("div", { className: b$q() },
             React__default.createElement("div", { className: b$q('items-container') }, items
                 .filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
                 (id !== COLLAPSE_ITEM_ID && type !== 'action'))
-                .map((item, idx) => {
-                switch (item.type) {
+                .map((currentItem, idx) => {
+                switch (currentItem.type) {
                     case 'divider':
-                        return (React__default.createElement("div", { className: b$q('item', { divider: true }), key: idx }, item.title));
+                        return (React__default.createElement("div", { className: b$q('item', { divider: true }), key: idx }, currentItem.title));
                     default:
                         return (React__default.createElement("div", { className: b$q('item', {
-                                active: item === activeItem,
-                            }), key: idx }, item.title));
+                                active: currentItem === activeItem,
+                            }), key: idx }, currentItem.title));
                 }
             })))));
 };
 
-var css_248z$o = ".gn-composite-bar{flex:1 0 auto;min-height:40px;width:100%}.gn-composite-bar .gn-composite-bar__root-menu-item[class]{background-color:transparent}";
+const GAP = 2;
+function getGroupBlockHeight(items) {
+    if (items.length === 0) {
+        return ITEM_HEIGHT;
+    }
+    const gaps = items.length * GAP;
+    // +1 accounts for the group header item in addition to the menu items
+    return (items.length + 1) * ITEM_HEIGHT + gaps;
+}
+
+function getGroupHeight(compositeItem) {
+    const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;
+    return getGroupBlockHeight(visibleGroupItems);
+}
+function getItemHeight$1(compositeItem) {
+    var _a;
+    if ('items' in compositeItem && compositeItem.items && ((_a = compositeItem.items) === null || _a === undefined ? undefined : _a.length) > 0) {
+        return getGroupHeight(compositeItem);
+    }
+    switch (compositeItem.type) {
+        case 'action':
+            return 50;
+        case 'divider':
+            return 15;
+        default:
+            return ITEM_HEIGHT;
+    }
+}
+function getItemsHeight(items) {
+    return items.reduce((sum, item) => sum + getItemHeight$1(item), 0);
+}
+function getSelectedItemIndex$1(compositeItems) {
+    const index = compositeItems.findIndex(({ current }) => Boolean(current));
+    return index === -1 ? undefined : index;
+}
+
+var css_248z$o = ".gn-composite-bar{--gn-aside-header-item-expanded-radius:6px;display:flex;flex:1 1 auto;flex-direction:column;min-height:40px;width:100%}.gn-composite-bar .gn-composite-bar__root-menu-item[class]{background-color:transparent}.gn-composite-bar__menu-group-header,.gn-composite-bar__menu-group-item,.gn-composite-bar__root-menu-item[class]{margin-bottom:2px}.gn-composite-bar__menu-group-header:last-child,.gn-composite-bar__menu-group-item:last-child,.gn-composite-bar__root-menu-item[class]:last-child{margin-bottom:0}.gn-composite-bar_scrollable{-ms-overflow-style:none;flex:1 1 auto;overflow-y:auto;scrollbar-width:none}.gn-composite-bar_scrollable::-webkit-scrollbar{display:none}.gn-composite-bar__root-menu-item:has(.gn-composite-bar__menu-group){align-items:flex-start}.gn-composite-bar__root-menu-item:has(.gn-composite-bar__menu-group)>.g-list__item-sort-icon{position:relative;top:12px}.gn-composite-bar__root-menu-item:has(.gn-composite-bar__menu-group):not(.gn-composite-bar__root-menu-item_compact) .g-list__item-content{overflow:visible}.gn-composite-bar__menu-group{height:100%;position:relative;width:100%}.gn-composite-bar__menu-group:before{border-left:2px solid var(--g-color-line-generic);border-radius:0;content:\"\";height:100%;left:0;position:absolute;top:0;transition:border-radius .15s ease-out;width:100%;z-index:-1}.gn-composite-bar__menu-group:hover:before,.gn-composite-bar__menu-group_expanded:before{border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar__menu-group-header,.gn-composite-bar__menu-group-item{height:36px}.gn-composite-bar__menu-group-item{position:relative}.gn-composite-bar__menu-group-item:not(.gn-composite-bar__menu-group-item_compact){width:calc(100% + 16px)}.gn-composite-bar__menu-group-item_edit{left:-16px}.gn-composite-bar__menu-group-toggle,.gn-composite-bar__menu-group-toggle-placeholder{align-items:center;cursor:pointer;display:inline-flex;height:24px;width:24px}.gn-composite-bar__menu-group-toggle{margin-left:auto}.gn-composite-bar__menu-group-icon{margin-right:var(--g-spacing-3)}";
 styleInject(css_248z$o);
 
 const b$p = block('composite-bar');
-const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, compositeId, }) => {
+const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleTooltip = false, compositeId, className, groupClassName, menuItemClassName, enableSorting = false, editMode = false, compact, onToggleGroupCollapsed, onToggleMenuGroupVisibility, onToggleMenuItemVisibility, onFirstLevelSortEnd, onSecondLevelSortEnd, }) => {
     const ref = useRef(null);
     const tooltipRef = useRef(null);
+    const [hoveredGroupId, setHoveredGroupId] = useState(null);
     const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
-    const { compact } = useAsideHeaderContext();
     React__default.useEffect(() => {
         function handleBlurWindow() {
             if (multipleTooltip && multipleTooltipActive) {
@@ -1796,7 +1373,7 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
         multipleTooltip,
         setMultipleTooltipContextValue,
     ]);
-    const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed, event) => {
+    const onItemClickByIndex = useCallback((itemIndex, orginalItemClick) => (item, collapsed, event) => {
         if (compact &&
             multipleTooltip &&
             itemIndex !== lastClickedItemIndex &&
@@ -1806,107 +1383,108 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
                 active: false,
             });
         }
-        onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, collapsed, event);
+        // Handle clicks on the "more" button (collapse item)
+        if (item.id === COLLAPSE_ITEM_ID && collapsed) {
+            onMoreClick === null || onMoreClick === undefined ? undefined : onMoreClick();
+        }
+        else {
+            onItemClick === null || onItemClick === undefined ? undefined : onItemClick(Object.assign(Object.assign({}, item), { onItemClick: orginalItemClick }), collapsed, event);
+        }
     }, [
         compact,
         lastClickedItemIndex,
         multipleTooltip,
         onItemClick,
+        onMoreClick,
         setMultipleTooltipContextValue,
     ]);
+    const handleFirstLevelSortEnd = useCallback(({ oldIndex, newIndex }) => {
+        if (onFirstLevelSortEnd) {
+            onFirstLevelSortEnd({ oldIndex, newIndex });
+        }
+    }, [onFirstLevelSortEnd]);
+    const handleSecondLevelSortEnd = useCallback((groupIndex) => ({ oldIndex, newIndex }) => {
+        if (onSecondLevelSortEnd) {
+            onSecondLevelSortEnd(groupIndex)({ oldIndex, newIndex });
+        }
+    }, [onSecondLevelSortEnd]);
+    if (!items || items.length === 0) {
+        return null;
+    }
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
-            React__default.createElement(List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$p('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
-                    const itemExtraProps = isMenuItem(item) ? { item } : item;
-                    const enableTooltip = isMenuItem(item)
-                        ? !multipleTooltip
-                        : item.enableTooltip;
-                    return (React__default.createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), onCollapseItemClick: onMoreClick, collapseItems: collapseItems })));
+        React__default.createElement("div", { className: className, ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
+            React__default.createElement(List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$p('root-menu-item', { compact }), virtualized: false, filterable: false, sortable: enableSorting, onSortEnd: enableSorting ? handleFirstLevelSortEnd : undefined, renderItem: (item, _isItemActive, itemIndex) => {
+                    const groupId = item.groupId;
+                    if (!groupId) {
+                        return (React__default.createElement(Item$1, Object.assign({}, item, { className: b$p('menu-item', { compact }, menuItemClassName), compact: compact, editMode: editMode, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), onToggleVisibility: onToggleMenuItemVisibility
+                                ? () => onToggleMenuItemVisibility(item)
+                                : undefined })));
+                    }
+                    const isCollapsible = Boolean('collapsible' in item && item.collapsible);
+                    const isCollapsed = Boolean('isCollapsed' in item && item.isCollapsed);
+                    const groupListItems = ('items' in item && item.items) || [];
+                    const hasHeader = item.title || item.icon || isCollapsible;
+                    const isUngrouped = item.id === UNGROUPED_ID;
+                    const isGroupHovered = hoveredGroupId === item.id;
+                    let groupIcon = item.icon;
+                    if (!isCollapsed) {
+                        groupIcon = ChevronDown;
+                    }
+                    else if (isGroupHovered) {
+                        groupIcon = ChevronRight;
+                    }
+                    return (React__default.createElement("div", { className: b$p('menu-group', { expanded: !isCollapsed }, groupClassName) },
+                        hasHeader && !isUngrouped && (React__default.createElement(Item$1, Object.assign({}, item, { className: b$p('menu-group-header', { collapsed: isCollapsed }), icon: groupIcon, compact: compact, editMode: editMode, onMouseEnter: () => {
+                                setHoveredGroupId(item.id);
+                            }, onMouseLeave: () => {
+                                setHoveredGroupId(null);
+                            }, onItemClick: onItemClickByIndex(itemIndex, onToggleGroupCollapsed
+                                ? () => onToggleGroupCollapsed(groupId)
+                                : undefined), onToggleVisibility: onToggleMenuGroupVisibility
+                                ? () => onToggleMenuGroupVisibility(groupId)
+                                : undefined }))),
+                        !isCollapsed && (React__default.createElement(List, { items: groupListItems, sortable: enableSorting, onSortEnd: handleSecondLevelSortEnd(itemIndex), virtualized: false, filterable: false, itemClassName: b$p('menu-group-item', {
+                                edit: enableSorting,
+                                compact,
+                            }), itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, renderItem: (nestedItem, _isNestedItemActive, _nestedItemIndex) => {
+                                return (React__default.createElement(Item$1, Object.assign({}, nestedItem, { className: b$p('menu-group-header', {
+                                        collapsed: isCollapsed,
+                                    }), compact: compact, editMode: editMode, onMouseEnter: () => {
+                                        setHoveredGroupId(nestedItem.id);
+                                    }, onMouseLeave: () => {
+                                        setHoveredGroupId(null);
+                                    }, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), onToggleVisibility: onToggleMenuItemVisibility
+                                        ? () => onToggleMenuItemVisibility(nestedItem)
+                                        : undefined })));
+                            } }))));
                 } })),
         type === 'menu' && multipleTooltip && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
 };
-const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, compositeId, }) => {
-    if (items.length === 0) {
+const CompositeBar = ({ type, items, onItemClick, onMoreClick, onToggleGroupCollapsed, multipleTooltip = false, compact, compositeId, className, groupClassName, menuItemClassName, editMode = false, }) => {
+    var _a;
+    const visibleItems = (_a = items === null || items === undefined ? undefined : items.filter((item) => !item.hidden)) === null || _a === undefined ? undefined : _a.map((item) => {
+        var _a;
+        return (Object.assign(Object.assign({}, item), { items: 'items' in item ? (_a = item.items) === null || _a === undefined ? undefined : _a.filter((item) => !item.hidden) : [] }));
+    });
+    if (!visibleItems || visibleItems.length === 0) {
         return null;
     }
     let node;
     if (type === 'menu') {
-        const minHeight = getItemsMinHeight(items);
-        const collapseItem = getMoreButtonItem(menuMoreTitle);
-        node = (React__default.createElement("div", { className: b$p({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, (size) => {
-            const width = Number.isNaN(size.width) ? 0 : size.width;
-            const height = Number.isNaN(size.height) ? 0 : size.height;
-            const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
-            return (React__default.createElement("div", { style: { width, height } },
-                React__default.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
-        }))));
+        node = (React__default.createElement("div", { className: b$p({ scrollable: true }, className) },
+            React__default.createElement(CompositeBarView, { compositeId: compositeId, groupClassName: groupClassName, menuItemClassName: menuItemClassName, type: "menu", compact: compact, items: visibleItems, onItemClick: onItemClick, onMoreClick: onMoreClick, multipleTooltip: multipleTooltip, onToggleGroupCollapsed: onToggleGroupCollapsed, editMode: editMode })));
     }
     else {
-        node = (React__default.createElement("div", { className: b$p({ subheader: true }) },
-            React__default.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
+        node = (React__default.createElement("div", { className: b$p({ subheader: true }, className) },
+            React__default.createElement(CompositeBarView, { groupClassName: groupClassName, menuItemClassName: menuItemClassName, type: "subheader", compact: compact, items: visibleItems, onItemClick: onItemClick, editMode: editMode })));
     }
     return React__default.createElement(MultipleTooltipProvider, null, node);
 };
 
-var button_collapse$1 = "Collapse";
-var button_expand$1 = "Expand";
-var label_more$1 = "More";
-var en$3 = {
-	button_collapse: button_collapse$1,
-	button_expand: button_expand$1,
-	label_more: label_more$1
-};
-
-var button_collapse = "Свернуть";
-var button_expand = "Развернуть";
-var label_more = "Ещё";
-var ru$3 = {
-	button_collapse: button_collapse,
-	button_expand: button_expand,
-	label_more: label_more
-};
-
-const COMPONENT$3 = 'AsideHeader';
-var i18n$3 = addComponentKeysets({ en: en$3, ru: ru$3 }, `${NAMESPACE}${COMPONENT$3}`);
-
-var _path$1;
-function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
-var SvgControlMenuButton = function SvgControlMenuButton(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 8,
-    height: 8,
-    fill: "currentColor",
-    viewBox: "0 0 8 8"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    d: "m.72 7.64 6.39-3.2a.5.5 0 0 0 0-.89L.72.36A.5.5 0 0 0 0 .81v6.38c0 .37.4.61.72.45"
-  })));
-};
-
-var css_248z$n = ".gn-collapse-button{--_--focus-outline-color:var(--g-color-line-focus);--_--focus-outline-offset:0;align-items:center;background:none;border:none;border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));box-sizing:content-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;min-height:20px;outline:none;padding:0;position:relative;width:100%}.gn-collapse-button:before{content:\"\";inset:0 2px 2px;position:absolute;z-index:-1}.gn-collapse-button:focus-visible:before{outline:var(--_--focus-outline-color) solid 2px;outline-offset:var(--_--focus-outline-offset)}.gn-collapse-button:not(.gn-collapse-button_compact) .gn-collapse-button__icon{transform:rotate(180deg)}.gn-collapse-button:hover .gn-collapse-button__icon{color:var(--g-color-text-primary)}.gn-collapse-button__icon{color:var(--g-color-text-secondary)}";
+var css_248z$n = ".gn-logo{height:40px}.gn-logo,.gn-logo__btn-logo{align-items:center;display:flex}.gn-logo__btn-logo{cursor:pointer;flex-shrink:0;justify-content:flex-start;overflow-wrap:break-word;width:100%;word-break:break-word}.gn-logo__btn-logo,.gn-logo__btn-logo:active,.gn-logo__btn-logo:focus,.gn-logo__btn-logo:hover,.gn-logo__btn-logo:visited{color:inherit;outline:none;text-decoration:none}.gn-logo__btn-logo:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-logo__logo{margin:0 var(--g-spacing-4) 0 var(--g-spacing-2)}.gn-logo__logo-icon-place{align-items:center;display:flex;flex-shrink:0;justify-content:center;width:36px}";
 styleInject(css_248z$n);
 
-const b$o = block('collapse-button');
-const CollapseButton = ({ className }) => {
-    const { onChangeCompact, compact, expandTitle, collapseTitle, collapseButtonWrapper } = useAsideHeaderInnerContext();
-    const onCollapseButtonClick = useCallback(() => {
-        onChangeCompact === null || onChangeCompact === undefined ? undefined : onChangeCompact(!compact);
-    }, [compact, onChangeCompact]);
-    const buttonTitle = compact
-        ? expandTitle || i18n$3('button_expand')
-        : collapseTitle || i18n$3('button_collapse');
-    const defaultButton = (React__default.createElement("button", { className: b$o({ compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
-        React__default.createElement(Icon, { data: SvgControlMenuButton, className: b$o('icon'), width: "16", height: "10" })));
-    if (collapseButtonWrapper) {
-        return collapseButtonWrapper(defaultButton, { compact, onChangeCompact });
-    }
-    return defaultButton;
-};
-
-var css_248z$m = ".gn-logo{height:40px}.gn-logo,.gn-logo__btn-logo{align-items:center;display:flex}.gn-logo__btn-logo{cursor:pointer;flex-shrink:0;justify-content:flex-start;overflow-wrap:break-word;width:100%;word-break:break-word}.gn-logo__btn-logo,.gn-logo__btn-logo:active,.gn-logo__btn-logo:focus,.gn-logo__btn-logo:hover,.gn-logo__btn-logo:visited{color:inherit;outline:none;text-decoration:none}.gn-logo__btn-logo:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-logo__logo-icon-place{align-items:center;display:flex;flex-shrink:0;justify-content:center;width:36px}";
-styleInject(css_248z$m);
-
-const b$n = block('logo');
+const b$o = block('logo');
 const Logo = ({ text, icon, iconSrc, iconClassName, iconPlaceClassName, iconSize = 24, textSize = 15, href, target = '_self', wrapper, onClick, compact, className, buttonClassName, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }) => {
     const hasWrapper = typeof wrapper === 'function';
     let buttonIcon;
@@ -1922,7 +1500,7 @@ const Logo = ({ text, icon, iconSrc, iconClassName, iconPlaceClassName, iconSize
         logo = text();
     }
     else {
-        logo = (React__default.createElement("div", { className: b$n('logo'), style: { fontSize: textSize } }, text));
+        logo = (React__default.createElement("div", { className: b$o('logo'), style: { fontSize: textSize } }, text));
     }
     const _a = href
         ? {
@@ -1934,10 +1512,10 @@ const Logo = ({ text, icon, iconSrc, iconClassName, iconPlaceClassName, iconSize
             'aria-labelledby': ariaLabelledby,
         }
         : { tag: 'span' }, { tag: Button } = _a, buttonProps = __rest(_a, ["tag"]);
-    const button = (React__default.createElement(Button, Object.assign({}, buttonProps, { className: b$n('btn-logo', buttonClassName), onClick: onClick }),
-        React__default.createElement("span", { className: b$n('logo-icon-place', iconPlaceClassName) }, buttonIcon),
+    const button = (React__default.createElement(Button, Object.assign({}, buttonProps, { className: b$o('btn-logo', buttonClassName), onClick: onClick }),
+        React__default.createElement("span", { className: b$o('logo-icon-place', iconPlaceClassName) }, buttonIcon),
         !compact && logo));
-    return (React__default.createElement("div", { className: b$n(null, className) }, hasWrapper ? wrapper(button, Boolean(compact)) : button));
+    return (React__default.createElement("div", { className: b$o(null, className) }, hasWrapper ? wrapper(button, Boolean(compact)) : button));
 };
 
 var _path;
@@ -1957,17 +1535,18 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
 const DEFAULT_SUBHEADER_ITEMS = [];
 const HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';
 const Header = () => {
-    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
-    const { compact } = useAsideHeaderContext();
+    const { logo, compact, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
+    const { isExpanded } = useAsideHeaderInnerContext();
+    const items = useGroupedMenuItems(subheaderItems || DEFAULT_SUBHEADER_ITEMS);
     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$v('header', { ['with-decoration']: headerDecoration }) },
-        logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: b$v('logo-button'), iconPlaceClassName: b$v('logo-icon-place') }))),
-        React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
-        headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b$v('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
+    return (React__default.createElement("div", { className: b$u('header', { ['with-decoration']: headerDecoration }) },
+        logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: !isExpanded, buttonClassName: b$u('logo-button'), iconPlaceClassName: b$u('logo-icon-place') }))),
+        React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, menuItemClassName: b$u('menu-item'), type: "subheader", compact: compact, items: items, onItemClick: onItemClick }),
+        headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b$u('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
 };
 
 // Avoid Chrome DevTools blue warning.
@@ -1979,12 +1558,20 @@ function getPlatform() {
   return navigator.platform;
 }
 
-var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+var isClient = typeof document !== 'undefined';
+
+var noop$1 = function noop() {};
+var index = isClient ? useLayoutEffect : noop$1;
+
 if (process.env.NODE_ENV !== "production") ;
 
 let lockCount = 0;
+const scrollbarProperty = '--floating-ui-scrollbar-width';
 function enableScrollLock() {
-  const isIOS = /iP(hone|ad|od)|iOS/.test(getPlatform());
+  const platform = getPlatform();
+  const isIOS = /iP(hone|ad|od)|iOS/.test(platform) ||
+  // iPads can claim to be MacIntel
+  platform === 'MacIntel' && navigator.maxTouchPoints > 1;
   const bodyStyle = document.body.style;
   // RTL <body> scrollbar
   const scrollbarX = Math.round(document.documentElement.getBoundingClientRect().left) + document.documentElement.scrollLeft;
@@ -1993,6 +1580,7 @@ function enableScrollLock() {
   const scrollX = bodyStyle.left ? parseFloat(bodyStyle.left) : window.scrollX;
   const scrollY = bodyStyle.top ? parseFloat(bodyStyle.top) : window.scrollY;
   bodyStyle.overflow = 'hidden';
+  bodyStyle.setProperty(scrollbarProperty, scrollbarWidth + "px");
   if (scrollbarWidth) {
     bodyStyle[paddingProp] = scrollbarWidth + "px";
   }
@@ -2016,6 +1604,7 @@ function enableScrollLock() {
       overflow: '',
       [paddingProp]: ''
     });
+    bodyStyle.removeProperty(scrollbarProperty);
     if (isIOS) {
       Object.assign(bodyStyle, {
         position: '',
@@ -2082,7 +1671,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -4480,10 +4069,10 @@ function useResizableDrawerItem(params) {
     return { resizedWidth: displayWidth, resizerHandlers: handlers, isResizing };
 }
 
-var css_248z$l = ".gn-drawer{--_--item-shadow-default:0 1px 5px 0 var(--g-color-sfx-shadow);--_--item-position:fixed;--_--resizer-width:8px;--_--resizer-color:var(--g-color-base-generic);--_--resizer-handle-color:var(--g-color-line-generic);--_--resizer-handle-color-hover:var(--g-color-line-generic-hover);--_--resizer-z-index:100;--_--veil-background-color:var(--g-color-sfx-veil);pointer-events:none;z-index:var(--gn-drawer-z-index)}.gn-drawer_hideVeil{--_--item-shadow:var(--gn-drawer-item-shadow,var(--_--item-shadow-default))}.gn-drawer__item{background-color:var(--g-color-base-background);bottom:0;box-shadow:var(--_--item-shadow,none);left:var(--gn-aside-header-size,0);pointer-events:auto;position:var(--gn-drawer-item-position,var(--_--item-position));top:var(--gn-top-alert-height,0);will-change:transform;z-index:var(--gn-drawer-item-z-index)}.gn-drawer__item_direction_right{left:auto;right:0}.gn-drawer__item_direction_top{bottom:auto;height:100%;right:0}.gn-drawer__item_direction_bottom{height:100%;right:0;top:auto}.gn-drawer__item-transition-enter{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-enter{transform:translate(100%)}.gn-drawer__item-transition_direction_top-enter{transform:translateY(-100%)}.gn-drawer__item-transition_direction_bottom-enter{transform:translateY(100%)}.gn-drawer__item-transition-enter-active,.gn-drawer__item-transition_direction_bottom-enter-active,.gn-drawer__item-transition_direction_right-enter-active,.gn-drawer__item-transition_direction_top-enter-active{transform:translate(0);transition:transform .3s}.gn-drawer__item-transition-enter-done,.gn-drawer__item-transition_direction_bottom-enter-done,.gn-drawer__item-transition_direction_right-enter-done,.gn-drawer__item-transition_direction_top-enter-done{filter:blur(0);transform:translateZ(0)}.gn-drawer__item-transition-exit,.gn-drawer__item-transition_direction_bottom-exit,.gn-drawer__item-transition_direction_right-exit,.gn-drawer__item-transition_direction_top-exit{transform:translate(0)}.gn-drawer__item-transition-exit-active,.gn-drawer__item-transition_direction_bottom-exit-active,.gn-drawer__item-transition_direction_right-exit-active,.gn-drawer__item-transition_direction_top-exit-active{transition:transform .3s}.gn-drawer__item-transition-exit-active{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-exit-active{transform:translate(100%)}.gn-drawer__item-transition_direction_top-exit-active{transform:translateY(-100%)}.gn-drawer__item-transition_direction_bottom-exit-active{transform:translateY(100%)}.gn-drawer__item-transition-exit-done,.gn-drawer__item-transition_direction_bottom-exit-done,.gn-drawer__item-transition_direction_right-exit-done,.gn-drawer__item-transition_direction_top-exit-done,.gn-drawer__item_hidden{visibility:hidden}.gn-drawer__veil{background-color:var(--gn-drawer-veil-background-color,var(--_--veil-background-color));inset:0;pointer-events:auto;position:absolute;z-index:var(--gn-drawer-veil-z-index)}.gn-drawer__veil_hidden{display:none}.gn-drawer__veil-transition-enter{opacity:0}.gn-drawer__veil-transition-enter-active{opacity:1;transition:opacity .3s}.gn-drawer__veil-transition-exit{opacity:1}.gn-drawer__veil-transition-exit-active{opacity:0;transition:opacity .3s}.gn-drawer__veil-transition-exit-done{visibility:hidden}.gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color,var(--_--resizer-handle-color));border-radius:2px;height:28px;width:2px}.gn-drawer__resizer-handle_direction_bottom,.gn-drawer__resizer-handle_direction_top{height:2px;width:28px}.gn-drawer__resizer{align-items:center;background:var(--gn-drawer-item-resizer-color,var(--_--resizer-color));cursor:col-resize;display:flex;flex-direction:column;height:100%;justify-content:center;position:absolute;top:0;width:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));z-index:var(--gn-drawer-item-resizer-z-index,var(--_--resizer-z-index))}.gn-drawer__resizer_direction_right{left:0;top:var(--gn-top-alert-height,0)}.gn-drawer__resizer_direction_left{right:0;top:var(--gn-top-alert-height,0)}.gn-drawer__resizer_direction_top{bottom:0;left:0;top:unset}.gn-drawer__resizer_direction_bottom{left:0;top:0}.gn-drawer__resizer_direction_bottom,.gn-drawer__resizer_direction_top{cursor:row-resize;height:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));width:100%}.gn-drawer__resizer:hover .gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color-hover,var(--_--resizer-handle-color-hover))}";
-styleInject(css_248z$l);
+var css_248z$m = ".gn-drawer{--_--item-shadow-default:0 1px 5px 0 var(--g-color-sfx-shadow);--_--item-position:fixed;--_--resizer-width:8px;--_--resizer-color:var(--g-color-base-generic);--_--resizer-handle-color:var(--g-color-line-generic);--_--resizer-handle-color-hover:var(--g-color-line-generic-hover);--_--resizer-z-index:100;--_--veil-background-color:var(--g-color-sfx-veil);pointer-events:none;z-index:var(--gn-drawer-z-index)}.gn-drawer_hideVeil{--_--item-shadow:var(--gn-drawer-item-shadow,var(--_--item-shadow-default))}.gn-drawer__item{background-color:var(--g-color-base-background);bottom:0;box-shadow:var(--_--item-shadow,none);left:var(--gn-aside-header-size,0);pointer-events:auto;position:var(--gn-drawer-item-position,var(--_--item-position));top:var(--gn-top-alert-height,0);will-change:transform;z-index:var(--gn-drawer-item-z-index)}.gn-drawer__item_direction_right{left:auto;right:0}.gn-drawer__item_direction_top{bottom:auto;height:100%;right:0}.gn-drawer__item_direction_bottom{height:100%;right:0;top:auto}.gn-drawer__item-transition-enter{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-enter{transform:translate(100%)}.gn-drawer__item-transition_direction_top-enter{transform:translateY(-100%)}.gn-drawer__item-transition_direction_bottom-enter{transform:translateY(100%)}.gn-drawer__item-transition-enter-active,.gn-drawer__item-transition_direction_bottom-enter-active,.gn-drawer__item-transition_direction_right-enter-active,.gn-drawer__item-transition_direction_top-enter-active{transform:translate(0);transition:transform .3s}.gn-drawer__item-transition-enter-done,.gn-drawer__item-transition_direction_bottom-enter-done,.gn-drawer__item-transition_direction_right-enter-done,.gn-drawer__item-transition_direction_top-enter-done{filter:blur(0);transform:translateZ(0)}.gn-drawer__item-transition-exit,.gn-drawer__item-transition_direction_bottom-exit,.gn-drawer__item-transition_direction_right-exit,.gn-drawer__item-transition_direction_top-exit{transform:translate(0)}.gn-drawer__item-transition-exit-active,.gn-drawer__item-transition_direction_bottom-exit-active,.gn-drawer__item-transition_direction_right-exit-active,.gn-drawer__item-transition_direction_top-exit-active{transition:transform .3s}.gn-drawer__item-transition-exit-active{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-exit-active{transform:translate(100%)}.gn-drawer__item-transition_direction_top-exit-active{transform:translateY(-100%)}.gn-drawer__item-transition_direction_bottom-exit-active{transform:translateY(100%)}.gn-drawer__item-transition-exit-done,.gn-drawer__item-transition_direction_bottom-exit-done,.gn-drawer__item-transition_direction_right-exit-done,.gn-drawer__item-transition_direction_top-exit-done,.gn-drawer__item_hidden{visibility:hidden}.gn-drawer__veil{background-color:var(--gn-drawer-veil-background-color,var(--_--veil-background-color));inset:0;pointer-events:auto;position:absolute;z-index:var(--gn-drawer-veil-z-index)}.gn-drawer__veil_hidden{display:none}.gn-drawer__veil-transition-enter{opacity:0}.gn-drawer__veil-transition-enter-active{opacity:1;transition:opacity .3s}.gn-drawer__veil-transition-exit{opacity:1}.gn-drawer__veil-transition-exit-active{opacity:0;transition:opacity .3s}.gn-drawer__veil-transition-exit-done{visibility:hidden}.gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color,var(--_--resizer-handle-color));border-radius:2px;height:28px;width:2px}.gn-drawer__resizer-handle_direction_bottom,.gn-drawer__resizer-handle_direction_top{height:2px;width:28px}.gn-drawer__resizer{align-items:center;background:var(--gn-drawer-item-resizer-color,var(--_--resizer-color));cursor:col-resize;display:flex;flex-direction:column;height:100%;justify-content:center;position:absolute;top:0;width:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));z-index:var(--gn-drawer-item-resizer-z-index,var(--_--resizer-z-index))}.gn-drawer__resizer_direction_right{left:0;top:var(--gn-top-alert-height,0)}.gn-drawer__resizer_direction_left{right:0;top:var(--gn-top-alert-height,0)}.gn-drawer__resizer_direction_top{bottom:0;left:0;top:unset}.gn-drawer__resizer_direction_bottom{left:0;top:0}.gn-drawer__resizer_direction_bottom,.gn-drawer__resizer_direction_top{cursor:row-resize;height:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));width:100%}.gn-drawer__resizer:hover .gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color-hover,var(--_--resizer-handle-color-hover))}";
+styleInject(css_248z$m);
 
-const b$m = block('drawer');
+const b$n = block('drawer');
 const TIMEOUT = 300;
 const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
     const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResizeContinue, onResize, keepMounted = false, style = {}, } = props;
@@ -4515,10 +4104,10 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
     React__default.useEffect(() => {
         setInitialRender(true);
     }, [direction]);
-    const resizerElement = resizable ? (React__default.createElement("div", Object.assign({ className: b$m('resizer', { direction }) }, resizerHandlers),
-        React__default.createElement("div", { className: b$m('resizer-handle', { direction }) }))) : null;
-    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, classNames: b$m('item-transition', { direction: cssDirection }), nodeRef: itemRef, onEnter: () => setInitialRender(false), onExit: () => setInitialRender(false) },
-        React__default.createElement("div", { ref: handleRef, className: b$m('item', {
+    const resizerElement = resizable ? (React__default.createElement("div", Object.assign({ className: b$n('resizer', { direction }) }, resizerHandlers),
+        React__default.createElement("div", { className: b$n('resizer-handle', { direction }) }))) : null;
+    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, classNames: b$n('item-transition', { direction: cssDirection }), nodeRef: itemRef, onEnter: () => setInitialRender(false), onExit: () => setInitialRender(false) },
+        React__default.createElement("div", { ref: handleRef, className: b$n('item', {
                 direction: cssDirection,
                 hidden: isInitialRender && !visible,
                 resize: isResizing,
@@ -4554,9 +4143,9 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
     useScrollLock(shouldApplyScrollLock);
     return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, nodeRef: containerRef }, (state) => {
         const childrenVisible = someItemVisible && state === 'entered';
-        const content = (React__default.createElement("div", { ref: containerRef, className: b$m({ hideVeil }, className), style: style },
-            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$m('veil-transition'), nodeRef: veilRef },
-                React__default.createElement("div", { ref: veilRef, className: b$m('veil', { hidden: hideVeil }, veilClassName), onClick: onVeilClick })),
+        const content = (React__default.createElement("div", { ref: containerRef, className: b$n({ hideVeil }, className), style: style },
+            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$n('veil-transition'), nodeRef: veilRef },
+                React__default.createElement("div", { ref: veilRef, className: b$n('veil', { hidden: hideVeil }, veilClassName), onClick: onVeilClick })),
             React__default.Children.map(children, (child) => {
                 if (React__default.isValidElement(child) &&
                     child.type === DrawerItem) {
@@ -4578,28 +4167,29 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
 };
 
 const Panels = () => {
-    const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
-    return panelItems ? (React__default.createElement(Drawer, { className: b$v('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id, className: b$v('panel') }, item)))))) : null;
+    const { panelItems, size, onClosePanel } = useAsideHeaderInnerContext();
+    return panelItems ? (React__default.createElement(Drawer, { className: b$u('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id, className: b$u('panel') }, item)))))) : null;
 };
 
 const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
 const FirstPanel = React__default.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, qa, } = useAsideHeaderInnerContext();
-    const visibleMenuItems = useVisibleMenuItems();
+    const { size, onItemClick, headerDecoration, multipleTooltip, onMenuMoreClick, renderFooter, onToggleGroupCollapsed, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuItems, menuGroups, qa, onMouseEnter, onMouseLeave, isExpanded, } = useAsideHeaderInnerContext();
+    const flatListItems = useGroupedMenuItems(menuItems, menuGroups);
     const asideRef = useRef(null);
     React__default.useEffect(() => {
         setRef(ref, asideRef.current);
     }, [ref]);
+    const isExpandedByHover = compact && isExpanded;
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: b$v('aside', className), style: { width: size }, "data-qa": qa },
-            React__default.createElement("div", { className: b$v('aside-popup-anchor'), ref: asideRef }),
-            customBackground && (React__default.createElement("div", { className: b$v('aside-custom-background', customBackgroundClassName) }, customBackground)),
-            React__default.createElement("div", { className: b$v('aside-content', { ['with-decoration']: headerDecoration }) },
+        React__default.createElement("div", { className: b$u('aside', { 'expanded-by-hover': isExpandedByHover }, className), style: { width: size }, "data-qa": qa, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+            React__default.createElement("div", { className: b$u('aside-popup-anchor'), ref: asideRef }),
+            customBackground && (React__default.createElement("div", { className: b$u('aside-custom-background', customBackgroundClassName) }, customBackground)),
+            React__default.createElement("div", { className: b$u('aside-content', { ['with-decoration']: headerDecoration }) },
                 React__default.createElement(Header, null),
-                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n$3('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$v('menu-items') })),
-                React__default.createElement("div", { className: b$v('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
+                (flatListItems === null || flatListItems === undefined ? undefined : flatListItems.length) ? (React__default.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, className: b$u('menu-items'), groupClassName: b$u('menu-items-group'), menuItemClassName: b$u('menu-item'), compact: !isExpanded, type: "menu", items: flatListItems, onItemClick: onItemClick, onMoreClick: onMenuMoreClick, onToggleGroupCollapsed: onToggleGroupCollapsed, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$u('menu-items') })),
+                React__default.createElement("div", { className: b$u('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
                     size,
-                    compact: Boolean(compact),
+                    compact: Boolean(!isExpanded),
                     asideRef,
                 })),
                 !hideCollapseButton && React__default.createElement(CollapseButton, null))),
@@ -4607,6 +4197,157 @@ const FirstPanel = React__default.forwardRef((_props, ref) => {
 });
 FirstPanel.displayName = 'FirstPanel';
 
+function buildExpandedFromFlatList(flatList) {
+    const expanded = [];
+    flatList.forEach((item) => {
+        if ('items' in item && item.items && item.items.length > 0) {
+            expanded.push(...item.items);
+        }
+        else {
+            expanded.push(item);
+        }
+    });
+    return expanded;
+}
+
+function getRealIndexInExpandedMenu(flatListIndex, flatList) {
+    let realIndex = 0;
+    for (let i = 0; i < flatListIndex; i++) {
+        const item = flatList[i];
+        if ('items' in item && item.items && item.items.length > 0) {
+            realIndex += item.items.length;
+        }
+        else {
+            realIndex += 1;
+        }
+    }
+    return realIndex;
+}
+function getRealIndexInGroup(groupIndex, itemIndexInGroup, flatList) {
+    const groupStartIndex = getRealIndexInExpandedMenu(groupIndex, flatList);
+    return groupStartIndex + itemIndexInGroup;
+}
+
+function sortMenuItems(oldIndex, newIndex, items) {
+    if (items[oldIndex] === undefined || items[newIndex] === undefined) {
+        return buildExpandedFromFlatList(items);
+    }
+    const sortedItems = [...items];
+    const [movedElement] = sortedItems.splice(oldIndex, 1);
+    sortedItems.splice(newIndex, 0, movedElement);
+    return buildExpandedFromFlatList(sortedItems);
+}
+
+var css_248z$l = ".gn-all-pages-panel{--gn-aside-header-item-expanded-radius:6px;box-sizing:border-box;height:100%;min-width:300px;padding:var(--g-spacing-4) var(--g-spacing-6)}.gn-all-pages-panel__content{flex:1;overflow:auto}.gn-all-pages-panel__category{padding:0 var(--g-spacing-6)}.gn-all-pages-panel__discoverable-feature-wrapper{display:flex}.gn-all-pages-panel__menu-group{margin-inline:10px;width:100%}.gn-all-pages-panel__menu-group:not(:last-child){border-bottom:1px solid var(--g-color-line-generic);padding-bottom:var(--g-spacing-2)}";
+styleInject(css_248z$l);
+
+const b$m = block('all-pages-panel');
+const AllPagesPanel = (props) => {
+    const { startEditIcon, onEditModeChanged, className } = props;
+    const { defaultMenuItems, editMenuProps, menuItems, menuGroups, defaultMenuGroups, onToggleGroupCollapsed, onMenuItemsChanged, onMenuGroupsChanged, } = useAsideHeaderInnerContext();
+    const items = useGroupedMenuItems(menuItems, menuGroups, true);
+    const menuItemsRef = useRef(items);
+    menuItemsRef.current = items;
+    const menuGroupsRef = useRef(menuGroups);
+    menuGroupsRef.current = menuGroups;
+    const [isEditMode, setIsEditMode] = useState(false);
+    const toggleEditMode = useCallback(() => {
+        setIsEditMode((prev) => !prev);
+    }, []);
+    useEffect(() => {
+        var _a;
+        onEditModeChanged === null || onEditModeChanged === undefined ? undefined : onEditModeChanged(isEditMode);
+        if (isEditMode) {
+            (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onOpenEditMode) === null || _a === undefined ? undefined : _a.call(editMenuProps);
+        }
+    }, [isEditMode, onEditModeChanged, editMenuProps]);
+    const onItemClick = useCallback((item, collapsed, event) => {
+        var _a;
+        // TODO: make event an optional argument
+        (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, collapsed, event);
+    }, []);
+    const onResetToDefaultClick = useCallback(() => {
+        var _a;
+        if (!onMenuItemsChanged) {
+            return;
+        }
+        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onResetSettingsToDefault) === null || _a === undefined ? undefined : _a.call(editMenuProps);
+        const originItems = defaultMenuItems === null || defaultMenuItems === undefined ? undefined : defaultMenuItems.filter(({ id }) => id !== ALL_PAGES_ID);
+        if (originItems) {
+            onMenuItemsChanged(originItems);
+        }
+        if (onMenuGroupsChanged && defaultMenuGroups) {
+            onMenuGroupsChanged(defaultMenuGroups);
+        }
+    }, [
+        onMenuItemsChanged,
+        editMenuProps,
+        defaultMenuItems,
+        onMenuGroupsChanged,
+        defaultMenuGroups,
+    ]);
+    const handleToggleGroupVisibility = useCallback((groupId) => {
+        if (!onMenuGroupsChanged) {
+            return;
+        }
+        const currentGroups = menuGroupsRef.current || [];
+        const updatedGroups = currentGroups.map((group) => {
+            if (group.id === groupId) {
+                return Object.assign(Object.assign({}, group), { hidden: !group.hidden });
+            }
+            return group;
+        });
+        onMenuGroupsChanged(updatedGroups);
+    }, [onMenuGroupsChanged]);
+    const toggleMenuItemsVisibility = useCallback((item) => {
+        var _a;
+        if (!onMenuItemsChanged) {
+            return;
+        }
+        const changedItem = Object.assign(Object.assign({}, item), { hidden: !item.hidden });
+        const originItems = menuItemsRef.current;
+        const expandedItems = buildExpandedFromFlatList(originItems);
+        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onToggleMenuItem) === null || _a === undefined ? undefined : _a.call(editMenuProps, changedItem);
+        onMenuItemsChanged(expandedItems.map((menuItem) => {
+            if (menuItem.id !== changedItem.id) {
+                return menuItem;
+            }
+            return changedItem;
+        }));
+    }, [onMenuItemsChanged, editMenuProps]);
+    const onFirstLevelSortEnd = useCallback(({ oldIndex, newIndex }) => {
+        if (!onMenuItemsChanged) {
+            return;
+        }
+        const currentFlatList = menuItemsRef.current || [];
+        const updatedItems = sortMenuItems(oldIndex, newIndex, currentFlatList);
+        if (updatedItems) {
+            onMenuItemsChanged === null || onMenuItemsChanged === undefined ? undefined : onMenuItemsChanged(updatedItems);
+        }
+    }, [onMenuItemsChanged]);
+    const onSecondLevelSortEnd = useCallback((groupIndex) => ({ oldIndex, newIndex }) => {
+        if (!onMenuItemsChanged) {
+            return;
+        }
+        const currentFlatList = menuItemsRef.current || [];
+        const realOldIndex = getRealIndexInGroup(groupIndex, oldIndex, currentFlatList);
+        const realNewIndex = getRealIndexInGroup(groupIndex, newIndex, currentFlatList);
+        const expandedItems = buildExpandedFromFlatList(currentFlatList);
+        const updatedItems = sortMenuItems(realOldIndex, realNewIndex, expandedItems);
+        if (updatedItems) {
+            onMenuItemsChanged === null || onMenuItemsChanged === undefined ? undefined : onMenuItemsChanged(updatedItems);
+        }
+    }, [onMenuItemsChanged]);
+    const data = items.filter((item) => item.id !== ALL_PAGES_ID && item.type !== 'action');
+    return (React__default.createElement(Flex, { className: b$m(null, className), gap: "5", direction: "column" },
+        React__default.createElement(Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
+            React__default.createElement(Text, { variant: "subheader-2" }, isEditMode ? i18n$4('all-panel.title.editing') : i18n$4('all-panel.title.main')),
+            React__default.createElement(Tooltip, { content: i18n$4('all-panel.title.editing') },
+                React__default.createElement(Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default.createElement(Icon, { data: Gear })))),
+        React__default.createElement(CompositeBarView, { type: "menu", compact: false, className: b$m('content'), enableSorting: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting), items: data, onFirstLevelSortEnd: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting) ? onFirstLevelSortEnd : undefined, onSecondLevelSortEnd: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting) ? onSecondLevelSortEnd : undefined, editMode: isEditMode, onItemClick: onItemClick, onToggleGroupCollapsed: onToggleGroupCollapsed, onToggleMenuGroupVisibility: handleToggleGroupVisibility, onToggleMenuItemVisibility: toggleMenuItemsVisibility }),
+        isEditMode && (React__default.createElement(Button, { onClick: onResetToDefaultClick }, i18n$4('all-panel.resetToDefault')))));
+};
+
 var InnerPanels;
 (function (InnerPanels) {
     InnerPanels["AllPages"] = "all-pages";
@@ -4614,7 +4355,7 @@ var InnerPanels;
 
 const EMPTY_MENU_ITEMS = [];
 const useAsideHeaderInnerContextValue = (props) => {
-    const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged, onAllPagesClick } = props;
+    const { size, onClosePanel, menuItems, menuGroups, defaultMenuGroups, panelItems, onMenuItemsChanged, onMenuGroupsChanged, onAllPagesClick, } = props;
     const [innerVisiblePanel, setInnerVisiblePanel] = useState();
     const ALL_PAGES_MENU_ITEM = React__default.useMemo(() => {
         return getAllPagesMenuItem();
@@ -4641,6 +4382,17 @@ const useAsideHeaderInnerContextValue = (props) => {
         }
         (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, collapsed, event);
     }, [innerOnClosePanel, ALL_PAGES_MENU_ITEM, onClosePanel]);
+    const onToggleGroupCollapsed = useCallback((groupId) => {
+        const updatedMenuGroups = menuGroups === null || menuGroups === undefined ? undefined : menuGroups.map((group) => {
+            if (group.id === groupId) {
+                return Object.assign(Object.assign({}, group), { collapsed: !group.collapsed });
+            }
+            return group;
+        });
+        if (updatedMenuGroups) {
+            onMenuGroupsChanged === null || onMenuGroupsChanged === undefined ? undefined : onMenuGroupsChanged(updatedMenuGroups);
+        }
+    }, [menuGroups, onMenuGroupsChanged]);
     const innerMenuItems = useMemo(() => allPagesIsAvailable
         ? [
             ...(menuItems || EMPTY_MENU_ITEMS),
@@ -4660,13 +4412,20 @@ const useAsideHeaderInnerContextValue = (props) => {
             },
         ];
     }, [allPagesIsAvailable, panelItems, innerVisiblePanel]);
-    return Object.assign(Object.assign({}, props), { onClosePanel: innerOnClosePanel, allPagesIsAvailable, menuItems: innerMenuItems, panelItems: innerPanelItems, size,
-        onItemClick });
+    return Object.assign(Object.assign({}, props), { onClosePanel: innerOnClosePanel, allPagesIsAvailable, menuItems: innerMenuItems, menuGroups,
+        defaultMenuGroups,
+        onMenuGroupsChanged, panelItems: innerPanelItems, size,
+        onItemClick,
+        onToggleGroupCollapsed });
 };
 
 const PageLayoutAside = React__default.forwardRef((props, ref) => {
-    const { size, compact } = useAsideHeaderContext();
-    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign({ size, compact }, props));
+    const { size, compact, isExpanded, onMouseEnter, onMouseLeave } = useAsideHeaderContext();
+    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign({ size,
+        compact,
+        isExpanded,
+        onMouseEnter,
+        onMouseLeave }, props));
     return (React__default.createElement(AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
         React__default.createElement(FirstPanel, { ref: ref })));
 });
@@ -4674,30 +4433,29 @@ PageLayoutAside.displayName = 'PageLayoutAside';
 
 const AsideHeader = React__default.forwardRef((_a, ref) => {
     var { compact, className, topAlert } = _a, props = __rest(_a, ["compact", "className", "topAlert"]);
-    return (React__default.createElement(PageLayout, { compact: compact, className: className, topAlert: topAlert },
+    return (React__default.createElement(PageLayout, { compact: compact, onChangeCompact: props.onChangeCompact, className: className, topAlert: topAlert },
         React__default.createElement(PageLayoutAside, Object.assign({ ref: ref }, props)),
         React__default.createElement(PageLayout.Content, { renderContent: props.renderContent })));
 });
 AsideHeader.displayName = 'AsideHeader';
 
-var css_248z$k = ".gn-footer-item{height:40px;width:100%}";
+var css_248z$k = ".gn-footer-item{--gn-aside-header-item-expanded-radius:6px;border-radius:var(--gn-aside-header-item-expanded-radius);height:36px;margin-bottom:2px;width:100%}.gn-footer-item:last-child{margin-bottom:0}";
 styleInject(css_248z$k);
 
 const b$l = block('footer-item');
-const FooterItem$1 = (_a) => {
-    var { item } = _a, props = __rest(_a, ["item"]);
-    return (React__default.createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_ICON_SIZE }, item), className: b$l({ compact: props.compact }), onItemClick: item.onItemClick, onItemClickCapture: item.onItemClickCapture })));
-};
+function FooterItem$1(props) {
+    return (React__default.createElement(Item$1, Object.assign({}, props, { iconSize: ASIDE_HEADER_ICON_SIZE, className: b$l({ compact: props.compact }) })));
+}
 
 const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
     const { compact } = useAsideHeaderContext();
     const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
     const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;
-    return (React__default.createElement("div", { className: b$v('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa },
-        React__default.createElement("div", { className: b$v('aside-content', { 'with-decoration': headerDecoration }) },
-            React__default.createElement("div", { className: b$v('header', { 'with-decoration': headerDecoration }) },
+    return (React__default.createElement("div", { className: b$u('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa },
+        React__default.createElement("div", { className: b$u('aside-content', { 'with-decoration': headerDecoration }) },
+            React__default.createElement("div", { className: b$u('header', { 'with-decoration': headerDecoration }) },
                 React__default.createElement("div", { style: { height: subheaderHeight } }),
-                compact && headerDecoration ? (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b$v('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT })) : null),
+                compact && headerDecoration ? (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b$u('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT })) : null),
             React__default.createElement("div", { style: { flex: 1 } }))));
 };
 
@@ -5400,7 +5158,7 @@ function SettingsSearch({ className, initialValue, onChange, debounce = 200, inp
             } })));
 }
 
-var css_248z$a = ".gn-settings{display:grid;grid-template-columns:216px 1fr;height:100%;width:834px}.gn-settings_view_mobile{display:block;height:calc(80vh - 56px);overflow-x:hidden;width:auto}@supports (height:90dvh){.gn-settings_view_mobile{height:calc(90dvh - 56px)}}.gn-settings_view_mobile.gn-settings_loading{text-align:center}.gn-settings_view_mobile .gn-settings__loader{margin-top:20px}.gn-settings_view_mobile .gn-settings__search{margin:4px 0 16px;padding:0 20px}.gn-settings_view_mobile .gn-settings__page{overflow-y:visible}.gn-settings_view_mobile .gn-settings__tabs .g-tabs__item:first-child{margin-left:20px}.gn-settings_view_mobile .gn-settings__tabs .g-tabs__item:last-child{margin-right:20px}.gn-settings_view_mobile .gn-settings__section-heading{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-3-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-3-line-height)}.gn-settings_view_mobile .gn-settings__section-subheader{color:var(--g-color-text-secondary)}.gn-settings_view_mobile .gn-settings__section-heading+.gn-settings-subheader{margin-top:8px}.gn-settings_view_mobile .gn-settings__section-item{margin-top:0}.gn-settings_view_mobile .gn-settings__section-heading+.gn-settings__section-item,.gn-settings_view_mobile .gn-settings__section-subheader+.gn-settings__section-item{margin-top:30px}.gn-settings_view_mobile .gn-settings__section-item+.gn-settings__section-item{margin-top:22px}.gn-settings_view_mobile .gn-settings__item:not(.gn-settings_view_mobile .gn-settings__item_mode_row){gap:8px;grid-template-columns:1fr}.gn-settings_view_mobile .gn-settings__item-heading{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-2-line-height)}.gn-settings_view_mobile .gn-settings__item-description{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-1-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-1-line-height)}.gn-settings_view_mobile .gn-settings__item_mode_row{grid-template-columns:1fr auto}.gn-settings_view_mobile .gn-settings__item_mode_row .gn-settings__item-heading{padding-right:20px}.gn-settings_view_mobile .gn-settings__item-content{width:100%}.gn-settings_view_mobile .gn-settings__not-found{color:var(--g-color-text-hint);font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);justify-items:start;line-height:var(--g-text-body-2-line-height);margin:20px 0 0 20px}.gn-settings_loading{grid-template-columns:auto}.gn-settings__loader{place-self:center}.gn-settings__not-found{display:grid;height:100%;place-items:center}.gn-settings__menu{border-right:1px solid var(--g-color-line-generic)}.gn-settings__heading{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:20px 20px 0}.gn-settings__search{margin:0 20px 16px}.gn-settings__page{overflow-y:auto}.gn-settings__content{padding:20px}.gn-settings__section-right-adornment_hidden{opacity:0;transition:opacity .2s}.gn-settings__section-heading:hover .gn-settings__section-right-adornment_hidden{opacity:1}.gn-settings__section-heading{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:0}.gn-settings__section-item{margin-top:24px}.gn-settings__section+.gn-settings__section{margin-top:32px}.gn-settings__section:only-child .gn-settings__section-item:first-of-type{margin-top:0}.gn-settings__section:only-child .gn-settings__section-heading{display:none}.gn-settings__item{display:grid;grid-template-columns:216px 1fr;justify-items:start}.gn-settings__item_title_hide{grid-template-columns:1fr;justify-items:normal}.gn-settings__item_align_top{align-items:start}.gn-settings__item_align_center{align-items:center}.gn-settings__item-title_badge{position:relative}.gn-settings__item-title_badge:after{background-color:var(--g-color-text-danger);border-radius:50%;content:\"\";display:block;height:6px;position:absolute;right:-8px;top:1px;width:6px}.gn-settings__item-description{color:var(--g-color-text-secondary);display:block;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-top:2px;padding-right:20px}.gn-settings__item-right-adornment_hidden{opacity:0;transition:opacity .2s}.gn-settings__item:hover .gn-settings__item-right-adornment_hidden{opacity:1}.gn-settings__item_selected,.gn-settings__section_selected{background:var(--g-color-base-selection);border-radius:8px;margin-left:-8px;padding:8px}.gn-settings__found{background:var(--g-color-base-selection);font-weight:var(--g-text-accent-font-weight)}";
+var css_248z$a = ".gn-settings{display:grid;grid-template-columns:216px 1fr;height:100%;width:834px}.gn-settings_view_mobile{display:block;height:calc(80vh - 56px);overflow-x:hidden;width:auto}@supports (height:90dvh){.gn-settings_view_mobile{height:calc(90dvh - 56px)}}.gn-settings_view_mobile.gn-settings_loading{text-align:center}.gn-settings_view_mobile .gn-settings__loader{margin-top:20px}.gn-settings_view_mobile .gn-settings__search{margin:4px 0 16px;padding:0 20px}.gn-settings_view_mobile .gn-settings__page{overflow-y:visible}.gn-settings_view_mobile .gn-settings__tabs .g-tabs__item:first-child{margin-left:20px}.gn-settings_view_mobile .gn-settings__tabs .g-tabs__item:last-child{margin-right:20px}.gn-settings_view_mobile .gn-settings__section-heading{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-3-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-3-line-height)}.gn-settings_view_mobile .gn-settings__section-subheader{color:var(--g-color-text-secondary)}.gn-settings_view_mobile .gn-settings__section-heading+.gn-settings-subheader{margin-top:8px}.gn-settings_view_mobile .gn-settings__section-item{margin-top:0}.gn-settings_view_mobile .gn-settings__section-heading+.gn-settings__section-item,.gn-settings_view_mobile .gn-settings__section-subheader+.gn-settings__section-item{margin-top:30px}.gn-settings_view_mobile .gn-settings__section-item+.gn-settings__section-item{margin-top:22px}.gn-settings_view_mobile .gn-settings__item:not(.gn-settings_view_mobile .gn-settings__item_mode_row){gap:8px;grid-template-columns:1fr}.gn-settings_view_mobile .gn-settings__item-heading{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-2-line-height)}.gn-settings_view_mobile .gn-settings__item-description{font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-1-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-1-line-height)}.gn-settings_view_mobile .gn-settings__item_mode_row{grid-template-columns:1fr auto}.gn-settings_view_mobile .gn-settings__item_mode_row .gn-settings__item-heading{padding-right:20px}.gn-settings_view_mobile .gn-settings__item-content{width:100%}.gn-settings_view_mobile .gn-settings__not-found{color:var(--g-color-text-hint);font-family:var(--g-text-body-font-family);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);justify-items:start;line-height:var(--g-text-body-2-line-height);margin:20px 0 0 20px}.gn-settings_loading{grid-template-columns:auto}.gn-settings__loader{place-self:center}.gn-settings__not-found{display:grid;height:100%;place-items:center}.gn-settings__menu{border-right:1px solid var(--g-color-line-generic)}.gn-settings__heading{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:20px 20px 0}.gn-settings__search{margin:0 20px 16px}.gn-settings__page{overflow-y:auto}.gn-settings__content{padding:20px}.gn-settings__section-right-adornment_hidden{opacity:0;transition:opacity .2s}.gn-settings__section-heading:hover .gn-settings__section-right-adornment_hidden{opacity:1}.gn-settings__section-heading{font-family:var(--g-text-subheader-font-family);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);margin:0}.gn-settings__section-item{margin-top:24px}.gn-settings__section+.gn-settings__section{margin-top:32px}.gn-settings__section:only-child .gn-settings__section-item:first-of-type{margin-top:0}.gn-settings__section:only-child .gn-settings__section-heading{display:none}.gn-settings__item{display:grid;grid-template-columns:216px 1fr;justify-items:start}.gn-settings__item_title_hide{grid-template-columns:1fr;justify-content:normal}.gn-settings__item_align_top{align-items:start}.gn-settings__item_align_center{align-items:center}.gn-settings__item-title_badge{position:relative}.gn-settings__item-title_badge:after{background-color:var(--g-color-text-danger);border-radius:50%;content:\"\";display:block;height:6px;position:absolute;right:-8px;top:1px;width:6px}.gn-settings__item-description{color:var(--g-color-text-secondary);display:block;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-top:2px;padding-right:20px}.gn-settings__item-right-adornment_hidden{opacity:0;transition:opacity .2s}.gn-settings__item:hover .gn-settings__item-right-adornment_hidden{opacity:1}.gn-settings__item_selected,.gn-settings__section_selected{background:var(--g-color-base-selection);border-radius:8px;margin-left:-8px;padding:8px}.gn-settings__found{background:var(--g-color-base-selection);font-weight:var(--g-text-accent-font-weight)}";
 styleInject(css_248z$a);
 
 function Settings(_a) {
@@ -5700,7 +5458,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
 var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px;background-color:var(--g-color-base-background)}.gn-mobile-header__header-container{background-color:var(--g-color-base-background);position:sticky;top:0;z-index:var(--gn-mobile-header-z-index,100)}.gn-mobile-header__header{align-items:center;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 10px}.gn-mobile-header__burger{padding:12px}.gn-mobile-header__panel-item{--gn-drawer-item-position:var(--gn-mobile-header-panel-position,absolute)}.gn-mobile-header__burger-menu,.gn-mobile-header__panel-item{background-color:var(--g-color-base-background);max-height:100%;max-width:90vw;width:320px}.gn-mobile-header__user-menu{overflow-y:auto}.gn-mobile-header__overlap-panel,.gn-mobile-header__panels{z-index:var(--gn-mobile-header-panel-z-index,98)}.gn-mobile-header__panels{inset:var(--mobile-header-min-heigth) 0 0;overflow:hidden;position:fixed}.gn-mobile-header__panel-item{height:100%;top:unset}.gn-mobile-header__content{overflow:auto}";
 styleInject(css_248z$4);
 
-const TopAlert = React__default.lazy(() => import('./index-n2JA2W2G.js').then((module) => ({ default: module.TopAlert })));
+const TopAlert = React__default.lazy(() => import('./index-B2xnhTBt.js').then((module) => ({ default: module.TopAlert })));
 const b$4 = block('mobile-header');
 const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
     const targetRef = useForwardRef(ref);
@@ -6001,4 +5759,4 @@ const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, mo
 };
 
 export { AsideHeader as A, DrawerItem as D, FooterItem$1 as F, HotkeysPanel as H, Logo as L, MOBILE_HEADER_EVENT_NAMES as M, PageLayout as P, Settings as S, Title as T, AsideHeaderContextProvider as a, block as b, PageLayoutAside as c, debounceFn as d, AsideFallback as e, Drawer as f, PublicActionBar as g, useSettingsContext as h, useSettingsSelectionContext as i, FooterItem as j, getMobileHeaderCustomEvent as k, MobileHeader as l, MobileLogo as m, Footer as n, MobileFooter as o, styleInject as s, useAsideHeaderContext as u };
-//# sourceMappingURL=index-Cqnwnlke.js.map
+//# sourceMappingURL=index-OhAIuDEO.js.map