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

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

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ChevronRight} from '@gravity-ui/icons';\nimport {Icon, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../../constants';\nimport {MakeItemParams} from '../../../../types';\nimport {createBlock} from '../../../../utils/cn';\nimport {HighlightedItem} from '../HighlightedItem/HighlightedItem';\nimport {COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR} from '../constants';\nimport {isGroupHeaderItem} from '../grouping';\n\nimport {ItemInnerProps, ItemProps} from './Item.types';\nimport {ItemPopup} from './ItemPopup';\nimport {renderItemTitle} from './renderItemTitle';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst defaultPopupPlacement: PopupPlacement = ['right-end'];\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 14};\nconst CHEVRON_SIZE = 16;\nconst CHEVRON_SIZE_COMPACT = 10;\n\nexport const Item: React.FC<ItemInnerProps> = (props) => {\n    const {\n        className,\n        popupItemClassName,\n        menuPopupItems,\n        menuPopupTitle,\n        compact,\n        onMouseLeave,\n        onMouseEnter,\n        enableTooltip = true,\n        popupVisible = false,\n        popupRef: anchoreRefProp,\n        popupPlacement = defaultPopupPlacement,\n        popupOffset = defaultPopupOffset,\n        popupKeepMounted,\n        renderPopupContent,\n        onOpenChangePopup,\n        onItemClick,\n        onItemClickCapture,\n        itemWrapper,\n        bringForward,\n        rightAdornment,\n        title,\n        href,\n        qa,\n        hideIcon = false,\n        stopClickPropagation = false,\n    } = props;\n\n    const [compactNavPopoverOpen, setCompactNavPopoverOpen] = React.useState(false);\n\n    const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n    const anchorRef = anchoreRefProp?.current ? anchoreRefProp : ref;\n    const highlightedRef = React.useRef<HTMLDivElement>(null);\n\n    const type = props.type || ITEM_TYPE_REGULAR;\n    const current = props.current || false;\n    const icon = props.icon;\n    const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;\n    const iconQa = props.iconQa;\n    const collapsedItem = props.id === COLLAPSE_ITEM_ID;\n    const isGroupHeader = isGroupHeaderItem(props);\n\n    const handleOpenChangePopup = React.useCallback<NonNullable<ItemProps['onOpenChangePopup']>>(\n        (newOpen, event, reason) => {\n            if (\n                event instanceof MouseEvent &&\n                event.target &&\n                ref.current?.contains(event.target as Node)\n            ) {\n                return;\n            }\n\n            if (newOpen) {\n                setCompactNavPopoverOpen(false);\n            }\n\n            onOpenChangePopup?.(newOpen, event, reason);\n        },\n        [onOpenChangePopup],\n    );\n\n    if (type === 'divider') {\n        return <div className={b('menu-divider')} />;\n    }\n\n    const compactPopoverDisabled = !enableTooltip || popupVisible || type === 'action';\n\n    const makeIconNode = (iconEl: React.ReactNode): React.ReactNode => {\n        if (!compact) {\n            return iconEl;\n        }\n\n        const iconButton = (\n            <div\n                onMouseEnter={() => onMouseEnter?.()}\n                onMouseLeave={() => onMouseLeave?.()}\n                className={b('btn-icon')}\n            >\n                {iconEl}\n            </div>\n        );\n\n        if (menuPopupItems?.length) {\n            return iconButton;\n        }\n\n        return (\n            <ItemPopup\n                items={[props]}\n                open={compactNavPopoverOpen}\n                onOpenChange={(nextOpen) => {\n                    if (nextOpen && compactPopoverDisabled) return;\n                    setCompactNavPopoverOpen(nextOpen);\n                }}\n                hideIcon\n                itemClassName={popupItemClassName}\n                disabled={compactPopoverDisabled}\n                type={type}\n                collapsed={compact}\n                onItemClick={onItemClick}\n            >\n                {iconButton}\n            </ItemPopup>\n        );\n    };\n\n    const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {\n        const [Tag, tagProps] = href ? ['a' as const, {href}] : ['button' as const, {}];\n\n        const tagNode = (\n            <Tag\n                {...tagProps}\n                className={b({type, current, compact, 'hide-icon': hideIcon}, className)}\n                ref={ref}\n                data-type={type}\n                data-qa={qa}\n                onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n                    if (stopClickPropagation) {\n                        event.stopPropagation();\n                    }\n\n                    if (compact && !collapsedItem) {\n                        setCompactNavPopoverOpen(false);\n                    }\n\n                    onItemClick?.(props, collapsedItem, event);\n                }}\n                onClickCapture={onItemClickCapture}\n                onMouseEnter={() => {\n                    if (!compact) {\n                        onMouseEnter?.();\n                    }\n                }}\n                onMouseLeave={() => {\n                    if (!compact) {\n                        onMouseLeave?.();\n                    }\n                }}\n            >\n                <div className={b('icon-place')} ref={highlightedRef}>\n                    {makeIconNode(iconEl)}\n                </div>\n\n                <div className={b('title')} title={typeof title === 'string' ? title : undefined}>\n                    {titleEl}\n                </div>\n\n                {Boolean(menuPopupItems?.length) && (isGroupHeader || collapsedItem) && (\n                    <div className={b('chevron')}>\n                        <Icon\n                            data={ChevronRight}\n                            size={compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE}\n                        />\n                    </div>\n                )}\n            </Tag>\n        );\n\n        const expandedMenuRows = menuPopupItems;\n        const showMenuPopup = Boolean(expandedMenuRows?.length) && (collapsedItem || isGroupHeader);\n\n        const wrappedTagNode =\n            showMenuPopup && expandedMenuRows ? (\n                <ItemPopup\n                    items={expandedMenuRows}\n                    title={isGroupHeader ? menuPopupTitle : undefined}\n                    open={compactNavPopoverOpen}\n                    itemClassName={popupItemClassName}\n                    onOpenChange={setCompactNavPopoverOpen}\n                    collapsed={collapsedItem ? true : compact}\n                    onItemClick={onItemClick}\n                >\n                    {tagNode}\n                </ItemPopup>\n            ) : (\n                tagNode\n            );\n\n        const createdNode = (\n            <React.Fragment>\n                {wrappedTagNode}\n                {renderPopupContent && Boolean(anchorRef?.current) && (\n                    <Popup\n                        strategy=\"fixed\"\n                        open={popupVisible}\n                        keepMounted={popupKeepMounted}\n                        placement={popupPlacement}\n                        offset={popupOffset}\n                        anchorElement={anchorRef.current}\n                        onOpenChange={handleOpenChangePopup}\n                    >\n                        {renderPopupContent()}\n                    </Popup>\n                )}\n            </React.Fragment>\n        );\n\n        return createdNode;\n    };\n\n    const iconNode =\n        hideIcon || !icon ? null : (\n            <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />\n        );\n    const titleNode = renderItemTitle({title, rightAdornment});\n    const params = {icon: iconNode, title: titleNode};\n    let highlightedNode = null;\n    let node;\n\n    const opts = {compact: Boolean(compact), collapsed: false, item: props, ref};\n\n    if (typeof itemWrapper === 'function') {\n        node = itemWrapper(params, makeNode, opts) as React.ReactElement;\n        highlightedNode =\n            bringForward &&\n            (itemWrapper(\n                params,\n                ({icon: iconEl}) => makeIconNode(iconEl),\n                opts,\n            ) as React.ReactElement);\n    } else {\n        node = makeNode(params);\n        highlightedNode = bringForward && makeIconNode(iconNode);\n    }\n\n    return (\n        <React.Fragment>\n            {bringForward && (\n                <HighlightedItem\n                    iconNode={highlightedNode}\n                    iconRef={highlightedRef}\n                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) =>\n                        onItemClick?.(props, false, event)\n                    }\n                    onClickCapture={onItemClickCapture}\n                />\n            )}\n            {node}\n        </React.Fragment>\n    );\n};\n\nItem.displayName = 'Item';\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ChevronRight} from '@gravity-ui/icons';\nimport {Icon, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../../constants';\nimport {MakeItemParams} from '../../../../types';\nimport {createBlock} from '../../../../utils/cn';\nimport {HighlightedItem} from '../HighlightedItem/HighlightedItem';\nimport {COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR} from '../constants';\nimport {isGroupHeaderItem} from '../grouping';\n\nimport {ItemInnerProps, ItemProps} from './Item.types';\nimport {ItemPopup} from './ItemPopup';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\nimport {renderItemTitle} from './renderItemTitle';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst defaultPopupPlacement: PopupPlacement = ['right-end'];\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 14};\nconst CHEVRON_SIZE = 16;\nconst CHEVRON_SIZE_COMPACT = 10;\n\nexport const Item: React.FC<ItemInnerProps> = (props) => {\n    const {\n        className,\n        popupItemClassName,\n        menuPopupItems,\n        menuPopupTitle,\n        compact,\n        onMouseLeave,\n        onMouseEnter,\n        enableTooltip = true,\n        popupVisible = false,\n        popupRef: anchoreRefProp,\n        popupPlacement = defaultPopupPlacement,\n        popupOffset = defaultPopupOffset,\n        popupKeepMounted,\n        renderPopupContent,\n        onOpenChangePopup,\n        onItemClick,\n        onItemClickCapture,\n        itemWrapper,\n        bringForward,\n        rightAdornment,\n        title,\n        href,\n        qa,\n        hideIcon = false,\n        stopClickPropagation = false,\n    } = props;\n\n    const [compactNavPopoverOpen, setCompactNavPopoverOpen] = React.useState(false);\n\n    const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n    const anchorRef = anchoreRefProp?.current ? anchoreRefProp : ref;\n    const highlightedRef = React.useRef<HTMLDivElement>(null);\n\n    const type = props.type || ITEM_TYPE_REGULAR;\n    const current = props.current || false;\n    const icon = props.icon;\n    const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;\n    const iconQa = props.iconQa;\n    const collapsedItem = props.id === COLLAPSE_ITEM_ID;\n    const isGroupHeader = isGroupHeaderItem(props);\n\n    let resolvedMenuPopupItems = menuPopupItems;\n    let resolvedMenuPopupTitle = menuPopupTitle;\n\n    if (isGroupHeader) {\n        resolvedMenuPopupItems = menuPopupItems ?? props.groupChildren;\n        resolvedMenuPopupTitle = menuPopupTitle ?? props.groupPopupTitle;\n    }\n\n    const handleOpenChangePopup = React.useCallback<NonNullable<ItemProps['onOpenChangePopup']>>(\n        (newOpen, event, reason) => {\n            if (\n                event instanceof MouseEvent &&\n                event.target &&\n                ref.current?.contains(event.target as Node)\n            ) {\n                return;\n            }\n\n            if (newOpen) {\n                setCompactNavPopoverOpen(false);\n            }\n\n            onOpenChangePopup?.(newOpen, event, reason);\n        },\n        [onOpenChangePopup],\n    );\n\n    const isDivider = type === 'divider';\n    const hasSubmenuPopup =\n        !isDivider && Boolean(resolvedMenuPopupItems?.length) && (collapsedItem || isGroupHeader);\n\n    const submenuNest = React.useContext(ItemPopupNestContext);\n\n    React.useEffect(() => {\n        if (!submenuNest || !hasSubmenuPopup || !compactNavPopoverOpen) {\n            return undefined;\n        }\n\n        submenuNest.registerNestedOpen(1);\n\n        return () => {\n            submenuNest.registerNestedOpen(-1);\n        };\n    }, [submenuNest, hasSubmenuPopup, compactNavPopoverOpen]);\n\n    if (isDivider) {\n        return <div className={b('menu-divider')} />;\n    }\n\n    const compactPopoverDisabled = !enableTooltip || popupVisible || type === 'action';\n\n    const makeIconNode = (iconEl: React.ReactNode): React.ReactNode => {\n        if (!compact) {\n            return iconEl;\n        }\n\n        const iconButton = (\n            <div\n                onMouseEnter={() => onMouseEnter?.()}\n                onMouseLeave={() => onMouseLeave?.()}\n                className={b('btn-icon')}\n            >\n                {iconEl}\n            </div>\n        );\n\n        if (resolvedMenuPopupItems?.length) {\n            return iconButton;\n        }\n\n        return (\n            <ItemPopup\n                items={[props]}\n                open={compactNavPopoverOpen}\n                onOpenChange={(nextOpen) => {\n                    if (nextOpen && compactPopoverDisabled) return;\n                    setCompactNavPopoverOpen(nextOpen);\n                }}\n                hideIcon\n                itemClassName={popupItemClassName}\n                disabled={compactPopoverDisabled}\n                type={type}\n                collapsed={compact}\n                onItemClick={onItemClick}\n            >\n                {iconButton}\n            </ItemPopup>\n        );\n    };\n\n    const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {\n        const [Tag, tagProps] = href ? ['a' as const, {href}] : ['button' as const, {}];\n\n        const tagNode = (\n            <Tag\n                {...tagProps}\n                className={b({type, current, compact, 'hide-icon': hideIcon}, className)}\n                ref={ref}\n                data-type={type}\n                data-qa={qa}\n                onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n                    if (stopClickPropagation) {\n                        event.stopPropagation();\n                    }\n\n                    if (compact && !collapsedItem) {\n                        setCompactNavPopoverOpen(false);\n                    }\n\n                    onItemClick?.(props, collapsedItem, event);\n                }}\n                onClickCapture={onItemClickCapture}\n                onMouseEnter={() => {\n                    if (!compact) {\n                        onMouseEnter?.();\n                    }\n                }}\n                onMouseLeave={() => {\n                    if (!compact) {\n                        onMouseLeave?.();\n                    }\n                }}\n            >\n                <div className={b('icon-place')} ref={highlightedRef}>\n                    {makeIconNode(iconEl)}\n                </div>\n\n                <div className={b('title')} title={typeof title === 'string' ? title : undefined}>\n                    {titleEl}\n                </div>\n\n                {Boolean(resolvedMenuPopupItems?.length) && (isGroupHeader || collapsedItem) && (\n                    <div className={b('chevron')}>\n                        <Icon\n                            data={ChevronRight}\n                            size={compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE}\n                        />\n                    </div>\n                )}\n            </Tag>\n        );\n\n        const expandedMenuRows = resolvedMenuPopupItems;\n\n        const wrappedTagNode =\n            hasSubmenuPopup && expandedMenuRows ? (\n                <ItemPopup\n                    items={expandedMenuRows}\n                    title={isGroupHeader ? resolvedMenuPopupTitle : undefined}\n                    open={compactNavPopoverOpen}\n                    itemClassName={popupItemClassName}\n                    onOpenChange={setCompactNavPopoverOpen}\n                    collapsed={collapsedItem ? true : compact}\n                    onItemClick={onItemClick}\n                >\n                    {tagNode}\n                </ItemPopup>\n            ) : (\n                tagNode\n            );\n\n        const createdNode = (\n            <React.Fragment>\n                {wrappedTagNode}\n                {renderPopupContent && Boolean(anchorRef?.current) && (\n                    <Popup\n                        strategy=\"fixed\"\n                        open={popupVisible}\n                        keepMounted={popupKeepMounted}\n                        placement={popupPlacement}\n                        offset={popupOffset}\n                        anchorElement={anchorRef.current}\n                        onOpenChange={handleOpenChangePopup}\n                    >\n                        {renderPopupContent()}\n                    </Popup>\n                )}\n            </React.Fragment>\n        );\n\n        return createdNode;\n    };\n\n    const iconNode =\n        hideIcon || !icon ? null : (\n            <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />\n        );\n    const titleNode = renderItemTitle({title, rightAdornment});\n    const params = {icon: iconNode, title: titleNode};\n    let highlightedNode = null;\n    let node;\n\n    const opts = {compact: Boolean(compact), collapsed: false, item: props, ref};\n\n    if (typeof itemWrapper === 'function') {\n        node = itemWrapper(params, makeNode, opts) as React.ReactElement;\n        highlightedNode =\n            bringForward &&\n            (itemWrapper(\n                params,\n                ({icon: iconEl}) => makeIconNode(iconEl),\n                opts,\n            ) as React.ReactElement);\n    } else {\n        node = makeNode(params);\n        highlightedNode = bringForward && makeIconNode(iconNode);\n    }\n\n    return (\n        <React.Fragment>\n            {bringForward && (\n                <HighlightedItem\n                    iconNode={highlightedNode}\n                    iconRef={highlightedRef}\n                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) =>\n                        onItemClick?.(props, false, event)\n                    }\n                    onClickCapture={onItemClickCapture}\n                />\n            )}\n            {node}\n        </React.Fragment>\n    );\n};\n\nItem.displayName = 'Item';\n"],"names":["React"],"mappings":"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"}

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

@@ -3,25 +3,38 @@ import { List, Popover } from '@gravity-ui/uikit';
 import { createBlock } from '../../../../utils/cn.js';
 import { getSelectedItemIndex, getPopupItemHeight, getPopupItemsHeight } from '../utils.js';
 import { Item } from './Item.js';
+import { ItemPopupNestContext } from './ItemPopupNestContext.js';
 import styles from './Item.module.scss.js';
 
 const b = createBlock('composite-bar-item', styles);
 const defaultPopupOffset = { mainAxis: 14 };
 const DEFAULT_POPUP_DELAY = 100;
 const ItemPopup = ({ items, itemClassName, title, open, disabled, type, collapsed = false, hideIcon = false, children, onItemClick, onOpenChange, }) => {
+    const nestedOpenCountRef = React__default.useRef(0);
+    const registerNestedOpen = React__default.useCallback((delta) => {
+        nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);
+    }, []);
+    const nestContextValue = React__default.useMemo(() => ({ registerNestedOpen }), [registerNestedOpen]);
+    const wrappedOnOpenChange = React__default.useCallback((next) => {
+        if (!next && nestedOpenCountRef.current > 0) {
+            return;
+        }
+        onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(next);
+    }, [onOpenChange]);
     if (!items.length) {
         return children;
     }
-    const content = (React__default.createElement("div", { className: b('popup-content', { collapsed }) },
-        title && React__default.createElement("div", { className: b('popup-title') }, title),
-        React__default.createElement(List, { items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getPopupItemHeight, itemsHeight: getPopupItemsHeight, itemClassName: b('root-menu-item', itemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, Object.assign({}, item, { qa: undefined, compact: false, className: b('popup-item'), hideIcon: hideIcon, stopClickPropagation: true, enableTooltip: false, bringForward: false, popupVisible: false, renderPopupContent: undefined, onOpenChangePopup: undefined, popupRef: undefined, onItemClick: (_innerItem, _innerCollapsed, event) => {
-                    onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(false);
-                    onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, collapsed, event);
-                } }))) })));
+    const content = (React__default.createElement(ItemPopupNestContext.Provider, { value: nestContextValue },
+        React__default.createElement("div", { className: b('popup-content', { collapsed }) },
+            title && React__default.createElement("div", { className: b('popup-title') }, title),
+            React__default.createElement(List, { items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getPopupItemHeight, itemsHeight: getPopupItemsHeight, itemClassName: b('root-menu-item', itemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, Object.assign({}, item, { qa: undefined, compact: false, className: b('popup-item'), hideIcon: hideIcon, stopClickPropagation: true, enableTooltip: false, bringForward: false, popupVisible: false, renderPopupContent: undefined, onOpenChangePopup: undefined, popupRef: undefined, onItemClick: (_innerItem, _innerCollapsed, event) => {
+                        onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(false);
+                        onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, collapsed, event);
+                    } }))) }))));
     return (React__default.createElement(Popover, { disabled: disabled, open: open, onOpenChange: (nextOpen) => {
             if (nextOpen && disabled)
                 return;
-            onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(nextOpen);
+            wrappedOnOpenChange(nextOpen);
         }, placement: "right-start", strategy: "fixed", openDelay: DEFAULT_POPUP_DELAY, closeDelay: DEFAULT_POPUP_DELAY, offset: defaultPopupOffset, enableSafePolygon: true, className: b('icon-popover', { 'item-type': type }), content: content }, children));
 };
 ItemPopup.displayName = 'ItemPopup';

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

@@ -1 +1 @@
-{"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem} from '../../../types';\nimport {getPopupItemHeight, getPopupItemsHeight, getSelectedItemIndex} from '../utils';\n\nimport {Item} from './Item';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 14};\n\nconst DEFAULT_POPUP_DELAY = 100;\n\ninterface Props {\n    items: AsideHeaderItem[];\n    /** Optional title rendered at the top of the popup. */\n    title?: string;\n    open?: boolean;\n    disabled?: boolean;\n    type?: string;\n    collapsed?: boolean;\n    hideIcon?: boolean;\n    itemClassName?: string;\n    children: React.ReactElement;\n    onOpenChange?: (open: boolean) => void;\n    onItemClick?: AsideHeaderItem['onItemClick'];\n}\n\nexport const ItemPopup: React.FC<Props> = ({\n    items,\n    itemClassName,\n    title,\n    open,\n    disabled,\n    type,\n    collapsed = false,\n    hideIcon = false,\n    children,\n    onItemClick,\n    onOpenChange,\n}) => {\n    if (!items.length) {\n        return children;\n    }\n\n    const content = (\n        <div className={b('popup-content', {collapsed})}>\n            {title && <div className={b('popup-title')}>{title}</div>}\n            <List\n                items={items}\n                selectedItemIndex={getSelectedItemIndex(items)}\n                itemHeight={getPopupItemHeight}\n                itemsHeight={getPopupItemsHeight}\n                itemClassName={b('root-menu-item', itemClassName)}\n                virtualized={false}\n                filterable={false}\n                sortable={false}\n                renderItem={(item) => (\n                    <Item\n                        {...item}\n                        qa={undefined}\n                        compact={false}\n                        className={b('popup-item')}\n                        hideIcon={hideIcon}\n                        stopClickPropagation\n                        enableTooltip={false}\n                        bringForward={false}\n                        popupVisible={false}\n                        renderPopupContent={undefined}\n                        onOpenChangePopup={undefined}\n                        popupRef={undefined}\n                        onItemClick={(_innerItem, _innerCollapsed, event) => {\n                            onOpenChange?.(false);\n                            onItemClick?.(item, collapsed, event);\n                        }}\n                    />\n                )}\n            />\n        </div>\n    );\n\n    return (\n        <Popover\n            disabled={disabled}\n            open={open}\n            onOpenChange={(nextOpen) => {\n                if (nextOpen && disabled) return;\n                onOpenChange?.(nextOpen);\n            }}\n            placement=\"right-start\"\n            strategy=\"fixed\"\n            openDelay={DEFAULT_POPUP_DELAY}\n            closeDelay={DEFAULT_POPUP_DELAY}\n            offset={defaultPopupOffset}\n            enableSafePolygon\n            className={b('icon-popover', {'item-type': type})}\n            content={content}\n        >\n            {children}\n        </Popover>\n    );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["React"],"mappings":";;;;;;;AAYA,MAAM,CAAC,GAAG,WAAW,CAAC,oBAAoB,EAAE,MAAM,CAAC;AAEnD,MAAM,kBAAkB,GAAsC,EAAC,QAAQ,EAAE,EAAE,EAAC;AAE5E,MAAM,mBAAmB,GAAG,GAAG;AAiBxB,MAAM,SAAS,GAAoB,CAAC,EACvC,KAAK,EACL,aAAa,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,WAAW,EACX,YAAY,GACf,KAAI;AACD,IAAA,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AACf,QAAA,OAAO,QAAQ;;AAGnB,IAAA,MAAM,OAAO,IACTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,SAAS,EAAC,CAAC,EAAA;QAC1C,KAAK,IAAIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAG,EAAA,KAAK,CAAO;QACzDA,cAAC,CAAA,aAAA,CAAA,IAAI,EACD,EAAA,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,oBAAoB,CAAC,KAAK,CAAC,EAC9C,UAAU,EAAE,kBAAkB,EAC9B,WAAW,EAAE,mBAAmB,EAChC,aAAa,EAAE,CAAC,CAAC,gBAAgB,EAAE,aAAa,CAAC,EACjD,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,CAAC,IAAI,MACbA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,IACR,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,KAAK,EACd,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAC1B,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,QACpB,aAAa,EAAE,KAAK,EACpB,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,kBAAkB,EAAE,SAAS,EAC7B,iBAAiB,EAAE,SAAS,EAC5B,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,KAAI;AAChD,oBAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAG,KAAK,CAAC;oBACrB,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,SAAA,GAAA,SAAA,GAAX,WAAW,CAAG,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC;AACzC,iBAAC,EACH,CAAA,CAAA,CACL,EACH,CAAA,CACA,CACT;AAED,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,OAAO,EACJ,EAAA,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,QAAQ,KAAI;YACvB,IAAI,QAAQ,IAAI,QAAQ;gBAAE;AAC1B,YAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAG,QAAQ,CAAC;AAC5B,SAAC,EACD,SAAS,EAAC,aAAa,EACvB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,mBAAmB,EAC9B,UAAU,EAAE,mBAAmB,EAC/B,MAAM,EAAE,kBAAkB,EAC1B,iBAAiB,EACjB,IAAA,EAAA,SAAS,EAAE,CAAC,CAAC,cAAc,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,CAAC,EACjD,OAAO,EAAE,OAAO,IAEf,QAAQ,CACH;AAElB;AAEA,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}
+{"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem} from '../../../types';\nimport {getPopupItemHeight, getPopupItemsHeight, getSelectedItemIndex} from '../utils';\n\nimport {Item} from './Item';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 14};\n\nconst DEFAULT_POPUP_DELAY = 100;\n\ninterface Props {\n    items: AsideHeaderItem[];\n    /** Optional title rendered at the top of the popup. */\n    title?: string;\n    open?: boolean;\n    disabled?: boolean;\n    type?: string;\n    collapsed?: boolean;\n    hideIcon?: boolean;\n    itemClassName?: string;\n    children: React.ReactElement;\n    onOpenChange?: (open: boolean) => void;\n    onItemClick?: AsideHeaderItem['onItemClick'];\n}\n\nexport const ItemPopup: React.FC<Props> = ({\n    items,\n    itemClassName,\n    title,\n    open,\n    disabled,\n    type,\n    collapsed = false,\n    hideIcon = false,\n    children,\n    onItemClick,\n    onOpenChange,\n}) => {\n    const nestedOpenCountRef = React.useRef(0);\n\n    const registerNestedOpen = React.useCallback((delta: number) => {\n        nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);\n    }, []);\n\n    const nestContextValue = React.useMemo(() => ({registerNestedOpen}), [registerNestedOpen]);\n\n    const wrappedOnOpenChange = React.useCallback(\n        (next: boolean) => {\n            if (!next && nestedOpenCountRef.current > 0) {\n                return;\n            }\n\n            onOpenChange?.(next);\n        },\n        [onOpenChange],\n    );\n\n    if (!items.length) {\n        return children;\n    }\n\n    const content = (\n        <ItemPopupNestContext.Provider value={nestContextValue}>\n            <div className={b('popup-content', {collapsed})}>\n                {title && <div className={b('popup-title')}>{title}</div>}\n                <List\n                    items={items}\n                    selectedItemIndex={getSelectedItemIndex(items)}\n                    itemHeight={getPopupItemHeight}\n                    itemsHeight={getPopupItemsHeight}\n                    itemClassName={b('root-menu-item', itemClassName)}\n                    virtualized={false}\n                    filterable={false}\n                    sortable={false}\n                    renderItem={(item) => (\n                        <Item\n                            {...item}\n                            qa={undefined}\n                            compact={false}\n                            className={b('popup-item')}\n                            hideIcon={hideIcon}\n                            stopClickPropagation\n                            enableTooltip={false}\n                            bringForward={false}\n                            popupVisible={false}\n                            renderPopupContent={undefined}\n                            onOpenChangePopup={undefined}\n                            popupRef={undefined}\n                            onItemClick={(_innerItem, _innerCollapsed, event) => {\n                                onOpenChange?.(false);\n                                onItemClick?.(item, collapsed, event);\n                            }}\n                        />\n                    )}\n                />\n            </div>\n        </ItemPopupNestContext.Provider>\n    );\n\n    return (\n        <Popover\n            disabled={disabled}\n            open={open}\n            onOpenChange={(nextOpen) => {\n                if (nextOpen && disabled) return;\n                wrappedOnOpenChange(nextOpen);\n            }}\n            placement=\"right-start\"\n            strategy=\"fixed\"\n            openDelay={DEFAULT_POPUP_DELAY}\n            closeDelay={DEFAULT_POPUP_DELAY}\n            offset={defaultPopupOffset}\n            enableSafePolygon\n            className={b('icon-popover', {'item-type': type})}\n            content={content}\n        >\n            {children}\n        </Popover>\n    );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["React"],"mappings":";;;;;;;;AAaA,MAAM,CAAC,GAAG,WAAW,CAAC,oBAAoB,EAAE,MAAM,CAAC;AAEnD,MAAM,kBAAkB,GAAsC,EAAC,QAAQ,EAAE,EAAE,EAAC;AAE5E,MAAM,mBAAmB,GAAG,GAAG;AAiBxB,MAAM,SAAS,GAAoB,CAAC,EACvC,KAAK,EACL,aAAa,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,WAAW,EACX,YAAY,GACf,KAAI;IACD,MAAM,kBAAkB,GAAGA,cAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAE1C,MAAM,kBAAkB,GAAGA,cAAK,CAAC,WAAW,CAAC,CAAC,KAAa,KAAI;AAC3D,QAAA,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC;KAC/E,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,gBAAgB,GAAGA,cAAK,CAAC,OAAO,CAAC,OAAO,EAAC,kBAAkB,EAAC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;IAE1F,MAAM,mBAAmB,GAAGA,cAAK,CAAC,WAAW,CACzC,CAAC,IAAa,KAAI;QACd,IAAI,CAAC,IAAI,IAAI,kBAAkB,CAAC,OAAO,GAAG,CAAC,EAAE;YACzC;;AAGJ,QAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAG,IAAI,CAAC;AACxB,KAAC,EACD,CAAC,YAAY,CAAC,CACjB;AAED,IAAA,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AACf,QAAA,OAAO,QAAQ;;IAGnB,MAAM,OAAO,IACTA,cAAC,CAAA,aAAA,CAAA,oBAAoB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,gBAAgB,EAAA;QAClDA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,SAAS,EAAC,CAAC,EAAA;YAC1C,KAAK,IAAIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAG,EAAA,KAAK,CAAO;YACzDA,cAAC,CAAA,aAAA,CAAA,IAAI,EACD,EAAA,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,oBAAoB,CAAC,KAAK,CAAC,EAC9C,UAAU,EAAE,kBAAkB,EAC9B,WAAW,EAAE,mBAAmB,EAChC,aAAa,EAAE,CAAC,CAAC,gBAAgB,EAAE,aAAa,CAAC,EACjD,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,CAAC,IAAI,MACbA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,IACR,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,KAAK,EACd,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAC1B,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,QACpB,aAAa,EAAE,KAAK,EACpB,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,kBAAkB,EAAE,SAAS,EAC7B,iBAAiB,EAAE,SAAS,EAC5B,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,KAAI;AAChD,wBAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAG,KAAK,CAAC;wBACrB,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,SAAA,GAAA,SAAA,GAAX,WAAW,CAAG,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC;AACzC,qBAAC,IACH,CACL,EAAA,CACH,CACA,CACsB,CACnC;AAED,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,OAAO,EACJ,EAAA,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,QAAQ,KAAI;YACvB,IAAI,QAAQ,IAAI,QAAQ;gBAAE;YAC1B,mBAAmB,CAAC,QAAQ,CAAC;AACjC,SAAC,EACD,SAAS,EAAC,aAAa,EACvB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,mBAAmB,EAC9B,UAAU,EAAE,mBAAmB,EAC/B,MAAM,EAAE,kBAAkB,EAC1B,iBAAiB,EACjB,IAAA,EAAA,SAAS,EAAE,CAAC,CAAC,cAAc,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,CAAC,EACjD,OAAO,EAAE,OAAO,IAEf,QAAQ,CACH;AAElB;AAEA,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export type ItemPopupNestContextValue = {
+    registerNestedOpen: (delta: number) => void;
+};
+export declare const ItemPopupNestContext: React.Context<ItemPopupNestContextValue | null>;

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

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const ItemPopupNestContext = React__default.createContext(null);
+
+export { ItemPopupNestContext };
+//# sourceMappingURL=ItemPopupNestContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemPopupNestContext.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopupNestContext.tsx"],"sourcesContent":["import React from 'react';\n\nexport type ItemPopupNestContextValue = {\n    registerNestedOpen: (delta: number) => void;\n};\n\nexport const ItemPopupNestContext = React.createContext<ItemPopupNestContextValue | null>(null);\n"],"names":["React"],"mappings":";;AAMa,MAAA,oBAAoB,GAAGA,cAAK,CAAC,aAAa,CAAmC,IAAI;;;;"}

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

@@ -0,0 +1 @@
+.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS{--_--scrollbar-width:var(--gn-aside-scrollbar-width,8px);--_--scrollbar-thumb-width:var(--gn-aside-scrollbar-thumb-width,4px);flex:1 1 auto;min-height:0;position:relative;width:100%}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS:before{background:var(--gn-aside-bottom-shadow-color,linear-gradient(to bottom,transparent 0,transparent 50%,rgba(0,0,0,.08) 100%));bottom:0;content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .3s ease-in-out}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar_bottom-shadow___YoCCZ:before{opacity:1}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza{-ms-overflow-style:none;height:100%;overflow-y:auto;scrollbar-width:none;width:100%}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollable-inner___yRIza::-webkit-scrollbar{display:none;height:0;width:0}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-track___u6MVN{background:var(--gn-aside-scrollbar-track-color,transparent);bottom:0;pointer-events:auto;position:absolute;right:0;top:0;width:var(--_--scrollbar-width);z-index:3}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h{background:var(--gn-aside-scrollbar-handle-color,var(--g-color-base-simple-hover));border-radius:calc(var(--_--scrollbar-thumb-width)/2);opacity:0;position:absolute;right:calc((var(--_--scrollbar-width) - var(--_--scrollbar-thumb-width))/2);top:0;touch-action:none;transition:opacity .15s ease-in-out;width:var(--_--scrollbar-thumb-width)}.ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS:hover .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar__scrollbar-thumb___bLf6h{opacity:1}.g-root_theme_light .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS, .g-root_theme_light-hc .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS{--gn-aside-bottom-shadow-color:linear-gradient(180deg,transparent 0%,transparent 50%,rgba(0,0,0,.08))}.g-root_theme_dark .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS, .g-root_theme_dark-hc .ScrollableWithScrollbar-module__gn-scrollable-with-scrollbar___S-GKS{--gn-aside-bottom-shadow-color:linear-gradient(180deg,transparent 0%,transparent 80%,rgba(0,0,0,.4))}

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

@@ -0,0 +1,12 @@
+import React, { FC, ReactNode } from 'react';
+type ScrollableWithScrollbarProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Extra dependencies that should trigger a recalculation of the bottom
+     * shadow and custom scrollbar thumb (e.g. when the rendered items change).
+     */
+    recalcDeps?: React.DependencyList;
+};
+export declare const ScrollableWithScrollbar: FC<ScrollableWithScrollbarProps>;
+export {};

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

@@ -0,0 +1,22 @@
+import './ScrollableWithScrollbar.css';
+import React__default from 'react';
+import { createBlock } from '../../../../utils/cn.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 { 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", { 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 };
+//# sourceMappingURL=ScrollableWithScrollbar.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +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-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/ScrollableWithScrollbar.module.scss.js.map

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

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

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

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":"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"}

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

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

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

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

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

@@ -14,7 +14,7 @@ import { Panels } from './Panels.js';
 
 const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
 const FirstPanel = React__default.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, qa, } = useAsideHeaderInnerContext();
+    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuOverflow, qa, } = useAsideHeaderInnerContext();
     const visibleMenuItems = useVisibleMenuItems();
     const asideRef = useRef(null);
     React__default.useEffect(() => {
@@ -26,7 +26,7 @@ const FirstPanel = React__default.forwardRef((_props, ref) => {
             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),
-                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { menuItemClassName: b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick })) : (React__default.createElement("div", { className: b('menu-items') })),
+                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { menuItemClassName: b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, menuOverflow: menuOverflow })) : (React__default.createElement("div", { className: b('menu-items') })),
                 React__default.createElement("div", { className: b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
                     size,
                     compact: Boolean(compact),