@gravity-ui/navigation 0.3.1 → 0.4.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/README.md +4 -2
- package/build/cjs/components/AsideHeader/AsideHeader.d.ts +1 -0
- package/build/cjs/index.js +46 -69
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/AsideHeader/AsideHeader.d.ts +1 -0
- package/build/esm/index.js +47 -70
- package/build/esm/index.js.map +1 -1
- package/package.json +3 -3
- package/build/cjs/components/ItemTooltip/ItemTooltip.d.ts +0 -7
- package/build/esm/components/ItemTooltip/ItemTooltip.d.ts +0 -7
package/build/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent } from 'react';
|
|
3
|
-
import { Button, Icon, Popup, List, TextInput, Loader } from '@gravity-ui/uikit';
|
|
3
|
+
import { Button, Icon, Popup, List, Tooltip, TextInput, Loader } from '@gravity-ui/uikit';
|
|
4
4
|
import ReactDOM from 'react-dom';
|
|
5
5
|
|
|
6
6
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -87,48 +87,48 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
styleInject(css_248z$
|
|
90
|
+
var css_248z$c = ".ycn-action-bar-group {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n margin-left: auto;\n margin-right: auto;\n}";
|
|
91
|
+
styleInject(css_248z$c);
|
|
92
92
|
|
|
93
|
-
const b$
|
|
93
|
+
const b$d = block('action-bar-group');
|
|
94
94
|
const ActionBarGroup = ({ children, className, pull }) => {
|
|
95
|
-
return (React__default.createElement("ul", { className: b$
|
|
95
|
+
return (React__default.createElement("ul", { className: b$d({ pull }, className), role: "group" }, children));
|
|
96
96
|
};
|
|
97
97
|
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
98
98
|
|
|
99
|
-
var css_248z$
|
|
100
|
-
styleInject(css_248z$
|
|
99
|
+
var css_248z$b = ".ycn-action-bar-item {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n margin-left: auto;\n margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n margin-left: 8px;\n}";
|
|
100
|
+
styleInject(css_248z$b);
|
|
101
101
|
|
|
102
|
-
const b$
|
|
102
|
+
const b$c = block('action-bar-item');
|
|
103
103
|
const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
104
|
-
return React__default.createElement("li", { className: b$
|
|
104
|
+
return React__default.createElement("li", { className: b$c({ pull, spacing }, className) }, children);
|
|
105
105
|
};
|
|
106
106
|
ActionBarItem.displayName = 'ActionBar.Item';
|
|
107
107
|
|
|
108
|
-
var css_248z$
|
|
109
|
-
styleInject(css_248z$
|
|
108
|
+
var css_248z$a = ".ycn-action-bar-section {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n border-left: solid 1px var(--yc-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n flex: 1 1 auto;\n padding-left: 20px;\n padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n padding-left: 6px;\n padding-right: 6px;\n}";
|
|
109
|
+
styleInject(css_248z$a);
|
|
110
110
|
|
|
111
|
-
const b$
|
|
111
|
+
const b$b = block('action-bar-section');
|
|
112
112
|
const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
113
|
-
return React__default.createElement("div", { className: b$
|
|
113
|
+
return React__default.createElement("div", { className: b$b({ type }) }, children);
|
|
114
114
|
};
|
|
115
115
|
ActionBarSection.displayName = 'ActionBar.Section';
|
|
116
116
|
|
|
117
|
-
var css_248z$
|
|
118
|
-
styleInject(css_248z$
|
|
117
|
+
var css_248z$9 = ".ycn-action-bar-separator {\n list-style: none;\n margin: 0;\n padding: 0;\n margin-left: 6px;\n margin-right: 6px;\n border-right: solid 1px var(--yc-color-line-generic);\n height: 40px;\n}";
|
|
118
|
+
styleInject(css_248z$9);
|
|
119
119
|
|
|
120
|
-
const b$
|
|
120
|
+
const b$a = block('action-bar-separator');
|
|
121
121
|
const ActionBarSeparator = () => {
|
|
122
|
-
return React__default.createElement("li", { role: "separator", className: b$
|
|
122
|
+
return React__default.createElement("li", { role: "separator", className: b$a() });
|
|
123
123
|
};
|
|
124
124
|
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
125
125
|
|
|
126
|
-
var css_248z$
|
|
127
|
-
styleInject(css_248z$
|
|
126
|
+
var css_248z$8 = ".ycn-action-bar {\n box-sizing: border-box;\n height: 40px;\n border-bottom: solid 1px var(--yc-color-line-generic);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}";
|
|
127
|
+
styleInject(css_248z$8);
|
|
128
128
|
|
|
129
|
-
const b$
|
|
129
|
+
const b$9 = block('action-bar');
|
|
130
130
|
const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
|
|
131
|
-
return (React__default.createElement("section", { className: b$
|
|
131
|
+
return (React__default.createElement("section", { className: b$9(null, className), "aria-label": ariaLabel }, children));
|
|
132
132
|
};
|
|
133
133
|
ActionBar.displayName = 'ActionBar';
|
|
134
134
|
const PublicActionBar = Object.assign(ActionBar, {
|
|
@@ -3173,15 +3173,15 @@ SwitchTransition.defaultProps = {
|
|
|
3173
3173
|
mode: modes.out
|
|
3174
3174
|
};
|
|
3175
3175
|
|
|
3176
|
-
var css_248z$
|
|
3177
|
-
styleInject(css_248z$
|
|
3176
|
+
var css_248z$7 = ".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-transition-enter {\n transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition-enter-active {\n transform: translate(0, 0);\n transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done {\n filter: blur(0px);\n transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit {\n transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active {\n transform: translate(-100%, 0);\n transition: transform 300ms;\n}\n.ycn-drawer__item-transition-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}";
|
|
3177
|
+
styleInject(css_248z$7);
|
|
3178
3178
|
|
|
3179
|
-
const b$
|
|
3179
|
+
const b$8 = block('drawer');
|
|
3180
3180
|
const TIMEOUT = 300;
|
|
3181
3181
|
const DrawerItem = ({ visible, content, className }) => {
|
|
3182
3182
|
const itemRef = React__default.useRef(null);
|
|
3183
|
-
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3184
|
-
React__default.createElement("div", { ref: itemRef, className: b$
|
|
3183
|
+
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$8('item-transition'), nodeRef: itemRef },
|
|
3184
|
+
React__default.createElement("div", { ref: itemRef, className: b$8('item', className) }, content)));
|
|
3185
3185
|
};
|
|
3186
3186
|
const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
|
|
3187
3187
|
let someItemVisible = false;
|
|
@@ -3239,9 +3239,9 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3239
3239
|
const veilRef = React__default.useRef(null);
|
|
3240
3240
|
return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
|
|
3241
3241
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
3242
|
-
return (React__default.createElement("div", { ref: containerRef, className: b$
|
|
3243
|
-
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3244
|
-
React__default.createElement("div", { ref: veilRef, className: b$
|
|
3242
|
+
return (React__default.createElement("div", { ref: containerRef, className: b$8(null, className), style: style },
|
|
3243
|
+
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$8('veil-transition'), nodeRef: veilRef },
|
|
3244
|
+
React__default.createElement("div", { ref: veilRef, className: b$8('veil'), onClick: onVeilClick })),
|
|
3245
3245
|
React__default.Children.map(children, (child) => {
|
|
3246
3246
|
const childElem = child;
|
|
3247
3247
|
if (childElem.type === DrawerItem) {
|
|
@@ -3253,10 +3253,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3253
3253
|
}));
|
|
3254
3254
|
};
|
|
3255
3255
|
|
|
3256
|
-
var css_248z$
|
|
3257
|
-
styleInject(css_248z$
|
|
3256
|
+
var css_248z$6 = ".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}\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}\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}";
|
|
3257
|
+
styleInject(css_248z$6);
|
|
3258
3258
|
|
|
3259
|
-
const b$
|
|
3259
|
+
const b$7 = block('logo');
|
|
3260
3260
|
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3261
3261
|
const hasClickHandler = typeof onClick === 'function';
|
|
3262
3262
|
const hasWrapper = typeof wrapper === 'function';
|
|
@@ -3274,18 +3274,18 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3274
3274
|
else if (icon) {
|
|
3275
3275
|
buttonIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
3276
3276
|
}
|
|
3277
|
-
const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$
|
|
3277
|
+
const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$7('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
|
|
3278
3278
|
let logo;
|
|
3279
3279
|
if (typeof text === 'function') {
|
|
3280
3280
|
logo = text();
|
|
3281
3281
|
}
|
|
3282
3282
|
else {
|
|
3283
|
-
logo = (React__default.createElement("div", { className: b$
|
|
3283
|
+
logo = (React__default.createElement("div", { className: b$7('logo'), style: { fontSize: textSize } }, text));
|
|
3284
3284
|
}
|
|
3285
|
-
return (React__default.createElement("div", { className: b$
|
|
3286
|
-
React__default.createElement("div", { className: b$
|
|
3285
|
+
return (React__default.createElement("div", { className: b$7() },
|
|
3286
|
+
React__default.createElement("div", { className: b$7('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3287
3287
|
!compact &&
|
|
3288
|
-
(hasWrapper ? (wrapper(logo, compact)) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$
|
|
3288
|
+
(hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$7('logo-link'), onClick: onClick }), logo)))));
|
|
3289
3289
|
};
|
|
3290
3290
|
|
|
3291
3291
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -3817,24 +3817,7 @@ function getItemsMinHeight(items) {
|
|
|
3817
3817
|
(pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
|
|
3818
3818
|
}
|
|
3819
3819
|
|
|
3820
|
-
var css_248z$
|
|
3821
|
-
styleInject(css_248z$6);
|
|
3822
|
-
|
|
3823
|
-
const b$7 = block('item-tooltip');
|
|
3824
|
-
const popupPlacement = ['right'];
|
|
3825
|
-
const ItemTooltip = ({ anchor, text }) => {
|
|
3826
|
-
const anchorRef = React__default.useRef(anchor);
|
|
3827
|
-
React__default.useEffect(() => {
|
|
3828
|
-
anchorRef.current = anchor;
|
|
3829
|
-
}, [anchor]);
|
|
3830
|
-
if (!anchor) {
|
|
3831
|
-
return null;
|
|
3832
|
-
}
|
|
3833
|
-
return (React__default.createElement(Popup, { className: b$7(), open: true, anchorRef: anchorRef, placement: popupPlacement, disableEscapeKeyDown: true, disableOutsideClick: true, disableLayer: true },
|
|
3834
|
-
React__default.createElement("div", { className: b$7('text') }, text)));
|
|
3835
|
-
};
|
|
3836
|
-
|
|
3837
|
-
var css_248z$5 = ".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: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}";
|
|
3820
|
+
var css_248z$5 = ".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}";
|
|
3838
3821
|
styleInject(css_248z$5);
|
|
3839
3822
|
|
|
3840
3823
|
const b$6 = block('composite-bar-item');
|
|
@@ -3854,7 +3837,6 @@ const Item = (props) => {
|
|
|
3854
3837
|
if (item.type === 'divider') {
|
|
3855
3838
|
return React__default.createElement("div", { className: b$6('menu-divider') });
|
|
3856
3839
|
}
|
|
3857
|
-
const [tooltipAnchor, setTooltipAnchor] = React__default.useState(null);
|
|
3858
3840
|
const [open, toggleOpen] = React__default.useState(false);
|
|
3859
3841
|
const ref = React__default.useRef(null);
|
|
3860
3842
|
const anchorRef = popupAnchor || ref;
|
|
@@ -3882,7 +3864,6 @@ const Item = (props) => {
|
|
|
3882
3864
|
* - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
|
|
3883
3865
|
*/
|
|
3884
3866
|
toggleOpen(!open);
|
|
3885
|
-
setTooltipAnchor(null);
|
|
3886
3867
|
}
|
|
3887
3868
|
else {
|
|
3888
3869
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false);
|
|
@@ -3896,17 +3877,8 @@ const Item = (props) => {
|
|
|
3896
3877
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3897
3878
|
}
|
|
3898
3879
|
} },
|
|
3899
|
-
React__default.createElement("div", { className: b$6('icon-place') }, compact ? (React__default.createElement(
|
|
3900
|
-
React__default.createElement("div", { onMouseEnter: (
|
|
3901
|
-
if (!open) {
|
|
3902
|
-
setTooltipAnchor(event.currentTarget);
|
|
3903
|
-
}
|
|
3904
|
-
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3905
|
-
}, onMouseLeave: () => {
|
|
3906
|
-
setTooltipAnchor(null);
|
|
3907
|
-
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3908
|
-
}, className: b$6('btn-icon') }, iconEl),
|
|
3909
|
-
enableTooltip && (React__default.createElement(ItemTooltip, { anchor: tooltipAnchor, text: tooltipText })))) : (iconEl)),
|
|
3880
|
+
React__default.createElement("div", { className: b$6('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$6('icon-tooltip', { 'item-type': type }) },
|
|
3881
|
+
React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$6('btn-icon') }, iconEl))) : (iconEl)),
|
|
3910
3882
|
React__default.createElement("div", { className: b$6('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3911
3883
|
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$6('popup'), open: popupVisible, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3912
3884
|
return item.link ? (React__default.createElement("a", { href: item.link, className: b$6('link') }, createdNode)) : (createdNode);
|
|
@@ -4105,7 +4077,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4105
4077
|
};
|
|
4106
4078
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4107
4079
|
|
|
4108
|
-
var css_248z$3 = ".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 --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 --aside-header-divider-line-color: var(--yc-color-
|
|
4080
|
+
var css_248z$3 = ".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 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__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_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::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::after {\n display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n display: block;\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}";
|
|
4109
4081
|
styleInject(css_248z$3);
|
|
4110
4082
|
|
|
4111
4083
|
const b$4 = block('aside-header');
|
|
@@ -4128,7 +4100,7 @@ class AsideHeader extends React__default.Component {
|
|
|
4128
4100
|
this.renderSecondPane = (size) => {
|
|
4129
4101
|
return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$4('content') }));
|
|
4130
4102
|
};
|
|
4131
|
-
this.renderLogo = () => React__default.createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact }));
|
|
4103
|
+
this.renderLogo = () => (React__default.createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4132
4104
|
this.renderHeader = () => (React__default.createElement("div", { className: b$4('header') },
|
|
4133
4105
|
this.renderLogo(),
|
|
4134
4106
|
React__default.createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
@@ -4165,6 +4137,11 @@ class AsideHeader extends React__default.Component {
|
|
|
4165
4137
|
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4166
4138
|
(_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed);
|
|
4167
4139
|
};
|
|
4140
|
+
this.onLogoClick = (event) => {
|
|
4141
|
+
var _a, _b, _c, _d;
|
|
4142
|
+
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4143
|
+
(_d = (_c = this.props.logo).onClick) === null || _d === void 0 ? void 0 : _d.call(_c, event);
|
|
4144
|
+
};
|
|
4168
4145
|
}
|
|
4169
4146
|
render() {
|
|
4170
4147
|
const { className, compact } = this.props;
|