@gravity-ui/navigation 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/build/cjs/components/CompositeBar/Item/Item.d.ts +1 -0
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.d.ts +18 -0
- package/build/cjs/components/HotkeysPanel/__stories__/HotkeysPanel.stories.d.ts +4 -0
- package/build/cjs/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.d.ts +3 -0
- package/build/cjs/components/HotkeysPanel/__stories__/moc.d.ts +2 -0
- package/build/cjs/components/HotkeysPanel/index.d.ts +2 -0
- package/build/cjs/components/HotkeysPanel/types.d.ts +13 -0
- package/build/cjs/components/HotkeysPanel/utils/filterHotkeys.d.ts +2 -0
- package/build/cjs/components/HotkeysPanel/utils/flattenHotkeyGroups.d.ts +2 -0
- package/build/cjs/components/MobileHeader/BurgerMenu/BurgerMenu.d.ts +1 -1
- package/build/cjs/components/MobileHeader/FooterItem/FooterItem.d.ts +1 -1
- package/build/cjs/components/index.d.ts +1 -0
- package/build/cjs/index.js +140 -113
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/CompositeBar/Item/Item.d.ts +1 -0
- package/build/esm/components/HotkeysPanel/HotkeysPanel.d.ts +18 -0
- package/build/esm/components/HotkeysPanel/__stories__/HotkeysPanel.stories.d.ts +4 -0
- package/build/esm/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.d.ts +3 -0
- package/build/esm/components/HotkeysPanel/__stories__/moc.d.ts +2 -0
- package/build/esm/components/HotkeysPanel/index.d.ts +2 -0
- package/build/esm/components/HotkeysPanel/types.d.ts +13 -0
- package/build/esm/components/HotkeysPanel/utils/filterHotkeys.d.ts +2 -0
- package/build/esm/components/HotkeysPanel/utils/flattenHotkeyGroups.d.ts +2 -0
- package/build/esm/components/MobileHeader/BurgerMenu/BurgerMenu.d.ts +1 -1
- package/build/esm/components/MobileHeader/FooterItem/FooterItem.d.ts +1 -1
- package/build/esm/components/index.d.ts +1 -0
- package/build/esm/index.js +142 -116
- package/build/esm/index.js.map +1 -1
- package/package.json +1 -1
package/build/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent } from 'react';
|
|
3
|
-
import { Button, Icon, Popup, List, Tooltip, TextInput, Tabs, Loader } from '@gravity-ui/uikit';
|
|
2
|
+
import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent, useState, useMemo, useCallback } from 'react';
|
|
3
|
+
import { useBodyScrollLock, Button, Icon, Popup, List, Tooltip, Hotkey, TextInput, Tabs, Loader } from '@gravity-ui/uikit';
|
|
4
4
|
import ReactDOM from 'react-dom';
|
|
5
5
|
|
|
6
6
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -87,48 +87,48 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
styleInject(css_248z$
|
|
90
|
+
var css_248z$e = ".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}";
|
|
91
|
+
styleInject(css_248z$e);
|
|
92
92
|
|
|
93
|
-
const b$
|
|
93
|
+
const b$f = block('action-bar-group');
|
|
94
94
|
const ActionBarGroup = ({ children, className, pull }) => {
|
|
95
|
-
return (React__default.createElement("ul", { className: b$
|
|
95
|
+
return (React__default.createElement("ul", { className: b$f({ pull }, className), role: "group" }, children));
|
|
96
96
|
};
|
|
97
97
|
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
98
98
|
|
|
99
|
-
var css_248z$
|
|
100
|
-
styleInject(css_248z$
|
|
99
|
+
var css_248z$d = ".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}";
|
|
100
|
+
styleInject(css_248z$d);
|
|
101
101
|
|
|
102
|
-
const b$
|
|
102
|
+
const b$e = block('action-bar-item');
|
|
103
103
|
const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
104
|
-
return React__default.createElement("li", { className: b$
|
|
104
|
+
return React__default.createElement("li", { className: b$e({ pull, spacing }, className) }, children);
|
|
105
105
|
};
|
|
106
106
|
ActionBarItem.displayName = 'ActionBar.Item';
|
|
107
107
|
|
|
108
|
-
var css_248z$
|
|
109
|
-
styleInject(css_248z$
|
|
108
|
+
var css_248z$c = ".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}";
|
|
109
|
+
styleInject(css_248z$c);
|
|
110
110
|
|
|
111
|
-
const b$
|
|
111
|
+
const b$d = block('action-bar-section');
|
|
112
112
|
const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
113
|
-
return React__default.createElement("div", { className: b$
|
|
113
|
+
return React__default.createElement("div", { className: b$d({ type }) }, children);
|
|
114
114
|
};
|
|
115
115
|
ActionBarSection.displayName = 'ActionBar.Section';
|
|
116
116
|
|
|
117
|
-
var css_248z$
|
|
118
|
-
styleInject(css_248z$
|
|
117
|
+
var css_248z$b = ".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}";
|
|
118
|
+
styleInject(css_248z$b);
|
|
119
119
|
|
|
120
|
-
const b$
|
|
120
|
+
const b$c = block('action-bar-separator');
|
|
121
121
|
const ActionBarSeparator = () => {
|
|
122
|
-
return React__default.createElement("li", { role: "separator", className: b$
|
|
122
|
+
return React__default.createElement("li", { role: "separator", className: b$c() });
|
|
123
123
|
};
|
|
124
124
|
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
125
125
|
|
|
126
|
-
var css_248z$
|
|
127
|
-
styleInject(css_248z$
|
|
126
|
+
var css_248z$a = ".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}";
|
|
127
|
+
styleInject(css_248z$a);
|
|
128
128
|
|
|
129
|
-
const b$
|
|
129
|
+
const b$b = block('action-bar');
|
|
130
130
|
const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
|
|
131
|
-
return (React__default.createElement("section", { className: b$
|
|
131
|
+
return (React__default.createElement("section", { className: b$b(null, className), "aria-label": ariaLabel }, children));
|
|
132
132
|
};
|
|
133
133
|
ActionBar.displayName = 'ActionBar';
|
|
134
134
|
const PublicActionBar = Object.assign(ActionBar, {
|
|
@@ -3180,15 +3180,15 @@ SwitchTransition.defaultProps = {
|
|
|
3180
3180
|
mode: modes.out
|
|
3181
3181
|
};
|
|
3182
3182
|
|
|
3183
|
-
var css_248z$
|
|
3184
|
-
styleInject(css_248z$
|
|
3183
|
+
var css_248z$9 = ".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}";
|
|
3184
|
+
styleInject(css_248z$9);
|
|
3185
3185
|
|
|
3186
|
-
const b$
|
|
3186
|
+
const b$a = block('drawer');
|
|
3187
3187
|
const TIMEOUT = 300;
|
|
3188
3188
|
const DrawerItem = ({ visible, content, direction, className }) => {
|
|
3189
3189
|
const itemRef = React__default.useRef(null);
|
|
3190
|
-
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3191
|
-
React__default.createElement("div", { ref: itemRef, className: b$
|
|
3190
|
+
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$a('item-transition', { direction }), nodeRef: itemRef },
|
|
3191
|
+
React__default.createElement("div", { ref: itemRef, className: b$a('item', { direction }, className) }, content)));
|
|
3192
3192
|
};
|
|
3193
3193
|
const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
|
|
3194
3194
|
let someItemVisible = false;
|
|
@@ -3214,41 +3214,14 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3214
3214
|
window.removeEventListener('keydown', onKeyDown);
|
|
3215
3215
|
};
|
|
3216
3216
|
}, [onEscape, someItemVisible]);
|
|
3217
|
-
|
|
3218
|
-
const prevPreventScrollBody = preventScrollBody;
|
|
3219
|
-
const cleanupPreventScrollBody = () => {
|
|
3220
|
-
document.body.style.paddingRight = '';
|
|
3221
|
-
document.body.style.paddingBottom = '';
|
|
3222
|
-
document.body.style.overflow = '';
|
|
3223
|
-
};
|
|
3224
|
-
const setPreventScrollBody = () => {
|
|
3225
|
-
const vw = window.innerWidth - document.documentElement.clientWidth;
|
|
3226
|
-
const hw = window.innerHeight - document.documentElement.clientHeight;
|
|
3227
|
-
document.body.style.paddingRight = vw + 'px';
|
|
3228
|
-
document.body.style.paddingBottom = hw + 'px';
|
|
3229
|
-
document.body.style.overflow = 'hidden';
|
|
3230
|
-
};
|
|
3231
|
-
if (prevPreventScrollBody) {
|
|
3232
|
-
if (someItemVisible) {
|
|
3233
|
-
setPreventScrollBody();
|
|
3234
|
-
}
|
|
3235
|
-
else {
|
|
3236
|
-
cleanupPreventScrollBody();
|
|
3237
|
-
}
|
|
3238
|
-
}
|
|
3239
|
-
return () => {
|
|
3240
|
-
if (prevPreventScrollBody) {
|
|
3241
|
-
cleanupPreventScrollBody();
|
|
3242
|
-
}
|
|
3243
|
-
};
|
|
3244
|
-
}, [someItemVisible, preventScrollBody]);
|
|
3217
|
+
useBodyScrollLock({ enabled: preventScrollBody && someItemVisible });
|
|
3245
3218
|
const containerRef = React__default.useRef(null);
|
|
3246
3219
|
const veilRef = React__default.useRef(null);
|
|
3247
3220
|
return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
|
|
3248
3221
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
3249
|
-
return (React__default.createElement("div", { ref: containerRef, className: b$
|
|
3250
|
-
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3251
|
-
React__default.createElement("div", { ref: veilRef, className: b$
|
|
3222
|
+
return (React__default.createElement("div", { ref: containerRef, className: b$a(null, className), style: style },
|
|
3223
|
+
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$a('veil-transition'), nodeRef: veilRef },
|
|
3224
|
+
React__default.createElement("div", { ref: veilRef, className: b$a('veil'), onClick: onVeilClick })),
|
|
3252
3225
|
React__default.Children.map(children, (child) => {
|
|
3253
3226
|
const childElem = child;
|
|
3254
3227
|
if (childElem.type === DrawerItem) {
|
|
@@ -3260,10 +3233,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3260
3233
|
}));
|
|
3261
3234
|
};
|
|
3262
3235
|
|
|
3263
|
-
var css_248z$
|
|
3264
|
-
styleInject(css_248z$
|
|
3236
|
+
var css_248z$8 = ".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}";
|
|
3237
|
+
styleInject(css_248z$8);
|
|
3265
3238
|
|
|
3266
|
-
const b$
|
|
3239
|
+
const b$9 = block('logo');
|
|
3267
3240
|
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3268
3241
|
const hasClickHandler = typeof onClick === 'function';
|
|
3269
3242
|
const hasWrapper = typeof wrapper === 'function';
|
|
@@ -3281,18 +3254,18 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3281
3254
|
else if (icon) {
|
|
3282
3255
|
buttonIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
3283
3256
|
}
|
|
3284
|
-
const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$
|
|
3257
|
+
const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$9('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
|
|
3285
3258
|
let logo;
|
|
3286
3259
|
if (typeof text === 'function') {
|
|
3287
3260
|
logo = text();
|
|
3288
3261
|
}
|
|
3289
3262
|
else {
|
|
3290
|
-
logo = (React__default.createElement("div", { className: b$
|
|
3263
|
+
logo = (React__default.createElement("div", { className: b$9('logo'), style: { fontSize: textSize } }, text));
|
|
3291
3264
|
}
|
|
3292
|
-
return (React__default.createElement("div", { className: b$
|
|
3293
|
-
React__default.createElement("div", { className: b$
|
|
3265
|
+
return (React__default.createElement("div", { className: b$9() },
|
|
3266
|
+
React__default.createElement("div", { className: b$9('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3294
3267
|
!compact &&
|
|
3295
|
-
(hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$
|
|
3268
|
+
(hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$9('logo-link'), onClick: onClick }), logo)))));
|
|
3296
3269
|
};
|
|
3297
3270
|
|
|
3298
3271
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -3824,25 +3797,25 @@ function getItemsMinHeight(items) {
|
|
|
3824
3797
|
(pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
|
|
3825
3798
|
}
|
|
3826
3799
|
|
|
3827
|
-
var css_248z$
|
|
3828
|
-
styleInject(css_248z$
|
|
3800
|
+
var css_248z$7 = ".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}";
|
|
3801
|
+
styleInject(css_248z$7);
|
|
3829
3802
|
|
|
3830
|
-
const b$
|
|
3803
|
+
const b$8 = block('composite-bar-item');
|
|
3831
3804
|
function renderItemTitle(item) {
|
|
3832
|
-
let titleNode = React__default.createElement("div", { className: b$
|
|
3805
|
+
let titleNode = React__default.createElement("div", { className: b$8('title-text') }, item.title);
|
|
3833
3806
|
if (item.rightAdornment) {
|
|
3834
3807
|
titleNode = (React__default.createElement(React__default.Fragment, null,
|
|
3835
3808
|
titleNode,
|
|
3836
|
-
React__default.createElement("div", { className: b$
|
|
3809
|
+
React__default.createElement("div", { className: b$8('title-adornment') }, item.rightAdornment)));
|
|
3837
3810
|
}
|
|
3838
3811
|
return titleNode;
|
|
3839
3812
|
}
|
|
3840
3813
|
const defaultPopupPlacement = ['right-end'];
|
|
3841
3814
|
const defaultPopupOffset = [-20, 8];
|
|
3842
3815
|
const Item = (props) => {
|
|
3843
|
-
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3816
|
+
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3844
3817
|
if (item.type === 'divider') {
|
|
3845
|
-
return React__default.createElement("div", { className: b$
|
|
3818
|
+
return React__default.createElement("div", { className: b$8('menu-divider') });
|
|
3846
3819
|
}
|
|
3847
3820
|
const [open, toggleOpen] = React__default.useState(false);
|
|
3848
3821
|
const ref = React__default.useRef(null);
|
|
@@ -3863,7 +3836,7 @@ const Item = (props) => {
|
|
|
3863
3836
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
3864
3837
|
}, [onClosePopup]);
|
|
3865
3838
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
3866
|
-
const createdNode = (React__default.createElement("div", { className: b$
|
|
3839
|
+
const createdNode = (React__default.createElement("div", { className: b$8({ type, current, compact }, className), ref: ref, onClick: () => {
|
|
3867
3840
|
if (collapsedItem) {
|
|
3868
3841
|
/**
|
|
3869
3842
|
* If we call onItemClick for collapsedItem then:
|
|
@@ -3884,13 +3857,13 @@ const Item = (props) => {
|
|
|
3884
3857
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3885
3858
|
}
|
|
3886
3859
|
} },
|
|
3887
|
-
React__default.createElement("div", { className: b$
|
|
3888
|
-
React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$
|
|
3889
|
-
React__default.createElement("div", { className: b$
|
|
3890
|
-
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$
|
|
3891
|
-
return item.link ? (React__default.createElement("a", { href: item.link, className: b$
|
|
3860
|
+
React__default.createElement("div", { className: b$8('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$8('icon-tooltip', { 'item-type': type }) },
|
|
3861
|
+
React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$8('btn-icon') }, iconEl))) : (iconEl)),
|
|
3862
|
+
React__default.createElement("div", { className: b$8('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3863
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$8('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3864
|
+
return item.link ? (React__default.createElement("a", { href: item.link, className: b$8('link') }, createdNode)) : (createdNode);
|
|
3892
3865
|
};
|
|
3893
|
-
const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$
|
|
3866
|
+
const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$8('icon') }) : null;
|
|
3894
3867
|
const titleNode = renderItemTitle(item);
|
|
3895
3868
|
const params = { icon: iconNode, title: titleNode };
|
|
3896
3869
|
let node;
|
|
@@ -3908,13 +3881,13 @@ const Item = (props) => {
|
|
|
3908
3881
|
Item.displayName = 'Item';
|
|
3909
3882
|
function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
3910
3883
|
return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
|
|
3911
|
-
React__default.createElement("div", { className: b$
|
|
3912
|
-
React__default.createElement(List, { itemClassName: b$
|
|
3884
|
+
React__default.createElement("div", { className: b$8('collapse-items-popup-content') },
|
|
3885
|
+
React__default.createElement(List, { itemClassName: b$8('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
|
|
3913
3886
|
const makeCollapseNode = ({ title: titleEl }) => {
|
|
3914
|
-
const res = (React__default.createElement("div", { className: b$
|
|
3887
|
+
const res = (React__default.createElement("div", { className: b$8('collapse-item'), onClick: () => {
|
|
3915
3888
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3916
3889
|
} }, titleEl));
|
|
3917
|
-
return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$
|
|
3890
|
+
return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$8('link') }, res)) : (res);
|
|
3918
3891
|
};
|
|
3919
3892
|
const titleNode = renderItemTitle(collapseItem);
|
|
3920
3893
|
const params = { title: titleNode };
|
|
@@ -3944,10 +3917,10 @@ var SvgDots = function SvgDots(props) {
|
|
|
3944
3917
|
};
|
|
3945
3918
|
var dotsIcon = SvgDots;
|
|
3946
3919
|
|
|
3947
|
-
var css_248z$
|
|
3948
|
-
styleInject(css_248z$
|
|
3920
|
+
var css_248z$6 = ".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}";
|
|
3921
|
+
styleInject(css_248z$6);
|
|
3949
3922
|
|
|
3950
|
-
const b$
|
|
3923
|
+
const b$7 = block('composite-bar');
|
|
3951
3924
|
class CompositeBar extends React__default.Component {
|
|
3952
3925
|
constructor() {
|
|
3953
3926
|
super(...arguments);
|
|
@@ -3962,10 +3935,10 @@ class CompositeBar extends React__default.Component {
|
|
|
3962
3935
|
return null;
|
|
3963
3936
|
}
|
|
3964
3937
|
if (!enableCollapsing) {
|
|
3965
|
-
return React__default.createElement("div", { className: b$
|
|
3938
|
+
return React__default.createElement("div", { className: b$7() }, this.renderMenu());
|
|
3966
3939
|
}
|
|
3967
3940
|
const minHeight = getItemsMinHeight(items);
|
|
3968
|
-
return (React__default.createElement("div", { className: b$
|
|
3941
|
+
return (React__default.createElement("div", { className: b$7({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
|
|
3969
3942
|
const style = {
|
|
3970
3943
|
width,
|
|
3971
3944
|
height,
|
|
@@ -3976,7 +3949,7 @@ class CompositeBar extends React__default.Component {
|
|
|
3976
3949
|
renderAutosizeMenu(height) {
|
|
3977
3950
|
const { compact, onItemClick } = this.props;
|
|
3978
3951
|
const { listItems, collapseItems } = this.getAutosizeListItems(height);
|
|
3979
|
-
return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex(listItems), itemHeight: getItemHeight, itemClassName: b$
|
|
3952
|
+
return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex(listItems), itemHeight: getItemHeight, itemClassName: b$7('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, { item: item, onMouseLeave: () => {
|
|
3980
3953
|
var _a;
|
|
3981
3954
|
if (compact) {
|
|
3982
3955
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -3985,7 +3958,7 @@ class CompositeBar extends React__default.Component {
|
|
|
3985
3958
|
}
|
|
3986
3959
|
renderMenu() {
|
|
3987
3960
|
const { items, onItemClick, compact } = this.props;
|
|
3988
|
-
return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$
|
|
3961
|
+
return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$7('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, { item: item, onMouseLeave: () => {
|
|
3989
3962
|
var _a;
|
|
3990
3963
|
if (compact) {
|
|
3991
3964
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -4004,6 +3977,7 @@ class CompositeBar extends React__default.Component {
|
|
|
4004
3977
|
};
|
|
4005
3978
|
}
|
|
4006
3979
|
getAutosizeListItems(height) {
|
|
3980
|
+
var _a, _b, _c;
|
|
4007
3981
|
const { items } = this.props;
|
|
4008
3982
|
const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
|
|
4009
3983
|
const regularItems = items.filter((item) => !item.afterMoreButton);
|
|
@@ -4028,7 +4002,7 @@ class CompositeBar extends React__default.Component {
|
|
|
4028
4002
|
continue;
|
|
4029
4003
|
}
|
|
4030
4004
|
if (item.type === 'divider') {
|
|
4031
|
-
if (index + 1 < listItems.length && listItems[index + 1].type === 'divider') {
|
|
4005
|
+
if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
|
|
4032
4006
|
listHeight -= getItemHeight(item);
|
|
4033
4007
|
listItems.splice(index, 1);
|
|
4034
4008
|
}
|
|
@@ -4037,8 +4011,8 @@ class CompositeBar extends React__default.Component {
|
|
|
4037
4011
|
listHeight -= getItemHeight(item);
|
|
4038
4012
|
collapseItems.unshift(...listItems.splice(index, 1));
|
|
4039
4013
|
}
|
|
4040
|
-
if (listItems[index].type === 'divider' &&
|
|
4041
|
-
(index === 0 || listItems[index - 1].type === 'divider')) {
|
|
4014
|
+
if (((_b = listItems[index]) === null || _b === void 0 ? void 0 : _b.type) === 'divider' &&
|
|
4015
|
+
(index === 0 || ((_c = listItems[index - 1]) === null || _c === void 0 ? void 0 : _c.type) === 'divider')) {
|
|
4042
4016
|
listItems.splice(index, 1);
|
|
4043
4017
|
}
|
|
4044
4018
|
return { listItems, collapseItems };
|
|
@@ -4084,10 +4058,10 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4084
4058
|
};
|
|
4085
4059
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4086
4060
|
|
|
4087
|
-
var css_248z$
|
|
4088
|
-
styleInject(css_248z$
|
|
4061
|
+
var css_248z$5 = ".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}";
|
|
4062
|
+
styleInject(css_248z$5);
|
|
4089
4063
|
|
|
4090
|
-
const b$
|
|
4064
|
+
const b$6 = block('aside-header');
|
|
4091
4065
|
class AsideHeader extends React__default.Component {
|
|
4092
4066
|
constructor() {
|
|
4093
4067
|
super(...arguments);
|
|
@@ -4095,26 +4069,26 @@ class AsideHeader extends React__default.Component {
|
|
|
4095
4069
|
this.renderFirstPane = (size) => {
|
|
4096
4070
|
const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
|
|
4097
4071
|
return (React__default.createElement(React__default.Fragment, null,
|
|
4098
|
-
React__default.createElement("div", { className: b$
|
|
4099
|
-
React__default.createElement("div", { className: b$
|
|
4100
|
-
React__default.createElement("div", { className: b$
|
|
4072
|
+
React__default.createElement("div", { className: b$6('aside'), style: { width: size } },
|
|
4073
|
+
React__default.createElement("div", { className: b$6('aside-popup-anchor'), ref: this.asideRef }),
|
|
4074
|
+
React__default.createElement("div", { className: b$6('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4101
4075
|
this.renderHeader(),
|
|
4102
|
-
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$
|
|
4076
|
+
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$6('menu-items') })),
|
|
4103
4077
|
this.renderFooter(size),
|
|
4104
4078
|
this.renderCollapseButton())),
|
|
4105
4079
|
panelItems && this.renderPanels(size)));
|
|
4106
4080
|
};
|
|
4107
4081
|
this.renderSecondPane = (size) => {
|
|
4108
|
-
return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$
|
|
4082
|
+
return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$6('content') }));
|
|
4109
4083
|
};
|
|
4110
4084
|
this.renderLogo = () => (React__default.createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4111
|
-
this.renderHeader = () => (React__default.createElement("div", { className: b$
|
|
4085
|
+
this.renderHeader = () => (React__default.createElement("div", { className: b$6('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4112
4086
|
this.renderLogo(),
|
|
4113
4087
|
React__default.createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
4114
|
-
React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$
|
|
4088
|
+
React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$6('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4115
4089
|
this.renderFooter = (size) => {
|
|
4116
4090
|
const { compact, renderFooter } = this.props;
|
|
4117
|
-
return (React__default.createElement("div", { className: b$
|
|
4091
|
+
return (React__default.createElement("div", { className: b$6('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4118
4092
|
size,
|
|
4119
4093
|
compact,
|
|
4120
4094
|
asideRef: this.asideRef,
|
|
@@ -4122,14 +4096,14 @@ class AsideHeader extends React__default.Component {
|
|
|
4122
4096
|
};
|
|
4123
4097
|
this.renderPanels = (size) => {
|
|
4124
4098
|
const { panelItems } = this.props;
|
|
4125
|
-
return (React__default.createElement(Drawer, { className: b$
|
|
4099
|
+
return (React__default.createElement(Drawer, { className: b$6('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
|
|
4126
4100
|
};
|
|
4127
4101
|
this.renderCollapseButton = () => {
|
|
4128
4102
|
var _a;
|
|
4129
4103
|
const { compact, dict } = this.props;
|
|
4130
4104
|
const typeButton = compact ? Dict.ExpandButton : Dict.CollapseButton;
|
|
4131
|
-
return (React__default.createElement(Button, { className: b$
|
|
4132
|
-
React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$
|
|
4105
|
+
return (React__default.createElement(Button, { className: b$6('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$1[typeButton] },
|
|
4106
|
+
React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$6('collapse-icon'), width: "16", height: "10" })));
|
|
4133
4107
|
};
|
|
4134
4108
|
this.onCollapseButtonClick = () => {
|
|
4135
4109
|
var _a, _b;
|
|
@@ -4153,8 +4127,8 @@ class AsideHeader extends React__default.Component {
|
|
|
4153
4127
|
render() {
|
|
4154
4128
|
const { className, compact } = this.props;
|
|
4155
4129
|
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
4156
|
-
return (React__default.createElement("div", { className: b$
|
|
4157
|
-
React__default.createElement("div", { className: b$
|
|
4130
|
+
return (React__default.createElement("div", { className: b$6({ compact }, className) },
|
|
4131
|
+
React__default.createElement("div", { className: b$6('pane-container') },
|
|
4158
4132
|
this.renderFirstPane(size),
|
|
4159
4133
|
this.renderSecondPane(size))));
|
|
4160
4134
|
}
|
|
@@ -4193,15 +4167,67 @@ function __rest(s, e) {
|
|
|
4193
4167
|
return t;
|
|
4194
4168
|
}
|
|
4195
4169
|
|
|
4196
|
-
var css_248z$
|
|
4197
|
-
styleInject(css_248z$
|
|
4170
|
+
var css_248z$4 = ".ycn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4171
|
+
styleInject(css_248z$4);
|
|
4198
4172
|
|
|
4199
|
-
const b$
|
|
4173
|
+
const b$5 = block('footer-item');
|
|
4200
4174
|
const FooterItem = (_a) => {
|
|
4201
4175
|
var { item } = _a, props = __rest(_a, ["item"]);
|
|
4202
|
-
return (React__default.createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$
|
|
4176
|
+
return (React__default.createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$5({ compact: props.compact }), onItemClick: item.onItemClick })));
|
|
4203
4177
|
};
|
|
4204
4178
|
|
|
4179
|
+
function flattenHotkeyGroups(hotkeys) {
|
|
4180
|
+
const result = [];
|
|
4181
|
+
for (const hotkeysGroup of hotkeys) {
|
|
4182
|
+
result.push({
|
|
4183
|
+
title: hotkeysGroup.title,
|
|
4184
|
+
group: true,
|
|
4185
|
+
});
|
|
4186
|
+
result.push(...hotkeysGroup.items);
|
|
4187
|
+
}
|
|
4188
|
+
return result;
|
|
4189
|
+
}
|
|
4190
|
+
|
|
4191
|
+
function filterHotkeys(hotkeys, filter) {
|
|
4192
|
+
if (filter) {
|
|
4193
|
+
const result = [];
|
|
4194
|
+
const normalizedFilter = filter.toLowerCase();
|
|
4195
|
+
for (const hotkeysBlock of hotkeys) {
|
|
4196
|
+
const filteredItems = hotkeysBlock.items.filter((item) => item.title.toLowerCase().includes(normalizedFilter));
|
|
4197
|
+
if (filteredItems.length > 0) {
|
|
4198
|
+
result.push(Object.assign(Object.assign({}, hotkeysBlock), { items: filteredItems }));
|
|
4199
|
+
}
|
|
4200
|
+
}
|
|
4201
|
+
return result;
|
|
4202
|
+
}
|
|
4203
|
+
return hotkeys;
|
|
4204
|
+
}
|
|
4205
|
+
|
|
4206
|
+
var css_248z$3 = ".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}";
|
|
4207
|
+
styleInject(css_248z$3);
|
|
4208
|
+
|
|
4209
|
+
const b$4 = block('hotkeys-panel');
|
|
4210
|
+
function HotkeysPanel(_a) {
|
|
4211
|
+
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"]);
|
|
4212
|
+
const [filter, setFilter] = useState('');
|
|
4213
|
+
const hotkeysList = useMemo(() => {
|
|
4214
|
+
const filteredHotkeys = filterHotkeys(hotkeys, filter);
|
|
4215
|
+
return flattenHotkeyGroups(filteredHotkeys);
|
|
4216
|
+
}, [hotkeys, filter]);
|
|
4217
|
+
const renderItem = useCallback((item) => (React__default.createElement("div", { className: b$4('item-content', { group: item.group }), key: item.title },
|
|
4218
|
+
item.title,
|
|
4219
|
+
item.value && React__default.createElement(Hotkey, { className: b$4('hotkey'), value: item.value }))), []);
|
|
4220
|
+
const drawerItemContent = (React__default.createElement(React__default.Fragment, null,
|
|
4221
|
+
React__default.createElement("h2", { className: b$4('title') }, title),
|
|
4222
|
+
React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$4('search') }),
|
|
4223
|
+
React__default.createElement(List, Object.assign({ className: b$4('list'), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$4('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
|
|
4224
|
+
return (React__default.createElement(Drawer, { className: b$4(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
|
|
4225
|
+
left: leftOffset,
|
|
4226
|
+
top: topOffset,
|
|
4227
|
+
} },
|
|
4228
|
+
React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$4('drawer-item'), content: drawerItemContent })));
|
|
4229
|
+
}
|
|
4230
|
+
|
|
4205
4231
|
/**
|
|
4206
4232
|
* This method returns the first argument it receives.
|
|
4207
4233
|
*
|
|
@@ -5027,7 +5053,7 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5027
5053
|
return { items, hidden };
|
|
5028
5054
|
}
|
|
5029
5055
|
|
|
5030
|
-
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(
|
|
5056
|
+
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 padding: 20px 20px;\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: 12px 20px 16px;\n}\n.ycn-settings__page {\n padding: 20px;\n overflow-y: auto;\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}";
|
|
5031
5057
|
styleInject(css_248z);
|
|
5032
5058
|
|
|
5033
5059
|
const b = block('settings');
|
|
@@ -5156,5 +5182,5 @@ function prepareTitle(string, search) {
|
|
|
5156
5182
|
return title;
|
|
5157
5183
|
}
|
|
5158
5184
|
|
|
5159
|
-
export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem, MobileHeaderDict, Settings };
|
|
5185
|
+
export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem, HotkeysPanel, MobileHeaderDict, Settings };
|
|
5160
5186
|
//# sourceMappingURL=index.js.map
|