@gravity-ui/navigation 0.14.0 → 0.15.0

package/build/cjs/components/AsideHeader/AsideHeader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuItem, AsideHeaderDict, LogoProps } from '../types';
+import { MenuItem, AsideHeaderDict, LogoProps, SubheaderMenuItem } from '../types';
 import { DrawerItemProps } from '../Drawer/Drawer';
 import { RenderContentType } from '../Content';
 import './AsideHeader.scss';
@@ -20,7 +20,7 @@ interface AsideHeaderGeneralProps {
 }
 interface AsideHeaderDefaultProps {
     panelItems: DrawerItemProps[];
-    subheaderItems: MenuItem[];
+    subheaderItems: SubheaderMenuItem[];
     menuItems: MenuItem[];
     headerDecoration: boolean;
 }

package/build/cjs/components/AsideHeader/__stories__/moc.d.ts

@@ -1 +1,3 @@
+import { MenuItem } from 'src/components/types';
+export declare const menuItemsShowcase: MenuItem[];
 export declare const text = "\nDid you attend? He sang by grove ripe -\nThe bard of love, the singer of his mourning.\nWhen fields were silent by the early morning,\nTo sad and simple sounds of a pipe\nDid you attend?\n\nDid you behold in dark of forest leaf\nThe bard of love, the singer of his sadness?\nThe trace of tears, the smile, the utter paleness,\nThe quiet look, full of eternal grief,\nDid you behold?\n\nThen did you sigh when hearing how cries\nThe bard of love, the singer of his dole?\nWhen in the woods you saw the young man, sole,\nAnd met the look of his extinguished eyes,\nThen did you sigh?\n";

package/build/cjs/components/CompositeBar/CompositeBar.d.ts

@@ -1,14 +1,18 @@
 import React, { FC } from 'react';
-import { AsideHeaderDict, MenuItem } from '../types';
+import { AsideHeaderDict, MenuItem, SubheaderMenuItem } from '../types';
 import './CompositeBar.scss';
-interface CompositeBarBaseProps {
+export type CompositeBarItem = MenuItem | SubheaderMenuItem;
+type CompositeBarItems = {
+    type: 'menu';
     items: MenuItem[];
+} | {
+    type: 'subheader';
+    items: SubheaderMenuItem[];
+};
+export type CompositeBarProps = CompositeBarItems & {
     onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     multipleTooltip?: boolean;
-}
-export interface CompositeBarProps extends CompositeBarBaseProps {
-    enableCollapsing: boolean;
     dict?: AsideHeaderDict;
-}
+};
 export declare const CompositeBar: FC<CompositeBarProps>;
 export {};

package/build/cjs/components/CompositeBar/utils.d.ts

@@ -1,6 +1,7 @@
 import { AsideHeaderDict, MenuItem } from './../types';
-export declare function getItemHeight(item: MenuItem): 15 | 40 | 50;
-export declare function getItemsHeight(items: MenuItem[]): number;
+import { CompositeBarItem } from '../CompositeBar/CompositeBar';
+export declare function getItemHeight(item: CompositeBarItem): 40 | 15 | 50;
+export declare function getItemsHeight<T extends CompositeBarItem>(items: T[]): number;
 export declare function getSelectedItemIndex(items: MenuItem[]): number | undefined;
 export declare function getPinnedItems(items: MenuItem[]): MenuItem[];
 export declare function getItemsMinHeight(items: MenuItem[]): number;
@@ -9,3 +10,4 @@ export declare function getAutosizeListItems(items: MenuItem[], height: number,
     listItems: MenuItem[];
     collapseItems: MenuItem[];
 };
+export declare function isMenuItem(item: CompositeBarItem): item is MenuItem;

package/build/cjs/components/types.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconProps } from '@gravity-ui/uikit';
+import { ItemProps } from 'src/components/CompositeBar/Item/Item';
 export type MenuItemType = 'regular' | 'action' | 'divider';
 export interface MakeItemParams {
     icon?: React.ReactNode;
@@ -26,6 +27,7 @@ export interface MenuItem {
     type?: MenuItemType;
     afterMoreButton?: boolean;
 }
+export type SubheaderMenuItem = Omit<ItemProps, 'onItemClick' | 'onItemClickCapture'>;
 export declare enum MobileHeaderDict {
     CloseBurger = "button_close-burger",
     OpenBurger = "button_open-burger"

package/build/cjs/index.js

@@ -3635,6 +3635,9 @@ const POPUP_PLACEMENT = ['right-start', 'right-end', 'right'];
 const POPUP_ITEM_HEIGHT = 28;
 
 function getItemHeight$1(item) {
+    if (!isMenuItem(item)) {
+        return ITEM_HEIGHT;
+    }
     switch (item.type) {
         case 'action':
             return 50;
@@ -3721,6 +3724,9 @@ function getAutosizeListItems(items, height, collapseItem) {
     }
     return { listItems, collapseItems };
 }
+function isMenuItem(item) {
+    return (item === null || item === void 0 ? void 0 : item.id) !== undefined;
+}
 
 var css_248z$k = ".gn-composite-bar-item {\n  --composite-bar-item-action-size: 36px;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  cursor: pointer;\n}\n.gn-composite-bar-item__icon {\n  color: var(--g-color-text-misc);\n}\n.gn-composite-bar-item__icon-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.gn-composite-bar-item__title {\n  display: flex;\n  overflow: hidden;\n}\n.gn-composite-bar-item__title-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.gn-composite-bar-item__title-adornment {\n  margin: 0 10px;\n}\n.gn-composite-bar-item__collapse-item {\n  display: flex;\n  padding: 0 16px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment {\n  margin-right: 0;\n}\n.gn-composite-bar-item__menu-divider {\n  margin: 0 8px;\n  width: 100%;\n  border-top: 1px solid var(--g-color-line-generic);\n  cursor: default;\n}\n.gn-composite-bar-item__collapse-items-popup-content {\n  padding: 4px 0;\n}\n.gn-composite-bar-item__link {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.gn-composite-bar-item__link, .gn-composite-bar-item__link:hover, .gn-composite-bar-item__link:active, .gn-composite-bar-item__link:visited, .gn-composite-bar-item__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.gn-composite-bar-item__btn-icon {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.gn-composite-bar-item_type_action {\n  justify-content: center;\n  height: var(--composite-bar-item-action-size);\n  margin: 0 10px 8px;\n  background: var(--g-color-base-float);\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n  border-radius: var(--composite-bar-item-action-size);\n  transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.gn-composite-bar-item_type_action:focus {\n  box-shadow: 0 0 0 2px var(--g-color-line-misc);\n}\n.gn-composite-bar-item_type_action:focus:not(:focus-visible) {\n  box-shadow: none;\n}\n.gn-composite-bar-item_type_action:hover {\n  background-color: var(--g-color-base-float-hover);\n}\n.gn-composite-bar-item_type_action:active {\n  box-shadow: 0 1px 2px var(--g-color-sfx-shadow);\n  transition: none;\n  transform: scale(0.96);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place {\n  width: var(--composite-bar-item-action-size);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n  margin-right: 16px;\n}\n.gn-composite-bar-item__icon-tooltip_item-type_action {\n  margin-left: 10px;\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular {\n  background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular {\n  background-color: var(--g-color-base-simple-hover);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action {\n  width: var(--composite-bar-item-action-size);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n  margin: 0;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n  background-color: var(--g-color-base-simple-hover);\n}";
 styleInject(css_248z$k);
@@ -3783,7 +3789,7 @@ const Item$1 = (props) => {
                     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
                 }
             } },
-            React__default["default"].createElement("div", { className: b$l('icon-place') }, compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
+            React__default["default"].createElement("div", { className: b$l('icon-place') }, compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
                 React__default["default"].createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$l('btn-icon') }, iconEl))) : (iconEl)),
             React__default["default"].createElement("div", { className: b$l('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
             renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { contentClassName: b$l('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
@@ -3884,7 +3890,7 @@ var css_248z$i = ".gn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-
 styleInject(css_248z$i);
 
 const b$j = block('composite-bar');
-const CompositeBarView = ({ items, onItemClick, collapseItems, multipleTooltip = true, }) => {
+const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
     const ref = React.useRef(null);
     const tooltipRef = React.useRef(null);
     const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext);
@@ -3949,26 +3955,32 @@ const CompositeBarView = ({ items, onItemClick, collapseItems, multipleTooltip =
     }, [lastClickedItemIndex, setMultipleTooltipContextValue]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
-            React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => (React__default["default"].createElement(Item$1, { item: item, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems, enableTooltip: !multipleTooltip })) })),
-        React__default["default"].createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items })));
+            React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$j('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
+                    const itemExtraProps = isMenuItem(item) ? { item } : item;
+                    const enableTooltip = isMenuItem(item)
+                        ? !multipleTooltip
+                        : item.enableTooltip;
+                    return (React__default["default"].createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
+                } })),
+        type === 'menu' && (React__default["default"].createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
 };
-const CompositeBar = ({ items, enableCollapsing, dict, onItemClick, multipleTooltip = false, }) => {
+const CompositeBar = ({ type, items, dict, onItemClick, multipleTooltip = false, }) => {
     if (items.length === 0) {
         return null;
     }
     let node;
-    if (enableCollapsing) {
+    if (type === 'menu') {
         const minHeight = getItemsMinHeight(items);
         const collapseItem = getMoreButtonItem(dict);
         node = (React__default["default"].createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
             const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
             return (React__default["default"].createElement("div", { style: { width, height } },
-                React__default["default"].createElement(CompositeBarView, { items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+                React__default["default"].createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
         }))));
     }
     else {
         node = (React__default["default"].createElement("div", { className: b$j() },
-            React__default["default"].createElement(CompositeBarView, { items: items, onItemClick: onItemClick, multipleTooltip: multipleTooltip })));
+            React__default["default"].createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
     }
     return React__default["default"].createElement(MultipleTooltipProvider, null, node);
 };
@@ -4036,7 +4048,7 @@ class AsideHeader extends React__default["default"].Component {
                     React__default["default"].createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
                     React__default["default"].createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
                         this.renderHeader(),
-                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { items: menuItems, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default["default"].createElement("div", { className: b$i('menu-items') })),
+                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { type: "menu", items: menuItems, dict: dict, onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default["default"].createElement("div", { className: b$i('menu-items') })),
                         this.renderFooter(size),
                         this.renderCollapseButton())),
                 panelItems && this.renderPanels(size)));
@@ -4047,7 +4059,7 @@ class AsideHeader extends React__default["default"].Component {
         this.renderLogo = () => React__default["default"].createElement(Logo$1, Object.assign({}, this.props.logo, { onClick: this.onLogoClick }));
         this.renderHeader = () => (React__default["default"].createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
             this.renderLogo(),
-            React__default["default"].createElement(CompositeBar, { items: this.props.subheaderItems, enableCollapsing: false, onItemClick: this.onItemClick }),
+            React__default["default"].createElement(CompositeBar, { type: "subheader", items: this.props.subheaderItems, onItemClick: this.onItemClick }),
             React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
         this.renderFooter = (size) => {
             const { renderFooter, compact } = this.props;