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

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"gn-all-pages-panel":"AllPagesPanel-module__gn-all-pages-panel___RN6Kk","gnAllPagesPanel":"AllPagesPanel-module__gn-all-pages-panel___RN6Kk","gn-all-pages-panel__content":"AllPagesPanel-module__gn-all-pages-panel__content___XgBXG","gnAllPagesPanelContent":"AllPagesPanel-module__gn-all-pages-panel__content___XgBXG","gn-all-pages-panel__discoverable-feature-wrapper":"AllPagesPanel-module__gn-all-pages-panel__discoverable-feature-wrapper___fwkXa","gnAllPagesPanelDiscoverableFeatureWrapper":"AllPagesPanel-module__gn-all-pages-panel__discoverable-feature-wrapper___fwkXa","gn-all-pages-panel__menu-group":"AllPagesPanel-module__gn-all-pages-panel__menu-group___sLa1D","gnAllPagesPanelMenuGroup":"AllPagesPanel-module__gn-all-pages-panel__menu-group___sLa1D"};
+var styles = {"gn-all-pages-panel":"AllPagesPanel-module__gn-all-pages-panel___RN6Kk","gnAllPagesPanel":"AllPagesPanel-module__gn-all-pages-panel___RN6Kk","gn-all-pages-panel__content":"AllPagesPanel-module__gn-all-pages-panel__content___XgBXG","gnAllPagesPanelContent":"AllPagesPanel-module__gn-all-pages-panel__content___XgBXG","gn-all-pages-panel__category":"AllPagesPanel-module__gn-all-pages-panel__category___iMBE-","gnAllPagesPanelCategory":"AllPagesPanel-module__gn-all-pages-panel__category___iMBE-","gn-all-pages-panel__discoverable-feature-wrapper":"AllPagesPanel-module__gn-all-pages-panel__discoverable-feature-wrapper___fwkXa","gnAllPagesPanelDiscoverableFeatureWrapper":"AllPagesPanel-module__gn-all-pages-panel__discoverable-feature-wrapper___fwkXa","gn-all-pages-panel__item_editMode":"AllPagesPanel-module__gn-all-pages-panel__item_editMode___qNANp","gnAllPagesPanelItemEditMode":"AllPagesPanel-module__gn-all-pages-panel__item_editMode___qNANp","gn-all-pages-panel__drag-placeholder":"AllPagesPanel-module__gn-all-pages-panel__drag-placeholder___ZDdN5","gnAllPagesPanelDragPlaceholder":"AllPagesPanel-module__gn-all-pages-panel__drag-placeholder___ZDdN5"};
 
 exports.default = styles;
 //# sourceMappingURL=AllPagesPanel.module.scss.js.map

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

@@ -1,4 +1,3 @@
 import { AsideHeaderItem } from '../../types';
 export declare const ALL_PAGES_ID: "all-pages";
-export declare const UNGROUPED_ID: "ungrouped";
 export declare function getAllPagesMenuItem(): AsideHeaderItem;

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

@@ -4,7 +4,6 @@ var icons = require('@gravity-ui/icons');
 var index = require('./i18n/index.js');
 
 const ALL_PAGES_ID = 'all-pages';
-const UNGROUPED_ID = 'ungrouped';
 function getAllPagesMenuItem() {
     return {
         id: ALL_PAGES_ID,
@@ -15,6 +14,5 @@ function getAllPagesMenuItem() {
 }
 
 exports.ALL_PAGES_ID = ALL_PAGES_ID;
-exports.UNGROUPED_ID = UNGROUPED_ID;
 exports.getAllPagesMenuItem = getAllPagesMenuItem;
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/constants.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {AsideHeaderItem} from '../../types';\n\nimport i18n from './i18n';\n\nexport const ALL_PAGES_ID = 'all-pages' as const;\nexport const UNGROUPED_ID = 'ungrouped' as const;\n\nexport function getAllPagesMenuItem(): AsideHeaderItem {\n    return {\n        id: ALL_PAGES_ID,\n        title: i18n('menu-item.all-pages.title'),\n        tooltipText: i18n('menu-item.all-pages.title'),\n        icon: Ellipsis,\n    };\n}\n"],"names":["i18n","Ellipsis"],"mappings":";;;;;AAMO,MAAM,YAAY,GAAG;AACrB,MAAM,YAAY,GAAG;SAEZ,mBAAmB,GAAA;IAC/B,OAAO;AACH,QAAA,EAAE,EAAE,YAAY;AAChB,QAAA,KAAK,EAAEA,aAAI,CAAC,2BAA2B,CAAC;AACxC,QAAA,WAAW,EAAEA,aAAI,CAAC,2BAA2B,CAAC;AAC9C,QAAA,IAAI,EAAEC,cAAQ;KACjB;AACL;;;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/constants.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {AsideHeaderItem} from '../../types';\n\nimport i18n from './i18n';\n\nexport const ALL_PAGES_ID = 'all-pages' as const;\n\nexport function getAllPagesMenuItem(): AsideHeaderItem {\n    return {\n        id: ALL_PAGES_ID,\n        title: i18n('menu-item.all-pages.title'),\n        tooltipText: i18n('menu-item.all-pages.title'),\n        icon: Ellipsis,\n    };\n}\n"],"names":["i18n","Ellipsis"],"mappings":";;;;;AAMO,MAAM,YAAY,GAAG;SAEZ,mBAAmB,GAAA;IAC/B,OAAO;AACH,QAAA,EAAE,EAAE,YAAY;AAChB,QAAA,KAAK,EAAEA,aAAI,CAAC,2BAA2B,CAAC;AACxC,QAAA,WAAW,EAAEA,aAAI,CAAC,2BAA2B,CAAC;AAC9C,QAAA,IAAI,EAAEC,cAAQ;KACjB;AACL;;;;;"}

package/build/cjs/components/AsideHeader/components/AllPagesPanel/i18n/en.json.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var en = {
 	"menu-item.all-pages.title": "All pages",
+	"all-panel.menu.category.allOther": "All other",
 	"all-panel.resetToDefault": "Reset to default",
 	"all-panel.title.editing": "Configuring the menu bar",
 	"all-panel.title.main": "All pages"

package/build/cjs/components/AsideHeader/components/AllPagesPanel/i18n/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/build/cjs/components/AsideHeader/components/AllPagesPanel/i18n/index.d.ts

@@ -1,14 +1,14 @@
-declare const _default: ((key: "menu-item.all-pages.title" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", params?: import("@gravity-ui/i18n").Params) => string) & {
+declare const _default: ((key: "menu-item.all-pages.title" | "all-panel.menu.category.allOther" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", params?: import("@gravity-ui/i18n").Params) => string) & {
     Translation: import("react").ComponentType<{
         children: (props: {
-            t: (key: "menu-item.all-pages.title" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", params?: import("@gravity-ui/i18n").Params) => string;
+            t: (key: "menu-item.all-pages.title" | "all-panel.menu.category.allOther" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", params?: import("@gravity-ui/i18n").Params) => string;
         }) => React.ReactNode;
     }>;
     useTranslation: () => {
-        t: (key: "menu-item.all-pages.title" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", params?: import("@gravity-ui/i18n").Params) => string;
+        t: (key: "menu-item.all-pages.title" | "all-panel.menu.category.allOther" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", params?: import("@gravity-ui/i18n").Params) => string;
     };
     keysetData: {
-        "gn-AllPagesPanel": Record<"menu-item.all-pages.title" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", import("@gravity-ui/i18n").KeyData>;
+        "gn-AllPagesPanel": Record<"menu-item.all-pages.title" | "all-panel.menu.category.allOther" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", import("@gravity-ui/i18n").KeyData>;
     };
 };
 export default _default;

package/build/cjs/components/AsideHeader/components/AllPagesPanel/i18n/ru.json.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var ru = {
 	"menu-item.all-pages.title": "Все страницы",
+	"all-panel.menu.category.allOther": "Остальное",
 	"all-panel.resetToDefault": "Сбросить по умолчанию",
 	"all-panel.title.editing": "Настройка панели меню",
 	"all-panel.title.main": "Все страницы"

package/build/cjs/components/AsideHeader/components/AllPagesPanel/i18n/ru.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"ru.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"ru.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

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

@@ -1,2 +1,3 @@
 export { AllPagesPanel } from './AllPagesPanel';
 export { getAllPagesMenuItem } from './constants';
+export { useVisibleMenuItems } from './useVisibleMenuItems';

package/build/cjs/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.d.ts

@@ -1,3 +1,4 @@
-import { MenuGroup, MenuItem } from '../../../types';
-import { MenuItemsWithGroups } from '../../types';
-export declare const useGroupedMenuItems: (menuItems: MenuItem[], menuGroups?: MenuGroup[], isEditMode?: boolean) => MenuItemsWithGroups[];
+import { AsideHeaderItem } from '../../types';
+export declare const useGroupedMenuItems: (asideHeaderItems: AsideHeaderItem[]) => {
+    [key: string]: AsideHeaderItem[];
+};

package/build/cjs/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.js

@@ -2,16 +2,12 @@
 
 var React = require('react');
 var constants = require('./constants.js');
+var index = require('./i18n/index.js');
 
-const useGroupedMenuItems = (menuItems, menuGroups, isEditMode = false) => {
-    return React.useMemo(() => {
-        const visibleItems = menuItems.filter((item) => {
-            if (isEditMode && item.id === constants.ALL_PAGES_ID) {
-                return false;
-            }
-            return true;
-        });
-        visibleItems.sort(({ type: typeA }, { type: typeB }) => {
+const useGroupedMenuItems = (asideHeaderItems) => {
+    const allPagesMenuItems = React.useMemo(() => {
+        const filteredItems = asideHeaderItems.filter(({ id, type }) => type !== 'divider' && id !== constants.ALL_PAGES_ID);
+        filteredItems.sort(({ type: typeA }, { type: typeB }) => {
             if (typeA === 'action') {
                 return 1;
             }
@@ -20,60 +16,17 @@ const useGroupedMenuItems = (menuItems, menuGroups, isEditMode = false) => {
             }
             return 0;
         });
-        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 groupedItems = filteredItems.reduce((acc, asideHeaderItem) => {
+            const category = asideHeaderItem.category || index.default('all-panel.menu.category.allOther');
+            if (!acc[category]) {
+                acc[category] = [];
             }
-        });
-        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,
-                        });
-                    }
-                }
-            }
-            if (!groupId) {
-                flatListItems.push(item);
-            }
-        });
-        return flatListItems;
-    }, [menuItems, menuGroups, isEditMode]);
+            acc[category].push(asideHeaderItem);
+            return acc;
+        }, {});
+        return groupedItems;
+    }, [asideHeaderItems]);
+    return allPagesMenuItems;
 };
 
 exports.useGroupedMenuItems = useGroupedMenuItems;

package/build/cjs/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGroupedMenuItems.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.ts"],"sourcesContent":["import {useMemo} from 'react';\n\nimport {MenuGroup, MenuItem} from '../../../types';\nimport {MenuItemsWithGroups} from '../../types';\n\nimport {ALL_PAGES_ID} from './constants';\n\nexport const useGroupedMenuItems = (\n    menuItems: MenuItem[],\n    menuGroups?: MenuGroup[],\n    isEditMode = false,\n): MenuItemsWithGroups[] => {\n    return useMemo(() => {\n        const visibleItems = menuItems.filter((item: MenuItem): boolean => {\n            if (isEditMode && item.id === ALL_PAGES_ID) {\n                return false;\n            }\n\n            return true;\n        });\n\n        visibleItems.sort(({type: typeA}, {type: typeB}) => {\n            if (typeA === 'action') {\n                return 1;\n            }\n            if (typeB === 'action') {\n                return -1;\n            }\n            return 0;\n        });\n\n        const groupsMap = new Map<string, MenuGroup>();\n\n        menuGroups?.forEach((group) => {\n            groupsMap.set(group.id, group);\n        });\n\n        const groupedItems = new Map<string, MenuItemsWithGroups[]>();\n        const ungroupedItems: MenuItemsWithGroups[] = [];\n        const processedGroups = new Set<string>();\n\n        visibleItems.forEach((item) => {\n            const groupId = item.groupId;\n\n            if (groupId) {\n                if (!groupedItems.has(groupId)) {\n                    groupedItems.set(groupId, []);\n                }\n\n                const group = groupedItems.get(groupId);\n\n                if (group) {\n                    group.push(item);\n                }\n            } else {\n                ungroupedItems.push(item);\n            }\n        });\n\n        const flatListItems: MenuItemsWithGroups[] = [];\n\n        visibleItems.forEach((item) => {\n            const groupId = item.groupId;\n\n            if (groupId) {\n                if (!processedGroups.has(groupId)) {\n                    processedGroups.add(groupId);\n\n                    const items = groupedItems.get(groupId) || [];\n\n                    if (items.length > 0) {\n                        const itemsWithVisible = items.filter((sortedItem) => !sortedItem.hidden);\n\n                        const group = groupsMap.get(groupId);\n                        const isAllGroupItemsHidden = itemsWithVisible.length === 0;\n                        const isGroupHidden = isAllGroupItemsHidden\n                            ? true\n                            : (group?.hidden ?? false);\n\n                        flatListItems.push({\n                            id: groupId,\n                            title: group?.title ?? groupId,\n                            icon: group?.icon,\n                            hidden: isGroupHidden,\n                            isDisabled: isAllGroupItemsHidden,\n                            collapsible: group?.collapsible,\n                            collapsedByDefault: group?.collapsedByDefault,\n                            isCollapsed: group?.collapsed,\n                            groupId: groupId,\n                            items,\n                        });\n                    }\n                }\n            }\n\n            if (!groupId) {\n                flatListItems.push(item);\n            }\n        });\n\n        return flatListItems;\n    }, [menuItems, menuGroups, isEditMode]);\n};\n"],"names":["useMemo","ALL_PAGES_ID"],"mappings":"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"}
+{"version":3,"file":"useGroupedMenuItems.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.ts"],"sourcesContent":["import {useMemo} from 'react';\n\nimport {AsideHeaderItem} from '../../types';\n\nimport {ALL_PAGES_ID} from './constants';\nimport i18n from './i18n';\n\nexport const useGroupedMenuItems = (asideHeaderItems: AsideHeaderItem[]) => {\n    const allPagesMenuItems = useMemo(() => {\n        const filteredItems = asideHeaderItems.filter(\n            ({id, type}) => type !== 'divider' && id !== ALL_PAGES_ID,\n        );\n        filteredItems.sort(({type: typeA}, {type: typeB}) => {\n            if (typeA === 'action') {\n                return 1;\n            }\n            if (typeB === 'action') {\n                return -1;\n            }\n            return 0;\n        });\n        const groupedItems = filteredItems.reduce(\n            (acc, asideHeaderItem) => {\n                const category =\n                    asideHeaderItem.category || i18n('all-panel.menu.category.allOther');\n                if (!acc[category]) {\n                    acc[category] = [];\n                }\n                acc[category].push(asideHeaderItem);\n                return acc;\n            },\n            {} as {[key: string]: AsideHeaderItem[]},\n        );\n        return groupedItems;\n    }, [asideHeaderItems]);\n\n    return allPagesMenuItems;\n};\n"],"names":["useMemo","ALL_PAGES_ID","i18n"],"mappings":";;;;;;AAOa,MAAA,mBAAmB,GAAG,CAAC,gBAAmC,KAAI;AACvE,IAAA,MAAM,iBAAiB,GAAGA,aAAO,CAAC,MAAK;QACnC,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,CACzC,CAAC,EAAC,EAAE,EAAE,IAAI,EAAC,KAAK,IAAI,KAAK,SAAS,IAAI,EAAE,KAAKC,sBAAY,CAC5D;AACD,QAAA,aAAa,CAAC,IAAI,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,EAAE,EAAC,IAAI,EAAE,KAAK,EAAC,KAAI;AAChD,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACpB,gBAAA,OAAO,CAAC;;AAEZ,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;gBACpB,OAAO,EAAE;;AAEb,YAAA,OAAO,CAAC;AACZ,SAAC,CAAC;QACF,MAAM,YAAY,GAAG,aAAa,CAAC,MAAM,CACrC,CAAC,GAAG,EAAE,eAAe,KAAI;YACrB,MAAM,QAAQ,GACV,eAAe,CAAC,QAAQ,IAAIC,aAAI,CAAC,kCAAkC,CAAC;AACxE,YAAA,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;AAChB,gBAAA,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;;YAEtB,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;AACnC,YAAA,OAAO,GAAG;SACb,EACD,EAAwC,CAC3C;AACD,QAAA,OAAO,YAAY;AACvB,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;AAEtB,IAAA,OAAO,iBAAiB;AAC5B;;;;"}

package/build/cjs/components/AsideHeader/components/AllPagesPanel/useVisibleMenuItems.d.ts

@@ -0,0 +1,2 @@
+import { AsideHeaderItem } from '../../types';
+export declare const useVisibleMenuItems: () => AsideHeaderItem[];

package/build/cjs/components/AsideHeader/components/AllPagesPanel/useVisibleMenuItems.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var AsideHeaderContext = require('../../AsideHeaderContext.js');
+
+const useVisibleMenuItems = () => {
+    const { menuItems, allPagesIsAvailable } = AsideHeaderContext.useAsideHeaderInnerContext();
+    return React.useMemo(() => {
+        if (!allPagesIsAvailable) {
+            return menuItems;
+        }
+        let lastVisibleIndex = 0;
+        return menuItems.filter(({ type, hidden }, index, items) => {
+            if (hidden) {
+                return false;
+            }
+            if (index > 0 &&
+                type === 'divider' &&
+                (items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)) {
+                return false;
+            }
+            lastVisibleIndex = index;
+            return true;
+        });
+    }, [allPagesIsAvailable, menuItems]);
+};
+
+exports.useVisibleMenuItems = useVisibleMenuItems;
+//# sourceMappingURL=useVisibleMenuItems.js.map

package/build/cjs/components/AsideHeader/components/AllPagesPanel/useVisibleMenuItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleMenuItems.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/useVisibleMenuItems.ts"],"sourcesContent":["import {useMemo} from 'react';\n\nimport {useAsideHeaderInnerContext} from '../../AsideHeaderContext';\nimport {AsideHeaderItem} from '../../types';\n\nexport const useVisibleMenuItems = (): AsideHeaderItem[] => {\n    const {menuItems, allPagesIsAvailable} = useAsideHeaderInnerContext();\n    return useMemo(() => {\n        if (!allPagesIsAvailable) {\n            return menuItems;\n        }\n        let lastVisibleIndex = 0;\n        return menuItems.filter(\n            ({type, hidden}: AsideHeaderItem, index: number, items: AsideHeaderItem[]): boolean => {\n                if (hidden) {\n                    return false;\n                }\n\n                if (\n                    index > 0 &&\n                    type === 'divider' &&\n                    (items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)\n                ) {\n                    return false;\n                }\n                lastVisibleIndex = index;\n                return true;\n            },\n        );\n    }, [allPagesIsAvailable, menuItems]);\n};\n"],"names":["useAsideHeaderInnerContext","useMemo"],"mappings":";;;;;AAKO,MAAM,mBAAmB,GAAG,MAAwB;IACvD,MAAM,EAAC,SAAS,EAAE,mBAAmB,EAAC,GAAGA,6CAA0B,EAAE;IACrE,OAAOC,aAAO,CAAC,MAAK;QAChB,IAAI,CAAC,mBAAmB,EAAE;AACtB,YAAA,OAAO,SAAS;;QAEpB,IAAI,gBAAgB,GAAG,CAAC;AACxB,QAAA,OAAO,SAAS,CAAC,MAAM,CACnB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAkB,EAAE,KAAa,EAAE,KAAwB,KAAa;YAClF,IAAI,MAAM,EAAE;AACR,gBAAA,OAAO,KAAK;;YAGhB,IACI,KAAK,GAAG,CAAC;AACT,gBAAA,IAAI,KAAK,SAAS;AAClB,iBAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,EAChF;AACE,gBAAA,OAAO,KAAK;;YAEhB,gBAAgB,GAAG,KAAK;AACxB,YAAA,OAAO,IAAI;AACf,SAAC,CACJ;AACL,KAAC,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AACxC;;;;"}

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

@@ -1 +1 @@
-.CollapseButton-module__gn-collapse-button_compact___IaLr3 .CollapseButton-module__gn-collapse-button__icon___iMooT{transform:rotate(180deg)}
+.CollapseButton-module__gn-collapse-button___93DwB{--_--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%}.CollapseButton-module__gn-collapse-button___93DwB:before{content:"";inset:0 2px 2px;position:absolute;z-index:-1}.CollapseButton-module__gn-collapse-button___93DwB:focus-visible:before{outline:var(--_--focus-outline-color) solid 2px;outline-offset:var(--_--focus-outline-offset)}.CollapseButton-module__gn-collapse-button___93DwB:not(.CollapseButton-module__gn-collapse-button_compact___IaLr3) .CollapseButton-module__gn-collapse-button__icon___iMooT{transform:rotate(180deg)}.CollapseButton-module__gn-collapse-button___93DwB:hover .CollapseButton-module__gn-collapse-button__icon___iMooT{color:var(--g-color-text-primary)}.CollapseButton-module__gn-collapse-button__icon___iMooT{color:var(--g-color-text-secondary)}

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

@@ -6,27 +6,22 @@ var uikit = require('@gravity-ui/uikit');
 var cn = require('../../../utils/cn.js');
 var AsideHeaderContext = require('../../AsideHeaderContext.js');
 var index = require('../../i18n/index.js');
-var ArrowLeftFromLineIcon = require('@gravity-ui/icons/svgs/arrow-left-from-line.svg');
+var controlMenuButton = require('../../../../assets/icons/control-menu-button.svg.js');
 var CollapseButton_module = require('./CollapseButton.module.scss.js');
 
 const b = cn.createBlock('collapse-button', CollapseButton_module.default);
 const CollapseButton = ({ className }) => {
-    const { compact, onChangeCompact } = AsideHeaderContext.useAsideHeaderContext();
-    const { expandTitle, collapseTitle, collapseButtonWrapper } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const { onChangeCompact, compact, expandTitle, collapseTitle, collapseButtonWrapper } = AsideHeaderContext.useAsideHeaderInnerContext();
     const onCollapseButtonClick = React.useCallback(() => {
-        const newCompact = !compact;
-        onChangeCompact === null || onChangeCompact === undefined ? undefined : onChangeCompact(newCompact);
+        onChangeCompact === null || onChangeCompact === undefined ? undefined : onChangeCompact(!compact);
     }, [compact, onChangeCompact]);
     const buttonTitle = compact
         ? expandTitle || index.default('button_expand')
         : collapseTitle || index.default('button_collapse');
-    const defaultButton = (React.createElement(uikit.Button, { view: "flat-secondary", size: "l", className: b({ compact }, className), onClick: onCollapseButtonClick, "aria-label": buttonTitle, title: buttonTitle },
-        React.createElement(uikit.Icon, { data: ArrowLeftFromLineIcon, className: b('icon'), size: 16 })));
+    const defaultButton = (React.createElement("button", { className: b({ compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
+        React.createElement(uikit.Icon, { data: controlMenuButton.default, className: b('icon'), width: "16", height: "10" })));
     if (collapseButtonWrapper) {
-        return collapseButtonWrapper(defaultButton, {
-            compact,
-            onChangeCompact,
-        });
+        return collapseButtonWrapper(defaultButton, { compact, onChangeCompact });
     }
     return defaultButton;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CollapseButton.js","sources":["../../../../../../../src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Button, Icon} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../utils/cn';\nimport {useAsideHeaderContext, useAsideHeaderInnerContext} from '../../AsideHeaderContext';\nimport i18n from '../../i18n';\n\nimport ArrowLeftFromLineIcon from '@gravity-ui/icons/svgs/arrow-left-from-line.svg';\n\nimport styles from './CollapseButton.module.scss';\n\nconst b = createBlock('collapse-button', styles);\n\ninterface CollapseButtonProps {\n    className?: string;\n}\n\nexport const CollapseButton = ({className}: CollapseButtonProps) => {\n    const {compact, onChangeCompact} = useAsideHeaderContext();\n    const {expandTitle, collapseTitle, collapseButtonWrapper} = useAsideHeaderInnerContext();\n\n    const onCollapseButtonClick = useCallback(() => {\n        const newCompact = !compact;\n\n        onChangeCompact?.(newCompact);\n    }, [compact, onChangeCompact]);\n\n    const buttonTitle = compact\n        ? expandTitle || i18n('button_expand')\n        : collapseTitle || i18n('button_collapse');\n\n    const defaultButton = (\n        <Button\n            view=\"flat-secondary\"\n            size=\"l\"\n            className={b({compact}, className)}\n            onClick={onCollapseButtonClick}\n            aria-label={buttonTitle}\n            title={buttonTitle}\n        >\n            <Icon data={ArrowLeftFromLineIcon} className={b('icon')} size={16} />\n        </Button>\n    );\n\n    if (collapseButtonWrapper) {\n        return collapseButtonWrapper(defaultButton, {\n            compact,\n            onChangeCompact,\n        });\n    }\n\n    return defaultButton;\n};\n"],"names":["createBlock","styles","useAsideHeaderContext","useAsideHeaderInnerContext","useCallback","i18n","Button","Icon"],"mappings":";;;;;;;;;;AAYA,MAAM,CAAC,GAAGA,cAAW,CAAC,iBAAiB,EAAEC,6BAAM,CAAC;MAMnC,cAAc,GAAG,CAAC,EAAC,SAAS,EAAsB,KAAI;IAC/D,MAAM,EAAC,OAAO,EAAE,eAAe,EAAC,GAAGC,wCAAqB,EAAE;IAC1D,MAAM,EAAC,WAAW,EAAE,aAAa,EAAE,qBAAqB,EAAC,GAAGC,6CAA0B,EAAE;AAExF,IAAA,MAAM,qBAAqB,GAAGC,iBAAW,CAAC,MAAK;AAC3C,QAAA,MAAM,UAAU,GAAG,CAAC,OAAO;AAE3B,QAAA,eAAe,aAAf,eAAe,KAAA,SAAA,GAAA,SAAA,GAAf,eAAe,CAAG,UAAU,CAAC;AACjC,KAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAE9B,MAAM,WAAW,GAAG;AAChB,UAAE,WAAW,IAAIC,aAAI,CAAC,eAAe;AACrC,UAAE,aAAa,IAAIA,aAAI,CAAC,iBAAiB,CAAC;AAE9C,IAAA,MAAM,aAAa,IACf,KAAA,CAAA,aAAA,CAACC,YAAM,EACH,EAAA,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAC,EAAE,SAAS,CAAC,EAClC,OAAO,EAAE,qBAAqB,EAClB,YAAA,EAAA,WAAW,EACvB,KAAK,EAAE,WAAW,EAAA;AAElB,QAAA,KAAA,CAAA,aAAA,CAACC,UAAI,EAAC,EAAA,IAAI,EAAE,qBAAqB,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAI,CAAA,CAChE,CACZ;IAED,IAAI,qBAAqB,EAAE;QACvB,OAAO,qBAAqB,CAAC,aAAa,EAAE;YACxC,OAAO;YACP,eAAe;AAClB,SAAA,CAAC;;AAGN,IAAA,OAAO,aAAa;AACxB;;;;"}
+{"version":3,"file":"CollapseButton.js","sources":["../../../../../../../src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../utils/cn';\nimport {useAsideHeaderInnerContext} from '../../AsideHeaderContext';\nimport i18n from '../../i18n';\n\nimport controlMenuButtonIcon from '../../../../../assets/icons/control-menu-button.svg';\n\nimport styles from './CollapseButton.module.scss';\n\nconst b = createBlock('collapse-button', styles);\n\ninterface CollapseButtonProps {\n    className?: string;\n}\n\nexport const CollapseButton = ({className}: CollapseButtonProps) => {\n    const {onChangeCompact, compact, expandTitle, collapseTitle, collapseButtonWrapper} =\n        useAsideHeaderInnerContext();\n\n    const onCollapseButtonClick = useCallback(() => {\n        onChangeCompact?.(!compact);\n    }, [compact, onChangeCompact]);\n\n    const buttonTitle = compact\n        ? expandTitle || i18n('button_expand')\n        : collapseTitle || i18n('button_collapse');\n\n    const defaultButton = (\n        <button\n            className={b({compact}, className)}\n            onClick={onCollapseButtonClick}\n            title={buttonTitle}\n        >\n            <Icon data={controlMenuButtonIcon} className={b('icon')} width=\"16\" height=\"10\" />\n        </button>\n    );\n\n    if (collapseButtonWrapper) {\n        return collapseButtonWrapper(defaultButton, {compact, onChangeCompact});\n    }\n\n    return defaultButton;\n};\n"],"names":["createBlock","styles","useAsideHeaderInnerContext","useCallback","i18n","Icon","controlMenuButtonIcon"],"mappings":";;;;;;;;;;AAYA,MAAM,CAAC,GAAGA,cAAW,CAAC,iBAAiB,EAAEC,6BAAM,CAAC;MAMnC,cAAc,GAAG,CAAC,EAAC,SAAS,EAAsB,KAAI;AAC/D,IAAA,MAAM,EAAC,eAAe,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,qBAAqB,EAAC,GAC/EC,6CAA0B,EAAE;AAEhC,IAAA,MAAM,qBAAqB,GAAGC,iBAAW,CAAC,MAAK;QAC3C,eAAe,KAAA,IAAA,IAAf,eAAe,KAAf,SAAA,GAAA,SAAA,GAAA,eAAe,CAAG,CAAC,OAAO,CAAC;AAC/B,KAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAE9B,MAAM,WAAW,GAAG;AAChB,UAAE,WAAW,IAAIC,aAAI,CAAC,eAAe;AACrC,UAAE,aAAa,IAAIA,aAAI,CAAC,iBAAiB,CAAC;IAE9C,MAAM,aAAa,IACf,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAC,EAAE,SAAS,CAAC,EAClC,OAAO,EAAE,qBAAqB,EAC9B,KAAK,EAAE,WAAW,EAAA;QAElB,KAAC,CAAA,aAAA,CAAAC,UAAI,IAAC,IAAI,EAAEC,yBAAqB,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAA,CAAG,CAC7E,CACZ;IAED,IAAI,qBAAqB,EAAE;QACvB,OAAO,qBAAqB,CAAC,aAAa,EAAE,EAAC,OAAO,EAAE,eAAe,EAAC,CAAC;;AAG3E,IAAA,OAAO,aAAa;AACxB;;;;"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"gn-collapse-button_compact":"CollapseButton-module__gn-collapse-button_compact___IaLr3","gnCollapseButtonCompact":"CollapseButton-module__gn-collapse-button_compact___IaLr3","gn-collapse-button__icon":"CollapseButton-module__gn-collapse-button__icon___iMooT","gnCollapseButtonIcon":"CollapseButton-module__gn-collapse-button__icon___iMooT"};
+var styles = {"gn-collapse-button":"CollapseButton-module__gn-collapse-button___93DwB","gnCollapseButton":"CollapseButton-module__gn-collapse-button___93DwB","gn-collapse-button_compact":"CollapseButton-module__gn-collapse-button_compact___IaLr3","gnCollapseButtonCompact":"CollapseButton-module__gn-collapse-button_compact___IaLr3","gn-collapse-button__icon":"CollapseButton-module__gn-collapse-button__icon___iMooT","gnCollapseButtonIcon":"CollapseButton-module__gn-collapse-button__icon___iMooT"};
 
 exports.default = styles;
 //# sourceMappingURL=CollapseButton.module.scss.js.map

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

@@ -1 +1 @@
-.CompositeBar-module__gn-composite-bar___WoCDY{--gn-aside-header-item-expanded-radius:6px;display:flex;flex:1 1 auto;flex-direction:column;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar___WoCDY .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{background-color:transparent}.CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21, .CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI, .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{margin-bottom:2px}.CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21:last-child, .CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI:last-child, .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]:last-child{margin-bottom:0}.CompositeBar-module__gn-composite-bar_scrollable___W2xYo{-ms-overflow-style:none;flex:1 1 auto;overflow-y:auto;scrollbar-width:none}.CompositeBar-module__gn-composite-bar_scrollable___W2xYo::-webkit-scrollbar{display:none}.CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF:has(.CompositeBar-module__gn-composite-bar__menu-group___3hCzS){align-items:flex-start}.CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF:has(.CompositeBar-module__gn-composite-bar__menu-group___3hCzS)>.g-list__item-sort-icon{position:relative;top:12px}.CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF:has(.CompositeBar-module__gn-composite-bar__menu-group___3hCzS):not(.CompositeBar-module__gn-composite-bar__root-menu-item_compact___vvKTD) .g-list__item-content{overflow:visible}.CompositeBar-module__gn-composite-bar__menu-group___3hCzS{height:100%;position:relative;width:100%}.CompositeBar-module__gn-composite-bar__menu-group___3hCzS: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}.CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21, .CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI{height:36px}.CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI{position:relative}.CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI:last-child{border-radius:0 0 var(--gn-aside-header-item-expanded-radius) var(--gn-aside-header-item-expanded-radius)}.CompositeBar-module__gn-composite-bar__menu-group-item_edit___Es8er:not(.CompositeBar-module__gn-composite-bar__menu-group-item_compact___-7tZl){left:-16px;width:calc(100% + 16px)}.CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21{border-radius:var(--gn-aside-header-item-expanded-radius) var(--gn-aside-header-item-expanded-radius) 0 0}.CompositeBar-module__gn-composite-bar__menu-group-header_collapsed___bTXn1, .CompositeBar-module__gn-composite-bar__menu-group___3hCzS:hover:before, .CompositeBar-module__gn-composite-bar__menu-group_expanded___GY0oS:before, .CompositeBar-module__gn-composite-bar__menu-item_type_regular___8DHUR, .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]:hover{border-radius:var(--gn-aside-header-item-expanded-radius)}.CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{transition:border-radius .15s ease-out}.CompositeBar-module__gn-composite-bar__menu-group-toggle-placeholder___vAqkn, .CompositeBar-module__gn-composite-bar__menu-group-toggle___4--VW{align-items:center;cursor:pointer;display:inline-flex;height:24px;width:24px}.CompositeBar-module__gn-composite-bar__menu-group-toggle___4--VW{margin-left:auto}.CompositeBar-module__gn-composite-bar__menu-group-icon___YVg-C{margin-right:var(--g-spacing-3)}
+.CompositeBar-module__gn-composite-bar___WoCDY{flex:1 0 auto;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar___WoCDY .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{background-color:transparent}

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

@@ -1,38 +1,14 @@
 import React, { FC } from 'react';
-import { AsideHeaderItem, MenuItemsWithGroups } from '../../types';
+import { AsideHeaderItem } from '../../types';
 type CompositeBarProps = {
     type: 'menu' | 'subheader';
-    items?: MenuItemsWithGroups[];
+    items: AsideHeaderItem[];
     onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     multipleTooltip?: boolean;
     menuMoreTitle?: string;
     onMoreClick?: () => void;
     compact: boolean;
     compositeId?: string;
-    className?: string;
-    groupClassName?: string;
-    menuItemClassName?: string;
-    editMode?: boolean;
-    onToggleGroupCollapsed?: (groupId: string) => void;
 };
-type CompositeBarViewProps = CompositeBarProps & {
-    compositeId?: string;
-    items?: MenuItemsWithGroups[];
-    collapsedIds?: Record<string, boolean>;
-    enableSorting?: boolean;
-    editMode?: boolean;
-    onToggleGroupCollapsed?: (groupId: string) => void;
-    onToggleMenuItemVisibility?: (item: AsideHeaderItem) => void;
-    onToggleMenuGroupVisibility?: (groupId: string) => void;
-    onFirstLevelSortEnd?: (params: {
-        oldIndex: number;
-        newIndex: number;
-    }) => void;
-    onSecondLevelSortEnd?: (groupIndex: number) => (params: {
-        oldIndex: number;
-        newIndex: number;
-    }) => void;
-};
-export declare const CompositeBarView: FC<CompositeBarViewProps>;
 export declare const CompositeBar: FC<CompositeBarProps>;
 export {};

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

@@ -2,11 +2,10 @@ import './CompositeBar.css';
 'use strict';
 
 var React = require('react');
-var icons = require('@gravity-ui/icons');
 var uikit = require('@gravity-ui/uikit');
+var AutoSizer = require('react-virtualized-auto-sizer');
 var constants = require('../../../constants.js');
 var cn = require('../../../utils/cn.js');
-var constants$2 = require('../AllPagesPanel/constants.js');
 var Item = require('./Item/Item.js');
 var MultipleTooltip = require('./MultipleTooltip/MultipleTooltip.js');
 var MultipleTooltipContext = require('./MultipleTooltip/MultipleTooltipContext.js');
@@ -15,10 +14,9 @@ var utils = require('./utils.js');
 var CompositeBar_module = require('./CompositeBar.module.scss.js');
 
 const b = cn.createBlock('composite-bar', CompositeBar_module.default);
-const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleTooltip = false, compositeId, className, groupClassName, menuItemClassName, enableSorting = false, editMode = false, compact, onToggleGroupCollapsed, onToggleMenuGroupVisibility, onToggleMenuItemVisibility, onFirstLevelSortEnd, onSecondLevelSortEnd, }) => {
+const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, compact, compositeId, }) => {
     const ref = React.useRef(null);
     const tooltipRef = React.useRef(null);
-    const [hoveredGroupId, setHoveredGroupId] = React.useState(null);
     const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext.MultipleTooltipContext);
     React.useEffect(() => {
         function handleBlurWindow() {
@@ -114,7 +112,10 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleToolt
             onMoreClick === null || onMoreClick === undefined ? undefined : onMoreClick();
         }
         else {
-            onItemClick === null || onItemClick === undefined ? undefined : onItemClick(Object.assign(Object.assign({}, item), { onItemClick: orginalItemClick }), collapsed, event);
+            onItemClick === null || onItemClick === undefined ? undefined : onItemClick(Object.assign(Object.assign({}, item), { 
+                // For collapsed popup items, preserve the item's own onItemClick
+                // since orginalItemClick belongs to the collapse button, not the item
+                onItemClick: collapsed ? item.onItemClick : orginalItemClick }), collapsed, event);
         }
     }, [
         compact,
@@ -124,88 +125,33 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleToolt
         onMoreClick,
         setMultipleTooltipContextValue,
     ]);
-    const handleFirstLevelSortEnd = React.useCallback(({ oldIndex, newIndex }) => {
-        if (onFirstLevelSortEnd) {
-            onFirstLevelSortEnd({ oldIndex, newIndex });
-        }
-    }, [onFirstLevelSortEnd]);
-    const handleSecondLevelSortEnd = React.useCallback((groupIndex) => ({ oldIndex, newIndex }) => {
-        if (onSecondLevelSortEnd) {
-            onSecondLevelSortEnd(groupIndex)({ oldIndex, newIndex });
-        }
-    }, [onSecondLevelSortEnd]);
-    if (!items || items.length === 0) {
-        return null;
-    }
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: className, ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
-            React.createElement(uikit.List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? utils.getSelectedItemIndex(items) : undefined, itemHeight: utils.getItemHeight, itemsHeight: utils.getItemsHeight, itemClassName: b('root-menu-item', { compact }), virtualized: false, filterable: false, sortable: enableSorting, onSortEnd: enableSorting ? handleFirstLevelSortEnd : undefined, renderItem: (item, _isItemActive, itemIndex) => {
-                    const groupId = item.groupId;
-                    const itemType = item.type || constants$1.ITEM_TYPE_REGULAR;
-                    if (!groupId) {
-                        return (React.createElement(Item.Item, Object.assign({}, item, { className: b('menu-item', { compact, type: itemType }, 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 === constants$2.UNGROUPED_ID;
-                    const isGroupHovered = hoveredGroupId === item.id;
-                    let groupIcon = item.icon;
-                    if (!isCollapsed) {
-                        groupIcon = icons.ChevronDown;
-                    }
-                    else if (isGroupHovered) {
-                        groupIcon = icons.ChevronRight;
-                    }
-                    return (React.createElement("div", { className: b('menu-group', { expanded: !isCollapsed }, groupClassName) },
-                        hasHeader && !isUngrouped && (React.createElement(Item.Item, Object.assign({}, item, { className: b('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.createElement(uikit.List, { items: groupListItems, sortable: enableSorting, onSortEnd: handleSecondLevelSortEnd(itemIndex), virtualized: false, filterable: false, itemClassName: b('menu-group-item', {
-                                edit: enableSorting,
-                                compact,
-                            }), itemHeight: utils.getItemHeight, itemsHeight: utils.getItemsHeight, renderItem: (nestedItem, _isNestedItemActive, _nestedItemIndex) => {
-                                return (React.createElement(Item.Item, Object.assign({}, nestedItem, { compact: compact, editMode: editMode, onMouseEnter: () => {
-                                        setHoveredGroupId(nestedItem.id);
-                                    }, onMouseLeave: () => {
-                                        setHoveredGroupId(null);
-                                    }, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), onToggleVisibility: onToggleMenuItemVisibility
-                                        ? () => onToggleMenuItemVisibility(nestedItem)
-                                        : undefined })));
-                            } }))));
-                } })),
+        React.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
+            React.createElement(uikit.List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? utils.getSelectedItemIndex(items) : undefined, itemHeight: utils.getItemHeight, itemsHeight: utils.getItemsHeight, itemClassName: b('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => (React.createElement(Item.Item, Object.assign({}, item, { enableTooltip: multipleTooltip ? false : item.enableTooltip, compact: compact, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), collapseItems: collapseItems }))) })),
         type === 'menu' && multipleTooltip && (React.createElement(MultipleTooltip.MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
 };
-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) {
+const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, compact, compositeId, }) => {
+    if (items.length === 0) {
         return null;
     }
     let node;
     if (type === 'menu') {
-        node = (React.createElement("div", { className: b({ scrollable: true }, className) },
-            React.createElement(CompositeBarView, { compositeId: compositeId, groupClassName: groupClassName, menuItemClassName: menuItemClassName, type: "menu", compact: compact, items: visibleItems, onItemClick: onItemClick, onMoreClick: onMoreClick, multipleTooltip: multipleTooltip, onToggleGroupCollapsed: onToggleGroupCollapsed, editMode: editMode })));
+        const minHeight = utils.getItemsMinHeight(items);
+        const collapseItem = utils.getMoreButtonItem(menuMoreTitle);
+        node = (React.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React.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 } = utils.getAutosizeListItems(items, height, collapseItem);
+            return (React.createElement("div", { style: { width, height } },
+                React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+        }))));
     }
     else {
-        node = (React.createElement("div", { className: b({ subheader: true }, className) },
-            React.createElement(CompositeBarView, { groupClassName: groupClassName, menuItemClassName: menuItemClassName, type: "subheader", compact: compact, items: visibleItems, onItemClick: onItemClick, editMode: editMode })));
+        node = (React.createElement("div", { className: b({ subheader: true }) },
+            React.createElement(CompositeBarView, { type: "subheader", compact: compact, items: items, onItemClick: onItemClick })));
     }
     return React.createElement(MultipleTooltipContext.MultipleTooltipProvider, null, node);
 };
 
 exports.CompositeBar = CompositeBar;
-exports.CompositeBarView = CompositeBarView;
 //# sourceMappingURL=CompositeBar.js.map