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

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

@@ -1,17 +1,11 @@
 import { useMemo } from 'react';
-import { getVisibleItemsWithFilteredDividers } from '../CompositeBar/utils.js';
 import { ALL_PAGES_ID } from './constants.js';
+import i18n from './i18n/index.js';
 
-const useGroupedMenuItems = (menuItems, menuGroups, isEditMode = false) => {
-    return useMemo(() => {
-        var _a;
-        const visibleItems = menuItems.filter((item) => {
-            if (isEditMode && item.id === ALL_PAGES_ID) {
-                return false;
-            }
-            return true;
-        });
-        visibleItems.sort(({ type: typeA }, { type: typeB }) => {
+const useGroupedMenuItems = (asideHeaderItems) => {
+    const allPagesMenuItems = useMemo(() => {
+        const filteredItems = asideHeaderItems.filter(({ id, type }) => type !== 'divider' && id !== ALL_PAGES_ID);
+        filteredItems.sort(({ type: typeA }, { type: typeB }) => {
             if (typeA === 'action') {
                 return 1;
             }
@@ -20,63 +14,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 || i18n('all-panel.menu.category.allOther');
+            if (!acc[category]) {
+                acc[category] = [];
             }
-        });
-        const flatListItems = [];
-        visibleItems.forEach((item) => {
-            var _a, _b, _c, _d;
-            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);
-                        const effectiveCollapsed = (_c = (_b = group === null || group === undefined ? undefined : group.collapsed) !== null && _b !== undefined ? _b : group === null || group === undefined ? undefined : group.collapsedByDefault) !== null && _c !== undefined ? _c : false;
-                        flatListItems.push({
-                            id: groupId,
-                            title: (_d = group === null || group === undefined ? undefined : group.title) !== null && _d !== undefined ? _d : groupId,
-                            icon: group === null || group === undefined ? undefined : group.icon,
-                            hidden: isGroupHidden,
-                            collapsible: group === null || group === undefined ? undefined : group.collapsible,
-                            collapsedByDefault: group === null || group === undefined ? undefined : group.collapsedByDefault,
-                            isCollapsed: effectiveCollapsed,
-                            groupId: groupId,
-                            items,
-                        });
-                    }
-                }
-            }
-            if (!groupId) {
-                flatListItems.push(item);
-            }
-        });
-        if (isEditMode) {
-            return flatListItems;
-        }
-        return (_a = getVisibleItemsWithFilteredDividers(flatListItems, ALL_PAGES_ID)) !== null && _a !== undefined ? _a : [];
-    }, [menuItems, menuGroups, isEditMode]);
+            acc[category].push(asideHeaderItem);
+            return acc;
+        }, {});
+        return groupedItems;
+    }, [asideHeaderItems]);
+    return allPagesMenuItems;
 };
 
 export { useGroupedMenuItems };

package/build/esm/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';\nimport {getVisibleItemsWithFilteredDividers} from '../CompositeBar/utils';\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                        const effectiveCollapsed =\n                            group?.collapsed ?? group?.collapsedByDefault ?? false;\n\n                        flatListItems.push({\n                            id: groupId,\n                            title: group?.title ?? groupId,\n                            icon: group?.icon,\n                            hidden: isGroupHidden,\n                            collapsible: group?.collapsible,\n                            collapsedByDefault: group?.collapsedByDefault,\n                            isCollapsed: effectiveCollapsed,\n                            groupId: groupId,\n                            items,\n                        });\n                    }\n                }\n            }\n\n            if (!groupId) {\n                flatListItems.push(item);\n            }\n        });\n\n        if (isEditMode) {\n            return flatListItems;\n        }\n\n        return getVisibleItemsWithFilteredDividers(flatListItems, ALL_PAGES_ID) ?? [];\n    }, [menuItems, menuGroups, isEditMode]);\n};\n"],"names":[],"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":[],"mappings":";;;;AAOa,MAAA,mBAAmB,GAAG,CAAC,gBAAmC,KAAI;AACvE,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;QACnC,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,CACzC,CAAC,EAAC,EAAE,EAAE,IAAI,EAAC,KAAK,IAAI,KAAK,SAAS,IAAI,EAAE,KAAK,YAAY,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,IAAI,IAAI,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/esm/components/AsideHeader/components/AllPagesPanel/useVisibleMenuItems.d.ts

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

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

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { useAsideHeaderInnerContext } from '../../AsideHeaderContext.js';
+
+const useVisibleMenuItems = () => {
+    const { menuItems, allPagesIsAvailable } = useAsideHeaderInnerContext();
+    return 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]);
+};
+
+export { useVisibleMenuItems };
+//# sourceMappingURL=useVisibleMenuItems.js.map

package/build/esm/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":[],"mappings":";;;AAKO,MAAM,mBAAmB,GAAG,MAAwB;IACvD,MAAM,EAAC,SAAS,EAAE,mBAAmB,EAAC,GAAG,0BAA0B,EAAE;IACrE,OAAO,OAAO,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/esm/components/AsideHeader/components/CollapseButton/CollapseButton.css

@@ -1 +1 @@
-.CollapseButton-module__gn-collapse-button_collapsed___c19gr .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/esm/components/AsideHeader/components/CollapseButton/CollapseButton.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 interface CollapseButtonProps {
     className?: string;
-    isCompactMode?: boolean;
 }
-export declare const CollapseButton: ({ className, isCompactMode }: CollapseButtonProps) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+export declare const CollapseButton: ({ className }: CollapseButtonProps) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 export {};

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

@@ -1,30 +1,25 @@
 import './CollapseButton.css';
 import React__default, { useCallback } from 'react';
-import { ArrowLeftFromLine } from '@gravity-ui/icons';
-import { Button, Icon } from '@gravity-ui/uikit';
+import { Icon } from '@gravity-ui/uikit';
 import { createBlock } from '../../../utils/cn.js';
-import { useAsideHeaderContext, useAsideHeaderInnerContext } from '../../AsideHeaderContext.js';
+import { useAsideHeaderInnerContext } from '../../AsideHeaderContext.js';
 import i18n from '../../i18n/index.js';
+import SvgControlMenuButton from '../../../../assets/icons/control-menu-button.svg.js';
 import styles from './CollapseButton.module.scss.js';
 
 const b = createBlock('collapse-button', styles);
-const CollapseButton = ({ className, isCompactMode }) => {
-    const { pinned, onChangePinned } = useAsideHeaderContext();
-    const { expandTitle, collapseTitle, collapseButtonWrapper } = useAsideHeaderInnerContext();
+const CollapseButton = ({ className }) => {
+    const { onChangeCompact, compact, expandTitle, collapseTitle, collapseButtonWrapper } = useAsideHeaderInnerContext();
     const onCollapseButtonClick = useCallback(() => {
-        const newPinned = !pinned;
-        onChangePinned === null || onChangePinned === undefined ? undefined : onChangePinned(newPinned);
-    }, [pinned, onChangePinned]);
-    const buttonTitle = pinned
-        ? collapseTitle || i18n('button_collapse')
-        : expandTitle || i18n('button_expand');
-    const defaultButton = (React__default.createElement(Button, { view: "flat-secondary", size: isCompactMode ? 'm' : 'l', className: b({ collapsed: !pinned }, className), onClick: onCollapseButtonClick, "aria-label": buttonTitle, title: buttonTitle },
-        React__default.createElement(Icon, { data: ArrowLeftFromLine, className: b('icon'), size: 16 })));
+        onChangeCompact === null || onChangeCompact === undefined ? undefined : onChangeCompact(!compact);
+    }, [compact, onChangeCompact]);
+    const buttonTitle = compact
+        ? expandTitle || i18n('button_expand')
+        : collapseTitle || i18n('button_collapse');
+    const defaultButton = (React__default.createElement("button", { className: b({ compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
+        React__default.createElement(Icon, { data: SvgControlMenuButton, className: b('icon'), width: "16", height: "10" })));
     if (collapseButtonWrapper) {
-        return collapseButtonWrapper(defaultButton, {
-            isExpanded: pinned,
-            onChangePinned,
-        });
+        return collapseButtonWrapper(defaultButton, { compact, onChangeCompact });
     }
     return defaultButton;
 };

package/build/esm/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 {ArrowLeftFromLine} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../utils/cn';\nimport {useAsideHeaderContext, useAsideHeaderInnerContext} from '../../AsideHeaderContext';\nimport i18n from '../../i18n';\n\nimport styles from './CollapseButton.module.scss';\n\nconst b = createBlock('collapse-button', styles);\n\ninterface CollapseButtonProps {\n    className?: string;\n    isCompactMode?: boolean;\n}\n\nexport const CollapseButton = ({className, isCompactMode}: CollapseButtonProps) => {\n    const {pinned, onChangePinned} = useAsideHeaderContext();\n    const {expandTitle, collapseTitle, collapseButtonWrapper} = useAsideHeaderInnerContext();\n\n    const onCollapseButtonClick = useCallback(() => {\n        const newPinned = !pinned;\n\n        onChangePinned?.(newPinned);\n    }, [pinned, onChangePinned]);\n\n    const buttonTitle = pinned\n        ? collapseTitle || i18n('button_collapse')\n        : expandTitle || i18n('button_expand');\n\n    const defaultButton = (\n        <Button\n            view=\"flat-secondary\"\n            size={isCompactMode ? 'm' : 'l'}\n            className={b({collapsed: !pinned}, className)}\n            onClick={onCollapseButtonClick}\n            aria-label={buttonTitle}\n            title={buttonTitle}\n        >\n            <Icon data={ArrowLeftFromLine} className={b('icon')} size={16} />\n        </Button>\n    );\n\n    if (collapseButtonWrapper) {\n        return collapseButtonWrapper(defaultButton, {\n            isExpanded: pinned,\n            onChangePinned,\n        });\n    }\n\n    return defaultButton;\n};\n"],"names":["React"],"mappings":";;;;;;;;AAWA,MAAM,CAAC,GAAG,WAAW,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAOnC,MAAA,cAAc,GAAG,CAAC,EAAC,SAAS,EAAE,aAAa,EAAsB,KAAI;IAC9E,MAAM,EAAC,MAAM,EAAE,cAAc,EAAC,GAAG,qBAAqB,EAAE;IACxD,MAAM,EAAC,WAAW,EAAE,aAAa,EAAE,qBAAqB,EAAC,GAAG,0BAA0B,EAAE;AAExF,IAAA,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAK;AAC3C,QAAA,MAAM,SAAS,GAAG,CAAC,MAAM;AAEzB,QAAA,cAAc,aAAd,cAAc,KAAA,SAAA,GAAA,SAAA,GAAd,cAAc,CAAG,SAAS,CAAC;AAC/B,KAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAE5B,MAAM,WAAW,GAAG;AAChB,UAAE,aAAa,IAAI,IAAI,CAAC,iBAAiB;AACzC,UAAE,WAAW,IAAI,IAAI,CAAC,eAAe,CAAC;IAE1C,MAAM,aAAa,IACfA,cAAA,CAAA,aAAA,CAAC,MAAM,EACH,EAAA,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAE,aAAa,GAAG,GAAG,GAAG,GAAG,EAC/B,SAAS,EAAE,CAAC,CAAC,EAAC,SAAS,EAAE,CAAC,MAAM,EAAC,EAAE,SAAS,CAAC,EAC7C,OAAO,EAAE,qBAAqB,EAAA,YAAA,EAClB,WAAW,EACvB,KAAK,EAAE,WAAW,EAAA;AAElB,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAI,CAAA,CAC5D,CACZ;IAED,IAAI,qBAAqB,EAAE;QACvB,OAAO,qBAAqB,CAAC,aAAa,EAAE;AACxC,YAAA,UAAU,EAAE,MAAM;YAClB,cAAc;AACjB,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":["React","controlMenuButtonIcon"],"mappings":";;;;;;;;AAYA,MAAM,CAAC,GAAG,WAAW,CAAC,iBAAiB,EAAE,MAAM,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/E,0BAA0B,EAAE;AAEhC,IAAA,MAAM,qBAAqB,GAAG,WAAW,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,IAAI,IAAI,CAAC,eAAe;AACrC,UAAE,aAAa,IAAI,IAAI,CAAC,iBAAiB,CAAC;IAE9C,MAAM,aAAa,IACfA,cAAA,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;QAElBA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,IAAI,EAAEC,oBAAqB,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/esm/components/AsideHeader/components/CollapseButton/CollapseButton.module.scss.js

@@ -1,4 +1,4 @@
-var styles = {"gn-collapse-button_collapsed":"CollapseButton-module__gn-collapse-button_collapsed___c19gr","gnCollapseButtonCollapsed":"CollapseButton-module__gn-collapse-button_collapsed___c19gr","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"};
 
 export { styles as default };
 //# sourceMappingURL=CollapseButton.module.scss.js.map

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

@@ -1 +1 @@
-.CompositeBar-module__gn-composite-bar___WoCDY{background-color:var(--gn-aside-main-background-color);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__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{background-color:var(--gn-aside-main-group-item-background-color,transparent);border-left:2px solid var(--gn-aside-main-group-border-color,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___3hCzS:hover:before{border-color:var(--gn-aside-main-group-border-color-hover,var(--g-color-line-generic))}.CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21{height:var(--_--item-height)}.CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI{position:relative}.CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI:last-child .CompositeBar-module__gn-composite-bar__group-item___L1pJ8{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:not(.CompositeBar-module__gn-composite-bar__menu-group-header_collapsed___bTXn1){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___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__menu-item___zaw-R[data-type=action]{margin-inline:var(--_--item-margin-inline)}
+.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/esm/components/AsideHeader/components/CompositeBar/CompositeBar.d.ts

@@ -1,44 +1,20 @@
 import React, { FC } from 'react';
-import { AsideHeaderItem, MenuItemsWithGroups, SetCollapseBlocker } from '../../types';
+import { MenuGroup } from '../../../types';
+import { AsideHeaderItem, AsideHeaderMenuOverflow } from '../../types';
 type CompositeBarProps = {
     type: 'menu' | 'subheader';
-    setCollapseBlocker?: SetCollapseBlocker;
-    items?: MenuItemsWithGroups[];
-    onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>, options: {
-        setCollapseBlocker: SetCollapseBlocker | undefined;
-    }) => void;
+    items: AsideHeaderItem[];
+    menuGroups?: MenuGroup[];
+    onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     menuMoreTitle?: string;
     onMoreClick?: () => void;
-    /** When `true`, the navigation is expanded. When `false`, it is collapsed. */
-    isExpanded: boolean;
+    compact: boolean;
     compositeId?: string;
-    className?: string;
     menuItemClassName?: string;
-    editMode?: boolean;
-    onToggleGroupCollapsed?: (groupId: string) => void;
-    /** When `true`, menu items use compact height. */
-    isCompactMode?: boolean;
+    /**
+     * @see AsideHeaderMenuOverflow
+     */
+    menuOverflow?: AsideHeaderMenuOverflow;
 };
-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;
-    /** When `true`, menu items use compact height. */
-    isCompactMode?: boolean;
-};
-export declare const CompositeBarView: FC<CompositeBarViewProps>;
 export declare const CompositeBar: FC<CompositeBarProps>;
 export {};

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

@@ -1,106 +1,83 @@
 import './CompositeBar.css';
-import React__default, { useRef, useState, useCallback } from 'react';
-import { ChevronRight, ChevronDown } from '@gravity-ui/icons';
+import React__default, { useMemo, useRef, useCallback } from 'react';
 import { List } from '@gravity-ui/uikit';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import { createBlock } from '../../../utils/cn.js';
-import { UNGROUPED_ID } from '../AllPagesPanel/constants.js';
 import { Item } from './Item/Item.js';
 import { ScrollableWithScrollbar } from './ScrollableWithScrollbar/ScrollableWithScrollbar.js';
-import { COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR } from './constants.js';
-import { getSelectedItemIndex, getItemHeight, getItemsHeight } from './utils.js';
+import { COLLAPSE_ITEM_ID } from './constants.js';
+import { getGroupedItems, isGroupHeaderItem } from './grouping.js';
+import { getReorderedItems, getItemsMinHeight, getAutosizeListItems, getSelectedItemIndex, getItemHeight, getItemsHeight, getMoreButtonItem } from './utils.js';
 import styles from './CompositeBar.module.scss.js';
 
 const b = createBlock('composite-bar', styles);
-const CompositeBarView = ({ type, items, onItemClick, onMoreClick, compositeId, className, menuItemClassName, enableSorting = false, editMode = false, isExpanded, onToggleGroupCollapsed, onToggleMenuGroupVisibility, onToggleMenuItemVisibility, onFirstLevelSortEnd, onSecondLevelSortEnd, setCollapseBlocker, isCompactMode, }) => {
+const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, compact, compositeId, menuItemClassName, }) => {
     const ref = useRef(null);
-    const [hoveredGroupId, setHoveredGroupId] = useState(null);
     const onMouseLeave = useCallback(() => {
         var _a;
-        if (!isExpanded && document.hasFocus()) {
+        if (compact && document.hasFocus()) {
             (_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem(undefined);
         }
-    }, [isExpanded]);
-    const onItemClickByIndex = useCallback((_itemIndex, orginalItemClick) => (item, collapsed, event, options) => {
+    }, [compact]);
+    const onItemClickByIndex = useCallback((orginalItemClick) => (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, options);
+            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);
         }
     }, [onItemClick, onMoreClick]);
-    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("div", { className: className },
-        React__default.createElement(List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex(items) : undefined, itemHeight: (item) => getItemHeight(item, isCompactMode), itemsHeight: (items) => getItemsHeight(items, isCompactMode), itemClassName: b('root-menu-item', { collapsed: !isExpanded }, menuItemClassName), virtualized: false, filterable: false, sortable: enableSorting, onSortEnd: enableSorting ? handleFirstLevelSortEnd : undefined, renderItem: (item, _isItemActive, itemIndex) => {
-                const groupId = item.groupId;
-                const itemType = item.type || ITEM_TYPE_REGULAR;
-                if (!groupId) {
-                    return (React__default.createElement(Item, Object.assign({}, item, { className: b('menu-item', {
-                            collapsed: !isExpanded,
-                            type: itemType,
-                        }), isExpanded: isExpanded, editMode: editMode, onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), setCollapseBlocker: setCollapseBlocker, 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 (isGroupHovered) {
-                    groupIcon = isCollapsed ? ChevronRight : ChevronDown;
-                }
-                return (React__default.createElement("div", { className: b('menu-group', { expanded: !isCollapsed, wrapper: true }) },
-                    hasHeader && !isUngrouped && (React__default.createElement(Item, Object.assign({}, item, { className: b('menu-group-header', { collapsed: isCollapsed }), icon: groupIcon, isExpanded: isExpanded, editMode: editMode, setCollapseBlocker: setCollapseBlocker, 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('menu-group-item', {
-                            edit: enableSorting,
-                            collapsed: !isExpanded,
-                        }), itemHeight: (item) => getItemHeight(item, isCompactMode), itemsHeight: (items) => getItemsHeight(items, isCompactMode), renderItem: (nestedItem, _isNestedItemActive, nestedItemIndex) => {
-                            return (React__default.createElement(Item, Object.assign({}, nestedItem, { isExpanded: isExpanded, className: b('group-item'), editMode: editMode, setCollapseBlocker: setCollapseBlocker, onMouseEnter: () => {
-                                    setHoveredGroupId(nestedItem.id);
-                                }, onMouseLeave: () => {
-                                    setHoveredGroupId(null);
-                                }, onItemClick: onItemClickByIndex(
-                                // +1 because the first item is the group header
-                                itemIndex + nestedItemIndex + 1, nestedItem.onItemClick), onToggleVisibility: onToggleMenuItemVisibility
-                                    ? () => onToggleMenuItemVisibility(nestedItem)
-                                    : undefined })));
-                        } }))));
-            } })));
+    return (React__default.createElement(List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex(items) : undefined, itemHeight: getItemHeight, itemsHeight: getItemsHeight, itemClassName: b('root-menu-item', menuItemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => {
+            let menuPopupItems;
+            let menuPopupTitle;
+            if (item.id === COLLAPSE_ITEM_ID) {
+                menuPopupItems = collapseItems;
+            }
+            else if (isGroupHeaderItem(item)) {
+                menuPopupItems = item.groupChildren;
+                menuPopupTitle = item.groupPopupTitle;
+            }
+            return (React__default.createElement(Item, Object.assign({}, item, { compact: compact, popupItemClassName: menuItemClassName, menuPopupItems: menuPopupItems, menuPopupTitle: menuPopupTitle, onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(item.onItemClick) })));
+        } }));
 };
-const CompositeBar = ({ type, items, onItemClick, onMoreClick, onToggleGroupCollapsed, setCollapseBlocker, isExpanded, compositeId, className, menuItemClassName, editMode = false, isCompactMode, }) => {
-    if (!items || items.length === 0) {
+const CompositeBar = ({ type, items, menuGroups, menuMoreTitle, onItemClick, onMoreClick, compact, compositeId, menuItemClassName, menuOverflow = 'collapse', }) => {
+    const groupedItems = useMemo(() => getGroupedItems(items, menuGroups), [items, menuGroups]);
+    // Respect `afterMoreButton` ordering for DOM stability when items are rendered
+    // inside a scroll container (no collapse button to anchor them against).
+    const scrollableItems = useMemo(() => getReorderedItems(groupedItems), [groupedItems]);
+    if (groupedItems.length === 0) {
         return null;
     }
+    let node;
     if (type === 'menu') {
-        return (React__default.createElement(ScrollableWithScrollbar, { className: b(null, className), recalcDeps: [items.length] },
-            React__default.createElement(CompositeBarView, { compositeId: compositeId, menuItemClassName: menuItemClassName, type: "menu", isExpanded: isExpanded, items: items, onItemClick: onItemClick, onMoreClick: onMoreClick, onToggleGroupCollapsed: onToggleGroupCollapsed, setCollapseBlocker: setCollapseBlocker, editMode: editMode, isCompactMode: isCompactMode })));
+        // `scroll` mode is intentionally disabled in `compact` mode — there the
+        // classic "More" popup gives a better UX for icon-only items.
+        if (menuOverflow === 'scroll' && !compact) {
+            node = (React__default.createElement(ScrollableWithScrollbar, { recalcDeps: [scrollableItems] },
+                React__default.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: scrollableItems, onItemClick: onItemClick, menuItemClassName: menuItemClassName })));
+        }
+        else {
+            const minHeight = getItemsMinHeight(groupedItems);
+            const collapseItem = getMoreButtonItem(menuMoreTitle);
+            node = (React__default.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, groupedItems.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(groupedItems, height, collapseItem);
+                return (React__default.createElement("div", { style: { width, height } },
+                    React__default.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, menuItemClassName: menuItemClassName, collapseItems: collapseItems })));
+            }))));
+        }
+    }
+    else {
+        node = (React__default.createElement("div", { className: b({ subheader: true }) },
+            React__default.createElement(CompositeBarView, { type: "subheader", menuItemClassName: menuItemClassName, compact: compact, items: groupedItems, onItemClick: onItemClick })));
     }
-    return (React__default.createElement("div", { className: b({ subheader: true }, className) },
-        React__default.createElement(CompositeBarView, { menuItemClassName: menuItemClassName, type: "subheader", isExpanded: isExpanded, items: items, onItemClick: onItemClick, setCollapseBlocker: setCollapseBlocker, editMode: editMode, isCompactMode: isCompactMode })));
+    return node;
 };
 
-export { CompositeBar, CompositeBarView };
+export { CompositeBar };
 //# sourceMappingURL=CompositeBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompositeBar.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx"],"sourcesContent":["import React, {FC, useCallback, useRef, useState} from 'react';\n\nimport {ChevronDown, ChevronRight} from '@gravity-ui/icons';\nimport {List, ListSortParams} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem, MenuItemsWithGroups, SetCollapseBlocker} from '../../types';\nimport {UNGROUPED_ID} from '../AllPagesPanel/constants';\n\nimport {Item, ItemProps} from './Item/Item';\nimport {ScrollableWithScrollbar} from './ScrollableWithScrollbar';\nimport {COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR} from './constants';\nimport {getItemHeight, getItemsHeight, getSelectedItemIndex} from './utils';\n\nimport styles from './CompositeBar.module.scss';\n\nconst b = createBlock('composite-bar', styles);\n\ntype CompositeBarProps = {\n    type: 'menu' | 'subheader';\n    setCollapseBlocker?: SetCollapseBlocker;\n    items?: MenuItemsWithGroups[];\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n        options: {setCollapseBlocker: SetCollapseBlocker | undefined},\n    ) => void;\n    menuMoreTitle?: string;\n    onMoreClick?: () => void;\n    /** When `true`, the navigation is expanded. When `false`, it is collapsed. */\n    isExpanded: boolean;\n    compositeId?: string;\n    className?: string;\n    menuItemClassName?: string;\n    editMode?: boolean;\n    onToggleGroupCollapsed?: (groupId: string) => void;\n    /** When `true`, menu items use compact height. */\n    isCompactMode?: boolean;\n};\n\ntype CompositeBarViewProps = CompositeBarProps & {\n    compositeId?: string;\n    items?: MenuItemsWithGroups[];\n    collapsedIds?: Record<string, boolean>;\n    enableSorting?: boolean;\n    editMode?: boolean;\n    onToggleGroupCollapsed?: (groupId: string) => void;\n    onToggleMenuItemVisibility?: (item: AsideHeaderItem) => void;\n    onToggleMenuGroupVisibility?: (groupId: string) => void;\n    onFirstLevelSortEnd?: (params: {oldIndex: number; newIndex: number}) => void;\n    onSecondLevelSortEnd?: (\n        groupIndex: number,\n    ) => (params: {oldIndex: number; newIndex: number}) => void;\n    /** When `true`, menu items use compact height. */\n    isCompactMode?: boolean;\n};\n\nexport const CompositeBarView: FC<CompositeBarViewProps> = ({\n    type,\n    items,\n    onItemClick,\n    onMoreClick,\n    compositeId,\n    className,\n    menuItemClassName,\n    enableSorting = false,\n    editMode = false,\n    isExpanded,\n    onToggleGroupCollapsed,\n    onToggleMenuGroupVisibility,\n    onToggleMenuItemVisibility,\n    onFirstLevelSortEnd,\n    onSecondLevelSortEnd,\n    setCollapseBlocker,\n    isCompactMode,\n}) => {\n    const ref = useRef<List<AsideHeaderItem>>(null);\n    const [hoveredGroupId, setHoveredGroupId] = useState<string | null>(null);\n\n    const onMouseLeave = useCallback(() => {\n        if (!isExpanded && document.hasFocus()) {\n            ref.current?.activateItem(undefined as unknown as number);\n        }\n    }, [isExpanded]);\n\n    const onItemClickByIndex = useCallback(\n        (\n            _itemIndex: number,\n            orginalItemClick: AsideHeaderItem['onItemClick'],\n        ): ItemProps['onItemClick'] =>\n            (item, collapsed, event, options) => {\n                // Handle clicks on the \"more\" button (collapse item)\n                if (item.id === COLLAPSE_ITEM_ID && collapsed) {\n                    onMoreClick?.();\n                } else {\n                    onItemClick?.(\n                        {...item, onItemClick: orginalItemClick},\n                        collapsed,\n                        event,\n                        options,\n                    );\n                }\n            },\n        [onItemClick, onMoreClick],\n    );\n\n    const handleFirstLevelSortEnd = useCallback(\n        ({oldIndex, newIndex}: ListSortParams) => {\n            if (onFirstLevelSortEnd) {\n                onFirstLevelSortEnd({oldIndex, newIndex});\n            }\n        },\n        [onFirstLevelSortEnd],\n    );\n\n    const handleSecondLevelSortEnd = useCallback(\n        (groupIndex: number) =>\n            ({oldIndex, newIndex}: ListSortParams) => {\n                if (onSecondLevelSortEnd) {\n                    onSecondLevelSortEnd(groupIndex)({oldIndex, newIndex});\n                }\n            },\n        [onSecondLevelSortEnd],\n    );\n\n    if (!items || items.length === 0) {\n        return null;\n    }\n\n    return (\n        <div className={className}>\n            <List<MenuItemsWithGroups>\n                id={compositeId}\n                ref={ref}\n                items={items}\n                selectedItemIndex={type === 'menu' ? getSelectedItemIndex(items) : undefined}\n                itemHeight={(item) => getItemHeight(item, isCompactMode)}\n                itemsHeight={(items) => getItemsHeight(items, isCompactMode)}\n                itemClassName={b('root-menu-item', {collapsed: !isExpanded}, menuItemClassName)}\n                virtualized={false}\n                filterable={false}\n                sortable={enableSorting}\n                onSortEnd={enableSorting ? handleFirstLevelSortEnd : undefined}\n                renderItem={(item, _isItemActive, itemIndex) => {\n                    const groupId = item.groupId;\n                    const itemType = item.type || ITEM_TYPE_REGULAR;\n\n                    if (!groupId) {\n                        return (\n                            <Item\n                                {...item}\n                                className={b('menu-item', {\n                                    collapsed: !isExpanded,\n                                    type: itemType,\n                                })}\n                                isExpanded={isExpanded}\n                                editMode={editMode}\n                                onMouseLeave={onMouseLeave}\n                                onItemClick={onItemClickByIndex(itemIndex, item.onItemClick)}\n                                setCollapseBlocker={setCollapseBlocker}\n                                onToggleVisibility={\n                                    onToggleMenuItemVisibility\n                                        ? () => onToggleMenuItemVisibility(item)\n                                        : undefined\n                                }\n                            />\n                        );\n                    }\n\n                    const isCollapsible = Boolean('collapsible' in item && item.collapsible);\n                    const isCollapsed = Boolean('isCollapsed' in item && item.isCollapsed);\n                    const groupListItems = ('items' in item && item.items) || [];\n                    const hasHeader = item.title || item.icon || isCollapsible;\n\n                    const isUngrouped = item.id === UNGROUPED_ID;\n                    const isGroupHovered = hoveredGroupId === item.id;\n\n                    let groupIcon = item.icon;\n\n                    if (isGroupHovered) {\n                        groupIcon = isCollapsed ? ChevronRight : ChevronDown;\n                    }\n\n                    return (\n                        <div className={b('menu-group', {expanded: !isCollapsed, wrapper: true})}>\n                            {hasHeader && !isUngrouped && (\n                                <Item\n                                    {...item}\n                                    className={b('menu-group-header', {collapsed: isCollapsed})}\n                                    icon={groupIcon}\n                                    isExpanded={isExpanded}\n                                    editMode={editMode}\n                                    setCollapseBlocker={setCollapseBlocker}\n                                    onMouseEnter={() => {\n                                        setHoveredGroupId(item.id);\n                                    }}\n                                    onMouseLeave={() => {\n                                        setHoveredGroupId(null);\n                                    }}\n                                    onItemClick={onItemClickByIndex(\n                                        itemIndex,\n                                        onToggleGroupCollapsed\n                                            ? () => onToggleGroupCollapsed(groupId)\n                                            : undefined,\n                                    )}\n                                    onToggleVisibility={\n                                        onToggleMenuGroupVisibility\n                                            ? () => onToggleMenuGroupVisibility(groupId)\n                                            : undefined\n                                    }\n                                />\n                            )}\n\n                            {!isCollapsed && (\n                                <List<MenuItemsWithGroups>\n                                    items={groupListItems}\n                                    sortable={enableSorting}\n                                    onSortEnd={handleSecondLevelSortEnd(itemIndex)}\n                                    virtualized={false}\n                                    filterable={false}\n                                    itemClassName={b('menu-group-item', {\n                                        edit: enableSorting,\n                                        collapsed: !isExpanded,\n                                    })}\n                                    itemHeight={(item) => getItemHeight(item, isCompactMode)}\n                                    itemsHeight={(items) => getItemsHeight(items, isCompactMode)}\n                                    renderItem={(\n                                        nestedItem,\n                                        _isNestedItemActive,\n                                        nestedItemIndex,\n                                    ) => {\n                                        return (\n                                            <Item\n                                                {...nestedItem}\n                                                isExpanded={isExpanded}\n                                                className={b('group-item')}\n                                                editMode={editMode}\n                                                setCollapseBlocker={setCollapseBlocker}\n                                                onMouseEnter={() => {\n                                                    setHoveredGroupId(nestedItem.id);\n                                                }}\n                                                onMouseLeave={() => {\n                                                    setHoveredGroupId(null);\n                                                }}\n                                                onItemClick={onItemClickByIndex(\n                                                    // +1 because the first item is the group header\n                                                    itemIndex + nestedItemIndex + 1,\n                                                    nestedItem.onItemClick,\n                                                )}\n                                                onToggleVisibility={\n                                                    onToggleMenuItemVisibility\n                                                        ? () =>\n                                                              onToggleMenuItemVisibility(nestedItem)\n                                                        : undefined\n                                                }\n                                            />\n                                        );\n                                    }}\n                                />\n                            )}\n                        </div>\n                    );\n                }}\n            />\n        </div>\n    );\n};\n\nexport const CompositeBar: FC<CompositeBarProps> = ({\n    type,\n    items,\n    onItemClick,\n    onMoreClick,\n    onToggleGroupCollapsed,\n    setCollapseBlocker,\n    isExpanded,\n    compositeId,\n    className,\n    menuItemClassName,\n    editMode = false,\n    isCompactMode,\n}) => {\n    if (!items || items.length === 0) {\n        return null;\n    }\n\n    if (type === 'menu') {\n        return (\n            <ScrollableWithScrollbar className={b(null, className)} recalcDeps={[items.length]}>\n                <CompositeBarView\n                    compositeId={compositeId}\n                    menuItemClassName={menuItemClassName}\n                    type=\"menu\"\n                    isExpanded={isExpanded}\n                    items={items}\n                    onItemClick={onItemClick}\n                    onMoreClick={onMoreClick}\n                    onToggleGroupCollapsed={onToggleGroupCollapsed}\n                    setCollapseBlocker={setCollapseBlocker}\n                    editMode={editMode}\n                    isCompactMode={isCompactMode}\n                />\n            </ScrollableWithScrollbar>\n        );\n    }\n\n    return (\n        <div className={b({subheader: true}, className)}>\n            <CompositeBarView\n                menuItemClassName={menuItemClassName}\n                type=\"subheader\"\n                isExpanded={isExpanded}\n                items={items}\n                onItemClick={onItemClick}\n                setCollapseBlocker={setCollapseBlocker}\n                editMode={editMode}\n                isCompactMode={isCompactMode}\n            />\n        </div>\n    );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"CompositeBar.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useCallback, useMemo, useRef} from 'react';\n\nimport {List} from '@gravity-ui/uikit';\nimport AutoSizer, {Size} from 'react-virtualized-auto-sizer';\n\nimport {MenuGroup} from '../../../types';\nimport {createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem, AsideHeaderMenuOverflow} from '../../types';\n\nimport {Item} from './Item/Item';\nimport {ItemProps} from './Item/Item.types';\nimport {ScrollableWithScrollbar} from './ScrollableWithScrollbar';\nimport {COLLAPSE_ITEM_ID} from './constants';\nimport {getGroupedItems, isGroupHeaderItem} from './grouping';\nimport {\n    getAutosizeListItems,\n    getItemHeight,\n    getItemsHeight,\n    getItemsMinHeight,\n    getMoreButtonItem,\n    getReorderedItems,\n    getSelectedItemIndex,\n} from './utils';\n\nimport styles from './CompositeBar.module.scss';\n\nconst b = createBlock('composite-bar', styles);\n\ntype CompositeBarProps = {\n    type: 'menu' | 'subheader';\n    items: AsideHeaderItem[];\n    menuGroups?: MenuGroup[];\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    menuMoreTitle?: string;\n    onMoreClick?: () => void;\n    compact: boolean;\n    compositeId?: string;\n    menuItemClassName?: string;\n    /**\n     * @see AsideHeaderMenuOverflow\n     */\n    menuOverflow?: AsideHeaderMenuOverflow;\n};\n\ntype CompositeBarViewProps = Omit<CompositeBarProps, 'menuOverflow'> & {\n    collapseItems?: AsideHeaderItem[];\n};\n\nconst CompositeBarView: FC<CompositeBarViewProps> = ({\n    type,\n    items,\n    onItemClick,\n    onMoreClick,\n    collapseItems,\n    compact,\n    compositeId,\n    menuItemClassName,\n}) => {\n    const ref = useRef<List<AsideHeaderItem>>(null);\n\n    const onMouseLeave = useCallback(() => {\n        if (compact && document.hasFocus()) {\n            ref.current?.activateItem(undefined as unknown as number);\n        }\n    }, [compact]);\n\n    const onItemClickByIndex = useCallback(\n        (orginalItemClick: AsideHeaderItem['onItemClick']): ItemProps['onItemClick'] =>\n            (item, collapsed, event) => {\n                // Handle clicks on the \"more\" button (collapse item)\n                if (item.id === COLLAPSE_ITEM_ID && collapsed) {\n                    onMoreClick?.();\n                } else {\n                    onItemClick?.(\n                        {\n                            ...item,\n                            // For collapsed popup items, preserve the item's own onItemClick\n                            // since orginalItemClick belongs to the collapse button, not the item\n                            onItemClick: collapsed ? item.onItemClick : orginalItemClick,\n                        },\n                        collapsed,\n                        event,\n                    );\n                }\n            },\n        [onItemClick, onMoreClick],\n    );\n\n    return (\n        <List<AsideHeaderItem>\n            id={compositeId}\n            ref={ref}\n            items={items}\n            selectedItemIndex={type === 'menu' ? getSelectedItemIndex(items) : undefined}\n            itemHeight={getItemHeight}\n            itemsHeight={getItemsHeight}\n            itemClassName={b('root-menu-item', menuItemClassName)}\n            virtualized={false}\n            filterable={false}\n            sortable={false}\n            renderItem={(item) => {\n                let menuPopupItems: AsideHeaderItem[] | undefined;\n                let menuPopupTitle: string | undefined;\n\n                if (item.id === COLLAPSE_ITEM_ID) {\n                    menuPopupItems = collapseItems;\n                } else if (isGroupHeaderItem(item)) {\n                    menuPopupItems = item.groupChildren;\n                    menuPopupTitle = item.groupPopupTitle;\n                }\n\n                return (\n                    <Item\n                        {...item}\n                        compact={compact}\n                        popupItemClassName={menuItemClassName}\n                        menuPopupItems={menuPopupItems}\n                        menuPopupTitle={menuPopupTitle}\n                        onMouseLeave={onMouseLeave}\n                        onItemClick={onItemClickByIndex(item.onItemClick)}\n                    />\n                );\n            }}\n        />\n    );\n};\n\nexport const CompositeBar: FC<CompositeBarProps> = ({\n    type,\n    items,\n    menuGroups,\n    menuMoreTitle,\n    onItemClick,\n    onMoreClick,\n    compact,\n    compositeId,\n    menuItemClassName,\n    menuOverflow = 'collapse',\n}) => {\n    const groupedItems = useMemo(() => getGroupedItems(items, menuGroups), [items, menuGroups]);\n\n    // Respect `afterMoreButton` ordering for DOM stability when items are rendered\n    // inside a scroll container (no collapse button to anchor them against).\n    const scrollableItems = useMemo(() => getReorderedItems(groupedItems), [groupedItems]);\n\n    if (groupedItems.length === 0) {\n        return null;\n    }\n    let node: ReactNode;\n\n    if (type === 'menu') {\n        // `scroll` mode is intentionally disabled in `compact` mode — there the\n        // classic \"More\" popup gives a better UX for icon-only items.\n        if (menuOverflow === 'scroll' && !compact) {\n            node = (\n                <ScrollableWithScrollbar recalcDeps={[scrollableItems]}>\n                    <CompositeBarView\n                        compositeId={compositeId}\n                        type=\"menu\"\n                        compact={compact}\n                        items={scrollableItems}\n                        onItemClick={onItemClick}\n                        menuItemClassName={menuItemClassName}\n                    />\n                </ScrollableWithScrollbar>\n            );\n        } else {\n            const minHeight = getItemsMinHeight(groupedItems);\n            const collapseItem = getMoreButtonItem(menuMoreTitle);\n            node = (\n                <div className={b({autosizer: true})} style={{minHeight}}>\n                    {groupedItems.length !== 0 && (\n                        <AutoSizer>\n                            {(size: Size) => {\n                                const width = Number.isNaN(size.width) ? 0 : size.width;\n                                const height = Number.isNaN(size.height) ? 0 : size.height;\n\n                                const {listItems, collapseItems} = getAutosizeListItems(\n                                    groupedItems,\n                                    height,\n                                    collapseItem,\n                                );\n                                return (\n                                    <div style={{width, height}}>\n                                        <CompositeBarView\n                                            compositeId={compositeId}\n                                            type=\"menu\"\n                                            compact={compact}\n                                            items={listItems}\n                                            onItemClick={onItemClick}\n                                            onMoreClick={onMoreClick}\n                                            menuItemClassName={menuItemClassName}\n                                            collapseItems={collapseItems}\n                                        />\n                                    </div>\n                                );\n                            }}\n                        </AutoSizer>\n                    )}\n                </div>\n            );\n        }\n    } else {\n        node = (\n            <div className={b({subheader: true})}>\n                <CompositeBarView\n                    type=\"subheader\"\n                    menuItemClassName={menuItemClassName}\n                    compact={compact}\n                    items={groupedItems}\n                    onItemClick={onItemClick}\n                />\n            </div>\n        );\n    }\n    return node;\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AA0BA,MAAM,CAAC,GAAG,WAAW,CAAC,eAAe,EAAE,MAAM,CAAC;AA0B9C,MAAM,gBAAgB,GAA8B,CAAC,EACjD,IAAI,EACJ,KAAK,EACL,WAAW,EACX,WAAW,EACX,aAAa,EACb,OAAO,EACP,WAAW,EACX,iBAAiB,GACpB,KAAI;AACD,IAAA,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC;AAE/C,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;;AAClC,QAAA,IAAI,OAAO,IAAI,QAAQ,CAAC,QAAQ,EAAE,EAAE;YAChC,CAAA,EAAA,GAAA,GAAG,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAC,SAA8B,CAAC;;AAEjE,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,gBAAgD,KAC7C,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,KAAI;;QAEvB,IAAI,IAAI,CAAC,EAAE,KAAK,gBAAgB,IAAI,SAAS,EAAE;AAC3C,YAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,SAAA,GAAA,SAAA,GAAA,WAAW,EAAI;;aACZ;AACH,YAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,SAAA,GAAA,SAAA,GAAA,WAAW,iCAEA,IAAI,CAAA,EAAA;;;AAGP,gBAAA,WAAW,EAAE,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,gBAAgB,EAAA,CAAA,EAEhE,SAAS,EACT,KAAK,CACR;;AAET,KAAC,EACL,CAAC,WAAW,EAAE,WAAW,CAAC,CAC7B;AAED,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,IAAI,KAAK,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,GAAG,SAAS,EAC5E,UAAU,EAAE,aAAa,EACzB,WAAW,EAAE,cAAc,EAC3B,aAAa,EAAE,CAAC,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,EACrD,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,CAAC,IAAI,KAAI;AACjB,YAAA,IAAI,cAA6C;AACjD,YAAA,IAAI,cAAkC;AAEtC,YAAA,IAAI,IAAI,CAAC,EAAE,KAAK,gBAAgB,EAAE;gBAC9B,cAAc,GAAG,aAAa;;AAC3B,iBAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,EAAE;AAChC,gBAAA,cAAc,GAAG,IAAI,CAAC,aAAa;AACnC,gBAAA,cAAc,GAAG,IAAI,CAAC,eAAe;;AAGzC,YAAA,QACIA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,IACR,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,iBAAiB,EACrC,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAA,CAAA,CACnD;SAET,EAAA,CACH;AAEV,CAAC;AAEM,MAAM,YAAY,GAA0B,CAAC,EAChD,IAAI,EACJ,KAAK,EACL,UAAU,EACV,aAAa,EACb,WAAW,EACX,WAAW,EACX,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,YAAY,GAAG,UAAU,GAC5B,KAAI;IACD,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;;;AAI3F,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,iBAAiB,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAEtF,IAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AAC3B,QAAA,OAAO,IAAI;;AAEf,IAAA,IAAI,IAAe;AAEnB,IAAA,IAAI,IAAI,KAAK,MAAM,EAAE;;;AAGjB,QAAA,IAAI,YAAY,KAAK,QAAQ,IAAI,CAAC,OAAO,EAAE;YACvC,IAAI,IACAA,cAAC,CAAA,aAAA,CAAA,uBAAuB,IAAC,UAAU,EAAE,CAAC,eAAe,CAAC,EAAA;AAClD,gBAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACb,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,eAAe,EACtB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EAAA,CACtC,CACoB,CAC7B;;aACE;AACH,YAAA,MAAM,SAAS,GAAG,iBAAiB,CAAC,YAAY,CAAC;AACjD,YAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,aAAa,CAAC;AACrD,YAAA,IAAI,IACAA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,EAAE,KAAK,EAAE,EAAC,SAAS,EAAC,EAAA,EACnD,YAAY,CAAC,MAAM,KAAK,CAAC,KACtBA,6BAAC,SAAS,EAAA,IAAA,EACL,CAAC,IAAU,KAAI;gBACZ,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK;gBACvD,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM;AAE1D,gBAAA,MAAM,EAAC,SAAS,EAAE,aAAa,EAAC,GAAG,oBAAoB,CACnD,YAAY,EACZ,MAAM,EACN,YAAY,CACf;gBACD,QACIA,sCAAK,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,EAAA;AACvB,oBAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EACb,EAAA,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa,EAC9B,CAAA,CACA;AAEd,aAAC,CACO,CACf,CACC,CACT;;;SAEF;AACH,QAAA,IAAI,IACAA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,EAAA;YAChCA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACb,EAAA,IAAI,EAAC,WAAW,EAChB,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,WAAW,EAAA,CAC1B,CACA,CACT;;AAEL,IAAA,OAAO,IAAI;AACf;;;;"}

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

@@ -1,4 +1,4 @@
-var styles = {"gn-composite-bar":"CompositeBar-module__gn-composite-bar___WoCDY","gnCompositeBar":"CompositeBar-module__gn-composite-bar___WoCDY","gn-composite-bar__root-menu-item":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gnCompositeBarRootMenuItem":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gn-composite-bar__menu-group-item":"CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI","gnCompositeBarMenuGroupItem":"CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI","gn-composite-bar__menu-group-header":"CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21","gnCompositeBarMenuGroupHeader":"CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21","gn-composite-bar__menu-group":"CompositeBar-module__gn-composite-bar__menu-group___3hCzS","gnCompositeBarMenuGroup":"CompositeBar-module__gn-composite-bar__menu-group___3hCzS","gn-composite-bar__root-menu-item_compact":"CompositeBar-module__gn-composite-bar__root-menu-item_compact___vvKTD","gnCompositeBarRootMenuItemCompact":"CompositeBar-module__gn-composite-bar__root-menu-item_compact___vvKTD","gn-composite-bar__group-item":"CompositeBar-module__gn-composite-bar__group-item___L1pJ8","gnCompositeBarGroupItem":"CompositeBar-module__gn-composite-bar__group-item___L1pJ8","gn-composite-bar__menu-group-item_edit":"CompositeBar-module__gn-composite-bar__menu-group-item_edit___Es8er","gnCompositeBarMenuGroupItemEdit":"CompositeBar-module__gn-composite-bar__menu-group-item_edit___Es8er","gn-composite-bar__menu-group-item_compact":"CompositeBar-module__gn-composite-bar__menu-group-item_compact___-7tZl","gnCompositeBarMenuGroupItemCompact":"CompositeBar-module__gn-composite-bar__menu-group-item_compact___-7tZl","gn-composite-bar__menu-group-header_collapsed":"CompositeBar-module__gn-composite-bar__menu-group-header_collapsed___bTXn1","gnCompositeBarMenuGroupHeaderCollapsed":"CompositeBar-module__gn-composite-bar__menu-group-header_collapsed___bTXn1","gn-composite-bar__menu-item_type_regular":"CompositeBar-module__gn-composite-bar__menu-item_type_regular___8DHUR","gnCompositeBarMenuItemTypeRegular":"CompositeBar-module__gn-composite-bar__menu-item_type_regular___8DHUR","gn-composite-bar__menu-group_expanded":"CompositeBar-module__gn-composite-bar__menu-group_expanded___GY0oS","gnCompositeBarMenuGroupExpanded":"CompositeBar-module__gn-composite-bar__menu-group_expanded___GY0oS","gn-composite-bar__menu-group-toggle":"CompositeBar-module__gn-composite-bar__menu-group-toggle___4--VW","gnCompositeBarMenuGroupToggle":"CompositeBar-module__gn-composite-bar__menu-group-toggle___4--VW","gn-composite-bar__menu-group-toggle-placeholder":"CompositeBar-module__gn-composite-bar__menu-group-toggle-placeholder___vAqkn","gnCompositeBarMenuGroupTogglePlaceholder":"CompositeBar-module__gn-composite-bar__menu-group-toggle-placeholder___vAqkn","gn-composite-bar__menu-group-icon":"CompositeBar-module__gn-composite-bar__menu-group-icon___YVg-C","gnCompositeBarMenuGroupIcon":"CompositeBar-module__gn-composite-bar__menu-group-icon___YVg-C","gn-composite-bar__menu-item":"CompositeBar-module__gn-composite-bar__menu-item___zaw-R","gnCompositeBarMenuItem":"CompositeBar-module__gn-composite-bar__menu-item___zaw-R"};
+var styles = {"gn-composite-bar":"CompositeBar-module__gn-composite-bar___WoCDY","gnCompositeBar":"CompositeBar-module__gn-composite-bar___WoCDY","gn-composite-bar__root-menu-item":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gnCompositeBarRootMenuItem":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF"};
 
 export { styles as default };
 //# sourceMappingURL=CompositeBar.module.scss.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.css

@@ -1 +1 @@
-.HighlightedItem-module__gn-composite-bar-highlighted-item___8jg4a{--_--background-color:var(--g-color-base-background);--_--item-background-color-hover:var(--g-color-base-selection-hover);--_--item-selected-background-color-active:var(--g-color-base-selection);display:flex;justify-content:center;position:absolute;z-index:10000}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v{align-items:center;background-color:var(--gn-aside-header-background-color,var(--_--background-color));border-radius:7px;box-shadow:0 8px 20px 0 var(--g-color-sfx-shadow);cursor:pointer;display:flex;height:var(--_--item-height,36px);justify-content:center;overflow:hidden;position:relative;transform:translateY(1px);width:var(--_--item-height,36px)}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color-active));content:"";height:100%;position:absolute;width:100%;z-index:-1}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v:hover:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover))}
+.HighlightedItem-module__gn-composite-bar-highlighted-item___8jg4a{--_--background-color:var(--g-color-base-background);--_--item-icon-background-size:38px;--_--item-background-color-hover:var(--g-color-base-selection-hover);--_--item-selected-background-color-active:var(--g-color-base-selection);display:flex;justify-content:center;position:absolute;z-index:10000}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v{align-items:center;background-color:var(--gn-aside-header-background-color,var(--_--background-color));border-radius:7px;box-shadow:0 8px 20px 0 var(--g-color-sfx-shadow);cursor:pointer;display:flex;height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));justify-content:center;overflow:hidden;position:relative;transform:translateY(1px);width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color-active));content:"";height:100%;position:absolute;width:100%;z-index:-1}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v:hover:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover))}