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

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

@@ -1,24 +1,21 @@
 import './ScrollableWithScrollbar.css';
-import React__default, { useId } from 'react';
+import React__default from 'react';
 import { createBlock } from '../../../../utils/cn.js';
-import { useScrollbar } from './useScrollbar.js';
+import { useScrollableScrollbarSync } from './useScrollableScrollbarSync.js';
 import styles from './ScrollableWithScrollbar.module.scss.js';
 
 const b = createBlock('scrollable-with-scrollbar', styles);
 const EMPTY_DEPS = [];
+// Hides the native scrollbar and renders a custom thumb synced with the
+// underlying scroll position. The scroll itself stays native (wheel / touch /
+// keyboard) — only the visual indicator and drag handling are custom, so the
+// reserved gutter width is identical across OS / browser scrollbar settings.
 const ScrollableWithScrollbar = ({ children, className, recalcDeps = EMPTY_DEPS, }) => {
-    const scrollableContentId = useId();
-    const { scrollRef, scrollState, updateScrollState, showScrollbar, thumbHeight, thumbTop, handleThumbMouseDown, handleTrackClick, handleScrollbarKeyDown, } = useScrollbar({ recalcDeps });
-    const hasContentBelow = scrollState.scrollHeight > scrollState.clientHeight &&
-        scrollState.scrollTop + scrollState.clientHeight < scrollState.scrollHeight - 1;
+    const { scrollRef, trackRef, thumbRef, hasContentBelow, overflows, thumb, scheduleUpdate, handleThumbPointerDown, handleTrackPointerDown, } = useScrollableScrollbarSync(recalcDeps);
     return (React__default.createElement("div", { className: b({ 'bottom-shadow': hasContentBelow }, className) },
-        React__default.createElement("div", { id: scrollableContentId, ref: scrollRef, className: b('scrollable-inner'), onScroll: updateScrollState }, children),
-        showScrollbar && (React__default.createElement("div", { className: b('scrollbar'), role: "scrollbar", "aria-controls": scrollableContentId, "aria-orientation": "vertical", "aria-valuenow": scrollState.scrollTop, "aria-valuemin": 0, "aria-valuemax": scrollState.scrollHeight - scrollState.clientHeight, tabIndex: 0, onKeyDown: handleScrollbarKeyDown },
-            React__default.createElement("div", { className: b('scrollbar-track'), onClick: handleTrackClick },
-                React__default.createElement("div", { className: b('scrollbar-thumb'), style: {
-                        height: thumbHeight,
-                        transform: `translateY(${thumbTop}px)`,
-                    }, onMouseDown: handleThumbMouseDown }))))));
+        React__default.createElement("div", { ref: scrollRef, className: b('scrollable-inner'), onScroll: scheduleUpdate }, children),
+        overflows ? (React__default.createElement("div", { ref: trackRef, className: b('scrollbar-track'), onPointerDown: handleTrackPointerDown, "aria-hidden": "true" },
+            React__default.createElement("div", { ref: thumbRef, className: b('scrollbar-thumb'), style: { transform: `translateY(${thumb.top}px)`, height: thumb.height }, onPointerDown: handleThumbPointerDown }))) : null));
 };
 
 export { ScrollableWithScrollbar };

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollableWithScrollbar.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useId} from 'react';\n\nimport {createBlock} from '../../../../utils/cn';\n\nimport {useScrollbar} from './useScrollbar';\n\nimport styles from './ScrollableWithScrollbar.module.scss';\n\nconst b = createBlock('scrollable-with-scrollbar', styles);\n\nconst EMPTY_DEPS: React.DependencyList = [];\n\ntype ScrollableWithScrollbarProps = {\n    children: ReactNode;\n    className?: string;\n    recalcDeps?: React.DependencyList;\n};\n\nexport const ScrollableWithScrollbar: FC<ScrollableWithScrollbarProps> = ({\n    children,\n    className,\n    recalcDeps = EMPTY_DEPS,\n}) => {\n    const scrollableContentId = useId();\n    const {\n        scrollRef,\n        scrollState,\n        updateScrollState,\n        showScrollbar,\n        thumbHeight,\n        thumbTop,\n        handleThumbMouseDown,\n        handleTrackClick,\n        handleScrollbarKeyDown,\n    } = useScrollbar({recalcDeps});\n\n    const hasContentBelow =\n        scrollState.scrollHeight > scrollState.clientHeight &&\n        scrollState.scrollTop + scrollState.clientHeight < scrollState.scrollHeight - 1;\n\n    return (\n        <div className={b({'bottom-shadow': hasContentBelow}, className)}>\n            <div\n                id={scrollableContentId}\n                ref={scrollRef}\n                className={b('scrollable-inner')}\n                onScroll={updateScrollState}\n            >\n                {children}\n            </div>\n\n            {showScrollbar && (\n                <div\n                    className={b('scrollbar')}\n                    role=\"scrollbar\"\n                    aria-controls={scrollableContentId}\n                    aria-orientation=\"vertical\"\n                    aria-valuenow={scrollState.scrollTop}\n                    aria-valuemin={0}\n                    aria-valuemax={scrollState.scrollHeight - scrollState.clientHeight}\n                    tabIndex={0}\n                    onKeyDown={handleScrollbarKeyDown}\n                >\n                    <div className={b('scrollbar-track')} onClick={handleTrackClick}>\n                        <div\n                            className={b('scrollbar-thumb')}\n                            style={{\n                                height: thumbHeight,\n                                transform: `translateY(${thumbTop}px)`,\n                            }}\n                            onMouseDown={handleThumbMouseDown}\n                        />\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;;;;AAQA,MAAM,CAAC,GAAG,WAAW,CAAC,2BAA2B,EAAE,MAAM,CAAC;AAE1D,MAAM,UAAU,GAAyB,EAAE;AAQpC,MAAM,uBAAuB,GAAqC,CAAC,EACtE,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,UAAU,GAC1B,KAAI;AACD,IAAA,MAAM,mBAAmB,GAAG,KAAK,EAAE;IACnC,MAAM,EACF,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,QAAQ,EACR,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,GACzB,GAAG,YAAY,CAAC,EAAC,UAAU,EAAC,CAAC;IAE9B,MAAM,eAAe,GACjB,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY;AACnD,QAAA,WAAW,CAAC,SAAS,GAAG,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,GAAG,CAAC;AAEnF,IAAA,QACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,EAAC,eAAe,EAAE,eAAe,EAAC,EAAE,SAAS,CAAC,EAAA;QAC5DA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,EAAE,EAAE,mBAAmB,EACvB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAChC,QAAQ,EAAE,iBAAiB,EAAA,EAE1B,QAAQ,CACP;AAEL,QAAA,aAAa,KACVA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EACzB,IAAI,EAAC,WAAW,mBACD,mBAAmB,EAAA,kBAAA,EACjB,UAAU,EACZ,eAAA,EAAA,WAAW,CAAC,SAAS,mBACrB,CAAC,EAAA,eAAA,EACD,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,EAClE,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,sBAAsB,EAAA;YAEjCA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAA;gBAC3DA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,KAAK,EAAE;AACH,wBAAA,MAAM,EAAE,WAAW;wBACnB,SAAS,EAAE,CAAc,WAAA,EAAA,QAAQ,CAAK,GAAA,CAAA;qBACzC,EACD,WAAW,EAAE,oBAAoB,EAAA,CACnC,CACA,CACJ,CACT,CACC;AAEd;;;;"}
+{"version":3,"file":"ScrollableWithScrollbar.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.tsx"],"sourcesContent":["import React, {FC, ReactNode} from 'react';\n\nimport {createBlock} from '../../../../utils/cn';\n\nimport {useScrollableScrollbarSync} from './useScrollableScrollbarSync';\n\nimport styles from './ScrollableWithScrollbar.module.scss';\n\nconst b = createBlock('scrollable-with-scrollbar', styles);\n\nconst EMPTY_DEPS: React.DependencyList = [];\n\ntype ScrollableWithScrollbarProps = {\n    children: ReactNode;\n    className?: string;\n    /**\n     * Extra dependencies that should trigger a recalculation of the bottom\n     * shadow and custom scrollbar thumb (e.g. when the rendered items change).\n     */\n    recalcDeps?: React.DependencyList;\n};\n\n// Hides the native scrollbar and renders a custom thumb synced with the\n// underlying scroll position. The scroll itself stays native (wheel / touch /\n// keyboard) — only the visual indicator and drag handling are custom, so the\n// reserved gutter width is identical across OS / browser scrollbar settings.\nexport const ScrollableWithScrollbar: FC<ScrollableWithScrollbarProps> = ({\n    children,\n    className,\n    recalcDeps = EMPTY_DEPS,\n}) => {\n    const {\n        scrollRef,\n        trackRef,\n        thumbRef,\n        hasContentBelow,\n        overflows,\n        thumb,\n        scheduleUpdate,\n        handleThumbPointerDown,\n        handleTrackPointerDown,\n    } = useScrollableScrollbarSync(recalcDeps);\n\n    return (\n        <div className={b({'bottom-shadow': hasContentBelow}, className)}>\n            <div ref={scrollRef} className={b('scrollable-inner')} onScroll={scheduleUpdate}>\n                {children}\n            </div>\n\n            {overflows ? (\n                <div\n                    ref={trackRef}\n                    className={b('scrollbar-track')}\n                    onPointerDown={handleTrackPointerDown}\n                    aria-hidden=\"true\"\n                >\n                    <div\n                        ref={thumbRef}\n                        className={b('scrollbar-thumb')}\n                        style={{transform: `translateY(${thumb.top}px)`, height: thumb.height}}\n                        onPointerDown={handleThumbPointerDown}\n                    />\n                </div>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;;;;AAQA,MAAM,CAAC,GAAG,WAAW,CAAC,2BAA2B,EAAE,MAAM,CAAC;AAE1D,MAAM,UAAU,GAAyB,EAAE;AAY3C;AACA;AACA;AACA;AACO,MAAM,uBAAuB,GAAqC,CAAC,EACtE,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,UAAU,GAC1B,KAAI;IACD,MAAM,EACF,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,SAAS,EACT,KAAK,EACL,cAAc,EACd,sBAAsB,EACtB,sBAAsB,GACzB,GAAG,0BAA0B,CAAC,UAAU,CAAC;AAE1C,IAAA,QACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,EAAC,eAAe,EAAE,eAAe,EAAC,EAAE,SAAS,CAAC,EAAA;AAC5D,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAA,EAC1E,QAAQ,CACP;QAEL,SAAS,IACNA,sCACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,aAAa,EAAE,sBAAsB,iBACzB,MAAM,EAAA;AAElB,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,KAAK,EAAE,EAAC,SAAS,EAAE,CAAA,WAAA,EAAc,KAAK,CAAC,GAAG,CAAK,GAAA,CAAA,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAC,EACtE,aAAa,EAAE,sBAAsB,EACvC,CAAA,CACA,IACN,IAAI,CACN;AAEd;;;;"}

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

@@ -1,4 +1,4 @@
-var styles = {"gn-scrollable-with-scrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS","gnScrollableWithScrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS","gn-scrollable-with-scrollbar_bottom-shadow":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ","gnScrollableWithScrollbarBottomShadow":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ","gn-scrollable-with-scrollbar__scrollable-inner":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza","gnScrollableWithScrollbarScrollableInner":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza","gn-scrollable-with-scrollbar__scrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar___igCbU","gnScrollableWithScrollbarScrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar___igCbU","gn-scrollable-with-scrollbar__scrollbar-track":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN","gnScrollableWithScrollbarScrollbarTrack":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN","gn-scrollable-with-scrollbar__scrollbar-thumb":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h","gnScrollableWithScrollbarScrollbarThumb":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h"};
+var styles = {"gn-scrollable-with-scrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS","gnScrollableWithScrollbar":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS","gn-scrollable-with-scrollbar_bottom-shadow":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ","gnScrollableWithScrollbarBottomShadow":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ","gn-scrollable-with-scrollbar__scrollable-inner":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza","gnScrollableWithScrollbarScrollableInner":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza","gn-scrollable-with-scrollbar__scrollbar-track":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN","gnScrollableWithScrollbarScrollbarTrack":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN","gn-scrollable-with-scrollbar__scrollbar-thumb":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h","gnScrollableWithScrollbarScrollbarThumb":"ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h"};
 
 export { styles as default };
 //# sourceMappingURL=ScrollableWithScrollbar.module.scss.js.map

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

@@ -0,0 +1,27 @@
+import React from 'react';
+type ThumbGeometry = {
+    top: number;
+    height: number;
+};
+type UseScrollableScrollbarSyncResult = {
+    scrollRef: React.RefObject<HTMLDivElement>;
+    trackRef: React.RefObject<HTMLDivElement>;
+    thumbRef: React.RefObject<HTMLDivElement>;
+    hasContentBelow: boolean;
+    overflows: boolean;
+    thumb: ThumbGeometry;
+    scheduleUpdate: () => void;
+    handleThumbPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    handleTrackPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+};
+/**
+ * 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
+ */
+export declare function useScrollableScrollbarSync(recalcDeps?: React.DependencyList): UseScrollableScrollbarSyncResult;
+export {};

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

@@ -0,0 +1,169 @@
+import { useRef, useState, useCallback, useEffect, useLayoutEffect } from '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 = useRef(null);
+    const trackRef = useRef(null);
+    const thumbRef = useRef(null);
+    const [hasContentBelow, setHasContentBelow] = useState(false);
+    const [overflows, setOverflows] = useState(false);
+    const [thumb, setThumb] = useState({ top: 0, height: 0 });
+    const rafIdRef = useRef(null);
+    const scheduleUpdate = 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 });
+        });
+    }, []);
+    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]);
+    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.
+    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 = useCallback((scrollEl) => {
+        const top = scrollEl.scrollTop;
+        scrollEl.scrollTo({ top, behavior: 'auto' });
+    }, []);
+    const handleThumbPointerDown = 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 = 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,
+    };
+}
+
+export { useScrollableScrollbarSync };
+//# sourceMappingURL=useScrollableScrollbarSync.js.map

package/build/esm/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":[],"mappings":";;AAEA,MAAM,UAAU,GAAyB,EAAE;AAE3C,MAAM,gBAAgB,GAAG,EAAE;AAmB3B;;;;;;;;AAQG;AACa,SAAA,0BAA0B,CACtC,UAAA,GAAmC,UAAU,EAAA;AAE7C,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC9C,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC7C,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;IAE7C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACjD,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;AAEtE,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAgB,IAAI,CAAC;AAC5C,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAK;AACpC,QAAA,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE;YAC3B;;AAGJ,QAAA,QAAQ,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAK;AAC1C,YAAA,QAAQ,CAAC,OAAO,GAAG,IAAI;AAEvB,YAAA,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO;YAE5B,IAAI,CAAC,EAAE,EAAE;gBACL;;YAGJ,MAAM,EAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAC,GAAG,EAAE;AAClD,YAAA,MAAM,aAAa,GAAG,YAAY,GAAG,YAAY;;YAEjD,MAAM,WAAW,GAAG,SAAS,GAAG,YAAY,GAAG,YAAY,GAAG,CAAC;YAE/D,YAAY,CAAC,aAAa,CAAC;AAC3B,YAAA,kBAAkB,CAAC,aAAa,IAAI,WAAW,CAAC;YAEhD,IAAI,CAAC,aAAa,EAAE;gBAChB,QAAQ,CAAC,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;gBAC7B;;AAGJ,YAAA,MAAM,KAAK,GAAG,YAAY,GAAG,YAAY;AACzC,YAAA,MAAM,SAAS,GAAG,YAAY,GAAG,KAAK;YACtC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,gBAAgB,CAAC;AACpD,YAAA,MAAM,MAAM,GAAG,YAAY,GAAG,MAAM;YACpC,MAAM,WAAW,GACb,YAAY,GAAG,YAAY,GAAG,CAAC,GAAG,SAAS,IAAI,YAAY,GAAG,YAAY,CAAC,GAAG,CAAC;AACnF,YAAA,MAAM,GAAG,GAAG,MAAM,GAAG,WAAW;AAEhC,YAAA,QAAQ,CAAC,EAAC,GAAG,EAAE,MAAM,EAAC,CAAC;AAC3B,SAAC,CAAC;KACL,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO;QAE5B,IAAI,CAAC,EAAE,EAAE;AACL,YAAA,OAAO,SAAS;;AAGpB,QAAA,cAAc,EAAE;AAEhB,QAAA,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;AACvC,YAAA,OAAO,SAAS;;AAGpB,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,cAAc,CAAC;AACnD,QAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;AACpB,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;;KAErC,EAAE,CAAC,cAAc,EAAE,GAAG,UAAU,CAAC,CAAC;IAEnC,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;AACR,YAAA,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE;AAC3B,gBAAA,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC;AACtC,gBAAA,QAAQ,CAAC,OAAO,GAAG,IAAI;;AAE/B,SAAC;KACJ,EAAE,EAAE,CAAC;;;;IAKN,eAAe,CAAC,MAAK;QACjB,IAAI,CAAC,SAAS,EAAE;AACZ,YAAA,OAAO,SAAS;;AAGpB,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO;AAElC,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,QAAQ,EAAE;AACrB,YAAA,OAAO,SAAS;;AAGpB,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YAC9B,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,QAAQ,CAAC,SAAS,IAAI,CAAC,CAAC,MAAM;AAClC,SAAC;AAED,QAAA,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC;QAC1D,OAAO,MAAM,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC5D,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,8BAA8B,GAAG,WAAW,CAAC,CAAC,QAAwB,KAAI;AAC5E,QAAA,MAAM,GAAG,GAAG,QAAQ,CAAC,SAAS;QAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAC,CAAC;KAC7C,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,sBAAsB,GAAG,WAAW,CACtC,CAAC,KAAyC,KAAI;AAC1C,QAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO;AAClC,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO;AAEhC,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7C;;QAGJ,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;QAEvB,8BAA8B,CAAC,QAAQ,CAAC;AAExC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO;AAC5B,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,SAAS;AACzC,QAAA,MAAM,EAAC,YAAY,EAAE,YAAY,EAAC,GAAG,QAAQ;QAC7C,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM;QAC1D,MAAM,WAAW,GAAG,YAAY;AAChC,QAAA,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW;AAC7C,QAAA,MAAM,YAAY,GAAG,YAAY,GAAG,YAAY;QAEhD,IAAI,WAAW,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,EAAE;YACvC;;AAGJ,QAAA,MAAM,iBAAiB,GAAG,CAAC,SAAuB,KAAI;AAClD,YAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,GAAG,MAAM;YACzC,MAAM,WAAW,GAAG,CAAC,MAAM,GAAG,WAAW,IAAI,YAAY;AACzD,YAAA,QAAQ,CAAC,SAAS,GAAG,cAAc,GAAG,WAAW;AACrD,SAAC;QAED,MAAM,eAAe,GAAG,MAAK;AACzB,YAAA,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC5D,YAAA,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC;AACxD,YAAA,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,eAAe,CAAC;AAChE,SAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,CAAC;AACzD,QAAA,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC;AACrD,QAAA,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,eAAe,CAAC;AAC7D,KAAC,EACD,CAAC,8BAA8B,CAAC,CACnC;AAED,IAAA,MAAM,sBAAsB,GAAG,WAAW,CACtC,CAAC,KAAyC,KAAI;AAC1C,QAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO;AAClC,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO;AAEhC,QAAA,IACI,CAAC,QAAQ;AACT,YAAA,CAAC,OAAO;YACR,KAAK,CAAC,MAAM,KAAK,CAAC;AAClB,YAAA,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EACtC;YACE;;QAGJ,8BAA8B,CAAC,QAAQ,CAAC;QAExC,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE;QAC7D,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM;QAC1D,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG;QAC5C,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAC3B,CAAC,EACD,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,WAAW,GAAG,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,WAAW,CAAC,CACrE;AACD,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,GAAG,WAAW;QAClD,MAAM,YAAY,GAAG,QAAQ,CAAC,YAAY,GAAG,QAAQ,CAAC,YAAY;QAElE,IAAI,WAAW,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,EAAE;YACvC;;;;QAKJ,QAAQ,CAAC,QAAQ,CAAC;AACd,YAAA,GAAG,EAAE,CAAC,cAAc,GAAG,WAAW,IAAI,YAAY;AAClD,YAAA,QAAQ,EAAE,MAAM;AACnB,SAAA,CAAC;AACN,KAAC,EACD,CAAC,8BAA8B,CAAC,CACnC;IAED,OAAO;QACH,SAAS;QACT,QAAQ;QACR,QAAQ;QACR,eAAe;QACf,SAAS;QACT,KAAK;QACL,cAAc;QACd,sBAAsB;QACtB,sBAAsB;KACzB;AACL;;;;"}

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

@@ -0,0 +1,11 @@
+import { MenuGroup } from '../../../types';
+import { AsideHeaderItem } from '../../types';
+interface GroupHeaderItem extends AsideHeaderItem {
+    isGroupHeader: true;
+    groupChildren: AsideHeaderItem[];
+    /** Optional title shown at the top of the compact popup listing group children. */
+    groupPopupTitle?: string;
+}
+export declare function isGroupHeaderItem(item: AsideHeaderItem | GroupHeaderItem): item is GroupHeaderItem;
+export declare function getGroupedItems(items: AsideHeaderItem[], groups: MenuGroup[] | undefined): AsideHeaderItem[];
+export {};

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

@@ -0,0 +1,65 @@
+const GROUP_HEADER_ITEM_PREFIX = '__gn-composite-bar__group-header__';
+function isGroupHeaderItem(item) {
+    return 'isGroupHeader' in item && item.isGroupHeader;
+}
+function getGroupedItems(items, groups) {
+    if (!groups || groups.length === 0) {
+        return items;
+    }
+    const visibleGroups = groups.filter((g) => !g.hidden);
+    if (visibleGroups.length === 0) {
+        return items;
+    }
+    const groupMap = new Map();
+    for (const group of visibleGroups) {
+        groupMap.set(group.id, group);
+    }
+    const groupChildrenMap = new Map();
+    const ungroupedItems = [];
+    const groupFirstIndex = new Map();
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.hidden) {
+            continue;
+        }
+        const groupId = item.groupId;
+        if (groupId && groupMap.has(groupId)) {
+            let groupChildren = groupChildrenMap.get(groupId);
+            if (!groupChildren) {
+                groupChildren = [];
+                groupChildrenMap.set(groupId, groupChildren);
+                groupFirstIndex.set(groupId, i);
+            }
+            groupChildren.push(item);
+        }
+        else {
+            ungroupedItems.push({ index: i, item });
+        }
+    }
+    const result = [...ungroupedItems];
+    for (const [groupId, children] of groupChildrenMap.entries()) {
+        if (children.length === 0)
+            continue;
+        const group = groupMap.get(groupId);
+        const firstIndex = groupFirstIndex.get(groupId);
+        if (!group || firstIndex === undefined) {
+            continue;
+        }
+        const hasCurrent = children.some((child) => child.current);
+        const groupHeaderItem = {
+            id: `${GROUP_HEADER_ITEM_PREFIX}${groupId}`,
+            title: group.title,
+            icon: group.icon,
+            current: hasCurrent,
+            isGroupHeader: true,
+            groupChildren: children,
+            groupPopupTitle: group.popupTitle,
+        };
+        result.push({ index: firstIndex, item: groupHeaderItem });
+    }
+    result.sort((a, b) => a.index - b.index);
+    return result.map((r) => r.item);
+}
+
+export { getGroupedItems, isGroupHeaderItem };
+//# sourceMappingURL=grouping.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grouping.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/grouping.ts"],"sourcesContent":["import {MenuGroup} from '../../../types';\nimport {AsideHeaderItem} from '../../types';\n\nconst GROUP_HEADER_ITEM_PREFIX = '__gn-composite-bar__group-header__';\n\ninterface GroupHeaderItem extends AsideHeaderItem {\n    isGroupHeader: true;\n    groupChildren: AsideHeaderItem[];\n    /** Optional title shown at the top of the compact popup listing group children. */\n    groupPopupTitle?: string;\n}\n\nexport function isGroupHeaderItem(\n    item: AsideHeaderItem | GroupHeaderItem,\n): item is GroupHeaderItem {\n    return 'isGroupHeader' in item && item.isGroupHeader;\n}\n\nexport function getGroupedItems(\n    items: AsideHeaderItem[],\n    groups: MenuGroup[] | undefined,\n): AsideHeaderItem[] {\n    if (!groups || groups.length === 0) {\n        return items;\n    }\n\n    const visibleGroups = groups.filter((g) => !g.hidden);\n    if (visibleGroups.length === 0) {\n        return items;\n    }\n\n    const groupMap = new Map<string, MenuGroup>();\n    for (const group of visibleGroups) {\n        groupMap.set(group.id, group);\n    }\n\n    const groupChildrenMap = new Map<string, AsideHeaderItem[]>();\n    const ungroupedItems: Array<{index: number; item: AsideHeaderItem}> = [];\n    const groupFirstIndex = new Map<string, number>();\n\n    for (let i = 0; i < items.length; i++) {\n        const item = items[i];\n\n        if (item.hidden) {\n            continue;\n        }\n\n        const groupId = item.groupId;\n\n        if (groupId && groupMap.has(groupId)) {\n            let groupChildren = groupChildrenMap.get(groupId);\n\n            if (!groupChildren) {\n                groupChildren = [];\n\n                groupChildrenMap.set(groupId, groupChildren);\n                groupFirstIndex.set(groupId, i);\n            }\n\n            groupChildren.push(item);\n        } else {\n            ungroupedItems.push({index: i, item});\n        }\n    }\n\n    const result: Array<{index: number; item: AsideHeaderItem}> = [...ungroupedItems];\n\n    for (const [groupId, children] of groupChildrenMap.entries()) {\n        if (children.length === 0) continue;\n\n        const group = groupMap.get(groupId);\n        const firstIndex = groupFirstIndex.get(groupId);\n\n        if (!group || firstIndex === undefined) {\n            continue;\n        }\n\n        const hasCurrent = children.some((child) => child.current);\n\n        const groupHeaderItem: GroupHeaderItem = {\n            id: `${GROUP_HEADER_ITEM_PREFIX}${groupId}`,\n            title: group.title,\n            icon: group.icon,\n            current: hasCurrent,\n            isGroupHeader: true,\n            groupChildren: children,\n            groupPopupTitle: group.popupTitle,\n        };\n\n        result.push({index: firstIndex, item: groupHeaderItem});\n    }\n\n    result.sort((a, b) => a.index - b.index);\n    return result.map((r) => r.item);\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,22 @@
-import { AsideHeaderItem, MenuItemsWithGroups } from '../../types';
-export declare function getItemHeight(compositeItem: MenuItemsWithGroups, isCompactMode?: boolean): number;
-export declare function getItemsHeight<T extends AsideHeaderItem>(items: T[], isCompactMode?: boolean): number;
+import { AsideHeaderItem } from '../../types';
+export declare function getItemHeight(compositeItem: AsideHeaderItem): 40 | 50 | 15;
+export declare function getPopupItemHeight(compositeItem: AsideHeaderItem): 32 | 50 | 15;
+export declare function getItemsHeight<T extends AsideHeaderItem>(items: T[]): number;
+export declare function getPopupItemsHeight<T extends AsideHeaderItem>(items: T[]): 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[];
+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/esm/components/AsideHeader/components/CompositeBar/utils.js

@@ -1,79 +1,124 @@
-import { ITEM_HEIGHT_COMPACT, ITEM_HEIGHT, ITEM_GAP } from '../../../constants.js';
-import { getGroupBlockHeight } from '../../utils/getGroupHeight.js';
+import { Ellipsis } from '@gravity-ui/icons';
+import { ITEM_HEIGHT, POPUP_REGULAR_ITEM_HEIGHT } from '../../../constants.js';
+import { COLLAPSE_ITEM_ID } from './constants.js';
 
-function getGroupHeight(compositeItem, isCompactMode) {
-    const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;
-    return getGroupBlockHeight(visibleGroupItems, isCompactMode);
-}
-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, isCompactMode);
+function getItemHeight(compositeItem) {
+    switch (compositeItem.type) {
+        case 'action':
+            return 50;
+        case 'divider':
+            return 15;
+        default:
+            return ITEM_HEIGHT;
     }
+}
+function getPopupItemHeight(compositeItem) {
     switch (compositeItem.type) {
         case 'action':
             return 50;
         case 'divider':
             return 15;
         default:
-            return isCompactMode ? ITEM_HEIGHT_COMPACT : ITEM_HEIGHT;
+            return POPUP_REGULAR_ITEM_HEIGHT;
     }
 }
-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 getItemsHeight(items) {
+    return items.reduce((sum, item) => sum + getItemHeight(item), 0);
+}
+function getPopupItemsHeight(items) {
+    return items.reduce((sum, item) => sum + getPopupItemHeight(item), 0);
 }
 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;
+function getPinnedItems(compositeItems) {
+    const pinnedItems = [];
+    for (const compositeItem of compositeItems) {
+        if (compositeItem.pinned) {
+            pinnedItems.push(compositeItem);
+        }
+        else if (compositeItem.type === 'divider') {
+            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {
+                pinnedItems.push(compositeItem);
+            }
         }
-        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 pinnedItems;
+}
+function getItemsMinHeight(compositeItems) {
+    const pinnedItems = getPinnedItems(compositeItems);
+    const afterMoreButtonItems = compositeItems.filter(({ afterMoreButton }) => afterMoreButton);
+    return (getItemsHeight(pinnedItems) +
+        getItemsHeight(afterMoreButtonItems) +
+        (pinnedItems.length === compositeItems.length ? 0 : ITEM_HEIGHT));
+}
+function getMoreButtonItem(menuMoreTitle) {
+    return {
+        id: COLLAPSE_ITEM_ID,
+        title: menuMoreTitle,
+        icon: Ellipsis,
+        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;
     }
-    return items.slice(firstNonDividerIndex, lastNonDividerIndex + 1);
+    const regularItems = compositeItems.filter(({ afterMoreButton }) => !afterMoreButton);
+    return [...regularItems, ...afterMoreButtonItems];
 }
-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) });
+function getAutosizeListItems(compositeItems, height, collapseItem) {
+    var _a, _b, _c;
+    const afterMoreButtonItems = compositeItems.filter(({ afterMoreButton }) => afterMoreButton);
+    const regularItems = compositeItems.filter(({ afterMoreButton }) => !afterMoreButton);
+    const listItems = [...regularItems, ...afterMoreButtonItems];
+    const allItemsHeight = getItemsHeight(listItems);
+    if (allItemsHeight <= height) {
+        return { listItems, collapseItems: [] };
+    }
+    const collapseItemHeight = getItemHeight(collapseItem);
+    listItems.splice(regularItems.length, 0, collapseItem);
+    const collapseItems = [];
+    let listHeight = allItemsHeight + collapseItemHeight;
+    let index = listItems.length;
+    while (listHeight > height) {
+        if (index === 0) {
+            break;
         }
-        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;
+        index--;
+        const compositeItem = listItems[index];
+        if (compositeItem.pinned ||
+            compositeItem.id === COLLAPSE_ITEM_ID ||
+            compositeItem.afterMoreButton) {
+            continue;
+        }
+        if (compositeItem.type === 'divider') {
+            if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === undefined ? undefined : _a.type) === 'divider') {
+                listHeight -= getItemHeight(compositeItem);
+                listItems.splice(index, 1);
+            }
+            continue;
+        }
+        listHeight -= getItemHeight(compositeItem);
+        collapseItems.unshift(...listItems.splice(index, 1));
+    }
+    if (((_b = listItems[index]) === null || _b === undefined ? undefined : _b.type) === 'divider' &&
+        (index === 0 || ((_c = listItems[index - 1]) === null || _c === undefined ? undefined : _c.type) === 'divider')) {
+        listItems.splice(index, 1);
     }
-    return filterLeadingAndTrailingDividers(filterConsecutiveDividers(items));
+    return { listItems, collapseItems };
 }
 
-export { filterRedundantDividers, getItemHeight, getItemsHeight, getSelectedItemIndex, getVisibleItemsWithFilteredDividers };
+export { getAutosizeListItems, getItemHeight, getItemsHeight, getItemsMinHeight, getMoreButtonItem, getPopupItemHeight, getPopupItemsHeight, getReorderedItems, getSelectedItemIndex };
 //# sourceMappingURL=utils.js.map