@gravity-ui/navigation 3.5.0 → 3.6.1

package/build/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-xx_lPj0v.js');
+var index = require('./index-C_H8jpn0.js');
 require('react');
 require('@bem-react/classname');
 require('@gravity-ui/uikit');

package/build/esm/components/HotkeysPanel/HotkeysPanel.d.ts

@@ -6,6 +6,7 @@ import './HotkeysPanel.scss';
 export type HotkeysPanelProps<T> = {
     hotkeys: HotkeysGroup<T>[];
     title?: ReactNode;
+    hotkey?: string;
     filterable?: boolean;
     filterPlaceholder?: string;
     emptyState?: ReactNode;
@@ -20,4 +21,4 @@ export type HotkeysPanelProps<T> = {
     leftOffset?: number | string;
     topOffset?: number | string;
 } & Omit<ListProps<HotkeysListItem>, 'items' | 'emptyPlaceholder' | 'className' | 'size' | 'renderItem' | 'filterable' | 'autoFocus' | 'filterPlaceholder' | 'filterClassName' | 'filter' | 'filterItem' | 'onFilterEnd' | 'onFilterUpdate'>;
-export declare function HotkeysPanel<T = {}>({ visible, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable, filterPlaceholder, title, emptyState, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;
+export declare function HotkeysPanel<T = {}>({ visible, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable, filterPlaceholder, title, hotkey, emptyState, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;

package/build/esm/components/HotkeysPanel/types.d.ts

@@ -1,6 +1,7 @@
 export type HotkeysItem = {
     title: string;
     value: string;
+    hint?: string;
 };
 export type HotkeysGroup<T = {}> = {
     title: string;
@@ -10,4 +11,5 @@ export type HotkeysListItem = {
     title: string;
     group?: boolean;
     value?: string;
+    hint?: string;
 };

package/build/esm/{index-C5bzWe6L.js → index-CGB31sSY.js}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { useMemo, Suspense, useCallback, useRef, useState, useEffect, Component, createElement, useContext, useLayoutEffect } from 'react';
 import { withNaming } from '@bem-react/classname';
-import { Icon, Button, Flex, Text, Tooltip, List, Portal, Popup, ActionTooltip, useForkRef, setRef, Hotkey, TextInput, Loader, Sheet, eventBroker, Menu, DropdownMenu } from '@gravity-ui/uikit';
+import { Icon, Button, Flex, Text, Tooltip, List, Portal, Popup, ActionTooltip, useForkRef, setRef, HelpMark, Hotkey, TextInput, Loader, Sheet, eventBroker, Menu, DropdownMenu } from '@gravity-ui/uikit';
 import { Pin, PinFill, Ellipsis, Gear, Xmark, ListUl, ArrowLeft } from '@gravity-ui/icons';
 import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
 import { jsx } from 'react/jsx-runtime';
@@ -121,7 +121,7 @@ function styleInject(css, ref) {
 var css_248z$u = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed;z-index:var(--gn-aside-header-panel-z-index,98)}.gn-aside-header__panel{height:100%}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
 styleInject(css_248z$u);
 
-const TopAlert$1 = React__default.lazy(() => import('./index-B84DSZte.js').then((module) => ({ default: module.TopAlert })));
+const TopAlert$1 = React__default.lazy(() => import('./index-CXbwkDYo.js').then((module) => ({ default: module.TopAlert })));
 const Layout = ({ compact, className, children, topAlert }) => {
     const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
     const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
@@ -1893,7 +1893,7 @@ const CollapseButton = ({ className }) => {
     return defaultButton;
 };
 
-var css_248z$m = ".gn-logo{height:40px}.gn-logo,.gn-logo__btn-logo{align-items:center;display:flex}.gn-logo__btn-logo{cursor:pointer;flex-shrink:0;justify-content:center}.gn-logo__btn-logo,.gn-logo__btn-logo:active,.gn-logo__btn-logo:focus,.gn-logo__btn-logo:hover,.gn-logo__btn-logo:visited{color:inherit;outline:none;text-decoration:none}.gn-logo__btn-logo:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-logo__logo-icon-place{align-items:center;display:flex;justify-content:center;width:36px}";
+var css_248z$m = ".gn-logo{height:40px}.gn-logo,.gn-logo__btn-logo{align-items:center;display:flex}.gn-logo__btn-logo{cursor:pointer;flex-shrink:0;justify-content:flex-start;overflow-wrap:break-word;width:100%;word-break:break-word}.gn-logo__btn-logo,.gn-logo__btn-logo:active,.gn-logo__btn-logo:focus,.gn-logo__btn-logo:hover,.gn-logo__btn-logo:visited{color:inherit;outline:none;text-decoration:none}.gn-logo__btn-logo:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-logo__logo-icon-place{align-items:center;display:flex;flex-shrink:0;justify-content:center;width:36px}";
 styleInject(css_248z$m);
 
 const b$n = block('logo');
@@ -4792,29 +4792,33 @@ function flattenHotkeyGroups(hotkeys) {
     return result;
 }
 
-var css_248z$d = ".gn-hotkeys-panel{--hotkeys-panel-width:400px;--hotkeys-panel-vertical-padding:18px;--hotkeys-panel-horizontal-padding:24px;inset:0;position:fixed}.gn-hotkeys-panel__drawer-item{box-sizing:border-box;display:flex;flex-direction:column;padding:var(--hotkeys-panel-vertical-padding) 0;width:var(--hotkeys-panel-width)}.gn-hotkeys-panel__title{margin:0 var(--hotkeys-panel-horizontal-padding) 16px var(--hotkeys-panel-horizontal-padding)}.gn-hotkeys-panel__search{box-sizing:border-box;margin-bottom:14px;padding:0 var(--hotkeys-panel-horizontal-padding)}.gn-hotkeys-panel__list{flex:1;overflow-y:auto}.gn-hotkeys-panel__item{height:auto;padding:8px var(--hotkeys-panel-horizontal-padding)}.gn-hotkeys-panel__item.g-list__item_active{background:inherit}.gn-hotkeys-panel__item-content{align-items:baseline;color:var(--g-color-text-primary);display:flex;font-size:var(--g-text-body-1-font-size);justify-content:space-between;line-height:var(--g-text-body-1-line-height);width:100%}.gn-hotkeys-panel__item-content_group{font-size:var(--g-text-body-2-font-size);font-weight:500;line-height:var(--g-text-body-2-line-height)}.gn-hotkeys-panel__hotkey{color:var(--g-color-text-complementary)}";
+var css_248z$d = ".gn-hotkeys-panel{--hotkeys-panel-width:400px;--hotkeys-panel-vertical-padding:18px;--hotkeys-panel-horizontal-padding:var(--g-spacing-6);inset:0;position:fixed}.gn-hotkeys-panel__drawer-item{box-sizing:border-box;display:flex;flex-direction:column;padding:var(--hotkeys-panel-vertical-padding) 0;width:var(--hotkeys-panel-width)}.gn-hotkeys-panel__title{align-items:baseline;display:flex;gap:var(--g-spacing-2);justify-content:space-between;margin:0 var(--hotkeys-panel-horizontal-padding) var(--g-spacing-4) var(--hotkeys-panel-horizontal-padding)}.gn-hotkeys-panel__search{box-sizing:border-box;margin-bottom:var(--g-spacing-4);padding:0 var(--hotkeys-panel-horizontal-padding)}.gn-hotkeys-panel__list{flex:1;overflow-y:auto}.gn-hotkeys-panel__item{height:auto;margin:0 var(--hotkeys-panel-horizontal-padding);padding:var(--g-spacing-2) 0}.gn-hotkeys-panel__item.g-list__item_active{background:inherit}.gn-hotkeys-panel__item:not(:first-child):has(.gn-hotkeys-panel__item-content_type_group){border-top:1px solid var(--g-color-line-generic);margin-top:var(--g-spacing-3);padding-top:var(--g-spacing-4)}.gn-hotkeys-panel__item-content{align-items:baseline;color:var(--g-color-text-primary);display:flex;justify-content:space-between;margin:0;width:100%}.gn-hotkeys-panel__item-hint{margin-left:var(--g-spacing-1)}.gn-hotkeys-panel__item-hint-tooltip{max-width:217px}.gn-hotkeys-panel__hotkey{color:var(--g-color-text-complementary)}";
 styleInject(css_248z$d);
 
 const b$e = block('hotkeys-panel');
 function HotkeysPanel(_a) {
-    var { visible, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable = true, filterPlaceholder, title, emptyState } = _a, listProps = __rest(_a, ["visible", "onClose", "leftOffset", "topOffset", "className", "drawerItemClassName", "filterClassName", "titleClassName", "listClassName", "itemContentClassName", "hotkeys", "itemClassName", "filterable", "filterPlaceholder", "title", "emptyState"]);
+    var { visible, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable = true, filterPlaceholder, title, hotkey, emptyState } = _a, listProps = __rest(_a, ["visible", "onClose", "leftOffset", "topOffset", "className", "drawerItemClassName", "filterClassName", "titleClassName", "listClassName", "itemContentClassName", "hotkeys", "itemClassName", "filterable", "filterPlaceholder", "title", "hotkey", "emptyState"]);
     const [filter, setFilter] = useState('');
     const hotkeysList = useMemo(() => {
         const filteredHotkeys = filterHotkeys(hotkeys, filter);
         return flattenHotkeyGroups(filteredHotkeys);
     }, [hotkeys, filter]);
-    const renderItem = useCallback((item) => (React__default.createElement("div", { className: b$e('item-content', { group: item.group }, itemContentClassName), key: item.title },
-        item.title,
-        item.value && React__default.createElement(Hotkey, { className: b$e('hotkey'), value: item.value }))), []);
+    const renderItem = useCallback((item) => (React__default.createElement(Text, { as: item.group ? 'h3' : 'p', variant: item.group ? 'subheader-2' : 'body-1', className: b$e('item-content', { type: item.group ? 'group' : 'item' }, itemContentClassName), key: item.title },
+        React__default.createElement("span", null,
+            item.title,
+            item.hint && (React__default.createElement(HelpMark, { "aria-hidden": true, popoverProps: { className: b$e('item-hint-tooltip') }, className: b$e('item-hint') }, item.hint))),
+        item.value && React__default.createElement(Hotkey, { className: b$e('hotkey'), value: item.value }))), [itemContentClassName]);
     const drawerItemContent = (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("h2", { className: b$e('title', titleClassName) }, title),
+        React__default.createElement(Text, { variant: "subheader-3", as: 'h2', className: b$e('title', titleClassName) },
+            title,
+            hotkey && React__default.createElement(Hotkey, { value: hotkey })),
         filterable && (React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$e('search', filterClassName), hasClear: true })),
         React__default.createElement(List, Object.assign({ className: b$e('list', listClassName), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$e('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
     return (React__default.createElement(Drawer, { className: b$e(null, className), onVeilClick: onClose, onEscape: onClose, style: {
             left: leftOffset,
             top: topOffset,
         } },
-        React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$e('drawer-item', drawerItemClassName), content: drawerItemContent })));
+        React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$e('drawer-item', drawerItemClassName) }, drawerItemContent)));
 }
 
 /**
@@ -5663,7 +5667,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
 var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px;background-color:var(--g-color-base-background)}.gn-mobile-header__header-container{background-color:var(--g-color-base-background);position:sticky;top:0;z-index:var(--gn-mobile-header-z-index,100)}.gn-mobile-header__header{align-items:center;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 10px}.gn-mobile-header__burger{padding:12px}.gn-mobile-header__panel-item{--gn-drawer-item-position:var(--gn-mobile-header-panel-position,absolute)}.gn-mobile-header__burger-menu,.gn-mobile-header__panel-item{background-color:var(--g-color-base-background);max-height:100%;max-width:90vw;width:320px}.gn-mobile-header__user-menu{overflow-y:auto}.gn-mobile-header__overlap-panel,.gn-mobile-header__panels{z-index:var(--gn-mobile-header-panel-z-index,98)}.gn-mobile-header__panels{inset:var(--mobile-header-min-heigth) 0 0;overflow:hidden;position:fixed}.gn-mobile-header__panel-item{top:unset}.gn-mobile-header__content{overflow:auto}";
 styleInject(css_248z$4);
 
-const TopAlert = React__default.lazy(() => import('./index-B84DSZte.js').then((module) => ({ default: module.TopAlert })));
+const TopAlert = React__default.lazy(() => import('./index-CXbwkDYo.js').then((module) => ({ default: module.TopAlert })));
 const b$4 = block('mobile-header');
 const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
     const targetRef = useForwardRef(ref);
@@ -5954,4 +5958,4 @@ const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, mo
 };
 
 export { AsideHeader as A, DrawerItem as D, FooterItem$1 as F, HotkeysPanel as H, Logo as L, MOBILE_HEADER_EVENT_NAMES as M, PageLayout as P, Settings as S, Title as T, AsideHeaderContextProvider as a, block as b, PageLayoutAside as c, debounceFn as d, AsideFallback as e, Drawer as f, PublicActionBar as g, useSettingsSelectionContext as h, useSettingsContext as i, FooterItem as j, getMobileHeaderCustomEvent as k, MobileHeader as l, MobileLogo as m, Footer as n, MobileFooter as o, styleInject as s, useAsideHeaderContext as u };
-//# sourceMappingURL=index-C5bzWe6L.js.map
+//# sourceMappingURL=index-CGB31sSY.js.map