@gravity-ui/navigation 5.0.0 → 5.0.1

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

@@ -2,108 +2,156 @@ import './CompositeBar.css';
 'use strict';
 
 var React = require('react');
-var icons = require('@gravity-ui/icons');
 var uikit = require('@gravity-ui/uikit');
+var AutoSizer = require('react-virtualized-auto-sizer');
+var constants = require('../../../constants.js');
 var cn = require('../../../utils/cn.js');
-var constants$1 = require('../AllPagesPanel/constants.js');
 var Item = require('./Item/Item.js');
-var ScrollableWithScrollbar = require('./ScrollableWithScrollbar/ScrollableWithScrollbar.js');
-var constants = require('./constants.js');
+var MultipleTooltip = require('./MultipleTooltip/MultipleTooltip.js');
+var MultipleTooltipContext = require('./MultipleTooltip/MultipleTooltipContext.js');
+var constants$1 = require('./constants.js');
 var utils = require('./utils.js');
 var CompositeBar_module = require('./CompositeBar.module.scss.js');
 
 const b = cn.createBlock('composite-bar', CompositeBar_module.default);
-const CompositeBarView = ({ type, items, onItemClick, onMoreClick, compositeId, className, menuItemClassName, enableSorting = false, editMode = false, isExpanded, onToggleGroupCollapsed, onToggleMenuGroupVisibility, onToggleMenuItemVisibility, onFirstLevelSortEnd, onSecondLevelSortEnd, setCollapseBlocker, isCompactMode, }) => {
+const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, compact, compositeId, }) => {
     const ref = React.useRef(null);
-    const [hoveredGroupId, setHoveredGroupId] = React.useState(null);
+    const tooltipRef = React.useRef(null);
+    const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext.MultipleTooltipContext);
+    React.useEffect(() => {
+        function handleBlurWindow() {
+            if (multipleTooltip && multipleTooltipActive) {
+                setMultipleTooltipContextValue({ active: false });
+            }
+        }
+        window.addEventListener('blur', handleBlurWindow);
+        return () => {
+            window.removeEventListener('blur', handleBlurWindow);
+        };
+    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onTooltipMouseEnter = React.useCallback((e) => {
+        if (multipleTooltip &&
+            compact &&
+            !multipleTooltipActive &&
+            document.hasFocus() &&
+            activeIndex !== lastClickedItemIndex &&
+            e.clientX <= constants.ASIDE_HEADER_COMPACT_WIDTH) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
+                active: true,
+            });
+        }
+    }, [
+        multipleTooltip,
+        compact,
+        multipleTooltipActive,
+        activeIndex,
+        lastClickedItemIndex,
+        setMultipleTooltipContextValue,
+    ]);
+    const onTooltipMouseLeave = React.useCallback(() => {
+        if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
+                active: false,
+                lastClickedItemIndex: undefined,
+            });
+        }
+    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onMouseEnterByIndex = React.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 = React.useCallback(() => {
         var _a;
-        if (!isExpanded && document.hasFocus()) {
+        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 = React.useCallback((itemIndex, orginalItemClick) => (item, collapsed, event) => {
+        if (compact &&
+            multipleTooltip &&
+            itemIndex !== lastClickedItemIndex &&
+            item.id !== constants$1.COLLAPSE_ITEM_ID) {
+            setMultipleTooltipContextValue({
+                lastClickedItemIndex: itemIndex,
+                active: false,
+            });
         }
-    }, [isExpanded]);
-    const onItemClickByIndex = React.useCallback((_itemIndex, orginalItemClick) => (item, collapsed, event, options) => {
         // Handle clicks on the "more" button (collapse item)
-        if (item.id === constants.COLLAPSE_ITEM_ID && collapsed) {
+        if (item.id === constants$1.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, options);
+            onItemClick === null || onItemClick === undefined ? undefined : onItemClick(Object.assign(Object.assign({}, item), { 
+                // For collapsed popup items, preserve the item's own onItemClick
+                // since orginalItemClick belongs to the collapse button, not the item
+                onItemClick: collapsed ? item.onItemClick : orginalItemClick }), collapsed, event);
         }
-    }, [onItemClick, onMoreClick]);
-    const handleFirstLevelSortEnd = React.useCallback(({ oldIndex, newIndex }) => {
-        if (onFirstLevelSortEnd) {
-            onFirstLevelSortEnd({ oldIndex, newIndex });
-        }
-    }, [onFirstLevelSortEnd]);
-    const handleSecondLevelSortEnd = React.useCallback((groupIndex) => ({ oldIndex, newIndex }) => {
-        if (onSecondLevelSortEnd) {
-            onSecondLevelSortEnd(groupIndex)({ oldIndex, newIndex });
-        }
-    }, [onSecondLevelSortEnd]);
-    if (!items || items.length === 0) {
-        return null;
-    }
-    return (React.createElement("div", { className: className },
-        React.createElement(uikit.List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? utils.getSelectedItemIndex(items) : undefined, itemHeight: (item) => utils.getItemHeight(item, isCompactMode), itemsHeight: (items) => utils.getItemsHeight(items, isCompactMode), itemClassName: b('root-menu-item', { collapsed: !isExpanded }, menuItemClassName), virtualized: false, filterable: false, sortable: enableSorting, onSortEnd: enableSorting ? handleFirstLevelSortEnd : undefined, renderItem: (item, _isItemActive, itemIndex) => {
-                const groupId = item.groupId;
-                const itemType = item.type || constants.ITEM_TYPE_REGULAR;
-                if (!groupId) {
-                    return (React.createElement(Item.Item, Object.assign({}, item, { className: b('menu-item', {
-                            collapsed: !isExpanded,
-                            type: itemType,
-                        }), isExpanded: isExpanded, editMode: editMode, onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), setCollapseBlocker: setCollapseBlocker, onToggleVisibility: onToggleMenuItemVisibility
-                            ? () => onToggleMenuItemVisibility(item)
-                            : undefined })));
-                }
-                const isCollapsible = Boolean('collapsible' in item && item.collapsible);
-                const isCollapsed = Boolean('isCollapsed' in item && item.isCollapsed);
-                const groupListItems = ('items' in item && item.items) || [];
-                const hasHeader = item.title || item.icon || isCollapsible;
-                const isUngrouped = item.id === constants$1.UNGROUPED_ID;
-                const isGroupHovered = hoveredGroupId === item.id;
-                let groupIcon = item.icon;
-                if (isGroupHovered) {
-                    groupIcon = isCollapsed ? icons.ChevronRight : icons.ChevronDown;
-                }
-                return (React.createElement("div", { className: b('menu-group', { expanded: !isCollapsed, wrapper: true }) },
-                    hasHeader && !isUngrouped && (React.createElement(Item.Item, Object.assign({}, item, { className: b('menu-group-header', { collapsed: isCollapsed }), icon: groupIcon, isExpanded: isExpanded, editMode: editMode, setCollapseBlocker: setCollapseBlocker, onMouseEnter: () => {
-                            setHoveredGroupId(item.id);
-                        }, onMouseLeave: () => {
-                            setHoveredGroupId(null);
-                        }, onItemClick: onItemClickByIndex(itemIndex, onToggleGroupCollapsed
-                            ? () => onToggleGroupCollapsed(groupId)
-                            : undefined), onToggleVisibility: onToggleMenuGroupVisibility
-                            ? () => onToggleMenuGroupVisibility(groupId)
-                            : undefined }))),
-                    !isCollapsed && (React.createElement(uikit.List, { items: groupListItems, sortable: enableSorting, onSortEnd: handleSecondLevelSortEnd(itemIndex), virtualized: false, filterable: false, itemClassName: b('menu-group-item', {
-                            edit: enableSorting,
-                            collapsed: !isExpanded,
-                        }), itemHeight: (item) => utils.getItemHeight(item, isCompactMode), itemsHeight: (items) => utils.getItemsHeight(items, isCompactMode), renderItem: (nestedItem, _isNestedItemActive, nestedItemIndex) => {
-                            return (React.createElement(Item.Item, Object.assign({}, nestedItem, { isExpanded: isExpanded, className: b('group-item'), editMode: editMode, setCollapseBlocker: setCollapseBlocker, onMouseEnter: () => {
-                                    setHoveredGroupId(nestedItem.id);
-                                }, onMouseLeave: () => {
-                                    setHoveredGroupId(null);
-                                }, onItemClick: onItemClickByIndex(
-                                // +1 because the first item is the group header
-                                itemIndex + nestedItemIndex + 1, nestedItem.onItemClick), onToggleVisibility: onToggleMenuItemVisibility
-                                    ? () => onToggleMenuItemVisibility(nestedItem)
-                                    : undefined })));
-                        } }))));
-            } })));
+    }, [
+        compact,
+        lastClickedItemIndex,
+        multipleTooltip,
+        onItemClick,
+        onMoreClick,
+        setMultipleTooltipContextValue,
+    ]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
+            React.createElement(uikit.List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? utils.getSelectedItemIndex(items) : undefined, itemHeight: utils.getItemHeight, itemsHeight: utils.getItemsHeight, itemClassName: b('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => (React.createElement(Item.Item, Object.assign({}, item, { enableTooltip: multipleTooltip ? false : item.enableTooltip, compact: compact, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), collapseItems: collapseItems }))) })),
+        type === 'menu' && multipleTooltip && (React.createElement(MultipleTooltip.MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
 };
-const CompositeBar = ({ type, items, onItemClick, onMoreClick, onToggleGroupCollapsed, setCollapseBlocker, isExpanded, compositeId, className, menuItemClassName, editMode = false, isCompactMode, }) => {
-    if (!items || items.length === 0) {
+const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, compact, compositeId, }) => {
+    if (items.length === 0) {
         return null;
     }
+    let node;
     if (type === 'menu') {
-        return (React.createElement(ScrollableWithScrollbar.ScrollableWithScrollbar, { className: b(null, className), recalcDeps: [items.length] },
-            React.createElement(CompositeBarView, { compositeId: compositeId, menuItemClassName: menuItemClassName, type: "menu", isExpanded: isExpanded, items: items, onItemClick: onItemClick, onMoreClick: onMoreClick, onToggleGroupCollapsed: onToggleGroupCollapsed, setCollapseBlocker: setCollapseBlocker, editMode: editMode, isCompactMode: isCompactMode })));
+        const minHeight = utils.getItemsMinHeight(items);
+        const collapseItem = utils.getMoreButtonItem(menuMoreTitle);
+        node = (React.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React.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 } = utils.getAutosizeListItems(items, height, collapseItem);
+            return (React.createElement("div", { style: { width, height } },
+                React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+        }))));
+    }
+    else {
+        node = (React.createElement("div", { className: b({ subheader: true }) },
+            React.createElement(CompositeBarView, { type: "subheader", compact: compact, items: items, onItemClick: onItemClick })));
     }
-    return (React.createElement("div", { className: b({ subheader: true }, className) },
-        React.createElement(CompositeBarView, { menuItemClassName: menuItemClassName, type: "subheader", isExpanded: isExpanded, items: items, onItemClick: onItemClick, setCollapseBlocker: setCollapseBlocker, editMode: editMode, isCompactMode: isCompactMode })));
+    return React.createElement(MultipleTooltipContext.MultipleTooltipProvider, null, node);
 };
 
 exports.CompositeBar = CompositeBar;
-exports.CompositeBarView = CompositeBarView;
 //# sourceMappingURL=CompositeBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompositeBar.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx"],"sourcesContent":["import React, {FC, useCallback, useRef, useState} from 'react';\n\nimport {ChevronDown, ChevronRight} from '@gravity-ui/icons';\nimport {List, ListSortParams} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem, MenuItemsWithGroups, SetCollapseBlocker} from '../../types';\nimport {UNGROUPED_ID} from '../AllPagesPanel/constants';\n\nimport {Item, ItemProps} from './Item/Item';\nimport {ScrollableWithScrollbar} from './ScrollableWithScrollbar';\nimport {COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR} from './constants';\nimport {getItemHeight, getItemsHeight, getSelectedItemIndex} from './utils';\n\nimport styles from './CompositeBar.module.scss';\n\nconst b = createBlock('composite-bar', styles);\n\ntype CompositeBarProps = {\n    type: 'menu' | 'subheader';\n    setCollapseBlocker?: SetCollapseBlocker;\n    items?: MenuItemsWithGroups[];\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n        options: {setCollapseBlocker: SetCollapseBlocker | undefined},\n    ) => void;\n    menuMoreTitle?: string;\n    onMoreClick?: () => void;\n    /** When `true`, the navigation is expanded. When `false`, it is collapsed. */\n    isExpanded: boolean;\n    compositeId?: string;\n    className?: string;\n    menuItemClassName?: string;\n    editMode?: boolean;\n    onToggleGroupCollapsed?: (groupId: string) => void;\n    /** When `true`, menu items use compact height. */\n    isCompactMode?: boolean;\n};\n\ntype CompositeBarViewProps = CompositeBarProps & {\n    compositeId?: string;\n    items?: MenuItemsWithGroups[];\n    collapsedIds?: Record<string, boolean>;\n    enableSorting?: boolean;\n    editMode?: boolean;\n    onToggleGroupCollapsed?: (groupId: string) => void;\n    onToggleMenuItemVisibility?: (item: AsideHeaderItem) => void;\n    onToggleMenuGroupVisibility?: (groupId: string) => void;\n    onFirstLevelSortEnd?: (params: {oldIndex: number; newIndex: number}) => void;\n    onSecondLevelSortEnd?: (\n        groupIndex: number,\n    ) => (params: {oldIndex: number; newIndex: number}) => void;\n    /** When `true`, menu items use compact height. */\n    isCompactMode?: boolean;\n};\n\nexport const CompositeBarView: FC<CompositeBarViewProps> = ({\n    type,\n    items,\n    onItemClick,\n    onMoreClick,\n    compositeId,\n    className,\n    menuItemClassName,\n    enableSorting = false,\n    editMode = false,\n    isExpanded,\n    onToggleGroupCollapsed,\n    onToggleMenuGroupVisibility,\n    onToggleMenuItemVisibility,\n    onFirstLevelSortEnd,\n    onSecondLevelSortEnd,\n    setCollapseBlocker,\n    isCompactMode,\n}) => {\n    const ref = useRef<List<AsideHeaderItem>>(null);\n    const [hoveredGroupId, setHoveredGroupId] = useState<string | null>(null);\n\n    const onMouseLeave = useCallback(() => {\n        if (!isExpanded && document.hasFocus()) {\n            ref.current?.activateItem(undefined as unknown as number);\n        }\n    }, [isExpanded]);\n\n    const onItemClickByIndex = useCallback(\n        (\n            _itemIndex: number,\n            orginalItemClick: AsideHeaderItem['onItemClick'],\n        ): ItemProps['onItemClick'] =>\n            (item, collapsed, event, options) => {\n                // Handle clicks on the \"more\" button (collapse item)\n                if (item.id === COLLAPSE_ITEM_ID && collapsed) {\n                    onMoreClick?.();\n                } else {\n                    onItemClick?.(\n                        {...item, onItemClick: orginalItemClick},\n                        collapsed,\n                        event,\n                        options,\n                    );\n                }\n            },\n        [onItemClick, onMoreClick],\n    );\n\n    const handleFirstLevelSortEnd = useCallback(\n        ({oldIndex, newIndex}: ListSortParams) => {\n            if (onFirstLevelSortEnd) {\n                onFirstLevelSortEnd({oldIndex, newIndex});\n            }\n        },\n        [onFirstLevelSortEnd],\n    );\n\n    const handleSecondLevelSortEnd = useCallback(\n        (groupIndex: number) =>\n            ({oldIndex, newIndex}: ListSortParams) => {\n                if (onSecondLevelSortEnd) {\n                    onSecondLevelSortEnd(groupIndex)({oldIndex, newIndex});\n                }\n            },\n        [onSecondLevelSortEnd],\n    );\n\n    if (!items || items.length === 0) {\n        return null;\n    }\n\n    return (\n        <div className={className}>\n            <List<MenuItemsWithGroups>\n                id={compositeId}\n                ref={ref}\n                items={items}\n                selectedItemIndex={type === 'menu' ? getSelectedItemIndex(items) : undefined}\n                itemHeight={(item) => getItemHeight(item, isCompactMode)}\n                itemsHeight={(items) => getItemsHeight(items, isCompactMode)}\n                itemClassName={b('root-menu-item', {collapsed: !isExpanded}, menuItemClassName)}\n                virtualized={false}\n                filterable={false}\n                sortable={enableSorting}\n                onSortEnd={enableSorting ? handleFirstLevelSortEnd : undefined}\n                renderItem={(item, _isItemActive, itemIndex) => {\n                    const groupId = item.groupId;\n                    const itemType = item.type || ITEM_TYPE_REGULAR;\n\n                    if (!groupId) {\n                        return (\n                            <Item\n                                {...item}\n                                className={b('menu-item', {\n                                    collapsed: !isExpanded,\n                                    type: itemType,\n                                })}\n                                isExpanded={isExpanded}\n                                editMode={editMode}\n                                onMouseLeave={onMouseLeave}\n                                onItemClick={onItemClickByIndex(itemIndex, item.onItemClick)}\n                                setCollapseBlocker={setCollapseBlocker}\n                                onToggleVisibility={\n                                    onToggleMenuItemVisibility\n                                        ? () => onToggleMenuItemVisibility(item)\n                                        : undefined\n                                }\n                            />\n                        );\n                    }\n\n                    const isCollapsible = Boolean('collapsible' in item && item.collapsible);\n                    const isCollapsed = Boolean('isCollapsed' in item && item.isCollapsed);\n                    const groupListItems = ('items' in item && item.items) || [];\n                    const hasHeader = item.title || item.icon || isCollapsible;\n\n                    const isUngrouped = item.id === UNGROUPED_ID;\n                    const isGroupHovered = hoveredGroupId === item.id;\n\n                    let groupIcon = item.icon;\n\n                    if (isGroupHovered) {\n                        groupIcon = isCollapsed ? ChevronRight : ChevronDown;\n                    }\n\n                    return (\n                        <div className={b('menu-group', {expanded: !isCollapsed, wrapper: true})}>\n                            {hasHeader && !isUngrouped && (\n                                <Item\n                                    {...item}\n                                    className={b('menu-group-header', {collapsed: isCollapsed})}\n                                    icon={groupIcon}\n                                    isExpanded={isExpanded}\n                                    editMode={editMode}\n                                    setCollapseBlocker={setCollapseBlocker}\n                                    onMouseEnter={() => {\n                                        setHoveredGroupId(item.id);\n                                    }}\n                                    onMouseLeave={() => {\n                                        setHoveredGroupId(null);\n                                    }}\n                                    onItemClick={onItemClickByIndex(\n                                        itemIndex,\n                                        onToggleGroupCollapsed\n                                            ? () => onToggleGroupCollapsed(groupId)\n                                            : undefined,\n                                    )}\n                                    onToggleVisibility={\n                                        onToggleMenuGroupVisibility\n                                            ? () => onToggleMenuGroupVisibility(groupId)\n                                            : undefined\n                                    }\n                                />\n                            )}\n\n                            {!isCollapsed && (\n                                <List<MenuItemsWithGroups>\n                                    items={groupListItems}\n                                    sortable={enableSorting}\n                                    onSortEnd={handleSecondLevelSortEnd(itemIndex)}\n                                    virtualized={false}\n                                    filterable={false}\n                                    itemClassName={b('menu-group-item', {\n                                        edit: enableSorting,\n                                        collapsed: !isExpanded,\n                                    })}\n                                    itemHeight={(item) => getItemHeight(item, isCompactMode)}\n                                    itemsHeight={(items) => getItemsHeight(items, isCompactMode)}\n                                    renderItem={(\n                                        nestedItem,\n                                        _isNestedItemActive,\n                                        nestedItemIndex,\n                                    ) => {\n                                        return (\n                                            <Item\n                                                {...nestedItem}\n                                                isExpanded={isExpanded}\n                                                className={b('group-item')}\n                                                editMode={editMode}\n                                                setCollapseBlocker={setCollapseBlocker}\n                                                onMouseEnter={() => {\n                                                    setHoveredGroupId(nestedItem.id);\n                                                }}\n                                                onMouseLeave={() => {\n                                                    setHoveredGroupId(null);\n                                                }}\n                                                onItemClick={onItemClickByIndex(\n                                                    // +1 because the first item is the group header\n                                                    itemIndex + nestedItemIndex + 1,\n                                                    nestedItem.onItemClick,\n                                                )}\n                                                onToggleVisibility={\n                                                    onToggleMenuItemVisibility\n                                                        ? () =>\n                                                              onToggleMenuItemVisibility(nestedItem)\n                                                        : undefined\n                                                }\n                                            />\n                                        );\n                                    }}\n                                />\n                            )}\n                        </div>\n                    );\n                }}\n            />\n        </div>\n    );\n};\n\nexport const CompositeBar: FC<CompositeBarProps> = ({\n    type,\n    items,\n    onItemClick,\n    onMoreClick,\n    onToggleGroupCollapsed,\n    setCollapseBlocker,\n    isExpanded,\n    compositeId,\n    className,\n    menuItemClassName,\n    editMode = false,\n    isCompactMode,\n}) => {\n    if (!items || items.length === 0) {\n        return null;\n    }\n\n    if (type === 'menu') {\n        return (\n            <ScrollableWithScrollbar className={b(null, className)} recalcDeps={[items.length]}>\n                <CompositeBarView\n                    compositeId={compositeId}\n                    menuItemClassName={menuItemClassName}\n                    type=\"menu\"\n                    isExpanded={isExpanded}\n                    items={items}\n                    onItemClick={onItemClick}\n                    onMoreClick={onMoreClick}\n                    onToggleGroupCollapsed={onToggleGroupCollapsed}\n                    setCollapseBlocker={setCollapseBlocker}\n                    editMode={editMode}\n                    isCompactMode={isCompactMode}\n                />\n            </ScrollableWithScrollbar>\n        );\n    }\n\n    return (\n        <div className={b({subheader: true}, className)}>\n            <CompositeBarView\n                menuItemClassName={menuItemClassName}\n                type=\"subheader\"\n                isExpanded={isExpanded}\n                items={items}\n                onItemClick={onItemClick}\n                setCollapseBlocker={setCollapseBlocker}\n                editMode={editMode}\n                isCompactMode={isCompactMode}\n            />\n        </div>\n    );\n};\n"],"names":["createBlock","styles","useRef","useState","useCallback","COLLAPSE_ITEM_ID","List","getSelectedItemIndex","getItemHeight","getItemsHeight","ITEM_TYPE_REGULAR","Item","UNGROUPED_ID","ChevronRight","ChevronDown","ScrollableWithScrollbar"],"mappings":"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"}
+{"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?.(\n                        {\n                            ...item,\n                            // For collapsed popup items, preserve the item's own onItemClick\n                            // since orginalItemClick belongs to the collapse button, not the item\n                            onItemClick: collapsed ? item.onItemClick : orginalItemClick,\n                        },\n                        collapsed,\n                        event,\n                    );\n                }\n            },\n        [\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                            enableTooltip={multipleTooltip ? false : item.enableTooltip}\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":["createBlock","styles","useRef","useContext","MultipleTooltipContext","useCallback","ASIDE_HEADER_COMPACT_WIDTH","COLLAPSE_ITEM_ID","List","getSelectedItemIndex","getItemHeight","getItemsHeight","Item","MultipleTooltip","getItemsMinHeight","getMoreButtonItem","getAutosizeListItems","MultipleTooltipProvider"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,CAAC,GAAGA,cAAW,CAAC,eAAe,EAAEC,2BAAM,CAAC;AAqB9C,MAAM,gBAAgB,GAA8B,CAAC,EACjD,IAAI,EACJ,KAAK,EACL,WAAW,EACX,WAAW,EACX,aAAa,EACb,eAAe,GAAG,KAAK,EACvB,OAAO,EACP,WAAW,GACd,KAAI;AACD,IAAA,MAAM,GAAG,GAAGC,YAAM,CAAwB,IAAI,CAAC;AAC/C,IAAA,MAAM,UAAU,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAE/C,IAAA,MAAM,EACF,QAAQ,EAAE,8BAA8B,EACxC,MAAM,EAAE,qBAAqB,EAC7B,WAAW,EACX,oBAAoB,GACvB,GAAGC,gBAAU,CAACC,6CAAsB,CAAC;AAEtC,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,SAAS,gBAAgB,GAAA;AACrB,YAAA,IAAI,eAAe,IAAI,qBAAqB,EAAE;AAC1C,gBAAA,8BAA8B,CAAC,EAAC,MAAM,EAAE,KAAK,EAAC,CAAC;;;AAIvD,QAAA,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,CAAC;AAEjD,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,gBAAgB,CAAC;AACxD,SAAC;KACJ,EAAE,CAAC,eAAe,EAAE,qBAAqB,EAAE,8BAA8B,CAAC,CAAC;AAE5E,IAAA,MAAM,mBAAmB,GAAGC,iBAAW,CACnC,CAAC,CAAoB,KAAI;AACrB,QAAA,IACI,eAAe;YACf,OAAO;AACP,YAAA,CAAC,qBAAqB;YACtB,QAAQ,CAAC,QAAQ,EAAE;AACnB,YAAA,WAAW,KAAK,oBAAoB;AACpC,YAAA,CAAC,CAAC,OAAO,IAAIC,oCAA0B,EACzC;AACE,YAAA,8BAA8B,KAA9B,IAAA,IAAA,8BAA8B,KAA9B,SAAA,GAAA,SAAA,GAAA,8BAA8B,CAAG;AAC7B,gBAAA,MAAM,EAAE,IAAI;AACf,aAAA,CAAC;;AAEV,KAAC,EACD;QACI,eAAe;QACf,OAAO;QACP,qBAAqB;QACrB,WAAW;QACX,oBAAoB;QACpB,8BAA8B;AACjC,KAAA,CACJ;AAED,IAAA,MAAM,mBAAmB,GAAGD,iBAAW,CAAC,MAAK;QACzC,IAAI,eAAe,IAAI,qBAAqB,IAAI,QAAQ,CAAC,QAAQ,EAAE,EAAE;AACjE,YAAA,8BAA8B,KAA9B,IAAA,IAAA,8BAA8B,KAA9B,SAAA,GAAA,SAAA,GAAA,8BAA8B,CAAG;AAC7B,gBAAA,MAAM,EAAE,KAAK;AACb,gBAAA,oBAAoB,EAAE,SAAS;AAClC,aAAA,CAAC;;KAET,EAAE,CAAC,eAAe,EAAE,qBAAqB,EAAE,8BAA8B,CAAC,CAAC;IAE5E,MAAM,mBAAmB,GAAGA,iBAAW,CACnC,CAAC,SAAiB,KAAK,MAAK;AACxB,QAAA,IAAI,eAAe,IAAI,QAAQ,CAAC,QAAQ,EAAE,EAAE;YACxC,IAAI,0BAA0B,GAAG,qBAAqB;AACtD,YAAA,IAAI,CAAC,qBAAqB,IAAI,SAAS,KAAK,oBAAoB,EAAE;gBAC9D,0BAA0B,GAAG,IAAI;;YAErC,IACI,WAAW,KAAK,SAAS;gBACzB,qBAAqB,KAAK,0BAA0B,EACtD;gBACE;;AAEJ,YAAA,8BAA8B,CAAC;AAC3B,gBAAA,WAAW,EAAE,SAAS;AACtB,gBAAA,MAAM,EAAE,0BAA0B;AACrC,aAAA,CAAC;;AAEV,KAAC,EACD;QACI,eAAe;QACf,qBAAqB;QACrB,oBAAoB;QACpB,WAAW;QACX,8BAA8B;AACjC,KAAA,CACJ;AAED,IAAA,MAAM,YAAY,GAAGA,iBAAW,CAAC,MAAK;;AAClC,QAAA,IAAI,OAAO,IAAI,QAAQ,CAAC,QAAQ,EAAE,EAAE;YAChC,CAAA,EAAA,GAAA,GAAG,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAC,SAA8B,CAAC;AACzD,YAAA,IACI,eAAe;iBACd,WAAW,KAAK,SAAS,IAAI,oBAAoB,KAAK,SAAS,CAAC,EACnE;AACE,gBAAA,8BAA8B,CAAC;AAC3B,oBAAA,WAAW,EAAE,SAAS;AACtB,oBAAA,oBAAoB,EAAE,SAAS;AAClC,iBAAA,CAAC;;;AAGd,KAAC,EAAE;QACC,WAAW;QACX,OAAO;QACP,oBAAoB;QACpB,eAAe;QACf,8BAA8B;AACjC,KAAA,CAAC;AAEF,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CAClC,CACI,SAAiB,EACjB,gBAAgD,KAEhD,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,KAAI;AACvB,QAAA,IACI,OAAO;YACP,eAAe;AACf,YAAA,SAAS,KAAK,oBAAoB;AAClC,YAAA,IAAI,CAAC,EAAE,KAAKE,4BAAgB,EAC9B;AACE,YAAA,8BAA8B,CAAC;AAC3B,gBAAA,oBAAoB,EAAE,SAAS;AAC/B,gBAAA,MAAM,EAAE,KAAK;AAChB,aAAA,CAAC;;;QAIN,IAAI,IAAI,CAAC,EAAE,KAAKA,4BAAgB,IAAI,SAAS,EAAE;AAC3C,YAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,SAAA,GAAA,SAAA,GAAA,WAAW,EAAI;;aACZ;AACH,YAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,SAAA,GAAA,SAAA,GAAA,WAAW,iCAEA,IAAI,CAAA,EAAA;;;AAGP,gBAAA,WAAW,EAAE,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,gBAAgB,EAAA,CAAA,EAEhE,SAAS,EACT,KAAK,CACR;;AAET,KAAC,EACL;QACI,OAAO;QACP,oBAAoB;QACpB,eAAe;QACf,WAAW;QACX,WAAW;QACX,8BAA8B;AACjC,KAAA,CACJ;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAQ,EAAA,IAAA;QACX,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,EACf,YAAY,EAAE,mBAAmB,EACjC,YAAY,EAAE,mBAAmB,EAAA;YAEjC,KAAC,CAAA,aAAA,CAAAC,UAAI,EACD,EAAA,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,IAAI,KAAK,MAAM,GAAGC,0BAAoB,CAAC,KAAK,CAAC,GAAG,SAAS,EAC5E,UAAU,EAAEC,mBAAa,EACzB,WAAW,EAAEC,oBAAc,EAC3B,aAAa,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAClC,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,SAAS,MACvC,KAAA,CAAA,aAAA,CAACC,SAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,IAAI,EAAA,EACR,aAAa,EAAE,eAAe,GAAG,KAAK,GAAG,IAAI,CAAC,aAAa,EAC3D,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAC5C,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,EAC5D,aAAa,EAAE,aAAa,EAAA,CAAA,CAC9B,CACL,EAAA,CACH,CACA;AACL,QAAA,IAAI,KAAK,MAAM,IAAI,eAAe,KAC/B,KAAA,CAAA,aAAA,CAACC,+BAAe,EAAA,EACZ,IAAI,EAAE,OAAO,IAAI,qBAAqB,EACtC,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,CAAC,aAAa,CAAC,EAC1B,KAAK,EAAE,KAAK,EAAA,CACd,CACL,CACY;AAEzB,CAAC;AAEY,MAAA,YAAY,GAA0B,CAAC,EAChD,IAAI,EACJ,KAAK,EACL,aAAa,EACb,WAAW,EACX,WAAW,EACX,eAAe,GAAG,KAAK,EACvB,OAAO,EACP,WAAW,GACd,KAAI;AACD,IAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACpB,QAAA,OAAO,IAAI;;AAEf,IAAA,IAAI,IAAe;AAEnB,IAAA,IAAI,IAAI,KAAK,MAAM,EAAE;AACjB,QAAA,MAAM,SAAS,GAAGC,uBAAiB,CAAC,KAAK,CAAC;AAC1C,QAAA,MAAM,YAAY,GAAGC,uBAAiB,CAAC,aAAa,CAAC;AACrD,QAAA,IAAI,IACA,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,EAAE,KAAK,EAAE,EAAC,SAAS,EAAC,EAAA,EACnD,KAAK,CAAC,MAAM,KAAK,CAAC,KACf,oBAAC,SAAS,EAAA,IAAA,EACL,CAAC,IAAU,KAAI;YACZ,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK;YACvD,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM;AAE1D,YAAA,MAAM,EAAC,SAAS,EAAE,aAAa,EAAC,GAAGC,0BAAoB,CACnD,KAAK,EACL,MAAM,EACN,YAAY,CACf;YACD,QACI,6BAAK,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,EAAA;AACvB,gBAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EACb,EAAA,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAClC,CAAA,CACA;AAEd,SAAC,CACO,CACf,CACC,CACT;;SACE;AACH,QAAA,IAAI,IACA,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,EAAA;YAChC,KAAC,CAAA,aAAA,CAAA,gBAAgB,IACb,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EAC1B,CAAA,CACA,CACT;;AAEL,IAAA,OAAO,KAAC,CAAA,aAAA,CAAAC,8CAAuB,EAAE,IAAA,EAAA,IAAI,CAA2B;AACpE;;;;"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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","gn-composite-bar__menu-group-item":"CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI","gnCompositeBarMenuGroupItem":"CompositeBar-module__gn-composite-bar__menu-group-item___TLcnI","gn-composite-bar__menu-group-header":"CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21","gnCompositeBarMenuGroupHeader":"CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21","gn-composite-bar__menu-group":"CompositeBar-module__gn-composite-bar__menu-group___3hCzS","gnCompositeBarMenuGroup":"CompositeBar-module__gn-composite-bar__menu-group___3hCzS","gn-composite-bar__root-menu-item_compact":"CompositeBar-module__gn-composite-bar__root-menu-item_compact___vvKTD","gnCompositeBarRootMenuItemCompact":"CompositeBar-module__gn-composite-bar__root-menu-item_compact___vvKTD","gn-composite-bar__group-item":"CompositeBar-module__gn-composite-bar__group-item___L1pJ8","gnCompositeBarGroupItem":"CompositeBar-module__gn-composite-bar__group-item___L1pJ8","gn-composite-bar__menu-group-item_edit":"CompositeBar-module__gn-composite-bar__menu-group-item_edit___Es8er","gnCompositeBarMenuGroupItemEdit":"CompositeBar-module__gn-composite-bar__menu-group-item_edit___Es8er","gn-composite-bar__menu-group-item_compact":"CompositeBar-module__gn-composite-bar__menu-group-item_compact___-7tZl","gnCompositeBarMenuGroupItemCompact":"CompositeBar-module__gn-composite-bar__menu-group-item_compact___-7tZl","gn-composite-bar__menu-group-header_collapsed":"CompositeBar-module__gn-composite-bar__menu-group-header_collapsed___bTXn1","gnCompositeBarMenuGroupHeaderCollapsed":"CompositeBar-module__gn-composite-bar__menu-group-header_collapsed___bTXn1","gn-composite-bar__menu-item_type_regular":"CompositeBar-module__gn-composite-bar__menu-item_type_regular___8DHUR","gnCompositeBarMenuItemTypeRegular":"CompositeBar-module__gn-composite-bar__menu-item_type_regular___8DHUR","gn-composite-bar__menu-group_expanded":"CompositeBar-module__gn-composite-bar__menu-group_expanded___GY0oS","gnCompositeBarMenuGroupExpanded":"CompositeBar-module__gn-composite-bar__menu-group_expanded___GY0oS","gn-composite-bar__menu-group-toggle":"CompositeBar-module__gn-composite-bar__menu-group-toggle___4--VW","gnCompositeBarMenuGroupToggle":"CompositeBar-module__gn-composite-bar__menu-group-toggle___4--VW","gn-composite-bar__menu-group-toggle-placeholder":"CompositeBar-module__gn-composite-bar__menu-group-toggle-placeholder___vAqkn","gnCompositeBarMenuGroupTogglePlaceholder":"CompositeBar-module__gn-composite-bar__menu-group-toggle-placeholder___vAqkn","gn-composite-bar__menu-group-icon":"CompositeBar-module__gn-composite-bar__menu-group-icon___YVg-C","gnCompositeBarMenuGroupIcon":"CompositeBar-module__gn-composite-bar__menu-group-icon___YVg-C","gn-composite-bar__menu-item":"CompositeBar-module__gn-composite-bar__menu-item___zaw-R","gnCompositeBarMenuItem":"CompositeBar-module__gn-composite-bar__menu-item___zaw-R"};
+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"};
 
 exports.default = styles;
 //# sourceMappingURL=CompositeBar.module.scss.js.map

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

@@ -1 +1 @@
-.HighlightedItem-module__gn-composite-bar-highlighted-item___8jg4a{--_--background-color:var(--g-color-base-background);--_--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(--_--item-height,36px);justify-content:center;overflow:hidden;position:relative;transform:translateY(1px);width:var(--_--item-height,36px)}.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))}
+.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/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.js

@@ -3,7 +3,7 @@ import './HighlightedItem.css';
 
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
-var debounce = require('../../../../../_virtual/debounce.js');
+var debounceFn = require('lodash/debounce');
 var cn = require('../../../../utils/cn.js');
 var AsideHeaderContext = require('../../../AsideHeaderContext.js');
 var HighlightedItem_module = require('./HighlightedItem.module.scss.js');
@@ -20,7 +20,7 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
         height: 0,
     });
     const [isModalOpen, setIsModalOpen] = React.useState(false);
-    const handleResizeDebounced = React.useMemo(() => debounce.default(() => {
+    const handleResizeDebounced = React.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({

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

@@ -1 +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":["createBlock","styles","block","useAsideHeaderInnerContext","useState","useMemo","debounceFn","useCallback","useEffect","Portal"],"mappings":";;;;;;;;;AAUA,MAAM,CAAC,GAAGA,cAAW,CAAC,gCAAgC,EAAEC,8BAAM,CAAC;AAC/D,MAAM,OAAO,GAAGC,QAAK,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,GAAGC,6CAA0B,EAAE;AAC1D,IAAA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,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,GAAGA,cAAQ,CAAU,KAAK,CAAC;IAE9D,MAAM,qBAAqB,GAAGC,aAAO,CACjC,MACIC,gBAAU,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,GAAGC,iBAAW,CAAC,MAAM,qBAAqB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAExFC,eAAS,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,QACI,oBAACC,YAAM,EAAA,IAAA;QACH,KACI,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,YAAA,KAAA,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;;;;"}
+{"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":["createBlock","styles","block","useAsideHeaderInnerContext","useState","useMemo","useCallback","useEffect","Portal"],"mappings":";;;;;;;;;AAUA,MAAM,CAAC,GAAGA,cAAW,CAAC,gCAAgC,EAAEC,8BAAM,CAAC;AAC/D,MAAM,OAAO,GAAGC,QAAK,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,GAAGC,6CAA0B,EAAE;AAC1D,IAAA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,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,GAAGA,cAAQ,CAAU,KAAK,CAAC;IAE9D,MAAM,qBAAqB,GAAGC,aAAO,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,GAAGC,iBAAW,CAAC,MAAM,qBAAqB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAExFC,eAAS,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,QACI,oBAACC,YAAM,EAAA,IAAA;QACH,KACI,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,YAAA,KAAA,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/cjs/components/AsideHeader/components/CompositeBar/Item/Item.css

@@ -1,25 +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:var(--_--item-height);--_--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-action-color:var(--g-color-base-float);--_--item-action-color-hover:var(--g-color-base-float-hover);--_--item-selected-text-color:var(--g-color-text-primary);--_--item-selected-background-color:var(--g-color-base-selection);--_--zone-bg:transparent;--_--zone-bg-hover:var(
-      --gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover)
-  );--_--zone-current-bg:var(
-      --gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)
-  );--_--zone-current-bg-hover:var(
-      --gn-aside-header-item-current-background-color-hover,var(--_--zone-current-bg)
-  );align-items:center;cursor:pointer;display:flex;height:var(--_--item-height,36px);min-width:0;padding:0;width:100%}.gn-composite-bar_subheader .Item-module__gn-composite-bar-item___-pkx5{--_--zone-bg:var(--gn-aside-top-item-background-color,transparent);--_--zone-bg-hover:var(
-      --gn-aside-top-item-background-color-hover,var(--_--item-background-color-hover)
-  );--_--zone-current-bg:var(
-      --gn-aside-top-item-current-background-color,var(--_--item-selected-background-color)
-  );--_--zone-current-bg-hover:var(
-      --gn-aside-top-item-current-background-color-hover,var(--_--zone-current-bg)
-  )}.gn-composite-bar__menu-group_wrapper .Item-module__gn-composite-bar-item___-pkx5{--_--zone-bg-hover:var(
-      --gn-aside-main-group-item-background-color-hover,var(--_--item-background-color-hover)
-  );--_--zone-current-bg:var(
-      --gn-aside-main-group-item-current-background-color,var(--_--item-selected-background-color)
-  );--_--zone-current-bg-hover:var(
-      --gn-aside-main-group-item-current-background-color-hover,var(--_--zone-current-bg)
-  )}.gn-footer-item .Item-module__gn-composite-bar-item___-pkx5{--_--zone-bg-hover:var(
-      --gn-aside-bottom-item-background-color-hover,var(--_--item-background-color-hover)
-  );--_--zone-current-bg:var(
-      --gn-aside-bottom-item-current-background-color,var(--_--item-selected-background-color)
-  );--_--zone-current-bg-hover:var(
-      --gn-aside-bottom-item-current-background-color-hover,var(--_--zone-current-bg)
-  )}.Item-module__gn-composite-bar-item___-pkx5.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:var(--_--zone-bg)}.Item-module__gn-composite-bar-item___-pkx5.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___-pkx5.Item-module__gn-composite-bar-item_type_regular___wkhsT .Item-module__gn-composite-bar-item__btn-icon___SwT65:before{border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:"";height:var(--_--item-height);left:50%;margin-left:calc(var(--_--item-height)/-2);margin-top:calc(var(--_--item-height)/-2);position:absolute;top:50%;width:var(--_--item-height);z-index:-1}.Item-module__gn-composite-bar-item___-pkx5.Item-module__gn-composite-bar-item_current___NT2hB.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:var(--_--zone-current-bg)}.Item-module__gn-composite-bar-item___-pkx5:hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:var(--_--zone-current-bg-hover)}.Item-module__gn-composite-bar-item___-pkx5:not(.Item-module__gn-composite-bar-item_current___NT2hB):hover.Item-module__gn-composite-bar-item_type_regular___wkhsT{background-color:var(--_--zone-bg-hover)}.Item-module__gn-composite-bar-item__icon-place___jPKRh{align-items:center;color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color));display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--_--item-height,36px)}.Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon-place___jPKRh{color:var(--gn-aside-main-group-item-current-background-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-place___jPKRh{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-place___jPKRh{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.gn-composite-bar_subheader .Item-module__gn-composite-bar-item__icon-place___jPKRh{color:var(--gn-aside-top-item-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.gn-composite-bar_subheader .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon-place___jPKRh{color:var(--gn-aside-top-item-current-icon-color,var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color))))}.gn-footer-item .Item-module__gn-composite-bar-item__icon-place___jPKRh{color:var(--gn-aside-bottom-item-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.gn-footer-item .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__icon-place___jPKRh{color:var(--gn-aside-bottom-item-current-icon-color,var(--gn-aside-header-item-current-icon-color,var(--_--item-general-icon-color)))}.Item-module__gn-composite-bar-item__title___wj5L5{align-items:center;display:flex;justify-content:space-between;margin:0 var(--g-spacing-4) 0 var(--g-spacing-2);overflow:hidden}.Item-module__gn-composite-bar-item__transition-title-enter-active___AAvSZ, .Item-module__gn-composite-bar-item__transition-title-enter___4n6yR{opacity:0}.Item-module__gn-composite-bar-item__transition-title-enter-done___Ilzkv, .Item-module__gn-composite-bar-item__transition-title-exit___5-JKk{opacity:1;transition:opacity 50ms ease-in-out}.Item-module__gn-composite-bar-item__transition-title-exit-active___Dif7T, .Item-module__gn-composite-bar-item__transition-title-exit-done___PJvzY{opacity:0}.Item-module__gn-composite-bar-item__visibility-button___QaJg-{margin-left:auto}.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;font-size:var(--g-text-body-short-font-size);line-height:var(--g-text-body-short-line-height);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))}.gn-composite-bar_subheader .Item-module__gn-composite-bar-item__title-text___cILJo{color:var(--gn-aside-top-item-text-color,var(--_--item-text-color))}.gn-composite-bar_subheader .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__title-text___cILJo{color:var(--gn-aside-top-item-current-text-color,var(--_--item-selected-text-color))}.gn-footer-item .Item-module__gn-composite-bar-item__title-text___cILJo{color:var(--gn-aside-bottom-item-text-color,var(--_--item-text-color))}.gn-footer-item .Item-module__gn-composite-bar-item_current___NT2hB .Item-module__gn-composite-bar-item__title-text___cILJo{color:var(--gn-aside-bottom-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 10px;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(--gn-aside-header-item-action-color,var(--_--item-action-color));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-bottom:var(--g-spacing-2);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(--gn-aside-header-item-action-color-hover,var(--_--item-action-color-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% - var(--_--item-margin-inline)*2)}.Item-module__gn-composite-bar-item_collapsed___Ichlf.Item-module__gn-composite-bar-item_type_action___2jxO8{width:var(--gn-composite-bar-item-action-size)}.Item-module__gn-composite-bar-item_collapsed___Ichlf.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___-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-action-color:var(--g-color-base-float);--_--item-action-color-hover:var(--g-color-base-float-hover);--_--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___-pkx5.gn-footer-item{height:40px}.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(--gn-aside-header-item-action-color,var(--_--item-action-color));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(--gn-aside-header-item-action-color-hover,var(--_--item-action-color-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___PxU2i{align-items:center;box-sizing:border-box;display:flex;height:30px;padding:8px 12px}.Item-module__gn-composite-bar-item__icon-tooltip___PxU2i .g-action-tooltip__description{color:var(--g-color-text-light-primary);margin:0;margin-block:0}.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/cjs/components/AsideHeader/components/CompositeBar/Item/Item.d.ts

@@ -1,19 +1,12 @@
 import React from 'react';
-import { AsideHeaderItem, SetCollapseBlocker } from '../../../types';
+import { AsideHeaderItem } from 'src/components/AsideHeader/types';
 export interface ItemProps extends AsideHeaderItem {
 }
 interface ItemInnerProps extends ItemProps {
-    /** Registers a temporary block on collapse (e.g. while dropdown is open). Returns release function. */
-    setCollapseBlocker?: SetCollapseBlocker;
-    /** When `true`, the item is displayed in expanded form. */
-    isExpanded?: boolean;
-    /** Layout mode: 'horizontal' shows icon only, 'vertical' shows icon and title. Used in FooterBar. */
-    layout?: 'horizontal' | 'vertical';
     className?: string;
+    collapseItems?: AsideHeaderItem[];
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
-    editMode?: boolean;
-    onToggleVisibility?: () => void;
 }
 export declare const Item: React.FC<ItemInnerProps>;
 export {};