@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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.4.0](https://github.com/gravity-ui/navigation/compare/v0.3.2...v0.4.0) (2023-03-06)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* use uikit Tooltip ([#42](https://github.com/gravity-ui/navigation/issues/42)) ([2de0cac](https://github.com/gravity-ui/navigation/commit/2de0cac90c730f40ab41c49312bdd367c4f9cada))
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* updated README.md storybook link ([#40](https://github.com/gravity-ui/navigation/issues/40)) ([511abd9](https://github.com/gravity-ui/navigation/commit/511abd9f1051b361e5918d91eaaf3bb1af65f2d3))
|
|
14
|
+
|
|
15
|
+
## [0.3.2](https://github.com/gravity-ui/navigation/compare/v0.3.1...v0.3.2) (2023-02-17)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* **AsideHeader:** panel border in High Contrast themes ([#37](https://github.com/gravity-ui/navigation/issues/37)) ([340f9bb](https://github.com/gravity-ui/navigation/commit/340f9bb5b728fe9757e9f9db26669f12e3770ae9))
|
|
21
|
+
* **Logo:** close panels by logo click ([#39](https://github.com/gravity-ui/navigation/issues/39)) ([860e8b2](https://github.com/gravity-ui/navigation/commit/860e8b29408ed5eba0880f0ebc63e2e6551ded4d))
|
|
22
|
+
|
|
3
23
|
## [0.3.1](https://github.com/gravity-ui/navigation/compare/v0.3.0...v0.3.1) (2022-12-29)
|
|
4
24
|
|
|
5
25
|
|
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
# @gravity-ui/navigation · [](https://www.npmjs.com/package/@gravity-ui/navigation) [](https://www.npmjs.com/package/@gravity-ui/navigation) [](https://github.com/gravity-ui/navigation/actions/workflows/ci.yml?query=branch:main) [](https://preview.yandexcloud.dev/navigation/)
|
|
2
2
|
|
|
3
|
-
Aside Header Navigation
|
|
3
|
+
### Aside Header Navigation · [Preview →](https://preview.yandexcloud.dev/navigation/)
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
|
|
5
7
|
## Install
|
|
6
8
|
|
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$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}";
|
|
118
|
+
styleInject(css_248z$c);
|
|
119
119
|
|
|
120
|
-
const b$
|
|
120
|
+
const b$d = 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$d({ 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$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}";
|
|
127
|
+
styleInject(css_248z$b);
|
|
128
128
|
|
|
129
|
-
const b$
|
|
129
|
+
const b$c = 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$c({ 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$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}";
|
|
136
|
+
styleInject(css_248z$a);
|
|
137
137
|
|
|
138
|
-
const b$
|
|
138
|
+
const b$b = 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$b({ type }) }, children);
|
|
141
141
|
};
|
|
142
142
|
ActionBarSection.displayName = 'ActionBar.Section';
|
|
143
143
|
|
|
144
|
-
var css_248z$
|
|
145
|
-
styleInject(css_248z$
|
|
144
|
+
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}";
|
|
145
|
+
styleInject(css_248z$9);
|
|
146
146
|
|
|
147
|
-
const b$
|
|
147
|
+
const b$a = 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$a() });
|
|
150
150
|
};
|
|
151
151
|
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
152
152
|
|
|
153
|
-
var css_248z$
|
|
154
|
-
styleInject(css_248z$
|
|
153
|
+
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}";
|
|
154
|
+
styleInject(css_248z$8);
|
|
155
155
|
|
|
156
|
-
const b$
|
|
156
|
+
const b$9 = 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$9(null, className), "aria-label": ariaLabel }, children));
|
|
159
159
|
};
|
|
160
160
|
ActionBar.displayName = 'ActionBar';
|
|
161
161
|
const PublicActionBar = Object.assign(ActionBar, {
|
|
@@ -3200,15 +3200,15 @@ SwitchTransition.defaultProps = {
|
|
|
3200
3200
|
mode: modes.out
|
|
3201
3201
|
};
|
|
3202
3202
|
|
|
3203
|
-
var css_248z$
|
|
3204
|
-
styleInject(css_248z$
|
|
3203
|
+
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}";
|
|
3204
|
+
styleInject(css_248z$7);
|
|
3205
3205
|
|
|
3206
|
-
const b$
|
|
3206
|
+
const b$8 = block('drawer');
|
|
3207
3207
|
const TIMEOUT = 300;
|
|
3208
3208
|
const DrawerItem = ({ visible, content, className }) => {
|
|
3209
3209
|
const itemRef = React__default["default"].useRef(null);
|
|
3210
|
-
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3211
|
-
React__default["default"].createElement("div", { ref: itemRef, className: b$
|
|
3210
|
+
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$8('item-transition'), nodeRef: itemRef },
|
|
3211
|
+
React__default["default"].createElement("div", { ref: itemRef, className: b$8('item', className) }, content)));
|
|
3212
3212
|
};
|
|
3213
3213
|
const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
|
|
3214
3214
|
let someItemVisible = false;
|
|
@@ -3266,9 +3266,9 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3266
3266
|
const veilRef = React__default["default"].useRef(null);
|
|
3267
3267
|
return (React__default["default"].createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
|
|
3268
3268
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
3269
|
-
return (React__default["default"].createElement("div", { ref: containerRef, className: b$
|
|
3270
|
-
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3271
|
-
React__default["default"].createElement("div", { ref: veilRef, className: b$
|
|
3269
|
+
return (React__default["default"].createElement("div", { ref: containerRef, className: b$8(null, className), style: style },
|
|
3270
|
+
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$8('veil-transition'), nodeRef: veilRef },
|
|
3271
|
+
React__default["default"].createElement("div", { ref: veilRef, className: b$8('veil'), onClick: onVeilClick })),
|
|
3272
3272
|
React__default["default"].Children.map(children, (child) => {
|
|
3273
3273
|
const childElem = child;
|
|
3274
3274
|
if (childElem.type === DrawerItem) {
|
|
@@ -3280,10 +3280,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3280
3280
|
}));
|
|
3281
3281
|
};
|
|
3282
3282
|
|
|
3283
|
-
var css_248z$
|
|
3284
|
-
styleInject(css_248z$
|
|
3283
|
+
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}";
|
|
3284
|
+
styleInject(css_248z$6);
|
|
3285
3285
|
|
|
3286
|
-
const b$
|
|
3286
|
+
const b$7 = block('logo');
|
|
3287
3287
|
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3288
3288
|
const hasClickHandler = typeof onClick === 'function';
|
|
3289
3289
|
const hasWrapper = typeof wrapper === 'function';
|
|
@@ -3301,18 +3301,18 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3301
3301
|
else if (icon) {
|
|
3302
3302
|
buttonIcon = React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
3303
3303
|
}
|
|
3304
|
-
const button = (React__default["default"].createElement(uikit.Button, Object.assign({ view: "flat", size: "l", className: b$
|
|
3304
|
+
const button = (React__default["default"].createElement(uikit.Button, Object.assign({ view: "flat", size: "l", className: b$7('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
|
|
3305
3305
|
let logo;
|
|
3306
3306
|
if (typeof text === 'function') {
|
|
3307
3307
|
logo = text();
|
|
3308
3308
|
}
|
|
3309
3309
|
else {
|
|
3310
|
-
logo = (React__default["default"].createElement("div", { className: b$
|
|
3310
|
+
logo = (React__default["default"].createElement("div", { className: b$7('logo'), style: { fontSize: textSize } }, text));
|
|
3311
3311
|
}
|
|
3312
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
3313
|
-
React__default["default"].createElement("div", { className: b$
|
|
3312
|
+
return (React__default["default"].createElement("div", { className: b$7() },
|
|
3313
|
+
React__default["default"].createElement("div", { className: b$7('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3314
3314
|
!compact &&
|
|
3315
|
-
(hasWrapper ? (wrapper(logo, compact)) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$
|
|
3315
|
+
(hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$7('logo-link'), onClick: onClick }), logo)))));
|
|
3316
3316
|
};
|
|
3317
3317
|
|
|
3318
3318
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -3844,24 +3844,7 @@ function getItemsMinHeight(items) {
|
|
|
3844
3844
|
(pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
|
|
3845
3845
|
}
|
|
3846
3846
|
|
|
3847
|
-
var css_248z$
|
|
3848
|
-
styleInject(css_248z$6);
|
|
3849
|
-
|
|
3850
|
-
const b$7 = block('item-tooltip');
|
|
3851
|
-
const popupPlacement = ['right'];
|
|
3852
|
-
const ItemTooltip = ({ anchor, text }) => {
|
|
3853
|
-
const anchorRef = React__default["default"].useRef(anchor);
|
|
3854
|
-
React__default["default"].useEffect(() => {
|
|
3855
|
-
anchorRef.current = anchor;
|
|
3856
|
-
}, [anchor]);
|
|
3857
|
-
if (!anchor) {
|
|
3858
|
-
return null;
|
|
3859
|
-
}
|
|
3860
|
-
return (React__default["default"].createElement(uikit.Popup, { className: b$7(), open: true, anchorRef: anchorRef, placement: popupPlacement, disableEscapeKeyDown: true, disableOutsideClick: true, disableLayer: true },
|
|
3861
|
-
React__default["default"].createElement("div", { className: b$7('text') }, text)));
|
|
3862
|
-
};
|
|
3863
|
-
|
|
3864
|
-
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}";
|
|
3847
|
+
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}";
|
|
3865
3848
|
styleInject(css_248z$5);
|
|
3866
3849
|
|
|
3867
3850
|
const b$6 = block('composite-bar-item');
|
|
@@ -3881,7 +3864,6 @@ const Item = (props) => {
|
|
|
3881
3864
|
if (item.type === 'divider') {
|
|
3882
3865
|
return React__default["default"].createElement("div", { className: b$6('menu-divider') });
|
|
3883
3866
|
}
|
|
3884
|
-
const [tooltipAnchor, setTooltipAnchor] = React__default["default"].useState(null);
|
|
3885
3867
|
const [open, toggleOpen] = React__default["default"].useState(false);
|
|
3886
3868
|
const ref = React__default["default"].useRef(null);
|
|
3887
3869
|
const anchorRef = popupAnchor || ref;
|
|
@@ -3909,7 +3891,6 @@ const Item = (props) => {
|
|
|
3909
3891
|
* - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
|
|
3910
3892
|
*/
|
|
3911
3893
|
toggleOpen(!open);
|
|
3912
|
-
setTooltipAnchor(null);
|
|
3913
3894
|
}
|
|
3914
3895
|
else {
|
|
3915
3896
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false);
|
|
@@ -3923,17 +3904,8 @@ const Item = (props) => {
|
|
|
3923
3904
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3924
3905
|
}
|
|
3925
3906
|
} },
|
|
3926
|
-
React__default["default"].createElement("div", { className: b$6('icon-place') }, compact ? (React__default["default"].createElement(
|
|
3927
|
-
React__default["default"].createElement("div", { onMouseEnter: (
|
|
3928
|
-
if (!open) {
|
|
3929
|
-
setTooltipAnchor(event.currentTarget);
|
|
3930
|
-
}
|
|
3931
|
-
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3932
|
-
}, onMouseLeave: () => {
|
|
3933
|
-
setTooltipAnchor(null);
|
|
3934
|
-
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3935
|
-
}, className: b$6('btn-icon') }, iconEl),
|
|
3936
|
-
enableTooltip && (React__default["default"].createElement(ItemTooltip, { anchor: tooltipAnchor, text: tooltipText })))) : (iconEl)),
|
|
3907
|
+
React__default["default"].createElement("div", { className: b$6('icon-place') }, compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$6('icon-tooltip', { 'item-type': type }) },
|
|
3908
|
+
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$6('btn-icon') }, iconEl))) : (iconEl)),
|
|
3937
3909
|
React__default["default"].createElement("div", { className: b$6('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3938
3910
|
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { className: b$6('popup'), open: popupVisible, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3939
3911
|
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$6('link') }, createdNode)) : (createdNode);
|
|
@@ -4132,7 +4104,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4132
4104
|
};
|
|
4133
4105
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4134
4106
|
|
|
4135
|
-
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-
|
|
4107
|
+
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}";
|
|
4136
4108
|
styleInject(css_248z$3);
|
|
4137
4109
|
|
|
4138
4110
|
const b$4 = block('aside-header');
|
|
@@ -4155,7 +4127,7 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4155
4127
|
this.renderSecondPane = (size) => {
|
|
4156
4128
|
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$4('content') }));
|
|
4157
4129
|
};
|
|
4158
|
-
this.renderLogo = () => React__default["default"].createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact }));
|
|
4130
|
+
this.renderLogo = () => (React__default["default"].createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4159
4131
|
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$4('header') },
|
|
4160
4132
|
this.renderLogo(),
|
|
4161
4133
|
React__default["default"].createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
@@ -4192,6 +4164,11 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4192
4164
|
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4193
4165
|
(_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed);
|
|
4194
4166
|
};
|
|
4167
|
+
this.onLogoClick = (event) => {
|
|
4168
|
+
var _a, _b, _c, _d;
|
|
4169
|
+
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4170
|
+
(_d = (_c = this.props.logo).onClick) === null || _d === void 0 ? void 0 : _d.call(_c, event);
|
|
4171
|
+
};
|
|
4195
4172
|
}
|
|
4196
4173
|
render() {
|
|
4197
4174
|
const { className, compact } = this.props;
|