@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/cjs/index.js
CHANGED
|
@@ -114,48 +114,48 @@ function styleInject(css, ref) {
|
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
var css_248z$
|
|
118
|
-
styleInject(css_248z$
|
|
117
|
+
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}";
|
|
118
|
+
styleInject(css_248z$e);
|
|
119
119
|
|
|
120
|
-
const b$
|
|
120
|
+
const b$f = block('action-bar-group');
|
|
121
121
|
const ActionBarGroup = ({ children, className, pull }) => {
|
|
122
|
-
return (React__default["default"].createElement("ul", { className: b$
|
|
122
|
+
return (React__default["default"].createElement("ul", { className: b$f({ pull }, className), role: "group" }, children));
|
|
123
123
|
};
|
|
124
124
|
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
125
125
|
|
|
126
|
-
var css_248z$
|
|
127
|
-
styleInject(css_248z$
|
|
126
|
+
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}";
|
|
127
|
+
styleInject(css_248z$d);
|
|
128
128
|
|
|
129
|
-
const b$
|
|
129
|
+
const b$e = block('action-bar-item');
|
|
130
130
|
const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
131
|
-
return React__default["default"].createElement("li", { className: b$
|
|
131
|
+
return React__default["default"].createElement("li", { className: b$e({ pull, spacing }, className) }, children);
|
|
132
132
|
};
|
|
133
133
|
ActionBarItem.displayName = 'ActionBar.Item';
|
|
134
134
|
|
|
135
|
-
var css_248z$
|
|
136
|
-
styleInject(css_248z$
|
|
135
|
+
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}";
|
|
136
|
+
styleInject(css_248z$c);
|
|
137
137
|
|
|
138
|
-
const b$
|
|
138
|
+
const b$d = block('action-bar-section');
|
|
139
139
|
const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
140
|
-
return React__default["default"].createElement("div", { className: b$
|
|
140
|
+
return React__default["default"].createElement("div", { className: b$d({ type }) }, children);
|
|
141
141
|
};
|
|
142
142
|
ActionBarSection.displayName = 'ActionBar.Section';
|
|
143
143
|
|
|
144
|
-
var css_248z$
|
|
145
|
-
styleInject(css_248z$
|
|
144
|
+
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}";
|
|
145
|
+
styleInject(css_248z$b);
|
|
146
146
|
|
|
147
|
-
const b$
|
|
147
|
+
const b$c = block('action-bar-separator');
|
|
148
148
|
const ActionBarSeparator = () => {
|
|
149
|
-
return React__default["default"].createElement("li", { role: "separator", className: b$
|
|
149
|
+
return React__default["default"].createElement("li", { role: "separator", className: b$c() });
|
|
150
150
|
};
|
|
151
151
|
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
152
152
|
|
|
153
|
-
var css_248z$
|
|
154
|
-
styleInject(css_248z$
|
|
153
|
+
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}";
|
|
154
|
+
styleInject(css_248z$a);
|
|
155
155
|
|
|
156
|
-
const b$
|
|
156
|
+
const b$b = block('action-bar');
|
|
157
157
|
const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
|
|
158
|
-
return (React__default["default"].createElement("section", { className: b$
|
|
158
|
+
return (React__default["default"].createElement("section", { className: b$b(null, className), "aria-label": ariaLabel }, children));
|
|
159
159
|
};
|
|
160
160
|
ActionBar.displayName = 'ActionBar';
|
|
161
161
|
const PublicActionBar = Object.assign(ActionBar, {
|
|
@@ -3207,15 +3207,15 @@ SwitchTransition.defaultProps = {
|
|
|
3207
3207
|
mode: modes.out
|
|
3208
3208
|
};
|
|
3209
3209
|
|
|
3210
|
-
var css_248z$
|
|
3211
|
-
styleInject(css_248z$
|
|
3210
|
+
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}";
|
|
3211
|
+
styleInject(css_248z$9);
|
|
3212
3212
|
|
|
3213
|
-
const b$
|
|
3213
|
+
const b$a = block('drawer');
|
|
3214
3214
|
const TIMEOUT = 300;
|
|
3215
3215
|
const DrawerItem = ({ visible, content, direction, className }) => {
|
|
3216
3216
|
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$
|
|
3217
|
+
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$a('item-transition', { direction }), nodeRef: itemRef },
|
|
3218
|
+
React__default["default"].createElement("div", { ref: itemRef, className: b$a('item', { direction }, className) }, content)));
|
|
3219
3219
|
};
|
|
3220
3220
|
const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
|
|
3221
3221
|
let someItemVisible = false;
|
|
@@ -3241,41 +3241,14 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3241
3241
|
window.removeEventListener('keydown', onKeyDown);
|
|
3242
3242
|
};
|
|
3243
3243
|
}, [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]);
|
|
3244
|
+
uikit.useBodyScrollLock({ enabled: preventScrollBody && someItemVisible });
|
|
3272
3245
|
const containerRef = React__default["default"].useRef(null);
|
|
3273
3246
|
const veilRef = React__default["default"].useRef(null);
|
|
3274
3247
|
return (React__default["default"].createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
|
|
3275
3248
|
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$
|
|
3249
|
+
return (React__default["default"].createElement("div", { ref: containerRef, className: b$a(null, className), style: style },
|
|
3250
|
+
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$a('veil-transition'), nodeRef: veilRef },
|
|
3251
|
+
React__default["default"].createElement("div", { ref: veilRef, className: b$a('veil'), onClick: onVeilClick })),
|
|
3279
3252
|
React__default["default"].Children.map(children, (child) => {
|
|
3280
3253
|
const childElem = child;
|
|
3281
3254
|
if (childElem.type === DrawerItem) {
|
|
@@ -3287,10 +3260,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3287
3260
|
}));
|
|
3288
3261
|
};
|
|
3289
3262
|
|
|
3290
|
-
var css_248z$
|
|
3291
|
-
styleInject(css_248z$
|
|
3263
|
+
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}";
|
|
3264
|
+
styleInject(css_248z$8);
|
|
3292
3265
|
|
|
3293
|
-
const b$
|
|
3266
|
+
const b$9 = block('logo');
|
|
3294
3267
|
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3295
3268
|
const hasClickHandler = typeof onClick === 'function';
|
|
3296
3269
|
const hasWrapper = typeof wrapper === 'function';
|
|
@@ -3308,18 +3281,18 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3308
3281
|
else if (icon) {
|
|
3309
3282
|
buttonIcon = React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
3310
3283
|
}
|
|
3311
|
-
const button = (React__default["default"].createElement(uikit.Button, Object.assign({ view: "flat", size: "l", className: b$
|
|
3284
|
+
const button = (React__default["default"].createElement(uikit.Button, Object.assign({ view: "flat", size: "l", className: b$9('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
|
|
3312
3285
|
let logo;
|
|
3313
3286
|
if (typeof text === 'function') {
|
|
3314
3287
|
logo = text();
|
|
3315
3288
|
}
|
|
3316
3289
|
else {
|
|
3317
|
-
logo = (React__default["default"].createElement("div", { className: b$
|
|
3290
|
+
logo = (React__default["default"].createElement("div", { className: b$9('logo'), style: { fontSize: textSize } }, text));
|
|
3318
3291
|
}
|
|
3319
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
3320
|
-
React__default["default"].createElement("div", { className: b$
|
|
3292
|
+
return (React__default["default"].createElement("div", { className: b$9() },
|
|
3293
|
+
React__default["default"].createElement("div", { className: b$9('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3321
3294
|
!compact &&
|
|
3322
|
-
(hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$
|
|
3295
|
+
(hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$9('logo-link'), onClick: onClick }), logo)))));
|
|
3323
3296
|
};
|
|
3324
3297
|
|
|
3325
3298
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -3851,25 +3824,25 @@ function getItemsMinHeight(items) {
|
|
|
3851
3824
|
(pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
|
|
3852
3825
|
}
|
|
3853
3826
|
|
|
3854
|
-
var css_248z$
|
|
3855
|
-
styleInject(css_248z$
|
|
3827
|
+
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}";
|
|
3828
|
+
styleInject(css_248z$7);
|
|
3856
3829
|
|
|
3857
|
-
const b$
|
|
3830
|
+
const b$8 = block('composite-bar-item');
|
|
3858
3831
|
function renderItemTitle(item) {
|
|
3859
|
-
let titleNode = React__default["default"].createElement("div", { className: b$
|
|
3832
|
+
let titleNode = React__default["default"].createElement("div", { className: b$8('title-text') }, item.title);
|
|
3860
3833
|
if (item.rightAdornment) {
|
|
3861
3834
|
titleNode = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3862
3835
|
titleNode,
|
|
3863
|
-
React__default["default"].createElement("div", { className: b$
|
|
3836
|
+
React__default["default"].createElement("div", { className: b$8('title-adornment') }, item.rightAdornment)));
|
|
3864
3837
|
}
|
|
3865
3838
|
return titleNode;
|
|
3866
3839
|
}
|
|
3867
3840
|
const defaultPopupPlacement = ['right-end'];
|
|
3868
3841
|
const defaultPopupOffset = [-20, 8];
|
|
3869
3842
|
const Item = (props) => {
|
|
3870
|
-
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3843
|
+
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3871
3844
|
if (item.type === 'divider') {
|
|
3872
|
-
return React__default["default"].createElement("div", { className: b$
|
|
3845
|
+
return React__default["default"].createElement("div", { className: b$8('menu-divider') });
|
|
3873
3846
|
}
|
|
3874
3847
|
const [open, toggleOpen] = React__default["default"].useState(false);
|
|
3875
3848
|
const ref = React__default["default"].useRef(null);
|
|
@@ -3890,7 +3863,7 @@ const Item = (props) => {
|
|
|
3890
3863
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
3891
3864
|
}, [onClosePopup]);
|
|
3892
3865
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
3893
|
-
const createdNode = (React__default["default"].createElement("div", { className: b$
|
|
3866
|
+
const createdNode = (React__default["default"].createElement("div", { className: b$8({ type, current, compact }, className), ref: ref, onClick: () => {
|
|
3894
3867
|
if (collapsedItem) {
|
|
3895
3868
|
/**
|
|
3896
3869
|
* If we call onItemClick for collapsedItem then:
|
|
@@ -3911,13 +3884,13 @@ const Item = (props) => {
|
|
|
3911
3884
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3912
3885
|
}
|
|
3913
3886
|
} },
|
|
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$
|
|
3887
|
+
React__default["default"].createElement("div", { className: b$8('icon-place') }, compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$8('icon-tooltip', { 'item-type': type }) },
|
|
3888
|
+
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$8('btn-icon') }, iconEl))) : (iconEl)),
|
|
3889
|
+
React__default["default"].createElement("div", { className: b$8('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3890
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { className: b$8('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3891
|
+
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$8('link') }, createdNode)) : (createdNode);
|
|
3919
3892
|
};
|
|
3920
|
-
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$
|
|
3893
|
+
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$8('icon') }) : null;
|
|
3921
3894
|
const titleNode = renderItemTitle(item);
|
|
3922
3895
|
const params = { icon: iconNode, title: titleNode };
|
|
3923
3896
|
let node;
|
|
@@ -3935,13 +3908,13 @@ const Item = (props) => {
|
|
|
3935
3908
|
Item.displayName = 'Item';
|
|
3936
3909
|
function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
3937
3910
|
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$
|
|
3911
|
+
React__default["default"].createElement("div", { className: b$8('collapse-items-popup-content') },
|
|
3912
|
+
React__default["default"].createElement(uikit.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) => {
|
|
3940
3913
|
const makeCollapseNode = ({ title: titleEl }) => {
|
|
3941
|
-
const res = (React__default["default"].createElement("div", { className: b$
|
|
3914
|
+
const res = (React__default["default"].createElement("div", { className: b$8('collapse-item'), onClick: () => {
|
|
3942
3915
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3943
3916
|
} }, titleEl));
|
|
3944
|
-
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$
|
|
3917
|
+
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$8('link') }, res)) : (res);
|
|
3945
3918
|
};
|
|
3946
3919
|
const titleNode = renderItemTitle(collapseItem);
|
|
3947
3920
|
const params = { title: titleNode };
|
|
@@ -3971,10 +3944,10 @@ var SvgDots = function SvgDots(props) {
|
|
|
3971
3944
|
};
|
|
3972
3945
|
var dotsIcon = SvgDots;
|
|
3973
3946
|
|
|
3974
|
-
var css_248z$
|
|
3975
|
-
styleInject(css_248z$
|
|
3947
|
+
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}";
|
|
3948
|
+
styleInject(css_248z$6);
|
|
3976
3949
|
|
|
3977
|
-
const b$
|
|
3950
|
+
const b$7 = block('composite-bar');
|
|
3978
3951
|
class CompositeBar extends React__default["default"].Component {
|
|
3979
3952
|
constructor() {
|
|
3980
3953
|
super(...arguments);
|
|
@@ -3989,10 +3962,10 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
3989
3962
|
return null;
|
|
3990
3963
|
}
|
|
3991
3964
|
if (!enableCollapsing) {
|
|
3992
|
-
return React__default["default"].createElement("div", { className: b$
|
|
3965
|
+
return React__default["default"].createElement("div", { className: b$7() }, this.renderMenu());
|
|
3993
3966
|
}
|
|
3994
3967
|
const minHeight = getItemsMinHeight(items);
|
|
3995
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
3968
|
+
return (React__default["default"].createElement("div", { className: b$7({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
|
|
3996
3969
|
const style = {
|
|
3997
3970
|
width,
|
|
3998
3971
|
height,
|
|
@@ -4003,7 +3976,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4003
3976
|
renderAutosizeMenu(height) {
|
|
4004
3977
|
const { compact, onItemClick } = this.props;
|
|
4005
3978
|
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$
|
|
3979
|
+
return (React__default["default"].createElement(uikit.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["default"].createElement(Item, { item: item, onMouseLeave: () => {
|
|
4007
3980
|
var _a;
|
|
4008
3981
|
if (compact) {
|
|
4009
3982
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -4012,7 +3985,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4012
3985
|
}
|
|
4013
3986
|
renderMenu() {
|
|
4014
3987
|
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$
|
|
3988
|
+
return (React__default["default"].createElement(uikit.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["default"].createElement(Item, { item: item, onMouseLeave: () => {
|
|
4016
3989
|
var _a;
|
|
4017
3990
|
if (compact) {
|
|
4018
3991
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -4031,6 +4004,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4031
4004
|
};
|
|
4032
4005
|
}
|
|
4033
4006
|
getAutosizeListItems(height) {
|
|
4007
|
+
var _a, _b, _c;
|
|
4034
4008
|
const { items } = this.props;
|
|
4035
4009
|
const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
|
|
4036
4010
|
const regularItems = items.filter((item) => !item.afterMoreButton);
|
|
@@ -4055,7 +4029,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4055
4029
|
continue;
|
|
4056
4030
|
}
|
|
4057
4031
|
if (item.type === 'divider') {
|
|
4058
|
-
if (index + 1 < listItems.length && listItems[index + 1].type === 'divider') {
|
|
4032
|
+
if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
|
|
4059
4033
|
listHeight -= getItemHeight(item);
|
|
4060
4034
|
listItems.splice(index, 1);
|
|
4061
4035
|
}
|
|
@@ -4064,8 +4038,8 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
4064
4038
|
listHeight -= getItemHeight(item);
|
|
4065
4039
|
collapseItems.unshift(...listItems.splice(index, 1));
|
|
4066
4040
|
}
|
|
4067
|
-
if (listItems[index].type === 'divider' &&
|
|
4068
|
-
(index === 0 || listItems[index - 1].type === 'divider')) {
|
|
4041
|
+
if (((_b = listItems[index]) === null || _b === void 0 ? void 0 : _b.type) === 'divider' &&
|
|
4042
|
+
(index === 0 || ((_c = listItems[index - 1]) === null || _c === void 0 ? void 0 : _c.type) === 'divider')) {
|
|
4069
4043
|
listItems.splice(index, 1);
|
|
4070
4044
|
}
|
|
4071
4045
|
return { listItems, collapseItems };
|
|
@@ -4111,10 +4085,10 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4111
4085
|
};
|
|
4112
4086
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4113
4087
|
|
|
4114
|
-
var css_248z$
|
|
4115
|
-
styleInject(css_248z$
|
|
4088
|
+
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}";
|
|
4089
|
+
styleInject(css_248z$5);
|
|
4116
4090
|
|
|
4117
|
-
const b$
|
|
4091
|
+
const b$6 = block('aside-header');
|
|
4118
4092
|
class AsideHeader extends React__default["default"].Component {
|
|
4119
4093
|
constructor() {
|
|
4120
4094
|
super(...arguments);
|
|
@@ -4122,26 +4096,26 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4122
4096
|
this.renderFirstPane = (size) => {
|
|
4123
4097
|
const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
|
|
4124
4098
|
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$
|
|
4099
|
+
React__default["default"].createElement("div", { className: b$6('aside'), style: { width: size } },
|
|
4100
|
+
React__default["default"].createElement("div", { className: b$6('aside-popup-anchor'), ref: this.asideRef }),
|
|
4101
|
+
React__default["default"].createElement("div", { className: b$6('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4128
4102
|
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$
|
|
4103
|
+
(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$6('menu-items') })),
|
|
4130
4104
|
this.renderFooter(size),
|
|
4131
4105
|
this.renderCollapseButton())),
|
|
4132
4106
|
panelItems && this.renderPanels(size)));
|
|
4133
4107
|
};
|
|
4134
4108
|
this.renderSecondPane = (size) => {
|
|
4135
|
-
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$
|
|
4109
|
+
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$6('content') }));
|
|
4136
4110
|
};
|
|
4137
4111
|
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$
|
|
4112
|
+
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$6('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4139
4113
|
this.renderLogo(),
|
|
4140
4114
|
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$
|
|
4115
|
+
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$6('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4142
4116
|
this.renderFooter = (size) => {
|
|
4143
4117
|
const { compact, renderFooter } = this.props;
|
|
4144
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
4118
|
+
return (React__default["default"].createElement("div", { className: b$6('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4145
4119
|
size,
|
|
4146
4120
|
compact,
|
|
4147
4121
|
asideRef: this.asideRef,
|
|
@@ -4149,14 +4123,14 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4149
4123
|
};
|
|
4150
4124
|
this.renderPanels = (size) => {
|
|
4151
4125
|
const { panelItems } = this.props;
|
|
4152
|
-
return (React__default["default"].createElement(Drawer, { className: b$
|
|
4126
|
+
return (React__default["default"].createElement(Drawer, { className: b$6('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
4127
|
};
|
|
4154
4128
|
this.renderCollapseButton = () => {
|
|
4155
4129
|
var _a;
|
|
4156
4130
|
const { compact, dict } = this.props;
|
|
4157
4131
|
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$
|
|
4132
|
+
return (React__default["default"].createElement(uikit.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] },
|
|
4133
|
+
React__default["default"].createElement(uikit.Icon, { data: controlMenuButtonIcon, className: b$6('collapse-icon'), width: "16", height: "10" })));
|
|
4160
4134
|
};
|
|
4161
4135
|
this.onCollapseButtonClick = () => {
|
|
4162
4136
|
var _a, _b;
|
|
@@ -4180,8 +4154,8 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4180
4154
|
render() {
|
|
4181
4155
|
const { className, compact } = this.props;
|
|
4182
4156
|
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$
|
|
4157
|
+
return (React__default["default"].createElement("div", { className: b$6({ compact }, className) },
|
|
4158
|
+
React__default["default"].createElement("div", { className: b$6('pane-container') },
|
|
4185
4159
|
this.renderFirstPane(size),
|
|
4186
4160
|
this.renderSecondPane(size))));
|
|
4187
4161
|
}
|
|
@@ -4220,15 +4194,67 @@ function __rest(s, e) {
|
|
|
4220
4194
|
return t;
|
|
4221
4195
|
}
|
|
4222
4196
|
|
|
4223
|
-
var css_248z$
|
|
4224
|
-
styleInject(css_248z$
|
|
4197
|
+
var css_248z$4 = ".ycn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4198
|
+
styleInject(css_248z$4);
|
|
4225
4199
|
|
|
4226
|
-
const b$
|
|
4200
|
+
const b$5 = block('footer-item');
|
|
4227
4201
|
const FooterItem = (_a) => {
|
|
4228
4202
|
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$
|
|
4203
|
+
return (React__default["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 })));
|
|
4230
4204
|
};
|
|
4231
4205
|
|
|
4206
|
+
function flattenHotkeyGroups(hotkeys) {
|
|
4207
|
+
const result = [];
|
|
4208
|
+
for (const hotkeysGroup of hotkeys) {
|
|
4209
|
+
result.push({
|
|
4210
|
+
title: hotkeysGroup.title,
|
|
4211
|
+
group: true,
|
|
4212
|
+
});
|
|
4213
|
+
result.push(...hotkeysGroup.items);
|
|
4214
|
+
}
|
|
4215
|
+
return result;
|
|
4216
|
+
}
|
|
4217
|
+
|
|
4218
|
+
function filterHotkeys(hotkeys, filter) {
|
|
4219
|
+
if (filter) {
|
|
4220
|
+
const result = [];
|
|
4221
|
+
const normalizedFilter = filter.toLowerCase();
|
|
4222
|
+
for (const hotkeysBlock of hotkeys) {
|
|
4223
|
+
const filteredItems = hotkeysBlock.items.filter((item) => item.title.toLowerCase().includes(normalizedFilter));
|
|
4224
|
+
if (filteredItems.length > 0) {
|
|
4225
|
+
result.push(Object.assign(Object.assign({}, hotkeysBlock), { items: filteredItems }));
|
|
4226
|
+
}
|
|
4227
|
+
}
|
|
4228
|
+
return result;
|
|
4229
|
+
}
|
|
4230
|
+
return hotkeys;
|
|
4231
|
+
}
|
|
4232
|
+
|
|
4233
|
+
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}";
|
|
4234
|
+
styleInject(css_248z$3);
|
|
4235
|
+
|
|
4236
|
+
const b$4 = block('hotkeys-panel');
|
|
4237
|
+
function HotkeysPanel(_a) {
|
|
4238
|
+
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"]);
|
|
4239
|
+
const [filter, setFilter] = React.useState('');
|
|
4240
|
+
const hotkeysList = React.useMemo(() => {
|
|
4241
|
+
const filteredHotkeys = filterHotkeys(hotkeys, filter);
|
|
4242
|
+
return flattenHotkeyGroups(filteredHotkeys);
|
|
4243
|
+
}, [hotkeys, filter]);
|
|
4244
|
+
const renderItem = React.useCallback((item) => (React__default["default"].createElement("div", { className: b$4('item-content', { group: item.group }), key: item.title },
|
|
4245
|
+
item.title,
|
|
4246
|
+
item.value && React__default["default"].createElement(uikit.Hotkey, { className: b$4('hotkey'), value: item.value }))), []);
|
|
4247
|
+
const drawerItemContent = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4248
|
+
React__default["default"].createElement("h2", { className: b$4('title') }, title),
|
|
4249
|
+
React__default["default"].createElement(uikit.TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$4('search') }),
|
|
4250
|
+
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))));
|
|
4251
|
+
return (React__default["default"].createElement(Drawer, { className: b$4(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
|
|
4252
|
+
left: leftOffset,
|
|
4253
|
+
top: topOffset,
|
|
4254
|
+
} },
|
|
4255
|
+
React__default["default"].createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$4('drawer-item'), content: drawerItemContent })));
|
|
4256
|
+
}
|
|
4257
|
+
|
|
4232
4258
|
/**
|
|
4233
4259
|
* This method returns the first argument it receives.
|
|
4234
4260
|
*
|
|
@@ -5054,7 +5080,7 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5054
5080
|
return { items, hidden };
|
|
5055
5081
|
}
|
|
5056
5082
|
|
|
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(
|
|
5083
|
+
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}";
|
|
5058
5084
|
styleInject(css_248z);
|
|
5059
5085
|
|
|
5060
5086
|
const b = block('settings');
|
|
@@ -5188,5 +5214,6 @@ exports.AsideHeader = AsideHeader;
|
|
|
5188
5214
|
exports.Drawer = Drawer;
|
|
5189
5215
|
exports.DrawerItem = DrawerItem;
|
|
5190
5216
|
exports.FooterItem = FooterItem;
|
|
5217
|
+
exports.HotkeysPanel = HotkeysPanel;
|
|
5191
5218
|
exports.Settings = Settings;
|
|
5192
5219
|
//# sourceMappingURL=index.js.map
|