@gravity-ui/navigation 3.10.2 → 4.0.0

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

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

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

@@ -0,0 +1 @@
+.CompositeBar-module__gn-composite-bar___WoCDY{flex:1 0 auto;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar___WoCDY .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{background-color:transparent}

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

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import { AsideHeaderItem } from '../../types';
+type CompositeBarProps = {
+    type: 'menu' | 'subheader';
+    items: AsideHeaderItem[];
+    onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    multipleTooltip?: boolean;
+    menuMoreTitle?: string;
+    onMoreClick?: () => void;
+    compact: boolean;
+    compositeId?: string;
+};
+export declare const CompositeBar: FC<CompositeBarProps>;
+export {};

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

@@ -0,0 +1,152 @@
+import './CompositeBar.css';
+import React__default, { useRef, useContext, useCallback } from 'react';
+import { List } from '@gravity-ui/uikit';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { ASIDE_HEADER_COMPACT_WIDTH } from '../../../constants.js';
+import { createBlock } from '../../../utils/cn.js';
+import { Item } from './Item/Item.js';
+import { MultipleTooltip } from './MultipleTooltip/MultipleTooltip.js';
+import { MultipleTooltipProvider, MultipleTooltipContext } from './MultipleTooltip/MultipleTooltipContext.js';
+import { COLLAPSE_ITEM_ID } from './constants.js';
+import { getItemsMinHeight, getAutosizeListItems, getSelectedItemIndex, getItemHeight, getItemsHeight, getMoreButtonItem } from './utils.js';
+import styles from './CompositeBar.module.scss.js';
+
+const b = createBlock('composite-bar', styles);
+const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, compact, compositeId, }) => {
+    const ref = useRef(null);
+    const tooltipRef = useRef(null);
+    const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
+    React__default.useEffect(() => {
+        function handleBlurWindow() {
+            if (multipleTooltip && multipleTooltipActive) {
+                setMultipleTooltipContextValue({ active: false });
+            }
+        }
+        window.addEventListener('blur', handleBlurWindow);
+        return () => {
+            window.removeEventListener('blur', handleBlurWindow);
+        };
+    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onTooltipMouseEnter = useCallback((e) => {
+        if (multipleTooltip &&
+            compact &&
+            !multipleTooltipActive &&
+            document.hasFocus() &&
+            activeIndex !== lastClickedItemIndex &&
+            e.clientX <= ASIDE_HEADER_COMPACT_WIDTH) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
+                active: true,
+            });
+        }
+    }, [
+        multipleTooltip,
+        compact,
+        multipleTooltipActive,
+        activeIndex,
+        lastClickedItemIndex,
+        setMultipleTooltipContextValue,
+    ]);
+    const onTooltipMouseLeave = useCallback(() => {
+        if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
+                active: false,
+                lastClickedItemIndex: undefined,
+            });
+        }
+    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onMouseEnterByIndex = useCallback((itemIndex) => () => {
+        if (multipleTooltip && document.hasFocus()) {
+            let multipleTooltipActiveValue = multipleTooltipActive;
+            if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
+                multipleTooltipActiveValue = true;
+            }
+            if (activeIndex === itemIndex &&
+                multipleTooltipActive === multipleTooltipActiveValue) {
+                return;
+            }
+            setMultipleTooltipContextValue({
+                activeIndex: itemIndex,
+                active: multipleTooltipActiveValue,
+            });
+        }
+    }, [
+        multipleTooltip,
+        multipleTooltipActive,
+        lastClickedItemIndex,
+        activeIndex,
+        setMultipleTooltipContextValue,
+    ]);
+    const onMouseLeave = useCallback(() => {
+        var _a;
+        if (compact && document.hasFocus()) {
+            (_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem(undefined);
+            if (multipleTooltip &&
+                (activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
+                setMultipleTooltipContextValue({
+                    activeIndex: undefined,
+                    lastClickedItemIndex: undefined,
+                });
+            }
+        }
+    }, [
+        activeIndex,
+        compact,
+        lastClickedItemIndex,
+        multipleTooltip,
+        setMultipleTooltipContextValue,
+    ]);
+    const onItemClickByIndex = useCallback((itemIndex, orginalItemClick) => (item, collapsed, event) => {
+        if (compact &&
+            multipleTooltip &&
+            itemIndex !== lastClickedItemIndex &&
+            item.id !== COLLAPSE_ITEM_ID) {
+            setMultipleTooltipContextValue({
+                lastClickedItemIndex: itemIndex,
+                active: false,
+            });
+        }
+        // Handle clicks on the "more" button (collapse item)
+        if (item.id === COLLAPSE_ITEM_ID && collapsed) {
+            onMoreClick === null || onMoreClick === undefined ? undefined : onMoreClick();
+        }
+        else {
+            onItemClick === null || onItemClick === undefined ? undefined : onItemClick(Object.assign(Object.assign({}, item), { onItemClick: orginalItemClick }), collapsed, event);
+        }
+    }, [
+        compact,
+        lastClickedItemIndex,
+        multipleTooltip,
+        onItemClick,
+        onMoreClick,
+        setMultipleTooltipContextValue,
+    ]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
+            React__default.createElement(List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex(items) : undefined, itemHeight: getItemHeight, itemsHeight: getItemsHeight, itemClassName: b('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => (React__default.createElement(Item, Object.assign({}, item, { compact: compact, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), collapseItems: collapseItems }))) })),
+        type === 'menu' && multipleTooltip && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
+};
+const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, compact, compositeId, }) => {
+    if (items.length === 0) {
+        return null;
+    }
+    let node;
+    if (type === 'menu') {
+        const minHeight = getItemsMinHeight(items);
+        const collapseItem = getMoreButtonItem(menuMoreTitle);
+        node = (React__default.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, (size) => {
+            const width = Number.isNaN(size.width) ? 0 : size.width;
+            const height = Number.isNaN(size.height) ? 0 : size.height;
+            const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
+            return (React__default.createElement("div", { style: { width, height } },
+                React__default.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+        }))));
+    }
+    else {
+        node = (React__default.createElement("div", { className: b({ subheader: true }) },
+            React__default.createElement(CompositeBarView, { type: "subheader", compact: compact, items: items, onItemClick: onItemClick })));
+    }
+    return React__default.createElement(MultipleTooltipProvider, null, node);
+};
+
+export { CompositeBar };
+//# sourceMappingURL=CompositeBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeBar.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useCallback, useContext, useRef} from 'react';\n\nimport {List} from '@gravity-ui/uikit';\nimport AutoSizer, {Size} from 'react-virtualized-auto-sizer';\n\nimport {ASIDE_HEADER_COMPACT_WIDTH} from '../../../constants';\nimport {createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem} from '../../types';\n\nimport {Item, ItemProps} from './Item/Item';\nimport {MultipleTooltip, MultipleTooltipContext, MultipleTooltipProvider} from './MultipleTooltip';\nimport {COLLAPSE_ITEM_ID} from './constants';\nimport {\n    getAutosizeListItems,\n    getItemHeight,\n    getItemsHeight,\n    getItemsMinHeight,\n    getMoreButtonItem,\n    getSelectedItemIndex,\n} from './utils';\n\nimport styles from './CompositeBar.module.scss';\n\nconst b = createBlock('composite-bar', styles);\n\ntype CompositeBarProps = {\n    type: 'menu' | 'subheader';\n    items: AsideHeaderItem[];\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    multipleTooltip?: boolean;\n    menuMoreTitle?: string;\n    onMoreClick?: () => void;\n    compact: boolean;\n    compositeId?: string;\n};\n\ntype CompositeBarViewProps = CompositeBarProps & {\n    collapseItems?: AsideHeaderItem[];\n};\n\nconst CompositeBarView: FC<CompositeBarViewProps> = ({\n    type,\n    items,\n    onItemClick,\n    onMoreClick,\n    collapseItems,\n    multipleTooltip = false,\n    compact,\n    compositeId,\n}) => {\n    const ref = useRef<List<AsideHeaderItem>>(null);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n\n    const {\n        setValue: setMultipleTooltipContextValue,\n        active: multipleTooltipActive,\n        activeIndex,\n        lastClickedItemIndex,\n    } = useContext(MultipleTooltipContext);\n\n    React.useEffect(() => {\n        function handleBlurWindow() {\n            if (multipleTooltip && multipleTooltipActive) {\n                setMultipleTooltipContextValue({active: false});\n            }\n        }\n\n        window.addEventListener('blur', handleBlurWindow);\n\n        return () => {\n            window.removeEventListener('blur', handleBlurWindow);\n        };\n    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);\n\n    const onTooltipMouseEnter = useCallback(\n        (e: {clientX: number}) => {\n            if (\n                multipleTooltip &&\n                compact &&\n                !multipleTooltipActive &&\n                document.hasFocus() &&\n                activeIndex !== lastClickedItemIndex &&\n                e.clientX <= ASIDE_HEADER_COMPACT_WIDTH\n            ) {\n                setMultipleTooltipContextValue?.({\n                    active: true,\n                });\n            }\n        },\n        [\n            multipleTooltip,\n            compact,\n            multipleTooltipActive,\n            activeIndex,\n            lastClickedItemIndex,\n            setMultipleTooltipContextValue,\n        ],\n    );\n\n    const onTooltipMouseLeave = useCallback(() => {\n        if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {\n            setMultipleTooltipContextValue?.({\n                active: false,\n                lastClickedItemIndex: undefined,\n            });\n        }\n    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);\n\n    const onMouseEnterByIndex = useCallback(\n        (itemIndex: number) => () => {\n            if (multipleTooltip && document.hasFocus()) {\n                let multipleTooltipActiveValue = multipleTooltipActive;\n                if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {\n                    multipleTooltipActiveValue = true;\n                }\n                if (\n                    activeIndex === itemIndex &&\n                    multipleTooltipActive === multipleTooltipActiveValue\n                ) {\n                    return;\n                }\n                setMultipleTooltipContextValue({\n                    activeIndex: itemIndex,\n                    active: multipleTooltipActiveValue,\n                });\n            }\n        },\n        [\n            multipleTooltip,\n            multipleTooltipActive,\n            lastClickedItemIndex,\n            activeIndex,\n            setMultipleTooltipContextValue,\n        ],\n    );\n\n    const onMouseLeave = useCallback(() => {\n        if (compact && document.hasFocus()) {\n            ref.current?.activateItem(undefined as unknown as number);\n            if (\n                multipleTooltip &&\n                (activeIndex !== undefined || lastClickedItemIndex !== undefined)\n            ) {\n                setMultipleTooltipContextValue({\n                    activeIndex: undefined,\n                    lastClickedItemIndex: undefined,\n                });\n            }\n        }\n    }, [\n        activeIndex,\n        compact,\n        lastClickedItemIndex,\n        multipleTooltip,\n        setMultipleTooltipContextValue,\n    ]);\n\n    const onItemClickByIndex = useCallback(\n        (\n            itemIndex: number,\n            orginalItemClick: AsideHeaderItem['onItemClick'],\n        ): ItemProps['onItemClick'] =>\n            (item, collapsed, event) => {\n                if (\n                    compact &&\n                    multipleTooltip &&\n                    itemIndex !== lastClickedItemIndex &&\n                    item.id !== COLLAPSE_ITEM_ID\n                ) {\n                    setMultipleTooltipContextValue({\n                        lastClickedItemIndex: itemIndex,\n                        active: false,\n                    });\n                }\n\n                // Handle clicks on the \"more\" button (collapse item)\n                if (item.id === COLLAPSE_ITEM_ID && collapsed) {\n                    onMoreClick?.();\n                } else {\n                    onItemClick?.({...item, onItemClick: orginalItemClick}, collapsed, event);\n                }\n            },\n        [\n            compact,\n            lastClickedItemIndex,\n            multipleTooltip,\n            onItemClick,\n            onMoreClick,\n            setMultipleTooltipContextValue,\n        ],\n    );\n\n    return (\n        <React.Fragment>\n            <div\n                ref={tooltipRef}\n                onMouseEnter={onTooltipMouseEnter}\n                onMouseLeave={onTooltipMouseLeave}\n            >\n                <List<AsideHeaderItem>\n                    id={compositeId}\n                    ref={ref}\n                    items={items}\n                    selectedItemIndex={type === 'menu' ? getSelectedItemIndex(items) : undefined}\n                    itemHeight={getItemHeight}\n                    itemsHeight={getItemsHeight}\n                    itemClassName={b('root-menu-item')}\n                    virtualized={false}\n                    filterable={false}\n                    sortable={false}\n                    renderItem={(item, _isItemActive, itemIndex) => (\n                        <Item\n                            {...item}\n                            compact={compact}\n                            onMouseEnter={onMouseEnterByIndex(itemIndex)}\n                            onMouseLeave={onMouseLeave}\n                            onItemClick={onItemClickByIndex(itemIndex, item.onItemClick)}\n                            collapseItems={collapseItems}\n                        />\n                    )}\n                />\n            </div>\n            {type === 'menu' && multipleTooltip && (\n                <MultipleTooltip\n                    open={compact && multipleTooltipActive}\n                    anchorRef={tooltipRef}\n                    placement={['right-start']}\n                    items={items}\n                />\n            )}\n        </React.Fragment>\n    );\n};\n\nexport const CompositeBar: FC<CompositeBarProps> = ({\n    type,\n    items,\n    menuMoreTitle,\n    onItemClick,\n    onMoreClick,\n    multipleTooltip = false,\n    compact,\n    compositeId,\n}) => {\n    if (items.length === 0) {\n        return null;\n    }\n    let node: ReactNode;\n\n    if (type === 'menu') {\n        const minHeight = getItemsMinHeight(items);\n        const collapseItem = getMoreButtonItem(menuMoreTitle);\n        node = (\n            <div className={b({autosizer: true})} style={{minHeight}}>\n                {items.length !== 0 && (\n                    <AutoSizer>\n                        {(size: Size) => {\n                            const width = Number.isNaN(size.width) ? 0 : size.width;\n                            const height = Number.isNaN(size.height) ? 0 : size.height;\n\n                            const {listItems, collapseItems} = getAutosizeListItems(\n                                items,\n                                height,\n                                collapseItem,\n                            );\n                            return (\n                                <div style={{width, height}}>\n                                    <CompositeBarView\n                                        compositeId={compositeId}\n                                        type=\"menu\"\n                                        compact={compact}\n                                        items={listItems}\n                                        onItemClick={onItemClick}\n                                        onMoreClick={onMoreClick}\n                                        collapseItems={collapseItems}\n                                        multipleTooltip={multipleTooltip}\n                                    />\n                                </div>\n                            );\n                        }}\n                    </AutoSizer>\n                )}\n            </div>\n        );\n    } else {\n        node = (\n            <div className={b({subheader: true})}>\n                <CompositeBarView\n                    type=\"subheader\"\n                    compact={compact}\n                    items={items}\n                    onItemClick={onItemClick}\n                />\n            </div>\n        );\n    }\n    return <MultipleTooltipProvider>{node}</MultipleTooltipProvider>;\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var styles = {"gn-composite-bar":"CompositeBar-module__gn-composite-bar___WoCDY","gnCompositeBar":"CompositeBar-module__gn-composite-bar___WoCDY","gn-composite-bar__root-menu-item":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF","gnCompositeBarRootMenuItem":"CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF"};
+
+export { styles as default };
+//# sourceMappingURL=CompositeBar.module.scss.js.map

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

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

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

@@ -0,0 +1 @@
+.HighlightedItem-module__gn-composite-bar-highlighted-item___8jg4a{--_--background-color:var(--g-color-base-background);--_--item-icon-background-size:38px;--_--item-background-color-hover:var(--g-color-base-selection-hover);--_--item-selected-background-color-active:var(--g-color-base-selection);display:flex;justify-content:center;position:absolute;z-index:10000}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v{align-items:center;background-color:var(--gn-aside-header-background-color,var(--_--background-color));border-radius:7px;box-shadow:0 8px 20px 0 var(--g-color-sfx-shadow);cursor:pointer;display:flex;height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));justify-content:center;overflow:hidden;position:relative;transform:translateY(1px);width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color-active));content:"";height:100%;position:absolute;width:100%;z-index:-1}.HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v:hover:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover))}

package/build/{cjs → esm/components/AsideHeader}/components/CompositeBar/HighlightedItem/HighlightedItem.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './HighlightedItem.scss';
 interface ItemInnerProps {
     iconRef: React.RefObject<HTMLDivElement>;
     iconNode: React.ReactNode;

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

@@ -0,0 +1,55 @@
+import './HighlightedItem.css';
+import React__default, { useState, useMemo, useCallback, useEffect } from 'react';
+import { Portal } from '@gravity-ui/uikit';
+import debounceFn from '../../../../../_virtual/debounce.js';
+import { createBlock, block } from '../../../../utils/cn.js';
+import { useAsideHeaderInnerContext } from '../../../AsideHeaderContext.js';
+import styles from './HighlightedItem.module.scss.js';
+
+const b = createBlock('composite-bar-highlighted-item', styles);
+const bGlobal = block('composite-bar-highlighted-item');
+const DEBOUNCE_TIME = 200;
+const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
+    const { openModalSubscriber } = useAsideHeaderInnerContext();
+    const [position, setPosition] = useState({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+    });
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const handleResizeDebounced = useMemo(() => debounceFn(() => {
+        var _a;
+        const { top = 0, left = 0, width = 0, height = 0, } = ((_a = iconRef === null || iconRef === undefined ? undefined : iconRef.current) === null || _a === undefined ? undefined : _a.getBoundingClientRect()) || {};
+        setPosition({
+            top: top + window.scrollY,
+            left: left + window.scrollX,
+            width,
+            height,
+        });
+    }, DEBOUNCE_TIME, { leading: true }), [iconRef]);
+    const handleResize = useCallback(() => handleResizeDebounced(), [handleResizeDebounced]);
+    useEffect(() => {
+        if (!isModalOpen) {
+            return undefined;
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [handleResize, isModalOpen]);
+    openModalSubscriber === null || openModalSubscriber === undefined ? undefined : openModalSubscriber((open) => {
+        setIsModalOpen(open);
+    });
+    if (!iconNode || !isModalOpen) {
+        return null;
+    }
+    return (React__default.createElement(Portal, null,
+        React__default.createElement("div", { className: `${b()} ${bGlobal()}`, style: position, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
+            React__default.createElement("div", { className: b('icon') }, iconNode))));
+};
+HighlightedItem.displayName = 'HighlightedItem';
+
+export { HighlightedItem };
+//# sourceMappingURL=HighlightedItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightedItem.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {Portal} from '@gravity-ui/uikit';\nimport debounceFn from 'lodash/debounce';\n\nimport {block, createBlock} from '../../../../utils/cn';\nimport {useAsideHeaderInnerContext} from '../../../AsideHeaderContext';\n\nimport styles from './HighlightedItem.module.scss';\n\nconst b = createBlock('composite-bar-highlighted-item', styles);\nconst bGlobal = block('composite-bar-highlighted-item');\n\ninterface ItemInnerProps {\n    iconRef: React.RefObject<HTMLDivElement>;\n    iconNode: React.ReactNode;\n    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    onClickCapture?: (event: React.SyntheticEvent) => void;\n}\n\nconst DEBOUNCE_TIME = 200;\n\nexport const HighlightedItem: React.FC<ItemInnerProps> = ({\n    iconRef,\n    iconNode,\n    onClick,\n    onClickCapture,\n}: ItemInnerProps) => {\n    const {openModalSubscriber} = useAsideHeaderInnerContext();\n    const [position, setPosition] = useState({\n        top: 0,\n        left: 0,\n        width: 0,\n        height: 0,\n    });\n    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);\n\n    const handleResizeDebounced = useMemo(\n        () =>\n            debounceFn(\n                () => {\n                    const {\n                        top = 0,\n                        left = 0,\n                        width = 0,\n                        height = 0,\n                    } = iconRef?.current?.getBoundingClientRect() || {};\n\n                    setPosition({\n                        top: top + window.scrollY,\n                        left: left + window.scrollX,\n                        width,\n                        height,\n                    });\n                },\n                DEBOUNCE_TIME,\n                {leading: true},\n            ),\n        [iconRef],\n    );\n\n    const handleResize = useCallback(() => handleResizeDebounced(), [handleResizeDebounced]);\n\n    useEffect(() => {\n        if (!isModalOpen) {\n            return undefined;\n        }\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [handleResize, isModalOpen]);\n\n    openModalSubscriber?.((open: boolean) => {\n        setIsModalOpen(open);\n    });\n\n    if (!iconNode || !isModalOpen) {\n        return null;\n    }\n\n    return (\n        <Portal>\n            <div\n                className={`${b()} ${bGlobal()}`}\n                style={position}\n                onClick={onClick}\n                onClickCapture={onClickCapture}\n                data-toast\n            >\n                <div className={b('icon')}>{iconNode}</div>\n            </div>\n        </Portal>\n    );\n};\n\nHighlightedItem.displayName = 'HighlightedItem';\n"],"names":["React"],"mappings":";;;;;;;AAUA,MAAM,CAAC,GAAG,WAAW,CAAC,gCAAgC,EAAE,MAAM,CAAC;AAC/D,MAAM,OAAO,GAAG,KAAK,CAAC,gCAAgC,CAAC;AASvD,MAAM,aAAa,GAAG,GAAG;AAElB,MAAM,eAAe,GAA6B,CAAC,EACtD,OAAO,EACP,QAAQ,EACR,OAAO,EACP,cAAc,GACD,KAAI;AACjB,IAAA,MAAM,EAAC,mBAAmB,EAAC,GAAG,0BAA0B,EAAE;AAC1D,IAAA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC;AACrC,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,MAAM,EAAE,CAAC;AACZ,KAAA,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IAE9D,MAAM,qBAAqB,GAAG,OAAO,CACjC,MACI,UAAU,CACN,MAAK;;AACD,QAAA,MAAM,EACF,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,CAAC,EACR,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,GACb,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,qBAAqB,EAAE,KAAI,EAAE;AAEnD,QAAA,WAAW,CAAC;AACR,YAAA,GAAG,EAAE,GAAG,GAAG,MAAM,CAAC,OAAO;AACzB,YAAA,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,OAAO;YAC3B,KAAK;YACL,MAAM;AACT,SAAA,CAAC;AACN,KAAC,EACD,aAAa,EACb,EAAC,OAAO,EAAE,IAAI,EAAC,CAClB,EACL,CAAC,OAAO,CAAC,CACZ;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,qBAAqB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAExF,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,WAAW,EAAE;AACd,YAAA,OAAO,SAAS;;AAGpB,QAAA,YAAY,EAAE;AAEd,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;AAE/C,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACtD,SAAC;AACL,KAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE/B,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAG,CAAC,IAAa,KAAI;QACpC,cAAc,CAAC,IAAI,CAAC;AACxB,KAAC,CAAC;AAEF,IAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE;AAC3B,QAAA,OAAO,IAAI;;IAGf,QACIA,6BAAC,MAAM,EAAA,IAAA;QACHA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAG,EAAA,CAAC,EAAE,CAAI,CAAA,EAAA,OAAO,EAAE,CAAE,CAAA,EAChC,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA;AAG9B,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAG,EAAA,QAAQ,CAAO,CACzC,CACD;AAEjB;AAEA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

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

@@ -0,0 +1,4 @@
+var styles = {"gn-composite-bar-highlighted-item":"HighlightedItem-module__gn-composite-bar-highlighted-item___8jg4a","gnCompositeBarHighlightedItem":"HighlightedItem-module__gn-composite-bar-highlighted-item___8jg4a","gn-composite-bar-highlighted-item__icon":"HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v","gnCompositeBarHighlightedItemIcon":"HighlightedItem-module__gn-composite-bar-highlighted-item__icon___zlo6v"};
+
+export { styles as default };
+//# sourceMappingURL=HighlightedItem.module.scss.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.module.scss.js.map

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

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

@@ -0,0 +1 @@
+.Item-module__gn-composite-bar-item___-pkx5{background:none;border:none;color:inherit;font:inherit;outline:inherit;text-decoration:inherit}.Item-module__gn-composite-bar-item___-pkx5:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.Item-module__gn-composite-bar-item___-pkx5{--gn-composite-bar-item-action-size:36px;--_--horizontal-divider-line-color:var(--g-color-line-generic);--_--item-background-color-hover:var(--g-color-base-simple-hover);--_--item-general-icon-color:var(--g-color-text-primary);--_--item-icon-color:var(--g-color-text-complementary);--_--item-text-color:var(--g-color-text-primary);--_--item-collapsed-radius:7px;--_--item-selected-text-color:var(--g-color-text-primary);--_--item-selected-background-color:var(--g-color-base-selection);align-items:center;cursor:pointer;display:flex;height:100%;min-width:0;padding:0;width:100%}.Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color))}.Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-item-icon-color,var(--_--item-icon-color)))}.gn-composite-bar-highlighted-item .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-composite-bar_subheader .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-footer-item .Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color))}.gn-composite-bar-highlighted-item .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-composite-bar_subheader .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf, .gn-footer-item .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon___ORFNf{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.Item-module__gn-composite-bar-item__icon-tooltip___PxU2i .Item-module__g-action-tooltip__description___UsHcG{color:var(--g-color-text-light-primary);margin-block-start:0}.Item-module__gn-composite-bar-item__icon-place___jPKRh{align-items:center;display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--gn-aside-header-min-width)}.Item-module__gn-composite-bar-item__title___wj5L5{align-items:center;display:flex;margin-right:16px;overflow:hidden}.Item-module__gn-composite-bar-item__title-text___cILJo{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--gn-aside-header-item-text-color,var(--_--item-text-color));display:-webkit-box;overflow:hidden;text-align:start}.Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__title-text___cILJo{color:var(--gn-aside-header-item-current-text-color,var(--_--item-selected-text-color))}.Item-module__gn-composite-bar-item__title-adornment___Xcopn{margin:0 10px}.Item-module__gn-composite-bar-item__collapse-item___Up6IX{background:none;border:none;color:inherit;font:inherit;outline:inherit;text-decoration:inherit}.Item-module__gn-composite-bar-item__collapse-item___Up6IX:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.Item-module__gn-composite-bar-item__collapse-item___Up6IX{--_--item-icon-color:var(--g-color-text-misc);align-items:center;cursor:pointer;display:flex;height:100%;padding:0 16px;width:100%}.Item-module__gn-composite-bar-item__collapse-item-icon___CD-ao{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color));margin-right:10px}.Item-module__gn-composite-bar-item__collapse-item___Up6IX .Item-module__gn-composite-bar-item__title-adornment___Xcopn{margin-right:0}.Item-module__gn-composite-bar-item__menu-divider___hkm-Z{border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));cursor:default;margin:0 8px;width:100%}.Item-module__gn-composite-bar-item__collapse-items-popup-content___a82to{padding:4px 0}.Item-module__gn-composite-bar-item__link___McAVN{align-items:center;display:flex;height:100%;width:100%}.Item-module__gn-composite-bar-item__link___McAVN, .Item-module__gn-composite-bar-item__link___McAVN:active, .Item-module__gn-composite-bar-item__link___McAVN:focus, .Item-module__gn-composite-bar-item__link___McAVN:hover, .Item-module__gn-composite-bar-item__link___McAVN:visited{color:inherit;outline:none;text-decoration:none}.Item-module__gn-composite-bar-item__btn-icon___SwT65{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.Item-module__gn-composite-bar-item_type_action___2jxO8{background:var(--g-color-base-float);border-radius:var(--gn-composite-bar-item-action-size);box-shadow:0 0 0 1px rgba(0,0,0,.03),0 5px 6px rgba(0,0,0,.12);height:var(--gn-composite-bar-item-action-size);justify-content:center;margin:0 10px 8px;transition:transform .1s ease-out,background-color .15s linear}.Item-module__gn-composite-bar-item_type_action___2jxO8:focus-visible{box-shadow:0 0 0 2px var(--g-color-line-misc)}.Item-module__gn-composite-bar-item_type_action___2jxO8:hover{background-color:var(--g-color-base-float-hover)}.Item-module__gn-composite-bar-item_type_action___2jxO8:active{box-shadow:0 1px 2px var(--g-color-sfx-shadow);transform:scale(.96);transition:none}.Item-module__gn-composite-bar-item_type_action___2jxO8 .Item-module__gn-composite-bar-item__icon-place___jPKRh{width:var(--gn-composite-bar-item-action-size)}.Item-module__gn-composite-bar-item_type_action___2jxO8.gn-footer-item{width:calc(100% - 20px)}.Item-module__gn-composite-bar-item__icon-tooltip_item-type_action___HUhUR{margin-left:10px}.Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM).Item-module__gn-composite-bar-item_current___NT2hB.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-expanded-radius)}.Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-expanded-radius)}.Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_compact___PVTeM):not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-expanded-radius)}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_type_action___2jxO8{width:var(--gn-composite-bar-item-action-size)}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_type_action___2jxO8 .Item-module__gn-composite-bar-item__title___wj5L5{margin:0}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_current___NT2hB.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65{background-color:transparent;position:relative}.Item-module__gn-composite-bar-item_compact___PVTeM.Item-module__gn-composite-bar-item_current___NT2hB.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:"";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.Item-module__gn-composite-bar-item_compact___PVTeM:hover.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65{background-color:transparent;position:relative}.Item-module__gn-composite-bar-item_compact___PVTeM:hover.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65:before{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:"";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.Item-module__gn-composite-bar-item_compact___PVTeM:not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65{background-color:transparent;position:relative}.Item-module__gn-composite-bar-item_compact___PVTeM:not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:"";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-19px;margin-top:-19px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AsideHeaderItem } from 'src/components/AsideHeader/types';
+export interface ItemProps extends AsideHeaderItem {
+}
+interface ItemInnerProps extends ItemProps {
+    className?: string;
+    collapseItems?: AsideHeaderItem[];
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+export declare const Item: React.FC<ItemInnerProps>;
+export {};

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

@@ -0,0 +1,148 @@
+import './Item.css';
+import React__default from 'react';
+import { Icon, Popup, List, ActionTooltip } from '@gravity-ui/uikit';
+import { ASIDE_HEADER_ICON_SIZE } from '../../../../constants.js';
+import { createBlock } from '../../../../utils/cn.js';
+import { useAsideHeaderContext } from '../../../AsideHeaderContext.js';
+import { HighlightedItem } from '../HighlightedItem/HighlightedItem.js';
+import { ITEM_TYPE_REGULAR, COLLAPSE_ITEM_ID, POPUP_PLACEMENT, POPUP_ITEM_HEIGHT } from '../constants.js';
+import { getSelectedItemIndex } from '../utils.js';
+import styles from './Item.module.scss.js';
+
+const b = createBlock('composite-bar-item', styles);
+function renderItemTitle(params) {
+    let titleNode = React__default.createElement("div", { className: b('title-text') }, params.title);
+    if (params.rightAdornment) {
+        titleNode = (React__default.createElement(React__default.Fragment, null,
+            titleNode,
+            React__default.createElement("div", { className: b('title-adornment') }, params.rightAdornment)));
+    }
+    return titleNode;
+}
+const defaultPopupPlacement = ['right-end'];
+const defaultPopupOffset = { mainAxis: 8, crossAxis: -20 };
+const Item = (props) => {
+    const { className, collapseItems, compact, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupRef: anchoreRefProp, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onOpenChangePopup, onItemClick, onItemClickCapture, itemWrapper, bringForward, rightAdornment, title, href, qa, } = props;
+    const [open, toggleOpen] = React__default.useState(false);
+    const ref = React__default.useRef(null);
+    const anchorRef = (anchoreRefProp === null || anchoreRefProp === undefined ? undefined : anchoreRefProp.current) ? anchoreRefProp : ref;
+    const highlightedRef = React__default.useRef(null);
+    const type = props.type || ITEM_TYPE_REGULAR;
+    const current = props.current || false;
+    const tooltipText = props.tooltipText || props.title;
+    const icon = props.icon;
+    const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;
+    const iconQa = props.iconQa;
+    const collapsedItem = props.id === COLLAPSE_ITEM_ID;
+    const handleOpenChangePopup = React__default.useCallback((newOpen, event, reason) => {
+        var _a;
+        if (event instanceof MouseEvent &&
+            event.target &&
+            ((_a = ref.current) === null || _a === undefined ? undefined : _a.contains(event.target))) {
+            return;
+        }
+        onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(newOpen, event, reason);
+    }, [onOpenChangePopup]);
+    if (type === 'divider') {
+        return React__default.createElement("div", { className: b('menu-divider') });
+    }
+    const makeIconNode = (iconEl) => {
+        // Ensure icon has the b('icon') class for proper styling
+        let processedIconEl = iconEl;
+        if (React__default.isValidElement(iconEl)) {
+            const existingClassName = iconEl.props.className || '';
+            if (!existingClassName.includes(b('icon'))) {
+                processedIconEl = React__default.cloneElement(iconEl, {
+                    className: `${existingClassName} ${b('icon')}`.trim(),
+                });
+            }
+        }
+        return compact ? (React__default.createElement(ActionTooltip, { title: "", description: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b('icon-tooltip', { 'item-type': type }) },
+            React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave(), className: b('btn-icon') }, processedIconEl))) : (processedIconEl);
+    };
+    const makeNode = ({ icon: iconEl, title: titleEl }) => {
+        const [Tag, tagProps] = href ? ['a', { href }] : ['button', {}];
+        const createdNode = (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Tag, Object.assign({}, tagProps, { className: b({ type, current, compact }, className), ref: ref, "data-qa": qa, onClick: (event) => {
+                    if (collapsedItem) {
+                        /**
+                         * This is the "more" button (three dots) that shows additional menu items in a popup.
+                         * We call onItemClick with collapsed=true to indicate this is a collapse action.
+                         */
+                        toggleOpen(!open);
+                        onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, true, event);
+                    }
+                    else {
+                        onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, false, event);
+                    }
+                }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
+                    if (!compact) {
+                        onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
+                    }
+                }, onMouseLeave: () => {
+                    if (!compact) {
+                        onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
+                    }
+                } }),
+                React__default.createElement("div", { className: b('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
+                React__default.createElement("div", { className: b('title'), title: typeof title === 'string' ? title : undefined }, titleEl)),
+            renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React__default.createElement(Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorElement: anchorRef.current, onOpenChange: handleOpenChangePopup }, renderPopupContent()))));
+        return createdNode;
+    };
+    const iconNode = icon ? (React__default.createElement(Icon, { qa: iconQa, data: icon, size: iconSize, className: b('icon') })) : null;
+    const titleNode = renderItemTitle({ title, rightAdornment });
+    const params = { icon: iconNode, title: titleNode };
+    let highlightedNode = null;
+    let node;
+    const opts = { compact: Boolean(compact), collapsed: false, item: props, ref };
+    if (typeof itemWrapper === 'function') {
+        node = itemWrapper(params, makeNode, opts);
+        highlightedNode =
+            bringForward &&
+                itemWrapper(params, ({ icon: iconEl }) => makeIconNode(iconEl), opts);
+    }
+    else {
+        node = makeNode(params);
+        highlightedNode = bringForward && makeIconNode(iconNode);
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        bringForward && (React__default.createElement(HighlightedItem, { iconNode: highlightedNode, iconRef: highlightedRef, onClick: (event) => onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, false, event), onClickCapture: onItemClickCapture })),
+        node,
+        open && collapsedItem && (collapseItems === null || collapseItems === undefined ? undefined : collapseItems.length) && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React__default.createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: anchorRef, onOpenChange: () => toggleOpen(false) })))));
+};
+Item.displayName = 'Item';
+function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onOpenChange, }) {
+    const { compact } = useAsideHeaderContext();
+    return (collapseItems === null || collapseItems === undefined ? undefined : collapseItems.length) ? (React__default.createElement(Popup, { strategy: "fixed", placement: POPUP_PLACEMENT, open: true, anchorElement: anchorRef.current, onOpenChange: onOpenChange },
+        React__default.createElement("div", { className: b('collapse-items-popup-content') },
+            React__default.createElement(List, { itemClassName: b('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, onItemClick: onOpenChange, renderItem: (item) => {
+                    const makeCollapseNode = ({ title: titleEl, icon: iconEl, }) => {
+                        const [Tag, tagProps] = item.href
+                            ? ['a', { href: item.href }]
+                            : ['button', {}];
+                        return (React__default.createElement(Tag, Object.assign({}, tagProps, { className: b('collapse-item'), onClick: (event) => {
+                                onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, true, event);
+                            } }),
+                            iconEl,
+                            titleEl));
+                    };
+                    const titleNode = renderItemTitle(item);
+                    const iconNode = item.icon && (React__default.createElement(Icon, { data: item.icon, size: 14, className: b('collapse-item-icon') }));
+                    const params = { title: titleNode, icon: iconNode };
+                    const opts = {
+                        compact: Boolean(compact),
+                        collapsed: true,
+                        item,
+                        ref: anchorRef,
+                    };
+                    if (typeof item.itemWrapper === 'function') {
+                        return item.itemWrapper(params, makeCollapseNode, opts);
+                    }
+                    else {
+                        return makeCollapseNode(params);
+                    }
+                } })))) : null;
+}
+
+export { Item };
+//# sourceMappingURL=Item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ActionTooltip, Icon, List, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';\n\nimport {AsideHeaderItem} from 'src/components/AsideHeader/types';\n\nimport {ASIDE_HEADER_ICON_SIZE} from '../../../../constants';\nimport {MakeItemParams} from '../../../../types';\nimport {createBlock} from '../../../../utils/cn';\nimport {useAsideHeaderContext} from '../../../AsideHeaderContext';\nimport {HighlightedItem} from '../HighlightedItem/HighlightedItem';\nimport {\n    COLLAPSE_ITEM_ID,\n    ITEM_TYPE_REGULAR,\n    POPUP_ITEM_HEIGHT,\n    POPUP_PLACEMENT,\n} from '../constants';\nimport {getSelectedItemIndex} from '../utils';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nexport interface ItemProps extends AsideHeaderItem {}\n\ninterface ItemInnerProps extends ItemProps {\n    className?: string;\n    collapseItems?: AsideHeaderItem[];\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n}\n\nfunction renderItemTitle(params: Pick<AsideHeaderItem, 'title' | 'rightAdornment'>) {\n    let titleNode = <div className={b('title-text')}>{params.title}</div>;\n\n    if (params.rightAdornment) {\n        titleNode = (\n            <React.Fragment>\n                {titleNode}\n                <div className={b('title-adornment')}>{params.rightAdornment}</div>\n            </React.Fragment>\n        );\n    }\n\n    return titleNode;\n}\n\nconst defaultPopupPlacement: PopupPlacement = ['right-end'];\nconst defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: 8, crossAxis: -20};\n\nexport const Item: React.FC<ItemInnerProps> = (props) => {\n    const {\n        className,\n        collapseItems,\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    } = props;\n\n    const [open, toggleOpen] = React.useState<boolean>(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 tooltipText = props.tooltipText || props.title;\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\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            onOpenChangePopup?.(newOpen, event, reason);\n        },\n        [onOpenChangePopup],\n    );\n\n    if (type === 'divider') {\n        return <div className={b('menu-divider')} />;\n    }\n\n    const makeIconNode = (iconEl: React.ReactNode): React.ReactNode => {\n        // Ensure icon has the b('icon') class for proper styling\n        let processedIconEl = iconEl;\n        if (React.isValidElement(iconEl)) {\n            const existingClassName = (iconEl.props as {className?: string}).className || '';\n            if (!existingClassName.includes(b('icon'))) {\n                processedIconEl = React.cloneElement(iconEl, {\n                    className: `${existingClassName} ${b('icon')}`.trim(),\n                } as React.Attributes);\n            }\n        }\n\n        return compact ? (\n            <ActionTooltip\n                title=\"\"\n                description={tooltipText}\n                disabled={!enableTooltip || (collapsedItem && open) || popupVisible}\n                placement=\"right\"\n                className={b('icon-tooltip', {'item-type': type})}\n            >\n                <div\n                    onMouseEnter={() => onMouseEnter?.()}\n                    onMouseLeave={() => onMouseLeave?.()}\n                    className={b('btn-icon')}\n                >\n                    {processedIconEl}\n                </div>\n            </ActionTooltip>\n        ) : (\n            processedIconEl\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 createdNode = (\n            <React.Fragment>\n                <Tag\n                    {...tagProps}\n                    className={b({type, current, compact}, className)}\n                    ref={ref}\n                    data-qa={qa}\n                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n                        if (collapsedItem) {\n                            /**\n                             * This is the \"more\" button (three dots) that shows additional menu items in a popup.\n                             * We call onItemClick with collapsed=true to indicate this is a collapse action.\n                             */\n                            toggleOpen(!open);\n                            onItemClick?.(props, true, event);\n                        } else {\n                            onItemClick?.(props, false, event);\n                        }\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\n                        className={b('title')}\n                        title={typeof title === 'string' ? title : undefined}\n                    >\n                        {titleEl}\n                    </div>\n                </Tag>\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 = icon ? (\n        <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />\n    ) : null;\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            {open && collapsedItem && collapseItems?.length && Boolean(anchorRef?.current) && (\n                <CollapsedPopup\n                    {...props}\n                    anchorRef={anchorRef}\n                    onOpenChange={() => toggleOpen(false)}\n                />\n            )}\n        </React.Fragment>\n    );\n};\n\nItem.displayName = 'Item';\n\ninterface CollapsedPopupProps {\n    anchorRef: React.RefObject<HTMLElement>;\n    onOpenChange: () => void;\n}\n\nfunction CollapsedPopup({\n    onItemClick,\n    collapseItems,\n    anchorRef,\n    onOpenChange,\n}: ItemInnerProps & CollapsedPopupProps) {\n    const {compact} = useAsideHeaderContext();\n    return collapseItems?.length ? (\n        <Popup\n            strategy=\"fixed\"\n            placement={POPUP_PLACEMENT}\n            open={true}\n            anchorElement={anchorRef.current}\n            onOpenChange={onOpenChange}\n        >\n            <div className={b('collapse-items-popup-content')}>\n                <List\n                    itemClassName={b('root-collapse-item')}\n                    items={collapseItems}\n                    selectedItemIndex={getSelectedItemIndex(collapseItems)}\n                    itemHeight={POPUP_ITEM_HEIGHT}\n                    itemsHeight={collapseItems.length * POPUP_ITEM_HEIGHT}\n                    virtualized={false}\n                    filterable={false}\n                    sortable={false}\n                    onItemClick={onOpenChange}\n                    renderItem={(item) => {\n                        const makeCollapseNode = ({\n                            title: titleEl,\n                            icon: iconEl,\n                        }: MakeItemParams) => {\n                            const [Tag, tagProps] = item.href\n                                ? ['a' as const, {href: item.href}]\n                                : ['button' as const, {}];\n\n                            return (\n                                <Tag\n                                    {...tagProps}\n                                    className={b('collapse-item')}\n                                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n                                        onItemClick?.(item, true, event);\n                                    }}\n                                >\n                                    {iconEl}\n                                    {titleEl}\n                                </Tag>\n                            );\n                        };\n\n                        const titleNode = renderItemTitle(item);\n                        const iconNode = item.icon && (\n                            <Icon data={item.icon} size={14} className={b('collapse-item-icon')} />\n                        );\n\n                        const params = {title: titleNode, icon: iconNode};\n                        const opts = {\n                            compact: Boolean(compact),\n                            collapsed: true,\n                            item,\n                            ref: anchorRef,\n                        };\n                        if (typeof item.itemWrapper === 'function') {\n                            return item.itemWrapper(params, makeCollapseNode, opts);\n                        } else {\n                            return makeCollapseNode(params);\n                        }\n                    }}\n                />\n            </div>\n        </Popup>\n    ) : null;\n}\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var styles = {"gn-composite-bar-item":"Item-module__gn-composite-bar-item___-pkx5","gnCompositeBarItem":"Item-module__gn-composite-bar-item___-pkx5","gn-composite-bar-item__icon":"Item-module__gn-composite-bar-item__icon___ORFNf","gnCompositeBarItemIcon":"Item-module__gn-composite-bar-item__icon___ORFNf","gn-composite-bar-item_current":"Item-module__gn-composite-bar-item_current___NT2hB","gnCompositeBarItemCurrent":"Item-module__gn-composite-bar-item_current___NT2hB","gn-composite-bar-item__icon-tooltip":"Item-module__gn-composite-bar-item__icon-tooltip___PxU2i","gnCompositeBarItemIconTooltip":"Item-module__gn-composite-bar-item__icon-tooltip___PxU2i","g-action-tooltip__description":"Item-module__g-action-tooltip__description___UsHcG","gActionTooltipDescription":"Item-module__g-action-tooltip__description___UsHcG","gn-composite-bar-item__icon-place":"Item-module__gn-composite-bar-item__icon-place___jPKRh","gnCompositeBarItemIconPlace":"Item-module__gn-composite-bar-item__icon-place___jPKRh","gn-composite-bar-item__title":"Item-module__gn-composite-bar-item__title___wj5L5","gnCompositeBarItemTitle":"Item-module__gn-composite-bar-item__title___wj5L5","gn-composite-bar-item__title-text":"Item-module__gn-composite-bar-item__title-text___cILJo","gnCompositeBarItemTitleText":"Item-module__gn-composite-bar-item__title-text___cILJo","gn-composite-bar-item__title-adornment":"Item-module__gn-composite-bar-item__title-adornment___Xcopn","gnCompositeBarItemTitleAdornment":"Item-module__gn-composite-bar-item__title-adornment___Xcopn","gn-composite-bar-item__collapse-item":"Item-module__gn-composite-bar-item__collapse-item___Up6IX","gnCompositeBarItemCollapseItem":"Item-module__gn-composite-bar-item__collapse-item___Up6IX","gn-composite-bar-item__collapse-item-icon":"Item-module__gn-composite-bar-item__collapse-item-icon___CD-ao","gnCompositeBarItemCollapseItemIcon":"Item-module__gn-composite-bar-item__collapse-item-icon___CD-ao","gn-composite-bar-item__menu-divider":"Item-module__gn-composite-bar-item__menu-divider___hkm-Z","gnCompositeBarItemMenuDivider":"Item-module__gn-composite-bar-item__menu-divider___hkm-Z","gn-composite-bar-item__collapse-items-popup-content":"Item-module__gn-composite-bar-item__collapse-items-popup-content___a82to","gnCompositeBarItemCollapseItemsPopupContent":"Item-module__gn-composite-bar-item__collapse-items-popup-content___a82to","gn-composite-bar-item__link":"Item-module__gn-composite-bar-item__link___McAVN","gnCompositeBarItemLink":"Item-module__gn-composite-bar-item__link___McAVN","gn-composite-bar-item__btn-icon":"Item-module__gn-composite-bar-item__btn-icon___SwT65","gnCompositeBarItemBtnIcon":"Item-module__gn-composite-bar-item__btn-icon___SwT65","gn-composite-bar-item_type_action":"Item-module__gn-composite-bar-item_type_action___2jxO8","gnCompositeBarItemTypeAction":"Item-module__gn-composite-bar-item_type_action___2jxO8","gn-composite-bar-item__icon-tooltip_item-type_action":"Item-module__gn-composite-bar-item__icon-tooltip_item-type_action___HUhUR","gnCompositeBarItemIconTooltipItemTypeAction":"Item-module__gn-composite-bar-item__icon-tooltip_item-type_action___HUhUR","gn-composite-bar-item_compact":"Item-module__gn-composite-bar-item_compact___PVTeM","gnCompositeBarItemCompact":"Item-module__gn-composite-bar-item_compact___PVTeM","gn-composite-bar-item_type_regular":"Item-module__gn-composite-bar-item_type_regular___wkhsT","gnCompositeBarItemTypeRegular":"Item-module__gn-composite-bar-item_type_regular___wkhsT"};
+
+export { styles as default };
+//# sourceMappingURL=Item.module.scss.js.map

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

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

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

@@ -0,0 +1,9 @@
+.MultipleTooltip-module__g-root_theme_dark-hc___sdXJ2 .MultipleTooltip-module__gn-multiple-tooltip___UCYs0, .MultipleTooltip-module__g-root_theme_dark___C5nrp .MultipleTooltip-module__gn-multiple-tooltip___UCYs0{--multiple-tooltip-item-bg-color:var(
+      --g-color-base-float-medium,var(--g-color-private-white-100-solid)
+  );--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,var(--g-color-base-background) 50%,transparent);--multiple-tooltip-backdrop-filter:blur(16px)}.MultipleTooltip-module__g-root_theme_dark-hc___sdXJ2 .MultipleTooltip-module__gn-multiple-tooltip___UCYs0{--multiple-tooltip-item-bg-color:var(
+      --g-color-base-float-medium,var(--g-color-private-white-150-solid)
+  )}.MultipleTooltip-module__g-root_theme_light-hc___75Wfu .MultipleTooltip-module__gn-multiple-tooltip___UCYs0, .MultipleTooltip-module__g-root_theme_light___B7ecO .MultipleTooltip-module__gn-multiple-tooltip___UCYs0{--multiple-tooltip-item-bg-color:var(
+      --g-color-base-float-medium,var(--g-color-private-black-550-solid)
+  );--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,var(--g-color-base-background) 50%,transparent);--multiple-tooltip-backdrop-filter:blur(12px)}
+.MultipleTooltip-module__gn-multiple-tooltip___UCYs0:before{background:var(--multiple-tooltip-backdrop-background);box-shadow:none;content:"";filter:var(--multiple-tooltip-backdrop-filter);height:100%;opacity:.7;position:absolute;width:100%;z-index:-1}.MultipleTooltip-module__gn-multiple-tooltip__popup___wE4Fl{--g-popup-background-color:transparent;--g-popup-border-color:transparent;--g-popup-border-width:0;background-color:transparent;box-shadow:none}.MultipleTooltip-module__gn-multiple-tooltip__items-container___1N4u-{align-items:flex-start;display:flex;flex-direction:column;padding:32px 40px 32px 12px}.MultipleTooltip-module__gn-multiple-tooltip__item___sz4Q6{align-items:center;background-color:var(--multiple-tooltip-item-bg-color);border-radius:5px;box-sizing:border-box;color:var(--g-color-text-light-primary);display:flex;height:30px;margin-bottom:5px;padding:8px 12px;position:relative;transition:transform .1s ease-in-out}.MultipleTooltip-module__gn-multiple-tooltip__item___sz4Q6:first-child, .MultipleTooltip-module__gn-multiple-tooltip__item___sz4Q6:not(.MultipleTooltip-module__gn-multiple-tooltip__item_divider___vF10S)+.MultipleTooltip-module__gn-multiple-tooltip__item___sz4Q6:not(.MultipleTooltip-module__gn-multiple-tooltip__item_divider___vF10S){margin-top:5px}.MultipleTooltip-module__gn-multiple-tooltip__item_divider___vF10S+.MultipleTooltip-module__gn-multiple-tooltip__item___sz4Q6:not(.MultipleTooltip-module__gn-multiple-tooltip__item_divider___vF10S){margin-top:4px}.MultipleTooltip-module__gn-multiple-tooltip__item_active___CP4PC{background-color:var(--multiple-tooltip-item-active-bg-color);transform:translateX(-12px)}.MultipleTooltip-module__gn-multiple-tooltip__item_divider___vF10S{height:15px;margin:0;visibility:hidden}
+.MultipleTooltip-module__g-popup___GO-A5.MultipleTooltip-module__gn-multiple-tooltip__popup___wE4Fl{--g-popup-background-color:transparent;--g-popup-border-color:transparent;--g-popup-border-width:0;background-color:transparent;box-shadow:none}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PopupProps } from '@gravity-ui/uikit';
+import { AsideHeaderItem } from 'src/components/AsideHeader/types';
+type MultipleTooltipProps = Pick<PopupProps, 'open' | 'placement'> & {
+    anchorRef: React.RefObject<HTMLElement>;
+    items: AsideHeaderItem[];
+};
+export declare const MultipleTooltip: React.FC<MultipleTooltipProps>;
+export {};