@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/esm/index.js
CHANGED
|
@@ -62,7 +62,7 @@ bemClassNameLite.reset = function () {
|
|
|
62
62
|
};
|
|
63
63
|
var _default = lib$1.default = bemClassNameLite;
|
|
64
64
|
|
|
65
|
-
const NAMESPACE = '
|
|
65
|
+
const NAMESPACE = 'gn-';
|
|
66
66
|
function block(name) {
|
|
67
67
|
return _default(`${NAMESPACE}${name}`);
|
|
68
68
|
}
|
|
@@ -1357,7 +1357,7 @@ function removeClass$1(element, className) {
|
|
|
1357
1357
|
}
|
|
1358
1358
|
}
|
|
1359
1359
|
|
|
1360
|
-
var config
|
|
1360
|
+
var config = {
|
|
1361
1361
|
disabled: false
|
|
1362
1362
|
};
|
|
1363
1363
|
|
|
@@ -1637,7 +1637,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
|
|
|
1637
1637
|
var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
|
|
1638
1638
|
// if we are mounting and running this it means appear _must_ be set
|
|
1639
1639
|
|
|
1640
|
-
if (!mounting && !enter || config
|
|
1640
|
+
if (!mounting && !enter || config.disabled) {
|
|
1641
1641
|
this.safeSetState({
|
|
1642
1642
|
status: ENTERED
|
|
1643
1643
|
}, function () {
|
|
@@ -1669,7 +1669,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
|
|
|
1669
1669
|
var timeouts = this.getTimeouts();
|
|
1670
1670
|
var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED
|
|
1671
1671
|
|
|
1672
|
-
if (!exit || config
|
|
1672
|
+
if (!exit || config.disabled) {
|
|
1673
1673
|
this.safeSetState({
|
|
1674
1674
|
status: EXITED
|
|
1675
1675
|
}, function () {
|
|
@@ -3136,7 +3136,7 @@ function styleInject(css, ref) {
|
|
|
3136
3136
|
}
|
|
3137
3137
|
}
|
|
3138
3138
|
|
|
3139
|
-
var css_248z$m = ".
|
|
3139
|
+
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}";
|
|
3140
3140
|
styleInject(css_248z$m);
|
|
3141
3141
|
|
|
3142
3142
|
const b$n = block('drawer');
|
|
@@ -3196,7 +3196,7 @@ const AsideHeaderContext = React__default.createContext({
|
|
|
3196
3196
|
const AsideHeaderContextProvider = AsideHeaderContext.Provider;
|
|
3197
3197
|
const useAsideHeaderContext = () => React__default.useContext(AsideHeaderContext);
|
|
3198
3198
|
|
|
3199
|
-
var css_248z$l = ".
|
|
3199
|
+
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}";
|
|
3200
3200
|
styleInject(css_248z$l);
|
|
3201
3201
|
|
|
3202
3202
|
const b$m = block('logo');
|
|
@@ -3608,6 +3608,9 @@ const POPUP_PLACEMENT = ['right-start', 'right-end', 'right'];
|
|
|
3608
3608
|
const POPUP_ITEM_HEIGHT = 28;
|
|
3609
3609
|
|
|
3610
3610
|
function getItemHeight$1(item) {
|
|
3611
|
+
if (!isMenuItem(item)) {
|
|
3612
|
+
return ITEM_HEIGHT;
|
|
3613
|
+
}
|
|
3611
3614
|
switch (item.type) {
|
|
3612
3615
|
case 'action':
|
|
3613
3616
|
return 50;
|
|
@@ -3694,8 +3697,11 @@ function getAutosizeListItems(items, height, collapseItem) {
|
|
|
3694
3697
|
}
|
|
3695
3698
|
return { listItems, collapseItems };
|
|
3696
3699
|
}
|
|
3700
|
+
function isMenuItem(item) {
|
|
3701
|
+
return (item === null || item === void 0 ? void 0 : item.id) !== undefined;
|
|
3702
|
+
}
|
|
3697
3703
|
|
|
3698
|
-
var css_248z$k = ".
|
|
3704
|
+
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}";
|
|
3699
3705
|
styleInject(css_248z$k);
|
|
3700
3706
|
|
|
3701
3707
|
const b$l = block('composite-bar-item');
|
|
@@ -3756,7 +3762,7 @@ const Item$1 = (props) => {
|
|
|
3756
3762
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3757
3763
|
}
|
|
3758
3764
|
} },
|
|
3759
|
-
React__default.createElement("div", { className: b$l('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
|
|
3765
|
+
React__default.createElement("div", { className: b$l('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
|
|
3760
3766
|
React__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)),
|
|
3761
3767
|
React__default.createElement("div", { className: b$l('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3762
3768
|
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { contentClassName: b$l('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
@@ -3823,7 +3829,7 @@ class MultipleTooltipProvider extends React__default.PureComponent {
|
|
|
3823
3829
|
}
|
|
3824
3830
|
}
|
|
3825
3831
|
|
|
3826
|
-
var css_248z$j = ".
|
|
3832
|
+
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}";
|
|
3827
3833
|
styleInject(css_248z$j);
|
|
3828
3834
|
|
|
3829
3835
|
const b$k = block('multiple-tooltip');
|
|
@@ -3853,11 +3859,11 @@ const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
|
|
|
3853
3859
|
}))));
|
|
3854
3860
|
};
|
|
3855
3861
|
|
|
3856
|
-
var css_248z$i = ".
|
|
3862
|
+
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}";
|
|
3857
3863
|
styleInject(css_248z$i);
|
|
3858
3864
|
|
|
3859
3865
|
const b$j = block('composite-bar');
|
|
3860
|
-
const CompositeBarView = ({ items, onItemClick, collapseItems, multipleTooltip =
|
|
3866
|
+
const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
|
|
3861
3867
|
const ref = useRef(null);
|
|
3862
3868
|
const tooltipRef = useRef(null);
|
|
3863
3869
|
const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
|
|
@@ -3922,26 +3928,32 @@ const CompositeBarView = ({ items, onItemClick, collapseItems, multipleTooltip =
|
|
|
3922
3928
|
}, [lastClickedItemIndex, setMultipleTooltipContextValue]);
|
|
3923
3929
|
return (React__default.createElement(React__default.Fragment, null,
|
|
3924
3930
|
React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
3925
|
-
React__default.createElement(List, { ref: ref, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'),
|
|
3926
|
-
|
|
3931
|
+
React__default.createElement(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) => {
|
|
3932
|
+
const itemExtraProps = isMenuItem(item) ? { item } : item;
|
|
3933
|
+
const enableTooltip = isMenuItem(item)
|
|
3934
|
+
? !multipleTooltip
|
|
3935
|
+
: item.enableTooltip;
|
|
3936
|
+
return (React__default.createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
|
|
3937
|
+
} })),
|
|
3938
|
+
type === 'menu' && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
3927
3939
|
};
|
|
3928
|
-
const CompositeBar = ({
|
|
3940
|
+
const CompositeBar = ({ type, items, dict, onItemClick, multipleTooltip = false, }) => {
|
|
3929
3941
|
if (items.length === 0) {
|
|
3930
3942
|
return null;
|
|
3931
3943
|
}
|
|
3932
3944
|
let node;
|
|
3933
|
-
if (
|
|
3945
|
+
if (type === 'menu') {
|
|
3934
3946
|
const minHeight = getItemsMinHeight(items);
|
|
3935
3947
|
const collapseItem = getMoreButtonItem(dict);
|
|
3936
3948
|
node = (React__default.createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
|
|
3937
3949
|
const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
|
|
3938
3950
|
return (React__default.createElement("div", { style: { width, height } },
|
|
3939
|
-
React__default.createElement(CompositeBarView, { items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
3951
|
+
React__default.createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
3940
3952
|
}))));
|
|
3941
3953
|
}
|
|
3942
3954
|
else {
|
|
3943
3955
|
node = (React__default.createElement("div", { className: b$j() },
|
|
3944
|
-
React__default.createElement(CompositeBarView, { items: items, onItemClick: onItemClick
|
|
3956
|
+
React__default.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
|
|
3945
3957
|
}
|
|
3946
3958
|
return React__default.createElement(MultipleTooltipProvider, null, node);
|
|
3947
3959
|
};
|
|
@@ -3992,7 +4004,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
3992
4004
|
};
|
|
3993
4005
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
3994
4006
|
|
|
3995
|
-
var css_248z$h = ".
|
|
4007
|
+
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}";
|
|
3996
4008
|
styleInject(css_248z$h);
|
|
3997
4009
|
|
|
3998
4010
|
// TODO: remove temporary fix for expand button
|
|
@@ -4009,7 +4021,7 @@ class AsideHeader extends React__default.Component {
|
|
|
4009
4021
|
React__default.createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
|
|
4010
4022
|
React__default.createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4011
4023
|
this.renderHeader(),
|
|
4012
|
-
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, {
|
|
4024
|
+
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { type: "menu", items: menuItems, dict: dict, onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$i('menu-items') })),
|
|
4013
4025
|
this.renderFooter(size),
|
|
4014
4026
|
this.renderCollapseButton())),
|
|
4015
4027
|
panelItems && this.renderPanels(size)));
|
|
@@ -4020,7 +4032,7 @@ class AsideHeader extends React__default.Component {
|
|
|
4020
4032
|
this.renderLogo = () => React__default.createElement(Logo$1, Object.assign({}, this.props.logo, { onClick: this.onLogoClick }));
|
|
4021
4033
|
this.renderHeader = () => (React__default.createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4022
4034
|
this.renderLogo(),
|
|
4023
|
-
React__default.createElement(CompositeBar, { items: this.props.subheaderItems,
|
|
4035
|
+
React__default.createElement(CompositeBar, { type: "subheader", items: this.props.subheaderItems, onItemClick: this.onItemClick }),
|
|
4024
4036
|
React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4025
4037
|
this.renderFooter = (size) => {
|
|
4026
4038
|
const { renderFooter, compact } = this.props;
|
|
@@ -4109,7 +4121,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
4109
4121
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
4110
4122
|
};
|
|
4111
4123
|
|
|
4112
|
-
var css_248z$g = ".
|
|
4124
|
+
var css_248z$g = ".gn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4113
4125
|
styleInject(css_248z$g);
|
|
4114
4126
|
|
|
4115
4127
|
const b$h = block('footer-item');
|
|
@@ -4118,7 +4130,7 @@ const FooterItem$1 = (_a) => {
|
|
|
4118
4130
|
return (React__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 })));
|
|
4119
4131
|
};
|
|
4120
4132
|
|
|
4121
|
-
var css_248z$f = ".
|
|
4133
|
+
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}";
|
|
4122
4134
|
styleInject(css_248z$f);
|
|
4123
4135
|
|
|
4124
4136
|
const b$g = block('action-bar-group');
|
|
@@ -4127,7 +4139,7 @@ const ActionBarGroup = ({ children, className, pull }) => {
|
|
|
4127
4139
|
};
|
|
4128
4140
|
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
4129
4141
|
|
|
4130
|
-
var css_248z$e = ".
|
|
4142
|
+
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}";
|
|
4131
4143
|
styleInject(css_248z$e);
|
|
4132
4144
|
|
|
4133
4145
|
const b$f = block('action-bar-item');
|
|
@@ -4136,7 +4148,7 @@ const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
|
4136
4148
|
};
|
|
4137
4149
|
ActionBarItem.displayName = 'ActionBar.Item';
|
|
4138
4150
|
|
|
4139
|
-
var css_248z$d = ".
|
|
4151
|
+
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}";
|
|
4140
4152
|
styleInject(css_248z$d);
|
|
4141
4153
|
|
|
4142
4154
|
const b$e = block('action-bar-section');
|
|
@@ -4145,7 +4157,7 @@ const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
|
4145
4157
|
};
|
|
4146
4158
|
ActionBarSection.displayName = 'ActionBar.Section';
|
|
4147
4159
|
|
|
4148
|
-
var css_248z$c = ".
|
|
4160
|
+
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}";
|
|
4149
4161
|
styleInject(css_248z$c);
|
|
4150
4162
|
|
|
4151
4163
|
const b$d = block('action-bar-separator');
|
|
@@ -4154,7 +4166,7 @@ const ActionBarSeparator = () => {
|
|
|
4154
4166
|
};
|
|
4155
4167
|
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
4156
4168
|
|
|
4157
|
-
var css_248z$b = ".
|
|
4169
|
+
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}";
|
|
4158
4170
|
styleInject(css_248z$b);
|
|
4159
4171
|
|
|
4160
4172
|
const b$c = block('action-bar');
|
|
@@ -4169,7 +4181,7 @@ const PublicActionBar = Object.assign(ActionBar, {
|
|
|
4169
4181
|
Separator: ActionBarSeparator,
|
|
4170
4182
|
});
|
|
4171
4183
|
|
|
4172
|
-
var css_248z$a = ".
|
|
4184
|
+
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}";
|
|
4173
4185
|
styleInject(css_248z$a);
|
|
4174
4186
|
|
|
4175
4187
|
const b$b = block('title');
|
|
@@ -4213,7 +4225,7 @@ function filterHotkeys(hotkeys, filter) {
|
|
|
4213
4225
|
return hotkeys;
|
|
4214
4226
|
}
|
|
4215
4227
|
|
|
4216
|
-
var css_248z$9 = ".
|
|
4228
|
+
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}";
|
|
4217
4229
|
styleInject(css_248z$9);
|
|
4218
4230
|
|
|
4219
4231
|
const b$a = block('hotkeys-panel');
|
|
@@ -4837,7 +4849,7 @@ function SettingsSearch({ className, onChange, debounce = 200, inputRef, inputSi
|
|
|
4837
4849
|
React__default.createElement(TextInput, { controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
|
|
4838
4850
|
}
|
|
4839
4851
|
|
|
4840
|
-
var css_248z$8 = ".
|
|
4852
|
+
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}";
|
|
4841
4853
|
styleInject(css_248z$8);
|
|
4842
4854
|
|
|
4843
4855
|
const b$8 = block('settings-menu');
|
|
@@ -4911,7 +4923,7 @@ function focusNext(container, focused, direction) {
|
|
|
4911
4923
|
return (_a = elements[currentIndex].getAttribute('data-id')) !== null && _a !== void 0 ? _a : undefined;
|
|
4912
4924
|
}
|
|
4913
4925
|
|
|
4914
|
-
var css_248z$7 = ".
|
|
4926
|
+
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}";
|
|
4915
4927
|
styleInject(css_248z$7);
|
|
4916
4928
|
|
|
4917
4929
|
const b$7 = block('settings-menu-mobile');
|
|
@@ -5063,7 +5075,7 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5063
5075
|
return { items, hidden };
|
|
5064
5076
|
}
|
|
5065
5077
|
|
|
5066
|
-
var css_248z$6 = ".
|
|
5078
|
+
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}";
|
|
5067
5079
|
styleInject(css_248z$6);
|
|
5068
5080
|
|
|
5069
5081
|
const b$6 = block('settings');
|
|
@@ -5223,7 +5235,7 @@ const useForwardRef = (ref, initialValue = null) => {
|
|
|
5223
5235
|
return targetRef;
|
|
5224
5236
|
};
|
|
5225
5237
|
|
|
5226
|
-
var css_248z$5 = ".
|
|
5238
|
+
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}";
|
|
5227
5239
|
styleInject(css_248z$5);
|
|
5228
5240
|
|
|
5229
5241
|
const b$5 = block('mobile-header-burger');
|
|
@@ -5232,7 +5244,7 @@ const Burger = React__default.memo(({ opened, className, onClick }) => (React__d
|
|
|
5232
5244
|
React__default.createElement("span", { className: b$5('icon-dash') })))));
|
|
5233
5245
|
Burger.displayName = 'Burger';
|
|
5234
5246
|
|
|
5235
|
-
var css_248z$4 = ".
|
|
5247
|
+
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}";
|
|
5236
5248
|
styleInject(css_248z$4);
|
|
5237
5249
|
|
|
5238
5250
|
const b$4 = block('mobile-header-logo');
|
|
@@ -5289,7 +5301,7 @@ const getSelectedItemIndex = (items) => {
|
|
|
5289
5301
|
return index === -1 ? undefined : index;
|
|
5290
5302
|
};
|
|
5291
5303
|
|
|
5292
|
-
var css_248z$3 = ".
|
|
5304
|
+
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}";
|
|
5293
5305
|
styleInject(css_248z$3);
|
|
5294
5306
|
|
|
5295
5307
|
const b$3 = block('burger-composite-bar');
|
|
@@ -5320,7 +5332,7 @@ const BurgerCompositeBar = React__default.memo(({ items, onItemClick }) => {
|
|
|
5320
5332
|
});
|
|
5321
5333
|
BurgerCompositeBar.displayName = 'BurgerCompositeBar';
|
|
5322
5334
|
|
|
5323
|
-
var css_248z$2 = ".
|
|
5335
|
+
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}";
|
|
5324
5336
|
styleInject(css_248z$2);
|
|
5325
5337
|
|
|
5326
5338
|
const b$2 = block('mobile-header-burger-menu');
|
|
@@ -5333,7 +5345,7 @@ const BurgerMenu = React__default.memo(({ items = [], renderFooter, modalItem, c
|
|
|
5333
5345
|
});
|
|
5334
5346
|
BurgerMenu.displayName = 'BurgerMenu';
|
|
5335
5347
|
|
|
5336
|
-
var css_248z$1 = ".
|
|
5348
|
+
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}";
|
|
5337
5349
|
styleInject(css_248z$1);
|
|
5338
5350
|
|
|
5339
5351
|
const b$1 = block('mobile-header');
|
|
@@ -5435,7 +5447,7 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, panelItems =
|
|
|
5435
5447
|
});
|
|
5436
5448
|
MobileHeader.displayName = 'MobileHeader';
|
|
5437
5449
|
|
|
5438
|
-
var css_248z = ".
|
|
5450
|
+
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}";
|
|
5439
5451
|
styleInject(css_248z);
|
|
5440
5452
|
|
|
5441
5453
|
const b = block('mobile-header-footer-item');
|
|
@@ -5454,21 +5466,5 @@ const FooterItem = ({ icon, iconSize = MOBILE_HEADER_ICON_SIZE, className, modal
|
|
|
5454
5466
|
React__default.createElement(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))));
|
|
5455
5467
|
};
|
|
5456
5468
|
|
|
5457
|
-
|
|
5458
|
-
(function (Lang) {
|
|
5459
|
-
Lang["Ru"] = "ru";
|
|
5460
|
-
Lang["En"] = "en";
|
|
5461
|
-
})(Lang || (Lang = {}));
|
|
5462
|
-
let subs = [];
|
|
5463
|
-
const config = {
|
|
5464
|
-
lang: Lang.En,
|
|
5465
|
-
};
|
|
5466
|
-
const configure = (newConfig) => {
|
|
5467
|
-
Object.assign(config, newConfig);
|
|
5468
|
-
subs.forEach((sub) => {
|
|
5469
|
-
sub(config);
|
|
5470
|
-
});
|
|
5471
|
-
};
|
|
5472
|
-
|
|
5473
|
-
export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Dict, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, MobileHeaderDict, FooterItem as MobileHeaderFooterItem, Settings, Title, configure, useAsideHeaderContext };
|
|
5469
|
+
export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Dict, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, MobileHeader, MobileHeaderDict, FooterItem as MobileHeaderFooterItem, Settings, Title, useAsideHeaderContext };
|
|
5474
5470
|
//# sourceMappingURL=index.js.map
|