@gravity-ui/navigation 0.12.0 → 0.13.1

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

@@ -15,6 +15,7 @@ export interface ItemProps extends ItemPopup {
     item: MenuItem;
     enableTooltip?: boolean;
     onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onItemClickCapture?: (event: React.SyntheticEvent) => void;
 }
 interface ItemInnerProps extends ItemProps {
     className?: string;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ItemProps } from '../CompositeBar/Item/Item';
 import './FooterItem.scss';
-export interface FooterItemProps extends Omit<ItemProps, 'onItemClick'> {
+export interface FooterItemProps extends Omit<ItemProps, 'onItemClick' | 'onItemClickCapture'> {
     compact: boolean;
 }
 export declare const FooterItem: React.FC<FooterItemProps>;

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

@@ -15,10 +15,12 @@ export interface MenuItem {
     current?: boolean;
     pinned?: boolean;
     onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onItemClickCapture?: (event: React.SyntheticEvent) => void;
     itemWrapper?: (p: MakeItemParams, makeItem: (p: MakeItemParams) => React.ReactNode, opts: {
         collapsed: boolean;
         compact: boolean;
         item: MenuItem;
+        ref: React.RefObject<HTMLElement>;
     }) => React.ReactNode;
     rightAdornment?: React.ReactNode;
     type?: MenuItemType;

package/build/cjs/index.js

@@ -3227,16 +3227,9 @@ var css_248z$l = ".ycn-logo {\n  display: flex;\n  align-items: center;\n  flex-
 styleInject(css_248z$l);
 
 const b$m = block('logo');
-const Logo$1 = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
+const Logo$1 = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href, wrapper, onClick, }) => {
     const { compact } = useAsideHeaderContext();
-    const hasClickHandler = typeof onClick === 'function';
     const hasWrapper = typeof wrapper === 'function';
-    const linkProps = hasClickHandler
-        ? {}
-        : {
-            target: '_self',
-            href,
-        };
     let buttonIcon;
     if (iconSrc) {
         buttonIcon = (React__default["default"].createElement(uikit.Button.Icon, { className: iconClassName },
@@ -3245,7 +3238,7 @@ const Logo$1 = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize =
     else if (icon) {
         buttonIcon = React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: iconClassName });
     }
-    const button = (React__default["default"].createElement(uikit.Button, Object.assign({ view: "flat", size: "l", className: b$m('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
+    const button = (React__default["default"].createElement(uikit.Button, { view: "flat", size: "l", className: b$m('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick, target: "_self", href: href }, buttonIcon));
     let logo;
     if (typeof text === 'function') {
         logo = text();
@@ -3256,7 +3249,7 @@ const Logo$1 = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize =
     return (React__default["default"].createElement("div", { className: b$m() },
         React__default["default"].createElement("div", { className: b$m('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
         !compact &&
-            (hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$m('logo-link'), onClick: onClick }), logo)))));
+            (hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", { href: href !== null && href !== void 0 ? href : '/', target: "_self", className: b$m('logo-link'), onClick: onClick }, logo)))));
 };
 
 /**
@@ -3745,7 +3738,7 @@ function renderItemTitle(item) {
 const defaultPopupPlacement = ['right-end'];
 const defaultPopupOffset = [-20, 8];
 const Item$1 = (props) => {
-    const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
+    const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, onItemClickCapture, } = props;
     const { compact } = useAsideHeaderContext();
     if (item.type === 'divider') {
         return React__default["default"].createElement("div", { className: b$l('menu-divider') });
@@ -3781,7 +3774,7 @@ const Item$1 = (props) => {
                 else {
                     onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
                 }
-            }, onMouseEnter: () => {
+            }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
                 if (!compact) {
                     onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
                 }
@@ -3800,7 +3793,7 @@ const Item$1 = (props) => {
     const titleNode = renderItemTitle(item);
     const params = { icon: iconNode, title: titleNode };
     let node;
-    const opts = { compact, collapsed: false, item };
+    const opts = { compact, collapsed: false, item, ref };
     if (typeof item.itemWrapper === 'function') {
         node = item.itemWrapper(params, makeNode, opts);
     }
@@ -3825,7 +3818,7 @@ function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
                     };
                     const titleNode = renderItemTitle(collapseItem);
                     const params = { title: titleNode };
-                    const opts = { compact, collapsed: true, item: collapseItem };
+                    const opts = { compact, collapsed: true, item: collapseItem, ref: anchorRef };
                     if (typeof collapseItem.itemWrapper === 'function') {
                         return collapseItem.itemWrapper(params, makeCollapseNode, opts);
                     }
@@ -4149,7 +4142,7 @@ styleInject(css_248z$g);
 const b$h = block('footer-item');
 const FooterItem$1 = (_a) => {
     var { item } = _a, props = __rest(_a, ["item"]);
-    return (React__default["default"].createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$h({ compact: props.compact }), onItemClick: item.onItemClick })));
+    return (React__default["default"].createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$h({ compact: props.compact }), onItemClick: item.onItemClick, onItemClickCapture: item.onItemClickCapture })));
 };
 
 var css_248z$f = ".ycn-action-bar-group {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}";