npm - @gravity-ui/navigation - Versions diffs - 5.0.0 → 6.0.0-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (358) hide show

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

@@ -1,106 +1,71 @@
 import './CompositeBar.css';
-import React__default, { useRef, useState, useCallback } from 'react';
-import { ChevronRight, ChevronDown } from '@gravity-ui/icons';
+import React__default, { useMemo, useRef, useCallback } from 'react';
 import { List } from '@gravity-ui/uikit';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import { createBlock } from '../../../utils/cn.js';
-import { UNGROUPED_ID } from '../AllPagesPanel/constants.js';
 import { Item } from './Item/Item.js';
-import { ScrollableWithScrollbar } from './ScrollableWithScrollbar/ScrollableWithScrollbar.js';
-import { COLLAPSE_ITEM_ID, ITEM_TYPE_REGULAR } from './constants.js';
-import { getSelectedItemIndex, getItemHeight, getItemsHeight } from './utils.js';
+import { COLLAPSE_ITEM_ID } from './constants.js';
+import { getGroupedItems, isGroupHeaderItem } from './grouping.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, compositeId, className, menuItemClassName, enableSorting = false, editMode = false, isExpanded, onToggleGroupCollapsed, onToggleMenuGroupVisibility, onToggleMenuItemVisibility, onFirstLevelSortEnd, onSecondLevelSortEnd, setCollapseBlocker, isCompactMode, }) => {
+const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, compact, compositeId, menuItemClassName, }) => {
     const ref = useRef(null);
-    const [hoveredGroupId, setHoveredGroupId] = useState(null);
     const onMouseLeave = useCallback(() => {
         var _a;
-        if (!isExpanded && document.hasFocus()) {
+        if (compact && document.hasFocus()) {
             (_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem(undefined);
         }
-    }, [isExpanded]);
-    const onItemClickByIndex = useCallback((_itemIndex, orginalItemClick) => (item, collapsed, event, options) => {
+    }, [compact]);
+    const onItemClickByIndex = useCallback((orginalItemClick) => (item, collapsed, event) => {
         // 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, 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 = useCallback(({ oldIndex, newIndex }) => {
-        if (onFirstLevelSortEnd) {
-            onFirstLevelSortEnd({ oldIndex, newIndex });
-        }
-    }, [onFirstLevelSortEnd]);
-    const handleSecondLevelSortEnd = useCallback((groupIndex) => ({ oldIndex, newIndex }) => {
-        if (onSecondLevelSortEnd) {
-            onSecondLevelSortEnd(groupIndex)({ oldIndex, newIndex });
-        }
-    }, [onSecondLevelSortEnd]);
-    if (!items || items.length === 0) {
-        return null;
-    }
-    return (React__default.createElement("div", { className: className },
-        React__default.createElement(List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex(items) : undefined, itemHeight: (item) => getItemHeight(item, isCompactMode), itemsHeight: (items) => 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 || ITEM_TYPE_REGULAR;
-                if (!groupId) {
-                    return (React__default.createElement(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 === UNGROUPED_ID;
-                const isGroupHovered = hoveredGroupId === item.id;
-                let groupIcon = item.icon;
-                if (isGroupHovered) {
-                    groupIcon = isCollapsed ? ChevronRight : ChevronDown;
-                }
-                return (React__default.createElement("div", { className: b('menu-group', { expanded: !isCollapsed, wrapper: true }) },
-                    hasHeader && !isUngrouped && (React__default.createElement(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__default.createElement(List, { items: groupListItems, sortable: enableSorting, onSortEnd: handleSecondLevelSortEnd(itemIndex), virtualized: false, filterable: false, itemClassName: b('menu-group-item', {
-                            edit: enableSorting,
-                            collapsed: !isExpanded,
-                        }), itemHeight: (item) => getItemHeight(item, isCompactMode), itemsHeight: (items) => getItemsHeight(items, isCompactMode), renderItem: (nestedItem, _isNestedItemActive, nestedItemIndex) => {
-                            return (React__default.createElement(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 })));
-                        } }))));
-            } })));
+    return (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', menuItemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => {
+            let menuPopupItems;
+            let menuPopupTitle;
+            if (item.id === COLLAPSE_ITEM_ID) {
+                menuPopupItems = collapseItems;
+            }
+            else if (isGroupHeaderItem(item)) {
+                menuPopupItems = item.groupChildren;
+                menuPopupTitle = item.groupPopupTitle;
+            }
+            return (React__default.createElement(Item, Object.assign({}, item, { compact: compact, popupItemClassName: menuItemClassName, menuPopupItems: menuPopupItems, menuPopupTitle: menuPopupTitle, onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(item.onItemClick) })));
+        } }));
 };
-const CompositeBar = ({ type, items, onItemClick, onMoreClick, onToggleGroupCollapsed, setCollapseBlocker, isExpanded, compositeId, className, menuItemClassName, editMode = false, isCompactMode, }) => {
-    if (!items || items.length === 0) {
+const CompositeBar = ({ type, items, menuGroups, menuMoreTitle, onItemClick, onMoreClick, compact, compositeId, menuItemClassName, }) => {
+    const groupedItems = useMemo(() => getGroupedItems(items, menuGroups), [items, menuGroups]);
+    if (groupedItems.length === 0) {
         return null;
     }
+    let node;
     if (type === 'menu') {
-        return (React__default.createElement(ScrollableWithScrollbar, { className: b(null, className), recalcDeps: [items.length] },
-            React__default.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 = getItemsMinHeight(groupedItems);
+        const collapseItem = getMoreButtonItem(menuMoreTitle);
+        node = (React__default.createElement("div", { className: b({ autosizer: true }), style: { minHeight } }, groupedItems.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(groupedItems, 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, menuItemClassName: menuItemClassName, collapseItems: collapseItems })));
+        }))));
+    }
+    else {
+        node = (React__default.createElement("div", { className: b({ subheader: true }) },
+            React__default.createElement(CompositeBarView, { type: "subheader", menuItemClassName: menuItemClassName, compact: compact, items: groupedItems, onItemClick: onItemClick })));
     }
-    return (React__default.createElement("div", { className: b({ subheader: true }, className) },
-        React__default.createElement(CompositeBarView, { menuItemClassName: menuItemClassName, type: "subheader", isExpanded: isExpanded, items: items, onItemClick: onItemClick, setCollapseBlocker: setCollapseBlocker, editMode: editMode, isCompactMode: isCompactMode })));
+    return node;
 };
-export { CompositeBar, CompositeBarView };
+export { CompositeBar };
 //# sourceMappingURL=CompositeBar.js.map

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

	@@ -1 +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":["React"],"mappings":"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"}
1	+ {"version":3,"file":"CompositeBar.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx"],"sourcesContent":["import React, {FC, ReactNode, useCallback, useMemo, useRef} from 'react';\n\nimport {List} from '@gravity-ui/uikit';\nimport AutoSizer, {Size} from 'react-virtualized-auto-sizer';\n\nimport {MenuGroup} from '../../../types';\nimport {createBlock} from '../../../utils/cn';\nimport {AsideHeaderItem} from '../../types';\n\nimport {Item} from './Item/Item';\nimport {ItemProps} from './Item/Item.types';\nimport {COLLAPSE_ITEM_ID} from './constants';\nimport {getGroupedItems, isGroupHeaderItem} from './grouping';\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 menuGroups?: MenuGroup[];\n onItemClick?: (\n item: AsideHeaderItem,\n collapsed: boolean,\n event: React.MouseEvent<HTMLElement, MouseEvent>,\n ) => void;\n menuMoreTitle?: string;\n onMoreClick?: () => void;\n compact: boolean;\n compositeId?: string;\n menuItemClassName?: 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 compact,\n compositeId,\n menuItemClassName,\n}) => {\n const ref = useRef<List<AsideHeaderItem>>(null);\n\n const onMouseLeave = useCallback(() => {\n if (compact && document.hasFocus()) {\n ref.current?.activateItem(undefined as unknown as number);\n }\n }, [compact]);\n\n const onItemClickByIndex = useCallback(\n (orginalItemClick: AsideHeaderItem['onItemClick']): ItemProps['onItemClick'] =>\n (item, collapsed, event) => {\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 [onItemClick, onMoreClick],\n );\n\n return (\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', menuItemClassName)}\n virtualized={false}\n filterable={false}\n sortable={false}\n renderItem={(item) => {\n let menuPopupItems: AsideHeaderItem[] \| undefined;\n let menuPopupTitle: string \| undefined;\n\n if (item.id === COLLAPSE_ITEM_ID) {\n menuPopupItems = collapseItems;\n } else if (isGroupHeaderItem(item)) {\n menuPopupItems = item.groupChildren;\n menuPopupTitle = item.groupPopupTitle;\n }\n\n return (\n <Item\n {...item}\n compact={compact}\n popupItemClassName={menuItemClassName}\n menuPopupItems={menuPopupItems}\n menuPopupTitle={menuPopupTitle}\n onMouseLeave={onMouseLeave}\n onItemClick={onItemClickByIndex(item.onItemClick)}\n />\n );\n }}\n />\n );\n};\n\nexport const CompositeBar: FC<CompositeBarProps> = ({\n type,\n items,\n menuGroups,\n menuMoreTitle,\n onItemClick,\n onMoreClick,\n compact,\n compositeId,\n menuItemClassName,\n}) => {\n const groupedItems = useMemo(() => getGroupedItems(items, menuGroups), [items, menuGroups]);\n\n if (groupedItems.length === 0) {\n return null;\n }\n let node: ReactNode;\n\n if (type === 'menu') {\n const minHeight = getItemsMinHeight(groupedItems);\n const collapseItem = getMoreButtonItem(menuMoreTitle);\n node = (\n <div className={b({autosizer: true})} style={{minHeight}}>\n {groupedItems.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 groupedItems,\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 menuItemClassName={menuItemClassName}\n collapseItems={collapseItems}\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 menuItemClassName={menuItemClassName}\n compact={compact}\n items={groupedItems}\n onItemClick={onItemClick}\n />\n </div>\n );\n }\n return node;\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAwBA,MAAM,CAAC,GAAG,WAAW,CAAC,eAAe,EAAE,MAAM,CAAC;AAsB9C,MAAM,gBAAgB,GAA8B,CAAC,EACjD,IAAI,EACJ,KAAK,EACL,WAAW,EACX,WAAW,EACX,aAAa,EACb,OAAO,EACP,WAAW,EACX,iBAAiB,GACpB,KAAI;AACD,IAAA,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC;AAE/C,IAAA,MAAM,YAAY,GAAG,WAAW,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;;AAEjE,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,gBAAgD,KAC7C,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,KAAI;;QAEvB,IAAI,IAAI,CAAC,EAAE,KAAK,gBAAgB,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,CAAC,WAAW,EAAE,WAAW,CAAC,CAC7B;AAED,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,IAAI,KAAK,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,GAAG,SAAS,EAC5E,UAAU,EAAE,aAAa,EACzB,WAAW,EAAE,cAAc,EAC3B,aAAa,EAAE,CAAC,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,EACrD,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,CAAC,IAAI,KAAI;AACjB,YAAA,IAAI,cAA6C;AACjD,YAAA,IAAI,cAAkC;AAEtC,YAAA,IAAI,IAAI,CAAC,EAAE,KAAK,gBAAgB,EAAE;gBAC9B,cAAc,GAAG,aAAa;;AAC3B,iBAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,EAAE;AAChC,gBAAA,cAAc,GAAG,IAAI,CAAC,aAAa;AACnC,gBAAA,cAAc,GAAG,IAAI,CAAC,eAAe;;AAGzC,YAAA,QACIA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,IACR,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,iBAAiB,EACrC,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAA,CAAA,CACnD;SAET,EAAA,CACH;AAEV,CAAC;AAEY,MAAA,YAAY,GAA0B,CAAC,EAChD,IAAI,EACJ,KAAK,EACL,UAAU,EACV,aAAa,EACb,WAAW,EACX,WAAW,EACX,OAAO,EACP,WAAW,EACX,iBAAiB,GACpB,KAAI;IACD,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;AAE3F,IAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AAC3B,QAAA,OAAO,IAAI;;AAEf,IAAA,IAAI,IAAe;AAEnB,IAAA,IAAI,IAAI,KAAK,MAAM,EAAE;AACjB,QAAA,MAAM,SAAS,GAAG,iBAAiB,CAAC,YAAY,CAAC;AACjD,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,aAAa,CAAC;AACrD,QAAA,IAAI,IACAA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,EAAE,KAAK,EAAE,EAAC,SAAS,EAAC,EAAA,EACnD,YAAY,CAAC,MAAM,KAAK,CAAC,KACtBA,6BAAC,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,GAAG,oBAAoB,CACnD,YAAY,EACZ,MAAM,EACN,YAAY,CACf;YACD,QACIA,sCAAK,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,EAAA;AACvB,gBAAAA,cAAA,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,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa,EAC9B,CAAA,CACA;AAEd,SAAC,CACO,CACf,CACC,CACT;;SACE;AACH,QAAA,IAAI,IACAA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,EAAA;YAChCA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACb,EAAA,IAAI,EAAC,WAAW,EAChB,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,WAAW,EAAA,CAC1B,CACA,CACT;;AAEL,IAAA,OAAO,IAAI;AACf;;;;"}

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

@@ -1,4 +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","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"};
 export { styles as default };
 //# sourceMappingURL=CompositeBar.module.scss.js.map

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

	@@ -1 +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))}
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/esm/components/AsideHeader/components/CompositeBar/Item/Item.css CHANGED Viewed

@@ -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;--gn-aside-header-item-expanded-radius:8px;--_--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%;margin-inline:auto;min-width:0;padding:0;width:100%}.Item-module__gn-composite-bar-item___-pkx5.gn-footer-item.Item-module__gn-composite-bar-item_type_regular___wkhsT{--gn-aside-header-item-icon-background-size:32px;height:32px}.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(--_--item-height,40px)}.Item-module__gn-composite-bar-item__title___wj5L5{align-items:center;display:flex;margin:0 var(--g-spacing-4) 0 var(--g-spacing-2);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__icon-popover___euq-P{align-items:center;border-radius:12px;box-sizing:border-box;display:flex;padding:var(--g-spacing-2)}.Item-module__gn-composite-bar-item__icon-popover_item-type_action___ep-D3{margin-left:10px}.Item-module__gn-composite-bar-item__popup-content___oys3t{border-radius:var(--gn-aside-header-item-expanded-radius);box-sizing:border-box;min-width:var(--gn-aside-header-size,240px)}.Item-module__gn-composite-bar-item__popup-content_collapsed___LGcy2{min-width:auto;width:var(--gn-aside-header-size,240px)}.Item-module__gn-composite-bar-item__popup-content___oys3t .Item-module__gn-composite-bar-item__root-menu-item___nlpvH[class]{background-color:transparent}.Item-module__gn-composite-bar-item__popup-title___2-tGd{color:var(--g-color-text-primary);font-size:var(--g-text-subheader-2-font-size);font-weight:var(--g-text-subheader-font-weight);line-height:var(--g-text-subheader-2-line-height);padding:var(--g-spacing-2) var(--g-spacing-2) 2px}.Item-module__gn-composite-bar-item__popup-item___MPgm3{box-sizing:border-box}.Item-module__gn-composite-bar-item__popup-item___MPgm3.Item-module__gn-composite-bar-item_type_regular___wkhsT{border-radius:var(--gn-aside-header-item-expanded-radius);height:32px}.Item-module__gn-composite-bar-item_hide-icon___bf5h3 .Item-module__gn-composite-bar-item__icon-place___jPKRh{display:none}.Item-module__gn-composite-bar-item_hide-icon___bf5h3 .Item-module__gn-composite-bar-item__title___wj5L5{margin-left:var(--g-spacing-4)}.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__chevron___ZZ-vf{align-items:center;display:flex;flex-shrink:0;margin-left:auto;margin-right:var(--g-spacing-1)}.Item-module__gn-composite-bar-item_compact___PVTeM .Item-module__gn-composite-bar-item__chevron___ZZ-vf{margin:0;position:absolute;right:8px}.Item-module__gn-composite-bar-item_compact___PVTeM .Item-module__gn-composite-bar-item__chevron___ZZ-vf svg{stroke:currentColor;stroke-width:1}.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%;position:absolute;top:50%;transform:translate(-50%,-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%;position:absolute;top:50%;transform:translate(-50%,-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%;position:absolute;top:50%;transform:translate(-50%,-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 CHANGED Viewed

@@ -1,19 +1,3 @@
 import React from 'react';
-import { AsideHeaderItem, SetCollapseBlocker } from '../../../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;
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-    editMode?: boolean;
-    onToggleVisibility?: () => void;
-}
+import { ItemInnerProps } from './Item.types';
 export declare const Item: React.FC<ItemInnerProps>;
-export {};

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

@@ -1,61 +1,34 @@
 import './Item.css';
 import React__default from 'react';
-import { Pin, PinFill } from '@gravity-ui/icons';
-import { Icon, Button, Popup } from '@gravity-ui/uikit';
-import { CSSTransition } from 'react-transition-group';
-import { ASIDE_HEADER_ICON_SIZE, ASIDE_HEADER_EXPAND_TRANSITION_DELAY } from '../../../../constants.js';
+import { ChevronRight } from '@gravity-ui/icons';
+import { Icon, Popup } from '@gravity-ui/uikit';
+import { ASIDE_HEADER_ICON_SIZE } from '../../../../constants.js';
 import { createBlock } from '../../../../utils/cn.js';
 import { HighlightedItem } from '../HighlightedItem/HighlightedItem.js';
-import { ITEM_TYPE_REGULAR } from '../constants.js';
+import { ITEM_TYPE_REGULAR, COLLAPSE_ITEM_ID } from '../constants.js';
+import { isGroupHeaderItem } from '../grouping.js';
+import { ItemPopup } from './ItemPopup.js';
+import { renderItemTitle } from './renderItemTitle.js';
 import styles from './Item.module.scss.js';
 const b = createBlock('composite-bar-item', styles);
-const itemTransitionClasses = {
-    enter: b('transition-title-enter'),
-    enterActive: b('transition-title-enter-active'),
-    enterDone: b('transition-title-enter-done'),
-    exit: b('transition-title-exit'),
-    exitActive: b('transition-title-exit-active'),
-    exitDone: b('transition-title-exit-done'),
-};
-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 defaultPopupOffset = { mainAxis: 14 };
+const CHEVRON_SIZE = 16;
+const CHEVRON_SIZE_COMPACT = 10;
 const Item = (props) => {
-    const { className, onMouseLeave, onMouseEnter, popupVisible = false, popupRef: anchoreRefProp, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onOpenChangePopup, onItemClick, onItemClickCapture, itemWrapper, bringForward, rightAdornment, title, href, qa, isExpanded = true, layout = 'vertical', editMode = false, onToggleVisibility, setCollapseBlocker, hidden, preventUserRemoving, } = props;
+    const { className, popupItemClassName, menuPopupItems, menuPopupTitle, compact, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupRef: anchoreRefProp, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onOpenChangePopup, onItemClick, onItemClickCapture, itemWrapper, bringForward, rightAdornment, title, href, qa, hideIcon = false, stopClickPropagation = false, } = props;
+    const [compactNavPopoverOpen, setCompactNavPopoverOpen] = 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);
-    React__default.useEffect(() => {
-        let didBlock = false;
-        if (popupVisible) {
-            didBlock = true;
-            setCollapseBlocker === null || setCollapseBlocker === undefined ? undefined : setCollapseBlocker(true);
-        }
-        return () => {
-            if (didBlock) {
-                setCollapseBlocker === null || setCollapseBlocker === undefined ? undefined : setCollapseBlocker(false);
-            }
-        };
-    }, [popupVisible, setCollapseBlocker]);
     const type = props.type || ITEM_TYPE_REGULAR;
     const current = props.current || false;
     const icon = props.icon;
     const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;
     const iconQa = props.iconQa;
-    const onPinButtonClick = React__default.useCallback((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        onToggleVisibility === null || onToggleVisibility === undefined ? undefined : onToggleVisibility();
-    }, [onToggleVisibility]);
+    const collapsedItem = props.id === COLLAPSE_ITEM_ID;
+    const isGroupHeader = isGroupHeaderItem(props);
     const handleOpenChangePopup = React__default.useCallback((newOpen, event, reason) => {
         var _a;
         if (event instanceof MouseEvent &&
@@ -63,44 +36,66 @@ const Item = (props) => {
             ((_a = ref.current) === null || _a === undefined ? undefined : _a.contains(event.target))) {
             return;
         }
+        if (newOpen) {
+            setCompactNavPopoverOpen(false);
+        }
         onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(newOpen, event, reason);
     }, [onOpenChangePopup]);
     if (type === 'divider') {
         return React__default.createElement("div", { className: b('menu-divider') });
     }
+    const compactPopoverDisabled = !enableTooltip || popupVisible || type === 'action';
     const makeIconNode = (iconEl) => {
-        return isExpanded ? iconEl : React__default.createElement("div", { className: b('btn-icon') }, iconEl);
+        if (!compact) {
+            return iconEl;
+        }
+        const iconButton = (React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave(), className: b('btn-icon') }, iconEl));
+        if (menuPopupItems === null || menuPopupItems === undefined ? undefined : menuPopupItems.length) {
+            return iconButton;
+        }
+        return (React__default.createElement(ItemPopup, { items: [props], open: compactNavPopoverOpen, onOpenChange: (nextOpen) => {
+                if (nextOpen && compactPopoverDisabled)
+                    return;
+                setCompactNavPopoverOpen(nextOpen);
+            }, hideIcon: true, itemClassName: popupItemClassName, disabled: compactPopoverDisabled, type: type, collapsed: compact, onItemClick: onItemClick }, iconButton));
     };
     const makeNode = ({ icon: iconEl, title: titleEl }) => {
         const [Tag, tagProps] = href ? ['a', { href }] : ['button', {}];
-        const ariaLabel = typeof title === 'string' ? title : undefined;
-        const createdNode = (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Tag, Object.assign({}, tagProps, { className: b({ type, current, collapsed: !isExpanded }, className), ref: ref, "data-qa": qa, "data-type": type, "aria-label": ariaLabel, onClick: (event) => {
-                    onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, false, event, { setCollapseBlocker });
-                }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
+        const tagNode = (React__default.createElement(Tag, Object.assign({}, tagProps, { className: b({ type, current, compact, 'hide-icon': hideIcon }, className), ref: ref, "data-type": type, "data-qa": qa, onClick: (event) => {
+                if (stopClickPropagation) {
+                    event.stopPropagation();
+                }
+                if (compact && !collapsedItem) {
+                    setCompactNavPopoverOpen(false);
+                }
+                onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, collapsedItem, event);
+            }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
+                if (!compact) {
                     onMouseEnter === null || onMouseEnter === undefined ? undefined : onMouseEnter();
-                }, onMouseLeave: () => {
+                }
+            }, onMouseLeave: () => {
+                if (!compact) {
                     onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
-                } }),
-                React__default.createElement("div", { className: b('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
-                layout === 'vertical' && (React__default.createElement(CSSTransition, { in: isExpanded, timeout: ASIDE_HEADER_EXPAND_TRANSITION_DELAY, classNames: itemTransitionClasses },
-                    React__default.createElement("div", { className: b('title'), title: typeof title === 'string' ? title : undefined }, titleEl))),
-                editMode && !preventUserRemoving && onToggleVisibility ? (React__default.createElement(Button, { onClick: onPinButtonClick, view: hidden ? 'flat-secondary' : 'flat-action', className: b('visibility-button') },
-                    React__default.createElement(Button.Icon, null, hidden ? React__default.createElement(Pin, null) : React__default.createElement(PinFill, null)))) : null),
+                }
+            } }),
+            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),
+            Boolean(menuPopupItems === null || menuPopupItems === undefined ? undefined : menuPopupItems.length) && (isGroupHeader || collapsedItem) && (React__default.createElement("div", { className: b('chevron') },
+                React__default.createElement(Icon, { data: ChevronRight, size: compact ? CHEVRON_SIZE_COMPACT : CHEVRON_SIZE })))));
+        const expandedMenuRows = menuPopupItems;
+        const showMenuPopup = Boolean(expandedMenuRows === null || expandedMenuRows === undefined ? undefined : expandedMenuRows.length) && (collapsedItem || isGroupHeader);
+        const wrappedTagNode = showMenuPopup && expandedMenuRows ? (React__default.createElement(ItemPopup, { items: expandedMenuRows, title: isGroupHeader ? menuPopupTitle : undefined, open: compactNavPopoverOpen, itemClassName: popupItemClassName, onOpenChange: setCompactNavPopoverOpen, collapsed: collapsedItem ? true : compact, onItemClick: onItemClick }, tagNode)) : (tagNode);
+        const createdNode = (React__default.createElement(React__default.Fragment, null,
+            wrappedTagNode,
             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 iconNode = hideIcon || !icon ? null : (React__default.createElement(Icon, { qa: iconQa, data: icon, size: iconSize, className: b('icon') }));
     const titleNode = renderItemTitle({ title, rightAdornment });
     const params = { icon: iconNode, title: titleNode };
     let highlightedNode = null;
     let node;
-    const opts = {
-        isExpanded,
-        item: props,
-        ref,
-        setCollapseBlocker,
-    };
+    const opts = { compact: Boolean(compact), collapsed: false, item: props, ref };
     if (typeof itemWrapper === 'function') {
         node = itemWrapper(params, makeNode, opts);
         highlightedNode =
@@ -112,7 +107,7 @@ const Item = (props) => {
         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, { setCollapseBlocker }), onClickCapture: onItemClickCapture })),
+        bringForward && (React__default.createElement(HighlightedItem, { iconNode: highlightedNode, iconRef: highlightedRef, onClick: (event) => onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, false, event), onClickCapture: onItemClickCapture })),
         node));
 };
 Item.displayName = 'Item';