@gravity-ui/navigation 0.8.0 → 0.9.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/CHANGELOG.md +15 -0
- package/build/cjs/components/ActionBar/__stories__/ActionBar.stories.d.ts +21 -0
- package/build/cjs/components/ActionBar/__stories__/ActionBarSingleSection.d.ts +2 -0
- package/build/cjs/components/index.d.ts +2 -1
- package/build/cjs/index.js +450 -202
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/ActionBar/__stories__/ActionBar.stories.d.ts +21 -0
- package/build/esm/components/ActionBar/__stories__/ActionBarSingleSection.d.ts +2 -0
- package/build/esm/components/index.d.ts +2 -1
- package/build/esm/index.js +450 -204
- package/build/esm/index.js.map +1 -1
- package/package.json +1 -1
package/build/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent, useState, useMemo, useCallback } from 'react';
|
|
3
|
-
import { useBodyScrollLock, Button, Icon, Popup, List, Tooltip, Text, Hotkey, TextInput, Tabs, Loader } from '@gravity-ui/uikit';
|
|
2
|
+
import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent, useState, useMemo, useCallback, useEffect } from 'react';
|
|
3
|
+
import { useBodyScrollLock, Button, Icon, Popup, List, Tooltip, Text, Hotkey, TextInput, Tabs, Loader, Sheet, eventBroker } from '@gravity-ui/uikit';
|
|
4
4
|
import ReactDOM from 'react-dom';
|
|
5
5
|
import { Xmark } from '@gravity-ui/icons';
|
|
6
6
|
|
|
@@ -61,84 +61,6 @@ function block(name) {
|
|
|
61
61
|
return _default(`${NAMESPACE}${name}`);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
function styleInject(css, ref) {
|
|
65
|
-
if ( ref === void 0 ) ref = {};
|
|
66
|
-
var insertAt = ref.insertAt;
|
|
67
|
-
|
|
68
|
-
if (!css || typeof document === 'undefined') { return; }
|
|
69
|
-
|
|
70
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
71
|
-
var style = document.createElement('style');
|
|
72
|
-
style.type = 'text/css';
|
|
73
|
-
|
|
74
|
-
if (insertAt === 'top') {
|
|
75
|
-
if (head.firstChild) {
|
|
76
|
-
head.insertBefore(style, head.firstChild);
|
|
77
|
-
} else {
|
|
78
|
-
head.appendChild(style);
|
|
79
|
-
}
|
|
80
|
-
} else {
|
|
81
|
-
head.appendChild(style);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
if (style.styleSheet) {
|
|
85
|
-
style.styleSheet.cssText = css;
|
|
86
|
-
} else {
|
|
87
|
-
style.appendChild(document.createTextNode(css));
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
var css_248z$f = ".ycn-action-bar-group {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n margin-left: auto;\n margin-right: auto;\n}";
|
|
92
|
-
styleInject(css_248z$f);
|
|
93
|
-
|
|
94
|
-
const b$g = block('action-bar-group');
|
|
95
|
-
const ActionBarGroup = ({ children, className, pull }) => {
|
|
96
|
-
return (React__default.createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
|
|
97
|
-
};
|
|
98
|
-
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
99
|
-
|
|
100
|
-
var css_248z$e = ".ycn-action-bar-item {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n margin-left: auto;\n margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n margin-left: 8px;\n}";
|
|
101
|
-
styleInject(css_248z$e);
|
|
102
|
-
|
|
103
|
-
const b$f = block('action-bar-item');
|
|
104
|
-
const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
105
|
-
return React__default.createElement("li", { className: b$f({ pull, spacing }, className) }, children);
|
|
106
|
-
};
|
|
107
|
-
ActionBarItem.displayName = 'ActionBar.Item';
|
|
108
|
-
|
|
109
|
-
var css_248z$d = ".ycn-action-bar-section {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n border-left: solid 1px var(--yc-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n flex: 1 1 auto;\n padding-left: 20px;\n padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n padding-left: 6px;\n padding-right: 6px;\n}";
|
|
110
|
-
styleInject(css_248z$d);
|
|
111
|
-
|
|
112
|
-
const b$e = block('action-bar-section');
|
|
113
|
-
const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
114
|
-
return React__default.createElement("div", { className: b$e({ type }) }, children);
|
|
115
|
-
};
|
|
116
|
-
ActionBarSection.displayName = 'ActionBar.Section';
|
|
117
|
-
|
|
118
|
-
var css_248z$c = ".ycn-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(--yc-color-line-generic);\n height: 40px;\n}";
|
|
119
|
-
styleInject(css_248z$c);
|
|
120
|
-
|
|
121
|
-
const b$d = block('action-bar-separator');
|
|
122
|
-
const ActionBarSeparator = () => {
|
|
123
|
-
return React__default.createElement("li", { role: "separator", className: b$d() });
|
|
124
|
-
};
|
|
125
|
-
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
126
|
-
|
|
127
|
-
var css_248z$b = ".ycn-action-bar {\n box-sizing: border-box;\n height: 40px;\n border-bottom: solid 1px var(--yc-color-line-generic);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}";
|
|
128
|
-
styleInject(css_248z$b);
|
|
129
|
-
|
|
130
|
-
const b$c = block('action-bar');
|
|
131
|
-
const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
|
|
132
|
-
return (React__default.createElement("section", { className: b$c(null, className), "aria-label": ariaLabel }, children));
|
|
133
|
-
};
|
|
134
|
-
ActionBar.displayName = 'ActionBar';
|
|
135
|
-
const PublicActionBar = Object.assign(ActionBar, {
|
|
136
|
-
Section: ActionBarSection,
|
|
137
|
-
Group: ActionBarGroup,
|
|
138
|
-
Item: ActionBarItem,
|
|
139
|
-
Separator: ActionBarSeparator,
|
|
140
|
-
});
|
|
141
|
-
|
|
142
64
|
var MobileHeaderDict;
|
|
143
65
|
(function (MobileHeaderDict) {
|
|
144
66
|
MobileHeaderDict["CloseBurger"] = "button_close-burger";
|
|
@@ -3181,15 +3103,42 @@ SwitchTransition.defaultProps = {
|
|
|
3181
3103
|
mode: modes.out
|
|
3182
3104
|
};
|
|
3183
3105
|
|
|
3184
|
-
|
|
3185
|
-
|
|
3106
|
+
function styleInject(css, ref) {
|
|
3107
|
+
if ( ref === void 0 ) ref = {};
|
|
3108
|
+
var insertAt = ref.insertAt;
|
|
3109
|
+
|
|
3110
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
3111
|
+
|
|
3112
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
3113
|
+
var style = document.createElement('style');
|
|
3114
|
+
style.type = 'text/css';
|
|
3115
|
+
|
|
3116
|
+
if (insertAt === 'top') {
|
|
3117
|
+
if (head.firstChild) {
|
|
3118
|
+
head.insertBefore(style, head.firstChild);
|
|
3119
|
+
} else {
|
|
3120
|
+
head.appendChild(style);
|
|
3121
|
+
}
|
|
3122
|
+
} else {
|
|
3123
|
+
head.appendChild(style);
|
|
3124
|
+
}
|
|
3125
|
+
|
|
3126
|
+
if (style.styleSheet) {
|
|
3127
|
+
style.styleSheet.cssText = css;
|
|
3128
|
+
} else {
|
|
3129
|
+
style.appendChild(document.createTextNode(css));
|
|
3130
|
+
}
|
|
3131
|
+
}
|
|
3132
|
+
|
|
3133
|
+
var css_248z$l = ".ycn-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(--yc-color-base-background);\n}\n.ycn-drawer__item_direction_right {\n left: auto;\n right: 0;\n}\n.ycn-drawer__item-transition-enter {\n transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-enter {\n transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-enter-active, .ycn-drawer__item-transition_direction_right-enter-active {\n transform: translate(0, 0);\n transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done, .ycn-drawer__item-transition_direction_right-enter-done {\n filter: blur(0px);\n transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit, .ycn-drawer__item-transition_direction_right-exit {\n transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active, .ycn-drawer__item-transition_direction_right-exit-active {\n transition: transform 300ms;\n}\n.ycn-drawer__item-transition-exit-active {\n transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-exit-active {\n transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-exit-done, .ycn-drawer__item-transition_direction_right-exit-done {\n visibility: hidden;\n}\n.ycn-drawer__veil {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n background-color: var(--yc-color-sfx-veil);\n}\n.ycn-drawer__veil-transition-enter {\n opacity: 0;\n}\n.ycn-drawer__veil-transition-enter-active {\n opacity: 1;\n transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit {\n opacity: 1;\n}\n.ycn-drawer__veil-transition-exit-active {\n opacity: 0;\n transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit-done {\n visibility: hidden;\n}";
|
|
3134
|
+
styleInject(css_248z$l);
|
|
3186
3135
|
|
|
3187
|
-
const b$
|
|
3136
|
+
const b$m = block('drawer');
|
|
3188
3137
|
const TIMEOUT = 300;
|
|
3189
3138
|
const DrawerItem = ({ visible, content, direction, className }) => {
|
|
3190
3139
|
const itemRef = React__default.useRef(null);
|
|
3191
|
-
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3192
|
-
React__default.createElement("div", { ref: itemRef, className: b$
|
|
3140
|
+
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$m('item-transition', { direction }), nodeRef: itemRef },
|
|
3141
|
+
React__default.createElement("div", { ref: itemRef, className: b$m('item', { direction }, className) }, content)));
|
|
3193
3142
|
};
|
|
3194
3143
|
const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
|
|
3195
3144
|
let someItemVisible = false;
|
|
@@ -3220,9 +3169,9 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3220
3169
|
const veilRef = React__default.useRef(null);
|
|
3221
3170
|
return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
|
|
3222
3171
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
3223
|
-
return (React__default.createElement("div", { ref: containerRef, className: b$
|
|
3224
|
-
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3225
|
-
React__default.createElement("div", { ref: veilRef, className: b$
|
|
3172
|
+
return (React__default.createElement("div", { ref: containerRef, className: b$m(null, className), style: style },
|
|
3173
|
+
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$m('veil-transition'), nodeRef: veilRef },
|
|
3174
|
+
React__default.createElement("div", { ref: veilRef, className: b$m('veil'), onClick: onVeilClick })),
|
|
3226
3175
|
React__default.Children.map(children, (child) => {
|
|
3227
3176
|
const childElem = child;
|
|
3228
3177
|
if (childElem.type === DrawerItem) {
|
|
@@ -3234,11 +3183,11 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3234
3183
|
}));
|
|
3235
3184
|
};
|
|
3236
3185
|
|
|
3237
|
-
var css_248z$
|
|
3238
|
-
styleInject(css_248z$
|
|
3186
|
+
var css_248z$k = ".ycn-logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n height: 40px;\n}\n.ycn-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.ycn-logo__logo-btn-place .yc-button::before {\n background-color: transparent;\n}\n.ycn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n --yc-button-height: 38px;\n}\n.ycn-logo__logo {\n font-size: var(--yc-text-body-2-font-size);\n line-height: var(--yc-text-body-2-line-height);\n font-weight: var(--yc-text-body-font-weight);\n vertical-align: middle;\n cursor: pointer;\n}\n.ycn-logo__logo-link, .ycn-logo__logo-link:hover, .ycn-logo__logo-link:active, .ycn-logo__logo-link:visited, .ycn-logo__logo-link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.yc-root .ycn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n background-color: transparent;\n}";
|
|
3187
|
+
styleInject(css_248z$k);
|
|
3239
3188
|
|
|
3240
|
-
const b$
|
|
3241
|
-
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3189
|
+
const b$l = block('logo');
|
|
3190
|
+
const Logo$1 = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3242
3191
|
const hasClickHandler = typeof onClick === 'function';
|
|
3243
3192
|
const hasWrapper = typeof wrapper === 'function';
|
|
3244
3193
|
const linkProps = hasClickHandler
|
|
@@ -3255,18 +3204,18 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3255
3204
|
else if (icon) {
|
|
3256
3205
|
buttonIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
3257
3206
|
}
|
|
3258
|
-
const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$
|
|
3207
|
+
const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$l('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
|
|
3259
3208
|
let logo;
|
|
3260
3209
|
if (typeof text === 'function') {
|
|
3261
3210
|
logo = text();
|
|
3262
3211
|
}
|
|
3263
3212
|
else {
|
|
3264
|
-
logo = (React__default.createElement("div", { className: b$
|
|
3213
|
+
logo = (React__default.createElement("div", { className: b$l('logo'), style: { fontSize: textSize } }, text));
|
|
3265
3214
|
}
|
|
3266
|
-
return (React__default.createElement("div", { className: b$
|
|
3267
|
-
React__default.createElement("div", { className: b$
|
|
3215
|
+
return (React__default.createElement("div", { className: b$l() },
|
|
3216
|
+
React__default.createElement("div", { className: b$l('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3268
3217
|
!compact &&
|
|
3269
|
-
(hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$
|
|
3218
|
+
(hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$l('logo-link'), onClick: onClick }), logo)))));
|
|
3270
3219
|
};
|
|
3271
3220
|
|
|
3272
3221
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -3759,7 +3708,7 @@ const COLLAPSE_ITEM_ID = 'collapse-item-id';
|
|
|
3759
3708
|
const POPUP_PLACEMENT = ['right-start', 'right-end', 'right'];
|
|
3760
3709
|
const POPUP_ITEM_HEIGHT = 28;
|
|
3761
3710
|
|
|
3762
|
-
function getItemHeight(item) {
|
|
3711
|
+
function getItemHeight$1(item) {
|
|
3763
3712
|
switch (item.type) {
|
|
3764
3713
|
case 'action':
|
|
3765
3714
|
return 50;
|
|
@@ -3770,9 +3719,9 @@ function getItemHeight(item) {
|
|
|
3770
3719
|
}
|
|
3771
3720
|
}
|
|
3772
3721
|
function getItemsHeight(items) {
|
|
3773
|
-
return items.reduce((sum, item) => sum + getItemHeight(item), 0);
|
|
3722
|
+
return items.reduce((sum, item) => sum + getItemHeight$1(item), 0);
|
|
3774
3723
|
}
|
|
3775
|
-
function getSelectedItemIndex(items) {
|
|
3724
|
+
function getSelectedItemIndex$1(items) {
|
|
3776
3725
|
const index = items.findIndex(({ current }) => Boolean(current));
|
|
3777
3726
|
return index === -1 ? undefined : index;
|
|
3778
3727
|
}
|
|
@@ -3798,25 +3747,25 @@ function getItemsMinHeight(items) {
|
|
|
3798
3747
|
(pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
|
|
3799
3748
|
}
|
|
3800
3749
|
|
|
3801
|
-
var css_248z$
|
|
3802
|
-
styleInject(css_248z$
|
|
3750
|
+
var css_248z$j = ".ycn-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.ycn-composite-bar-item__icon {\n color: var(--yc-color-text-misc);\n}\n.ycn-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.ycn-composite-bar-item__title {\n display: flex;\n overflow: hidden;\n}\n.ycn-composite-bar-item__title-text {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.ycn-composite-bar-item__title-adornment {\n margin: 0 10px;\n}\n.ycn-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.ycn-composite-bar-item__collapse-item .ycn-composite-bar-item__title-adornment {\n margin-right: 0;\n}\n.ycn-composite-bar-item__menu-divider {\n margin: 0 8px;\n width: 100%;\n border-top: 1px solid var(--yc-color-line-generic);\n cursor: default;\n}\n.ycn-composite-bar-item__collapse-items-popup-content {\n padding: 4px 0;\n}\n.ycn-composite-bar-item__link {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n.ycn-composite-bar-item__link, .ycn-composite-bar-item__link:hover, .ycn-composite-bar-item__link:active, .ycn-composite-bar-item__link:visited, .ycn-composite-bar-item__link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.ycn-composite-bar-item__btn-icon {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ycn-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(--yc-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.ycn-composite-bar-item_type_action:focus {\n box-shadow: 0 0 0 2px var(--yc-color-line-misc);\n}\n.ycn-composite-bar-item_type_action:focus:not(:focus-visible) {\n box-shadow: none;\n}\n.ycn-composite-bar-item_type_action:hover {\n background-color: var(--yc-color-base-float-hover);\n}\n.ycn-composite-bar-item_type_action:active {\n box-shadow: 0 1px 2px var(--yc-color-sfx-shadow);\n transition: none;\n transform: scale(0.96);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__icon-place {\n width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n margin-right: 16px;\n}\n.ycn-composite-bar-item__icon-tooltip_item-type_action {\n margin-left: 10px;\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact).ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular {\n background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact):not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular {\n background-color: var(--yc-color-base-simple-hover);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action {\n width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n margin: 0;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-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.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-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.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n background-color: var(--yc-color-base-simple-hover);\n}";
|
|
3751
|
+
styleInject(css_248z$j);
|
|
3803
3752
|
|
|
3804
|
-
const b$
|
|
3753
|
+
const b$k = block('composite-bar-item');
|
|
3805
3754
|
function renderItemTitle(item) {
|
|
3806
|
-
let titleNode = React__default.createElement("div", { className: b$
|
|
3755
|
+
let titleNode = React__default.createElement("div", { className: b$k('title-text') }, item.title);
|
|
3807
3756
|
if (item.rightAdornment) {
|
|
3808
3757
|
titleNode = (React__default.createElement(React__default.Fragment, null,
|
|
3809
3758
|
titleNode,
|
|
3810
|
-
React__default.createElement("div", { className: b$
|
|
3759
|
+
React__default.createElement("div", { className: b$k('title-adornment') }, item.rightAdornment)));
|
|
3811
3760
|
}
|
|
3812
3761
|
return titleNode;
|
|
3813
3762
|
}
|
|
3814
3763
|
const defaultPopupPlacement = ['right-end'];
|
|
3815
3764
|
const defaultPopupOffset = [-20, 8];
|
|
3816
|
-
const Item = (props) => {
|
|
3765
|
+
const Item$1 = (props) => {
|
|
3817
3766
|
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3818
3767
|
if (item.type === 'divider') {
|
|
3819
|
-
return React__default.createElement("div", { className: b$
|
|
3768
|
+
return React__default.createElement("div", { className: b$k('menu-divider') });
|
|
3820
3769
|
}
|
|
3821
3770
|
const [open, toggleOpen] = React__default.useState(false);
|
|
3822
3771
|
const ref = React__default.useRef(null);
|
|
@@ -3837,7 +3786,7 @@ const Item = (props) => {
|
|
|
3837
3786
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
3838
3787
|
}, [onClosePopup]);
|
|
3839
3788
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
3840
|
-
const createdNode = (React__default.createElement("div", { className: b$
|
|
3789
|
+
const createdNode = (React__default.createElement("div", { className: b$k({ type, current, compact }, className), ref: ref, onClick: () => {
|
|
3841
3790
|
if (collapsedItem) {
|
|
3842
3791
|
/**
|
|
3843
3792
|
* If we call onItemClick for collapsedItem then:
|
|
@@ -3858,13 +3807,13 @@ const Item = (props) => {
|
|
|
3858
3807
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3859
3808
|
}
|
|
3860
3809
|
} },
|
|
3861
|
-
React__default.createElement("div", { className: b$
|
|
3862
|
-
React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$
|
|
3863
|
-
React__default.createElement("div", { className: b$
|
|
3864
|
-
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$
|
|
3865
|
-
return item.link ? (React__default.createElement("a", { href: item.link, className: b$
|
|
3810
|
+
React__default.createElement("div", { className: b$k('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$k('icon-tooltip', { 'item-type': type }) },
|
|
3811
|
+
React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$k('btn-icon') }, iconEl))) : (iconEl)),
|
|
3812
|
+
React__default.createElement("div", { className: b$k('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3813
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$k('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3814
|
+
return item.link ? (React__default.createElement("a", { href: item.link, className: b$k('link') }, createdNode)) : (createdNode);
|
|
3866
3815
|
};
|
|
3867
|
-
const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$
|
|
3816
|
+
const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$k('icon') }) : null;
|
|
3868
3817
|
const titleNode = renderItemTitle(item);
|
|
3869
3818
|
const params = { icon: iconNode, title: titleNode };
|
|
3870
3819
|
let node;
|
|
@@ -3879,16 +3828,16 @@ const Item = (props) => {
|
|
|
3879
3828
|
node,
|
|
3880
3829
|
open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
|
|
3881
3830
|
};
|
|
3882
|
-
Item.displayName = 'Item';
|
|
3831
|
+
Item$1.displayName = 'Item';
|
|
3883
3832
|
function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
3884
3833
|
return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
|
|
3885
|
-
React__default.createElement("div", { className: b$
|
|
3886
|
-
React__default.createElement(List, { itemClassName: b$
|
|
3834
|
+
React__default.createElement("div", { className: b$k('collapse-items-popup-content') },
|
|
3835
|
+
React__default.createElement(List, { itemClassName: b$k('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
|
|
3887
3836
|
const makeCollapseNode = ({ title: titleEl }) => {
|
|
3888
|
-
const res = (React__default.createElement("div", { className: b$
|
|
3837
|
+
const res = (React__default.createElement("div", { className: b$k('collapse-item'), onClick: () => {
|
|
3889
3838
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3890
3839
|
} }, titleEl));
|
|
3891
|
-
return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$
|
|
3840
|
+
return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$k('link') }, res)) : (res);
|
|
3892
3841
|
};
|
|
3893
3842
|
const titleNode = renderItemTitle(collapseItem);
|
|
3894
3843
|
const params = { title: titleNode };
|
|
@@ -3918,10 +3867,10 @@ var SvgDots = function SvgDots(props) {
|
|
|
3918
3867
|
};
|
|
3919
3868
|
var dotsIcon = SvgDots;
|
|
3920
3869
|
|
|
3921
|
-
var css_248z$
|
|
3922
|
-
styleInject(css_248z$
|
|
3870
|
+
var css_248z$i = ".ycn-composite-bar {\n flex: 1 0 auto;\n width: 100%;\n min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n background-color: transparent;\n}";
|
|
3871
|
+
styleInject(css_248z$i);
|
|
3923
3872
|
|
|
3924
|
-
const b$
|
|
3873
|
+
const b$j = block('composite-bar');
|
|
3925
3874
|
class CompositeBar extends React__default.Component {
|
|
3926
3875
|
constructor() {
|
|
3927
3876
|
super(...arguments);
|
|
@@ -3936,10 +3885,10 @@ class CompositeBar extends React__default.Component {
|
|
|
3936
3885
|
return null;
|
|
3937
3886
|
}
|
|
3938
3887
|
if (!enableCollapsing) {
|
|
3939
|
-
return React__default.createElement("div", { className: b$
|
|
3888
|
+
return React__default.createElement("div", { className: b$j() }, this.renderMenu());
|
|
3940
3889
|
}
|
|
3941
3890
|
const minHeight = getItemsMinHeight(items);
|
|
3942
|
-
return (React__default.createElement("div", { className: b$
|
|
3891
|
+
return (React__default.createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
|
|
3943
3892
|
const style = {
|
|
3944
3893
|
width,
|
|
3945
3894
|
height,
|
|
@@ -3950,7 +3899,7 @@ class CompositeBar extends React__default.Component {
|
|
|
3950
3899
|
renderAutosizeMenu(height) {
|
|
3951
3900
|
const { compact, onItemClick } = this.props;
|
|
3952
3901
|
const { listItems, collapseItems } = this.getAutosizeListItems(height);
|
|
3953
|
-
return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex(listItems), itemHeight: getItemHeight, itemClassName: b$
|
|
3902
|
+
return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex$1(listItems), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item$1, { item: item, onMouseLeave: () => {
|
|
3954
3903
|
var _a;
|
|
3955
3904
|
if (compact) {
|
|
3956
3905
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -3959,7 +3908,7 @@ class CompositeBar extends React__default.Component {
|
|
|
3959
3908
|
}
|
|
3960
3909
|
renderMenu() {
|
|
3961
3910
|
const { items, onItemClick, compact } = this.props;
|
|
3962
|
-
return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$
|
|
3911
|
+
return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item$1, { item: item, onMouseLeave: () => {
|
|
3963
3912
|
var _a;
|
|
3964
3913
|
if (compact) {
|
|
3965
3914
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -3988,7 +3937,7 @@ class CompositeBar extends React__default.Component {
|
|
|
3988
3937
|
return { listItems, collapseItems: [] };
|
|
3989
3938
|
}
|
|
3990
3939
|
const collapseItem = this.getMoreButtonItem();
|
|
3991
|
-
const collapseItemHeight = getItemHeight(collapseItem);
|
|
3940
|
+
const collapseItemHeight = getItemHeight$1(collapseItem);
|
|
3992
3941
|
listItems.splice(regularItems.length, 0, collapseItem);
|
|
3993
3942
|
const collapseItems = [];
|
|
3994
3943
|
let listHeight = allItemsHeight + collapseItemHeight;
|
|
@@ -4004,12 +3953,12 @@ class CompositeBar extends React__default.Component {
|
|
|
4004
3953
|
}
|
|
4005
3954
|
if (item.type === 'divider') {
|
|
4006
3955
|
if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
|
|
4007
|
-
listHeight -= getItemHeight(item);
|
|
3956
|
+
listHeight -= getItemHeight$1(item);
|
|
4008
3957
|
listItems.splice(index, 1);
|
|
4009
3958
|
}
|
|
4010
3959
|
continue;
|
|
4011
3960
|
}
|
|
4012
|
-
listHeight -= getItemHeight(item);
|
|
3961
|
+
listHeight -= getItemHeight$1(item);
|
|
4013
3962
|
collapseItems.unshift(...listItems.splice(index, 1));
|
|
4014
3963
|
}
|
|
4015
3964
|
if (((_b = listItems[index]) === null || _b === void 0 ? void 0 : _b.type) === 'divider' &&
|
|
@@ -4059,10 +4008,10 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4059
4008
|
};
|
|
4060
4009
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4061
4010
|
|
|
4062
|
-
var css_248z$
|
|
4063
|
-
styleInject(css_248z$
|
|
4011
|
+
var css_248z$h = ".yc-root {\n --aside-header-background-color: var(--yc-color-base-info);\n --aside-header-collapse-button-divider-line-color: var(\n --aside-header-header-divider-line-color\n );\n}\n\n.yc-root_theme_light,\n.yc-root_theme_light-hc {\n --aside-header-divider-line-color: transparent;\n --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark,\n.yc-root_theme_dark-hc {\n --aside-header-divider-line-color: var(--yc-color-line-solid);\n --aside-header-header-divider-line-color: var(--yc-color-line-solid);\n}\n\n.ycn-aside-header {\n --aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--yc-color-base-background);\n}\n.ycn-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(--yc-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.ycn-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.ycn-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.ycn-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.ycn-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.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n margin: 8px 0;\n}\n.ycn-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.ycn-aside-header_compact .ycn-aside-header__aside-content {\n background: transparent;\n}\n.ycn-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.ycn-aside-header__header .ycn-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.ycn-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.ycn-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.ycn-aside-header_compact .ycn-aside-header__header::before {\n display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration .ycn-aside-header__header-divider {\n display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration::after {\n display: none;\n}\n.ycn-aside-header__menu-items {\n flex-grow: 1;\n}\n.ycn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.ycn-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.ycn-aside-header__panel {\n height: 100%;\n}\n.ycn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.ycn-aside-header__content {\n width: calc(100% - var(--aside-header-size));\n z-index: 95;\n}\n.ycn-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.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-primary);\n}";
|
|
4012
|
+
styleInject(css_248z$h);
|
|
4064
4013
|
|
|
4065
|
-
const b$
|
|
4014
|
+
const b$i = block('aside-header');
|
|
4066
4015
|
class AsideHeader extends React__default.Component {
|
|
4067
4016
|
constructor() {
|
|
4068
4017
|
super(...arguments);
|
|
@@ -4070,26 +4019,26 @@ class AsideHeader extends React__default.Component {
|
|
|
4070
4019
|
this.renderFirstPane = (size) => {
|
|
4071
4020
|
const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
|
|
4072
4021
|
return (React__default.createElement(React__default.Fragment, null,
|
|
4073
|
-
React__default.createElement("div", { className: b$
|
|
4074
|
-
React__default.createElement("div", { className: b$
|
|
4075
|
-
React__default.createElement("div", { className: b$
|
|
4022
|
+
React__default.createElement("div", { className: b$i('aside'), style: { width: size } },
|
|
4023
|
+
React__default.createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
|
|
4024
|
+
React__default.createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4076
4025
|
this.renderHeader(),
|
|
4077
|
-
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$
|
|
4026
|
+
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$i('menu-items') })),
|
|
4078
4027
|
this.renderFooter(size),
|
|
4079
4028
|
this.renderCollapseButton())),
|
|
4080
4029
|
panelItems && this.renderPanels(size)));
|
|
4081
4030
|
};
|
|
4082
4031
|
this.renderSecondPane = (size) => {
|
|
4083
|
-
return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$
|
|
4032
|
+
return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$i('content') }));
|
|
4084
4033
|
};
|
|
4085
|
-
this.renderLogo = () => (React__default.createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4086
|
-
this.renderHeader = () => (React__default.createElement("div", { className: b$
|
|
4034
|
+
this.renderLogo = () => (React__default.createElement(Logo$1, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4035
|
+
this.renderHeader = () => (React__default.createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4087
4036
|
this.renderLogo(),
|
|
4088
4037
|
React__default.createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
4089
|
-
React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$
|
|
4038
|
+
React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4090
4039
|
this.renderFooter = (size) => {
|
|
4091
4040
|
const { compact, renderFooter } = this.props;
|
|
4092
|
-
return (React__default.createElement("div", { className: b$
|
|
4041
|
+
return (React__default.createElement("div", { className: b$i('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4093
4042
|
size,
|
|
4094
4043
|
compact,
|
|
4095
4044
|
asideRef: this.asideRef,
|
|
@@ -4097,14 +4046,14 @@ class AsideHeader extends React__default.Component {
|
|
|
4097
4046
|
};
|
|
4098
4047
|
this.renderPanels = (size) => {
|
|
4099
4048
|
const { panelItems } = this.props;
|
|
4100
|
-
return (React__default.createElement(Drawer, { className: b$
|
|
4049
|
+
return (React__default.createElement(Drawer, { className: b$i('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
|
|
4101
4050
|
};
|
|
4102
4051
|
this.renderCollapseButton = () => {
|
|
4103
4052
|
var _a;
|
|
4104
4053
|
const { compact, dict } = this.props;
|
|
4105
4054
|
const typeButton = compact ? Dict.ExpandButton : Dict.CollapseButton;
|
|
4106
|
-
return (React__default.createElement(Button, { className: b$
|
|
4107
|
-
React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$
|
|
4055
|
+
return (React__default.createElement(Button, { className: b$i('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: (_a = dict === null || dict === void 0 ? void 0 : dict[typeButton]) !== null && _a !== void 0 ? _a : defaultDict$2[typeButton] },
|
|
4056
|
+
React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$i('collapse-icon'), width: "16", height: "10" })));
|
|
4108
4057
|
};
|
|
4109
4058
|
this.onCollapseButtonClick = () => {
|
|
4110
4059
|
var _a, _b;
|
|
@@ -4128,8 +4077,8 @@ class AsideHeader extends React__default.Component {
|
|
|
4128
4077
|
render() {
|
|
4129
4078
|
const { className, compact } = this.props;
|
|
4130
4079
|
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
4131
|
-
return (React__default.createElement("div", { className: b$
|
|
4132
|
-
React__default.createElement("div", { className: b$
|
|
4080
|
+
return (React__default.createElement("div", { className: b$i({ compact }, className) },
|
|
4081
|
+
React__default.createElement("div", { className: b$i('pane-container') },
|
|
4133
4082
|
this.renderFirstPane(size),
|
|
4134
4083
|
this.renderSecondPane(size))));
|
|
4135
4084
|
}
|
|
@@ -4168,25 +4117,76 @@ function __rest(s, e) {
|
|
|
4168
4117
|
return t;
|
|
4169
4118
|
}
|
|
4170
4119
|
|
|
4171
|
-
var css_248z$
|
|
4172
|
-
styleInject(css_248z$
|
|
4120
|
+
var css_248z$g = ".ycn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4121
|
+
styleInject(css_248z$g);
|
|
4173
4122
|
|
|
4174
|
-
const b$
|
|
4175
|
-
const FooterItem = (_a) => {
|
|
4123
|
+
const b$h = block('footer-item');
|
|
4124
|
+
const FooterItem$1 = (_a) => {
|
|
4176
4125
|
var { item } = _a, props = __rest(_a, ["item"]);
|
|
4177
|
-
return (React__default.createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$
|
|
4126
|
+
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 })));
|
|
4178
4127
|
};
|
|
4179
4128
|
|
|
4180
|
-
var css_248z$
|
|
4181
|
-
styleInject(css_248z$
|
|
4129
|
+
var css_248z$f = ".ycn-action-bar-group {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n margin-left: auto;\n margin-right: auto;\n}";
|
|
4130
|
+
styleInject(css_248z$f);
|
|
4131
|
+
|
|
4132
|
+
const b$g = block('action-bar-group');
|
|
4133
|
+
const ActionBarGroup = ({ children, className, pull }) => {
|
|
4134
|
+
return (React__default.createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
|
|
4135
|
+
};
|
|
4136
|
+
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
4137
|
+
|
|
4138
|
+
var css_248z$e = ".ycn-action-bar-item {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n margin-left: auto;\n margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n margin-left: 8px;\n}";
|
|
4139
|
+
styleInject(css_248z$e);
|
|
4140
|
+
|
|
4141
|
+
const b$f = block('action-bar-item');
|
|
4142
|
+
const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
4143
|
+
return React__default.createElement("li", { className: b$f({ pull, spacing }, className) }, children);
|
|
4144
|
+
};
|
|
4145
|
+
ActionBarItem.displayName = 'ActionBar.Item';
|
|
4146
|
+
|
|
4147
|
+
var css_248z$d = ".ycn-action-bar-section {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n border-left: solid 1px var(--yc-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n flex: 1 1 auto;\n padding-left: 20px;\n padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n padding-left: 6px;\n padding-right: 6px;\n}";
|
|
4148
|
+
styleInject(css_248z$d);
|
|
4149
|
+
|
|
4150
|
+
const b$e = block('action-bar-section');
|
|
4151
|
+
const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
4152
|
+
return React__default.createElement("div", { className: b$e({ type }) }, children);
|
|
4153
|
+
};
|
|
4154
|
+
ActionBarSection.displayName = 'ActionBar.Section';
|
|
4155
|
+
|
|
4156
|
+
var css_248z$c = ".ycn-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(--yc-color-line-generic);\n height: 40px;\n}";
|
|
4157
|
+
styleInject(css_248z$c);
|
|
4158
|
+
|
|
4159
|
+
const b$d = block('action-bar-separator');
|
|
4160
|
+
const ActionBarSeparator = () => {
|
|
4161
|
+
return React__default.createElement("li", { role: "separator", className: b$d() });
|
|
4162
|
+
};
|
|
4163
|
+
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
4164
|
+
|
|
4165
|
+
var css_248z$b = ".ycn-action-bar {\n box-sizing: border-box;\n height: 40px;\n border-bottom: solid 1px var(--yc-color-line-generic);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}";
|
|
4166
|
+
styleInject(css_248z$b);
|
|
4167
|
+
|
|
4168
|
+
const b$c = block('action-bar');
|
|
4169
|
+
const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
|
|
4170
|
+
return (React__default.createElement("section", { className: b$c(null, className), "aria-label": ariaLabel }, children));
|
|
4171
|
+
};
|
|
4172
|
+
ActionBar.displayName = 'ActionBar';
|
|
4173
|
+
const PublicActionBar = Object.assign(ActionBar, {
|
|
4174
|
+
Section: ActionBarSection,
|
|
4175
|
+
Group: ActionBarGroup,
|
|
4176
|
+
Item: ActionBarItem,
|
|
4177
|
+
Separator: ActionBarSeparator,
|
|
4178
|
+
});
|
|
4179
|
+
|
|
4180
|
+
var css_248z$a = ".ycn-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.ycn-title_separator {\n border-bottom: 1px solid var(--yc-color-line-generic);\n}\n.ycn-title__text {\n margin: 0;\n margin-right: 20px;\n}";
|
|
4181
|
+
styleInject(css_248z$a);
|
|
4182
4182
|
|
|
4183
|
-
const b$
|
|
4183
|
+
const b$b = block('title');
|
|
4184
4184
|
const defaultDict$1 = {
|
|
4185
4185
|
close: 'Close',
|
|
4186
4186
|
};
|
|
4187
4187
|
const Title = ({ children, closeIconSize = 23, hasSeparator, dict = defaultDict$1, onClose, }) => {
|
|
4188
|
-
return (React__default.createElement("div", { className: b$
|
|
4189
|
-
React__default.createElement(Text, { className: b$
|
|
4188
|
+
return (React__default.createElement("div", { className: b$b({ separator: hasSeparator }) },
|
|
4189
|
+
React__default.createElement(Text, { className: b$b('text'), as: 'h3', variant: 'subheader-3' }, children),
|
|
4190
4190
|
onClose && (React__default.createElement(Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
|
|
4191
4191
|
'aria-label': dict['close'],
|
|
4192
4192
|
} },
|
|
@@ -4221,10 +4221,10 @@ function filterHotkeys(hotkeys, filter) {
|
|
|
4221
4221
|
return hotkeys;
|
|
4222
4222
|
}
|
|
4223
4223
|
|
|
4224
|
-
var css_248z$
|
|
4225
|
-
styleInject(css_248z$
|
|
4224
|
+
var css_248z$9 = ".ycn-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.ycn-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.ycn-hotkeys-panel__title {\n margin: 0 var(--hotkeys-panel-horizontal-padding) 16px var(--hotkeys-panel-horizontal-padding);\n}\n.ycn-hotkeys-panel__search {\n padding: 0 var(--hotkeys-panel-horizontal-padding);\n margin-bottom: 14px;\n}\n.ycn-hotkeys-panel__list {\n flex: 1;\n overflow-y: auto;\n}\n.ycn-hotkeys-panel__item {\n height: auto;\n padding: 8px var(--hotkeys-panel-horizontal-padding);\n}\n.ycn-hotkeys-panel__item.yc-list__item_active {\n background: inherit;\n}\n.ycn-hotkeys-panel__item-content {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n width: 100%;\n font-size: var(--yc-text-body-1-font-size);\n line-height: var(--yc-text-body-1-line-height);\n color: var(--yc-color-text-primary);\n}\n.ycn-hotkeys-panel__item-content_group {\n font-size: var(--yc-text-body-2-font-size);\n font-weight: 500;\n line-height: var(--yc-text-body-2-line-height);\n}\n.ycn-hotkeys-panel__hotkey {\n color: var(--yc-color-text-complementary);\n}";
|
|
4225
|
+
styleInject(css_248z$9);
|
|
4226
4226
|
|
|
4227
|
-
const b$
|
|
4227
|
+
const b$a = block('hotkeys-panel');
|
|
4228
4228
|
function HotkeysPanel(_a) {
|
|
4229
4229
|
var { visible, onClose, leftOffset, topOffset, className, preventScrollBody, hotkeys, itemClassName, filterPlaceholder, title, emptyState } = _a, listProps = __rest(_a, ["visible", "onClose", "leftOffset", "topOffset", "className", "preventScrollBody", "hotkeys", "itemClassName", "filterPlaceholder", "title", "emptyState"]);
|
|
4230
4230
|
const [filter, setFilter] = useState('');
|
|
@@ -4232,18 +4232,18 @@ function HotkeysPanel(_a) {
|
|
|
4232
4232
|
const filteredHotkeys = filterHotkeys(hotkeys, filter);
|
|
4233
4233
|
return flattenHotkeyGroups(filteredHotkeys);
|
|
4234
4234
|
}, [hotkeys, filter]);
|
|
4235
|
-
const renderItem = useCallback((item) => (React__default.createElement("div", { className: b$
|
|
4235
|
+
const renderItem = useCallback((item) => (React__default.createElement("div", { className: b$a('item-content', { group: item.group }), key: item.title },
|
|
4236
4236
|
item.title,
|
|
4237
|
-
item.value && React__default.createElement(Hotkey, { className: b$
|
|
4237
|
+
item.value && React__default.createElement(Hotkey, { className: b$a('hotkey'), value: item.value }))), []);
|
|
4238
4238
|
const drawerItemContent = (React__default.createElement(React__default.Fragment, null,
|
|
4239
|
-
React__default.createElement("h2", { className: b$
|
|
4240
|
-
React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$
|
|
4241
|
-
React__default.createElement(List, Object.assign({ className: b$
|
|
4242
|
-
return (React__default.createElement(Drawer, { className: b$
|
|
4239
|
+
React__default.createElement("h2", { className: b$a('title') }, title),
|
|
4240
|
+
React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$a('search') }),
|
|
4241
|
+
React__default.createElement(List, Object.assign({ className: b$a('list'), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$a('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
|
|
4242
|
+
return (React__default.createElement(Drawer, { className: b$a(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
|
|
4243
4243
|
left: leftOffset,
|
|
4244
4244
|
top: topOffset,
|
|
4245
4245
|
} },
|
|
4246
|
-
React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$
|
|
4246
|
+
React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$a('drawer-item'), content: drawerItemContent })));
|
|
4247
4247
|
}
|
|
4248
4248
|
|
|
4249
4249
|
/**
|
|
@@ -4837,18 +4837,18 @@ function escapeStringForRegExp(input) {
|
|
|
4837
4837
|
return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
4838
4838
|
}
|
|
4839
4839
|
|
|
4840
|
-
const b$
|
|
4840
|
+
const b$9 = block('settings-search');
|
|
4841
4841
|
function SettingsSearch({ className, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
|
|
4842
4842
|
const onChangeStable = useStableCallback(onChange);
|
|
4843
4843
|
const handleUpdate = React__default.useCallback(debounce_1(onChangeStable, debounce), [debounce]);
|
|
4844
|
-
return (React__default.createElement("div", { className: b$
|
|
4844
|
+
return (React__default.createElement("div", { className: b$9(null, className) },
|
|
4845
4845
|
React__default.createElement(TextInput, { controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
|
|
4846
4846
|
}
|
|
4847
4847
|
|
|
4848
|
-
var css_248z$
|
|
4849
|
-
styleInject(css_248z$
|
|
4848
|
+
var css_248z$8 = ".ycn-settings-menu__group-heading {\n font-weight: var(--yc-text-accent-font-weight);\n display: inline-block;\n padding: 0 20px;\n margin-bottom: 12px;\n line-height: 18px;\n}\n.ycn-settings-menu__group + .ycn-settings-menu__group {\n margin-top: 24px;\n}\n.ycn-settings-menu__item {\n display: flex;\n align-items: center;\n height: 40px;\n padding: 0 20px;\n cursor: pointer;\n color: var(--yc-color-text-primary);\n}\n.ycn-settings-menu__item-icon {\n color: var(--yc-color-text-misc);\n margin-right: 5px;\n}\n.ycn-settings-menu__item:hover, .ycn-settings-menu__item_focused {\n background: var(--yc-color-base-simple-hover);\n}\n.ycn-settings-menu__item_selected {\n background: var(--yc-color-base-selection);\n}\n.ycn-settings-menu__item_selected:hover, .ycn-settings-menu__item_selected.ycn-settings-menu__item_focused {\n background: var(--yc-color-base-selection-hover);\n}\n.ycn-settings-menu__item_disabled {\n color: var(--yc-color-text-secondary);\n cursor: auto;\n}\n.ycn-settings-menu__item_disabled:hover {\n background: none;\n}\n.ycn-settings-menu__item_disabled .ycn-settings-menu__item-icon {\n color: var(--yc-color-base-misc-heavy);\n}\n.ycn-settings-menu__item_badge {\n position: relative;\n}\n.ycn-settings-menu__item_badge::after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--yc-color-text-danger);\n position: absolute;\n right: 9px;\n top: calc(50% - 3px);\n}";
|
|
4849
|
+
styleInject(css_248z$8);
|
|
4850
4850
|
|
|
4851
|
-
const b$
|
|
4851
|
+
const b$8 = block('settings-menu');
|
|
4852
4852
|
const SettingsMenu = React__default.forwardRef(
|
|
4853
4853
|
// eslint-disable-next-line prefer-arrow-callback
|
|
4854
4854
|
function SettingsMenu({ items, onChange, activeItemId }, ref) {
|
|
@@ -4880,10 +4880,10 @@ function SettingsMenu({ items, onChange, activeItemId }, ref) {
|
|
|
4880
4880
|
setFocusId(undefined);
|
|
4881
4881
|
},
|
|
4882
4882
|
}), [getFocused, handleChange]);
|
|
4883
|
-
return (React__default.createElement("div", { ref: containerRef, className: b$
|
|
4883
|
+
return (React__default.createElement("div", { ref: containerRef, className: b$8() }, items.map((firstLevelItem) => {
|
|
4884
4884
|
if ('groupTitle' in firstLevelItem) {
|
|
4885
|
-
return (React__default.createElement("div", { key: firstLevelItem.groupTitle, className: b$
|
|
4886
|
-
React__default.createElement("span", { className: b$
|
|
4885
|
+
return (React__default.createElement("div", { key: firstLevelItem.groupTitle, className: b$8('group') },
|
|
4886
|
+
React__default.createElement("span", { className: b$8('group-heading') }, firstLevelItem.groupTitle),
|
|
4887
4887
|
firstLevelItem.items.map((item) => {
|
|
4888
4888
|
return renderMenuItem(item, onChange, activeItemId, focusItemId);
|
|
4889
4889
|
})));
|
|
@@ -4892,7 +4892,7 @@ function SettingsMenu({ items, onChange, activeItemId }, ref) {
|
|
|
4892
4892
|
})));
|
|
4893
4893
|
});
|
|
4894
4894
|
function renderMenuItem(item, onChange, activeItemId, focusItemId) {
|
|
4895
|
-
return (React__default.createElement("span", { key: item.title, className: b$
|
|
4895
|
+
return (React__default.createElement("span", { key: item.title, className: b$8('item', {
|
|
4896
4896
|
selected: activeItemId === item.id,
|
|
4897
4897
|
disabled: item.disabled,
|
|
4898
4898
|
focused: focusItemId === item.id,
|
|
@@ -4902,12 +4902,12 @@ function renderMenuItem(item, onChange, activeItemId, focusItemId) {
|
|
|
4902
4902
|
onChange(item.id);
|
|
4903
4903
|
}
|
|
4904
4904
|
}, "data-id": item.id },
|
|
4905
|
-
item.icon ? React__default.createElement(Icon, Object.assign({ size: 16 }, item.icon, { className: b$
|
|
4905
|
+
item.icon ? React__default.createElement(Icon, Object.assign({ size: 16 }, item.icon, { className: b$8('item-icon') })) : undefined,
|
|
4906
4906
|
React__default.createElement("span", null, item.title)));
|
|
4907
4907
|
}
|
|
4908
4908
|
function focusNext(container, focused, direction) {
|
|
4909
4909
|
var _a;
|
|
4910
|
-
const elements = container.querySelectorAll(`.${b$
|
|
4910
|
+
const elements = container.querySelectorAll(`.${b$8('item')}:not(.${b$8('item')}_disabled)`);
|
|
4911
4911
|
if (elements.length === 0) {
|
|
4912
4912
|
return undefined;
|
|
4913
4913
|
}
|
|
@@ -4919,10 +4919,10 @@ function focusNext(container, focused, direction) {
|
|
|
4919
4919
|
return (_a = elements[currentIndex].getAttribute('data-id')) !== null && _a !== void 0 ? _a : undefined;
|
|
4920
4920
|
}
|
|
4921
4921
|
|
|
4922
|
-
var css_248z$
|
|
4923
|
-
styleInject(css_248z$
|
|
4922
|
+
var css_248z$7 = ".ycn-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.ycn-settings-menu-mobile.yc-tabs_direction_horizontal::-webkit-scrollbar {\n display: none;\n}\n.ycn-settings-menu-mobile__item_badge {\n position: relative;\n}\n.ycn-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(--yc-color-text-danger);\n position: absolute;\n right: -8px;\n top: 11px;\n}";
|
|
4923
|
+
styleInject(css_248z$7);
|
|
4924
4924
|
|
|
4925
|
-
const b$
|
|
4925
|
+
const b$7 = block('settings-menu-mobile');
|
|
4926
4926
|
const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
|
|
4927
4927
|
const ref = React__default.useRef(null);
|
|
4928
4928
|
const tabItems = React__default.useMemo(() => {
|
|
@@ -4933,12 +4933,12 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
|
|
|
4933
4933
|
id,
|
|
4934
4934
|
title,
|
|
4935
4935
|
disabled,
|
|
4936
|
-
className: b$
|
|
4936
|
+
className: b$7('item', { badge: withBadge }),
|
|
4937
4937
|
})));
|
|
4938
4938
|
}
|
|
4939
4939
|
else {
|
|
4940
4940
|
const { id, title, disabled, withBadge } = firstLevelItem;
|
|
4941
|
-
tabItems.push({ id, title, disabled, className: b$
|
|
4941
|
+
tabItems.push({ id, title, disabled, className: b$7('item', { badge: withBadge }) });
|
|
4942
4942
|
}
|
|
4943
4943
|
});
|
|
4944
4944
|
return tabItems;
|
|
@@ -4947,7 +4947,7 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
|
|
|
4947
4947
|
e.stopPropagation();
|
|
4948
4948
|
};
|
|
4949
4949
|
return (React__default.createElement("div", { ref: ref, onTouchMove: handleTouchMove },
|
|
4950
|
-
React__default.createElement(Tabs, { items: tabItems, className: b$
|
|
4950
|
+
React__default.createElement(Tabs, { items: tabItems, className: b$7(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
|
|
4951
4951
|
};
|
|
4952
4952
|
|
|
4953
4953
|
function getSettingsFromChildren(children, searchText = '') {
|
|
@@ -5071,10 +5071,10 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5071
5071
|
return { items, hidden };
|
|
5072
5072
|
}
|
|
5073
5073
|
|
|
5074
|
-
var css_248z = ".ycn-settings {\n display: grid;\n grid-template-columns: 216px 1fr;\n width: 834px;\n height: 100%;\n}\n.ycn-settings_view_mobile {\n display: block;\n width: auto;\n height: calc(80vh - 56px);\n overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n .ycn-settings_view_mobile {\n /* stylelint-disable-next-line */\n height: calc(90dvh - 56px);\n }\n}\n.ycn-settings_view_mobile.ycn-settings_loading {\n text-align: center;\n}\n.ycn-settings_view_mobile .ycn-settings__loader {\n margin-top: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__search {\n padding: 0 20px;\n margin: 4px 0 16px;\n}\n.ycn-settings_view_mobile .ycn-settings__page {\n overflow-y: visible;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:first-child {\n margin-left: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:last-child {\n margin-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading {\n font-size: var(--yc-text-subheader-3-font-size);\n line-height: var(--yc-text-subheader-3-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__section-subheader {\n color: var(--yc-color-text-secondary);\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings-subheader {\n margin-top: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item {\n margin-top: 0;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings__section-item, .ycn-settings_view_mobile .ycn-settings__section-subheader + .ycn-settings__section-item {\n margin-top: 30px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item + .ycn-settings__section-item {\n margin-top: 22px;\n}\n.ycn-settings_view_mobile .ycn-settings__item:not(.ycn-settings_view_mobile .ycn-settings__item_mode_row) {\n grid-template-columns: 1fr;\n gap: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-heading {\n font-size: var(--yc-text-body-2-font-size);\n line-height: var(--yc-text-body-2-line-height);\n font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item-description {\n font-size: var(--yc-text-body-1-font-size);\n line-height: var(--yc-text-body-1-line-height);\n font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row {\n grid-template-columns: 1fr auto;\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row .ycn-settings__item-heading {\n padding-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-content {\n width: 100%;\n}\n.ycn-settings_loading {\n grid-template-columns: auto;\n}\n.ycn-settings__loader {\n align-self: center;\n justify-self: center;\n}\n.ycn-settings__not-found {\n display: grid;\n align-items: center;\n justify-items: center;\n height: 100%;\n}\n.ycn-settings__menu {\n border-right: 1px solid var(--yc-color-line-generic);\n}\n.ycn-settings__heading {\n font-size: var(--yc-text-subheader-2-font-size);\n line-height: var(--yc-text-subheader-2-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n margin: 20px 20px 0;\n}\n.ycn-settings__search {\n margin: 0 20px 16px;\n}\n.ycn-settings__page {\n overflow-y: auto;\n}\n.ycn-settings__content {\n padding: 20px;\n}\n.ycn-settings__section-heading {\n font-size: var(--yc-text-subheader-2-font-size);\n line-height: var(--yc-text-subheader-2-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n margin: 0;\n}\n.ycn-settings__section-item {\n margin-top: 24px;\n}\n.ycn-settings__section + .ycn-settings__section {\n margin-top: 32px;\n}\n.ycn-settings__item {\n display: grid;\n grid-template-columns: 216px 1fr;\n justify-items: start;\n}\n.ycn-settings__item_align_top {\n align-items: start;\n}\n.ycn-settings__item_align_center {\n align-items: center;\n}\n.ycn-settings__item-title_badge {\n position: relative;\n}\n.ycn-settings__item-title_badge::after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--yc-color-text-danger);\n position: absolute;\n right: -8px;\n top: 1px;\n}\n.ycn-settings__item-description {\n font-size: var(--yc-text-caption-2-font-size);\n line-height: var(--yc-text-caption-2-line-height);\n font-weight: var(--yc-text-caption-font-weight);\n display: block;\n margin-top: 2px;\n padding-right: 20px;\n color: var(--yc-color-text-secondary);\n}\n.ycn-settings__found {\n font-weight: var(--yc-text-accent-font-weight);\n background: var(--yc-color-base-selection);\n}";
|
|
5075
|
-
styleInject(css_248z);
|
|
5074
|
+
var css_248z$6 = ".ycn-settings {\n display: grid;\n grid-template-columns: 216px 1fr;\n width: 834px;\n height: 100%;\n}\n.ycn-settings_view_mobile {\n display: block;\n width: auto;\n height: calc(80vh - 56px);\n overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n .ycn-settings_view_mobile {\n /* stylelint-disable-next-line */\n height: calc(90dvh - 56px);\n }\n}\n.ycn-settings_view_mobile.ycn-settings_loading {\n text-align: center;\n}\n.ycn-settings_view_mobile .ycn-settings__loader {\n margin-top: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__search {\n padding: 0 20px;\n margin: 4px 0 16px;\n}\n.ycn-settings_view_mobile .ycn-settings__page {\n overflow-y: visible;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:first-child {\n margin-left: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:last-child {\n margin-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading {\n font-size: var(--yc-text-subheader-3-font-size);\n line-height: var(--yc-text-subheader-3-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__section-subheader {\n color: var(--yc-color-text-secondary);\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings-subheader {\n margin-top: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item {\n margin-top: 0;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings__section-item, .ycn-settings_view_mobile .ycn-settings__section-subheader + .ycn-settings__section-item {\n margin-top: 30px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item + .ycn-settings__section-item {\n margin-top: 22px;\n}\n.ycn-settings_view_mobile .ycn-settings__item:not(.ycn-settings_view_mobile .ycn-settings__item_mode_row) {\n grid-template-columns: 1fr;\n gap: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-heading {\n font-size: var(--yc-text-body-2-font-size);\n line-height: var(--yc-text-body-2-line-height);\n font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item-description {\n font-size: var(--yc-text-body-1-font-size);\n line-height: var(--yc-text-body-1-line-height);\n font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row {\n grid-template-columns: 1fr auto;\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row .ycn-settings__item-heading {\n padding-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-content {\n width: 100%;\n}\n.ycn-settings_loading {\n grid-template-columns: auto;\n}\n.ycn-settings__loader {\n align-self: center;\n justify-self: center;\n}\n.ycn-settings__not-found {\n display: grid;\n align-items: center;\n justify-items: center;\n height: 100%;\n}\n.ycn-settings__menu {\n border-right: 1px solid var(--yc-color-line-generic);\n}\n.ycn-settings__heading {\n font-size: var(--yc-text-subheader-2-font-size);\n line-height: var(--yc-text-subheader-2-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n margin: 20px 20px 0;\n}\n.ycn-settings__search {\n margin: 0 20px 16px;\n}\n.ycn-settings__page {\n overflow-y: auto;\n}\n.ycn-settings__content {\n padding: 20px;\n}\n.ycn-settings__section-heading {\n font-size: var(--yc-text-subheader-2-font-size);\n line-height: var(--yc-text-subheader-2-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n margin: 0;\n}\n.ycn-settings__section-item {\n margin-top: 24px;\n}\n.ycn-settings__section + .ycn-settings__section {\n margin-top: 32px;\n}\n.ycn-settings__item {\n display: grid;\n grid-template-columns: 216px 1fr;\n justify-items: start;\n}\n.ycn-settings__item_align_top {\n align-items: start;\n}\n.ycn-settings__item_align_center {\n align-items: center;\n}\n.ycn-settings__item-title_badge {\n position: relative;\n}\n.ycn-settings__item-title_badge::after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--yc-color-text-danger);\n position: absolute;\n right: -8px;\n top: 1px;\n}\n.ycn-settings__item-description {\n font-size: var(--yc-text-caption-2-font-size);\n line-height: var(--yc-text-caption-2-line-height);\n font-weight: var(--yc-text-caption-font-weight);\n display: block;\n margin-top: 2px;\n padding-right: 20px;\n color: var(--yc-color-text-secondary);\n}\n.ycn-settings__found {\n font-weight: var(--yc-text-accent-font-weight);\n background: var(--yc-color-base-selection);\n}";
|
|
5075
|
+
styleInject(css_248z$6);
|
|
5076
5076
|
|
|
5077
|
-
const b = block('settings');
|
|
5077
|
+
const b$6 = block('settings');
|
|
5078
5078
|
const defaultDict = {
|
|
5079
5079
|
heading_settings: 'Settings',
|
|
5080
5080
|
placeholder_search: 'Search settings',
|
|
@@ -5083,7 +5083,7 @@ const defaultDict = {
|
|
|
5083
5083
|
function Settings(_a) {
|
|
5084
5084
|
var { loading, renderLoading, children, view = 'normal' } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view"]);
|
|
5085
5085
|
if (loading) {
|
|
5086
|
-
return (React__default.createElement("div", { className: b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default.createElement(Loader, { className: b('loader'), size: "m" }))));
|
|
5086
|
+
return (React__default.createElement("div", { className: b$6({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default.createElement(Loader, { className: b$6('loader'), size: "m" }))));
|
|
5087
5087
|
}
|
|
5088
5088
|
return (React__default.createElement(SettingsContent, Object.assign({ view: view }, props), children));
|
|
5089
5089
|
}
|
|
@@ -5144,23 +5144,23 @@ function SettingsContent({ initialPage, children, renderNotFound, dict, view, on
|
|
|
5144
5144
|
});
|
|
5145
5145
|
const renderPageContent = () => {
|
|
5146
5146
|
if (!activePage) {
|
|
5147
|
-
return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default.createElement("div", { className: b('not-found') }, dict === null || dict === void 0 ? void 0 : dict.not_found));
|
|
5147
|
+
return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default.createElement("div", { className: b$6('not-found') }, dict === null || dict === void 0 ? void 0 : dict.not_found));
|
|
5148
5148
|
}
|
|
5149
5149
|
const filteredSections = pages[activePage].sections.filter((section) => !section.hidden);
|
|
5150
5150
|
return (React__default.createElement(React__default.Fragment, null,
|
|
5151
5151
|
!isMobile && (React__default.createElement(Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, activePage))),
|
|
5152
|
-
React__default.createElement("div", { className: b('content') }, filteredSections.map((section) => (React__default.createElement("div", { key: section.title, className: b('section') },
|
|
5153
|
-
section.showTitle && (React__default.createElement("h3", { className: b('section-heading') }, section.title)),
|
|
5152
|
+
React__default.createElement("div", { className: b$6('content') }, filteredSections.map((section) => (React__default.createElement("div", { key: section.title, className: b$6('section') },
|
|
5153
|
+
section.showTitle && (React__default.createElement("h3", { className: b$6('section-heading') }, section.title)),
|
|
5154
5154
|
section.header &&
|
|
5155
|
-
(isMobile ? (React__default.createElement("div", { className: b('section-subheader') }, section.header)) : (section.header)),
|
|
5156
|
-
section.items.map(({ hidden, title, element }) => hidden ? null : (React__default.createElement("div", { key: title, className: b('section-item') }, React__default.cloneElement(element, Object.assign(Object.assign({}, element.props), { title: search && title
|
|
5155
|
+
(isMobile ? (React__default.createElement("div", { className: b$6('section-subheader') }, section.header)) : (section.header)),
|
|
5156
|
+
section.items.map(({ hidden, title, element }) => hidden ? null : (React__default.createElement("div", { key: title, className: b$6('section-item') }, React__default.cloneElement(element, Object.assign(Object.assign({}, element.props), { title: search && title
|
|
5157
5157
|
? prepareTitle(title, search)
|
|
5158
5158
|
: title })))))))))));
|
|
5159
5159
|
};
|
|
5160
|
-
return (React__default.createElement("div", { className: b({ view }) },
|
|
5160
|
+
return (React__default.createElement("div", { className: b$6({ view }) },
|
|
5161
5161
|
isMobile ? (React__default.createElement(React__default.Fragment, null,
|
|
5162
|
-
React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), onChange: setSearch, autoFocus: false, inputSize: 'l' }),
|
|
5163
|
-
React__default.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b('tabs') }))) : (React__default.createElement("div", { className: b('menu'), onClick: () => {
|
|
5162
|
+
React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, autoFocus: false, inputSize: 'l' }),
|
|
5163
|
+
React__default.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b$6('tabs') }))) : (React__default.createElement("div", { className: b$6('menu'), onClick: () => {
|
|
5164
5164
|
if (searchInputRef.current) {
|
|
5165
5165
|
searchInputRef.current.focus();
|
|
5166
5166
|
}
|
|
@@ -5172,9 +5172,9 @@ function SettingsContent({ initialPage, children, renderNotFound, dict, view, on
|
|
|
5172
5172
|
}
|
|
5173
5173
|
} },
|
|
5174
5174
|
React__default.createElement(Title, null, dict === null || dict === void 0 ? void 0 : dict.heading_settings),
|
|
5175
|
-
React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), onChange: setSearch, placeholder: dict === null || dict === void 0 ? void 0 : dict.placeholder_search, autoFocus: true }),
|
|
5175
|
+
React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, placeholder: dict === null || dict === void 0 ? void 0 : dict.placeholder_search, autoFocus: true }),
|
|
5176
5176
|
React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
|
|
5177
|
-
React__default.createElement("div", { className: b('page') }, renderPageContent())));
|
|
5177
|
+
React__default.createElement("div", { className: b$6('page') }, renderPageContent())));
|
|
5178
5178
|
}
|
|
5179
5179
|
Settings.Group = function SettingsGroup({ children }) {
|
|
5180
5180
|
return React__default.createElement(React__default.Fragment, null, children);
|
|
@@ -5186,11 +5186,11 @@ Settings.Section = function SettingsSection({ children }) {
|
|
|
5186
5186
|
return React__default.createElement(React__default.Fragment, null, children);
|
|
5187
5187
|
};
|
|
5188
5188
|
Settings.Item = function SettingsItem({ title, children, align = 'center', withBadge, renderTitleComponent = identity_1, mode, description, }) {
|
|
5189
|
-
return (React__default.createElement("div", { className: b('item', { align, mode }) },
|
|
5190
|
-
React__default.createElement("label", { className: b('item-heading') },
|
|
5191
|
-
React__default.createElement("span", { className: b('item-title', { badge: withBadge }) }, renderTitleComponent(title)),
|
|
5192
|
-
description ? React__default.createElement("span", { className: b('item-description') }, description) : null),
|
|
5193
|
-
React__default.createElement("div", { className: b('item-content') }, children)));
|
|
5189
|
+
return (React__default.createElement("div", { className: b$6('item', { align, mode }) },
|
|
5190
|
+
React__default.createElement("label", { className: b$6('item-heading') },
|
|
5191
|
+
React__default.createElement("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(title)),
|
|
5192
|
+
description ? React__default.createElement("span", { className: b$6('item-description') }, description) : null),
|
|
5193
|
+
React__default.createElement("div", { className: b$6('item-content') }, children)));
|
|
5194
5194
|
};
|
|
5195
5195
|
function prepareTitle(string, search) {
|
|
5196
5196
|
let temp = string.slice(0);
|
|
@@ -5206,7 +5206,7 @@ function prepareTitle(string, search) {
|
|
|
5206
5206
|
if (i > 0) {
|
|
5207
5207
|
title.push(temp.slice(0, i));
|
|
5208
5208
|
}
|
|
5209
|
-
title.push(React__default.createElement("strong", { key: key++, className: b('found') }, m));
|
|
5209
|
+
title.push(React__default.createElement("strong", { key: key++, className: b$6('found') }, m));
|
|
5210
5210
|
temp = temp.slice(i + m.length);
|
|
5211
5211
|
}
|
|
5212
5212
|
}
|
|
@@ -5216,5 +5216,251 @@ function prepareTitle(string, search) {
|
|
|
5216
5216
|
return title;
|
|
5217
5217
|
}
|
|
5218
5218
|
|
|
5219
|
-
|
|
5219
|
+
const useForwardRef = (ref, initialValue = null) => {
|
|
5220
|
+
const targetRef = React__default.useRef(initialValue);
|
|
5221
|
+
React__default.useEffect(() => {
|
|
5222
|
+
if (!ref)
|
|
5223
|
+
return;
|
|
5224
|
+
if (typeof ref === 'function') {
|
|
5225
|
+
ref(targetRef.current);
|
|
5226
|
+
}
|
|
5227
|
+
else {
|
|
5228
|
+
ref.current = targetRef.current;
|
|
5229
|
+
}
|
|
5230
|
+
}, [ref]);
|
|
5231
|
+
return targetRef;
|
|
5232
|
+
};
|
|
5233
|
+
|
|
5234
|
+
var css_248z$5 = ".ycn-mobile-header-burger {\n margin: 0;\n padding: 0;\n font-family: var(--yc-text-body-font-family);\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.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:before, .ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:after,\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n left: 3px;\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:before {\n transform: rotate(45deg);\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon:after {\n transform: rotate(-45deg);\n}\n.ycn-mobile-header-burger_opened .ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n opacity: 0;\n}\n.ycn-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.ycn-mobile-header-burger__icon:after, .ycn-mobile-header-burger__icon:before {\n content: \"\";\n transform-origin: left center;\n transition: transform 0.2s, left 0.2s;\n}\n.ycn-mobile-header-burger__icon:before {\n top: 2px;\n}\n.ycn-mobile-header-burger__icon:after {\n bottom: 2px;\n}\n.ycn-mobile-header-burger__icon:before, .ycn-mobile-header-burger__icon:after,\n.ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n background-color: var(--yc-color-text-primary);\n border-radius: 1px;\n height: 2px;\n left: 0;\n position: absolute;\n width: 100%;\n}\n.ycn-mobile-header-burger__icon .ycn-mobile-header-burger__icon-dash {\n margin-top: -1px;\n top: 50%;\n transition: opacity 0.2s;\n}";
|
|
5235
|
+
styleInject(css_248z$5);
|
|
5236
|
+
|
|
5237
|
+
const b$5 = block('mobile-header-burger');
|
|
5238
|
+
const Burger = React__default.memo(({ opened, className, onClick }) => (React__default.createElement("button", { className: b$5({ opened }, className), onClick: onClick, "aria-label": opened ? defaultDict$2['button_close-burger'] : defaultDict$2['button_open-burger'] },
|
|
5239
|
+
React__default.createElement("span", { className: b$5('icon') },
|
|
5240
|
+
React__default.createElement("span", { className: b$5('icon-dash') })))));
|
|
5241
|
+
Burger.displayName = 'Burger';
|
|
5242
|
+
|
|
5243
|
+
var css_248z$4 = ".ycn-mobile-header-logo {\n display: flex;\n align-items: center;\n overflow: hidden;\n gap: 8px;\n}\n.ycn-mobile-header-logo:is(a), .ycn-mobile-header-logo:is(a):hover, .ycn-mobile-header-logo:is(a):active, .ycn-mobile-header-logo:is(a):visited, .ycn-mobile-header-logo:is(a):focus {\n text-decoration: none;\n outline: none;\n color: var(--yc-color-text-primary);\n}\n.ycn-mobile-header-logo__icon {\n flex-shrink: 0;\n}\n.ycn-mobile-header-logo__title {\n font-size: var(--yc-text-header-1-font-size);\n line-height: var(--yc-text-header-1-line-height);\n font-weight: var(--yc-text-header-font-weight);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}";
|
|
5244
|
+
styleInject(css_248z$4);
|
|
5245
|
+
|
|
5246
|
+
const b$4 = block('mobile-header-logo');
|
|
5247
|
+
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 32, textSize = 20, href = '/', wrapper, onClick, }) => {
|
|
5248
|
+
const hasClickHandler = typeof onClick === 'function';
|
|
5249
|
+
const hasWrapper = typeof wrapper === 'function';
|
|
5250
|
+
const linkProps = hasClickHandler
|
|
5251
|
+
? {}
|
|
5252
|
+
: {
|
|
5253
|
+
target: '_self',
|
|
5254
|
+
href,
|
|
5255
|
+
};
|
|
5256
|
+
let logoIcon;
|
|
5257
|
+
if (iconSrc) {
|
|
5258
|
+
logoIcon = (React__default.createElement("img", { alt: "logo icon", src: iconSrc, width: iconSize, height: iconSize, className: iconClassName }));
|
|
5259
|
+
}
|
|
5260
|
+
else if (icon) {
|
|
5261
|
+
logoIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: b$4('icon', iconClassName) });
|
|
5262
|
+
}
|
|
5263
|
+
let logoTitle;
|
|
5264
|
+
if (typeof text === 'function') {
|
|
5265
|
+
logoTitle = text();
|
|
5266
|
+
}
|
|
5267
|
+
else {
|
|
5268
|
+
logoTitle = (React__default.createElement("span", { className: b$4('title'), style: { fontSize: textSize } }, text));
|
|
5269
|
+
}
|
|
5270
|
+
const logo = (React__default.createElement(React__default.Fragment, null,
|
|
5271
|
+
logoIcon,
|
|
5272
|
+
logoTitle));
|
|
5273
|
+
return hasWrapper ? (React__default.createElement("div", { className: b$4(), onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$4(), onClick: onClick }), logo));
|
|
5274
|
+
};
|
|
5275
|
+
|
|
5276
|
+
const MOBILE_ITEM_HEIGHT = 48;
|
|
5277
|
+
const MOBILE_HEADER_COMPACT_HEIGHT = 50;
|
|
5278
|
+
const MOBILE_HEADER_EXPANDED_HEIGHT = 120;
|
|
5279
|
+
const MOBILE_HEADER_ICON_SIZE = 20;
|
|
5280
|
+
const EVENT_NAMES = {
|
|
5281
|
+
toggleEvent: 'MOBILE_PANEL_TOGGLE',
|
|
5282
|
+
closeEvent: 'MOBILE_PANEL_CLOSE',
|
|
5283
|
+
openEvent: 'MOBILE_PANEL_OPEN',
|
|
5284
|
+
};
|
|
5285
|
+
const BURGER_PANEL_ITEM_ID = 'burger';
|
|
5286
|
+
|
|
5287
|
+
const getItemHeight = (item) => {
|
|
5288
|
+
switch (item.type) {
|
|
5289
|
+
case 'divider':
|
|
5290
|
+
return 1;
|
|
5291
|
+
default:
|
|
5292
|
+
return MOBILE_ITEM_HEIGHT;
|
|
5293
|
+
}
|
|
5294
|
+
};
|
|
5295
|
+
const getSelectedItemIndex = (items) => {
|
|
5296
|
+
const index = items.findIndex(({ current }) => Boolean(current));
|
|
5297
|
+
return index === -1 ? undefined : index;
|
|
5298
|
+
};
|
|
5299
|
+
|
|
5300
|
+
var css_248z$3 = ".ycn-burger-composite-bar {\n overflow-y: auto;\n}\n.ycn-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.ycn-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.ycn-burger-composite-bar .ycn-burger-composite-bar__item-icon {\n color: var(--yc-color-text-misc);\n}\n.ycn-burger-composite-bar__item-title {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--yc-text-body-2-font-size);\n line-height: var(--yc-text-body-2-line-height);\n font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-burger-composite-bar__link {\n display: flex;\n flex-grow: 1;\n height: 100%;\n align-items: center;\n}\n.ycn-burger-composite-bar__link, .ycn-burger-composite-bar__link:hover, .ycn-burger-composite-bar__link:active, .ycn-burger-composite-bar__link:visited, .ycn-burger-composite-bar__link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.ycn-burger-composite-bar__menu-divider {\n margin: 0;\n flex-grow: 1;\n border-top: 1px solid var(--yc-color-line-generic);\n}\n.ycn-burger-composite-bar__root-menu-item.yc-list__item_selected {\n background-color: var(--yc-color-base-selection);\n}\n.ycn-burger-composite-bar__root-menu-item:not(.yc-list__item_selected).yc-list__item_active {\n background: none;\n}";
|
|
5301
|
+
styleInject(css_248z$3);
|
|
5302
|
+
|
|
5303
|
+
const b$3 = block('burger-composite-bar');
|
|
5304
|
+
const Item = ({ item, onItemClick }) => {
|
|
5305
|
+
const { icon, type = 'regular', iconSize = MOBILE_HEADER_ICON_SIZE } = item;
|
|
5306
|
+
if (type === 'divider') {
|
|
5307
|
+
return React__default.createElement("div", { className: b$3('menu-divider') });
|
|
5308
|
+
}
|
|
5309
|
+
const node = (React__default.createElement("div", { className: b$3('item', { type }), onClick: () => {
|
|
5310
|
+
if (typeof item.onItemClick === 'function') {
|
|
5311
|
+
item.onItemClick(item);
|
|
5312
|
+
}
|
|
5313
|
+
if (type === 'regular') {
|
|
5314
|
+
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
|
|
5315
|
+
}
|
|
5316
|
+
} },
|
|
5317
|
+
React__default.createElement("div", { className: b$3('item-icon-place') }, icon && React__default.createElement(Icon, { data: icon, size: iconSize, className: b$3('item-icon') })),
|
|
5318
|
+
React__default.createElement("div", { className: b$3('item-title') }, item.title)));
|
|
5319
|
+
if (typeof item.itemWrapper === 'function') {
|
|
5320
|
+
return item.itemWrapper(node, item);
|
|
5321
|
+
}
|
|
5322
|
+
return item.link ? (React__default.createElement("a", { href: item.link, className: b$3('link') }, node)) : (node);
|
|
5323
|
+
};
|
|
5324
|
+
Item.displayName = 'Item';
|
|
5325
|
+
const BurgerCompositeBar = React__default.memo(({ items, onItemClick }) => {
|
|
5326
|
+
return (React__default.createElement("nav", { className: b$3() },
|
|
5327
|
+
React__default.createElement(List, { items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$3('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item) => React__default.createElement(Item, { item: item, onItemClick: onItemClick }) })));
|
|
5328
|
+
});
|
|
5329
|
+
BurgerCompositeBar.displayName = 'BurgerCompositeBar';
|
|
5330
|
+
|
|
5331
|
+
var css_248z$2 = ".ycn-mobile-header-burger-menu {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.ycn-mobile-header-burger-menu__footer {\n display: flex;\n border-top: 1px solid var(--yc-color-base-generic);\n margin-top: auto;\n}";
|
|
5332
|
+
styleInject(css_248z$2);
|
|
5333
|
+
|
|
5334
|
+
const b$2 = block('mobile-header-burger-menu');
|
|
5335
|
+
const BurgerMenu = React__default.memo(({ items = [], renderFooter, modalItem, className, onItemClick }) => {
|
|
5336
|
+
var _a;
|
|
5337
|
+
return (React__default.createElement("div", { className: b$2(null, className) },
|
|
5338
|
+
modalItem && (React__default.createElement(Sheet, { visible: modalItem.visible, id: modalItem.id, title: modalItem.title, onClose: modalItem.onClose, contentClassName: modalItem.contentClassName, className: modalItem.className }, (_a = modalItem.renderContent) === null || _a === void 0 ? void 0 : _a.call(modalItem))),
|
|
5339
|
+
React__default.createElement(BurgerCompositeBar, { items: items, onItemClick: onItemClick }),
|
|
5340
|
+
renderFooter && React__default.createElement("div", { className: b$2('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter())));
|
|
5341
|
+
});
|
|
5342
|
+
BurgerMenu.displayName = 'BurgerMenu';
|
|
5343
|
+
|
|
5344
|
+
var css_248z$1 = ".ycn-mobile-header {\n --mobile-header-min-heigth: 50px;\n --mobile-header-icon-size: 20px;\n background-color: var(--yc-color-base-background);\n}\n.ycn-mobile-header__header {\n background-color: var(--yc-color-base-background);\n border-bottom: 1px solid var(--yc-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.ycn-mobile-header__burger {\n padding: 12px;\n}\n.ycn-mobile-header__burger-menu, .ycn-mobile-header__panel-item {\n background-color: var(--yc-color-base-background);\n width: 320px;\n max-width: 90vw;\n max-height: 100%;\n}\n.ycn-mobile-header__user-menu {\n overflow-y: auto;\n}\n.ycn-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.ycn-mobile-header__content {\n overflow: auto;\n}";
|
|
5345
|
+
styleInject(css_248z$1);
|
|
5346
|
+
|
|
5347
|
+
const b$1 = block('mobile-header');
|
|
5348
|
+
const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, }, ref) => {
|
|
5349
|
+
const targetRef = useForwardRef(ref);
|
|
5350
|
+
const [compact] = useState(true);
|
|
5351
|
+
const [visiblePanel, setVisiblePanel] = useState(null);
|
|
5352
|
+
// for expand top panel cases (i.e. switch service panel). Will be removed if not used in future design
|
|
5353
|
+
const size = compact ? MOBILE_HEADER_COMPACT_HEIGHT : MOBILE_HEADER_EXPANDED_HEIGHT;
|
|
5354
|
+
const onPanelToggle = useCallback((name) => {
|
|
5355
|
+
if (!name)
|
|
5356
|
+
return;
|
|
5357
|
+
setVisiblePanel((prev) => {
|
|
5358
|
+
const panelOpen = prev === name;
|
|
5359
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, panelOpen ? EVENT_NAMES.closeEvent : EVENT_NAMES.openEvent);
|
|
5360
|
+
return panelOpen ? null : name;
|
|
5361
|
+
});
|
|
5362
|
+
}, [visiblePanel, onEvent]);
|
|
5363
|
+
const onMobilePanelToggle = useCallback(({ detail }) => {
|
|
5364
|
+
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5365
|
+
onPanelToggle(detail === null || detail === void 0 ? void 0 : detail.panelName);
|
|
5366
|
+
}
|
|
5367
|
+
}, [onEvent]);
|
|
5368
|
+
const onMobilePanelOpen = useCallback(({ detail }) => {
|
|
5369
|
+
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5370
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(detail === null || detail === void 0 ? void 0 : detail.panelName, EVENT_NAMES.openEvent);
|
|
5371
|
+
setVisiblePanel(detail === null || detail === void 0 ? void 0 : detail.panelName);
|
|
5372
|
+
}
|
|
5373
|
+
}, [onEvent]);
|
|
5374
|
+
const onMobilePanelClose = useCallback(({ detail }) => {
|
|
5375
|
+
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5376
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(detail === null || detail === void 0 ? void 0 : detail.panelName, EVENT_NAMES.closeEvent);
|
|
5377
|
+
setVisiblePanel(null);
|
|
5378
|
+
}
|
|
5379
|
+
}, [onEvent]);
|
|
5380
|
+
const onBurgerOpen = useCallback(() => {
|
|
5381
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(BURGER_PANEL_ITEM_ID, EVENT_NAMES.openEvent);
|
|
5382
|
+
setVisiblePanel(BURGER_PANEL_ITEM_ID);
|
|
5383
|
+
}, [onEvent]);
|
|
5384
|
+
const onBurgerClose = useCallback(() => {
|
|
5385
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(BURGER_PANEL_ITEM_ID, EVENT_NAMES.closeEvent);
|
|
5386
|
+
setVisiblePanel(null);
|
|
5387
|
+
}, [onEvent]);
|
|
5388
|
+
const onCloseDrawer = useCallback(() => {
|
|
5389
|
+
if (visiblePanel) {
|
|
5390
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(visiblePanel, EVENT_NAMES.closeEvent);
|
|
5391
|
+
}
|
|
5392
|
+
setVisiblePanel(null);
|
|
5393
|
+
}, [visiblePanel, onEvent]);
|
|
5394
|
+
const onBurgerMenuItemClick = useCallback((item) => {
|
|
5395
|
+
var _a;
|
|
5396
|
+
const closeMenuOnClick = (_a = item.closeMenuOnClick) !== null && _a !== void 0 ? _a : true;
|
|
5397
|
+
if (closeMenuOnClick) {
|
|
5398
|
+
onBurgerClose();
|
|
5399
|
+
}
|
|
5400
|
+
}, [onBurgerClose]);
|
|
5401
|
+
const renderBurgerMenuFooter = useCallback(() => {
|
|
5402
|
+
var _a;
|
|
5403
|
+
return (_a = burgerMenu.renderFooter) === null || _a === void 0 ? void 0 : _a.call(burgerMenu, {
|
|
5404
|
+
size,
|
|
5405
|
+
isCompact: compact,
|
|
5406
|
+
});
|
|
5407
|
+
}, [burgerMenu.renderFooter, size, compact]);
|
|
5408
|
+
const onLogoClick = useCallback((event) => {
|
|
5409
|
+
var _a;
|
|
5410
|
+
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
5411
|
+
(_a = logo.onClick) === null || _a === void 0 ? void 0 : _a.call(logo, event);
|
|
5412
|
+
}, [logo.onClick, onClosePanel]);
|
|
5413
|
+
const burgerPanelItem = useMemo(() => ({
|
|
5414
|
+
id: BURGER_PANEL_ITEM_ID,
|
|
5415
|
+
content: (React__default.createElement(BurgerMenu, { items: burgerMenu.items, modalItem: burgerMenu.modalItem, renderFooter: renderBurgerMenuFooter, onItemClick: onBurgerMenuItemClick, className: b$1('burger-menu') })),
|
|
5416
|
+
}), [burgerMenu]);
|
|
5417
|
+
useEffect(() => {
|
|
5418
|
+
const node = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
|
|
5419
|
+
if (node) {
|
|
5420
|
+
node.addEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);
|
|
5421
|
+
node.addEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);
|
|
5422
|
+
node.addEventListener('MOBILE_PANEL_TOGGLE', onMobilePanelToggle);
|
|
5423
|
+
node.addEventListener('MOBILE_PANEL_OPEN', onMobilePanelOpen);
|
|
5424
|
+
node.addEventListener('MOBILE_PANEL_CLOSE', onMobilePanelClose);
|
|
5425
|
+
}
|
|
5426
|
+
return () => {
|
|
5427
|
+
if (node) {
|
|
5428
|
+
node.removeEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);
|
|
5429
|
+
node.removeEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);
|
|
5430
|
+
node.removeEventListener('MOBILE_PANEL_TOGGLE', onMobilePanelToggle);
|
|
5431
|
+
node.removeEventListener('MOBILE_PANEL_OPEN', onMobilePanelOpen);
|
|
5432
|
+
node.removeEventListener('MOBILE_PANEL_CLOSE', onMobilePanelClose);
|
|
5433
|
+
}
|
|
5434
|
+
};
|
|
5435
|
+
}, [targetRef, onBurgerClose, onBurgerOpen]);
|
|
5436
|
+
return (React__default.createElement("div", { className: b$1({ compact }, className), ref: targetRef },
|
|
5437
|
+
React__default.createElement("header", { className: b$1('header'), style: { height: size } },
|
|
5438
|
+
React__default.createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger') }),
|
|
5439
|
+
React__default.createElement(Logo, Object.assign({}, logo, { compact: compact, onClick: onLogoClick })),
|
|
5440
|
+
React__default.createElement("div", { className: b$1('side-item') }, sideItemRenderContent === null || sideItemRenderContent === void 0 ? void 0 : sideItemRenderContent({ size }))),
|
|
5441
|
+
React__default.createElement(Drawer, { className: b$1('panels'), onVeilClick: onCloseDrawer, onEscape: onCloseDrawer, style: { top: size } }, [burgerPanelItem, ...panelItems].map((item) => (React__default.createElement(DrawerItem, Object.assign({}, item, { key: item.id, visible: visiblePanel === item.id, className: b$1('panel-item', item.className) }))))),
|
|
5442
|
+
React__default.createElement(Content, { size: size, renderContent: renderContent, className: b$1('content'), cssSizeVariableName: "--mobile-header-size" })));
|
|
5443
|
+
});
|
|
5444
|
+
MobileHeader.displayName = 'MobileHeader';
|
|
5445
|
+
|
|
5446
|
+
var css_248z = ".ycn-mobile-header-footer-item {\n flex-grow: 1;\n position: relative;\n}\n.ycn-mobile-header-footer-item__button {\n margin: 0;\n padding: 0;\n font-family: var(--yc-text-body-font-family);\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.ycn-mobile-header-footer-item .ycn-mobile-header-footer-item__icon {\n color: var(--yc-color-text-misc);\n}\n.ycn-mobile-header-footer-item + .ycn-mobile-header-footer-item::before {\n content: \"\";\n border-left: 1px solid var(--yc-color-base-generic);\n position: absolute;\n top: 8px;\n bottom: 8px;\n left: 0;\n}\n.ycn-mobile-header-footer-item:empty {\n display: none;\n}";
|
|
5447
|
+
styleInject(css_248z);
|
|
5448
|
+
|
|
5449
|
+
const b = block('mobile-header-footer-item');
|
|
5450
|
+
const FooterItem = ({ icon, iconSize = MOBILE_HEADER_ICON_SIZE, className, modalItem = { visible: false }, onClick, }) => {
|
|
5451
|
+
var _a;
|
|
5452
|
+
const handleClick = React__default.useCallback((event) => {
|
|
5453
|
+
eventBroker.publish({
|
|
5454
|
+
componentId: 'MobileHeaderFooterItem',
|
|
5455
|
+
eventId: 'click',
|
|
5456
|
+
domEvent: event,
|
|
5457
|
+
});
|
|
5458
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
5459
|
+
}, [onClick]);
|
|
5460
|
+
return (React__default.createElement("div", { className: b() },
|
|
5461
|
+
React__default.createElement("button", { className: b('button', className), onClick: handleClick }, icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b('icon') }) : null),
|
|
5462
|
+
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))));
|
|
5463
|
+
};
|
|
5464
|
+
|
|
5465
|
+
export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, MobileHeader, MobileHeaderDict, FooterItem as MobileHeaderFooterItem, Settings, Title };
|
|
5220
5466
|
//# sourceMappingURL=index.js.map
|