@gravity-ui/navigation 0.13.1 → 0.15.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.
- package/build/cjs/components/AsideHeader/AsideHeader.d.ts +2 -2
- package/build/cjs/components/AsideHeader/__stories__/moc.d.ts +2 -0
- package/build/cjs/components/CompositeBar/CompositeBar.d.ts +10 -6
- package/build/cjs/components/CompositeBar/utils.d.ts +4 -2
- package/build/cjs/components/index.d.ts +0 -1
- package/build/cjs/components/types.d.ts +2 -0
- package/build/cjs/components/utils/cn.d.ts +1 -1
- package/build/cjs/index.js +49 -54
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/AsideHeader/AsideHeader.d.ts +2 -2
- package/build/esm/components/AsideHeader/__stories__/moc.d.ts +2 -0
- package/build/esm/components/CompositeBar/CompositeBar.d.ts +10 -6
- package/build/esm/components/CompositeBar/utils.d.ts +4 -2
- package/build/esm/components/index.d.ts +0 -1
- package/build/esm/components/types.d.ts +2 -0
- package/build/esm/components/utils/cn.d.ts +1 -1
- package/build/esm/index.js +50 -54
- package/build/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/build/cjs/components/CompositeBar/__stories__/CompositeBar.stories.d.ts +0 -5
- package/build/cjs/components/CompositeBar/__stories__/moc.d.ts +0 -2
- package/build/esm/components/CompositeBar/__stories__/CompositeBar.stories.d.ts +0 -5
- package/build/esm/components/CompositeBar/__stories__/moc.d.ts +0 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { MenuItem, AsideHeaderDict, LogoProps } from '../types';
|
|
2
|
+
import { MenuItem, AsideHeaderDict, LogoProps, SubheaderMenuItem } from '../types';
|
|
3
3
|
import { DrawerItemProps } from '../Drawer/Drawer';
|
|
4
4
|
import { RenderContentType } from '../Content';
|
|
5
5
|
import './AsideHeader.scss';
|
|
@@ -20,7 +20,7 @@ interface AsideHeaderGeneralProps {
|
|
|
20
20
|
}
|
|
21
21
|
interface AsideHeaderDefaultProps {
|
|
22
22
|
panelItems: DrawerItemProps[];
|
|
23
|
-
subheaderItems:
|
|
23
|
+
subheaderItems: SubheaderMenuItem[];
|
|
24
24
|
menuItems: MenuItem[];
|
|
25
25
|
headerDecoration: boolean;
|
|
26
26
|
}
|
|
@@ -1 +1,3 @@
|
|
|
1
|
+
import { MenuItem } from 'src/components/types';
|
|
2
|
+
export declare const menuItemsShowcase: MenuItem[];
|
|
1
3
|
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";
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import React, { FC } from 'react';
|
|
2
|
-
import { AsideHeaderDict, MenuItem } from '../types';
|
|
2
|
+
import { AsideHeaderDict, MenuItem, SubheaderMenuItem } from '../types';
|
|
3
3
|
import './CompositeBar.scss';
|
|
4
|
-
|
|
4
|
+
export type CompositeBarItem = MenuItem | SubheaderMenuItem;
|
|
5
|
+
type CompositeBarItems = {
|
|
6
|
+
type: 'menu';
|
|
5
7
|
items: MenuItem[];
|
|
8
|
+
} | {
|
|
9
|
+
type: 'subheader';
|
|
10
|
+
items: SubheaderMenuItem[];
|
|
11
|
+
};
|
|
12
|
+
export type CompositeBarProps = CompositeBarItems & {
|
|
6
13
|
onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
7
14
|
multipleTooltip?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export interface CompositeBarProps extends CompositeBarBaseProps {
|
|
10
|
-
enableCollapsing: boolean;
|
|
11
15
|
dict?: AsideHeaderDict;
|
|
12
|
-
}
|
|
16
|
+
};
|
|
13
17
|
export declare const CompositeBar: FC<CompositeBarProps>;
|
|
14
18
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { AsideHeaderDict, MenuItem } from './../types';
|
|
2
|
-
|
|
3
|
-
export declare function
|
|
2
|
+
import { CompositeBarItem } from '../CompositeBar/CompositeBar';
|
|
3
|
+
export declare function getItemHeight(item: CompositeBarItem): 40 | 15 | 50;
|
|
4
|
+
export declare function getItemsHeight<T extends CompositeBarItem>(items: T[]): number;
|
|
4
5
|
export declare function getSelectedItemIndex(items: MenuItem[]): number | undefined;
|
|
5
6
|
export declare function getPinnedItems(items: MenuItem[]): MenuItem[];
|
|
6
7
|
export declare function getItemsMinHeight(items: MenuItem[]): number;
|
|
@@ -9,3 +10,4 @@ export declare function getAutosizeListItems(items: MenuItem[], height: number,
|
|
|
9
10
|
listItems: MenuItem[];
|
|
10
11
|
collapseItems: MenuItem[];
|
|
11
12
|
};
|
|
13
|
+
export declare function isMenuItem(item: CompositeBarItem): item is MenuItem;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IconProps } from '@gravity-ui/uikit';
|
|
3
|
+
import { ItemProps } from 'src/components/CompositeBar/Item/Item';
|
|
3
4
|
export type MenuItemType = 'regular' | 'action' | 'divider';
|
|
4
5
|
export interface MakeItemParams {
|
|
5
6
|
icon?: React.ReactNode;
|
|
@@ -26,6 +27,7 @@ export interface MenuItem {
|
|
|
26
27
|
type?: MenuItemType;
|
|
27
28
|
afterMoreButton?: boolean;
|
|
28
29
|
}
|
|
30
|
+
export type SubheaderMenuItem = Omit<ItemProps, 'onItemClick' | 'onItemClickCapture'>;
|
|
29
31
|
export declare enum MobileHeaderDict {
|
|
30
32
|
CloseBurger = "button_close-burger",
|
|
31
33
|
OpenBurger = "button_open-burger"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import bemBlock from 'bem-cn-lite';
|
|
2
2
|
export type CnBlock = ReturnType<typeof bemBlock>;
|
|
3
3
|
export type CnMods = Record<string, string | boolean | undefined>;
|
|
4
|
-
export declare const NAMESPACE = "
|
|
4
|
+
export declare const NAMESPACE = "gn-";
|
|
5
5
|
export declare function block(name: string): CnBlock;
|
package/build/cjs/index.js
CHANGED
|
@@ -89,7 +89,7 @@ bemClassNameLite.reset = function () {
|
|
|
89
89
|
};
|
|
90
90
|
var _default = lib$1.default = bemClassNameLite;
|
|
91
91
|
|
|
92
|
-
const NAMESPACE = '
|
|
92
|
+
const NAMESPACE = 'gn-';
|
|
93
93
|
function block(name) {
|
|
94
94
|
return _default(`${NAMESPACE}${name}`);
|
|
95
95
|
}
|
|
@@ -1384,7 +1384,7 @@ function removeClass$1(element, className) {
|
|
|
1384
1384
|
}
|
|
1385
1385
|
}
|
|
1386
1386
|
|
|
1387
|
-
var config
|
|
1387
|
+
var config = {
|
|
1388
1388
|
disabled: false
|
|
1389
1389
|
};
|
|
1390
1390
|
|
|
@@ -1664,7 +1664,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
|
|
|
1664
1664
|
var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
|
|
1665
1665
|
// if we are mounting and running this it means appear _must_ be set
|
|
1666
1666
|
|
|
1667
|
-
if (!mounting && !enter || config
|
|
1667
|
+
if (!mounting && !enter || config.disabled) {
|
|
1668
1668
|
this.safeSetState({
|
|
1669
1669
|
status: ENTERED
|
|
1670
1670
|
}, function () {
|
|
@@ -1696,7 +1696,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
|
|
|
1696
1696
|
var timeouts = this.getTimeouts();
|
|
1697
1697
|
var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default["default"].findDOMNode(this); // no exit animation skip right to EXITED
|
|
1698
1698
|
|
|
1699
|
-
if (!exit || config
|
|
1699
|
+
if (!exit || config.disabled) {
|
|
1700
1700
|
this.safeSetState({
|
|
1701
1701
|
status: EXITED
|
|
1702
1702
|
}, function () {
|
|
@@ -3163,7 +3163,7 @@ function styleInject(css, ref) {
|
|
|
3163
3163
|
}
|
|
3164
3164
|
}
|
|
3165
3165
|
|
|
3166
|
-
var css_248z$m = ".
|
|
3166
|
+
var css_248z$m = ".gn-drawer__item {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: 100%;\n will-change: transform;\n background-color: var(--g-color-base-background);\n}\n.gn-drawer__item_direction_right {\n left: auto;\n right: 0;\n}\n.gn-drawer__item-transition-enter {\n transform: translate(-100%, 0);\n}\n.gn-drawer__item-transition_direction_right-enter {\n transform: translate(100%, 0);\n}\n.gn-drawer__item-transition-enter-active, .gn-drawer__item-transition_direction_right-enter-active {\n transform: translate(0, 0);\n transition: transform 300ms;\n}\n.gn-drawer__item-transition-enter-done, .gn-drawer__item-transition_direction_right-enter-done {\n filter: blur(0px);\n transform: translateZ(0);\n}\n.gn-drawer__item-transition-exit, .gn-drawer__item-transition_direction_right-exit {\n transform: translate(0, 0);\n}\n.gn-drawer__item-transition-exit-active, .gn-drawer__item-transition_direction_right-exit-active {\n transition: transform 300ms;\n}\n.gn-drawer__item-transition-exit-active {\n transform: translate(-100%, 0);\n}\n.gn-drawer__item-transition_direction_right-exit-active {\n transform: translate(100%, 0);\n}\n.gn-drawer__item-transition-exit-done, .gn-drawer__item-transition_direction_right-exit-done {\n visibility: hidden;\n}\n.gn-drawer__veil {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n background-color: var(--g-color-sfx-veil);\n}\n.gn-drawer__veil-transition-enter {\n opacity: 0;\n}\n.gn-drawer__veil-transition-enter-active {\n opacity: 1;\n transition: opacity 300ms;\n}\n.gn-drawer__veil-transition-exit {\n opacity: 1;\n}\n.gn-drawer__veil-transition-exit-active {\n opacity: 0;\n transition: opacity 300ms;\n}\n.gn-drawer__veil-transition-exit-done {\n visibility: hidden;\n}";
|
|
3167
3167
|
styleInject(css_248z$m);
|
|
3168
3168
|
|
|
3169
3169
|
const b$n = block('drawer');
|
|
@@ -3223,7 +3223,7 @@ const AsideHeaderContext = React__default["default"].createContext({
|
|
|
3223
3223
|
const AsideHeaderContextProvider = AsideHeaderContext.Provider;
|
|
3224
3224
|
const useAsideHeaderContext = () => React__default["default"].useContext(AsideHeaderContext);
|
|
3225
3225
|
|
|
3226
|
-
var css_248z$l = ".
|
|
3226
|
+
var css_248z$l = ".gn-logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n height: 40px;\n}\n.gn-logo__logo-btn-place {\n flex-shrink: 0;\n width: var(--aside-header-min-width);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.gn-logo__logo-btn-place .yc-button::before {\n background-color: transparent;\n}\n.gn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n --yc-button-height: 38px;\n}\n.gn-logo__logo {\n font-size: var(--g-text-body-2-font-size);\n line-height: var(--g-text-body-2-line-height);\n font-weight: var(--g-text-body-font-weight);\n vertical-align: middle;\n cursor: pointer;\n}\n.gn-logo__logo-link, .gn-logo__logo-link:hover, .gn-logo__logo-link:active, .gn-logo__logo-link:visited, .gn-logo__logo-link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.g-root .gn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n background-color: transparent;\n}";
|
|
3227
3227
|
styleInject(css_248z$l);
|
|
3228
3228
|
|
|
3229
3229
|
const b$m = block('logo');
|
|
@@ -3635,6 +3635,9 @@ const POPUP_PLACEMENT = ['right-start', 'right-end', 'right'];
|
|
|
3635
3635
|
const POPUP_ITEM_HEIGHT = 28;
|
|
3636
3636
|
|
|
3637
3637
|
function getItemHeight$1(item) {
|
|
3638
|
+
if (!isMenuItem(item)) {
|
|
3639
|
+
return ITEM_HEIGHT;
|
|
3640
|
+
}
|
|
3638
3641
|
switch (item.type) {
|
|
3639
3642
|
case 'action':
|
|
3640
3643
|
return 50;
|
|
@@ -3721,8 +3724,11 @@ function getAutosizeListItems(items, height, collapseItem) {
|
|
|
3721
3724
|
}
|
|
3722
3725
|
return { listItems, collapseItems };
|
|
3723
3726
|
}
|
|
3727
|
+
function isMenuItem(item) {
|
|
3728
|
+
return (item === null || item === void 0 ? void 0 : item.id) !== undefined;
|
|
3729
|
+
}
|
|
3724
3730
|
|
|
3725
|
-
var css_248z$k = ".
|
|
3731
|
+
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}";
|
|
3726
3732
|
styleInject(css_248z$k);
|
|
3727
3733
|
|
|
3728
3734
|
const b$l = block('composite-bar-item');
|
|
@@ -3783,7 +3789,7 @@ const Item$1 = (props) => {
|
|
|
3783
3789
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3784
3790
|
}
|
|
3785
3791
|
} },
|
|
3786
|
-
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 }) },
|
|
3792
|
+
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 }) },
|
|
3787
3793
|
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)),
|
|
3788
3794
|
React__default["default"].createElement("div", { className: b$l('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3789
3795
|
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()))));
|
|
@@ -3850,7 +3856,7 @@ class MultipleTooltipProvider extends React__default["default"].PureComponent {
|
|
|
3850
3856
|
}
|
|
3851
3857
|
}
|
|
3852
3858
|
|
|
3853
|
-
var css_248z$j = ".
|
|
3859
|
+
var css_248z$j = ".g-root_theme_dark .gn-multiple-tooltip,\n.g-root_theme_dark-hc .gn-multiple-tooltip {\n --multiple-tooltip-item-bg-color: #424147;\n --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n --multiple-tooltip-backdrop-background: linear-gradient(\n 90deg,\n #313036 0%,\n rgba(49, 48, 54, 0.3) 100%\n );\n --multiple-tooltip-backdrop-filter: blur(16px);\n}\n\n.g-root_theme_light .gn-multiple-tooltip,\n.g-root_theme_light-hc .gn-multiple-tooltip {\n --multiple-tooltip-item-bg-color: #7a7a7a;\n --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n --multiple-tooltip-backdrop-background: linear-gradient(\n 90deg,\n #ffffff 0%,\n rgba(255, 255, 255, 0.3) 100%\n );\n --multiple-tooltip-backdrop-filter: blur(12px);\n}\n\n.gn-multiple-tooltip {\n background-color: transparent;\n box-shadow: none;\n}\n.gn-multiple-tooltip::before {\n content: \"\";\n box-shadow: none;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n background: var(--multiple-tooltip-backdrop-background);\n filter: var(--multiple-tooltip-backdrop-filter);\n}\n.gn-multiple-tooltip__items-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 32px 40px 32px 12px;\n}\n.gn-multiple-tooltip__item {\n display: flex;\n box-sizing: border-box;\n height: 30px;\n padding: 8px 12px;\n background-color: var(--multiple-tooltip-item-bg-color);\n position: relative;\n border-radius: 5px;\n align-items: center;\n color: var(--g-color-text-light-primary);\n margin-bottom: 5px;\n transition: transform 100ms ease-in-out;\n}\n.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider), .gn-multiple-tooltip__item:first-child {\n margin-top: 5px;\n}\n.gn-multiple-tooltip__item_divider + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) {\n margin-top: 4px;\n}\n.gn-multiple-tooltip__item_active {\n background-color: var(--multiple-tooltip-item-active-bg-color);\n transform: translateX(-12px);\n}\n.gn-multiple-tooltip__item_divider {\n height: 15px;\n visibility: hidden;\n margin: 0;\n}";
|
|
3854
3860
|
styleInject(css_248z$j);
|
|
3855
3861
|
|
|
3856
3862
|
const b$k = block('multiple-tooltip');
|
|
@@ -3880,11 +3886,11 @@ const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
|
|
|
3880
3886
|
}))));
|
|
3881
3887
|
};
|
|
3882
3888
|
|
|
3883
|
-
var css_248z$i = ".
|
|
3889
|
+
var css_248z$i = ".gn-composite-bar {\n flex: 1 0 auto;\n width: 100%;\n min-height: 40px;\n}\n.gn-composite-bar .gn-composite-bar__root-menu-item[class] {\n background-color: transparent;\n}";
|
|
3884
3890
|
styleInject(css_248z$i);
|
|
3885
3891
|
|
|
3886
3892
|
const b$j = block('composite-bar');
|
|
3887
|
-
const CompositeBarView = ({ items, onItemClick, collapseItems, multipleTooltip =
|
|
3893
|
+
const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
|
|
3888
3894
|
const ref = React.useRef(null);
|
|
3889
3895
|
const tooltipRef = React.useRef(null);
|
|
3890
3896
|
const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext);
|
|
@@ -3949,26 +3955,32 @@ const CompositeBarView = ({ items, onItemClick, collapseItems, multipleTooltip =
|
|
|
3949
3955
|
}, [lastClickedItemIndex, setMultipleTooltipContextValue]);
|
|
3950
3956
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3951
3957
|
React__default["default"].createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
3952
|
-
React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'),
|
|
3953
|
-
|
|
3958
|
+
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) => {
|
|
3959
|
+
const itemExtraProps = isMenuItem(item) ? { item } : item;
|
|
3960
|
+
const enableTooltip = isMenuItem(item)
|
|
3961
|
+
? !multipleTooltip
|
|
3962
|
+
: item.enableTooltip;
|
|
3963
|
+
return (React__default["default"].createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
|
|
3964
|
+
} })),
|
|
3965
|
+
type === 'menu' && (React__default["default"].createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
3954
3966
|
};
|
|
3955
|
-
const CompositeBar = ({
|
|
3967
|
+
const CompositeBar = ({ type, items, dict, onItemClick, multipleTooltip = false, }) => {
|
|
3956
3968
|
if (items.length === 0) {
|
|
3957
3969
|
return null;
|
|
3958
3970
|
}
|
|
3959
3971
|
let node;
|
|
3960
|
-
if (
|
|
3972
|
+
if (type === 'menu') {
|
|
3961
3973
|
const minHeight = getItemsMinHeight(items);
|
|
3962
3974
|
const collapseItem = getMoreButtonItem(dict);
|
|
3963
3975
|
node = (React__default["default"].createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
|
|
3964
3976
|
const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
|
|
3965
3977
|
return (React__default["default"].createElement("div", { style: { width, height } },
|
|
3966
|
-
React__default["default"].createElement(CompositeBarView, { items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
3978
|
+
React__default["default"].createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
3967
3979
|
}))));
|
|
3968
3980
|
}
|
|
3969
3981
|
else {
|
|
3970
3982
|
node = (React__default["default"].createElement("div", { className: b$j() },
|
|
3971
|
-
React__default["default"].createElement(CompositeBarView, { items: items, onItemClick: onItemClick
|
|
3983
|
+
React__default["default"].createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
|
|
3972
3984
|
}
|
|
3973
3985
|
return React__default["default"].createElement(MultipleTooltipProvider, null, node);
|
|
3974
3986
|
};
|
|
@@ -4019,7 +4031,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4019
4031
|
};
|
|
4020
4032
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4021
4033
|
|
|
4022
|
-
var css_248z$h = ".
|
|
4034
|
+
var css_248z$h = ".g-root {\n --aside-header-background-color: var(--g-color-base-warning-light);\n --aside-header-collapse-button-divider-line-color: var(\n --aside-header-header-divider-line-color\n );\n}\n\n.g-root_theme_light,\n.g-root_theme_light-hc {\n --aside-header-divider-line-color: transparent;\n --aside-header-header-divider-line-color: var(--g-color-line-generic);\n}\n\n.g-root_theme_dark,\n.g-root_theme_dark-hc {\n --aside-header-divider-line-color: var(--g-color-line-generic-solid);\n --aside-header-header-divider-line-color: var(--g-color-line-generic-solid);\n}\n\n.gn-aside-header {\n --aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--g-color-base-background);\n}\n.gn-aside-header__aside {\n position: sticky;\n top: 0;\n left: 0;\n height: 100vh;\n width: inherit;\n display: flex;\n flex-direction: column;\n background-color: var(--g-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.gn-aside-header__aside::after {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n width: 1px;\n height: 100%;\n content: \"\";\n background-color: var(--aside-header-divider-line-color);\n}\n.gn-aside-header__aside-popup-anchor {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n}\n.gn-aside-header__aside-content {\n --gradient-height: 334px;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n width: inherit;\n height: inherit;\n position: relative;\n z-index: 2;\n user-select: none;\n}\n.gn-aside-header__aside-content::after {\n position: absolute;\n top: 0;\n right: -100px;\n bottom: 0;\n width: 100px;\n content: \"\";\n box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.gn-aside-header__aside-content > .gn-aside-header-logo {\n margin: 8px 0;\n}\n.gn-aside-header__aside-content_with-decoration {\n background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.gn-aside-header_compact .gn-aside-header__aside-content {\n background: transparent;\n}\n.gn-aside-header__header {\n --aside-header-header-divider-height: 29px;\n position: relative;\n z-index: 1;\n flex: none;\n box-sizing: border-box;\n width: 100%;\n padding-top: 8px;\n padding-bottom: 22px;\n}\n.gn-aside-header__header .gn-aside-header__header-divider {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -2;\n display: none;\n color: var(--aside-header-background-color);\n}\n.gn-aside-header__header_with-decoration::before {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -2;\n display: none;\n width: 100%;\n height: calc(100% - var(--aside-header-header-divider-height));\n content: \"\";\n background-color: var(--aside-header-background-color);\n}\n.gn-aside-header__header::after {\n position: absolute;\n bottom: 12px;\n left: 0;\n z-index: -2;\n width: 100%;\n height: 1px;\n content: \"\";\n background-color: var(--aside-header-header-divider-line-color);\n}\n.gn-aside-header_compact .gn-aside-header__header::before {\n display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider {\n display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration::after {\n display: none;\n}\n.gn-aside-header__menu-items {\n flex-grow: 1;\n}\n.gn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.gn-aside-header__panels {\n z-index: 98;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n overflow: auto;\n}\n.gn-aside-header__panel {\n height: 100%;\n}\n.gn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.gn-aside-header__content {\n width: calc(100% - var(--aside-header-size));\n z-index: 95;\n}\n.gn-aside-header__collapse-button {\n --yc-button-background-color-hover: transparent;\n overflow: hidden;\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: 20px;\n border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n margin-top: auto;\n}\n.gn-aside-header__collapse-button > .yc-button__text {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n}\n.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.gn-aside-header__collapse-button .gn-aside-header__collapse-icon {\n color: var(--g-color-text-secondary);\n}\n.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon {\n color: var(--g-color-text-primary);\n}";
|
|
4023
4035
|
styleInject(css_248z$h);
|
|
4024
4036
|
|
|
4025
4037
|
// TODO: remove temporary fix for expand button
|
|
@@ -4036,7 +4048,7 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4036
4048
|
React__default["default"].createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
|
|
4037
4049
|
React__default["default"].createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4038
4050
|
this.renderHeader(),
|
|
4039
|
-
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, {
|
|
4051
|
+
(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') })),
|
|
4040
4052
|
this.renderFooter(size),
|
|
4041
4053
|
this.renderCollapseButton())),
|
|
4042
4054
|
panelItems && this.renderPanels(size)));
|
|
@@ -4047,7 +4059,7 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4047
4059
|
this.renderLogo = () => React__default["default"].createElement(Logo$1, Object.assign({}, this.props.logo, { onClick: this.onLogoClick }));
|
|
4048
4060
|
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4049
4061
|
this.renderLogo(),
|
|
4050
|
-
React__default["default"].createElement(CompositeBar, { items: this.props.subheaderItems,
|
|
4062
|
+
React__default["default"].createElement(CompositeBar, { type: "subheader", items: this.props.subheaderItems, onItemClick: this.onItemClick }),
|
|
4051
4063
|
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4052
4064
|
this.renderFooter = (size) => {
|
|
4053
4065
|
const { renderFooter, compact } = this.props;
|
|
@@ -4136,7 +4148,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
4136
4148
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
4137
4149
|
};
|
|
4138
4150
|
|
|
4139
|
-
var css_248z$g = ".
|
|
4151
|
+
var css_248z$g = ".gn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4140
4152
|
styleInject(css_248z$g);
|
|
4141
4153
|
|
|
4142
4154
|
const b$h = block('footer-item');
|
|
@@ -4145,7 +4157,7 @@ const FooterItem$1 = (_a) => {
|
|
|
4145
4157
|
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 })));
|
|
4146
4158
|
};
|
|
4147
4159
|
|
|
4148
|
-
var css_248z$f = ".
|
|
4160
|
+
var css_248z$f = ".gn-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.gn-action-bar-group_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.gn-action-bar-group_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.gn-action-bar-group_pull_center {\n margin-left: auto;\n margin-right: auto;\n}";
|
|
4149
4161
|
styleInject(css_248z$f);
|
|
4150
4162
|
|
|
4151
4163
|
const b$g = block('action-bar-group');
|
|
@@ -4154,7 +4166,7 @@ const ActionBarGroup = ({ children, className, pull }) => {
|
|
|
4154
4166
|
};
|
|
4155
4167
|
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
4156
4168
|
|
|
4157
|
-
var css_248z$e = ".
|
|
4169
|
+
var css_248z$e = ".gn-action-bar-item {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.gn-action-bar-item_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.gn-action-bar-item_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.gn-action-bar-item_pull_center {\n margin-left: auto;\n margin-right: auto;\n}\n.gn-action-bar-item + .gn-action-bar-item_spacing {\n margin-left: 8px;\n}";
|
|
4158
4170
|
styleInject(css_248z$e);
|
|
4159
4171
|
|
|
4160
4172
|
const b$f = block('action-bar-item');
|
|
@@ -4163,7 +4175,7 @@ const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
|
4163
4175
|
};
|
|
4164
4176
|
ActionBarItem.displayName = 'ActionBar.Item';
|
|
4165
4177
|
|
|
4166
|
-
var css_248z$d = ".
|
|
4178
|
+
var css_248z$d = ".gn-action-bar-section {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}\n.gn-action-bar-section + .gn-action-bar-section {\n border-left: solid 1px var(--g-color-line-generic);\n}\n.gn-action-bar-section_type_primary {\n flex: 1 1 auto;\n padding-left: 20px;\n padding-right: 20px;\n}\n.gn-action-bar-section_type_secondary {\n padding-left: 6px;\n padding-right: 6px;\n}";
|
|
4167
4179
|
styleInject(css_248z$d);
|
|
4168
4180
|
|
|
4169
4181
|
const b$e = block('action-bar-section');
|
|
@@ -4172,7 +4184,7 @@ const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
|
4172
4184
|
};
|
|
4173
4185
|
ActionBarSection.displayName = 'ActionBar.Section';
|
|
4174
4186
|
|
|
4175
|
-
var css_248z$c = ".
|
|
4187
|
+
var css_248z$c = ".gn-action-bar-separator {\n list-style: none;\n margin: 0;\n padding: 0;\n margin-left: 6px;\n margin-right: 6px;\n border-right: solid 1px var(--g-color-line-generic);\n height: 40px;\n}";
|
|
4176
4188
|
styleInject(css_248z$c);
|
|
4177
4189
|
|
|
4178
4190
|
const b$d = block('action-bar-separator');
|
|
@@ -4181,7 +4193,7 @@ const ActionBarSeparator = () => {
|
|
|
4181
4193
|
};
|
|
4182
4194
|
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
4183
4195
|
|
|
4184
|
-
var css_248z$b = ".
|
|
4196
|
+
var css_248z$b = ".gn-action-bar {\n box-sizing: border-box;\n height: 40px;\n border-bottom: solid 1px var(--g-color-line-generic);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}";
|
|
4185
4197
|
styleInject(css_248z$b);
|
|
4186
4198
|
|
|
4187
4199
|
const b$c = block('action-bar');
|
|
@@ -4196,7 +4208,7 @@ const PublicActionBar = Object.assign(ActionBar, {
|
|
|
4196
4208
|
Separator: ActionBarSeparator,
|
|
4197
4209
|
});
|
|
4198
4210
|
|
|
4199
|
-
var css_248z$a = ".
|
|
4211
|
+
var css_248z$a = ".gn-title {\n box-sizing: border-box;\n padding: 14px 10px 14px 20px;\n min-height: 64px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.gn-title_separator {\n border-bottom: 1px solid var(--g-color-line-generic);\n}\n.gn-title__text {\n margin: 0;\n margin-right: 20px;\n}";
|
|
4200
4212
|
styleInject(css_248z$a);
|
|
4201
4213
|
|
|
4202
4214
|
const b$b = block('title');
|
|
@@ -4240,7 +4252,7 @@ function filterHotkeys(hotkeys, filter) {
|
|
|
4240
4252
|
return hotkeys;
|
|
4241
4253
|
}
|
|
4242
4254
|
|
|
4243
|
-
var css_248z$9 = ".
|
|
4255
|
+
var css_248z$9 = ".gn-hotkeys-panel {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n --hotkeys-panel-width: 400px;\n --hotkeys-panel-vertical-padding: 18px;\n --hotkeys-panel-horizontal-padding: 24px;\n}\n.gn-hotkeys-panel__drawer-item {\n width: var(--hotkeys-panel-width);\n padding: var(--hotkeys-panel-vertical-padding) 0;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n}\n.gn-hotkeys-panel__title {\n margin: 0 var(--hotkeys-panel-horizontal-padding) 16px var(--hotkeys-panel-horizontal-padding);\n}\n.gn-hotkeys-panel__search {\n padding: 0 var(--hotkeys-panel-horizontal-padding);\n margin-bottom: 14px;\n}\n.gn-hotkeys-panel__list {\n flex: 1;\n overflow-y: auto;\n}\n.gn-hotkeys-panel__item {\n height: auto;\n padding: 8px var(--hotkeys-panel-horizontal-padding);\n}\n.gn-hotkeys-panel__item.yc-list__item_active {\n background: inherit;\n}\n.gn-hotkeys-panel__item-content {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n width: 100%;\n font-size: var(--g-text-body-1-font-size);\n line-height: var(--g-text-body-1-line-height);\n color: var(--g-color-text-primary);\n}\n.gn-hotkeys-panel__item-content_group {\n font-size: var(--g-text-body-2-font-size);\n font-weight: 500;\n line-height: var(--g-text-body-2-line-height);\n}\n.gn-hotkeys-panel__hotkey {\n color: var(--g-color-text-complementary);\n}";
|
|
4244
4256
|
styleInject(css_248z$9);
|
|
4245
4257
|
|
|
4246
4258
|
const b$a = block('hotkeys-panel');
|
|
@@ -4864,7 +4876,7 @@ function SettingsSearch({ className, onChange, debounce = 200, inputRef, inputSi
|
|
|
4864
4876
|
React__default["default"].createElement(uikit.TextInput, { controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
|
|
4865
4877
|
}
|
|
4866
4878
|
|
|
4867
|
-
var css_248z$8 = ".
|
|
4879
|
+
var css_248z$8 = ".gn-settings-menu__group-heading {\n font-weight: var(--g-text-accent-font-weight);\n display: inline-block;\n padding: 0 20px;\n margin-bottom: 12px;\n line-height: 18px;\n}\n.gn-settings-menu__group + .gn-settings-menu__group {\n margin-top: 24px;\n}\n.gn-settings-menu__item {\n display: flex;\n align-items: center;\n height: 40px;\n padding: 0 20px;\n cursor: pointer;\n color: var(--g-color-text-primary);\n}\n.gn-settings-menu__item-icon {\n color: var(--g-color-text-misc);\n margin-right: 5px;\n}\n.gn-settings-menu__item:hover, .gn-settings-menu__item_focused {\n background: var(--g-color-base-simple-hover);\n}\n.gn-settings-menu__item_selected {\n background: var(--g-color-base-selection);\n}\n.gn-settings-menu__item_selected:hover, .gn-settings-menu__item_selected.gn-settings-menu__item_focused {\n background: var(--g-color-base-selection-hover);\n}\n.gn-settings-menu__item_disabled {\n color: var(--g-color-text-secondary);\n cursor: auto;\n}\n.gn-settings-menu__item_disabled:hover {\n background: none;\n}\n.gn-settings-menu__item_disabled .gn-settings-menu__item-icon {\n color: var(--g-color-base-misc-heavy);\n}\n.gn-settings-menu__item_badge {\n position: relative;\n}\n.gn-settings-menu__item_badge::after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--g-color-text-danger);\n position: absolute;\n right: 9px;\n top: calc(50% - 3px);\n}";
|
|
4868
4880
|
styleInject(css_248z$8);
|
|
4869
4881
|
|
|
4870
4882
|
const b$8 = block('settings-menu');
|
|
@@ -4938,7 +4950,7 @@ function focusNext(container, focused, direction) {
|
|
|
4938
4950
|
return (_a = elements[currentIndex].getAttribute('data-id')) !== null && _a !== void 0 ? _a : undefined;
|
|
4939
4951
|
}
|
|
4940
4952
|
|
|
4941
|
-
var css_248z$7 = ".
|
|
4953
|
+
var css_248z$7 = ".gn-settings-menu-mobile.yc-tabs_direction_horizontal {\n overflow-x: auto;\n flex-wrap: nowrap;\n overscroll-behavior-x: none;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.gn-settings-menu-mobile.yc-tabs_direction_horizontal::-webkit-scrollbar {\n display: none;\n}\n.gn-settings-menu-mobile__item_badge {\n position: relative;\n}\n.gn-settings-menu-mobile__item_badge::after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--g-color-text-danger);\n position: absolute;\n right: -8px;\n top: 11px;\n}";
|
|
4942
4954
|
styleInject(css_248z$7);
|
|
4943
4955
|
|
|
4944
4956
|
const b$7 = block('settings-menu-mobile');
|
|
@@ -5090,7 +5102,7 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5090
5102
|
return { items, hidden };
|
|
5091
5103
|
}
|
|
5092
5104
|
|
|
5093
|
-
var css_248z$6 = ".
|
|
5105
|
+
var css_248z$6 = ".gn-settings {\n display: grid;\n grid-template-columns: 216px 1fr;\n width: 834px;\n height: 100%;\n}\n.gn-settings_view_mobile {\n display: block;\n width: auto;\n height: calc(80vh - 56px);\n overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n .gn-settings_view_mobile {\n /* stylelint-disable-next-line */\n height: calc(90dvh - 56px);\n }\n}\n.gn-settings_view_mobile.gn-settings_loading {\n text-align: center;\n}\n.gn-settings_view_mobile .gn-settings__loader {\n margin-top: 20px;\n}\n.gn-settings_view_mobile .gn-settings__search {\n padding: 0 20px;\n margin: 4px 0 16px;\n}\n.gn-settings_view_mobile .gn-settings__page {\n overflow-y: visible;\n}\n.gn-settings_view_mobile .gn-settings__tabs .yc-tabs__item:first-child {\n margin-left: 20px;\n}\n.gn-settings_view_mobile .gn-settings__tabs .yc-tabs__item:last-child {\n margin-right: 20px;\n}\n.gn-settings_view_mobile .gn-settings__section-heading {\n font-size: var(--g-text-subheader-3-font-size);\n line-height: var(--g-text-subheader-3-line-height);\n font-weight: var(--g-text-subheader-font-weight);\n}\n.gn-settings_view_mobile .gn-settings__section-subheader {\n color: var(--g-color-text-secondary);\n}\n.gn-settings_view_mobile .gn-settings__section-heading + .gn-settings-subheader {\n margin-top: 8px;\n}\n.gn-settings_view_mobile .gn-settings__section-item {\n margin-top: 0;\n}\n.gn-settings_view_mobile .gn-settings__section-heading + .gn-settings__section-item, .gn-settings_view_mobile .gn-settings__section-subheader + .gn-settings__section-item {\n margin-top: 30px;\n}\n.gn-settings_view_mobile .gn-settings__section-item + .gn-settings__section-item {\n margin-top: 22px;\n}\n.gn-settings_view_mobile .gn-settings__item:not(.gn-settings_view_mobile .gn-settings__item_mode_row) {\n grid-template-columns: 1fr;\n gap: 8px;\n}\n.gn-settings_view_mobile .gn-settings__item-heading {\n font-size: var(--g-text-body-2-font-size);\n line-height: var(--g-text-body-2-line-height);\n font-weight: var(--g-text-body-font-weight);\n}\n.gn-settings_view_mobile .gn-settings__item-description {\n font-size: var(--g-text-body-1-font-size);\n line-height: var(--g-text-body-1-line-height);\n font-weight: var(--g-text-body-font-weight);\n}\n.gn-settings_view_mobile .gn-settings__item_mode_row {\n grid-template-columns: 1fr auto;\n}\n.gn-settings_view_mobile .gn-settings__item_mode_row .gn-settings__item-heading {\n padding-right: 20px;\n}\n.gn-settings_view_mobile .gn-settings__item-content {\n width: 100%;\n}\n.gn-settings_loading {\n grid-template-columns: auto;\n}\n.gn-settings__loader {\n align-self: center;\n justify-self: center;\n}\n.gn-settings__not-found {\n display: grid;\n align-items: center;\n justify-items: center;\n height: 100%;\n}\n.gn-settings__menu {\n border-right: 1px solid var(--g-color-line-generic);\n}\n.gn-settings__heading {\n font-size: var(--g-text-subheader-2-font-size);\n line-height: var(--g-text-subheader-2-line-height);\n font-weight: var(--g-text-subheader-font-weight);\n margin: 20px 20px 0;\n}\n.gn-settings__search {\n margin: 0 20px 16px;\n}\n.gn-settings__page {\n overflow-y: auto;\n}\n.gn-settings__content {\n padding: 20px;\n}\n.gn-settings__section-heading {\n font-size: var(--g-text-subheader-2-font-size);\n line-height: var(--g-text-subheader-2-line-height);\n font-weight: var(--g-text-subheader-font-weight);\n margin: 0;\n}\n.gn-settings__section-item {\n margin-top: 24px;\n}\n.gn-settings__section + .gn-settings__section {\n margin-top: 32px;\n}\n.gn-settings__item {\n display: grid;\n grid-template-columns: 216px 1fr;\n justify-items: start;\n}\n.gn-settings__item_align_top {\n align-items: start;\n}\n.gn-settings__item_align_center {\n align-items: center;\n}\n.gn-settings__item-title_badge {\n position: relative;\n}\n.gn-settings__item-title_badge::after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--g-color-text-danger);\n position: absolute;\n right: -8px;\n top: 1px;\n}\n.gn-settings__item-description {\n font-size: var(--g-text-caption-2-font-size);\n line-height: var(--g-text-caption-2-line-height);\n font-weight: var(--g-text-caption-font-weight);\n display: block;\n margin-top: 2px;\n padding-right: 20px;\n color: var(--g-color-text-secondary);\n}\n.gn-settings__found {\n font-weight: var(--g-text-accent-font-weight);\n background: var(--g-color-base-selection);\n}";
|
|
5094
5106
|
styleInject(css_248z$6);
|
|
5095
5107
|
|
|
5096
5108
|
const b$6 = block('settings');
|
|
@@ -5250,7 +5262,7 @@ const useForwardRef = (ref, initialValue = null) => {
|
|
|
5250
5262
|
return targetRef;
|
|
5251
5263
|
};
|
|
5252
5264
|
|
|
5253
|
-
var css_248z$5 = ".
|
|
5265
|
+
var css_248z$5 = ".gn-mobile-header-burger {\n margin: 0;\n padding: 0;\n font-family: var(--g-font-family-sans);\n font-size: inherit;\n font-weight: 400;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n}\n.gn-mobile-header-burger_opened .gn-mobile-header-burger__icon:before, .gn-mobile-header-burger_opened .gn-mobile-header-burger__icon:after,\n.gn-mobile-header-burger_opened .gn-mobile-header-burger__icon .gn-mobile-header-burger__icon-dash {\n left: 3px;\n}\n.gn-mobile-header-burger_opened .gn-mobile-header-burger__icon:before {\n transform: rotate(45deg);\n}\n.gn-mobile-header-burger_opened .gn-mobile-header-burger__icon:after {\n transform: rotate(-45deg);\n}\n.gn-mobile-header-burger_opened .gn-mobile-header-burger__icon .gn-mobile-header-burger__icon-dash {\n opacity: 0;\n}\n.gn-mobile-header-burger__icon {\n display: flex;\n align-content: center;\n justify-content: center;\n height: var(--mobile-header-icon-size);\n width: var(--mobile-header-icon-size);\n position: relative;\n}\n.gn-mobile-header-burger__icon:after, .gn-mobile-header-burger__icon:before {\n content: \"\";\n transform-origin: left center;\n transition: transform 0.2s, left 0.2s;\n}\n.gn-mobile-header-burger__icon:before {\n top: 2px;\n}\n.gn-mobile-header-burger__icon:after {\n bottom: 2px;\n}\n.gn-mobile-header-burger__icon:before, .gn-mobile-header-burger__icon:after,\n.gn-mobile-header-burger__icon .gn-mobile-header-burger__icon-dash {\n background-color: var(--g-color-text-primary);\n border-radius: 1px;\n height: 2px;\n left: 0;\n position: absolute;\n width: 100%;\n}\n.gn-mobile-header-burger__icon .gn-mobile-header-burger__icon-dash {\n margin-top: -1px;\n top: 50%;\n transition: opacity 0.2s;\n}";
|
|
5254
5266
|
styleInject(css_248z$5);
|
|
5255
5267
|
|
|
5256
5268
|
const b$5 = block('mobile-header-burger');
|
|
@@ -5259,7 +5271,7 @@ const Burger = React__default["default"].memo(({ opened, className, onClick }) =
|
|
|
5259
5271
|
React__default["default"].createElement("span", { className: b$5('icon-dash') })))));
|
|
5260
5272
|
Burger.displayName = 'Burger';
|
|
5261
5273
|
|
|
5262
|
-
var css_248z$4 = ".
|
|
5274
|
+
var css_248z$4 = ".gn-mobile-header-logo {\n display: flex;\n align-items: center;\n overflow: hidden;\n gap: 8px;\n}\n.gn-mobile-header-logo:is(a), .gn-mobile-header-logo:is(a):hover, .gn-mobile-header-logo:is(a):active, .gn-mobile-header-logo:is(a):visited, .gn-mobile-header-logo:is(a):focus {\n text-decoration: none;\n outline: none;\n color: var(--g-color-text-primary);\n}\n.gn-mobile-header-logo__icon {\n flex-shrink: 0;\n}\n.gn-mobile-header-logo__title {\n font-size: var(--g-text-header-1-font-size);\n line-height: var(--g-text-header-1-line-height);\n font-weight: var(--g-text-header-font-weight);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}";
|
|
5263
5275
|
styleInject(css_248z$4);
|
|
5264
5276
|
|
|
5265
5277
|
const b$4 = block('mobile-header-logo');
|
|
@@ -5316,7 +5328,7 @@ const getSelectedItemIndex = (items) => {
|
|
|
5316
5328
|
return index === -1 ? undefined : index;
|
|
5317
5329
|
};
|
|
5318
5330
|
|
|
5319
|
-
var css_248z$3 = ".
|
|
5331
|
+
var css_248z$3 = ".gn-burger-composite-bar {\n overflow-y: auto;\n}\n.gn-burger-composite-bar__item {\n display: flex;\n height: 100%;\n align-items: center;\n flex-grow: 1;\n box-sizing: border-box;\n padding: 4px 22px 4px 12px;\n overflow: hidden;\n}\n.gn-burger-composite-bar__item-icon-place {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 40px;\n margin-right: 8px;\n}\n.gn-burger-composite-bar .gn-burger-composite-bar__item-icon {\n color: var(--g-color-text-misc);\n}\n.gn-burger-composite-bar__item-title {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--g-text-body-2-font-size);\n line-height: var(--g-text-body-2-line-height);\n font-weight: var(--g-text-body-font-weight);\n}\n.gn-burger-composite-bar__link {\n display: flex;\n flex-grow: 1;\n height: 100%;\n align-items: center;\n}\n.gn-burger-composite-bar__link, .gn-burger-composite-bar__link:hover, .gn-burger-composite-bar__link:active, .gn-burger-composite-bar__link:visited, .gn-burger-composite-bar__link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.gn-burger-composite-bar__menu-divider {\n margin: 0;\n flex-grow: 1;\n border-top: 1px solid var(--g-color-line-generic);\n}\n.gn-burger-composite-bar__root-menu-item.yc-list__item_selected {\n background-color: var(--g-color-base-selection);\n}\n.gn-burger-composite-bar__root-menu-item:not(.yc-list__item_selected).yc-list__item_active {\n background: none;\n}";
|
|
5320
5332
|
styleInject(css_248z$3);
|
|
5321
5333
|
|
|
5322
5334
|
const b$3 = block('burger-composite-bar');
|
|
@@ -5347,7 +5359,7 @@ const BurgerCompositeBar = React__default["default"].memo(({ items, onItemClick
|
|
|
5347
5359
|
});
|
|
5348
5360
|
BurgerCompositeBar.displayName = 'BurgerCompositeBar';
|
|
5349
5361
|
|
|
5350
|
-
var css_248z$2 = ".
|
|
5362
|
+
var css_248z$2 = ".gn-mobile-header-burger-menu {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.gn-mobile-header-burger-menu__footer {\n display: flex;\n border-top: 1px solid var(--g-color-base-generic);\n margin-top: auto;\n}";
|
|
5351
5363
|
styleInject(css_248z$2);
|
|
5352
5364
|
|
|
5353
5365
|
const b$2 = block('mobile-header-burger-menu');
|
|
@@ -5360,7 +5372,7 @@ const BurgerMenu = React__default["default"].memo(({ items = [], renderFooter, m
|
|
|
5360
5372
|
});
|
|
5361
5373
|
BurgerMenu.displayName = 'BurgerMenu';
|
|
5362
5374
|
|
|
5363
|
-
var css_248z$1 = ".
|
|
5375
|
+
var css_248z$1 = ".gn-mobile-header {\n --mobile-header-min-heigth: 50px;\n --mobile-header-icon-size: 20px;\n background-color: var(--g-color-base-background);\n}\n.gn-mobile-header__header {\n background-color: var(--g-color-base-background);\n border-bottom: 1px solid var(--g-color-line-generic);\n position: sticky;\n top: 0;\n padding: 0 10px;\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 100;\n}\n.gn-mobile-header__burger {\n padding: 12px;\n}\n.gn-mobile-header__burger-menu, .gn-mobile-header__panel-item {\n background-color: var(--g-color-base-background);\n width: 320px;\n max-width: 90vw;\n max-height: 100%;\n}\n.gn-mobile-header__user-menu {\n overflow-y: auto;\n}\n.gn-mobile-header__panels {\n z-index: 98;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: var(--mobile-header-min-heigth);\n overflow: hidden;\n}\n.gn-mobile-header__content {\n overflow: auto;\n}";
|
|
5364
5376
|
styleInject(css_248z$1);
|
|
5365
5377
|
|
|
5366
5378
|
const b$1 = block('mobile-header');
|
|
@@ -5462,7 +5474,7 @@ const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, p
|
|
|
5462
5474
|
});
|
|
5463
5475
|
MobileHeader.displayName = 'MobileHeader';
|
|
5464
5476
|
|
|
5465
|
-
var css_248z = ".
|
|
5477
|
+
var css_248z = ".gn-mobile-header-footer-item {\n flex-grow: 1;\n position: relative;\n}\n.gn-mobile-header-footer-item__button {\n margin: 0;\n padding: 0;\n font-family: var(--g-font-family-sans);\n font-size: inherit;\n font-weight: 400;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 13px 10px;\n width: 100%;\n box-sizing: border-box;\n}\n.gn-mobile-header-footer-item .gn-mobile-header-footer-item__icon {\n color: var(--g-color-text-misc);\n}\n.gn-mobile-header-footer-item + .gn-mobile-header-footer-item::before {\n content: \"\";\n border-left: 1px solid var(--g-color-base-generic);\n position: absolute;\n top: 8px;\n bottom: 8px;\n left: 0;\n}\n.gn-mobile-header-footer-item:empty {\n display: none;\n}";
|
|
5466
5478
|
styleInject(css_248z);
|
|
5467
5479
|
|
|
5468
5480
|
const b = block('mobile-header-footer-item');
|
|
@@ -5481,22 +5493,6 @@ const FooterItem = ({ icon, iconSize = MOBILE_HEADER_ICON_SIZE, className, modal
|
|
|
5481
5493
|
React__default["default"].createElement(uikit.Sheet, { id: modalItem.id, title: modalItem.title, visible: modalItem.visible, className: b('modal', modalItem.className), contentClassName: b('modal-content', modalItem.contentClassName), allowHideOnContentScroll: modalItem.modalAllowHideOnContentScroll, onClose: modalItem.onClose }, (_a = modalItem.renderContent) === null || _a === void 0 ? void 0 : _a.call(modalItem))));
|
|
5482
5494
|
};
|
|
5483
5495
|
|
|
5484
|
-
exports.Lang = void 0;
|
|
5485
|
-
(function (Lang) {
|
|
5486
|
-
Lang["Ru"] = "ru";
|
|
5487
|
-
Lang["En"] = "en";
|
|
5488
|
-
})(exports.Lang || (exports.Lang = {}));
|
|
5489
|
-
let subs = [];
|
|
5490
|
-
const config = {
|
|
5491
|
-
lang: exports.Lang.En,
|
|
5492
|
-
};
|
|
5493
|
-
const configure = (newConfig) => {
|
|
5494
|
-
Object.assign(config, newConfig);
|
|
5495
|
-
subs.forEach((sub) => {
|
|
5496
|
-
sub(config);
|
|
5497
|
-
});
|
|
5498
|
-
};
|
|
5499
|
-
|
|
5500
5496
|
exports.ActionBar = PublicActionBar;
|
|
5501
5497
|
exports.AsideHeader = AsideHeader;
|
|
5502
5498
|
exports.AsideHeaderContextProvider = AsideHeaderContextProvider;
|
|
@@ -5508,6 +5504,5 @@ exports.MobileHeader = MobileHeader;
|
|
|
5508
5504
|
exports.MobileHeaderFooterItem = FooterItem;
|
|
5509
5505
|
exports.Settings = Settings;
|
|
5510
5506
|
exports.Title = Title;
|
|
5511
|
-
exports.configure = configure;
|
|
5512
5507
|
exports.useAsideHeaderContext = useAsideHeaderContext;
|
|
5513
5508
|
//# sourceMappingURL=index.js.map
|