@gravity-ui/navigation 0.8.0 → 0.8.1
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 +7 -0
- package/build/cjs/components/index.d.ts +1 -0
- package/build/cjs/index.js +392 -144
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/index.d.ts +1 -0
- package/build/esm/index.js +392 -146
- package/build/esm/index.js.map +1 -1
- package/package.json +1 -1
package/build/cjs/index.js
CHANGED
|
@@ -115,48 +115,48 @@ function styleInject(css, ref) {
|
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
var css_248z$
|
|
119
|
-
styleInject(css_248z$
|
|
118
|
+
var css_248z$l = ".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}";
|
|
119
|
+
styleInject(css_248z$l);
|
|
120
120
|
|
|
121
|
-
const b$
|
|
121
|
+
const b$m = block('action-bar-group');
|
|
122
122
|
const ActionBarGroup = ({ children, className, pull }) => {
|
|
123
|
-
return (React__default["default"].createElement("ul", { className: b$
|
|
123
|
+
return (React__default["default"].createElement("ul", { className: b$m({ pull }, className), role: "group" }, children));
|
|
124
124
|
};
|
|
125
125
|
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
126
126
|
|
|
127
|
-
var css_248z$
|
|
128
|
-
styleInject(css_248z$
|
|
127
|
+
var css_248z$k = ".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}";
|
|
128
|
+
styleInject(css_248z$k);
|
|
129
129
|
|
|
130
|
-
const b$
|
|
130
|
+
const b$l = block('action-bar-item');
|
|
131
131
|
const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
132
|
-
return React__default["default"].createElement("li", { className: b$
|
|
132
|
+
return React__default["default"].createElement("li", { className: b$l({ pull, spacing }, className) }, children);
|
|
133
133
|
};
|
|
134
134
|
ActionBarItem.displayName = 'ActionBar.Item';
|
|
135
135
|
|
|
136
|
-
var css_248z$
|
|
137
|
-
styleInject(css_248z$
|
|
136
|
+
var css_248z$j = ".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}";
|
|
137
|
+
styleInject(css_248z$j);
|
|
138
138
|
|
|
139
|
-
const b$
|
|
139
|
+
const b$k = block('action-bar-section');
|
|
140
140
|
const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
141
|
-
return React__default["default"].createElement("div", { className: b$
|
|
141
|
+
return React__default["default"].createElement("div", { className: b$k({ type }) }, children);
|
|
142
142
|
};
|
|
143
143
|
ActionBarSection.displayName = 'ActionBar.Section';
|
|
144
144
|
|
|
145
|
-
var css_248z$
|
|
146
|
-
styleInject(css_248z$
|
|
145
|
+
var css_248z$i = ".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}";
|
|
146
|
+
styleInject(css_248z$i);
|
|
147
147
|
|
|
148
|
-
const b$
|
|
148
|
+
const b$j = block('action-bar-separator');
|
|
149
149
|
const ActionBarSeparator = () => {
|
|
150
|
-
return React__default["default"].createElement("li", { role: "separator", className: b$
|
|
150
|
+
return React__default["default"].createElement("li", { role: "separator", className: b$j() });
|
|
151
151
|
};
|
|
152
152
|
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
153
153
|
|
|
154
|
-
var css_248z$
|
|
155
|
-
styleInject(css_248z$
|
|
154
|
+
var css_248z$h = ".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}";
|
|
155
|
+
styleInject(css_248z$h);
|
|
156
156
|
|
|
157
|
-
const b$
|
|
157
|
+
const b$i = block('action-bar');
|
|
158
158
|
const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
|
|
159
|
-
return (React__default["default"].createElement("section", { className: b$
|
|
159
|
+
return (React__default["default"].createElement("section", { className: b$i(null, className), "aria-label": ariaLabel }, children));
|
|
160
160
|
};
|
|
161
161
|
ActionBar.displayName = 'ActionBar';
|
|
162
162
|
const PublicActionBar = Object.assign(ActionBar, {
|
|
@@ -3208,15 +3208,15 @@ SwitchTransition.defaultProps = {
|
|
|
3208
3208
|
mode: modes.out
|
|
3209
3209
|
};
|
|
3210
3210
|
|
|
3211
|
-
var css_248z$
|
|
3212
|
-
styleInject(css_248z$
|
|
3211
|
+
var css_248z$g = ".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}";
|
|
3212
|
+
styleInject(css_248z$g);
|
|
3213
3213
|
|
|
3214
|
-
const b$
|
|
3214
|
+
const b$h = block('drawer');
|
|
3215
3215
|
const TIMEOUT = 300;
|
|
3216
3216
|
const DrawerItem = ({ visible, content, direction, className }) => {
|
|
3217
3217
|
const itemRef = React__default["default"].useRef(null);
|
|
3218
|
-
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3219
|
-
React__default["default"].createElement("div", { ref: itemRef, className: b$
|
|
3218
|
+
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$h('item-transition', { direction }), nodeRef: itemRef },
|
|
3219
|
+
React__default["default"].createElement("div", { ref: itemRef, className: b$h('item', { direction }, className) }, content)));
|
|
3220
3220
|
};
|
|
3221
3221
|
const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
|
|
3222
3222
|
let someItemVisible = false;
|
|
@@ -3247,9 +3247,9 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3247
3247
|
const veilRef = React__default["default"].useRef(null);
|
|
3248
3248
|
return (React__default["default"].createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
|
|
3249
3249
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
3250
|
-
return (React__default["default"].createElement("div", { ref: containerRef, className: b$
|
|
3251
|
-
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3252
|
-
React__default["default"].createElement("div", { ref: veilRef, className: b$
|
|
3250
|
+
return (React__default["default"].createElement("div", { ref: containerRef, className: b$h(null, className), style: style },
|
|
3251
|
+
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$h('veil-transition'), nodeRef: veilRef },
|
|
3252
|
+
React__default["default"].createElement("div", { ref: veilRef, className: b$h('veil'), onClick: onVeilClick })),
|
|
3253
3253
|
React__default["default"].Children.map(children, (child) => {
|
|
3254
3254
|
const childElem = child;
|
|
3255
3255
|
if (childElem.type === DrawerItem) {
|
|
@@ -3261,11 +3261,11 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3261
3261
|
}));
|
|
3262
3262
|
};
|
|
3263
3263
|
|
|
3264
|
-
var css_248z$
|
|
3265
|
-
styleInject(css_248z$
|
|
3264
|
+
var css_248z$f = ".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}";
|
|
3265
|
+
styleInject(css_248z$f);
|
|
3266
3266
|
|
|
3267
|
-
const b$
|
|
3268
|
-
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3267
|
+
const b$g = block('logo');
|
|
3268
|
+
const Logo$1 = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3269
3269
|
const hasClickHandler = typeof onClick === 'function';
|
|
3270
3270
|
const hasWrapper = typeof wrapper === 'function';
|
|
3271
3271
|
const linkProps = hasClickHandler
|
|
@@ -3282,18 +3282,18 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3282
3282
|
else if (icon) {
|
|
3283
3283
|
buttonIcon = React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
3284
3284
|
}
|
|
3285
|
-
const button = (React__default["default"].createElement(uikit.Button, Object.assign({ view: "flat", size: "l", className: b$
|
|
3285
|
+
const button = (React__default["default"].createElement(uikit.Button, Object.assign({ view: "flat", size: "l", className: b$g('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
|
|
3286
3286
|
let logo;
|
|
3287
3287
|
if (typeof text === 'function') {
|
|
3288
3288
|
logo = text();
|
|
3289
3289
|
}
|
|
3290
3290
|
else {
|
|
3291
|
-
logo = (React__default["default"].createElement("div", { className: b$
|
|
3291
|
+
logo = (React__default["default"].createElement("div", { className: b$g('logo'), style: { fontSize: textSize } }, text));
|
|
3292
3292
|
}
|
|
3293
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
3294
|
-
React__default["default"].createElement("div", { className: b$
|
|
3293
|
+
return (React__default["default"].createElement("div", { className: b$g() },
|
|
3294
|
+
React__default["default"].createElement("div", { className: b$g('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3295
3295
|
!compact &&
|
|
3296
|
-
(hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$
|
|
3296
|
+
(hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$g('logo-link'), onClick: onClick }), logo)))));
|
|
3297
3297
|
};
|
|
3298
3298
|
|
|
3299
3299
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -3786,7 +3786,7 @@ const COLLAPSE_ITEM_ID = 'collapse-item-id';
|
|
|
3786
3786
|
const POPUP_PLACEMENT = ['right-start', 'right-end', 'right'];
|
|
3787
3787
|
const POPUP_ITEM_HEIGHT = 28;
|
|
3788
3788
|
|
|
3789
|
-
function getItemHeight(item) {
|
|
3789
|
+
function getItemHeight$1(item) {
|
|
3790
3790
|
switch (item.type) {
|
|
3791
3791
|
case 'action':
|
|
3792
3792
|
return 50;
|
|
@@ -3797,9 +3797,9 @@ function getItemHeight(item) {
|
|
|
3797
3797
|
}
|
|
3798
3798
|
}
|
|
3799
3799
|
function getItemsHeight(items) {
|
|
3800
|
-
return items.reduce((sum, item) => sum + getItemHeight(item), 0);
|
|
3800
|
+
return items.reduce((sum, item) => sum + getItemHeight$1(item), 0);
|
|
3801
3801
|
}
|
|
3802
|
-
function getSelectedItemIndex(items) {
|
|
3802
|
+
function getSelectedItemIndex$1(items) {
|
|
3803
3803
|
const index = items.findIndex(({ current }) => Boolean(current));
|
|
3804
3804
|
return index === -1 ? undefined : index;
|
|
3805
3805
|
}
|
|
@@ -3825,25 +3825,25 @@ function getItemsMinHeight(items) {
|
|
|
3825
3825
|
(pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
|
|
3826
3826
|
}
|
|
3827
3827
|
|
|
3828
|
-
var css_248z$
|
|
3829
|
-
styleInject(css_248z$
|
|
3828
|
+
var css_248z$e = ".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}";
|
|
3829
|
+
styleInject(css_248z$e);
|
|
3830
3830
|
|
|
3831
|
-
const b$
|
|
3831
|
+
const b$f = block('composite-bar-item');
|
|
3832
3832
|
function renderItemTitle(item) {
|
|
3833
|
-
let titleNode = React__default["default"].createElement("div", { className: b$
|
|
3833
|
+
let titleNode = React__default["default"].createElement("div", { className: b$f('title-text') }, item.title);
|
|
3834
3834
|
if (item.rightAdornment) {
|
|
3835
3835
|
titleNode = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3836
3836
|
titleNode,
|
|
3837
|
-
React__default["default"].createElement("div", { className: b$
|
|
3837
|
+
React__default["default"].createElement("div", { className: b$f('title-adornment') }, item.rightAdornment)));
|
|
3838
3838
|
}
|
|
3839
3839
|
return titleNode;
|
|
3840
3840
|
}
|
|
3841
3841
|
const defaultPopupPlacement = ['right-end'];
|
|
3842
3842
|
const defaultPopupOffset = [-20, 8];
|
|
3843
|
-
const Item = (props) => {
|
|
3843
|
+
const Item$1 = (props) => {
|
|
3844
3844
|
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3845
3845
|
if (item.type === 'divider') {
|
|
3846
|
-
return React__default["default"].createElement("div", { className: b$
|
|
3846
|
+
return React__default["default"].createElement("div", { className: b$f('menu-divider') });
|
|
3847
3847
|
}
|
|
3848
3848
|
const [open, toggleOpen] = React__default["default"].useState(false);
|
|
3849
3849
|
const ref = React__default["default"].useRef(null);
|
|
@@ -3864,7 +3864,7 @@ const Item = (props) => {
|
|
|
3864
3864
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
3865
3865
|
}, [onClosePopup]);
|
|
3866
3866
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
3867
|
-
const createdNode = (React__default["default"].createElement("div", { className: b$
|
|
3867
|
+
const createdNode = (React__default["default"].createElement("div", { className: b$f({ type, current, compact }, className), ref: ref, onClick: () => {
|
|
3868
3868
|
if (collapsedItem) {
|
|
3869
3869
|
/**
|
|
3870
3870
|
* If we call onItemClick for collapsedItem then:
|
|
@@ -3885,13 +3885,13 @@ const Item = (props) => {
|
|
|
3885
3885
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3886
3886
|
}
|
|
3887
3887
|
} },
|
|
3888
|
-
React__default["default"].createElement("div", { className: b$
|
|
3889
|
-
React__default["default"].createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$
|
|
3890
|
-
React__default["default"].createElement("div", { className: b$
|
|
3891
|
-
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { className: b$
|
|
3892
|
-
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$
|
|
3888
|
+
React__default["default"].createElement("div", { className: b$f('icon-place') }, compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$f('icon-tooltip', { 'item-type': type }) },
|
|
3889
|
+
React__default["default"].createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$f('btn-icon') }, iconEl))) : (iconEl)),
|
|
3890
|
+
React__default["default"].createElement("div", { className: b$f('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3891
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { className: b$f('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3892
|
+
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$f('link') }, createdNode)) : (createdNode);
|
|
3893
3893
|
};
|
|
3894
|
-
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$
|
|
3894
|
+
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$f('icon') }) : null;
|
|
3895
3895
|
const titleNode = renderItemTitle(item);
|
|
3896
3896
|
const params = { icon: iconNode, title: titleNode };
|
|
3897
3897
|
let node;
|
|
@@ -3906,16 +3906,16 @@ const Item = (props) => {
|
|
|
3906
3906
|
node,
|
|
3907
3907
|
open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
|
|
3908
3908
|
};
|
|
3909
|
-
Item.displayName = 'Item';
|
|
3909
|
+
Item$1.displayName = 'Item';
|
|
3910
3910
|
function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
3911
3911
|
return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default["default"].createElement(uikit.Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
|
|
3912
|
-
React__default["default"].createElement("div", { className: b$
|
|
3913
|
-
React__default["default"].createElement(uikit.List, { itemClassName: b$
|
|
3912
|
+
React__default["default"].createElement("div", { className: b$f('collapse-items-popup-content') },
|
|
3913
|
+
React__default["default"].createElement(uikit.List, { itemClassName: b$f('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) => {
|
|
3914
3914
|
const makeCollapseNode = ({ title: titleEl }) => {
|
|
3915
|
-
const res = (React__default["default"].createElement("div", { className: b$
|
|
3915
|
+
const res = (React__default["default"].createElement("div", { className: b$f('collapse-item'), onClick: () => {
|
|
3916
3916
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3917
3917
|
} }, titleEl));
|
|
3918
|
-
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$
|
|
3918
|
+
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$f('link') }, res)) : (res);
|
|
3919
3919
|
};
|
|
3920
3920
|
const titleNode = renderItemTitle(collapseItem);
|
|
3921
3921
|
const params = { title: titleNode };
|
|
@@ -3945,10 +3945,10 @@ var SvgDots = function SvgDots(props) {
|
|
|
3945
3945
|
};
|
|
3946
3946
|
var dotsIcon = SvgDots;
|
|
3947
3947
|
|
|
3948
|
-
var css_248z$
|
|
3949
|
-
styleInject(css_248z$
|
|
3948
|
+
var css_248z$d = ".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}";
|
|
3949
|
+
styleInject(css_248z$d);
|
|
3950
3950
|
|
|
3951
|
-
const b$
|
|
3951
|
+
const b$e = block('composite-bar');
|
|
3952
3952
|
class CompositeBar extends React__default["default"].Component {
|
|
3953
3953
|
constructor() {
|
|
3954
3954
|
super(...arguments);
|
|
@@ -3963,10 +3963,10 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
3963
3963
|
return null;
|
|
3964
3964
|
}
|
|
3965
3965
|
if (!enableCollapsing) {
|
|
3966
|
-
return React__default["default"].createElement("div", { className: b$
|
|
3966
|
+
return React__default["default"].createElement("div", { className: b$e() }, this.renderMenu());
|
|
3967
3967
|
}
|
|
3968
3968
|
const minHeight = getItemsMinHeight(items);
|
|
3969
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
3969
|
+
return (React__default["default"].createElement("div", { className: b$e({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
|
|
3970
3970
|
const style = {
|
|
3971
3971
|
width,
|
|
3972
3972
|
height,
|
|
@@ -3977,7 +3977,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
3977
3977
|
renderAutosizeMenu(height) {
|
|
3978
3978
|
const { compact, onItemClick } = this.props;
|
|
3979
3979
|
const { listItems, collapseItems } = this.getAutosizeListItems(height);
|
|
3980
|
-
return (React__default["default"].createElement(uikit.List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex(listItems), itemHeight: getItemHeight, itemClassName: b$
|
|
3980
|
+
return (React__default["default"].createElement(uikit.List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex$1(listItems), itemHeight: getItemHeight$1, itemClassName: b$e('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default["default"].createElement(Item$1, { item: item, onMouseLeave: () => {
|
|
3981
3981
|
var _a;
|
|
3982
3982
|
if (compact) {
|
|
3983
3983
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -3986,7 +3986,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
3986
3986
|
}
|
|
3987
3987
|
renderMenu() {
|
|
3988
3988
|
const { items, onItemClick, compact } = this.props;
|
|
3989
|
-
return (React__default["default"].createElement(uikit.List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$
|
|
3989
|
+
return (React__default["default"].createElement(uikit.List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$e('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default["default"].createElement(Item$1, { item: item, onMouseLeave: () => {
|
|
3990
3990
|
var _a;
|
|
3991
3991
|
if (compact) {
|
|
3992
3992
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -4015,7 +4015,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4015
4015
|
return { listItems, collapseItems: [] };
|
|
4016
4016
|
}
|
|
4017
4017
|
const collapseItem = this.getMoreButtonItem();
|
|
4018
|
-
const collapseItemHeight = getItemHeight(collapseItem);
|
|
4018
|
+
const collapseItemHeight = getItemHeight$1(collapseItem);
|
|
4019
4019
|
listItems.splice(regularItems.length, 0, collapseItem);
|
|
4020
4020
|
const collapseItems = [];
|
|
4021
4021
|
let listHeight = allItemsHeight + collapseItemHeight;
|
|
@@ -4031,12 +4031,12 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4031
4031
|
}
|
|
4032
4032
|
if (item.type === 'divider') {
|
|
4033
4033
|
if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
|
|
4034
|
-
listHeight -= getItemHeight(item);
|
|
4034
|
+
listHeight -= getItemHeight$1(item);
|
|
4035
4035
|
listItems.splice(index, 1);
|
|
4036
4036
|
}
|
|
4037
4037
|
continue;
|
|
4038
4038
|
}
|
|
4039
|
-
listHeight -= getItemHeight(item);
|
|
4039
|
+
listHeight -= getItemHeight$1(item);
|
|
4040
4040
|
collapseItems.unshift(...listItems.splice(index, 1));
|
|
4041
4041
|
}
|
|
4042
4042
|
if (((_b = listItems[index]) === null || _b === void 0 ? void 0 : _b.type) === 'divider' &&
|
|
@@ -4086,10 +4086,10 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4086
4086
|
};
|
|
4087
4087
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4088
4088
|
|
|
4089
|
-
var css_248z$
|
|
4090
|
-
styleInject(css_248z$
|
|
4089
|
+
var css_248z$c = ".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}";
|
|
4090
|
+
styleInject(css_248z$c);
|
|
4091
4091
|
|
|
4092
|
-
const b$
|
|
4092
|
+
const b$d = block('aside-header');
|
|
4093
4093
|
class AsideHeader extends React__default["default"].Component {
|
|
4094
4094
|
constructor() {
|
|
4095
4095
|
super(...arguments);
|
|
@@ -4097,26 +4097,26 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4097
4097
|
this.renderFirstPane = (size) => {
|
|
4098
4098
|
const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
|
|
4099
4099
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4100
|
-
React__default["default"].createElement("div", { className: b$
|
|
4101
|
-
React__default["default"].createElement("div", { className: b$
|
|
4102
|
-
React__default["default"].createElement("div", { className: b$
|
|
4100
|
+
React__default["default"].createElement("div", { className: b$d('aside'), style: { width: size } },
|
|
4101
|
+
React__default["default"].createElement("div", { className: b$d('aside-popup-anchor'), ref: this.asideRef }),
|
|
4102
|
+
React__default["default"].createElement("div", { className: b$d('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4103
4103
|
this.renderHeader(),
|
|
4104
|
-
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default["default"].createElement("div", { className: b$
|
|
4104
|
+
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default["default"].createElement("div", { className: b$d('menu-items') })),
|
|
4105
4105
|
this.renderFooter(size),
|
|
4106
4106
|
this.renderCollapseButton())),
|
|
4107
4107
|
panelItems && this.renderPanels(size)));
|
|
4108
4108
|
};
|
|
4109
4109
|
this.renderSecondPane = (size) => {
|
|
4110
|
-
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$
|
|
4110
|
+
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$d('content') }));
|
|
4111
4111
|
};
|
|
4112
|
-
this.renderLogo = () => (React__default["default"].createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4113
|
-
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$
|
|
4112
|
+
this.renderLogo = () => (React__default["default"].createElement(Logo$1, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4113
|
+
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$d('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4114
4114
|
this.renderLogo(),
|
|
4115
4115
|
React__default["default"].createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
4116
|
-
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$
|
|
4116
|
+
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$d('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4117
4117
|
this.renderFooter = (size) => {
|
|
4118
4118
|
const { compact, renderFooter } = this.props;
|
|
4119
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
4119
|
+
return (React__default["default"].createElement("div", { className: b$d('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4120
4120
|
size,
|
|
4121
4121
|
compact,
|
|
4122
4122
|
asideRef: this.asideRef,
|
|
@@ -4124,14 +4124,14 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4124
4124
|
};
|
|
4125
4125
|
this.renderPanels = (size) => {
|
|
4126
4126
|
const { panelItems } = this.props;
|
|
4127
|
-
return (React__default["default"].createElement(Drawer, { className: b$
|
|
4127
|
+
return (React__default["default"].createElement(Drawer, { className: b$d('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
|
|
4128
4128
|
};
|
|
4129
4129
|
this.renderCollapseButton = () => {
|
|
4130
4130
|
var _a;
|
|
4131
4131
|
const { compact, dict } = this.props;
|
|
4132
4132
|
const typeButton = compact ? exports.Dict.ExpandButton : exports.Dict.CollapseButton;
|
|
4133
|
-
return (React__default["default"].createElement(uikit.Button, { className: b$
|
|
4134
|
-
React__default["default"].createElement(uikit.Icon, { data: controlMenuButtonIcon, className: b$
|
|
4133
|
+
return (React__default["default"].createElement(uikit.Button, { className: b$d('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] },
|
|
4134
|
+
React__default["default"].createElement(uikit.Icon, { data: controlMenuButtonIcon, className: b$d('collapse-icon'), width: "16", height: "10" })));
|
|
4135
4135
|
};
|
|
4136
4136
|
this.onCollapseButtonClick = () => {
|
|
4137
4137
|
var _a, _b;
|
|
@@ -4155,8 +4155,8 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4155
4155
|
render() {
|
|
4156
4156
|
const { className, compact } = this.props;
|
|
4157
4157
|
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
4158
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
4159
|
-
React__default["default"].createElement("div", { className: b$
|
|
4158
|
+
return (React__default["default"].createElement("div", { className: b$d({ compact }, className) },
|
|
4159
|
+
React__default["default"].createElement("div", { className: b$d('pane-container') },
|
|
4160
4160
|
this.renderFirstPane(size),
|
|
4161
4161
|
this.renderSecondPane(size))));
|
|
4162
4162
|
}
|
|
@@ -4195,25 +4195,25 @@ function __rest(s, e) {
|
|
|
4195
4195
|
return t;
|
|
4196
4196
|
}
|
|
4197
4197
|
|
|
4198
|
-
var css_248z$
|
|
4199
|
-
styleInject(css_248z$
|
|
4198
|
+
var css_248z$b = ".ycn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4199
|
+
styleInject(css_248z$b);
|
|
4200
4200
|
|
|
4201
|
-
const b$
|
|
4202
|
-
const FooterItem = (_a) => {
|
|
4201
|
+
const b$c = block('footer-item');
|
|
4202
|
+
const FooterItem$1 = (_a) => {
|
|
4203
4203
|
var { item } = _a, props = __rest(_a, ["item"]);
|
|
4204
|
-
return (React__default["default"].createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$
|
|
4204
|
+
return (React__default["default"].createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$c({ compact: props.compact }), onItemClick: item.onItemClick })));
|
|
4205
4205
|
};
|
|
4206
4206
|
|
|
4207
|
-
var css_248z$
|
|
4208
|
-
styleInject(css_248z$
|
|
4207
|
+
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}";
|
|
4208
|
+
styleInject(css_248z$a);
|
|
4209
4209
|
|
|
4210
|
-
const b$
|
|
4210
|
+
const b$b = block('title');
|
|
4211
4211
|
const defaultDict$1 = {
|
|
4212
4212
|
close: 'Close',
|
|
4213
4213
|
};
|
|
4214
4214
|
const Title = ({ children, closeIconSize = 23, hasSeparator, dict = defaultDict$1, onClose, }) => {
|
|
4215
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
4216
|
-
React__default["default"].createElement(uikit.Text, { className: b$
|
|
4215
|
+
return (React__default["default"].createElement("div", { className: b$b({ separator: hasSeparator }) },
|
|
4216
|
+
React__default["default"].createElement(uikit.Text, { className: b$b('text'), as: 'h3', variant: 'subheader-3' }, children),
|
|
4217
4217
|
onClose && (React__default["default"].createElement(uikit.Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
|
|
4218
4218
|
'aria-label': dict['close'],
|
|
4219
4219
|
} },
|
|
@@ -4248,10 +4248,10 @@ function filterHotkeys(hotkeys, filter) {
|
|
|
4248
4248
|
return hotkeys;
|
|
4249
4249
|
}
|
|
4250
4250
|
|
|
4251
|
-
var css_248z$
|
|
4252
|
-
styleInject(css_248z$
|
|
4251
|
+
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}";
|
|
4252
|
+
styleInject(css_248z$9);
|
|
4253
4253
|
|
|
4254
|
-
const b$
|
|
4254
|
+
const b$a = block('hotkeys-panel');
|
|
4255
4255
|
function HotkeysPanel(_a) {
|
|
4256
4256
|
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"]);
|
|
4257
4257
|
const [filter, setFilter] = React.useState('');
|
|
@@ -4259,18 +4259,18 @@ function HotkeysPanel(_a) {
|
|
|
4259
4259
|
const filteredHotkeys = filterHotkeys(hotkeys, filter);
|
|
4260
4260
|
return flattenHotkeyGroups(filteredHotkeys);
|
|
4261
4261
|
}, [hotkeys, filter]);
|
|
4262
|
-
const renderItem = React.useCallback((item) => (React__default["default"].createElement("div", { className: b$
|
|
4262
|
+
const renderItem = React.useCallback((item) => (React__default["default"].createElement("div", { className: b$a('item-content', { group: item.group }), key: item.title },
|
|
4263
4263
|
item.title,
|
|
4264
|
-
item.value && React__default["default"].createElement(uikit.Hotkey, { className: b$
|
|
4264
|
+
item.value && React__default["default"].createElement(uikit.Hotkey, { className: b$a('hotkey'), value: item.value }))), []);
|
|
4265
4265
|
const drawerItemContent = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4266
|
-
React__default["default"].createElement("h2", { className: b$
|
|
4267
|
-
React__default["default"].createElement(uikit.TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$
|
|
4268
|
-
React__default["default"].createElement(uikit.List, Object.assign({ className: b$
|
|
4269
|
-
return (React__default["default"].createElement(Drawer, { className: b$
|
|
4266
|
+
React__default["default"].createElement("h2", { className: b$a('title') }, title),
|
|
4267
|
+
React__default["default"].createElement(uikit.TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$a('search') }),
|
|
4268
|
+
React__default["default"].createElement(uikit.List, Object.assign({ className: b$a('list'), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$a('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
|
|
4269
|
+
return (React__default["default"].createElement(Drawer, { className: b$a(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
|
|
4270
4270
|
left: leftOffset,
|
|
4271
4271
|
top: topOffset,
|
|
4272
4272
|
} },
|
|
4273
|
-
React__default["default"].createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$
|
|
4273
|
+
React__default["default"].createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$a('drawer-item'), content: drawerItemContent })));
|
|
4274
4274
|
}
|
|
4275
4275
|
|
|
4276
4276
|
/**
|
|
@@ -4864,18 +4864,18 @@ function escapeStringForRegExp(input) {
|
|
|
4864
4864
|
return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
4865
4865
|
}
|
|
4866
4866
|
|
|
4867
|
-
const b$
|
|
4867
|
+
const b$9 = block('settings-search');
|
|
4868
4868
|
function SettingsSearch({ className, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
|
|
4869
4869
|
const onChangeStable = useStableCallback(onChange);
|
|
4870
4870
|
const handleUpdate = React__default["default"].useCallback(debounce_1(onChangeStable, debounce), [debounce]);
|
|
4871
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
4871
|
+
return (React__default["default"].createElement("div", { className: b$9(null, className) },
|
|
4872
4872
|
React__default["default"].createElement(uikit.TextInput, { controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
|
|
4873
4873
|
}
|
|
4874
4874
|
|
|
4875
|
-
var css_248z$
|
|
4876
|
-
styleInject(css_248z$
|
|
4875
|
+
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}";
|
|
4876
|
+
styleInject(css_248z$8);
|
|
4877
4877
|
|
|
4878
|
-
const b$
|
|
4878
|
+
const b$8 = block('settings-menu');
|
|
4879
4879
|
const SettingsMenu = React__default["default"].forwardRef(
|
|
4880
4880
|
// eslint-disable-next-line prefer-arrow-callback
|
|
4881
4881
|
function SettingsMenu({ items, onChange, activeItemId }, ref) {
|
|
@@ -4907,10 +4907,10 @@ function SettingsMenu({ items, onChange, activeItemId }, ref) {
|
|
|
4907
4907
|
setFocusId(undefined);
|
|
4908
4908
|
},
|
|
4909
4909
|
}), [getFocused, handleChange]);
|
|
4910
|
-
return (React__default["default"].createElement("div", { ref: containerRef, className: b$
|
|
4910
|
+
return (React__default["default"].createElement("div", { ref: containerRef, className: b$8() }, items.map((firstLevelItem) => {
|
|
4911
4911
|
if ('groupTitle' in firstLevelItem) {
|
|
4912
|
-
return (React__default["default"].createElement("div", { key: firstLevelItem.groupTitle, className: b$
|
|
4913
|
-
React__default["default"].createElement("span", { className: b$
|
|
4912
|
+
return (React__default["default"].createElement("div", { key: firstLevelItem.groupTitle, className: b$8('group') },
|
|
4913
|
+
React__default["default"].createElement("span", { className: b$8('group-heading') }, firstLevelItem.groupTitle),
|
|
4914
4914
|
firstLevelItem.items.map((item) => {
|
|
4915
4915
|
return renderMenuItem(item, onChange, activeItemId, focusItemId);
|
|
4916
4916
|
})));
|
|
@@ -4919,7 +4919,7 @@ function SettingsMenu({ items, onChange, activeItemId }, ref) {
|
|
|
4919
4919
|
})));
|
|
4920
4920
|
});
|
|
4921
4921
|
function renderMenuItem(item, onChange, activeItemId, focusItemId) {
|
|
4922
|
-
return (React__default["default"].createElement("span", { key: item.title, className: b$
|
|
4922
|
+
return (React__default["default"].createElement("span", { key: item.title, className: b$8('item', {
|
|
4923
4923
|
selected: activeItemId === item.id,
|
|
4924
4924
|
disabled: item.disabled,
|
|
4925
4925
|
focused: focusItemId === item.id,
|
|
@@ -4929,12 +4929,12 @@ function renderMenuItem(item, onChange, activeItemId, focusItemId) {
|
|
|
4929
4929
|
onChange(item.id);
|
|
4930
4930
|
}
|
|
4931
4931
|
}, "data-id": item.id },
|
|
4932
|
-
item.icon ? React__default["default"].createElement(uikit.Icon, Object.assign({ size: 16 }, item.icon, { className: b$
|
|
4932
|
+
item.icon ? React__default["default"].createElement(uikit.Icon, Object.assign({ size: 16 }, item.icon, { className: b$8('item-icon') })) : undefined,
|
|
4933
4933
|
React__default["default"].createElement("span", null, item.title)));
|
|
4934
4934
|
}
|
|
4935
4935
|
function focusNext(container, focused, direction) {
|
|
4936
4936
|
var _a;
|
|
4937
|
-
const elements = container.querySelectorAll(`.${b$
|
|
4937
|
+
const elements = container.querySelectorAll(`.${b$8('item')}:not(.${b$8('item')}_disabled)`);
|
|
4938
4938
|
if (elements.length === 0) {
|
|
4939
4939
|
return undefined;
|
|
4940
4940
|
}
|
|
@@ -4946,10 +4946,10 @@ function focusNext(container, focused, direction) {
|
|
|
4946
4946
|
return (_a = elements[currentIndex].getAttribute('data-id')) !== null && _a !== void 0 ? _a : undefined;
|
|
4947
4947
|
}
|
|
4948
4948
|
|
|
4949
|
-
var css_248z$
|
|
4950
|
-
styleInject(css_248z$
|
|
4949
|
+
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}";
|
|
4950
|
+
styleInject(css_248z$7);
|
|
4951
4951
|
|
|
4952
|
-
const b$
|
|
4952
|
+
const b$7 = block('settings-menu-mobile');
|
|
4953
4953
|
const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
|
|
4954
4954
|
const ref = React__default["default"].useRef(null);
|
|
4955
4955
|
const tabItems = React__default["default"].useMemo(() => {
|
|
@@ -4960,12 +4960,12 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
|
|
|
4960
4960
|
id,
|
|
4961
4961
|
title,
|
|
4962
4962
|
disabled,
|
|
4963
|
-
className: b$
|
|
4963
|
+
className: b$7('item', { badge: withBadge }),
|
|
4964
4964
|
})));
|
|
4965
4965
|
}
|
|
4966
4966
|
else {
|
|
4967
4967
|
const { id, title, disabled, withBadge } = firstLevelItem;
|
|
4968
|
-
tabItems.push({ id, title, disabled, className: b$
|
|
4968
|
+
tabItems.push({ id, title, disabled, className: b$7('item', { badge: withBadge }) });
|
|
4969
4969
|
}
|
|
4970
4970
|
});
|
|
4971
4971
|
return tabItems;
|
|
@@ -4974,7 +4974,7 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
|
|
|
4974
4974
|
e.stopPropagation();
|
|
4975
4975
|
};
|
|
4976
4976
|
return (React__default["default"].createElement("div", { ref: ref, onTouchMove: handleTouchMove },
|
|
4977
|
-
React__default["default"].createElement(uikit.Tabs, { items: tabItems, className: b$
|
|
4977
|
+
React__default["default"].createElement(uikit.Tabs, { items: tabItems, className: b$7(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
|
|
4978
4978
|
};
|
|
4979
4979
|
|
|
4980
4980
|
function getSettingsFromChildren(children, searchText = '') {
|
|
@@ -5098,10 +5098,10 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5098
5098
|
return { items, hidden };
|
|
5099
5099
|
}
|
|
5100
5100
|
|
|
5101
|
-
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}";
|
|
5102
|
-
styleInject(css_248z);
|
|
5101
|
+
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}";
|
|
5102
|
+
styleInject(css_248z$6);
|
|
5103
5103
|
|
|
5104
|
-
const b = block('settings');
|
|
5104
|
+
const b$6 = block('settings');
|
|
5105
5105
|
const defaultDict = {
|
|
5106
5106
|
heading_settings: 'Settings',
|
|
5107
5107
|
placeholder_search: 'Search settings',
|
|
@@ -5110,7 +5110,7 @@ const defaultDict = {
|
|
|
5110
5110
|
function Settings(_a) {
|
|
5111
5111
|
var { loading, renderLoading, children, view = 'normal' } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view"]);
|
|
5112
5112
|
if (loading) {
|
|
5113
|
-
return (React__default["default"].createElement("div", { className: b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default["default"].createElement(uikit.Loader, { className: b('loader'), size: "m" }))));
|
|
5113
|
+
return (React__default["default"].createElement("div", { className: b$6({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default["default"].createElement(uikit.Loader, { className: b$6('loader'), size: "m" }))));
|
|
5114
5114
|
}
|
|
5115
5115
|
return (React__default["default"].createElement(SettingsContent, Object.assign({ view: view }, props), children));
|
|
5116
5116
|
}
|
|
@@ -5171,23 +5171,23 @@ function SettingsContent({ initialPage, children, renderNotFound, dict, view, on
|
|
|
5171
5171
|
});
|
|
5172
5172
|
const renderPageContent = () => {
|
|
5173
5173
|
if (!activePage) {
|
|
5174
|
-
return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default["default"].createElement("div", { className: b('not-found') }, dict === null || dict === void 0 ? void 0 : dict.not_found));
|
|
5174
|
+
return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default["default"].createElement("div", { className: b$6('not-found') }, dict === null || dict === void 0 ? void 0 : dict.not_found));
|
|
5175
5175
|
}
|
|
5176
5176
|
const filteredSections = pages[activePage].sections.filter((section) => !section.hidden);
|
|
5177
5177
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
5178
5178
|
!isMobile && (React__default["default"].createElement(Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, activePage))),
|
|
5179
|
-
React__default["default"].createElement("div", { className: b('content') }, filteredSections.map((section) => (React__default["default"].createElement("div", { key: section.title, className: b('section') },
|
|
5180
|
-
section.showTitle && (React__default["default"].createElement("h3", { className: b('section-heading') }, section.title)),
|
|
5179
|
+
React__default["default"].createElement("div", { className: b$6('content') }, filteredSections.map((section) => (React__default["default"].createElement("div", { key: section.title, className: b$6('section') },
|
|
5180
|
+
section.showTitle && (React__default["default"].createElement("h3", { className: b$6('section-heading') }, section.title)),
|
|
5181
5181
|
section.header &&
|
|
5182
|
-
(isMobile ? (React__default["default"].createElement("div", { className: b('section-subheader') }, section.header)) : (section.header)),
|
|
5183
|
-
section.items.map(({ hidden, title, element }) => hidden ? null : (React__default["default"].createElement("div", { key: title, className: b('section-item') }, React__default["default"].cloneElement(element, Object.assign(Object.assign({}, element.props), { title: search && title
|
|
5182
|
+
(isMobile ? (React__default["default"].createElement("div", { className: b$6('section-subheader') }, section.header)) : (section.header)),
|
|
5183
|
+
section.items.map(({ hidden, title, element }) => hidden ? null : (React__default["default"].createElement("div", { key: title, className: b$6('section-item') }, React__default["default"].cloneElement(element, Object.assign(Object.assign({}, element.props), { title: search && title
|
|
5184
5184
|
? prepareTitle(title, search)
|
|
5185
5185
|
: title })))))))))));
|
|
5186
5186
|
};
|
|
5187
|
-
return (React__default["default"].createElement("div", { className: b({ view }) },
|
|
5187
|
+
return (React__default["default"].createElement("div", { className: b$6({ view }) },
|
|
5188
5188
|
isMobile ? (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
5189
|
-
React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), onChange: setSearch, autoFocus: false, inputSize: 'l' }),
|
|
5190
|
-
React__default["default"].createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b('tabs') }))) : (React__default["default"].createElement("div", { className: b('menu'), onClick: () => {
|
|
5189
|
+
React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, autoFocus: false, inputSize: 'l' }),
|
|
5190
|
+
React__default["default"].createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b$6('tabs') }))) : (React__default["default"].createElement("div", { className: b$6('menu'), onClick: () => {
|
|
5191
5191
|
if (searchInputRef.current) {
|
|
5192
5192
|
searchInputRef.current.focus();
|
|
5193
5193
|
}
|
|
@@ -5199,9 +5199,9 @@ function SettingsContent({ initialPage, children, renderNotFound, dict, view, on
|
|
|
5199
5199
|
}
|
|
5200
5200
|
} },
|
|
5201
5201
|
React__default["default"].createElement(Title, null, dict === null || dict === void 0 ? void 0 : dict.heading_settings),
|
|
5202
|
-
React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), onChange: setSearch, placeholder: dict === null || dict === void 0 ? void 0 : dict.placeholder_search, autoFocus: true }),
|
|
5202
|
+
React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, placeholder: dict === null || dict === void 0 ? void 0 : dict.placeholder_search, autoFocus: true }),
|
|
5203
5203
|
React__default["default"].createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
|
|
5204
|
-
React__default["default"].createElement("div", { className: b('page') }, renderPageContent())));
|
|
5204
|
+
React__default["default"].createElement("div", { className: b$6('page') }, renderPageContent())));
|
|
5205
5205
|
}
|
|
5206
5206
|
Settings.Group = function SettingsGroup({ children }) {
|
|
5207
5207
|
return React__default["default"].createElement(React__default["default"].Fragment, null, children);
|
|
@@ -5213,11 +5213,11 @@ Settings.Section = function SettingsSection({ children }) {
|
|
|
5213
5213
|
return React__default["default"].createElement(React__default["default"].Fragment, null, children);
|
|
5214
5214
|
};
|
|
5215
5215
|
Settings.Item = function SettingsItem({ title, children, align = 'center', withBadge, renderTitleComponent = identity_1, mode, description, }) {
|
|
5216
|
-
return (React__default["default"].createElement("div", { className: b('item', { align, mode }) },
|
|
5217
|
-
React__default["default"].createElement("label", { className: b('item-heading') },
|
|
5218
|
-
React__default["default"].createElement("span", { className: b('item-title', { badge: withBadge }) }, renderTitleComponent(title)),
|
|
5219
|
-
description ? React__default["default"].createElement("span", { className: b('item-description') }, description) : null),
|
|
5220
|
-
React__default["default"].createElement("div", { className: b('item-content') }, children)));
|
|
5216
|
+
return (React__default["default"].createElement("div", { className: b$6('item', { align, mode }) },
|
|
5217
|
+
React__default["default"].createElement("label", { className: b$6('item-heading') },
|
|
5218
|
+
React__default["default"].createElement("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(title)),
|
|
5219
|
+
description ? React__default["default"].createElement("span", { className: b$6('item-description') }, description) : null),
|
|
5220
|
+
React__default["default"].createElement("div", { className: b$6('item-content') }, children)));
|
|
5221
5221
|
};
|
|
5222
5222
|
function prepareTitle(string, search) {
|
|
5223
5223
|
let temp = string.slice(0);
|
|
@@ -5233,7 +5233,7 @@ function prepareTitle(string, search) {
|
|
|
5233
5233
|
if (i > 0) {
|
|
5234
5234
|
title.push(temp.slice(0, i));
|
|
5235
5235
|
}
|
|
5236
|
-
title.push(React__default["default"].createElement("strong", { key: key++, className: b('found') }, m));
|
|
5236
|
+
title.push(React__default["default"].createElement("strong", { key: key++, className: b$6('found') }, m));
|
|
5237
5237
|
temp = temp.slice(i + m.length);
|
|
5238
5238
|
}
|
|
5239
5239
|
}
|
|
@@ -5243,12 +5243,260 @@ function prepareTitle(string, search) {
|
|
|
5243
5243
|
return title;
|
|
5244
5244
|
}
|
|
5245
5245
|
|
|
5246
|
+
const useForwardRef = (ref, initialValue = null) => {
|
|
5247
|
+
const targetRef = React__default["default"].useRef(initialValue);
|
|
5248
|
+
React__default["default"].useEffect(() => {
|
|
5249
|
+
if (!ref)
|
|
5250
|
+
return;
|
|
5251
|
+
if (typeof ref === 'function') {
|
|
5252
|
+
ref(targetRef.current);
|
|
5253
|
+
}
|
|
5254
|
+
else {
|
|
5255
|
+
ref.current = targetRef.current;
|
|
5256
|
+
}
|
|
5257
|
+
}, [ref]);
|
|
5258
|
+
return targetRef;
|
|
5259
|
+
};
|
|
5260
|
+
|
|
5261
|
+
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}";
|
|
5262
|
+
styleInject(css_248z$5);
|
|
5263
|
+
|
|
5264
|
+
const b$5 = block('mobile-header-burger');
|
|
5265
|
+
const Burger = React__default["default"].memo(({ opened, className, onClick }) => (React__default["default"].createElement("button", { className: b$5({ opened }, className), onClick: onClick, "aria-label": opened ? defaultDict$2['button_close-burger'] : defaultDict$2['button_open-burger'] },
|
|
5266
|
+
React__default["default"].createElement("span", { className: b$5('icon') },
|
|
5267
|
+
React__default["default"].createElement("span", { className: b$5('icon-dash') })))));
|
|
5268
|
+
Burger.displayName = 'Burger';
|
|
5269
|
+
|
|
5270
|
+
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}";
|
|
5271
|
+
styleInject(css_248z$4);
|
|
5272
|
+
|
|
5273
|
+
const b$4 = block('mobile-header-logo');
|
|
5274
|
+
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 32, textSize = 20, href = '/', wrapper, onClick, }) => {
|
|
5275
|
+
const hasClickHandler = typeof onClick === 'function';
|
|
5276
|
+
const hasWrapper = typeof wrapper === 'function';
|
|
5277
|
+
const linkProps = hasClickHandler
|
|
5278
|
+
? {}
|
|
5279
|
+
: {
|
|
5280
|
+
target: '_self',
|
|
5281
|
+
href,
|
|
5282
|
+
};
|
|
5283
|
+
let logoIcon;
|
|
5284
|
+
if (iconSrc) {
|
|
5285
|
+
logoIcon = (React__default["default"].createElement("img", { alt: "logo icon", src: iconSrc, width: iconSize, height: iconSize, className: iconClassName }));
|
|
5286
|
+
}
|
|
5287
|
+
else if (icon) {
|
|
5288
|
+
logoIcon = React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$4('icon', iconClassName) });
|
|
5289
|
+
}
|
|
5290
|
+
let logoTitle;
|
|
5291
|
+
if (typeof text === 'function') {
|
|
5292
|
+
logoTitle = text();
|
|
5293
|
+
}
|
|
5294
|
+
else {
|
|
5295
|
+
logoTitle = (React__default["default"].createElement("span", { className: b$4('title'), style: { fontSize: textSize } }, text));
|
|
5296
|
+
}
|
|
5297
|
+
const logo = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
5298
|
+
logoIcon,
|
|
5299
|
+
logoTitle));
|
|
5300
|
+
return hasWrapper ? (React__default["default"].createElement("div", { className: b$4(), onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$4(), onClick: onClick }), logo));
|
|
5301
|
+
};
|
|
5302
|
+
|
|
5303
|
+
const MOBILE_ITEM_HEIGHT = 48;
|
|
5304
|
+
const MOBILE_HEADER_COMPACT_HEIGHT = 50;
|
|
5305
|
+
const MOBILE_HEADER_EXPANDED_HEIGHT = 120;
|
|
5306
|
+
const MOBILE_HEADER_ICON_SIZE = 20;
|
|
5307
|
+
const EVENT_NAMES = {
|
|
5308
|
+
toggleEvent: 'MOBILE_PANEL_TOGGLE',
|
|
5309
|
+
closeEvent: 'MOBILE_PANEL_CLOSE',
|
|
5310
|
+
openEvent: 'MOBILE_PANEL_OPEN',
|
|
5311
|
+
};
|
|
5312
|
+
const BURGER_PANEL_ITEM_ID = 'burger';
|
|
5313
|
+
|
|
5314
|
+
const getItemHeight = (item) => {
|
|
5315
|
+
switch (item.type) {
|
|
5316
|
+
case 'divider':
|
|
5317
|
+
return 1;
|
|
5318
|
+
default:
|
|
5319
|
+
return MOBILE_ITEM_HEIGHT;
|
|
5320
|
+
}
|
|
5321
|
+
};
|
|
5322
|
+
const getSelectedItemIndex = (items) => {
|
|
5323
|
+
const index = items.findIndex(({ current }) => Boolean(current));
|
|
5324
|
+
return index === -1 ? undefined : index;
|
|
5325
|
+
};
|
|
5326
|
+
|
|
5327
|
+
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}";
|
|
5328
|
+
styleInject(css_248z$3);
|
|
5329
|
+
|
|
5330
|
+
const b$3 = block('burger-composite-bar');
|
|
5331
|
+
const Item = ({ item, onItemClick }) => {
|
|
5332
|
+
const { icon, type = 'regular', iconSize = MOBILE_HEADER_ICON_SIZE } = item;
|
|
5333
|
+
if (type === 'divider') {
|
|
5334
|
+
return React__default["default"].createElement("div", { className: b$3('menu-divider') });
|
|
5335
|
+
}
|
|
5336
|
+
const node = (React__default["default"].createElement("div", { className: b$3('item', { type }), onClick: () => {
|
|
5337
|
+
if (typeof item.onItemClick === 'function') {
|
|
5338
|
+
item.onItemClick(item);
|
|
5339
|
+
}
|
|
5340
|
+
if (type === 'regular') {
|
|
5341
|
+
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
|
|
5342
|
+
}
|
|
5343
|
+
} },
|
|
5344
|
+
React__default["default"].createElement("div", { className: b$3('item-icon-place') }, icon && React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$3('item-icon') })),
|
|
5345
|
+
React__default["default"].createElement("div", { className: b$3('item-title') }, item.title)));
|
|
5346
|
+
if (typeof item.itemWrapper === 'function') {
|
|
5347
|
+
return item.itemWrapper(node, item);
|
|
5348
|
+
}
|
|
5349
|
+
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$3('link') }, node)) : (node);
|
|
5350
|
+
};
|
|
5351
|
+
Item.displayName = 'Item';
|
|
5352
|
+
const BurgerCompositeBar = React__default["default"].memo(({ items, onItemClick }) => {
|
|
5353
|
+
return (React__default["default"].createElement("nav", { className: b$3() },
|
|
5354
|
+
React__default["default"].createElement(uikit.List, { items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$3('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item) => React__default["default"].createElement(Item, { item: item, onItemClick: onItemClick }) })));
|
|
5355
|
+
});
|
|
5356
|
+
BurgerCompositeBar.displayName = 'BurgerCompositeBar';
|
|
5357
|
+
|
|
5358
|
+
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}";
|
|
5359
|
+
styleInject(css_248z$2);
|
|
5360
|
+
|
|
5361
|
+
const b$2 = block('mobile-header-burger-menu');
|
|
5362
|
+
const BurgerMenu = React__default["default"].memo(({ items = [], renderFooter, modalItem, className, onItemClick }) => {
|
|
5363
|
+
var _a;
|
|
5364
|
+
return (React__default["default"].createElement("div", { className: b$2(null, className) },
|
|
5365
|
+
modalItem && (React__default["default"].createElement(uikit.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))),
|
|
5366
|
+
React__default["default"].createElement(BurgerCompositeBar, { items: items, onItemClick: onItemClick }),
|
|
5367
|
+
renderFooter && React__default["default"].createElement("div", { className: b$2('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter())));
|
|
5368
|
+
});
|
|
5369
|
+
BurgerMenu.displayName = 'BurgerMenu';
|
|
5370
|
+
|
|
5371
|
+
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}";
|
|
5372
|
+
styleInject(css_248z$1);
|
|
5373
|
+
|
|
5374
|
+
const b$1 = block('mobile-header');
|
|
5375
|
+
const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, }, ref) => {
|
|
5376
|
+
const targetRef = useForwardRef(ref);
|
|
5377
|
+
const [compact] = React.useState(true);
|
|
5378
|
+
const [visiblePanel, setVisiblePanel] = React.useState(null);
|
|
5379
|
+
// for expand top panel cases (i.e. switch service panel). Will be removed if not used in future design
|
|
5380
|
+
const size = compact ? MOBILE_HEADER_COMPACT_HEIGHT : MOBILE_HEADER_EXPANDED_HEIGHT;
|
|
5381
|
+
const onPanelToggle = React.useCallback((name) => {
|
|
5382
|
+
if (!name)
|
|
5383
|
+
return;
|
|
5384
|
+
setVisiblePanel((prev) => {
|
|
5385
|
+
const panelOpen = prev === name;
|
|
5386
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, panelOpen ? EVENT_NAMES.closeEvent : EVENT_NAMES.openEvent);
|
|
5387
|
+
return panelOpen ? null : name;
|
|
5388
|
+
});
|
|
5389
|
+
}, [visiblePanel, onEvent]);
|
|
5390
|
+
const onMobilePanelToggle = React.useCallback(({ detail }) => {
|
|
5391
|
+
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5392
|
+
onPanelToggle(detail === null || detail === void 0 ? void 0 : detail.panelName);
|
|
5393
|
+
}
|
|
5394
|
+
}, [onEvent]);
|
|
5395
|
+
const onMobilePanelOpen = React.useCallback(({ detail }) => {
|
|
5396
|
+
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5397
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(detail === null || detail === void 0 ? void 0 : detail.panelName, EVENT_NAMES.openEvent);
|
|
5398
|
+
setVisiblePanel(detail === null || detail === void 0 ? void 0 : detail.panelName);
|
|
5399
|
+
}
|
|
5400
|
+
}, [onEvent]);
|
|
5401
|
+
const onMobilePanelClose = React.useCallback(({ detail }) => {
|
|
5402
|
+
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5403
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(detail === null || detail === void 0 ? void 0 : detail.panelName, EVENT_NAMES.closeEvent);
|
|
5404
|
+
setVisiblePanel(null);
|
|
5405
|
+
}
|
|
5406
|
+
}, [onEvent]);
|
|
5407
|
+
const onBurgerOpen = React.useCallback(() => {
|
|
5408
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(BURGER_PANEL_ITEM_ID, EVENT_NAMES.openEvent);
|
|
5409
|
+
setVisiblePanel(BURGER_PANEL_ITEM_ID);
|
|
5410
|
+
}, [onEvent]);
|
|
5411
|
+
const onBurgerClose = React.useCallback(() => {
|
|
5412
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(BURGER_PANEL_ITEM_ID, EVENT_NAMES.closeEvent);
|
|
5413
|
+
setVisiblePanel(null);
|
|
5414
|
+
}, [onEvent]);
|
|
5415
|
+
const onCloseDrawer = React.useCallback(() => {
|
|
5416
|
+
if (visiblePanel) {
|
|
5417
|
+
onEvent === null || onEvent === void 0 ? void 0 : onEvent(visiblePanel, EVENT_NAMES.closeEvent);
|
|
5418
|
+
}
|
|
5419
|
+
setVisiblePanel(null);
|
|
5420
|
+
}, [visiblePanel, onEvent]);
|
|
5421
|
+
const onBurgerMenuItemClick = React.useCallback((item) => {
|
|
5422
|
+
var _a;
|
|
5423
|
+
const closeMenuOnClick = (_a = item.closeMenuOnClick) !== null && _a !== void 0 ? _a : true;
|
|
5424
|
+
if (closeMenuOnClick) {
|
|
5425
|
+
onBurgerClose();
|
|
5426
|
+
}
|
|
5427
|
+
}, [onBurgerClose]);
|
|
5428
|
+
const renderBurgerMenuFooter = React.useCallback(() => {
|
|
5429
|
+
var _a;
|
|
5430
|
+
return (_a = burgerMenu.renderFooter) === null || _a === void 0 ? void 0 : _a.call(burgerMenu, {
|
|
5431
|
+
size,
|
|
5432
|
+
isCompact: compact,
|
|
5433
|
+
});
|
|
5434
|
+
}, [burgerMenu.renderFooter, size, compact]);
|
|
5435
|
+
const onLogoClick = React.useCallback((event) => {
|
|
5436
|
+
var _a;
|
|
5437
|
+
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
5438
|
+
(_a = logo.onClick) === null || _a === void 0 ? void 0 : _a.call(logo, event);
|
|
5439
|
+
}, [logo.onClick, onClosePanel]);
|
|
5440
|
+
const burgerPanelItem = React.useMemo(() => ({
|
|
5441
|
+
id: BURGER_PANEL_ITEM_ID,
|
|
5442
|
+
content: (React__default["default"].createElement(BurgerMenu, { items: burgerMenu.items, modalItem: burgerMenu.modalItem, renderFooter: renderBurgerMenuFooter, onItemClick: onBurgerMenuItemClick, className: b$1('burger-menu') })),
|
|
5443
|
+
}), [burgerMenu]);
|
|
5444
|
+
React.useEffect(() => {
|
|
5445
|
+
const node = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
|
|
5446
|
+
if (node) {
|
|
5447
|
+
node.addEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);
|
|
5448
|
+
node.addEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);
|
|
5449
|
+
node.addEventListener('MOBILE_PANEL_TOGGLE', onMobilePanelToggle);
|
|
5450
|
+
node.addEventListener('MOBILE_PANEL_OPEN', onMobilePanelOpen);
|
|
5451
|
+
node.addEventListener('MOBILE_PANEL_CLOSE', onMobilePanelClose);
|
|
5452
|
+
}
|
|
5453
|
+
return () => {
|
|
5454
|
+
if (node) {
|
|
5455
|
+
node.removeEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);
|
|
5456
|
+
node.removeEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);
|
|
5457
|
+
node.removeEventListener('MOBILE_PANEL_TOGGLE', onMobilePanelToggle);
|
|
5458
|
+
node.removeEventListener('MOBILE_PANEL_OPEN', onMobilePanelOpen);
|
|
5459
|
+
node.removeEventListener('MOBILE_PANEL_CLOSE', onMobilePanelClose);
|
|
5460
|
+
}
|
|
5461
|
+
};
|
|
5462
|
+
}, [targetRef, onBurgerClose, onBurgerOpen]);
|
|
5463
|
+
return (React__default["default"].createElement("div", { className: b$1({ compact }, className), ref: targetRef },
|
|
5464
|
+
React__default["default"].createElement("header", { className: b$1('header'), style: { height: size } },
|
|
5465
|
+
React__default["default"].createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger') }),
|
|
5466
|
+
React__default["default"].createElement(Logo, Object.assign({}, logo, { compact: compact, onClick: onLogoClick })),
|
|
5467
|
+
React__default["default"].createElement("div", { className: b$1('side-item') }, sideItemRenderContent === null || sideItemRenderContent === void 0 ? void 0 : sideItemRenderContent({ size }))),
|
|
5468
|
+
React__default["default"].createElement(Drawer, { className: b$1('panels'), onVeilClick: onCloseDrawer, onEscape: onCloseDrawer, style: { top: size } }, [burgerPanelItem, ...panelItems].map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({}, item, { key: item.id, visible: visiblePanel === item.id, className: b$1('panel-item', item.className) }))))),
|
|
5469
|
+
React__default["default"].createElement(Content, { size: size, renderContent: renderContent, className: b$1('content'), cssSizeVariableName: "--mobile-header-size" })));
|
|
5470
|
+
});
|
|
5471
|
+
MobileHeader.displayName = 'MobileHeader';
|
|
5472
|
+
|
|
5473
|
+
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}";
|
|
5474
|
+
styleInject(css_248z);
|
|
5475
|
+
|
|
5476
|
+
const b = block('mobile-header-footer-item');
|
|
5477
|
+
const FooterItem = ({ icon, iconSize = MOBILE_HEADER_ICON_SIZE, className, modalItem = { visible: false }, onClick, }) => {
|
|
5478
|
+
var _a;
|
|
5479
|
+
const handleClick = React__default["default"].useCallback((event) => {
|
|
5480
|
+
uikit.eventBroker.publish({
|
|
5481
|
+
componentId: 'MobileHeaderFooterItem',
|
|
5482
|
+
eventId: 'click',
|
|
5483
|
+
domEvent: event,
|
|
5484
|
+
});
|
|
5485
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
5486
|
+
}, [onClick]);
|
|
5487
|
+
return (React__default["default"].createElement("div", { className: b() },
|
|
5488
|
+
React__default["default"].createElement("button", { className: b('button', className), onClick: handleClick }, icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b('icon') }) : null),
|
|
5489
|
+
React__default["default"].createElement(uikit.Sheet, { id: modalItem.id, title: modalItem.title, visible: modalItem.visible, className: b('modal', modalItem.className), contentClassName: b('modal-content', modalItem.contentClassName), allowHideOnContentScroll: modalItem.modalAllowHideOnContentScroll, onClose: modalItem.onClose }, (_a = modalItem.renderContent) === null || _a === void 0 ? void 0 : _a.call(modalItem))));
|
|
5490
|
+
};
|
|
5491
|
+
|
|
5246
5492
|
exports.ActionBar = PublicActionBar;
|
|
5247
5493
|
exports.AsideHeader = AsideHeader;
|
|
5248
5494
|
exports.Drawer = Drawer;
|
|
5249
5495
|
exports.DrawerItem = DrawerItem;
|
|
5250
|
-
exports.FooterItem = FooterItem;
|
|
5496
|
+
exports.FooterItem = FooterItem$1;
|
|
5251
5497
|
exports.HotkeysPanel = HotkeysPanel;
|
|
5498
|
+
exports.MobileHeader = MobileHeader;
|
|
5499
|
+
exports.MobileHeaderFooterItem = FooterItem;
|
|
5252
5500
|
exports.Settings = Settings;
|
|
5253
5501
|
exports.Title = Title;
|
|
5254
5502
|
//# sourceMappingURL=index.js.map
|