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

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

@@ -0,0 +1,144 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+const DEFAULT_SCROLLBAR_THUMB_HEIGHT = 20;
+const EMPTY_DEPS = [];
+function useScrollbar(options = {}) {
+    const { recalcDeps = EMPTY_DEPS } = options;
+    const scrollRef = useRef(null);
+    const [scrollState, setScrollState] = useState({
+        scrollTop: 0,
+        scrollHeight: 0,
+        clientHeight: 0,
+    });
+    const thumbDragRef = useRef({ isDragging: false, startY: 0, startScrollTop: 0 });
+    const dragCleanupRef = useRef(null);
+    const updateScrollState = useCallback(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        setScrollState({
+            scrollTop: el.scrollTop,
+            scrollHeight: el.scrollHeight,
+            clientHeight: el.clientHeight,
+        });
+    }, []);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        updateScrollState();
+        const observer = new ResizeObserver(updateScrollState);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [updateScrollState, ...recalcDeps]);
+    const handleThumbMouseDown = useCallback((e) => {
+        e.preventDefault();
+        if (!scrollRef.current)
+            return;
+        thumbDragRef.current = {
+            isDragging: true,
+            startY: e.clientY,
+            startScrollTop: scrollRef.current.scrollTop,
+        };
+        const onMouseMove = (moveEvent) => {
+            if (!thumbDragRef.current.isDragging || !scrollRef.current)
+                return;
+            const { scrollHeight, clientHeight } = scrollRef.current;
+            const trackHeight = clientHeight;
+            const maxScroll = scrollHeight - clientHeight;
+            if (maxScroll <= 0)
+                return;
+            const deltaY = moveEvent.clientY - thumbDragRef.current.startY;
+            const thumbRatio = trackHeight / scrollHeight;
+            const scrollDelta = deltaY / thumbRatio;
+            scrollRef.current.scrollTop = Math.min(maxScroll, Math.max(0, thumbDragRef.current.startScrollTop + scrollDelta));
+            thumbDragRef.current.startY = moveEvent.clientY;
+            thumbDragRef.current.startScrollTop = scrollRef.current.scrollTop;
+        };
+        const removeListeners = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            dragCleanupRef.current = null;
+        };
+        const onMouseUp = () => {
+            thumbDragRef.current.isDragging = false;
+            removeListeners();
+        };
+        dragCleanupRef.current = removeListeners;
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }, []);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = dragCleanupRef.current) === null || _a === undefined ? undefined : _a.call(dragCleanupRef);
+        };
+    }, []);
+    const handleTrackClick = useCallback((e) => {
+        if (!scrollRef.current || e.target !== e.currentTarget)
+            return;
+        const { scrollHeight, clientHeight } = scrollRef.current;
+        const maxScroll = scrollHeight - clientHeight;
+        if (maxScroll <= 0)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const ratio = (e.clientY - rect.top) / rect.height;
+        scrollRef.current.scrollTop = ratio * maxScroll;
+    }, []);
+    const handleScrollbarKeyDown = useCallback((e) => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const { scrollHeight, clientHeight } = el;
+        const maxScroll = scrollHeight - clientHeight;
+        if (maxScroll <= 0)
+            return;
+        const step = Math.max(20, clientHeight * 0.2);
+        let newScrollTop = el.scrollTop;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                newScrollTop = Math.min(maxScroll, el.scrollTop + step);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                newScrollTop = Math.max(0, el.scrollTop - step);
+                break;
+            case 'End':
+                e.preventDefault();
+                newScrollTop = maxScroll;
+                break;
+            case 'Home':
+                e.preventDefault();
+                newScrollTop = 0;
+                break;
+            default:
+                return;
+        }
+        el.scrollTop = newScrollTop;
+        updateScrollState();
+    }, [updateScrollState]);
+    const showScrollbar = scrollState.scrollHeight > scrollState.clientHeight && scrollState.scrollHeight > 0;
+    const thumbRatio = scrollState.scrollHeight > 0 ? scrollState.clientHeight / scrollState.scrollHeight : 0;
+    const thumbHeight = Math.max(DEFAULT_SCROLLBAR_THUMB_HEIGHT, scrollState.clientHeight * thumbRatio);
+    const trackHeight = scrollState.clientHeight;
+    const thumbMaxTop = trackHeight - thumbHeight;
+    const thumbTop = trackHeight > thumbHeight && scrollState.scrollHeight > scrollState.clientHeight
+        ? (scrollState.scrollTop / (scrollState.scrollHeight - scrollState.clientHeight)) *
+            thumbMaxTop
+        : 0;
+    return {
+        scrollRef,
+        scrollState,
+        updateScrollState,
+        showScrollbar,
+        thumbHeight,
+        thumbTop,
+        handleThumbMouseDown,
+        handleTrackClick,
+        handleScrollbarKeyDown,
+    };
+}
+
+export { useScrollbar };
+//# sourceMappingURL=useScrollbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollbar.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/useScrollbar.ts"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState} from 'react';\n\ntype ScrollbarState = {\n    scrollTop: number;\n    scrollHeight: number;\n    clientHeight: number;\n};\n\ntype UseScrollbarOptions = {\n    recalcDeps?: React.DependencyList;\n};\n\nconst DEFAULT_SCROLLBAR_THUMB_HEIGHT = 20;\n\nconst EMPTY_DEPS: React.DependencyList = [];\n\nexport function useScrollbar(options: UseScrollbarOptions = {}) {\n    const {recalcDeps = EMPTY_DEPS} = options;\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const [scrollState, setScrollState] = useState<ScrollbarState>({\n        scrollTop: 0,\n        scrollHeight: 0,\n        clientHeight: 0,\n    });\n    const thumbDragRef = useRef({isDragging: false, startY: 0, startScrollTop: 0});\n    const dragCleanupRef = useRef<(() => void) | null>(null);\n\n    const updateScrollState = useCallback(() => {\n        const el = scrollRef.current;\n\n        if (!el) return;\n\n        setScrollState({\n            scrollTop: el.scrollTop,\n            scrollHeight: el.scrollHeight,\n            clientHeight: el.clientHeight,\n        });\n    }, []);\n\n    useEffect(() => {\n        const el = scrollRef.current;\n\n        if (!el) return;\n\n        updateScrollState();\n\n        const observer = new ResizeObserver(updateScrollState);\n        observer.observe(el);\n\n        return () => observer.disconnect();\n    }, [updateScrollState, ...recalcDeps]);\n\n    const handleThumbMouseDown = useCallback((e: React.MouseEvent) => {\n        e.preventDefault();\n\n        if (!scrollRef.current) return;\n\n        thumbDragRef.current = {\n            isDragging: true,\n            startY: e.clientY,\n            startScrollTop: scrollRef.current.scrollTop,\n        };\n\n        const onMouseMove = (moveEvent: MouseEvent) => {\n            if (!thumbDragRef.current.isDragging || !scrollRef.current) return;\n            const {scrollHeight, clientHeight} = scrollRef.current;\n            const trackHeight = clientHeight;\n            const maxScroll = scrollHeight - clientHeight;\n\n            if (maxScroll <= 0) return;\n\n            const deltaY = moveEvent.clientY - thumbDragRef.current.startY;\n            const thumbRatio = trackHeight / scrollHeight;\n            const scrollDelta = deltaY / thumbRatio;\n\n            scrollRef.current.scrollTop = Math.min(\n                maxScroll,\n                Math.max(0, thumbDragRef.current.startScrollTop + scrollDelta),\n            );\n\n            thumbDragRef.current.startY = moveEvent.clientY;\n            thumbDragRef.current.startScrollTop = scrollRef.current.scrollTop;\n        };\n\n        const removeListeners = () => {\n            document.removeEventListener('mousemove', onMouseMove);\n            document.removeEventListener('mouseup', onMouseUp);\n            dragCleanupRef.current = null;\n        };\n\n        const onMouseUp = () => {\n            thumbDragRef.current.isDragging = false;\n            removeListeners();\n        };\n\n        dragCleanupRef.current = removeListeners;\n        document.addEventListener('mousemove', onMouseMove);\n        document.addEventListener('mouseup', onMouseUp);\n    }, []);\n\n    useEffect(() => {\n        return () => {\n            dragCleanupRef.current?.();\n        };\n    }, []);\n\n    const handleTrackClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        if (!scrollRef.current || e.target !== e.currentTarget) return;\n\n        const {scrollHeight, clientHeight} = scrollRef.current;\n        const maxScroll = scrollHeight - clientHeight;\n\n        if (maxScroll <= 0) return;\n\n        const rect = e.currentTarget.getBoundingClientRect();\n        const ratio = (e.clientY - rect.top) / rect.height;\n\n        scrollRef.current.scrollTop = ratio * maxScroll;\n    }, []);\n\n    const handleScrollbarKeyDown = useCallback(\n        (e: React.KeyboardEvent) => {\n            const el = scrollRef.current;\n            if (!el) return;\n\n            const {scrollHeight, clientHeight} = el;\n            const maxScroll = scrollHeight - clientHeight;\n            if (maxScroll <= 0) return;\n\n            const step = Math.max(20, clientHeight * 0.2);\n            let newScrollTop = el.scrollTop;\n\n            switch (e.key) {\n                case 'ArrowDown':\n                    e.preventDefault();\n                    newScrollTop = Math.min(maxScroll, el.scrollTop + step);\n                    break;\n                case 'ArrowUp':\n                    e.preventDefault();\n                    newScrollTop = Math.max(0, el.scrollTop - step);\n                    break;\n                case 'End':\n                    e.preventDefault();\n                    newScrollTop = maxScroll;\n                    break;\n                case 'Home':\n                    e.preventDefault();\n                    newScrollTop = 0;\n                    break;\n                default:\n                    return;\n            }\n\n            el.scrollTop = newScrollTop;\n            updateScrollState();\n        },\n        [updateScrollState],\n    );\n\n    const showScrollbar =\n        scrollState.scrollHeight > scrollState.clientHeight && scrollState.scrollHeight > 0;\n    const thumbRatio =\n        scrollState.scrollHeight > 0 ? scrollState.clientHeight / scrollState.scrollHeight : 0;\n    const thumbHeight = Math.max(\n        DEFAULT_SCROLLBAR_THUMB_HEIGHT,\n        scrollState.clientHeight * thumbRatio,\n    );\n    const trackHeight = scrollState.clientHeight;\n    const thumbMaxTop = trackHeight - thumbHeight;\n    const thumbTop =\n        trackHeight > thumbHeight && scrollState.scrollHeight > scrollState.clientHeight\n            ? (scrollState.scrollTop / (scrollState.scrollHeight - scrollState.clientHeight)) *\n              thumbMaxTop\n            : 0;\n\n    return {\n        scrollRef,\n        scrollState,\n        updateScrollState,\n        showScrollbar,\n        thumbHeight,\n        thumbTop,\n        handleThumbMouseDown,\n        handleTrackClick,\n        handleScrollbarKeyDown,\n    };\n}\n"],"names":[],"mappings":";;AAYA,MAAM,8BAA8B,GAAG,EAAE;AAEzC,MAAM,UAAU,GAAyB,EAAE;AAE3B,SAAA,YAAY,CAAC,OAAA,GAA+B,EAAE,EAAA;AAC1D,IAAA,MAAM,EAAC,UAAU,GAAG,UAAU,EAAC,GAAG,OAAO;AACzC,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC9C,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAiB;AAC3D,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,YAAY,EAAE,CAAC;AACf,QAAA,YAAY,EAAE,CAAC;AAClB,KAAA,CAAC;AACF,IAAA,MAAM,YAAY,GAAG,MAAM,CAAC,EAAC,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,EAAC,CAAC;AAC9E,IAAA,MAAM,cAAc,GAAG,MAAM,CAAsB,IAAI,CAAC;AAExD,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;AACvC,QAAA,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO;AAE5B,QAAA,IAAI,CAAC,EAAE;YAAE;AAET,QAAA,cAAc,CAAC;YACX,SAAS,EAAE,EAAE,CAAC,SAAS;YACvB,YAAY,EAAE,EAAE,CAAC,YAAY;YAC7B,YAAY,EAAE,EAAE,CAAC,YAAY;AAChC,SAAA,CAAC;KACL,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO;AAE5B,QAAA,IAAI,CAAC,EAAE;YAAE;AAET,QAAA,iBAAiB,EAAE;AAEnB,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,iBAAiB,CAAC;AACtD,QAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;AAEpB,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;KACrC,EAAE,CAAC,iBAAiB,EAAE,GAAG,UAAU,CAAC,CAAC;AAEtC,IAAA,MAAM,oBAAoB,GAAG,WAAW,CAAC,CAAC,CAAmB,KAAI;QAC7D,CAAC,CAAC,cAAc,EAAE;QAElB,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE;QAExB,YAAY,CAAC,OAAO,GAAG;AACnB,YAAA,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,CAAC,CAAC,OAAO;AACjB,YAAA,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS;SAC9C;AAED,QAAA,MAAM,WAAW,GAAG,CAAC,SAAqB,KAAI;YAC1C,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,OAAO;gBAAE;YAC5D,MAAM,EAAC,YAAY,EAAE,YAAY,EAAC,GAAG,SAAS,CAAC,OAAO;YACtD,MAAM,WAAW,GAAG,YAAY;AAChC,YAAA,MAAM,SAAS,GAAG,YAAY,GAAG,YAAY;YAE7C,IAAI,SAAS,IAAI,CAAC;gBAAE;YAEpB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM;AAC9D,YAAA,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY;AAC7C,YAAA,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU;YAEvC,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAClC,SAAS,EACT,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,cAAc,GAAG,WAAW,CAAC,CACjE;YAED,YAAY,CAAC,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,OAAO;YAC/C,YAAY,CAAC,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS;AACrE,SAAC;QAED,MAAM,eAAe,GAAG,MAAK;AACzB,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC;AACtD,YAAA,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC;AAClD,YAAA,cAAc,CAAC,OAAO,GAAG,IAAI;AACjC,SAAC;QAED,MAAM,SAAS,GAAG,MAAK;AACnB,YAAA,YAAY,CAAC,OAAO,CAAC,UAAU,GAAG,KAAK;AACvC,YAAA,eAAe,EAAE;AACrB,SAAC;AAED,QAAA,cAAc,CAAC,OAAO,GAAG,eAAe;AACxC,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC;AACnD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC;KAClD,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;;AACR,YAAA,CAAA,EAAA,GAAA,cAAc,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,cAAA,CAAI;AAC9B,SAAC;KACJ,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAmC,KAAI;QACzE,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE;QAExD,MAAM,EAAC,YAAY,EAAE,YAAY,EAAC,GAAG,SAAS,CAAC,OAAO;AACtD,QAAA,MAAM,SAAS,GAAG,YAAY,GAAG,YAAY;QAE7C,IAAI,SAAS,IAAI,CAAC;YAAE;QAEpB,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,CAAC,qBAAqB,EAAE;AACpD,QAAA,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM;QAElD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,KAAK,GAAG,SAAS;KAClD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,sBAAsB,GAAG,WAAW,CACtC,CAAC,CAAsB,KAAI;AACvB,QAAA,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO;AAC5B,QAAA,IAAI,CAAC,EAAE;YAAE;AAET,QAAA,MAAM,EAAC,YAAY,EAAE,YAAY,EAAC,GAAG,EAAE;AACvC,QAAA,MAAM,SAAS,GAAG,YAAY,GAAG,YAAY;QAC7C,IAAI,SAAS,IAAI,CAAC;YAAE;AAEpB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,YAAY,GAAG,GAAG,CAAC;AAC7C,QAAA,IAAI,YAAY,GAAG,EAAE,CAAC,SAAS;AAE/B,QAAA,QAAQ,CAAC,CAAC,GAAG;AACT,YAAA,KAAK,WAAW;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC;gBACvD;AACJ,YAAA,KAAK,SAAS;gBACV,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC;gBAC/C;AACJ,YAAA,KAAK,KAAK;gBACN,CAAC,CAAC,cAAc,EAAE;gBAClB,YAAY,GAAG,SAAS;gBACxB;AACJ,YAAA,KAAK,MAAM;gBACP,CAAC,CAAC,cAAc,EAAE;gBAClB,YAAY,GAAG,CAAC;gBAChB;AACJ,YAAA;gBACI;;AAGR,QAAA,EAAE,CAAC,SAAS,GAAG,YAAY;AAC3B,QAAA,iBAAiB,EAAE;AACvB,KAAC,EACD,CAAC,iBAAiB,CAAC,CACtB;AAED,IAAA,MAAM,aAAa,GACf,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,IAAI,WAAW,CAAC,YAAY,GAAG,CAAC;IACvF,MAAM,UAAU,GACZ,WAAW,CAAC,YAAY,GAAG,CAAC,GAAG,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,GAAG,CAAC;AAC1F,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CACxB,8BAA8B,EAC9B,WAAW,CAAC,YAAY,GAAG,UAAU,CACxC;AACD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY;AAC5C,IAAA,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW;AAC7C,IAAA,MAAM,QAAQ,GACV,WAAW,GAAG,WAAW,IAAI,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC;AAChE,UAAE,CAAC,WAAW,CAAC,SAAS,IAAI,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC;YAC9E;UACA,CAAC;IAEX,OAAO;QACH,SAAS;QACT,WAAW;QACX,iBAAiB;QACjB,aAAa;QACb,WAAW;QACX,QAAQ;QACR,oBAAoB;QACpB,gBAAgB;QAChB,sBAAsB;KACzB;AACL;;;;"}

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

@@ -1,4 +1,6 @@
 import { AsideHeaderItem, MenuItemsWithGroups } from '../../types';
-export declare function getItemHeight(compositeItem: MenuItemsWithGroups): number;
-export declare function getItemsHeight<T extends AsideHeaderItem>(items: T[]): number;
+export declare function getItemHeight(compositeItem: MenuItemsWithGroups, isCompactMode?: boolean): number;
+export declare function getItemsHeight<T extends AsideHeaderItem>(items: T[], isCompactMode?: boolean): number;
 export declare function getSelectedItemIndex(compositeItems: AsideHeaderItem[]): number | undefined;
+export declare function getVisibleItemsWithFilteredDividers(items: MenuItemsWithGroups[], allPagesId?: string): MenuItemsWithGroups[];
+export declare function filterRedundantDividers<T extends MenuItemsWithGroups>(items: T[], allPagesId?: string): T[];

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

@@ -1,14 +1,14 @@
-import { ITEM_HEIGHT } from '../../../constants.js';
+import { ITEM_HEIGHT_COMPACT, ITEM_HEIGHT, ITEM_GAP } from '../../../constants.js';
 import { getGroupBlockHeight } from '../../utils/getGroupHeight.js';
 
-function getGroupHeight(compositeItem) {
+function getGroupHeight(compositeItem, isCompactMode) {
     const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;
-    return getGroupBlockHeight(visibleGroupItems);
+    return getGroupBlockHeight(visibleGroupItems, isCompactMode);
 }
-function getItemHeight(compositeItem) {
+function getItemHeight(compositeItem, isCompactMode) {
     var _a;
     if ('items' in compositeItem && compositeItem.items && ((_a = compositeItem.items) === null || _a === undefined ? undefined : _a.length) > 0) {
-        return getGroupHeight(compositeItem);
+        return getGroupHeight(compositeItem, isCompactMode);
     }
     switch (compositeItem.type) {
         case 'action':
@@ -16,16 +16,64 @@ function getItemHeight(compositeItem) {
         case 'divider':
             return 15;
         default:
-            return ITEM_HEIGHT;
+            return isCompactMode ? ITEM_HEIGHT_COMPACT : ITEM_HEIGHT;
     }
 }
-function getItemsHeight(items) {
-    return items.reduce((sum, item) => sum + getItemHeight(item), 0);
+function getItemsHeight(items, isCompactMode) {
+    const gaps = items.length > 1 ? (items.length - 1) * ITEM_GAP : 0;
+    return items.reduce((sum, item) => sum + getItemHeight(item, isCompactMode), 0) + gaps;
 }
 function getSelectedItemIndex(compositeItems) {
     const index = compositeItems.findIndex(({ current }) => Boolean(current));
     return index === -1 ? undefined : index;
 }
+/** Removes consecutive dividers so that at most one divider is shown between other items. */
+function filterConsecutiveDividers(items) {
+    return items.filter((item, index) => {
+        if (item.type !== 'divider') {
+            return true;
+        }
+        const prev = items[index - 1];
+        return (prev === null || prev === undefined ? undefined : prev.type) !== 'divider';
+    });
+}
+/** Removes dividers from the start and end of the list. */
+function filterLeadingAndTrailingDividers(items) {
+    const firstNonDividerIndex = items.findIndex((item) => item.type !== 'divider');
+    if (firstNonDividerIndex === -1) {
+        return [];
+    }
+    let lastNonDividerIndex = items.length - 1;
+    while (lastNonDividerIndex >= firstNonDividerIndex &&
+        items[lastNonDividerIndex].type === 'divider') {
+        lastNonDividerIndex--;
+    }
+    if (lastNonDividerIndex < firstNonDividerIndex) {
+        return [];
+    }
+    return items.slice(firstNonDividerIndex, lastNonDividerIndex + 1);
+}
+function getVisibleItemsWithFilteredDividers(items, allPagesId) {
+    const visible = items
+        .filter((item) => !item.hidden)
+        .map((item) => {
+        if ('items' in item && item.items) {
+            return Object.assign(Object.assign({}, item), { items: filterRedundantDividers(item.items.filter((nested) => !nested.hidden), allPagesId) });
+        }
+        return item;
+    });
+    return filterRedundantDividers(visible, allPagesId);
+}
+function filterRedundantDividers(items, allPagesId) {
+    const nonDividers = items.filter((item) => item.type !== 'divider');
+    const hasNoNonDividers = nonDividers.length === 0;
+    const isOnlyAllPagesItem = nonDividers.length === 1 && allPagesId !== undefined && nonDividers[0].id === allPagesId;
+    const hasNoRealContent = hasNoNonDividers || isOnlyAllPagesItem;
+    if (hasNoRealContent) {
+        return nonDividers;
+    }
+    return filterLeadingAndTrailingDividers(filterConsecutiveDividers(items));
+}
 
-export { getItemHeight, getItemsHeight, getSelectedItemIndex };
+export { filterRedundantDividers, getItemHeight, getItemsHeight, getSelectedItemIndex, getVisibleItemsWithFilteredDividers };
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {ITEM_HEIGHT} from '../../../constants';\nimport {AsideHeaderItem, GroupedMenuItem, MenuItemsWithGroups} from '../../types';\nimport {getGroupBlockHeight} from '../../utils/getGroupHeight';\n\nfunction getGroupHeight(compositeItem: GroupedMenuItem) {\n    const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;\n\n    return getGroupBlockHeight(visibleGroupItems);\n}\n\nexport function getItemHeight(compositeItem: MenuItemsWithGroups) {\n    if ('items' in compositeItem && compositeItem.items && compositeItem.items?.length > 0) {\n        return getGroupHeight(compositeItem);\n    }\n\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 getItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n    return items.reduce((sum, item) => sum + getItemHeight(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"],"names":[],"mappings":";;;AAIA,SAAS,cAAc,CAAC,aAA8B,EAAA;AAClD,IAAA,MAAM,iBAAiB,GAAG,aAAa,CAAC,WAAW,GAAG,EAAE,GAAG,aAAa,CAAC,KAAK;AAE9E,IAAA,OAAO,mBAAmB,CAAC,iBAAiB,CAAC;AACjD;AAEM,SAAU,aAAa,CAAC,aAAkC,EAAA;;AAC5D,IAAA,IAAI,OAAO,IAAI,aAAa,IAAI,aAAa,CAAC,KAAK,IAAI,CAAA,CAAA,EAAA,GAAA,aAAa,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM,IAAG,CAAC,EAAE;AACpF,QAAA,OAAO,cAAc,CAAC,aAAa,CAAC;;AAGxC,IAAA,QAAQ,aAAa,CAAC,IAAI;AACtB,QAAA,KAAK,QAAQ;AACT,YAAA,OAAO,EAAE;AACb,QAAA,KAAK,SAAS;AACV,YAAA,OAAO,EAAE;AAEb,QAAA;AACI,YAAA,OAAO,WAAW;;AAE9B;AAEM,SAAU,cAAc,CAA4B,KAAU,EAAA;IAChE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpE;AAEM,SAAU,oBAAoB,CAAC,cAAiC,EAAA;AAClE,IAAA,MAAM,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,EAAC,OAAO,EAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AACvE,IAAA,OAAO,KAAK,KAAK,EAAE,GAAG,SAAS,GAAG,KAAK;AAC3C;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {ITEM_GAP, ITEM_HEIGHT, ITEM_HEIGHT_COMPACT} from '../../../constants';\nimport {AsideHeaderItem, GroupedMenuItem, MenuItemsWithGroups} from '../../types';\nimport {getGroupBlockHeight} from '../../utils/getGroupHeight';\n\nfunction getGroupHeight(compositeItem: GroupedMenuItem, isCompactMode?: boolean) {\n    const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;\n\n    return getGroupBlockHeight(visibleGroupItems, isCompactMode);\n}\n\nexport function getItemHeight(compositeItem: MenuItemsWithGroups, isCompactMode?: boolean) {\n    if ('items' in compositeItem && compositeItem.items && compositeItem.items?.length > 0) {\n        return getGroupHeight(compositeItem, isCompactMode);\n    }\n\n    switch (compositeItem.type) {\n        case 'action':\n            return 50;\n        case 'divider':\n            return 15;\n\n        default:\n            return isCompactMode ? ITEM_HEIGHT_COMPACT : ITEM_HEIGHT;\n    }\n}\n\nexport function getItemsHeight<T extends AsideHeaderItem>(items: T[], isCompactMode?: boolean) {\n    const gaps = items.length > 1 ? (items.length - 1) * ITEM_GAP : 0;\n\n    return items.reduce((sum, item) => sum + getItemHeight(item, isCompactMode), 0) + gaps;\n}\n\nexport function getSelectedItemIndex(compositeItems: AsideHeaderItem[]) {\n    const index = compositeItems.findIndex(({current}) => Boolean(current));\n    return index === -1 ? undefined : index;\n}\n\n/** Removes consecutive dividers so that at most one divider is shown between other items. */\nfunction filterConsecutiveDividers<T extends AsideHeaderItem>(items: T[]): T[] {\n    return items.filter((item, index) => {\n        if (item.type !== 'divider') {\n            return true;\n        }\n\n        const prev = items[index - 1];\n\n        return prev?.type !== 'divider';\n    });\n}\n\n/** Removes dividers from the start and end of the list. */\nfunction filterLeadingAndTrailingDividers<T extends MenuItemsWithGroups>(items: T[]): T[] {\n    const firstNonDividerIndex = items.findIndex((item) => item.type !== 'divider');\n\n    if (firstNonDividerIndex === -1) {\n        return [];\n    }\n\n    let lastNonDividerIndex = items.length - 1;\n\n    while (\n        lastNonDividerIndex >= firstNonDividerIndex &&\n        items[lastNonDividerIndex].type === 'divider'\n    ) {\n        lastNonDividerIndex--;\n    }\n\n    if (lastNonDividerIndex < firstNonDividerIndex) {\n        return [];\n    }\n    return items.slice(firstNonDividerIndex, lastNonDividerIndex + 1);\n}\n\nexport function getVisibleItemsWithFilteredDividers(\n    items: MenuItemsWithGroups[],\n    allPagesId?: string,\n) {\n    const visible = items\n        .filter((item) => !item.hidden)\n        .map((item) => {\n            if ('items' in item && item.items) {\n                return {\n                    ...item,\n                    items: filterRedundantDividers(\n                        item.items.filter((nested) => !nested.hidden),\n                        allPagesId,\n                    ),\n                };\n            }\n            return item;\n        });\n\n    return filterRedundantDividers(visible, allPagesId);\n}\n\nexport function filterRedundantDividers<T extends MenuItemsWithGroups>(\n    items: T[],\n    allPagesId?: string,\n) {\n    const nonDividers = items.filter((item) => item.type !== 'divider');\n    const hasNoNonDividers = nonDividers.length === 0;\n    const isOnlyAllPagesItem =\n        nonDividers.length === 1 && allPagesId !== undefined && nonDividers[0].id === allPagesId;\n    const hasNoRealContent = hasNoNonDividers || isOnlyAllPagesItem;\n\n    if (hasNoRealContent) {\n        return nonDividers;\n    }\n\n    return filterLeadingAndTrailingDividers(filterConsecutiveDividers(items));\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React__default, { useRef } from 'react';
+import React__default, { useRef, useCallback } from 'react';
 import { setRef } from '@gravity-ui/uikit';
 import { CSSTransition } from 'react-transition-group';
 import { ASIDE_HEADER_EXPAND_TRANSITION_DELAY } from '../../constants.js';
@@ -6,6 +6,7 @@ import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
 import { b } from '../utils.js';
 import { useGroupedMenuItems } from './AllPagesPanel/useGroupedMenuItems.js';
 import { CompositeBar } from './CompositeBar/CompositeBar.js';
+import { FooterBar } from './FooterBar/FooterBar.js';
 import { Header } from './Header.js';
 import { Panels } from './Panels.js';
 
@@ -18,26 +19,45 @@ const asideTransitionClassNames = {
     exitActive: b('aside-transition-exit-active'),
 };
 const FirstPanel = React__default.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, multipleTooltip, onMenuMoreClick, renderFooter, onToggleGroupCollapsed, compact, customBackground, customBackgroundClassName, className, menuItems, menuGroups, qa, onExpand, onFold, isExpanded, } = useAsideHeaderInnerContext();
+    const { size, onItemClick, headerDecoration, onMenuMoreClick, renderFooter, onToggleGroupCollapsed, renderFooterAfter, pinned, customBackground, customBackgroundClassName, className, menuItems, menuGroups, qa, onExpand, onFold, setCollapseBlocker, isExpanded, isCompactMode, } = useAsideHeaderInnerContext();
     const flatListItems = useGroupedMenuItems(menuItems, menuGroups);
     const asideRef = useRef(null);
     React__default.useEffect(() => {
         setRef(ref, asideRef.current);
     }, [ref]);
-    const isExpandedByHover = compact && isExpanded;
+    const isExpandedByHover = !pinned && isExpanded;
+    const footerResult = renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
+        size,
+        isExpanded,
+        isPinned: pinned,
+        asideRef,
+        isCompactMode,
+    });
+    const canRenderFooterInHorizontalMode = Array.isArray(footerResult) && footerResult.length > 1;
+    const renderFooterContent = useCallback(() => {
+        if (canRenderFooterInHorizontalMode) {
+            return (React__default.createElement(FooterBar, { isPinned: pinned, isExpanded: isExpanded, renderAfter: renderFooterAfter, setCollapseBlocker: setCollapseBlocker }, footerResult));
+        }
+        return footerResult;
+    }, [
+        footerResult,
+        pinned,
+        isExpanded,
+        canRenderFooterInHorizontalMode,
+        setCollapseBlocker,
+        renderFooterAfter,
+    ]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(CSSTransition, { in: isExpandedByHover, timeout: ASIDE_HEADER_EXPAND_TRANSITION_DELAY, classNames: asideTransitionClassNames },
-            React__default.createElement("div", { className: b('aside', className), style: { width: size }, "data-qa": qa, onMouseEnter: onExpand, onMouseLeave: onFold },
+            React__default.createElement("div", { className: b('aside', { ['compact-mode']: isCompactMode }, className), style: { width: size }, "data-qa": qa, onMouseEnter: onExpand, onMouseLeave: onFold },
                 React__default.createElement("div", { className: b('aside-popup-anchor'), ref: asideRef }),
                 customBackground && (React__default.createElement("div", { className: b('aside-custom-background', customBackgroundClassName) }, customBackground)),
                 React__default.createElement("div", { className: b('aside-content', { ['with-decoration']: headerDecoration }) },
                     React__default.createElement(Header, null),
-                    (flatListItems === null || flatListItems === undefined ? undefined : flatListItems.length) ? (React__default.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, className: b('menu-items'), groupClassName: b('menu-items-group'), menuItemClassName: b('menu-item'), compact: !isExpanded, type: "menu", items: flatListItems, onItemClick: onItemClick, onMoreClick: onMenuMoreClick, onToggleGroupCollapsed: onToggleGroupCollapsed, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b('menu-items') })),
-                    React__default.createElement("div", { className: b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
-                        size,
-                        compact: Boolean(!isExpanded),
-                        asideRef,
-                    }))))),
+                    (flatListItems === null || flatListItems === undefined ? undefined : flatListItems.length) ? (React__default.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, className: b('menu-items'), menuItemClassName: b('menu-item'), isExpanded: isExpanded, type: "menu", items: flatListItems, onItemClick: onItemClick, onMoreClick: onMenuMoreClick, onToggleGroupCollapsed: onToggleGroupCollapsed, isCompactMode: isCompactMode, setCollapseBlocker: setCollapseBlocker })) : (React__default.createElement("div", { className: b('menu-items') })),
+                    React__default.createElement("div", { className: b('footer', {
+                            horizontal: canRenderFooterInHorizontalMode && pinned,
+                        }) }, renderFooterContent())))),
         React__default.createElement(Panels, null)));
 });
 FirstPanel.displayName = 'FirstPanel';

package/build/esm/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';\nimport {CSSTransition} from 'react-transition-group';\n\nimport {ASIDE_HEADER_EXPAND_TRANSITION_DELAY} from '../../constants';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nimport {useGroupedMenuItems} from './AllPagesPanel/useGroupedMenuItems';\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\nconst asideTransitionClassNames = {\n    enter: b('aside-transition-enter'),\n    enterActive: b('aside-transition-enter-active'),\n    enterDone: b('aside-transition-enter-done'),\n    exit: b('aside-transition-exit'),\n    exitActive: b('aside-transition-exit-active'),\n};\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        multipleTooltip,\n        onMenuMoreClick,\n        renderFooter,\n        onToggleGroupCollapsed,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        menuItems,\n        menuGroups,\n        qa,\n        onExpand,\n        onFold,\n        isExpanded,\n    } = useAsideHeaderInnerContext();\n\n    const flatListItems = useGroupedMenuItems(menuItems, menuGroups);\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    const isExpandedByHover = compact && isExpanded;\n\n    return (\n        <React.Fragment>\n            <CSSTransition\n                in={isExpandedByHover}\n                timeout={ASIDE_HEADER_EXPAND_TRANSITION_DELAY}\n                classNames={asideTransitionClassNames}\n            >\n                <div\n                    className={b('aside', className)}\n                    style={{width: size}}\n                    data-qa={qa}\n                    onMouseEnter={onExpand}\n                    onMouseLeave={onFold}\n                >\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\n                        {flatListItems?.length ? (\n                            <CompositeBar\n                                compositeId={MENU_ITEMS_COMPOSITE_ID}\n                                className={b('menu-items')}\n                                groupClassName={b('menu-items-group')}\n                                menuItemClassName={b('menu-item')}\n                                compact={!isExpanded}\n                                type=\"menu\"\n                                items={flatListItems}\n                                onItemClick={onItemClick}\n                                onMoreClick={onMenuMoreClick}\n                                onToggleGroupCollapsed={onToggleGroupCollapsed}\n                                multipleTooltip={multipleTooltip}\n                            />\n                        ) : (\n                            <div className={b('menu-items')} />\n                        )}\n\n                        <div className={b('footer')}>\n                            {renderFooter?.({\n                                size,\n                                compact: Boolean(!isExpanded),\n                                asideRef,\n                            })}\n                        </div>\n                    </div>\n                </div>\n            </CSSTransition>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useCallback, useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\nimport {CSSTransition} from 'react-transition-group';\n\nimport {ASIDE_HEADER_EXPAND_TRANSITION_DELAY} from '../../constants';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nimport {useGroupedMenuItems} from './AllPagesPanel/useGroupedMenuItems';\nimport {CompositeBar} from './CompositeBar';\nimport {FooterBar} from './FooterBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nconst asideTransitionClassNames = {\n    enter: b('aside-transition-enter'),\n    enterActive: b('aside-transition-enter-active'),\n    enterDone: b('aside-transition-enter-done'),\n    exit: b('aside-transition-exit'),\n    exitActive: b('aside-transition-exit-active'),\n};\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        onMenuMoreClick,\n        renderFooter,\n        onToggleGroupCollapsed,\n        renderFooterAfter,\n        pinned,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        menuItems,\n        menuGroups,\n        qa,\n        onExpand,\n        onFold,\n        setCollapseBlocker,\n        isExpanded,\n        isCompactMode,\n    } = useAsideHeaderInnerContext();\n\n    const flatListItems = useGroupedMenuItems(menuItems, menuGroups);\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    const isExpandedByHover = !pinned && isExpanded;\n    const footerResult = renderFooter?.({\n        size,\n        isExpanded,\n        isPinned: pinned,\n        asideRef,\n        isCompactMode,\n    });\n    const canRenderFooterInHorizontalMode = Array.isArray(footerResult) && footerResult.length > 1;\n\n    const renderFooterContent = useCallback(() => {\n        if (canRenderFooterInHorizontalMode) {\n            return (\n                <FooterBar\n                    isPinned={pinned}\n                    isExpanded={isExpanded}\n                    renderAfter={renderFooterAfter}\n                    setCollapseBlocker={setCollapseBlocker}\n                >\n                    {footerResult}\n                </FooterBar>\n            );\n        }\n\n        return footerResult;\n    }, [\n        footerResult,\n        pinned,\n        isExpanded,\n        canRenderFooterInHorizontalMode,\n        setCollapseBlocker,\n        renderFooterAfter,\n    ]);\n\n    return (\n        <React.Fragment>\n            <CSSTransition\n                in={isExpandedByHover}\n                timeout={ASIDE_HEADER_EXPAND_TRANSITION_DELAY}\n                classNames={asideTransitionClassNames}\n            >\n                <div\n                    className={b('aside', {['compact-mode']: isCompactMode}, className)}\n                    style={{width: size}}\n                    data-qa={qa}\n                    onMouseEnter={onExpand}\n                    onMouseLeave={onFold}\n                >\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\n                        {flatListItems?.length ? (\n                            <CompositeBar\n                                compositeId={MENU_ITEMS_COMPOSITE_ID}\n                                className={b('menu-items')}\n                                menuItemClassName={b('menu-item')}\n                                isExpanded={isExpanded}\n                                type=\"menu\"\n                                items={flatListItems}\n                                onItemClick={onItemClick}\n                                onMoreClick={onMenuMoreClick}\n                                onToggleGroupCollapsed={onToggleGroupCollapsed}\n                                isCompactMode={isCompactMode}\n                                setCollapseBlocker={setCollapseBlocker}\n                            />\n                        ) : (\n                            <div className={b('menu-items')} />\n                        )}\n\n                        <div\n                            className={b('footer', {\n                                horizontal: canRenderFooterInHorizontalMode && pinned,\n                            })}\n                        >\n                            {renderFooterContent()}\n                        </div>\n                    </div>\n                </div>\n            </CSSTransition>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1 @@
+.FooterBar-module__gn-footer-bar___dunXC, .FooterBar-module__gn-footer-bar__items___xBsUq{display:flex;flex-direction:column;width:100%}.FooterBar-module__gn-footer-bar__items_horizontal___DEeK6{border-bottom:1px solid var(--gn-aside-bottom-divider-color,var(--g-color-line-generic));border-top:1px solid var(--gn-aside-bottom-divider-color,var(--g-color-line-generic));flex-direction:row;height:var(--_--item-height)}.FooterBar-module__gn-footer-bar__item___KAJSe{align-items:center;display:flex;justify-content:center}.FooterBar-module__gn-footer-bar__items_horizontal___DEeK6 .FooterBar-module__gn-footer-bar__item___KAJSe{flex:1 1 0;height:100%;min-width:0}.FooterBar-module__gn-footer-bar__items_horizontal___DEeK6 .FooterBar-module__gn-footer-bar__item___KAJSe:not(:last-child){border-right:1px solid var(--gn-aside-bottom-divider-color,var(--g-color-line-generic))}.FooterBar-module__gn-footer-bar__items_vertical___3A7jw .FooterBar-module__gn-footer-bar__item___KAJSe:not(:last-child){margin-bottom:2px}.FooterBar-module__gn-footer-bar__items___xBsUq:not(.FooterBar-module__gn-footer-bar__items_horizontal___DEeK6) .FooterBar-module__gn-footer-bar__item___KAJSe{height:var(--_--item-height);margin-bottom:2px;width:100%}.FooterBar-module__gn-footer-bar__items___xBsUq:not(.FooterBar-module__gn-footer-bar__items_horizontal___DEeK6) .FooterBar-module__gn-footer-bar__item___KAJSe:last-child{margin-bottom:0}.FooterBar-module__gn-footer-bar__after___yB8To{height:var(--_--item-height);width:100%}.FooterBar-module__gn-footer-bar__after_horizontal___t4KyN{box-sizing:border-box;margin-block:var(--g-spacing-2);padding-inline:var(--_--item-margin-inline)}.FooterBar-module__gn-footer-bar__dropdown-switcher___Czw-L{width:100%}.FooterBar-module__gn-footer-bar__dropdown-popup___nWoMR{--_--item-height:36px;padding:var(--g-spacing-1)}.FooterBar-module__gn-footer-bar__dropdown-popup___nWoMR .g-menu .g-menu__list-item .g-menu__item{height:var(--_--item-height);padding:0}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SetCollapseBlocker } from '../../types';
+export interface FooterBarProps {
+    /** Array of footer elements (ReactNode[]) */
+    children: React.ReactNode[];
+    /** Render function for additional content after items (e.g., user profile). Receives options with setCollapseBlocker. */
+    renderAfter?: (options?: {
+        setCollapseBlocker?: SetCollapseBlocker;
+    }) => React.ReactNode;
+    /** Registers a temporary block on collapse (e.g. while dropdown is open). Returns release function. */
+    setCollapseBlocker?: SetCollapseBlocker;
+    /** When `true`, the navigation is pinned (expanded). Items render horizontally. */
+    isPinned: boolean;
+    /** When `true`, the navigation is expanded (hover or pinned). */
+    isExpanded: boolean;
+    /** Maximum number of visible items before showing "more" button. Default: 5 */
+    maxVisibleItems?: number;
+}
+export declare const FooterBar: React.NamedExoticComponent<FooterBarProps>;

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

@@ -0,0 +1,93 @@
+import './FooterBar.css';
+import React__default, { memo, useCallback, useMemo } from 'react';
+import { Ellipsis } from '@gravity-ui/icons';
+import { Tooltip, DropdownMenu } from '@gravity-ui/uikit';
+import { ASIDE_HEADER_EXPAND_DELAY } from '../../../constants.js';
+import { createBlock } from '../../../utils/cn.js';
+import { FooterLayoutContext } from '../../FooterLayoutContext.js';
+import i18n from '../../i18n/index.js';
+import { FooterItem } from '../FooterItem/FooterItem.js';
+import { MAX_VISIBLE_ITEMS } from './constants.js';
+import styles from './FooterBar.module.scss.js';
+
+const isValidFooterElement = (child) => {
+    return React__default.isValidElement(child) && child.type === FooterItem;
+};
+const getChildKey = (child, fallbackIndex) => {
+    if (React__default.isValidElement(child) && child.key) {
+        return child.key;
+    }
+    return fallbackIndex;
+};
+// Get title from child props for tooltip
+const getChildTitle = (child) => {
+    if (React__default.isValidElement(child) && child.props) {
+        return child.props.title;
+    }
+    return undefined;
+};
+const b = createBlock('footer-bar', styles);
+const FooterBar = memo(({ children, renderAfter, setCollapseBlocker, isPinned, isExpanded, maxVisibleItems = MAX_VISIBLE_ITEMS, }) => {
+    const childArray = React__default.Children.toArray(children).filter(Boolean);
+    // If only 1 element, render in vertical mode regardless of isPinned
+    const isHorizontal = isPinned && childArray.length > 1;
+    const handleDropdownOpenToggle = useCallback((isOpened) => {
+        setCollapseBlocker === null || setCollapseBlocker === undefined ? undefined : setCollapseBlocker(isOpened);
+    }, [setCollapseBlocker]);
+    const renderDropdownChild = useCallback((child) => {
+        if (!isValidFooterElement(child)) {
+            return child;
+        }
+        // In dropdown, always show text
+        return React__default.cloneElement(child, {
+            isExpanded: true,
+            layout: 'vertical',
+        });
+    }, []);
+    const { visibleChildren, hiddenChildren } = useMemo(() => {
+        if (childArray.length <= maxVisibleItems) {
+            return {
+                visibleChildren: childArray,
+                hiddenChildren: [],
+            };
+        }
+        // Reserve one slot for "more" button
+        const visibleCount = maxVisibleItems - 1;
+        return {
+            visibleChildren: childArray.slice(0, visibleCount),
+            hiddenChildren: childArray.slice(visibleCount),
+        };
+    }, [childArray, maxVisibleItems]);
+    const value = useMemo(() => ({
+        layout: isHorizontal ? 'horizontal' : 'vertical',
+        isExpanded,
+    }), [isHorizontal, isExpanded]);
+    const dropdownItems = useMemo(() => hiddenChildren.map((child) => ({
+        text: renderDropdownChild(child),
+        action: () => { }, // clicks are handled by the child itself
+    })), [hiddenChildren, renderDropdownChild]);
+    const afterContent = React__default.useMemo(() => (renderAfter ? renderAfter({ setCollapseBlocker }) : null), [renderAfter, setCollapseBlocker]);
+    return (React__default.createElement("div", { className: b() },
+        React__default.createElement("div", { className: b('items', { horizontal: isHorizontal }) },
+            React__default.createElement(FooterLayoutContext.Provider, { value: value }, visibleChildren.map((child, index) => {
+                const title = getChildTitle(child);
+                // In horizontal mode, wrap in Tooltip to show title on hover
+                if (isHorizontal && title) {
+                    return (React__default.createElement(Tooltip, { key: getChildKey(child, index), content: title, placement: "top", openDelay: ASIDE_HEADER_EXPAND_DELAY },
+                        React__default.createElement("div", { className: b('item') }, child)));
+                }
+                return (React__default.createElement("div", { key: getChildKey(child, index), className: b('item') }, child));
+            })),
+            hiddenChildren.length > 0 && (React__default.createElement("div", { className: b('item', { more: true }) },
+                React__default.createElement(DropdownMenu, { onOpenToggle: handleDropdownOpenToggle, items: dropdownItems, popupProps: {
+                        placement: isHorizontal ? 'top' : 'right',
+                        className: b('dropdown-popup'),
+                    }, switcherWrapperClassName: b('dropdown-switcher'), renderSwitcher: ({ onClick }) => (React__default.createElement(FooterItem, { id: "more", title: i18n('label_others'), icon: Ellipsis, isExpanded: !isHorizontal && isExpanded, layout: isHorizontal ? 'horizontal' : 'vertical', onItemClick: (_, __, event) => {
+                            onClick(event);
+                        } })) })))),
+        afterContent && (React__default.createElement("div", { className: b('after', { horizontal: isHorizontal }) }, afterContent))));
+});
+FooterBar.displayName = 'FooterBar';
+
+export { FooterBar };
+//# sourceMappingURL=FooterBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FooterBar.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterBar/FooterBar.tsx"],"sourcesContent":["import React, {memo, useCallback, useMemo} from 'react';\n\nimport {Ellipsis} from '@gravity-ui/icons';\nimport type {DropdownMenuItem} from '@gravity-ui/uikit';\nimport {DropdownMenu, Tooltip} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_EXPAND_DELAY} from '../../../constants';\nimport {createBlock} from '../../../utils/cn';\nimport {FooterLayoutContext, FooterLayoutContextValue} from '../../FooterLayoutContext';\nimport i18n from '../../i18n';\nimport {SetCollapseBlocker} from '../../types';\nimport {FooterItem} from '../FooterItem/FooterItem';\n\nimport {MAX_VISIBLE_ITEMS} from './constants';\n\nimport styles from './FooterBar.module.scss';\n\nconst isValidFooterElement = (child: React.ReactNode): child is React.ReactElement => {\n    return React.isValidElement(child) && child.type === FooterItem;\n};\n\nconst getChildKey = (child: React.ReactNode, fallbackIndex: number): string | number => {\n    if (React.isValidElement(child) && child.key) {\n        return child.key;\n    }\n    return fallbackIndex;\n};\n\n// Get title from child props for tooltip\nconst getChildTitle = (child: React.ReactNode): React.ReactNode => {\n    if (React.isValidElement(child) && child.props) {\n        return (child.props as {title?: React.ReactNode}).title;\n    }\n    return undefined;\n};\n\nconst b = createBlock('footer-bar', styles);\n\nexport interface FooterBarProps {\n    /** Array of footer elements (ReactNode[]) */\n    children: React.ReactNode[];\n    /** Render function for additional content after items (e.g., user profile). Receives options with setCollapseBlocker. */\n    renderAfter?: (options?: {setCollapseBlocker?: SetCollapseBlocker}) => React.ReactNode;\n    /** Registers a temporary block on collapse (e.g. while dropdown is open). Returns release function. */\n    setCollapseBlocker?: SetCollapseBlocker;\n    /** When `true`, the navigation is pinned (expanded). Items render horizontally. */\n    isPinned: boolean;\n    /** When `true`, the navigation is expanded (hover or pinned). */\n    isExpanded: boolean;\n    /** Maximum number of visible items before showing \"more\" button. Default: 5 */\n    maxVisibleItems?: number;\n}\n\nexport const FooterBar = memo<FooterBarProps>(\n    ({\n        children,\n        renderAfter,\n        setCollapseBlocker,\n        isPinned,\n        isExpanded,\n        maxVisibleItems = MAX_VISIBLE_ITEMS,\n    }) => {\n        const childArray = React.Children.toArray(children).filter(Boolean);\n\n        // If only 1 element, render in vertical mode regardless of isPinned\n        const isHorizontal = isPinned && childArray.length > 1;\n\n        const handleDropdownOpenToggle = useCallback(\n            (isOpened: boolean) => {\n                setCollapseBlocker?.(isOpened);\n            },\n            [setCollapseBlocker],\n        );\n\n        const renderDropdownChild = useCallback((child: React.ReactNode): React.ReactNode => {\n            if (!isValidFooterElement(child)) {\n                return child;\n            }\n\n            // In dropdown, always show text\n            return React.cloneElement(child, {\n                isExpanded: true,\n                layout: 'vertical',\n            });\n        }, []);\n\n        const {visibleChildren, hiddenChildren} = useMemo(() => {\n            if (childArray.length <= maxVisibleItems) {\n                return {\n                    visibleChildren: childArray,\n                    hiddenChildren: [],\n                };\n            }\n\n            // Reserve one slot for \"more\" button\n            const visibleCount = maxVisibleItems - 1;\n            return {\n                visibleChildren: childArray.slice(0, visibleCount),\n                hiddenChildren: childArray.slice(visibleCount),\n            };\n        }, [childArray, maxVisibleItems]);\n\n        const value: FooterLayoutContextValue = useMemo(\n            () => ({\n                layout: isHorizontal ? 'horizontal' : 'vertical',\n                isExpanded,\n            }),\n            [isHorizontal, isExpanded],\n        );\n\n        const dropdownItems: DropdownMenuItem[] = useMemo(\n            () =>\n                hiddenChildren.map((child) => ({\n                    text: renderDropdownChild(child),\n                    action: () => {}, // clicks are handled by the child itself\n                })),\n            [hiddenChildren, renderDropdownChild],\n        );\n\n        const afterContent = React.useMemo(\n            () => (renderAfter ? renderAfter({setCollapseBlocker}) : null),\n            [renderAfter, setCollapseBlocker],\n        );\n\n        return (\n            <div className={b()}>\n                <div className={b('items', {horizontal: isHorizontal})}>\n                    <FooterLayoutContext.Provider value={value}>\n                        {visibleChildren.map((child, index) => {\n                            const title = getChildTitle(child);\n\n                            // In horizontal mode, wrap in Tooltip to show title on hover\n                            if (isHorizontal && title) {\n                                return (\n                                    <Tooltip\n                                        key={getChildKey(child, index)}\n                                        content={title}\n                                        placement=\"top\"\n                                        openDelay={ASIDE_HEADER_EXPAND_DELAY}\n                                    >\n                                        <div className={b('item')}>{child}</div>\n                                    </Tooltip>\n                                );\n                            }\n\n                            return (\n                                <div key={getChildKey(child, index)} className={b('item')}>\n                                    {child}\n                                </div>\n                            );\n                        })}\n                    </FooterLayoutContext.Provider>\n\n                    {hiddenChildren.length > 0 && (\n                        <div className={b('item', {more: true})}>\n                            <DropdownMenu\n                                onOpenToggle={handleDropdownOpenToggle}\n                                items={dropdownItems}\n                                popupProps={{\n                                    placement: isHorizontal ? 'top' : 'right',\n                                    className: b('dropdown-popup'),\n                                }}\n                                switcherWrapperClassName={b('dropdown-switcher')}\n                                renderSwitcher={({onClick}) => (\n                                    <FooterItem\n                                        id=\"more\"\n                                        title={i18n('label_others')}\n                                        icon={Ellipsis}\n                                        isExpanded={!isHorizontal && isExpanded}\n                                        layout={isHorizontal ? 'horizontal' : 'vertical'}\n                                        onItemClick={(_, __, event) => {\n                                            onClick(event as React.MouseEvent<HTMLElement>);\n                                        }}\n                                    />\n                                )}\n                            />\n                        </div>\n                    )}\n                </div>\n\n                {afterContent && (\n                    <div className={b('after', {horizontal: isHorizontal})}>{afterContent}</div>\n                )}\n            </div>\n        );\n    },\n);\n\nFooterBar.displayName = 'FooterBar';\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var styles = {"gn-footer-bar":"FooterBar-module__gn-footer-bar___dunXC","gnFooterBar":"FooterBar-module__gn-footer-bar___dunXC","gn-footer-bar__items":"FooterBar-module__gn-footer-bar__items___xBsUq","gnFooterBarItems":"FooterBar-module__gn-footer-bar__items___xBsUq","gn-footer-bar__items_horizontal":"FooterBar-module__gn-footer-bar__items_horizontal___DEeK6","gnFooterBarItemsHorizontal":"FooterBar-module__gn-footer-bar__items_horizontal___DEeK6","gn-footer-bar__item":"FooterBar-module__gn-footer-bar__item___KAJSe","gnFooterBarItem":"FooterBar-module__gn-footer-bar__item___KAJSe","gn-footer-bar__items_vertical":"FooterBar-module__gn-footer-bar__items_vertical___3A7jw","gnFooterBarItemsVertical":"FooterBar-module__gn-footer-bar__items_vertical___3A7jw","gn-footer-bar__after":"FooterBar-module__gn-footer-bar__after___yB8To","gnFooterBarAfter":"FooterBar-module__gn-footer-bar__after___yB8To","gn-footer-bar__after_horizontal":"FooterBar-module__gn-footer-bar__after_horizontal___t4KyN","gnFooterBarAfterHorizontal":"FooterBar-module__gn-footer-bar__after_horizontal___t4KyN","gn-footer-bar__dropdown-switcher":"FooterBar-module__gn-footer-bar__dropdown-switcher___Czw-L","gnFooterBarDropdownSwitcher":"FooterBar-module__gn-footer-bar__dropdown-switcher___Czw-L","gn-footer-bar__dropdown-popup":"FooterBar-module__gn-footer-bar__dropdown-popup___nWoMR","gnFooterBarDropdownPopup":"FooterBar-module__gn-footer-bar__dropdown-popup___nWoMR"};
+
+export { styles as default };
+//# sourceMappingURL=FooterBar.module.scss.js.map

package/build/esm/components/AsideHeader/components/FooterBar/FooterBar.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterBar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/build/esm/components/AsideHeader/components/FooterBar/constants.d.ts

@@ -0,0 +1 @@
+export declare const MAX_VISIBLE_ITEMS = 5;

package/build/esm/components/AsideHeader/components/FooterBar/constants.js

@@ -0,0 +1,4 @@
+const MAX_VISIBLE_ITEMS = 5;
+
+export { MAX_VISIBLE_ITEMS };
+//# sourceMappingURL=constants.js.map

package/build/esm/components/AsideHeader/components/FooterBar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterBar/constants.ts"],"sourcesContent":["export const MAX_VISIBLE_ITEMS = 5;\n"],"names":[],"mappings":"AAAO,MAAM,iBAAiB,GAAG;;;;"}

package/build/esm/components/AsideHeader/components/FooterBar/index.d.ts

@@ -0,0 +1 @@
+export { FooterBar } from './FooterBar';

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

@@ -1,2 +1,2 @@
-.FooterItem-module__gn-footer-item___Hi7NH{--gn-aside-header-item-expanded-radius:6px;border-radius:var(--gn-aside-header-item-expanded-radius);height:36px;margin-bottom:2px;width:100%}.FooterItem-module__gn-footer-item___Hi7NH:last-child{margin-bottom:0}
+.FooterItem-module__gn-footer-item___Hi7NH{height:var(--_--item-height)}.FooterItem-module__gn-footer-item_layout_horizontal___WaBU0{display:flex;justify-content:center}.FooterItem-module__gn-footer-item_layout_vertical___SjEa5{border-radius:var(--gn-aside-header-item-expanded-radius);width:100%}.FooterItem-module__gn-footer-item_layout_vertical___SjEa5:not(.FooterItem-module__gn-footer-item_footer-bar___zcMtA){margin-bottom:2px}.FooterItem-module__gn-footer-item___Hi7NH:last-child{margin-bottom:0}
 .FooterItem-module__gn-mobile-header-footer-item___dk-Wo{flex-grow:1;position:relative}.FooterItem-module__gn-mobile-header-footer-item__button___KSu25{align-items:center;background:none;border:none;box-sizing:border-box;color:inherit;cursor:pointer;display:flex;font-family:var(--g-text-body-font-family);font-size:inherit;font-weight:var(--g-text-body-font-weight);justify-content:center;outline:none;padding:13px 10px;width:100%}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo .FooterItem-module__gn-mobile-header-footer-item__icon___Spltd{color:var(--g-color-text-misc)}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo+.FooterItem-module__gn-mobile-header-footer-item___dk-Wo:before{border-left:1px solid var(--g-color-base-generic);bottom:8px;content:"";left:0;position:absolute;top:8px}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo:empty{display:none}

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { AsideHeaderItem } from '../../types';
 export interface FooterItemProps extends AsideHeaderItem {
+    /** Layout mode: 'horizontal' shows icon only, 'vertical' shows icon and title. Used by FooterBar. */
+    layout?: 'horizontal' | 'vertical';
 }
 export declare function FooterItem(props: FooterItemProps): React.JSX.Element;