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

package/build/esm/components/AsideHeader/components/AllPagesPanel/utils/sortMenuItemsWithDividers.js

@@ -1,38 +1,39 @@
 import { getIsMenuItem } from './getIsMenuItem.js';
 
-/** Sorts menu items while preserving divider positions at their original locations. */
+/** Items that stay at their position when sorting (not draggable). */
+function isFixedPositionItem(item) {
+    return item.type === 'divider' || item.type === 'action';
+}
+/**
+ * Sorts menu items while preserving divider and action positions at their original locations.
+ */
 function sortMenuItemsWithDividers(oldIndex, newIndex, currentFlatList) {
-    // Single pass: collect dividers and items
-    const dividerPositions = [];
-    const itemsWithoutDividers = [];
+    const fixedPositionItems = [];
+    const sortableItems = [];
     currentFlatList.forEach((item, index) => {
-        if (item.type === 'divider') {
-            dividerPositions.push({ index, item });
+        if (isFixedPositionItem(item)) {
+            fixedPositionItems.push({ index, item });
         }
         else if (getIsMenuItem(item)) {
-            itemsWithoutDividers.push(item);
+            sortableItems.push(item);
         }
     });
-    if (itemsWithoutDividers[oldIndex] === undefined ||
-        itemsWithoutDividers[newIndex] === undefined) {
+    if (sortableItems[oldIndex] === undefined || sortableItems[newIndex] === undefined) {
         return currentFlatList;
     }
-    const sortedItemsWithoutDividers = [...itemsWithoutDividers];
-    const [movedElement] = sortedItemsWithoutDividers.splice(oldIndex, 1);
-    sortedItemsWithoutDividers.splice(newIndex, 0, movedElement);
-    // Insert dividers back at their original positions in currentFlatList
+    const sortedItems = [...sortableItems];
+    const [movedElement] = sortedItems.splice(oldIndex, 1);
+    sortedItems.splice(newIndex, 0, movedElement);
     const result = [];
-    const dividerMap = new Map(dividerPositions.map((d) => [d.index, d.item]));
-    let sortedIndex = 0;
+    const fixedMap = new Map(fixedPositionItems.map((f) => [f.index, f.item]));
+    let sortableIndex = 0;
     for (let originalIndex = 0; originalIndex < currentFlatList.length; originalIndex++) {
-        const dividerItem = dividerMap.get(originalIndex);
-        if (dividerItem) {
-            // Insert divider at its original position
-            result.push(dividerItem);
+        const fixedItem = fixedMap.get(originalIndex);
+        if (fixedItem) {
+            result.push(fixedItem);
         }
-        else if (sortedIndex < sortedItemsWithoutDividers.length) {
-            // Insert item from sorted array (without dividers)
-            result.push(sortedItemsWithoutDividers[sortedIndex++]);
+        else if (sortableIndex < sortedItems.length) {
+            result.push(sortedItems[sortableIndex++]);
         }
     }
     return result;

package/build/esm/components/AsideHeader/components/AllPagesPanel/utils/sortMenuItemsWithDividers.js.map

@@ -1 +1 @@
-{"version":3,"file":"sortMenuItemsWithDividers.js","sources":["../../../../../../../../src/components/AsideHeader/components/AllPagesPanel/utils/sortMenuItemsWithDividers.ts"],"sourcesContent":["import {MenuItemsWithGroups} from '../../../types';\n\nimport {getIsMenuItem} from './getIsMenuItem';\n\n/** Sorts menu items while preserving divider positions at their original locations. */\nexport function sortMenuItemsWithDividers(\n    oldIndex: number,\n    newIndex: number,\n    currentFlatList: MenuItemsWithGroups[],\n): MenuItemsWithGroups[] {\n    // Single pass: collect dividers and items\n    const dividerPositions: Array<{index: number; item: MenuItemsWithGroups}> = [];\n    const itemsWithoutDividers: MenuItemsWithGroups[] = [];\n\n    currentFlatList.forEach((item, index) => {\n        if (item.type === 'divider') {\n            dividerPositions.push({index, item});\n        } else if (getIsMenuItem(item)) {\n            itemsWithoutDividers.push(item);\n        }\n    });\n\n    if (\n        itemsWithoutDividers[oldIndex] === undefined ||\n        itemsWithoutDividers[newIndex] === undefined\n    ) {\n        return currentFlatList;\n    }\n\n    const sortedItemsWithoutDividers = [...itemsWithoutDividers];\n    const [movedElement] = sortedItemsWithoutDividers.splice(oldIndex, 1);\n    sortedItemsWithoutDividers.splice(newIndex, 0, movedElement);\n\n    // Insert dividers back at their original positions in currentFlatList\n    const result: MenuItemsWithGroups[] = [];\n    const dividerMap = new Map(dividerPositions.map((d) => [d.index, d.item]));\n    let sortedIndex = 0;\n\n    for (let originalIndex = 0; originalIndex < currentFlatList.length; originalIndex++) {\n        const dividerItem = dividerMap.get(originalIndex);\n\n        if (dividerItem) {\n            // Insert divider at its original position\n            result.push(dividerItem);\n        } else if (sortedIndex < sortedItemsWithoutDividers.length) {\n            // Insert item from sorted array (without dividers)\n            result.push(sortedItemsWithoutDividers[sortedIndex++]);\n        }\n    }\n\n    return result;\n}\n"],"names":[],"mappings":";;AAIA;SACgB,yBAAyB,CACrC,QAAgB,EAChB,QAAgB,EAChB,eAAsC,EAAA;;IAGtC,MAAM,gBAAgB,GAAsD,EAAE;IAC9E,MAAM,oBAAoB,GAA0B,EAAE;IAEtD,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACpC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YACzB,gBAAgB,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,EAAC,CAAC;;AACjC,aAAA,IAAI,aAAa,CAAC,IAAI,CAAC,EAAE;AAC5B,YAAA,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC;;AAEvC,KAAC,CAAC;AAEF,IAAA,IACI,oBAAoB,CAAC,QAAQ,CAAC,KAAK,SAAS;AAC5C,QAAA,oBAAoB,CAAC,QAAQ,CAAC,KAAK,SAAS,EAC9C;AACE,QAAA,OAAO,eAAe;;AAG1B,IAAA,MAAM,0BAA0B,GAAG,CAAC,GAAG,oBAAoB,CAAC;AAC5D,IAAA,MAAM,CAAC,YAAY,CAAC,GAAG,0BAA0B,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IACrE,0BAA0B,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,YAAY,CAAC;;IAG5D,MAAM,MAAM,GAA0B,EAAE;IACxC,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1E,IAAI,WAAW,GAAG,CAAC;AAEnB,IAAA,KAAK,IAAI,aAAa,GAAG,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE;QACjF,MAAM,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,aAAa,CAAC;QAEjD,IAAI,WAAW,EAAE;;AAEb,YAAA,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;;AACrB,aAAA,IAAI,WAAW,GAAG,0BAA0B,CAAC,MAAM,EAAE;;YAExD,MAAM,CAAC,IAAI,CAAC,0BAA0B,CAAC,WAAW,EAAE,CAAC,CAAC;;;AAI9D,IAAA,OAAO,MAAM;AACjB;;;;"}
+{"version":3,"file":"sortMenuItemsWithDividers.js","sources":["../../../../../../../../src/components/AsideHeader/components/AllPagesPanel/utils/sortMenuItemsWithDividers.ts"],"sourcesContent":["import {MenuItemsWithGroups} from '../../../types';\n\nimport {getIsMenuItem} from './getIsMenuItem';\n\n/** Items that stay at their position when sorting (not draggable). */\nfunction isFixedPositionItem(item: MenuItemsWithGroups): boolean {\n    return item.type === 'divider' || item.type === 'action';\n}\n\n/**\n * Sorts menu items while preserving divider and action positions at their original locations.\n */\nexport function sortMenuItemsWithDividers(\n    oldIndex: number,\n    newIndex: number,\n    currentFlatList: MenuItemsWithGroups[],\n): MenuItemsWithGroups[] {\n    const fixedPositionItems: Array<{index: number; item: MenuItemsWithGroups}> = [];\n    const sortableItems: MenuItemsWithGroups[] = [];\n\n    currentFlatList.forEach((item, index) => {\n        if (isFixedPositionItem(item)) {\n            fixedPositionItems.push({index, item});\n        } else if (getIsMenuItem(item)) {\n            sortableItems.push(item);\n        }\n    });\n\n    if (sortableItems[oldIndex] === undefined || sortableItems[newIndex] === undefined) {\n        return currentFlatList;\n    }\n\n    const sortedItems = [...sortableItems];\n    const [movedElement] = sortedItems.splice(oldIndex, 1);\n    sortedItems.splice(newIndex, 0, movedElement);\n\n    const result: MenuItemsWithGroups[] = [];\n    const fixedMap = new Map(fixedPositionItems.map((f) => [f.index, f.item]));\n    let sortableIndex = 0;\n\n    for (let originalIndex = 0; originalIndex < currentFlatList.length; originalIndex++) {\n        const fixedItem = fixedMap.get(originalIndex);\n\n        if (fixedItem) {\n            result.push(fixedItem);\n        } else if (sortableIndex < sortedItems.length) {\n            result.push(sortedItems[sortableIndex++]);\n        }\n    }\n\n    return result;\n}\n"],"names":[],"mappings":";;AAIA;AACA,SAAS,mBAAmB,CAAC,IAAyB,EAAA;IAClD,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;AAC5D;AAEA;;AAEG;SACa,yBAAyB,CACrC,QAAgB,EAChB,QAAgB,EAChB,eAAsC,EAAA;IAEtC,MAAM,kBAAkB,GAAsD,EAAE;IAChF,MAAM,aAAa,GAA0B,EAAE;IAE/C,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACpC,QAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAE;YAC3B,kBAAkB,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,EAAC,CAAC;;AACnC,aAAA,IAAI,aAAa,CAAC,IAAI,CAAC,EAAE;AAC5B,YAAA,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;AAEhC,KAAC,CAAC;AAEF,IAAA,IAAI,aAAa,CAAC,QAAQ,CAAC,KAAK,SAAS,IAAI,aAAa,CAAC,QAAQ,CAAC,KAAK,SAAS,EAAE;AAChF,QAAA,OAAO,eAAe;;AAG1B,IAAA,MAAM,WAAW,GAAG,CAAC,GAAG,aAAa,CAAC;AACtC,IAAA,MAAM,CAAC,YAAY,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtD,WAAW,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,YAAY,CAAC;IAE7C,MAAM,MAAM,GAA0B,EAAE;IACxC,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1E,IAAI,aAAa,GAAG,CAAC;AAErB,IAAA,KAAK,IAAI,aAAa,GAAG,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE;QACjF,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,CAAC;QAE7C,IAAI,SAAS,EAAE;AACX,YAAA,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;;AACnB,aAAA,IAAI,aAAa,GAAG,WAAW,CAAC,MAAM,EAAE;YAC3C,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC,CAAC;;;AAIjD,IAAA,OAAO,MAAM;AACjB;;;;"}

package/build/esm/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_collapsed___c19gr .CollapseButton-module__gn-collapse-button__icon___iMooT{transform:rotate(180deg)}

package/build/esm/components/AsideHeader/components/CollapseButton/CollapseButton.d.ts

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

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

@@ -1,29 +1,29 @@
 import './CollapseButton.css';
 import React__default, { useCallback } from 'react';
+import { ArrowLeftFromLine } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { createBlock } from '../../../utils/cn.js';
 import { useAsideHeaderContext, useAsideHeaderInnerContext } from '../../AsideHeaderContext.js';
 import i18n from '../../i18n/index.js';
-import ArrowLeftFromLineIcon from '@gravity-ui/icons/svgs/arrow-left-from-line.svg';
 import styles from './CollapseButton.module.scss.js';
 
 const b = createBlock('collapse-button', styles);
-const CollapseButton = ({ className }) => {
-    const { compact, onChangeCompact } = useAsideHeaderContext();
+const CollapseButton = ({ className, isCompactMode }) => {
+    const { pinned, onChangePinned } = useAsideHeaderContext();
     const { expandTitle, collapseTitle, collapseButtonWrapper } = useAsideHeaderInnerContext();
     const onCollapseButtonClick = useCallback(() => {
-        const newCompact = !compact;
-        onChangeCompact === null || onChangeCompact === undefined ? undefined : onChangeCompact(newCompact);
-    }, [compact, onChangeCompact]);
-    const buttonTitle = compact
-        ? expandTitle || i18n('button_expand')
-        : collapseTitle || i18n('button_collapse');
-    const defaultButton = (React__default.createElement(Button, { view: "flat-secondary", size: "l", className: b({ compact }, className), onClick: onCollapseButtonClick, "aria-label": buttonTitle, title: buttonTitle },
-        React__default.createElement(Icon, { data: ArrowLeftFromLineIcon, className: b('icon'), size: 16 })));
+        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 })));
     if (collapseButtonWrapper) {
         return collapseButtonWrapper(defaultButton, {
-            compact,
-            onChangeCompact,
+            isExpanded: pinned,
+            onChangePinned,
         });
     }
     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 {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":["React"],"mappings":";;;;;;;;AAYA,MAAM,CAAC,GAAG,WAAW,CAAC,iBAAiB,EAAE,MAAM,CAAC;MAMnC,cAAc,GAAG,CAAC,EAAC,SAAS,EAAsB,KAAI;IAC/D,MAAM,EAAC,OAAO,EAAE,eAAe,EAAC,GAAG,qBAAqB,EAAE;IAC1D,MAAM,EAAC,WAAW,EAAE,aAAa,EAAE,qBAAqB,EAAC,GAAG,0BAA0B,EAAE;AAExF,IAAA,MAAM,qBAAqB,GAAG,WAAW,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,IAAI,IAAI,CAAC,eAAe;AACrC,UAAE,aAAa,IAAI,IAAI,CAAC,iBAAiB,CAAC;AAE9C,IAAA,MAAM,aAAa,IACfA,cAAA,CAAA,aAAA,CAAC,MAAM,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,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,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 {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;;;;"}

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

@@ -1,4 +1,4 @@
-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_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"};
 
 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{--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{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)}

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

@@ -1,19 +1,23 @@
 import React, { FC } from 'react';
-import { AsideHeaderItem, MenuItemsWithGroups } from '../../types';
+import { AsideHeaderItem, MenuItemsWithGroups, SetCollapseBlocker } from '../../types';
 type CompositeBarProps = {
     type: 'menu' | 'subheader';
+    setCollapseBlocker?: SetCollapseBlocker;
     items?: MenuItemsWithGroups[];
-    onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    multipleTooltip?: boolean;
+    onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>, options: {
+        setCollapseBlocker: SetCollapseBlocker | undefined;
+    }) => void;
     menuMoreTitle?: string;
     onMoreClick?: () => void;
-    compact: boolean;
+    /** When `true`, the navigation is expanded. When `false`, it is collapsed. */
+    isExpanded: boolean;
     compositeId?: string;
     className?: string;
-    groupClassName?: string;
     menuItemClassName?: string;
     editMode?: boolean;
     onToggleGroupCollapsed?: (groupId: string) => void;
+    /** When `true`, menu items use compact height. */
+    isCompactMode?: boolean;
 };
 type CompositeBarViewProps = CompositeBarProps & {
     compositeId?: string;
@@ -32,6 +36,8 @@ type CompositeBarViewProps = CompositeBarProps & {
         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>;

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

@@ -1,127 +1,34 @@
 import './CompositeBar.css';
-import React__default, { useRef, useState, useContext, useCallback } from 'react';
-import { ChevronDown, ChevronRight } from '@gravity-ui/icons';
+import React__default, { useRef, useState, useCallback } from 'react';
+import { ChevronRight, ChevronDown } from '@gravity-ui/icons';
 import { List } from '@gravity-ui/uikit';
-import { ASIDE_HEADER_COMPACT_WIDTH } from '../../../constants.js';
 import { createBlock } from '../../../utils/cn.js';
 import { UNGROUPED_ID } from '../AllPagesPanel/constants.js';
 import { Item } from './Item/Item.js';
-import { MultipleTooltip } from './MultipleTooltip/MultipleTooltip.js';
-import { MultipleTooltipProvider, MultipleTooltipContext } from './MultipleTooltip/MultipleTooltipContext.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 styles from './CompositeBar.module.scss.js';
 
 const b = createBlock('composite-bar', styles);
-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, compositeId, className, menuItemClassName, enableSorting = false, editMode = false, isExpanded, onToggleGroupCollapsed, onToggleMenuGroupVisibility, onToggleMenuItemVisibility, onFirstLevelSortEnd, onSecondLevelSortEnd, setCollapseBlocker, isCompactMode, }) => {
     const ref = useRef(null);
-    const tooltipRef = useRef(null);
     const [hoveredGroupId, setHoveredGroupId] = useState(null);
-    const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
-    React__default.useEffect(() => {
-        function handleBlurWindow() {
-            if (multipleTooltip && multipleTooltipActive) {
-                setMultipleTooltipContextValue({ active: false });
-            }
-        }
-        window.addEventListener('blur', handleBlurWindow);
-        return () => {
-            window.removeEventListener('blur', handleBlurWindow);
-        };
-    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
-    const onTooltipMouseEnter = useCallback((e) => {
-        if (multipleTooltip &&
-            compact &&
-            !multipleTooltipActive &&
-            document.hasFocus() &&
-            activeIndex !== lastClickedItemIndex &&
-            e.clientX <= ASIDE_HEADER_COMPACT_WIDTH) {
-            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
-                active: true,
-            });
-        }
-    }, [
-        multipleTooltip,
-        compact,
-        multipleTooltipActive,
-        activeIndex,
-        lastClickedItemIndex,
-        setMultipleTooltipContextValue,
-    ]);
-    const onTooltipMouseLeave = useCallback(() => {
-        if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
-            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
-                active: false,
-                lastClickedItemIndex: undefined,
-            });
-        }
-    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
-    const onMouseEnterByIndex = useCallback((itemIndex) => () => {
-        if (multipleTooltip && document.hasFocus()) {
-            let multipleTooltipActiveValue = multipleTooltipActive;
-            if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
-                multipleTooltipActiveValue = true;
-            }
-            if (activeIndex === itemIndex &&
-                multipleTooltipActive === multipleTooltipActiveValue) {
-                return;
-            }
-            setMultipleTooltipContextValue({
-                activeIndex: itemIndex,
-                active: multipleTooltipActiveValue,
-            });
-        }
-    }, [
-        multipleTooltip,
-        multipleTooltipActive,
-        lastClickedItemIndex,
-        activeIndex,
-        setMultipleTooltipContextValue,
-    ]);
     const onMouseLeave = useCallback(() => {
         var _a;
-        if (compact && document.hasFocus()) {
+        if (!isExpanded && document.hasFocus()) {
             (_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem(undefined);
-            if (multipleTooltip &&
-                (activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
-                setMultipleTooltipContextValue({
-                    activeIndex: undefined,
-                    lastClickedItemIndex: undefined,
-                });
-            }
-        }
-    }, [
-        activeIndex,
-        compact,
-        lastClickedItemIndex,
-        multipleTooltip,
-        setMultipleTooltipContextValue,
-    ]);
-    const onItemClickByIndex = useCallback((itemIndex, orginalItemClick) => (item, collapsed, event) => {
-        if (compact &&
-            multipleTooltip &&
-            itemIndex !== lastClickedItemIndex &&
-            item.id !== COLLAPSE_ITEM_ID) {
-            setMultipleTooltipContextValue({
-                lastClickedItemIndex: itemIndex,
-                active: false,
-            });
         }
+    }, [isExpanded]);
+    const onItemClickByIndex = useCallback((_itemIndex, orginalItemClick) => (item, collapsed, event, options) => {
         // 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);
+            onItemClick === null || onItemClick === undefined ? undefined : onItemClick(Object.assign(Object.assign({}, item), { onItemClick: orginalItemClick }), collapsed, event, options);
         }
-    }, [
-        compact,
-        lastClickedItemIndex,
-        multipleTooltip,
-        onItemClick,
-        onMoreClick,
-        setMultipleTooltipContextValue,
-    ]);
+    }, [onItemClick, onMoreClick]);
     const handleFirstLevelSortEnd = useCallback(({ oldIndex, newIndex }) => {
         if (onFirstLevelSortEnd) {
             onFirstLevelSortEnd({ oldIndex, newIndex });
@@ -135,73 +42,64 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleToolt
     if (!items || items.length === 0) {
         return null;
     }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: className, ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
-            React__default.createElement(List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex(items) : undefined, itemHeight: getItemHeight, itemsHeight: 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 || ITEM_TYPE_REGULAR;
-                    if (!groupId) {
-                        return (React__default.createElement(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 === UNGROUPED_ID;
-                    const isGroupHovered = hoveredGroupId === item.id;
-                    let groupIcon = item.icon;
-                    if (!isCollapsed) {
-                        groupIcon = ChevronDown;
-                    }
-                    else if (isGroupHovered) {
-                        groupIcon = ChevronRight;
-                    }
-                    return (React__default.createElement("div", { className: b('menu-group', { expanded: !isCollapsed }, groupClassName) },
-                        hasHeader && !isUngrouped && (React__default.createElement(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__default.createElement(List, { items: groupListItems, sortable: enableSorting, onSortEnd: handleSecondLevelSortEnd(itemIndex), virtualized: false, filterable: false, itemClassName: b('menu-group-item', {
-                                edit: enableSorting,
-                                compact,
-                            }), itemHeight: getItemHeight, itemsHeight: getItemsHeight, renderItem: (nestedItem, _isNestedItemActive, _nestedItemIndex) => {
-                                return (React__default.createElement(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 })));
-                            } }))));
-                } })),
-        type === 'menu' && multipleTooltip && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
+    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 })));
+                        } }))));
+            } })));
 };
-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, onItemClick, onMoreClick, onToggleGroupCollapsed, setCollapseBlocker, isExpanded, compositeId, className, menuItemClassName, editMode = false, isCompactMode, }) => {
+    if (!items || items.length === 0) {
         return null;
     }
-    let node;
     if (type === 'menu') {
-        node = (React__default.createElement("div", { className: b({ scrollable: true }, className) },
-            React__default.createElement(CompositeBarView, { compositeId: compositeId, groupClassName: groupClassName, menuItemClassName: menuItemClassName, type: "menu", compact: compact, items: visibleItems, onItemClick: onItemClick, onMoreClick: onMoreClick, multipleTooltip: multipleTooltip, onToggleGroupCollapsed: onToggleGroupCollapsed, editMode: editMode })));
-    }
-    else {
-        node = (React__default.createElement("div", { className: b({ subheader: true }, className) },
-            React__default.createElement(CompositeBarView, { groupClassName: groupClassName, menuItemClassName: menuItemClassName, type: "subheader", compact: compact, items: visibleItems, onItemClick: onItemClick, editMode: editMode })));
+        return (React__default.createElement(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 })));
     }
-    return React__default.createElement(MultipleTooltipProvider, null, node);
+    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 })));
 };
 
 export { CompositeBar, CompositeBarView };