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

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

@@ -0,0 +1,171 @@
+'use strict';
+
+var React = require('react');
+
+const EMPTY_DEPS = [];
+const MIN_THUMB_HEIGHT = 24;
+/**
+ * Keeps a custom scrollbar thumb and bottom shadow in sync with a native
+ * scroll layer. The scroll element handles touch/keyboard; wheel events on the
+ * overlay track are forwarded to it (the track sits above the scroller, so
+ * they would not scroll otherwise).
+ *
+ * @param recalcDeps - extra deps that should trigger thumb/shadow recalculation
+ * @returns refs, scroll state, thumb geometry, and pointer handlers for the UI
+ */
+function useScrollableScrollbarSync(recalcDeps = EMPTY_DEPS) {
+    const scrollRef = React.useRef(null);
+    const trackRef = React.useRef(null);
+    const thumbRef = React.useRef(null);
+    const [hasContentBelow, setHasContentBelow] = React.useState(false);
+    const [overflows, setOverflows] = React.useState(false);
+    const [thumb, setThumb] = React.useState({ top: 0, height: 0 });
+    const rafIdRef = React.useRef(null);
+    const scheduleUpdate = React.useCallback(() => {
+        if (rafIdRef.current !== null) {
+            return;
+        }
+        rafIdRef.current = requestAnimationFrame(() => {
+            rafIdRef.current = null;
+            const el = scrollRef.current;
+            if (!el) {
+                return;
+            }
+            const { scrollTop, scrollHeight, clientHeight } = el;
+            const isOverflowing = scrollHeight > clientHeight;
+            // `-1` guards against subpixel rounding at the bottom.
+            const notAtBottom = scrollTop + clientHeight < scrollHeight - 1;
+            setOverflows(isOverflowing);
+            setHasContentBelow(isOverflowing && notAtBottom);
+            if (!isOverflowing) {
+                setThumb({ top: 0, height: 0 });
+                return;
+            }
+            const ratio = clientHeight / scrollHeight;
+            const rawHeight = clientHeight * ratio;
+            const height = Math.max(rawHeight, MIN_THUMB_HEIGHT);
+            const maxTop = clientHeight - height;
+            const scrollRatio = scrollHeight - clientHeight > 0 ? scrollTop / (scrollHeight - clientHeight) : 0;
+            const top = maxTop * scrollRatio;
+            setThumb({ top, height });
+        });
+    }, []);
+    React.useEffect(() => {
+        const el = scrollRef.current;
+        if (!el) {
+            return undefined;
+        }
+        scheduleUpdate();
+        if (typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        const observer = new ResizeObserver(scheduleUpdate);
+        observer.observe(el);
+        return () => observer.disconnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scheduleUpdate, ...recalcDeps]);
+    React.useEffect(() => {
+        return () => {
+            if (rafIdRef.current !== null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+        };
+    }, []);
+    // Wheel events do not reach the native scroll layer when the cursor is over
+    // the overlay track — forward them explicitly. `passive: false` is required
+    // so `preventDefault` works in all browsers.
+    React.useLayoutEffect(() => {
+        if (!overflows) {
+            return undefined;
+        }
+        const track = trackRef.current;
+        const scrollEl = scrollRef.current;
+        if (!track || !scrollEl) {
+            return undefined;
+        }
+        const onWheel = (e) => {
+            e.preventDefault();
+            scrollEl.scrollTop += e.deltaY;
+        };
+        track.addEventListener('wheel', onWheel, { passive: false });
+        return () => track.removeEventListener('wheel', onWheel);
+    }, [overflows]);
+    const cancelProgrammaticSmoothScroll = React.useCallback((scrollEl) => {
+        const top = scrollEl.scrollTop;
+        scrollEl.scrollTo({ top, behavior: 'auto' });
+    }, []);
+    const handleThumbPointerDown = React.useCallback((event) => {
+        const scrollEl = scrollRef.current;
+        const thumbEl = thumbRef.current;
+        if (!scrollEl || !thumbEl || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        cancelProgrammaticSmoothScroll(scrollEl);
+        const startY = event.clientY;
+        const startScrollTop = scrollEl.scrollTop;
+        const { scrollHeight, clientHeight } = scrollEl;
+        const thumbHeight = thumbEl.getBoundingClientRect().height;
+        const trackHeight = clientHeight;
+        const maxThumbTop = trackHeight - thumbHeight;
+        const maxScrollTop = scrollHeight - clientHeight;
+        if (maxThumbTop <= 0 || maxScrollTop <= 0) {
+            return;
+        }
+        const handlePointerMove = (moveEvent) => {
+            const deltaY = moveEvent.clientY - startY;
+            const deltaScroll = (deltaY / maxThumbTop) * maxScrollTop;
+            scrollEl.scrollTop = startScrollTop + deltaScroll;
+        };
+        const handlePointerUp = () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+            window.removeEventListener('pointercancel', handlePointerUp);
+        };
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp);
+        window.addEventListener('pointercancel', handlePointerUp);
+    }, [cancelProgrammaticSmoothScroll]);
+    const handleTrackPointerDown = React.useCallback((event) => {
+        const scrollEl = scrollRef.current;
+        const thumbEl = thumbRef.current;
+        if (!scrollEl ||
+            !thumbEl ||
+            event.button !== 0 ||
+            event.target !== event.currentTarget) {
+            return;
+        }
+        cancelProgrammaticSmoothScroll(scrollEl);
+        const trackRect = event.currentTarget.getBoundingClientRect();
+        const thumbHeight = thumbEl.getBoundingClientRect().height;
+        const clickY = event.clientY - trackRect.top;
+        const targetThumbTop = Math.max(0, Math.min(clickY - thumbHeight / 2, trackRect.height - thumbHeight));
+        const maxThumbTop = trackRect.height - thumbHeight;
+        const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight;
+        if (maxThumbTop <= 0 || maxScrollTop <= 0) {
+            return;
+        }
+        // `auto` avoids racing with a subsequent thumb drag (smooth scroll would
+        // still animate while pointer handlers update `scrollTop`).
+        scrollEl.scrollTo({
+            top: (targetThumbTop / maxThumbTop) * maxScrollTop,
+            behavior: 'auto',
+        });
+    }, [cancelProgrammaticSmoothScroll]);
+    return {
+        scrollRef,
+        trackRef,
+        thumbRef,
+        hasContentBelow,
+        overflows,
+        thumb,
+        scheduleUpdate,
+        handleThumbPointerDown,
+        handleTrackPointerDown,
+    };
+}
+
+exports.useScrollableScrollbarSync = useScrollableScrollbarSync;
+//# sourceMappingURL=useScrollableScrollbarSync.js.map

package/build/cjs/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollableScrollbarSync.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollableScrollbarSync.ts"],"sourcesContent":["import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';\n\nconst EMPTY_DEPS: React.DependencyList = [];\n\nconst MIN_THUMB_HEIGHT = 24;\n\ntype ThumbGeometry = {\n    top: number;\n    height: number;\n};\n\ntype UseScrollableScrollbarSyncResult = {\n    scrollRef: React.RefObject<HTMLDivElement>;\n    trackRef: React.RefObject<HTMLDivElement>;\n    thumbRef: React.RefObject<HTMLDivElement>;\n    hasContentBelow: boolean;\n    overflows: boolean;\n    thumb: ThumbGeometry;\n    scheduleUpdate: () => void;\n    handleThumbPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n    handleTrackPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n};\n\n/**\n * Keeps a custom scrollbar thumb and bottom shadow in sync with a native\n * scroll layer. The scroll element handles touch/keyboard; wheel events on the\n * overlay track are forwarded to it (the track sits above the scroller, so\n * they would not scroll otherwise).\n *\n * @param recalcDeps - extra deps that should trigger thumb/shadow recalculation\n * @returns refs, scroll state, thumb geometry, and pointer handlers for the UI\n */\nexport function useScrollableScrollbarSync(\n    recalcDeps: React.DependencyList = EMPTY_DEPS,\n): UseScrollableScrollbarSyncResult {\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const trackRef = useRef<HTMLDivElement>(null);\n    const thumbRef = useRef<HTMLDivElement>(null);\n\n    const [hasContentBelow, setHasContentBelow] = useState(false);\n    const [overflows, setOverflows] = useState(false);\n    const [thumb, setThumb] = useState<ThumbGeometry>({top: 0, height: 0});\n\n    const rafIdRef = useRef<number | null>(null);\n    const scheduleUpdate = useCallback(() => {\n        if (rafIdRef.current !== null) {\n            return;\n        }\n\n        rafIdRef.current = requestAnimationFrame(() => {\n            rafIdRef.current = null;\n\n            const el = scrollRef.current;\n\n            if (!el) {\n                return;\n            }\n\n            const {scrollTop, scrollHeight, clientHeight} = el;\n            const isOverflowing = scrollHeight > clientHeight;\n            // `-1` guards against subpixel rounding at the bottom.\n            const notAtBottom = scrollTop + clientHeight < scrollHeight - 1;\n\n            setOverflows(isOverflowing);\n            setHasContentBelow(isOverflowing && notAtBottom);\n\n            if (!isOverflowing) {\n                setThumb({top: 0, height: 0});\n                return;\n            }\n\n            const ratio = clientHeight / scrollHeight;\n            const rawHeight = clientHeight * ratio;\n            const height = Math.max(rawHeight, MIN_THUMB_HEIGHT);\n            const maxTop = clientHeight - height;\n            const scrollRatio =\n                scrollHeight - clientHeight > 0 ? scrollTop / (scrollHeight - clientHeight) : 0;\n            const top = maxTop * scrollRatio;\n\n            setThumb({top, height});\n        });\n    }, []);\n\n    useEffect(() => {\n        const el = scrollRef.current;\n\n        if (!el) {\n            return undefined;\n        }\n\n        scheduleUpdate();\n\n        if (typeof ResizeObserver === 'undefined') {\n            return undefined;\n        }\n\n        const observer = new ResizeObserver(scheduleUpdate);\n        observer.observe(el);\n        return () => observer.disconnect();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [scheduleUpdate, ...recalcDeps]);\n\n    useEffect(() => {\n        return () => {\n            if (rafIdRef.current !== null) {\n                cancelAnimationFrame(rafIdRef.current);\n                rafIdRef.current = null;\n            }\n        };\n    }, []);\n\n    // Wheel events do not reach the native scroll layer when the cursor is over\n    // the overlay track — forward them explicitly. `passive: false` is required\n    // so `preventDefault` works in all browsers.\n    useLayoutEffect(() => {\n        if (!overflows) {\n            return undefined;\n        }\n\n        const track = trackRef.current;\n        const scrollEl = scrollRef.current;\n\n        if (!track || !scrollEl) {\n            return undefined;\n        }\n\n        const onWheel = (e: WheelEvent) => {\n            e.preventDefault();\n            scrollEl.scrollTop += e.deltaY;\n        };\n\n        track.addEventListener('wheel', onWheel, {passive: false});\n        return () => track.removeEventListener('wheel', onWheel);\n    }, [overflows]);\n\n    const cancelProgrammaticSmoothScroll = useCallback((scrollEl: HTMLDivElement) => {\n        const top = scrollEl.scrollTop;\n        scrollEl.scrollTo({top, behavior: 'auto'});\n    }, []);\n\n    const handleThumbPointerDown = useCallback(\n        (event: React.PointerEvent<HTMLDivElement>) => {\n            const scrollEl = scrollRef.current;\n            const thumbEl = thumbRef.current;\n\n            if (!scrollEl || !thumbEl || event.button !== 0) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            cancelProgrammaticSmoothScroll(scrollEl);\n\n            const startY = event.clientY;\n            const startScrollTop = scrollEl.scrollTop;\n            const {scrollHeight, clientHeight} = scrollEl;\n            const thumbHeight = thumbEl.getBoundingClientRect().height;\n            const trackHeight = clientHeight;\n            const maxThumbTop = trackHeight - thumbHeight;\n            const maxScrollTop = scrollHeight - clientHeight;\n\n            if (maxThumbTop <= 0 || maxScrollTop <= 0) {\n                return;\n            }\n\n            const handlePointerMove = (moveEvent: PointerEvent) => {\n                const deltaY = moveEvent.clientY - startY;\n                const deltaScroll = (deltaY / maxThumbTop) * maxScrollTop;\n                scrollEl.scrollTop = startScrollTop + deltaScroll;\n            };\n\n            const handlePointerUp = () => {\n                window.removeEventListener('pointermove', handlePointerMove);\n                window.removeEventListener('pointerup', handlePointerUp);\n                window.removeEventListener('pointercancel', handlePointerUp);\n            };\n\n            window.addEventListener('pointermove', handlePointerMove);\n            window.addEventListener('pointerup', handlePointerUp);\n            window.addEventListener('pointercancel', handlePointerUp);\n        },\n        [cancelProgrammaticSmoothScroll],\n    );\n\n    const handleTrackPointerDown = useCallback(\n        (event: React.PointerEvent<HTMLDivElement>) => {\n            const scrollEl = scrollRef.current;\n            const thumbEl = thumbRef.current;\n\n            if (\n                !scrollEl ||\n                !thumbEl ||\n                event.button !== 0 ||\n                event.target !== event.currentTarget\n            ) {\n                return;\n            }\n\n            cancelProgrammaticSmoothScroll(scrollEl);\n\n            const trackRect = event.currentTarget.getBoundingClientRect();\n            const thumbHeight = thumbEl.getBoundingClientRect().height;\n            const clickY = event.clientY - trackRect.top;\n            const targetThumbTop = Math.max(\n                0,\n                Math.min(clickY - thumbHeight / 2, trackRect.height - thumbHeight),\n            );\n            const maxThumbTop = trackRect.height - thumbHeight;\n            const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight;\n\n            if (maxThumbTop <= 0 || maxScrollTop <= 0) {\n                return;\n            }\n\n            // `auto` avoids racing with a subsequent thumb drag (smooth scroll would\n            // still animate while pointer handlers update `scrollTop`).\n            scrollEl.scrollTo({\n                top: (targetThumbTop / maxThumbTop) * maxScrollTop,\n                behavior: 'auto',\n            });\n        },\n        [cancelProgrammaticSmoothScroll],\n    );\n\n    return {\n        scrollRef,\n        trackRef,\n        thumbRef,\n        hasContentBelow,\n        overflows,\n        thumb,\n        scheduleUpdate,\n        handleThumbPointerDown,\n        handleTrackPointerDown,\n    };\n}\n"],"names":["useRef","useState","useCallback","useEffect","useLayoutEffect"],"mappings":"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"}

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

@@ -6,6 +6,16 @@ export declare function getPopupItemsHeight<T extends AsideHeaderItem>(items: T[
 export declare function getSelectedItemIndex(compositeItems: AsideHeaderItem[]): number | undefined;
 export declare function getItemsMinHeight(compositeItems: AsideHeaderItem[]): number;
 export declare function getMoreButtonItem(menuMoreTitle?: string): AsideHeaderItem;
+/**
+ * Reorders items so that entries flagged with `afterMoreButton` are pushed
+ * to the end. This keeps the DOM order consistent between `v1` (collapse
+ * into "More") and `v2` (scrollable) modes.
+ *
+ * @param compositeItems items to reorder
+ * @returns new array with `afterMoreButton` items moved to the end, or the
+ *          same reference when no reordering is needed
+ */
+export declare function getReorderedItems(compositeItems: AsideHeaderItem[]): AsideHeaderItem[];
 export declare function getAutosizeListItems(compositeItems: AsideHeaderItem[], height: number, collapseItem: AsideHeaderItem): {
     listItems: AsideHeaderItem[];
     collapseItems: AsideHeaderItem[];

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

@@ -63,6 +63,23 @@ function getMoreButtonItem(menuMoreTitle) {
         iconSize: 18,
     };
 }
+/**
+ * Reorders items so that entries flagged with `afterMoreButton` are pushed
+ * to the end. This keeps the DOM order consistent between `v1` (collapse
+ * into "More") and `v2` (scrollable) modes.
+ *
+ * @param compositeItems items to reorder
+ * @returns new array with `afterMoreButton` items moved to the end, or the
+ *          same reference when no reordering is needed
+ */
+function getReorderedItems(compositeItems) {
+    const afterMoreButtonItems = compositeItems.filter(({ afterMoreButton }) => afterMoreButton);
+    if (afterMoreButtonItems.length === 0) {
+        return compositeItems;
+    }
+    const regularItems = compositeItems.filter(({ afterMoreButton }) => !afterMoreButton);
+    return [...regularItems, ...afterMoreButtonItems];
+}
 function getAutosizeListItems(compositeItems, height, collapseItem) {
     var _a, _b, _c;
     const afterMoreButtonItems = compositeItems.filter(({ afterMoreButton }) => afterMoreButton);
@@ -112,5 +129,6 @@ exports.getItemsMinHeight = getItemsMinHeight;
 exports.getMoreButtonItem = getMoreButtonItem;
 exports.getPopupItemHeight = getPopupItemHeight;
 exports.getPopupItemsHeight = getPopupItemsHeight;
+exports.getReorderedItems = getReorderedItems;
 exports.getSelectedItemIndex = getSelectedItemIndex;
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {ITEM_HEIGHT, POPUP_REGULAR_ITEM_HEIGHT} from '../../../constants';\nimport {AsideHeaderItem} from '../../types';\n\nimport {COLLAPSE_ITEM_ID} from './constants';\n\nexport function getItemHeight(compositeItem: AsideHeaderItem) {\n    switch (compositeItem.type) {\n        case 'action':\n            return 50;\n        case 'divider':\n            return 15;\n\n        default:\n            return ITEM_HEIGHT;\n    }\n}\n\nexport function getPopupItemHeight(compositeItem: AsideHeaderItem) {\n    switch (compositeItem.type) {\n        case 'action':\n            return 50;\n        case 'divider':\n            return 15;\n\n        default:\n            return POPUP_REGULAR_ITEM_HEIGHT;\n    }\n}\n\nexport function getItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n    return items.reduce((sum, item) => sum + getItemHeight(item), 0);\n}\n\nexport function getPopupItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n    return items.reduce((sum, item) => sum + getPopupItemHeight(item), 0);\n}\n\nexport function getSelectedItemIndex(compositeItems: AsideHeaderItem[]) {\n    const index = compositeItems.findIndex(({current}) => Boolean(current));\n    return index === -1 ? undefined : index;\n}\n\nfunction getPinnedItems(compositeItems: AsideHeaderItem[]) {\n    const pinnedItems: AsideHeaderItem[] = [];\n    for (const compositeItem of compositeItems) {\n        if (compositeItem.pinned) {\n            pinnedItems.push(compositeItem);\n        } else if (compositeItem.type === 'divider') {\n            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {\n                pinnedItems.push(compositeItem);\n            }\n        }\n    }\n    return pinnedItems;\n}\n\nexport function getItemsMinHeight(compositeItems: AsideHeaderItem[]) {\n    const pinnedItems = getPinnedItems(compositeItems);\n    const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n\n    return (\n        getItemsHeight(pinnedItems) +\n        getItemsHeight(afterMoreButtonItems) +\n        (pinnedItems.length === compositeItems.length ? 0 : ITEM_HEIGHT)\n    );\n}\n\nexport function getMoreButtonItem(menuMoreTitle?: string): AsideHeaderItem {\n    return {\n        id: COLLAPSE_ITEM_ID,\n        title: menuMoreTitle,\n        icon: Ellipsis,\n        iconSize: 18,\n    };\n}\n\nexport function getAutosizeListItems(\n    compositeItems: AsideHeaderItem[],\n    height: number,\n    collapseItem: AsideHeaderItem,\n): {\n    listItems: AsideHeaderItem[];\n    collapseItems: AsideHeaderItem[];\n} {\n    const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n    const regularItems = compositeItems.filter(({afterMoreButton}) => !afterMoreButton);\n    const listItems = [...regularItems, ...afterMoreButtonItems];\n\n    const allItemsHeight = getItemsHeight(listItems);\n    if (allItemsHeight <= height) {\n        return {listItems, collapseItems: []};\n    }\n\n    const collapseItemHeight = getItemHeight(collapseItem);\n\n    listItems.splice(regularItems.length, 0, collapseItem);\n    const collapseItems: AsideHeaderItem[] = [];\n\n    let listHeight = allItemsHeight + collapseItemHeight;\n    let index = listItems.length;\n    while (listHeight > height) {\n        if (index === 0) {\n            break;\n        }\n        index--;\n\n        const compositeItem = listItems[index];\n        if (\n            compositeItem.pinned ||\n            compositeItem.id === COLLAPSE_ITEM_ID ||\n            compositeItem.afterMoreButton\n        ) {\n            continue;\n        }\n        if (compositeItem.type === 'divider') {\n            if (index + 1 < listItems.length && listItems[index + 1]?.type === 'divider') {\n                listHeight -= getItemHeight(compositeItem);\n                listItems.splice(index, 1);\n            }\n            continue;\n        }\n        listHeight -= getItemHeight(compositeItem);\n        collapseItems.unshift(...listItems.splice(index, 1));\n    }\n    if (\n        listItems[index]?.type === 'divider' &&\n        (index === 0 || listItems[index - 1]?.type === 'divider')\n    ) {\n        listItems.splice(index, 1);\n    }\n\n    return {listItems, collapseItems};\n}\n"],"names":["ITEM_HEIGHT","POPUP_REGULAR_ITEM_HEIGHT","COLLAPSE_ITEM_ID","Ellipsis"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {ITEM_HEIGHT, POPUP_REGULAR_ITEM_HEIGHT} from '../../../constants';\nimport {AsideHeaderItem} from '../../types';\n\nimport {COLLAPSE_ITEM_ID} from './constants';\n\nexport function getItemHeight(compositeItem: AsideHeaderItem) {\n    switch (compositeItem.type) {\n        case 'action':\n            return 50;\n        case 'divider':\n            return 15;\n\n        default:\n            return ITEM_HEIGHT;\n    }\n}\n\nexport function getPopupItemHeight(compositeItem: AsideHeaderItem) {\n    switch (compositeItem.type) {\n        case 'action':\n            return 50;\n        case 'divider':\n            return 15;\n\n        default:\n            return POPUP_REGULAR_ITEM_HEIGHT;\n    }\n}\n\nexport function getItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n    return items.reduce((sum, item) => sum + getItemHeight(item), 0);\n}\n\nexport function getPopupItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n    return items.reduce((sum, item) => sum + getPopupItemHeight(item), 0);\n}\n\nexport function getSelectedItemIndex(compositeItems: AsideHeaderItem[]) {\n    const index = compositeItems.findIndex(({current}) => Boolean(current));\n    return index === -1 ? undefined : index;\n}\n\nfunction getPinnedItems(compositeItems: AsideHeaderItem[]) {\n    const pinnedItems: AsideHeaderItem[] = [];\n    for (const compositeItem of compositeItems) {\n        if (compositeItem.pinned) {\n            pinnedItems.push(compositeItem);\n        } else if (compositeItem.type === 'divider') {\n            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {\n                pinnedItems.push(compositeItem);\n            }\n        }\n    }\n    return pinnedItems;\n}\n\nexport function getItemsMinHeight(compositeItems: AsideHeaderItem[]) {\n    const pinnedItems = getPinnedItems(compositeItems);\n    const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n\n    return (\n        getItemsHeight(pinnedItems) +\n        getItemsHeight(afterMoreButtonItems) +\n        (pinnedItems.length === compositeItems.length ? 0 : ITEM_HEIGHT)\n    );\n}\n\nexport function getMoreButtonItem(menuMoreTitle?: string): AsideHeaderItem {\n    return {\n        id: COLLAPSE_ITEM_ID,\n        title: menuMoreTitle,\n        icon: Ellipsis,\n        iconSize: 18,\n    };\n}\n\n/**\n * Reorders items so that entries flagged with `afterMoreButton` are pushed\n * to the end. This keeps the DOM order consistent between `v1` (collapse\n * into \"More\") and `v2` (scrollable) modes.\n *\n * @param compositeItems items to reorder\n * @returns new array with `afterMoreButton` items moved to the end, or the\n *          same reference when no reordering is needed\n */\nexport function getReorderedItems(compositeItems: AsideHeaderItem[]): AsideHeaderItem[] {\n    const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n\n    if (afterMoreButtonItems.length === 0) {\n        return compositeItems;\n    }\n\n    const regularItems = compositeItems.filter(({afterMoreButton}) => !afterMoreButton);\n\n    return [...regularItems, ...afterMoreButtonItems];\n}\n\nexport function getAutosizeListItems(\n    compositeItems: AsideHeaderItem[],\n    height: number,\n    collapseItem: AsideHeaderItem,\n): {\n    listItems: AsideHeaderItem[];\n    collapseItems: AsideHeaderItem[];\n} {\n    const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n    const regularItems = compositeItems.filter(({afterMoreButton}) => !afterMoreButton);\n    const listItems = [...regularItems, ...afterMoreButtonItems];\n\n    const allItemsHeight = getItemsHeight(listItems);\n    if (allItemsHeight <= height) {\n        return {listItems, collapseItems: []};\n    }\n\n    const collapseItemHeight = getItemHeight(collapseItem);\n\n    listItems.splice(regularItems.length, 0, collapseItem);\n    const collapseItems: AsideHeaderItem[] = [];\n\n    let listHeight = allItemsHeight + collapseItemHeight;\n    let index = listItems.length;\n    while (listHeight > height) {\n        if (index === 0) {\n            break;\n        }\n        index--;\n\n        const compositeItem = listItems[index];\n        if (\n            compositeItem.pinned ||\n            compositeItem.id === COLLAPSE_ITEM_ID ||\n            compositeItem.afterMoreButton\n        ) {\n            continue;\n        }\n        if (compositeItem.type === 'divider') {\n            if (index + 1 < listItems.length && listItems[index + 1]?.type === 'divider') {\n                listHeight -= getItemHeight(compositeItem);\n                listItems.splice(index, 1);\n            }\n            continue;\n        }\n        listHeight -= getItemHeight(compositeItem);\n        collapseItems.unshift(...listItems.splice(index, 1));\n    }\n    if (\n        listItems[index]?.type === 'divider' &&\n        (index === 0 || listItems[index - 1]?.type === 'divider')\n    ) {\n        listItems.splice(index, 1);\n    }\n\n    return {listItems, collapseItems};\n}\n"],"names":["ITEM_HEIGHT","POPUP_REGULAR_ITEM_HEIGHT","COLLAPSE_ITEM_ID","Ellipsis"],"mappings":"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"}

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

@@ -16,7 +16,7 @@ var Panels = require('./Panels.js');
 
 const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
 const FirstPanel = React.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, qa, } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuOverflow, qa, } = AsideHeaderContext.useAsideHeaderInnerContext();
     const visibleMenuItems = useVisibleMenuItems.useVisibleMenuItems();
     const asideRef = React.useRef(null);
     React.useEffect(() => {
@@ -28,7 +28,7 @@ const FirstPanel = React.forwardRef((_props, ref) => {
             customBackground && (React.createElement("div", { className: utils.b('aside-custom-background', customBackgroundClassName) }, customBackground)),
             React.createElement("div", { className: utils.b('aside-content', { ['with-decoration']: headerDecoration }) },
                 React.createElement(Header.Header, null),
-                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React.createElement(CompositeBar.CompositeBar, { menuItemClassName: utils.b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : index.default('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick })) : (React.createElement("div", { className: utils.b('menu-items') })),
+                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React.createElement(CompositeBar.CompositeBar, { menuItemClassName: utils.b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : index.default('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, menuOverflow: menuOverflow })) : (React.createElement("div", { className: utils.b('menu-items') })),
                 React.createElement("div", { className: utils.b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
                     size,
                     compact: Boolean(compact),

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

@@ -1 +1 @@
-{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CompositeBar} from './CompositeBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        menuGroups,\n        qa,\n    } = useAsideHeaderInnerContext();\n    const visibleMenuItems = useVisibleMenuItems();\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    return (\n        <React.Fragment>\n            <div className={b('aside', className)} style={{width: size}} data-qa={qa}>\n                <div className={b('aside-popup-anchor')} ref={asideRef} />\n                {customBackground && (\n                    <div className={b('aside-custom-background', customBackgroundClassName)}>\n                        {customBackground}\n                    </div>\n                )}\n\n                <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n                    <Header />\n                    {visibleMenuItems?.length ? (\n                        <CompositeBar\n                            menuItemClassName={b('menu-item')}\n                            compositeId={MENU_ITEMS_COMPOSITE_ID}\n                            type=\"menu\"\n                            compact={compact}\n                            items={visibleMenuItems}\n                            menuGroups={menuGroups}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\n                        />\n                    ) : (\n                        <div className={b('menu-items')} />\n                    )}\n                    <div className={b('footer')}>\n                        {renderFooter?.({\n                            size,\n                            compact: Boolean(compact),\n                            asideRef,\n                        })}\n                    </div>\n                    {!hideCollapseButton && <CollapseButton />}\n                </div>\n            </div>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["useAsideHeaderInnerContext","useVisibleMenuItems","useRef","setRef","b","Header","CompositeBar","i18n","CollapseButton","Panels"],"mappings":"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"}
+{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CompositeBar} from './CompositeBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        menuGroups,\n        menuOverflow,\n        qa,\n    } = useAsideHeaderInnerContext();\n    const visibleMenuItems = useVisibleMenuItems();\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    return (\n        <React.Fragment>\n            <div className={b('aside', className)} style={{width: size}} data-qa={qa}>\n                <div className={b('aside-popup-anchor')} ref={asideRef} />\n                {customBackground && (\n                    <div className={b('aside-custom-background', customBackgroundClassName)}>\n                        {customBackground}\n                    </div>\n                )}\n\n                <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n                    <Header />\n                    {visibleMenuItems?.length ? (\n                        <CompositeBar\n                            menuItemClassName={b('menu-item')}\n                            compositeId={MENU_ITEMS_COMPOSITE_ID}\n                            type=\"menu\"\n                            compact={compact}\n                            items={visibleMenuItems}\n                            menuGroups={menuGroups}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\n                            menuOverflow={menuOverflow}\n                        />\n                    ) : (\n                        <div className={b('menu-items')} />\n                    )}\n                    <div className={b('footer')}>\n                        {renderFooter?.({\n                            size,\n                            compact: Boolean(compact),\n                            asideRef,\n                        })}\n                    </div>\n                    {!hideCollapseButton && <CollapseButton />}\n                </div>\n            </div>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["useAsideHeaderInnerContext","useVisibleMenuItems","useRef","setRef","b","Header","CompositeBar","i18n","CollapseButton","Panels"],"mappings":"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"}

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

@@ -18,12 +18,26 @@ interface EditMenuProps {
     enableSorting?: boolean;
     onChangeItemsOrder?: (changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;
 }
+/**
+ * Menu overflow behavior.
+ * - `collapse` — extra items collapse under a "More" popup (default).
+ * - `scroll` — all items remain visible inside a scrollable container with a native thin scrollbar.
+ *
+ * In compact mode the menu always falls back to `collapse` regardless of this value
+ * because a scrollbar over icon-only items is awkward.
+ */
+export type AsideHeaderMenuOverflow = 'collapse' | 'scroll';
 interface AsideHeaderGeneralProps extends QAProps {
     logo?: LogoProps;
     className?: string;
     collapseTitle?: string;
     expandTitle?: string;
     menuMoreTitle?: string;
+    /**
+     * @see AsideHeaderMenuOverflow
+     * @default 'collapse'
+     */
+    menuOverflow?: AsideHeaderMenuOverflow;
     topAlert?: TopAlertProps;
     customBackground?: React.ReactNode;
     customBackgroundClassName?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/components/AsideHeader/types.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {DrawerProps, PopupProps, QAProps} from '@gravity-ui/uikit';\n\nimport {RenderContentType} from '../Content';\nimport {LogoProps, MenuGroup, MenuItem, OpenModalSubscriber, TopAlertProps} from '../types';\n\nimport {AsideHeaderContextType} from './AsideHeaderContext';\n\nexport interface PanelItemProps extends DrawerProps {\n    id: string;\n}\n\nexport interface LayoutProps {\n    compact: boolean;\n    className?: string;\n    topAlert?: TopAlertProps;\n}\n\ninterface EditMenuProps {\n    onOpenEditMode?: () => void;\n    onToggleMenuItem?: (changedItem: AsideHeaderItem) => void;\n    onResetSettingsToDefault?: () => void;\n    enableSorting?: boolean;\n    onChangeItemsOrder?: (changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;\n}\n\ninterface AsideHeaderGeneralProps extends QAProps {\n    logo?: LogoProps;\n    className?: string;\n    collapseTitle?: string;\n    expandTitle?: string;\n    menuMoreTitle?: string;\n    topAlert?: TopAlertProps;\n    customBackground?: React.ReactNode;\n    customBackgroundClassName?: string;\n    hideCollapseButton?: boolean;\n    renderContent?: RenderContentType;\n    renderFooter?: (data: {\n        size: number;\n        compact: boolean;\n        asideRef: React.RefObject<HTMLDivElement>;\n    }) => React.ReactNode;\n    collapseButtonWrapper?: (\n        defaultButton: React.ReactNode,\n        data: {\n            compact: boolean;\n            onChangeCompact?: (compact: boolean) => void;\n        },\n    ) => React.ReactNode;\n    editMenuProps?: EditMenuProps;\n    onClosePanel?: () => void;\n    onChangeCompact?: (compact: boolean) => void;\n    onMenuMoreClick?: () => void;\n    onAllPagesClick?: () => void;\n    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;\n}\n\ninterface AsideHeaderDefaultProps {\n    panelItems?: PanelItemProps[];\n    subheaderItems?: AsideHeaderItem[];\n    menuItems?: AsideHeaderItem[];\n    menuGroups?: MenuGroup[];\n    defaultMenuItems?: AsideHeaderItem[];\n    onMenuItemsChanged?: (items: AsideHeaderItem[]) => void;\n    headerDecoration?: boolean;\n}\n\nexport type AsideHeaderInnerProps = AsideHeaderGeneralProps &\n    AsideHeaderDefaultProps &\n    AsideHeaderContextType;\n\nexport interface AsideHeaderProps\n    extends AsideHeaderGeneralProps,\n        LayoutProps,\n        Partial<AsideHeaderDefaultProps> {}\n\nexport enum InnerPanels {\n    AllPages = 'all-pages',\n}\n\nexport interface AsideHeaderItem extends MenuItem {\n    enableTooltip?: boolean;\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    bringForward?: boolean;\n    compact?: boolean;\n\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupVisible?: PopupProps['open'];\n    /**\n     * Floating element anchor ref object\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupRef?: React.RefObject<HTMLElement>;\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupPlacement?: PopupProps['placement'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupOffset?: PopupProps['offset'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupKeepMounted?: PopupProps['keepMounted'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    renderPopupContent?: () => React.ReactNode;\n    /**\n     * This callback will be called when Escape key pressed on keyboard, or click outside was made\n     * This behaviour could be disabled with `disableEscapeKeyDown`\n     * and `disableOutsideClick` options\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    onOpenChangePopup?: PopupProps['onOpenChange'];\n}\n"],"names":["InnerPanels"],"mappings":";;AA6EYA;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFWA,mBAAW,KAAXA,mBAAW,GAEtB,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/components/AsideHeader/types.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {DrawerProps, PopupProps, QAProps} from '@gravity-ui/uikit';\n\nimport {RenderContentType} from '../Content';\nimport {LogoProps, MenuGroup, MenuItem, OpenModalSubscriber, TopAlertProps} from '../types';\n\nimport {AsideHeaderContextType} from './AsideHeaderContext';\n\nexport interface PanelItemProps extends DrawerProps {\n    id: string;\n}\n\nexport interface LayoutProps {\n    compact: boolean;\n    className?: string;\n    topAlert?: TopAlertProps;\n}\n\ninterface EditMenuProps {\n    onOpenEditMode?: () => void;\n    onToggleMenuItem?: (changedItem: AsideHeaderItem) => void;\n    onResetSettingsToDefault?: () => void;\n    enableSorting?: boolean;\n    onChangeItemsOrder?: (changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;\n}\n\n/**\n * Menu overflow behavior.\n * - `collapse` — extra items collapse under a \"More\" popup (default).\n * - `scroll` — all items remain visible inside a scrollable container with a native thin scrollbar.\n *\n * In compact mode the menu always falls back to `collapse` regardless of this value\n * because a scrollbar over icon-only items is awkward.\n */\nexport type AsideHeaderMenuOverflow = 'collapse' | 'scroll';\n\ninterface AsideHeaderGeneralProps extends QAProps {\n    logo?: LogoProps;\n    className?: string;\n    collapseTitle?: string;\n    expandTitle?: string;\n    menuMoreTitle?: string;\n    /**\n     * @see AsideHeaderMenuOverflow\n     * @default 'collapse'\n     */\n    menuOverflow?: AsideHeaderMenuOverflow;\n    topAlert?: TopAlertProps;\n    customBackground?: React.ReactNode;\n    customBackgroundClassName?: string;\n    hideCollapseButton?: boolean;\n    renderContent?: RenderContentType;\n    renderFooter?: (data: {\n        size: number;\n        compact: boolean;\n        asideRef: React.RefObject<HTMLDivElement>;\n    }) => React.ReactNode;\n    collapseButtonWrapper?: (\n        defaultButton: React.ReactNode,\n        data: {\n            compact: boolean;\n            onChangeCompact?: (compact: boolean) => void;\n        },\n    ) => React.ReactNode;\n    editMenuProps?: EditMenuProps;\n    onClosePanel?: () => void;\n    onChangeCompact?: (compact: boolean) => void;\n    onMenuMoreClick?: () => void;\n    onAllPagesClick?: () => void;\n    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;\n}\n\ninterface AsideHeaderDefaultProps {\n    panelItems?: PanelItemProps[];\n    subheaderItems?: AsideHeaderItem[];\n    menuItems?: AsideHeaderItem[];\n    menuGroups?: MenuGroup[];\n    defaultMenuItems?: AsideHeaderItem[];\n    onMenuItemsChanged?: (items: AsideHeaderItem[]) => void;\n    headerDecoration?: boolean;\n}\n\nexport type AsideHeaderInnerProps = AsideHeaderGeneralProps &\n    AsideHeaderDefaultProps &\n    AsideHeaderContextType;\n\nexport interface AsideHeaderProps\n    extends AsideHeaderGeneralProps,\n        LayoutProps,\n        Partial<AsideHeaderDefaultProps> {}\n\nexport enum InnerPanels {\n    AllPages = 'all-pages',\n}\n\nexport interface AsideHeaderItem extends MenuItem {\n    enableTooltip?: boolean;\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    bringForward?: boolean;\n    compact?: boolean;\n\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupVisible?: PopupProps['open'];\n    /**\n     * Floating element anchor ref object\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupRef?: React.RefObject<HTMLElement>;\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupPlacement?: PopupProps['placement'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupOffset?: PopupProps['offset'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupKeepMounted?: PopupProps['keepMounted'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    renderPopupContent?: () => React.ReactNode;\n    /**\n     * This callback will be called when Escape key pressed on keyboard, or click outside was made\n     * This behaviour could be disabled with `disableEscapeKeyDown`\n     * and `disableOutsideClick` options\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    onOpenChangePopup?: PopupProps['onOpenChange'];\n}\n"],"names":["InnerPanels"],"mappings":";;AA4FYA;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFWA,mBAAW,KAAXA,mBAAW,GAEtB,EAAA,CAAA,CAAA;;"}

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

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { MenuGroup } from '../../../types';
-import { AsideHeaderItem } from '../../types';
+import { AsideHeaderItem, AsideHeaderMenuOverflow } from '../../types';
 type CompositeBarProps = {
     type: 'menu' | 'subheader';
     items: AsideHeaderItem[];
@@ -11,6 +11,10 @@ type CompositeBarProps = {
     compact: boolean;
     compositeId?: string;
     menuItemClassName?: string;
+    /**
+     * @see AsideHeaderMenuOverflow
+     */
+    menuOverflow?: AsideHeaderMenuOverflow;
 };
 export declare const CompositeBar: FC<CompositeBarProps>;
 export {};

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

@@ -4,9 +4,10 @@ import { List } from '@gravity-ui/uikit';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { createBlock } from '../../../utils/cn.js';
 import { Item } from './Item/Item.js';
+import { ScrollableWithScrollbar } from './ScrollableWithScrollbar/ScrollableWithScrollbar.js';
 import { COLLAPSE_ITEM_ID } from './constants.js';
 import { getGroupedItems, isGroupHeaderItem } from './grouping.js';
-import { getItemsMinHeight, getAutosizeListItems, getSelectedItemIndex, getItemHeight, getItemsHeight, getMoreButtonItem } from './utils.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);
@@ -43,22 +44,33 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
             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, menuGroups, menuMoreTitle, onItemClick, onMoreClick, compact, compositeId, menuItemClassName, }) => {
+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') {
-        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 })));
-        }))));
+        // `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 }) },

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, 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} from '../../types';\n\nimport {Item} from './Item/Item';\nimport {ItemProps} from './Item/Item.types';\nimport {COLLAPSE_ITEM_ID} from './constants';\nimport {getGroupedItems, isGroupHeaderItem} from './grouping';\nimport {\n    getAutosizeListItems,\n    getItemHeight,\n    getItemsHeight,\n    getItemsMinHeight,\n    getMoreButtonItem,\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\ntype CompositeBarViewProps = CompositeBarProps & {\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}) => {\n    const groupedItems = useMemo(() => getGroupedItems(items, menuGroups), [items, menuGroups]);\n\n    if (groupedItems.length === 0) {\n        return null;\n    }\n    let node: ReactNode;\n\n    if (type === 'menu') {\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    } 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":"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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":"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"}

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

@@ -8,6 +8,7 @@ import { HighlightedItem } from '../HighlightedItem/HighlightedItem.js';
 import { ITEM_TYPE_REGULAR, COLLAPSE_ITEM_ID } from '../constants.js';
 import { isGroupHeaderItem } from '../grouping.js';
 import { ItemPopup } from './ItemPopup.js';
+import { ItemPopupNestContext } from './ItemPopupNestContext.js';
 import { renderItemTitle } from './renderItemTitle.js';
 import styles from './Item.module.scss.js';
 
@@ -29,6 +30,12 @@ const Item = (props) => {
     const iconQa = props.iconQa;
     const collapsedItem = props.id === COLLAPSE_ITEM_ID;
     const isGroupHeader = isGroupHeaderItem(props);
+    let resolvedMenuPopupItems = menuPopupItems;
+    let resolvedMenuPopupTitle = menuPopupTitle;
+    if (isGroupHeader) {
+        resolvedMenuPopupItems = menuPopupItems !== null && menuPopupItems !== undefined ? menuPopupItems : props.groupChildren;
+        resolvedMenuPopupTitle = menuPopupTitle !== null && menuPopupTitle !== undefined ? menuPopupTitle : props.groupPopupTitle;
+    }
     const handleOpenChangePopup = React__default.useCallback((newOpen, event, reason) => {
         var _a;
         if (event instanceof MouseEvent &&
@@ -41,7 +48,19 @@ const Item = (props) => {
         }
         onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(newOpen, event, reason);
     }, [onOpenChangePopup]);
-    if (type === 'divider') {
+    const isDivider = type === 'divider';
+    const hasSubmenuPopup = !isDivider && Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) && (collapsedItem || isGroupHeader);
+    const submenuNest = React__default.useContext(ItemPopupNestContext);
+    React__default.useEffect(() => {
+        if (!submenuNest || !hasSubmenuPopup || !compactNavPopoverOpen) {
+            return undefined;
+        }
+        submenuNest.registerNestedOpen(1);
+        return () => {
+            submenuNest.registerNestedOpen(-1);
+        };
+    }, [submenuNest, hasSubmenuPopup, compactNavPopoverOpen]);
+    if (isDivider) {
         return React__default.createElement("div", { className: b('menu-divider') });
     }
     const compactPopoverDisabled = !enableTooltip || popupVisible || type === 'action';
@@ -50,7 +69,7 @@ const Item = (props) => {
             return iconEl;
         }
         const iconButton = (React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave(), className: b('btn-icon') }, iconEl));
-        if (menuPopupItems === null || menuPopupItems === undefined ? undefined : menuPopupItems.length) {
+        if (resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) {
             return iconButton;
         }
         return (React__default.createElement(ItemPopup, { items: [props], open: compactNavPopoverOpen, onOpenChange: (nextOpen) => {
@@ -80,11 +99,10 @@ const Item = (props) => {
             } }),
             React__default.createElement("div", { className: b('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
             React__default.createElement("div", { className: b('title'), title: typeof title === 'string' ? title : undefined }, titleEl),
-            Boolean(menuPopupItems === null || menuPopupItems === undefined ? undefined : menuPopupItems.length) && (isGroupHeader || collapsedItem) && (React__default.createElement("div", { className: b('chevron') },
+            Boolean(resolvedMenuPopupItems === null || resolvedMenuPopupItems === undefined ? undefined : resolvedMenuPopupItems.length) && (isGroupHeader || collapsedItem) && (React__default.createElement("div", { className: b('chevron') },
                 React__default.createElement(Icon, { data: ChevronRight, size: compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE })))));
-        const expandedMenuRows = menuPopupItems;
-        const showMenuPopup = Boolean(expandedMenuRows === null || expandedMenuRows === undefined ? undefined : expandedMenuRows.length) && (collapsedItem || isGroupHeader);
-        const wrappedTagNode = showMenuPopup && expandedMenuRows ? (React__default.createElement(ItemPopup, { items: expandedMenuRows, title: isGroupHeader ? menuPopupTitle : undefined, open: compactNavPopoverOpen, itemClassName: popupItemClassName, onOpenChange: setCompactNavPopoverOpen, collapsed: collapsedItem ? true : compact, onItemClick: onItemClick }, tagNode)) : (tagNode);
+        const expandedMenuRows = resolvedMenuPopupItems;
+        const wrappedTagNode = hasSubmenuPopup && expandedMenuRows ? (React__default.createElement(ItemPopup, { items: expandedMenuRows, title: isGroupHeader ? resolvedMenuPopupTitle : undefined, open: compactNavPopoverOpen, itemClassName: popupItemClassName, onOpenChange: setCompactNavPopoverOpen, collapsed: collapsedItem ? true : compact, onItemClick: onItemClick }, tagNode)) : (tagNode);
         const createdNode = (React__default.createElement(React__default.Fragment, null,
             wrappedTagNode,
             renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React__default.createElement(Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorElement: anchorRef.current, onOpenChange: handleOpenChangePopup }, renderPopupContent()))));