@gravity-ui/navigation 0.6.1 → 0.8.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/Settings/Settings.d.ts +1 -0
- package/build/cjs/components/Settings/__stories__/SettingsDemo.d.ts +2 -1
- package/build/cjs/components/Settings/__stories__/SettingsMobileDemo.d.ts +2 -2
- package/build/cjs/components/Settings/collect-settings.d.ts +1 -1
- package/build/cjs/components/Title/Title.d.ts +12 -0
- package/build/cjs/components/Title/index.d.ts +1 -0
- package/build/cjs/components/index.d.ts +2 -0
- package/build/cjs/index.js +185 -123
- 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/Settings/Settings.d.ts +1 -0
- package/build/esm/components/Settings/__stories__/SettingsDemo.d.ts +2 -1
- package/build/esm/components/Settings/__stories__/SettingsMobileDemo.d.ts +2 -2
- package/build/esm/components/Settings/collect-settings.d.ts +1 -1
- package/build/esm/components/Title/Title.d.ts +12 -0
- package/build/esm/components/Title/index.d.ts +1 -0
- package/build/esm/components/index.d.ts +2 -0
- package/build/esm/index.js +186 -126
- package/build/esm/index.js.map +1 -1
- package/package.json +3 -1
package/build/cjs/index.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var uikit = require('@gravity-ui/uikit');
|
|
7
7
|
var ReactDOM = require('react-dom');
|
|
8
|
+
var icons = require('@gravity-ui/icons');
|
|
8
9
|
|
|
9
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
11
|
|
|
@@ -114,48 +115,48 @@ function styleInject(css, ref) {
|
|
|
114
115
|
}
|
|
115
116
|
}
|
|
116
117
|
|
|
117
|
-
var css_248z$
|
|
118
|
-
styleInject(css_248z$
|
|
118
|
+
var css_248z$f = ".ycn-action-bar-group {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n margin-left: auto;\n margin-right: auto;\n}";
|
|
119
|
+
styleInject(css_248z$f);
|
|
119
120
|
|
|
120
|
-
const b$
|
|
121
|
+
const b$g = block('action-bar-group');
|
|
121
122
|
const ActionBarGroup = ({ children, className, pull }) => {
|
|
122
|
-
return (React__default["default"].createElement("ul", { className: b$
|
|
123
|
+
return (React__default["default"].createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
|
|
123
124
|
};
|
|
124
125
|
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
125
126
|
|
|
126
|
-
var css_248z$
|
|
127
|
-
styleInject(css_248z$
|
|
127
|
+
var css_248z$e = ".ycn-action-bar-item {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n margin-left: auto;\n margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n margin-left: 8px;\n}";
|
|
128
|
+
styleInject(css_248z$e);
|
|
128
129
|
|
|
129
|
-
const b$
|
|
130
|
+
const b$f = block('action-bar-item');
|
|
130
131
|
const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
131
|
-
return React__default["default"].createElement("li", { className: b$
|
|
132
|
+
return React__default["default"].createElement("li", { className: b$f({ pull, spacing }, className) }, children);
|
|
132
133
|
};
|
|
133
134
|
ActionBarItem.displayName = 'ActionBar.Item';
|
|
134
135
|
|
|
135
|
-
var css_248z$
|
|
136
|
-
styleInject(css_248z$
|
|
136
|
+
var css_248z$d = ".ycn-action-bar-section {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n border-left: solid 1px var(--yc-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n flex: 1 1 auto;\n padding-left: 20px;\n padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n padding-left: 6px;\n padding-right: 6px;\n}";
|
|
137
|
+
styleInject(css_248z$d);
|
|
137
138
|
|
|
138
|
-
const b$
|
|
139
|
+
const b$e = block('action-bar-section');
|
|
139
140
|
const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
140
|
-
return React__default["default"].createElement("div", { className: b$
|
|
141
|
+
return React__default["default"].createElement("div", { className: b$e({ type }) }, children);
|
|
141
142
|
};
|
|
142
143
|
ActionBarSection.displayName = 'ActionBar.Section';
|
|
143
144
|
|
|
144
|
-
var css_248z$
|
|
145
|
-
styleInject(css_248z$
|
|
145
|
+
var css_248z$c = ".ycn-action-bar-separator {\n list-style: none;\n margin: 0;\n padding: 0;\n margin-left: 6px;\n margin-right: 6px;\n border-right: solid 1px var(--yc-color-line-generic);\n height: 40px;\n}";
|
|
146
|
+
styleInject(css_248z$c);
|
|
146
147
|
|
|
147
|
-
const b$
|
|
148
|
+
const b$d = block('action-bar-separator');
|
|
148
149
|
const ActionBarSeparator = () => {
|
|
149
|
-
return React__default["default"].createElement("li", { role: "separator", className: b$
|
|
150
|
+
return React__default["default"].createElement("li", { role: "separator", className: b$d() });
|
|
150
151
|
};
|
|
151
152
|
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
152
153
|
|
|
153
|
-
var css_248z$
|
|
154
|
-
styleInject(css_248z$
|
|
154
|
+
var css_248z$b = ".ycn-action-bar {\n box-sizing: border-box;\n height: 40px;\n border-bottom: solid 1px var(--yc-color-line-generic);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}";
|
|
155
|
+
styleInject(css_248z$b);
|
|
155
156
|
|
|
156
|
-
const b$
|
|
157
|
+
const b$c = block('action-bar');
|
|
157
158
|
const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
|
|
158
|
-
return (React__default["default"].createElement("section", { className: b$
|
|
159
|
+
return (React__default["default"].createElement("section", { className: b$c(null, className), "aria-label": ariaLabel }, children));
|
|
159
160
|
};
|
|
160
161
|
ActionBar.displayName = 'ActionBar';
|
|
161
162
|
const PublicActionBar = Object.assign(ActionBar, {
|
|
@@ -180,7 +181,7 @@ exports.Dict = void 0;
|
|
|
180
181
|
const ASIDE_HEADER_FOOTER_ICON_SIZE = 20;
|
|
181
182
|
const ASIDE_HEADER_COMPACT_WIDTH = 56;
|
|
182
183
|
const ASIDE_HEADER_EXPANDED_WIDTH = 236;
|
|
183
|
-
const defaultDict$
|
|
184
|
+
const defaultDict$2 = {
|
|
184
185
|
[exports.Dict.CollapseButton]: 'Collapse',
|
|
185
186
|
[exports.Dict.ExpandButton]: 'Expand',
|
|
186
187
|
[exports.Dict.MoreButton]: 'More',
|
|
@@ -3207,15 +3208,15 @@ SwitchTransition.defaultProps = {
|
|
|
3207
3208
|
mode: modes.out
|
|
3208
3209
|
};
|
|
3209
3210
|
|
|
3210
|
-
var css_248z$
|
|
3211
|
-
styleInject(css_248z$
|
|
3211
|
+
var css_248z$a = ".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$a);
|
|
3212
3213
|
|
|
3213
|
-
const b$
|
|
3214
|
+
const b$b = block('drawer');
|
|
3214
3215
|
const TIMEOUT = 300;
|
|
3215
3216
|
const DrawerItem = ({ visible, content, direction, className }) => {
|
|
3216
3217
|
const itemRef = React__default["default"].useRef(null);
|
|
3217
|
-
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3218
|
-
React__default["default"].createElement("div", { ref: itemRef, className: b$
|
|
3218
|
+
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$b('item-transition', { direction }), nodeRef: itemRef },
|
|
3219
|
+
React__default["default"].createElement("div", { ref: itemRef, className: b$b('item', { direction }, className) }, content)));
|
|
3219
3220
|
};
|
|
3220
3221
|
const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
|
|
3221
3222
|
let someItemVisible = false;
|
|
@@ -3241,41 +3242,14 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3241
3242
|
window.removeEventListener('keydown', onKeyDown);
|
|
3242
3243
|
};
|
|
3243
3244
|
}, [onEscape, someItemVisible]);
|
|
3244
|
-
|
|
3245
|
-
const prevPreventScrollBody = preventScrollBody;
|
|
3246
|
-
const cleanupPreventScrollBody = () => {
|
|
3247
|
-
document.body.style.paddingRight = '';
|
|
3248
|
-
document.body.style.paddingBottom = '';
|
|
3249
|
-
document.body.style.overflow = '';
|
|
3250
|
-
};
|
|
3251
|
-
const setPreventScrollBody = () => {
|
|
3252
|
-
const vw = window.innerWidth - document.documentElement.clientWidth;
|
|
3253
|
-
const hw = window.innerHeight - document.documentElement.clientHeight;
|
|
3254
|
-
document.body.style.paddingRight = vw + 'px';
|
|
3255
|
-
document.body.style.paddingBottom = hw + 'px';
|
|
3256
|
-
document.body.style.overflow = 'hidden';
|
|
3257
|
-
};
|
|
3258
|
-
if (prevPreventScrollBody) {
|
|
3259
|
-
if (someItemVisible) {
|
|
3260
|
-
setPreventScrollBody();
|
|
3261
|
-
}
|
|
3262
|
-
else {
|
|
3263
|
-
cleanupPreventScrollBody();
|
|
3264
|
-
}
|
|
3265
|
-
}
|
|
3266
|
-
return () => {
|
|
3267
|
-
if (prevPreventScrollBody) {
|
|
3268
|
-
cleanupPreventScrollBody();
|
|
3269
|
-
}
|
|
3270
|
-
};
|
|
3271
|
-
}, [someItemVisible, preventScrollBody]);
|
|
3245
|
+
uikit.useBodyScrollLock({ enabled: preventScrollBody && someItemVisible });
|
|
3272
3246
|
const containerRef = React__default["default"].useRef(null);
|
|
3273
3247
|
const veilRef = React__default["default"].useRef(null);
|
|
3274
3248
|
return (React__default["default"].createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
|
|
3275
3249
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
3276
|
-
return (React__default["default"].createElement("div", { ref: containerRef, className: b$
|
|
3277
|
-
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3278
|
-
React__default["default"].createElement("div", { ref: veilRef, className: b$
|
|
3250
|
+
return (React__default["default"].createElement("div", { ref: containerRef, className: b$b(null, className), style: style },
|
|
3251
|
+
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$b('veil-transition'), nodeRef: veilRef },
|
|
3252
|
+
React__default["default"].createElement("div", { ref: veilRef, className: b$b('veil'), onClick: onVeilClick })),
|
|
3279
3253
|
React__default["default"].Children.map(children, (child) => {
|
|
3280
3254
|
const childElem = child;
|
|
3281
3255
|
if (childElem.type === DrawerItem) {
|
|
@@ -3287,10 +3261,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3287
3261
|
}));
|
|
3288
3262
|
};
|
|
3289
3263
|
|
|
3290
|
-
var css_248z$
|
|
3291
|
-
styleInject(css_248z$
|
|
3264
|
+
var css_248z$9 = ".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$9);
|
|
3292
3266
|
|
|
3293
|
-
const b$
|
|
3267
|
+
const b$a = block('logo');
|
|
3294
3268
|
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3295
3269
|
const hasClickHandler = typeof onClick === 'function';
|
|
3296
3270
|
const hasWrapper = typeof wrapper === 'function';
|
|
@@ -3308,18 +3282,18 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3308
3282
|
else if (icon) {
|
|
3309
3283
|
buttonIcon = React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
3310
3284
|
}
|
|
3311
|
-
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$a('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
|
|
3312
3286
|
let logo;
|
|
3313
3287
|
if (typeof text === 'function') {
|
|
3314
3288
|
logo = text();
|
|
3315
3289
|
}
|
|
3316
3290
|
else {
|
|
3317
|
-
logo = (React__default["default"].createElement("div", { className: b$
|
|
3291
|
+
logo = (React__default["default"].createElement("div", { className: b$a('logo'), style: { fontSize: textSize } }, text));
|
|
3318
3292
|
}
|
|
3319
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
3320
|
-
React__default["default"].createElement("div", { className: b$
|
|
3293
|
+
return (React__default["default"].createElement("div", { className: b$a() },
|
|
3294
|
+
React__default["default"].createElement("div", { className: b$a('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3321
3295
|
!compact &&
|
|
3322
|
-
(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$a('logo-link'), onClick: onClick }), logo)))));
|
|
3323
3297
|
};
|
|
3324
3298
|
|
|
3325
3299
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -3851,25 +3825,25 @@ function getItemsMinHeight(items) {
|
|
|
3851
3825
|
(pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
|
|
3852
3826
|
}
|
|
3853
3827
|
|
|
3854
|
-
var css_248z$
|
|
3855
|
-
styleInject(css_248z$
|
|
3828
|
+
var css_248z$8 = ".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$8);
|
|
3856
3830
|
|
|
3857
|
-
const b$
|
|
3831
|
+
const b$9 = block('composite-bar-item');
|
|
3858
3832
|
function renderItemTitle(item) {
|
|
3859
|
-
let titleNode = React__default["default"].createElement("div", { className: b$
|
|
3833
|
+
let titleNode = React__default["default"].createElement("div", { className: b$9('title-text') }, item.title);
|
|
3860
3834
|
if (item.rightAdornment) {
|
|
3861
3835
|
titleNode = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3862
3836
|
titleNode,
|
|
3863
|
-
React__default["default"].createElement("div", { className: b$
|
|
3837
|
+
React__default["default"].createElement("div", { className: b$9('title-adornment') }, item.rightAdornment)));
|
|
3864
3838
|
}
|
|
3865
3839
|
return titleNode;
|
|
3866
3840
|
}
|
|
3867
3841
|
const defaultPopupPlacement = ['right-end'];
|
|
3868
3842
|
const defaultPopupOffset = [-20, 8];
|
|
3869
3843
|
const Item = (props) => {
|
|
3870
|
-
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3844
|
+
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3871
3845
|
if (item.type === 'divider') {
|
|
3872
|
-
return React__default["default"].createElement("div", { className: b$
|
|
3846
|
+
return React__default["default"].createElement("div", { className: b$9('menu-divider') });
|
|
3873
3847
|
}
|
|
3874
3848
|
const [open, toggleOpen] = React__default["default"].useState(false);
|
|
3875
3849
|
const ref = React__default["default"].useRef(null);
|
|
@@ -3890,7 +3864,7 @@ const Item = (props) => {
|
|
|
3890
3864
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
3891
3865
|
}, [onClosePopup]);
|
|
3892
3866
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
3893
|
-
const createdNode = (React__default["default"].createElement("div", { className: b$
|
|
3867
|
+
const createdNode = (React__default["default"].createElement("div", { className: b$9({ type, current, compact }, className), ref: ref, onClick: () => {
|
|
3894
3868
|
if (collapsedItem) {
|
|
3895
3869
|
/**
|
|
3896
3870
|
* If we call onItemClick for collapsedItem then:
|
|
@@ -3911,13 +3885,13 @@ const Item = (props) => {
|
|
|
3911
3885
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3912
3886
|
}
|
|
3913
3887
|
} },
|
|
3914
|
-
React__default["default"].createElement("div", { className: b$
|
|
3915
|
-
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$
|
|
3916
|
-
React__default["default"].createElement("div", { className: b$
|
|
3917
|
-
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { className: b$
|
|
3918
|
-
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$
|
|
3888
|
+
React__default["default"].createElement("div", { className: b$9('icon-place') }, compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$9('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$9('btn-icon') }, iconEl))) : (iconEl)),
|
|
3890
|
+
React__default["default"].createElement("div", { className: b$9('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$9('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$9('link') }, createdNode)) : (createdNode);
|
|
3919
3893
|
};
|
|
3920
|
-
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$9('icon') }) : null;
|
|
3921
3895
|
const titleNode = renderItemTitle(item);
|
|
3922
3896
|
const params = { icon: iconNode, title: titleNode };
|
|
3923
3897
|
let node;
|
|
@@ -3935,13 +3909,13 @@ const Item = (props) => {
|
|
|
3935
3909
|
Item.displayName = 'Item';
|
|
3936
3910
|
function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
3937
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 },
|
|
3938
|
-
React__default["default"].createElement("div", { className: b$
|
|
3939
|
-
React__default["default"].createElement(uikit.List, { itemClassName: b$
|
|
3912
|
+
React__default["default"].createElement("div", { className: b$9('collapse-items-popup-content') },
|
|
3913
|
+
React__default["default"].createElement(uikit.List, { itemClassName: b$9('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) => {
|
|
3940
3914
|
const makeCollapseNode = ({ title: titleEl }) => {
|
|
3941
|
-
const res = (React__default["default"].createElement("div", { className: b$
|
|
3915
|
+
const res = (React__default["default"].createElement("div", { className: b$9('collapse-item'), onClick: () => {
|
|
3942
3916
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3943
3917
|
} }, titleEl));
|
|
3944
|
-
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$9('link') }, res)) : (res);
|
|
3945
3919
|
};
|
|
3946
3920
|
const titleNode = renderItemTitle(collapseItem);
|
|
3947
3921
|
const params = { title: titleNode };
|
|
@@ -3971,10 +3945,10 @@ var SvgDots = function SvgDots(props) {
|
|
|
3971
3945
|
};
|
|
3972
3946
|
var dotsIcon = SvgDots;
|
|
3973
3947
|
|
|
3974
|
-
var css_248z$
|
|
3975
|
-
styleInject(css_248z$
|
|
3948
|
+
var css_248z$7 = ".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$7);
|
|
3976
3950
|
|
|
3977
|
-
const b$
|
|
3951
|
+
const b$8 = block('composite-bar');
|
|
3978
3952
|
class CompositeBar extends React__default["default"].Component {
|
|
3979
3953
|
constructor() {
|
|
3980
3954
|
super(...arguments);
|
|
@@ -3989,10 +3963,10 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
3989
3963
|
return null;
|
|
3990
3964
|
}
|
|
3991
3965
|
if (!enableCollapsing) {
|
|
3992
|
-
return React__default["default"].createElement("div", { className: b$
|
|
3966
|
+
return React__default["default"].createElement("div", { className: b$8() }, this.renderMenu());
|
|
3993
3967
|
}
|
|
3994
3968
|
const minHeight = getItemsMinHeight(items);
|
|
3995
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
3969
|
+
return (React__default["default"].createElement("div", { className: b$8({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
|
|
3996
3970
|
const style = {
|
|
3997
3971
|
width,
|
|
3998
3972
|
height,
|
|
@@ -4003,7 +3977,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4003
3977
|
renderAutosizeMenu(height) {
|
|
4004
3978
|
const { compact, onItemClick } = this.props;
|
|
4005
3979
|
const { listItems, collapseItems } = this.getAutosizeListItems(height);
|
|
4006
|
-
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(listItems), itemHeight: getItemHeight, itemClassName: b$8('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default["default"].createElement(Item, { item: item, onMouseLeave: () => {
|
|
4007
3981
|
var _a;
|
|
4008
3982
|
if (compact) {
|
|
4009
3983
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -4012,7 +3986,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4012
3986
|
}
|
|
4013
3987
|
renderMenu() {
|
|
4014
3988
|
const { items, onItemClick, compact } = this.props;
|
|
4015
|
-
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(items), itemHeight: getItemHeight, itemClassName: b$8('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default["default"].createElement(Item, { item: item, onMouseLeave: () => {
|
|
4016
3990
|
var _a;
|
|
4017
3991
|
if (compact) {
|
|
4018
3992
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -4022,7 +3996,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4022
3996
|
getMoreButtonItem() {
|
|
4023
3997
|
var _a;
|
|
4024
3998
|
const { dict } = this.props;
|
|
4025
|
-
const title = (_a = dict === null || dict === void 0 ? void 0 : dict[exports.Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$
|
|
3999
|
+
const title = (_a = dict === null || dict === void 0 ? void 0 : dict[exports.Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$2[exports.Dict.MoreButton];
|
|
4026
4000
|
return {
|
|
4027
4001
|
id: COLLAPSE_ITEM_ID,
|
|
4028
4002
|
title,
|
|
@@ -4031,6 +4005,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4031
4005
|
};
|
|
4032
4006
|
}
|
|
4033
4007
|
getAutosizeListItems(height) {
|
|
4008
|
+
var _a, _b, _c;
|
|
4034
4009
|
const { items } = this.props;
|
|
4035
4010
|
const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
|
|
4036
4011
|
const regularItems = items.filter((item) => !item.afterMoreButton);
|
|
@@ -4055,7 +4030,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4055
4030
|
continue;
|
|
4056
4031
|
}
|
|
4057
4032
|
if (item.type === 'divider') {
|
|
4058
|
-
if (index + 1 < listItems.length && listItems[index + 1].type === 'divider') {
|
|
4033
|
+
if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
|
|
4059
4034
|
listHeight -= getItemHeight(item);
|
|
4060
4035
|
listItems.splice(index, 1);
|
|
4061
4036
|
}
|
|
@@ -4064,8 +4039,8 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4064
4039
|
listHeight -= getItemHeight(item);
|
|
4065
4040
|
collapseItems.unshift(...listItems.splice(index, 1));
|
|
4066
4041
|
}
|
|
4067
|
-
if (listItems[index].type === 'divider' &&
|
|
4068
|
-
(index === 0 || listItems[index - 1].type === 'divider')) {
|
|
4042
|
+
if (((_b = listItems[index]) === null || _b === void 0 ? void 0 : _b.type) === 'divider' &&
|
|
4043
|
+
(index === 0 || ((_c = listItems[index - 1]) === null || _c === void 0 ? void 0 : _c.type) === 'divider')) {
|
|
4069
4044
|
listItems.splice(index, 1);
|
|
4070
4045
|
}
|
|
4071
4046
|
return { listItems, collapseItems };
|
|
@@ -4111,10 +4086,10 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4111
4086
|
};
|
|
4112
4087
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4113
4088
|
|
|
4114
|
-
var css_248z$
|
|
4115
|
-
styleInject(css_248z$
|
|
4089
|
+
var css_248z$6 = ".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$6);
|
|
4116
4091
|
|
|
4117
|
-
const b$
|
|
4092
|
+
const b$7 = block('aside-header');
|
|
4118
4093
|
class AsideHeader extends React__default["default"].Component {
|
|
4119
4094
|
constructor() {
|
|
4120
4095
|
super(...arguments);
|
|
@@ -4122,26 +4097,26 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4122
4097
|
this.renderFirstPane = (size) => {
|
|
4123
4098
|
const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
|
|
4124
4099
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4125
|
-
React__default["default"].createElement("div", { className: b$
|
|
4126
|
-
React__default["default"].createElement("div", { className: b$
|
|
4127
|
-
React__default["default"].createElement("div", { className: b$
|
|
4100
|
+
React__default["default"].createElement("div", { className: b$7('aside'), style: { width: size } },
|
|
4101
|
+
React__default["default"].createElement("div", { className: b$7('aside-popup-anchor'), ref: this.asideRef }),
|
|
4102
|
+
React__default["default"].createElement("div", { className: b$7('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4128
4103
|
this.renderHeader(),
|
|
4129
|
-
(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$7('menu-items') })),
|
|
4130
4105
|
this.renderFooter(size),
|
|
4131
4106
|
this.renderCollapseButton())),
|
|
4132
4107
|
panelItems && this.renderPanels(size)));
|
|
4133
4108
|
};
|
|
4134
4109
|
this.renderSecondPane = (size) => {
|
|
4135
|
-
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$7('content') }));
|
|
4136
4111
|
};
|
|
4137
4112
|
this.renderLogo = () => (React__default["default"].createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4138
|
-
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$
|
|
4113
|
+
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$7('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4139
4114
|
this.renderLogo(),
|
|
4140
4115
|
React__default["default"].createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
4141
|
-
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$
|
|
4116
|
+
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$7('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4142
4117
|
this.renderFooter = (size) => {
|
|
4143
4118
|
const { compact, renderFooter } = this.props;
|
|
4144
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
4119
|
+
return (React__default["default"].createElement("div", { className: b$7('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4145
4120
|
size,
|
|
4146
4121
|
compact,
|
|
4147
4122
|
asideRef: this.asideRef,
|
|
@@ -4149,14 +4124,14 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4149
4124
|
};
|
|
4150
4125
|
this.renderPanels = (size) => {
|
|
4151
4126
|
const { panelItems } = this.props;
|
|
4152
|
-
return (React__default["default"].createElement(Drawer, { className: b$
|
|
4127
|
+
return (React__default["default"].createElement(Drawer, { className: b$7('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
|
|
4153
4128
|
};
|
|
4154
4129
|
this.renderCollapseButton = () => {
|
|
4155
4130
|
var _a;
|
|
4156
4131
|
const { compact, dict } = this.props;
|
|
4157
4132
|
const typeButton = compact ? exports.Dict.ExpandButton : exports.Dict.CollapseButton;
|
|
4158
|
-
return (React__default["default"].createElement(uikit.Button, { className: b$
|
|
4159
|
-
React__default["default"].createElement(uikit.Icon, { data: controlMenuButtonIcon, className: b$
|
|
4133
|
+
return (React__default["default"].createElement(uikit.Button, { className: b$7('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$7('collapse-icon'), width: "16", height: "10" })));
|
|
4160
4135
|
};
|
|
4161
4136
|
this.onCollapseButtonClick = () => {
|
|
4162
4137
|
var _a, _b;
|
|
@@ -4180,8 +4155,8 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4180
4155
|
render() {
|
|
4181
4156
|
const { className, compact } = this.props;
|
|
4182
4157
|
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
4183
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
4184
|
-
React__default["default"].createElement("div", { className: b$
|
|
4158
|
+
return (React__default["default"].createElement("div", { className: b$7({ compact }, className) },
|
|
4159
|
+
React__default["default"].createElement("div", { className: b$7('pane-container') },
|
|
4185
4160
|
this.renderFirstPane(size),
|
|
4186
4161
|
this.renderSecondPane(size))));
|
|
4187
4162
|
}
|
|
@@ -4220,15 +4195,84 @@ function __rest(s, e) {
|
|
|
4220
4195
|
return t;
|
|
4221
4196
|
}
|
|
4222
4197
|
|
|
4223
|
-
var css_248z$
|
|
4224
|
-
styleInject(css_248z$
|
|
4198
|
+
var css_248z$5 = ".ycn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4199
|
+
styleInject(css_248z$5);
|
|
4225
4200
|
|
|
4226
|
-
const b$
|
|
4201
|
+
const b$6 = block('footer-item');
|
|
4227
4202
|
const FooterItem = (_a) => {
|
|
4228
4203
|
var { item } = _a, props = __rest(_a, ["item"]);
|
|
4229
|
-
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, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$6({ compact: props.compact }), onItemClick: item.onItemClick })));
|
|
4230
4205
|
};
|
|
4231
4206
|
|
|
4207
|
+
var css_248z$4 = ".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$4);
|
|
4209
|
+
|
|
4210
|
+
const b$5 = block('title');
|
|
4211
|
+
const defaultDict$1 = {
|
|
4212
|
+
close: 'Close',
|
|
4213
|
+
};
|
|
4214
|
+
const Title = ({ children, closeIconSize = 23, hasSeparator, dict = defaultDict$1, onClose, }) => {
|
|
4215
|
+
return (React__default["default"].createElement("div", { className: b$5({ separator: hasSeparator }) },
|
|
4216
|
+
React__default["default"].createElement(uikit.Text, { className: b$5('text'), as: 'h3', variant: 'subheader-3' }, children),
|
|
4217
|
+
onClose && (React__default["default"].createElement(uikit.Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
|
|
4218
|
+
'aria-label': dict['close'],
|
|
4219
|
+
} },
|
|
4220
|
+
React__default["default"].createElement(uikit.Icon, { data: icons.Xmark, size: closeIconSize })))));
|
|
4221
|
+
};
|
|
4222
|
+
Title.displayName = 'Title';
|
|
4223
|
+
|
|
4224
|
+
function flattenHotkeyGroups(hotkeys) {
|
|
4225
|
+
const result = [];
|
|
4226
|
+
for (const hotkeysGroup of hotkeys) {
|
|
4227
|
+
result.push({
|
|
4228
|
+
title: hotkeysGroup.title,
|
|
4229
|
+
group: true,
|
|
4230
|
+
});
|
|
4231
|
+
result.push(...hotkeysGroup.items);
|
|
4232
|
+
}
|
|
4233
|
+
return result;
|
|
4234
|
+
}
|
|
4235
|
+
|
|
4236
|
+
function filterHotkeys(hotkeys, filter) {
|
|
4237
|
+
if (filter) {
|
|
4238
|
+
const result = [];
|
|
4239
|
+
const normalizedFilter = filter.toLowerCase();
|
|
4240
|
+
for (const hotkeysBlock of hotkeys) {
|
|
4241
|
+
const filteredItems = hotkeysBlock.items.filter((item) => item.title.toLowerCase().includes(normalizedFilter));
|
|
4242
|
+
if (filteredItems.length > 0) {
|
|
4243
|
+
result.push(Object.assign(Object.assign({}, hotkeysBlock), { items: filteredItems }));
|
|
4244
|
+
}
|
|
4245
|
+
}
|
|
4246
|
+
return result;
|
|
4247
|
+
}
|
|
4248
|
+
return hotkeys;
|
|
4249
|
+
}
|
|
4250
|
+
|
|
4251
|
+
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}";
|
|
4252
|
+
styleInject(css_248z$3);
|
|
4253
|
+
|
|
4254
|
+
const b$4 = block('hotkeys-panel');
|
|
4255
|
+
function HotkeysPanel(_a) {
|
|
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
|
+
const [filter, setFilter] = React.useState('');
|
|
4258
|
+
const hotkeysList = React.useMemo(() => {
|
|
4259
|
+
const filteredHotkeys = filterHotkeys(hotkeys, filter);
|
|
4260
|
+
return flattenHotkeyGroups(filteredHotkeys);
|
|
4261
|
+
}, [hotkeys, filter]);
|
|
4262
|
+
const renderItem = React.useCallback((item) => (React__default["default"].createElement("div", { className: b$4('item-content', { group: item.group }), key: item.title },
|
|
4263
|
+
item.title,
|
|
4264
|
+
item.value && React__default["default"].createElement(uikit.Hotkey, { className: b$4('hotkey'), value: item.value }))), []);
|
|
4265
|
+
const drawerItemContent = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4266
|
+
React__default["default"].createElement("h2", { className: b$4('title') }, title),
|
|
4267
|
+
React__default["default"].createElement(uikit.TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$4('search') }),
|
|
4268
|
+
React__default["default"].createElement(uikit.List, Object.assign({ className: b$4('list'), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$4('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
|
|
4269
|
+
return (React__default["default"].createElement(Drawer, { className: b$4(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
|
|
4270
|
+
left: leftOffset,
|
|
4271
|
+
top: topOffset,
|
|
4272
|
+
} },
|
|
4273
|
+
React__default["default"].createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$4('drawer-item'), content: drawerItemContent })));
|
|
4274
|
+
}
|
|
4275
|
+
|
|
4232
4276
|
/**
|
|
4233
4277
|
* This method returns the first argument it receives.
|
|
4234
4278
|
*
|
|
@@ -5054,7 +5098,7 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5054
5098
|
return { items, hidden };
|
|
5055
5099
|
}
|
|
5056
5100
|
|
|
5057
|
-
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(
|
|
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}";
|
|
5058
5102
|
styleInject(css_248z);
|
|
5059
5103
|
|
|
5060
5104
|
const b = block('settings');
|
|
@@ -5070,10 +5114,22 @@ function Settings(_a) {
|
|
|
5070
5114
|
}
|
|
5071
5115
|
return (React__default["default"].createElement(SettingsContent, Object.assign({ view: view }, props), children));
|
|
5072
5116
|
}
|
|
5117
|
+
const getPageTitleById = (menu, activePage) => {
|
|
5118
|
+
for (const firstLevel of menu) {
|
|
5119
|
+
if ('groupTitle' in firstLevel) {
|
|
5120
|
+
for (const secondLevel of firstLevel.items)
|
|
5121
|
+
if (secondLevel.id === activePage)
|
|
5122
|
+
return secondLevel.title;
|
|
5123
|
+
}
|
|
5124
|
+
else if (firstLevel.id === activePage)
|
|
5125
|
+
return firstLevel.title;
|
|
5126
|
+
}
|
|
5127
|
+
return '';
|
|
5128
|
+
};
|
|
5073
5129
|
Settings.defaultProps = {
|
|
5074
5130
|
dict: defaultDict,
|
|
5075
5131
|
};
|
|
5076
|
-
function SettingsContent({ initialPage,
|
|
5132
|
+
function SettingsContent({ initialPage, children, renderNotFound, dict, view, onPageChange, onClose, }) {
|
|
5077
5133
|
var _a, _b;
|
|
5078
5134
|
const [search, setSearch] = React__default["default"].useState('');
|
|
5079
5135
|
const { menu, pages } = getSettingsFromChildren(children, search);
|
|
@@ -5117,12 +5173,16 @@ function SettingsContent({ initialPage, onPageChange, children, renderNotFound,
|
|
|
5117
5173
|
if (!activePage) {
|
|
5118
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));
|
|
5119
5175
|
}
|
|
5120
|
-
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
|
|
5125
|
-
|
|
5176
|
+
const filteredSections = pages[activePage].sections.filter((section) => !section.hidden);
|
|
5177
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
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)),
|
|
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
|
|
5184
|
+
? prepareTitle(title, search)
|
|
5185
|
+
: title })))))))))));
|
|
5126
5186
|
};
|
|
5127
5187
|
return (React__default["default"].createElement("div", { className: b({ view }) },
|
|
5128
5188
|
isMobile ? (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -5138,7 +5198,7 @@ function SettingsContent({ initialPage, onPageChange, children, renderNotFound,
|
|
|
5138
5198
|
}
|
|
5139
5199
|
}
|
|
5140
5200
|
} },
|
|
5141
|
-
React__default["default"].createElement(
|
|
5201
|
+
React__default["default"].createElement(Title, null, dict === null || dict === void 0 ? void 0 : dict.heading_settings),
|
|
5142
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 }),
|
|
5143
5203
|
React__default["default"].createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
|
|
5144
5204
|
React__default["default"].createElement("div", { className: b('page') }, renderPageContent())));
|
|
@@ -5188,5 +5248,7 @@ exports.AsideHeader = AsideHeader;
|
|
|
5188
5248
|
exports.Drawer = Drawer;
|
|
5189
5249
|
exports.DrawerItem = DrawerItem;
|
|
5190
5250
|
exports.FooterItem = FooterItem;
|
|
5251
|
+
exports.HotkeysPanel = HotkeysPanel;
|
|
5191
5252
|
exports.Settings = Settings;
|
|
5253
|
+
exports.Title = Title;
|
|
5192
5254
|
//# sourceMappingURL=index.js.map
|