@gravity-ui/navigation 3.6.1 → 3.6.2

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.
@@ -6,7 +6,7 @@ import './HotkeysPanel.scss';
6
6
  export type HotkeysPanelProps<T> = {
7
7
  hotkeys: HotkeysGroup<T>[];
8
8
  title?: ReactNode;
9
- hotkey?: string;
9
+ togglePanelHotkey?: string;
10
10
  filterable?: boolean;
11
11
  filterPlaceholder?: string;
12
12
  emptyState?: ReactNode;
@@ -21,4 +21,4 @@ export type HotkeysPanelProps<T> = {
21
21
  leftOffset?: number | string;
22
22
  topOffset?: number | string;
23
23
  } & Omit<ListProps<HotkeysListItem>, 'items' | 'emptyPlaceholder' | 'className' | 'size' | 'renderItem' | 'filterable' | 'autoFocus' | 'filterPlaceholder' | 'filterClassName' | 'filter' | 'filterItem' | 'onFilterEnd' | 'onFilterUpdate'>;
24
- 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;
24
+ export declare function HotkeysPanel<T = {}>({ visible, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable, filterPlaceholder, title, togglePanelHotkey, emptyState, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;
@@ -141,7 +141,7 @@ function styleInject(css, ref) {
141
141
  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)}";
142
142
  styleInject(css_248z$u);
143
143
 
144
- const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-C-imK7GW.js'); }).then((module) => ({ default: module.TopAlert })));
144
+ const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-BNFk3vPj.js'); }).then((module) => ({ default: module.TopAlert })));
145
145
  const Layout = ({ compact, className, children, topAlert }) => {
146
146
  const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
147
147
  const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
@@ -4817,7 +4817,7 @@ styleInject(css_248z$d);
4817
4817
 
4818
4818
  const b$e = block('hotkeys-panel');
4819
4819
  function HotkeysPanel(_a) {
4820
- 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"]);
4820
+ var { visible, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable = true, filterPlaceholder, title, togglePanelHotkey, emptyState } = _a, listProps = __rest(_a, ["visible", "onClose", "leftOffset", "topOffset", "className", "drawerItemClassName", "filterClassName", "titleClassName", "listClassName", "itemContentClassName", "hotkeys", "itemClassName", "filterable", "filterPlaceholder", "title", "togglePanelHotkey", "emptyState"]);
4821
4821
  const [filter, setFilter] = React.useState('');
4822
4822
  const hotkeysList = React.useMemo(() => {
4823
4823
  const filteredHotkeys = filterHotkeys(hotkeys, filter);
@@ -4831,7 +4831,7 @@ function HotkeysPanel(_a) {
4831
4831
  const drawerItemContent = (React.createElement(React.Fragment, null,
4832
4832
  React.createElement(uikit.Text, { variant: "subheader-3", as: 'h2', className: b$e('title', titleClassName) },
4833
4833
  title,
4834
- hotkey && React.createElement(uikit.Hotkey, { value: hotkey })),
4834
+ togglePanelHotkey && React.createElement(uikit.Hotkey, { value: togglePanelHotkey })),
4835
4835
  filterable && (React.createElement(uikit.TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$e('search', filterClassName), hasClear: true })),
4836
4836
  React.createElement(uikit.List, Object.assign({ className: b$e('list', listClassName), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$e('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
4837
4837
  return (React.createElement(Drawer, { className: b$e(null, className), onVeilClick: onClose, onEscape: onClose, style: {
@@ -5687,7 +5687,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
5687
5687
  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}";
5688
5688
  styleInject(css_248z$4);
5689
5689
 
5690
- const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-C-imK7GW.js'); }).then((module) => ({ default: module.TopAlert })));
5690
+ const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-BNFk3vPj.js'); }).then((module) => ({ default: module.TopAlert })));
5691
5691
  const b$4 = block('mobile-header');
5692
5692
  const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
5693
5693
  const targetRef = useForwardRef(ref);
@@ -6003,4 +6003,4 @@ exports.styleInject = styleInject;
6003
6003
  exports.useAsideHeaderContext = useAsideHeaderContext;
6004
6004
  exports.useSettingsContext = useSettingsContext;
6005
6005
  exports.useSettingsSelectionContext = useSettingsSelectionContext;
6006
- //# sourceMappingURL=index-C_H8jpn0.js.map
6006
+ //# sourceMappingURL=index-7Lbn5kHV.js.map