@gravity-ui/navigation 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/build/cjs/components/Settings/Settings.d.ts +1 -0
- package/build/cjs/components/Settings/__stories__/SettingsDemo.d.ts +2 -1
- package/build/cjs/components/Settings/__stories__/SettingsMobileDemo.d.ts +2 -2
- package/build/cjs/components/Settings/collect-settings.d.ts +1 -1
- package/build/cjs/components/Title/Title.d.ts +12 -0
- package/build/cjs/components/Title/index.d.ts +1 -0
- package/build/cjs/components/index.d.ts +1 -0
- package/build/cjs/index.js +126 -91
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/Settings/Settings.d.ts +1 -0
- package/build/esm/components/Settings/__stories__/SettingsDemo.d.ts +2 -1
- package/build/esm/components/Settings/__stories__/SettingsMobileDemo.d.ts +2 -2
- package/build/esm/components/Settings/collect-settings.d.ts +1 -1
- package/build/esm/components/Title/Title.d.ts +12 -0
- package/build/esm/components/Title/index.d.ts +1 -0
- package/build/esm/components/index.d.ts +1 -0
- package/build/esm/index.js +127 -93
- package/build/esm/index.js.map +1 -1
- package/package.json +3 -1
package/build/esm/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent, useState, useMemo, useCallback } from 'react';
|
|
3
|
-
import { useBodyScrollLock, Button, Icon, Popup, List, Tooltip, Hotkey, TextInput, Tabs, Loader } from '@gravity-ui/uikit';
|
|
3
|
+
import { useBodyScrollLock, Button, Icon, Popup, List, Tooltip, Text, Hotkey, TextInput, Tabs, Loader } from '@gravity-ui/uikit';
|
|
4
4
|
import ReactDOM from 'react-dom';
|
|
5
|
+
import { Xmark } from '@gravity-ui/icons';
|
|
5
6
|
|
|
6
7
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
7
8
|
|
|
@@ -87,48 +88,48 @@ function styleInject(css, ref) {
|
|
|
87
88
|
}
|
|
88
89
|
}
|
|
89
90
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
styleInject(css_248z$
|
|
91
|
+
var css_248z$f = ".ycn-action-bar-group {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n margin-left: auto;\n margin-right: auto;\n}";
|
|
92
|
+
styleInject(css_248z$f);
|
|
92
93
|
|
|
93
|
-
const b$
|
|
94
|
+
const b$g = block('action-bar-group');
|
|
94
95
|
const ActionBarGroup = ({ children, className, pull }) => {
|
|
95
|
-
return (React__default.createElement("ul", { className: b$
|
|
96
|
+
return (React__default.createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
|
|
96
97
|
};
|
|
97
98
|
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
98
99
|
|
|
99
|
-
var css_248z$
|
|
100
|
-
styleInject(css_248z$
|
|
100
|
+
var css_248z$e = ".ycn-action-bar-item {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n margin-left: auto;\n margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n margin-left: 8px;\n}";
|
|
101
|
+
styleInject(css_248z$e);
|
|
101
102
|
|
|
102
|
-
const b$
|
|
103
|
+
const b$f = block('action-bar-item');
|
|
103
104
|
const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
104
|
-
return React__default.createElement("li", { className: b$
|
|
105
|
+
return React__default.createElement("li", { className: b$f({ pull, spacing }, className) }, children);
|
|
105
106
|
};
|
|
106
107
|
ActionBarItem.displayName = 'ActionBar.Item';
|
|
107
108
|
|
|
108
|
-
var css_248z$
|
|
109
|
-
styleInject(css_248z$
|
|
109
|
+
var css_248z$d = ".ycn-action-bar-section {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n border-left: solid 1px var(--yc-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n flex: 1 1 auto;\n padding-left: 20px;\n padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n padding-left: 6px;\n padding-right: 6px;\n}";
|
|
110
|
+
styleInject(css_248z$d);
|
|
110
111
|
|
|
111
|
-
const b$
|
|
112
|
+
const b$e = block('action-bar-section');
|
|
112
113
|
const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
113
|
-
return React__default.createElement("div", { className: b$
|
|
114
|
+
return React__default.createElement("div", { className: b$e({ type }) }, children);
|
|
114
115
|
};
|
|
115
116
|
ActionBarSection.displayName = 'ActionBar.Section';
|
|
116
117
|
|
|
117
|
-
var css_248z$
|
|
118
|
-
styleInject(css_248z$
|
|
118
|
+
var css_248z$c = ".ycn-action-bar-separator {\n list-style: none;\n margin: 0;\n padding: 0;\n margin-left: 6px;\n margin-right: 6px;\n border-right: solid 1px var(--yc-color-line-generic);\n height: 40px;\n}";
|
|
119
|
+
styleInject(css_248z$c);
|
|
119
120
|
|
|
120
|
-
const b$
|
|
121
|
+
const b$d = block('action-bar-separator');
|
|
121
122
|
const ActionBarSeparator = () => {
|
|
122
|
-
return React__default.createElement("li", { role: "separator", className: b$
|
|
123
|
+
return React__default.createElement("li", { role: "separator", className: b$d() });
|
|
123
124
|
};
|
|
124
125
|
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
125
126
|
|
|
126
|
-
var css_248z$
|
|
127
|
-
styleInject(css_248z$
|
|
127
|
+
var css_248z$b = ".ycn-action-bar {\n box-sizing: border-box;\n height: 40px;\n border-bottom: solid 1px var(--yc-color-line-generic);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}";
|
|
128
|
+
styleInject(css_248z$b);
|
|
128
129
|
|
|
129
|
-
const b$
|
|
130
|
+
const b$c = block('action-bar');
|
|
130
131
|
const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
|
|
131
|
-
return (React__default.createElement("section", { className: b$
|
|
132
|
+
return (React__default.createElement("section", { className: b$c(null, className), "aria-label": ariaLabel }, children));
|
|
132
133
|
};
|
|
133
134
|
ActionBar.displayName = 'ActionBar';
|
|
134
135
|
const PublicActionBar = Object.assign(ActionBar, {
|
|
@@ -153,7 +154,7 @@ var Dict;
|
|
|
153
154
|
const ASIDE_HEADER_FOOTER_ICON_SIZE = 20;
|
|
154
155
|
const ASIDE_HEADER_COMPACT_WIDTH = 56;
|
|
155
156
|
const ASIDE_HEADER_EXPANDED_WIDTH = 236;
|
|
156
|
-
const defaultDict$
|
|
157
|
+
const defaultDict$2 = {
|
|
157
158
|
[Dict.CollapseButton]: 'Collapse',
|
|
158
159
|
[Dict.ExpandButton]: 'Expand',
|
|
159
160
|
[Dict.MoreButton]: 'More',
|
|
@@ -3180,15 +3181,15 @@ SwitchTransition.defaultProps = {
|
|
|
3180
3181
|
mode: modes.out
|
|
3181
3182
|
};
|
|
3182
3183
|
|
|
3183
|
-
var css_248z$
|
|
3184
|
-
styleInject(css_248z$
|
|
3184
|
+
var css_248z$a = ".ycn-drawer__item {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: 100%;\n will-change: transform;\n background-color: var(--yc-color-base-background);\n}\n.ycn-drawer__item_direction_right {\n left: auto;\n right: 0;\n}\n.ycn-drawer__item-transition-enter {\n transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-enter {\n transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-enter-active, .ycn-drawer__item-transition_direction_right-enter-active {\n transform: translate(0, 0);\n transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done, .ycn-drawer__item-transition_direction_right-enter-done {\n filter: blur(0px);\n transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit, .ycn-drawer__item-transition_direction_right-exit {\n transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active, .ycn-drawer__item-transition_direction_right-exit-active {\n transition: transform 300ms;\n}\n.ycn-drawer__item-transition-exit-active {\n transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-exit-active {\n transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-exit-done, .ycn-drawer__item-transition_direction_right-exit-done {\n visibility: hidden;\n}\n.ycn-drawer__veil {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n background-color: var(--yc-color-sfx-veil);\n}\n.ycn-drawer__veil-transition-enter {\n opacity: 0;\n}\n.ycn-drawer__veil-transition-enter-active {\n opacity: 1;\n transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit {\n opacity: 1;\n}\n.ycn-drawer__veil-transition-exit-active {\n opacity: 0;\n transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit-done {\n visibility: hidden;\n}";
|
|
3185
|
+
styleInject(css_248z$a);
|
|
3185
3186
|
|
|
3186
|
-
const b$
|
|
3187
|
+
const b$b = block('drawer');
|
|
3187
3188
|
const TIMEOUT = 300;
|
|
3188
3189
|
const DrawerItem = ({ visible, content, direction, className }) => {
|
|
3189
3190
|
const itemRef = React__default.useRef(null);
|
|
3190
|
-
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3191
|
-
React__default.createElement("div", { ref: itemRef, className: b$
|
|
3191
|
+
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$b('item-transition', { direction }), nodeRef: itemRef },
|
|
3192
|
+
React__default.createElement("div", { ref: itemRef, className: b$b('item', { direction }, className) }, content)));
|
|
3192
3193
|
};
|
|
3193
3194
|
const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
|
|
3194
3195
|
let someItemVisible = false;
|
|
@@ -3219,9 +3220,9 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3219
3220
|
const veilRef = React__default.useRef(null);
|
|
3220
3221
|
return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
|
|
3221
3222
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
3222
|
-
return (React__default.createElement("div", { ref: containerRef, className: b$
|
|
3223
|
-
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3224
|
-
React__default.createElement("div", { ref: veilRef, className: b$
|
|
3223
|
+
return (React__default.createElement("div", { ref: containerRef, className: b$b(null, className), style: style },
|
|
3224
|
+
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$b('veil-transition'), nodeRef: veilRef },
|
|
3225
|
+
React__default.createElement("div", { ref: veilRef, className: b$b('veil'), onClick: onVeilClick })),
|
|
3225
3226
|
React__default.Children.map(children, (child) => {
|
|
3226
3227
|
const childElem = child;
|
|
3227
3228
|
if (childElem.type === DrawerItem) {
|
|
@@ -3233,10 +3234,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3233
3234
|
}));
|
|
3234
3235
|
};
|
|
3235
3236
|
|
|
3236
|
-
var css_248z$
|
|
3237
|
-
styleInject(css_248z$
|
|
3237
|
+
var css_248z$9 = ".ycn-logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n height: 40px;\n}\n.ycn-logo__logo-btn-place {\n flex-shrink: 0;\n width: var(--aside-header-min-width);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.ycn-logo__logo-btn-place .yc-button::before {\n background-color: transparent;\n}\n.ycn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n --yc-button-height: 38px;\n}\n.ycn-logo__logo {\n font-size: var(--yc-text-body-2-font-size);\n line-height: var(--yc-text-body-2-line-height);\n font-weight: var(--yc-text-body-font-weight);\n vertical-align: middle;\n cursor: pointer;\n}\n.ycn-logo__logo-link, .ycn-logo__logo-link:hover, .ycn-logo__logo-link:active, .ycn-logo__logo-link:visited, .ycn-logo__logo-link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.yc-root .ycn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n background-color: transparent;\n}";
|
|
3238
|
+
styleInject(css_248z$9);
|
|
3238
3239
|
|
|
3239
|
-
const b$
|
|
3240
|
+
const b$a = block('logo');
|
|
3240
3241
|
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3241
3242
|
const hasClickHandler = typeof onClick === 'function';
|
|
3242
3243
|
const hasWrapper = typeof wrapper === 'function';
|
|
@@ -3254,18 +3255,18 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3254
3255
|
else if (icon) {
|
|
3255
3256
|
buttonIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
3256
3257
|
}
|
|
3257
|
-
const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$
|
|
3258
|
+
const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$a('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
|
|
3258
3259
|
let logo;
|
|
3259
3260
|
if (typeof text === 'function') {
|
|
3260
3261
|
logo = text();
|
|
3261
3262
|
}
|
|
3262
3263
|
else {
|
|
3263
|
-
logo = (React__default.createElement("div", { className: b$
|
|
3264
|
+
logo = (React__default.createElement("div", { className: b$a('logo'), style: { fontSize: textSize } }, text));
|
|
3264
3265
|
}
|
|
3265
|
-
return (React__default.createElement("div", { className: b$
|
|
3266
|
-
React__default.createElement("div", { className: b$
|
|
3266
|
+
return (React__default.createElement("div", { className: b$a() },
|
|
3267
|
+
React__default.createElement("div", { className: b$a('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3267
3268
|
!compact &&
|
|
3268
|
-
(hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$
|
|
3269
|
+
(hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$a('logo-link'), onClick: onClick }), logo)))));
|
|
3269
3270
|
};
|
|
3270
3271
|
|
|
3271
3272
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -3797,16 +3798,16 @@ function getItemsMinHeight(items) {
|
|
|
3797
3798
|
(pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
|
|
3798
3799
|
}
|
|
3799
3800
|
|
|
3800
|
-
var css_248z$
|
|
3801
|
-
styleInject(css_248z$
|
|
3801
|
+
var css_248z$8 = ".ycn-composite-bar-item {\n --composite-bar-item-action-size: 36px;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n cursor: pointer;\n}\n.ycn-composite-bar-item__icon {\n color: var(--yc-color-text-misc);\n}\n.ycn-composite-bar-item__icon-place {\n flex-shrink: 0;\n width: var(--aside-header-min-width);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n.ycn-composite-bar-item__title {\n display: flex;\n overflow: hidden;\n}\n.ycn-composite-bar-item__title-text {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.ycn-composite-bar-item__title-adornment {\n margin: 0 10px;\n}\n.ycn-composite-bar-item__collapse-item {\n display: flex;\n padding: 0 16px;\n align-items: center;\n width: 100%;\n height: 100%;\n cursor: pointer;\n}\n.ycn-composite-bar-item__collapse-item .ycn-composite-bar-item__title-adornment {\n margin-right: 0;\n}\n.ycn-composite-bar-item__menu-divider {\n margin: 0 8px;\n width: 100%;\n border-top: 1px solid var(--yc-color-line-generic);\n cursor: default;\n}\n.ycn-composite-bar-item__collapse-items-popup-content {\n padding: 4px 0;\n}\n.ycn-composite-bar-item__link {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n.ycn-composite-bar-item__link, .ycn-composite-bar-item__link:hover, .ycn-composite-bar-item__link:active, .ycn-composite-bar-item__link:visited, .ycn-composite-bar-item__link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.ycn-composite-bar-item__btn-icon {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ycn-composite-bar-item_type_action {\n justify-content: center;\n height: var(--composite-bar-item-action-size);\n margin: 0 10px 8px;\n background: var(--yc-color-base-float);\n box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n border-radius: var(--composite-bar-item-action-size);\n transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.ycn-composite-bar-item_type_action:focus {\n box-shadow: 0 0 0 2px var(--yc-color-line-misc);\n}\n.ycn-composite-bar-item_type_action:focus:not(:focus-visible) {\n box-shadow: none;\n}\n.ycn-composite-bar-item_type_action:hover {\n background-color: var(--yc-color-base-float-hover);\n}\n.ycn-composite-bar-item_type_action:active {\n box-shadow: 0 1px 2px var(--yc-color-sfx-shadow);\n transition: none;\n transform: scale(0.96);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__icon-place {\n width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n margin-right: 16px;\n}\n.ycn-composite-bar-item__icon-tooltip_item-type_action {\n margin-left: 10px;\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact).ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular {\n background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact):not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular {\n background-color: var(--yc-color-base-simple-hover);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action {\n width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n margin: 0;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: 38px;\n height: 38px;\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: 38px;\n height: 38px;\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n background-color: var(--yc-color-base-simple-hover);\n}";
|
|
3802
|
+
styleInject(css_248z$8);
|
|
3802
3803
|
|
|
3803
|
-
const b$
|
|
3804
|
+
const b$9 = block('composite-bar-item');
|
|
3804
3805
|
function renderItemTitle(item) {
|
|
3805
|
-
let titleNode = React__default.createElement("div", { className: b$
|
|
3806
|
+
let titleNode = React__default.createElement("div", { className: b$9('title-text') }, item.title);
|
|
3806
3807
|
if (item.rightAdornment) {
|
|
3807
3808
|
titleNode = (React__default.createElement(React__default.Fragment, null,
|
|
3808
3809
|
titleNode,
|
|
3809
|
-
React__default.createElement("div", { className: b$
|
|
3810
|
+
React__default.createElement("div", { className: b$9('title-adornment') }, item.rightAdornment)));
|
|
3810
3811
|
}
|
|
3811
3812
|
return titleNode;
|
|
3812
3813
|
}
|
|
@@ -3815,7 +3816,7 @@ const defaultPopupOffset = [-20, 8];
|
|
|
3815
3816
|
const Item = (props) => {
|
|
3816
3817
|
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3817
3818
|
if (item.type === 'divider') {
|
|
3818
|
-
return React__default.createElement("div", { className: b$
|
|
3819
|
+
return React__default.createElement("div", { className: b$9('menu-divider') });
|
|
3819
3820
|
}
|
|
3820
3821
|
const [open, toggleOpen] = React__default.useState(false);
|
|
3821
3822
|
const ref = React__default.useRef(null);
|
|
@@ -3836,7 +3837,7 @@ const Item = (props) => {
|
|
|
3836
3837
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
3837
3838
|
}, [onClosePopup]);
|
|
3838
3839
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
3839
|
-
const createdNode = (React__default.createElement("div", { className: b$
|
|
3840
|
+
const createdNode = (React__default.createElement("div", { className: b$9({ type, current, compact }, className), ref: ref, onClick: () => {
|
|
3840
3841
|
if (collapsedItem) {
|
|
3841
3842
|
/**
|
|
3842
3843
|
* If we call onItemClick for collapsedItem then:
|
|
@@ -3857,13 +3858,13 @@ const Item = (props) => {
|
|
|
3857
3858
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3858
3859
|
}
|
|
3859
3860
|
} },
|
|
3860
|
-
React__default.createElement("div", { className: b$
|
|
3861
|
-
React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$
|
|
3862
|
-
React__default.createElement("div", { className: b$
|
|
3863
|
-
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$
|
|
3864
|
-
return item.link ? (React__default.createElement("a", { href: item.link, className: b$
|
|
3861
|
+
React__default.createElement("div", { className: b$9('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$9('icon-tooltip', { 'item-type': type }) },
|
|
3862
|
+
React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$9('btn-icon') }, iconEl))) : (iconEl)),
|
|
3863
|
+
React__default.createElement("div", { className: b$9('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3864
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$9('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3865
|
+
return item.link ? (React__default.createElement("a", { href: item.link, className: b$9('link') }, createdNode)) : (createdNode);
|
|
3865
3866
|
};
|
|
3866
|
-
const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$
|
|
3867
|
+
const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$9('icon') }) : null;
|
|
3867
3868
|
const titleNode = renderItemTitle(item);
|
|
3868
3869
|
const params = { icon: iconNode, title: titleNode };
|
|
3869
3870
|
let node;
|
|
@@ -3881,13 +3882,13 @@ const Item = (props) => {
|
|
|
3881
3882
|
Item.displayName = 'Item';
|
|
3882
3883
|
function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
3883
3884
|
return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
|
|
3884
|
-
React__default.createElement("div", { className: b$
|
|
3885
|
-
React__default.createElement(List, { itemClassName: b$
|
|
3885
|
+
React__default.createElement("div", { className: b$9('collapse-items-popup-content') },
|
|
3886
|
+
React__default.createElement(List, { itemClassName: b$9('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
|
|
3886
3887
|
const makeCollapseNode = ({ title: titleEl }) => {
|
|
3887
|
-
const res = (React__default.createElement("div", { className: b$
|
|
3888
|
+
const res = (React__default.createElement("div", { className: b$9('collapse-item'), onClick: () => {
|
|
3888
3889
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3889
3890
|
} }, titleEl));
|
|
3890
|
-
return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$
|
|
3891
|
+
return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$9('link') }, res)) : (res);
|
|
3891
3892
|
};
|
|
3892
3893
|
const titleNode = renderItemTitle(collapseItem);
|
|
3893
3894
|
const params = { title: titleNode };
|
|
@@ -3917,10 +3918,10 @@ var SvgDots = function SvgDots(props) {
|
|
|
3917
3918
|
};
|
|
3918
3919
|
var dotsIcon = SvgDots;
|
|
3919
3920
|
|
|
3920
|
-
var css_248z$
|
|
3921
|
-
styleInject(css_248z$
|
|
3921
|
+
var css_248z$7 = ".ycn-composite-bar {\n flex: 1 0 auto;\n width: 100%;\n min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n background-color: transparent;\n}";
|
|
3922
|
+
styleInject(css_248z$7);
|
|
3922
3923
|
|
|
3923
|
-
const b$
|
|
3924
|
+
const b$8 = block('composite-bar');
|
|
3924
3925
|
class CompositeBar extends React__default.Component {
|
|
3925
3926
|
constructor() {
|
|
3926
3927
|
super(...arguments);
|
|
@@ -3935,10 +3936,10 @@ class CompositeBar extends React__default.Component {
|
|
|
3935
3936
|
return null;
|
|
3936
3937
|
}
|
|
3937
3938
|
if (!enableCollapsing) {
|
|
3938
|
-
return React__default.createElement("div", { className: b$
|
|
3939
|
+
return React__default.createElement("div", { className: b$8() }, this.renderMenu());
|
|
3939
3940
|
}
|
|
3940
3941
|
const minHeight = getItemsMinHeight(items);
|
|
3941
|
-
return (React__default.createElement("div", { className: b$
|
|
3942
|
+
return (React__default.createElement("div", { className: b$8({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
|
|
3942
3943
|
const style = {
|
|
3943
3944
|
width,
|
|
3944
3945
|
height,
|
|
@@ -3949,7 +3950,7 @@ class CompositeBar extends React__default.Component {
|
|
|
3949
3950
|
renderAutosizeMenu(height) {
|
|
3950
3951
|
const { compact, onItemClick } = this.props;
|
|
3951
3952
|
const { listItems, collapseItems } = this.getAutosizeListItems(height);
|
|
3952
|
-
return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex(listItems), itemHeight: getItemHeight, itemClassName: b$
|
|
3953
|
+
return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex(listItems), itemHeight: getItemHeight, itemClassName: b$8('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, { item: item, onMouseLeave: () => {
|
|
3953
3954
|
var _a;
|
|
3954
3955
|
if (compact) {
|
|
3955
3956
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -3958,7 +3959,7 @@ class CompositeBar extends React__default.Component {
|
|
|
3958
3959
|
}
|
|
3959
3960
|
renderMenu() {
|
|
3960
3961
|
const { items, onItemClick, compact } = this.props;
|
|
3961
|
-
return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$
|
|
3962
|
+
return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$8('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, { item: item, onMouseLeave: () => {
|
|
3962
3963
|
var _a;
|
|
3963
3964
|
if (compact) {
|
|
3964
3965
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -3968,7 +3969,7 @@ class CompositeBar extends React__default.Component {
|
|
|
3968
3969
|
getMoreButtonItem() {
|
|
3969
3970
|
var _a;
|
|
3970
3971
|
const { dict } = this.props;
|
|
3971
|
-
const title = (_a = dict === null || dict === void 0 ? void 0 : dict[Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$
|
|
3972
|
+
const title = (_a = dict === null || dict === void 0 ? void 0 : dict[Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$2[Dict.MoreButton];
|
|
3972
3973
|
return {
|
|
3973
3974
|
id: COLLAPSE_ITEM_ID,
|
|
3974
3975
|
title,
|
|
@@ -4058,10 +4059,10 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4058
4059
|
};
|
|
4059
4060
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4060
4061
|
|
|
4061
|
-
var css_248z$
|
|
4062
|
-
styleInject(css_248z$
|
|
4062
|
+
var css_248z$6 = ".yc-root {\n --aside-header-background-color: var(--yc-color-base-info);\n --aside-header-collapse-button-divider-line-color: var(\n --aside-header-header-divider-line-color\n );\n}\n\n.yc-root_theme_light,\n.yc-root_theme_light-hc {\n --aside-header-divider-line-color: transparent;\n --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark,\n.yc-root_theme_dark-hc {\n --aside-header-divider-line-color: var(--yc-color-line-solid);\n --aside-header-header-divider-line-color: var(--yc-color-line-solid);\n}\n\n.ycn-aside-header {\n --aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n position: sticky;\n top: 0;\n left: 0;\n height: 100vh;\n width: inherit;\n display: flex;\n flex-direction: column;\n background-color: var(--yc-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n width: 1px;\n height: 100%;\n content: \"\";\n background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n}\n.ycn-aside-header__aside-content {\n --gradient-height: 334px;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n width: inherit;\n height: inherit;\n position: relative;\n z-index: 2;\n user-select: none;\n}\n.ycn-aside-header__aside-content::after {\n position: absolute;\n top: 0;\n right: -100px;\n bottom: 0;\n width: 100px;\n content: \"\";\n box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n margin: 8px 0;\n}\n.ycn-aside-header__aside-content_with-decoration {\n background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n background: transparent;\n}\n.ycn-aside-header__header {\n --aside-header-header-divider-height: 29px;\n position: relative;\n z-index: 1;\n flex: none;\n box-sizing: border-box;\n width: 100%;\n padding-top: 8px;\n padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -2;\n display: none;\n color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header_with-decoration::before {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -2;\n display: none;\n width: 100%;\n height: calc(100% - var(--aside-header-header-divider-height));\n content: \"\";\n background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n position: absolute;\n bottom: 12px;\n left: 0;\n z-index: -2;\n width: 100%;\n height: 1px;\n content: \"\";\n background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration .ycn-aside-header__header-divider {\n display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration::after {\n display: none;\n}\n.ycn-aside-header__menu-items {\n flex-grow: 1;\n}\n.ycn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.ycn-aside-header__panels {\n z-index: 98;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n overflow: auto;\n}\n.ycn-aside-header__panel {\n height: 100%;\n}\n.ycn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.ycn-aside-header__content {\n width: calc(100% - var(--aside-header-size));\n z-index: 95;\n}\n.ycn-aside-header__collapse-button {\n --yc-button-background-color-hover: transparent;\n overflow: hidden;\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: 20px;\n border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-primary);\n}";
|
|
4063
|
+
styleInject(css_248z$6);
|
|
4063
4064
|
|
|
4064
|
-
const b$
|
|
4065
|
+
const b$7 = block('aside-header');
|
|
4065
4066
|
class AsideHeader extends React__default.Component {
|
|
4066
4067
|
constructor() {
|
|
4067
4068
|
super(...arguments);
|
|
@@ -4069,26 +4070,26 @@ class AsideHeader extends React__default.Component {
|
|
|
4069
4070
|
this.renderFirstPane = (size) => {
|
|
4070
4071
|
const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
|
|
4071
4072
|
return (React__default.createElement(React__default.Fragment, null,
|
|
4072
|
-
React__default.createElement("div", { className: b$
|
|
4073
|
-
React__default.createElement("div", { className: b$
|
|
4074
|
-
React__default.createElement("div", { className: b$
|
|
4073
|
+
React__default.createElement("div", { className: b$7('aside'), style: { width: size } },
|
|
4074
|
+
React__default.createElement("div", { className: b$7('aside-popup-anchor'), ref: this.asideRef }),
|
|
4075
|
+
React__default.createElement("div", { className: b$7('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4075
4076
|
this.renderHeader(),
|
|
4076
|
-
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$
|
|
4077
|
+
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$7('menu-items') })),
|
|
4077
4078
|
this.renderFooter(size),
|
|
4078
4079
|
this.renderCollapseButton())),
|
|
4079
4080
|
panelItems && this.renderPanels(size)));
|
|
4080
4081
|
};
|
|
4081
4082
|
this.renderSecondPane = (size) => {
|
|
4082
|
-
return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$
|
|
4083
|
+
return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$7('content') }));
|
|
4083
4084
|
};
|
|
4084
4085
|
this.renderLogo = () => (React__default.createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4085
|
-
this.renderHeader = () => (React__default.createElement("div", { className: b$
|
|
4086
|
+
this.renderHeader = () => (React__default.createElement("div", { className: b$7('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4086
4087
|
this.renderLogo(),
|
|
4087
4088
|
React__default.createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
4088
|
-
React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$
|
|
4089
|
+
React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$7('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4089
4090
|
this.renderFooter = (size) => {
|
|
4090
4091
|
const { compact, renderFooter } = this.props;
|
|
4091
|
-
return (React__default.createElement("div", { className: b$
|
|
4092
|
+
return (React__default.createElement("div", { className: b$7('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4092
4093
|
size,
|
|
4093
4094
|
compact,
|
|
4094
4095
|
asideRef: this.asideRef,
|
|
@@ -4096,14 +4097,14 @@ class AsideHeader extends React__default.Component {
|
|
|
4096
4097
|
};
|
|
4097
4098
|
this.renderPanels = (size) => {
|
|
4098
4099
|
const { panelItems } = this.props;
|
|
4099
|
-
return (React__default.createElement(Drawer, { className: b$
|
|
4100
|
+
return (React__default.createElement(Drawer, { className: b$7('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
|
|
4100
4101
|
};
|
|
4101
4102
|
this.renderCollapseButton = () => {
|
|
4102
4103
|
var _a;
|
|
4103
4104
|
const { compact, dict } = this.props;
|
|
4104
4105
|
const typeButton = compact ? Dict.ExpandButton : Dict.CollapseButton;
|
|
4105
|
-
return (React__default.createElement(Button, { className: b$
|
|
4106
|
-
React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$
|
|
4106
|
+
return (React__default.createElement(Button, { className: b$7('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: (_a = dict === null || dict === void 0 ? void 0 : dict[typeButton]) !== null && _a !== void 0 ? _a : defaultDict$2[typeButton] },
|
|
4107
|
+
React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$7('collapse-icon'), width: "16", height: "10" })));
|
|
4107
4108
|
};
|
|
4108
4109
|
this.onCollapseButtonClick = () => {
|
|
4109
4110
|
var _a, _b;
|
|
@@ -4127,8 +4128,8 @@ class AsideHeader extends React__default.Component {
|
|
|
4127
4128
|
render() {
|
|
4128
4129
|
const { className, compact } = this.props;
|
|
4129
4130
|
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
4130
|
-
return (React__default.createElement("div", { className: b$
|
|
4131
|
-
React__default.createElement("div", { className: b$
|
|
4131
|
+
return (React__default.createElement("div", { className: b$7({ compact }, className) },
|
|
4132
|
+
React__default.createElement("div", { className: b$7('pane-container') },
|
|
4132
4133
|
this.renderFirstPane(size),
|
|
4133
4134
|
this.renderSecondPane(size))));
|
|
4134
4135
|
}
|
|
@@ -4167,14 +4168,31 @@ function __rest(s, e) {
|
|
|
4167
4168
|
return t;
|
|
4168
4169
|
}
|
|
4169
4170
|
|
|
4170
|
-
var css_248z$
|
|
4171
|
-
styleInject(css_248z$
|
|
4171
|
+
var css_248z$5 = ".ycn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4172
|
+
styleInject(css_248z$5);
|
|
4172
4173
|
|
|
4173
|
-
const b$
|
|
4174
|
+
const b$6 = block('footer-item');
|
|
4174
4175
|
const FooterItem = (_a) => {
|
|
4175
4176
|
var { item } = _a, props = __rest(_a, ["item"]);
|
|
4176
|
-
return (React__default.createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$
|
|
4177
|
+
return (React__default.createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$6({ compact: props.compact }), onItemClick: item.onItemClick })));
|
|
4178
|
+
};
|
|
4179
|
+
|
|
4180
|
+
var css_248z$4 = ".ycn-title {\n box-sizing: border-box;\n padding: 14px 10px 14px 20px;\n min-height: 64px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.ycn-title_separator {\n border-bottom: 1px solid var(--yc-color-line-generic);\n}\n.ycn-title__text {\n margin: 0;\n margin-right: 20px;\n}";
|
|
4181
|
+
styleInject(css_248z$4);
|
|
4182
|
+
|
|
4183
|
+
const b$5 = block('title');
|
|
4184
|
+
const defaultDict$1 = {
|
|
4185
|
+
close: 'Close',
|
|
4186
|
+
};
|
|
4187
|
+
const Title = ({ children, closeIconSize = 23, hasSeparator, dict = defaultDict$1, onClose, }) => {
|
|
4188
|
+
return (React__default.createElement("div", { className: b$5({ separator: hasSeparator }) },
|
|
4189
|
+
React__default.createElement(Text, { className: b$5('text'), as: 'h3', variant: 'subheader-3' }, children),
|
|
4190
|
+
onClose && (React__default.createElement(Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
|
|
4191
|
+
'aria-label': dict['close'],
|
|
4192
|
+
} },
|
|
4193
|
+
React__default.createElement(Icon, { data: Xmark, size: closeIconSize })))));
|
|
4177
4194
|
};
|
|
4195
|
+
Title.displayName = 'Title';
|
|
4178
4196
|
|
|
4179
4197
|
function flattenHotkeyGroups(hotkeys) {
|
|
4180
4198
|
const result = [];
|
|
@@ -5053,7 +5071,7 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5053
5071
|
return { items, hidden };
|
|
5054
5072
|
}
|
|
5055
5073
|
|
|
5056
|
-
var css_248z = ".ycn-settings {\n display: grid;\n grid-template-columns: 216px 1fr;\n width: 834px;\n height: 100%;\n}\n.ycn-settings_view_mobile {\n display: block;\n width: auto;\n height: calc(80vh - 56px);\n overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n .ycn-settings_view_mobile {\n /* stylelint-disable-next-line */\n height: calc(90dvh - 56px);\n }\n}\n.ycn-settings_view_mobile.ycn-settings_loading {\n text-align: center;\n}\n.ycn-settings_view_mobile .ycn-settings__loader {\n margin-top: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__search {\n padding: 0 20px;\n margin: 4px 0 16px;\n}\n.ycn-settings_view_mobile .ycn-settings__page {\n
|
|
5074
|
+
var css_248z = ".ycn-settings {\n display: grid;\n grid-template-columns: 216px 1fr;\n width: 834px;\n height: 100%;\n}\n.ycn-settings_view_mobile {\n display: block;\n width: auto;\n height: calc(80vh - 56px);\n overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n .ycn-settings_view_mobile {\n /* stylelint-disable-next-line */\n height: calc(90dvh - 56px);\n }\n}\n.ycn-settings_view_mobile.ycn-settings_loading {\n text-align: center;\n}\n.ycn-settings_view_mobile .ycn-settings__loader {\n margin-top: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__search {\n padding: 0 20px;\n margin: 4px 0 16px;\n}\n.ycn-settings_view_mobile .ycn-settings__page {\n overflow-y: visible;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:first-child {\n margin-left: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:last-child {\n margin-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading {\n font-size: var(--yc-text-subheader-3-font-size);\n line-height: var(--yc-text-subheader-3-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__section-subheader {\n color: var(--yc-color-text-secondary);\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings-subheader {\n margin-top: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item {\n margin-top: 0;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings__section-item, .ycn-settings_view_mobile .ycn-settings__section-subheader + .ycn-settings__section-item {\n margin-top: 30px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item + .ycn-settings__section-item {\n margin-top: 22px;\n}\n.ycn-settings_view_mobile .ycn-settings__item:not(.ycn-settings_view_mobile .ycn-settings__item_mode_row) {\n grid-template-columns: 1fr;\n gap: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-heading {\n font-size: var(--yc-text-body-2-font-size);\n line-height: var(--yc-text-body-2-line-height);\n font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item-description {\n font-size: var(--yc-text-body-1-font-size);\n line-height: var(--yc-text-body-1-line-height);\n font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row {\n grid-template-columns: 1fr auto;\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row .ycn-settings__item-heading {\n padding-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-content {\n width: 100%;\n}\n.ycn-settings_loading {\n grid-template-columns: auto;\n}\n.ycn-settings__loader {\n align-self: center;\n justify-self: center;\n}\n.ycn-settings__not-found {\n display: grid;\n align-items: center;\n justify-items: center;\n height: 100%;\n}\n.ycn-settings__menu {\n border-right: 1px solid var(--yc-color-line-generic);\n}\n.ycn-settings__heading {\n font-size: var(--yc-text-subheader-2-font-size);\n line-height: var(--yc-text-subheader-2-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n margin: 20px 20px 0;\n}\n.ycn-settings__search {\n margin: 0 20px 16px;\n}\n.ycn-settings__page {\n overflow-y: auto;\n}\n.ycn-settings__content {\n padding: 20px;\n}\n.ycn-settings__section-heading {\n font-size: var(--yc-text-subheader-2-font-size);\n line-height: var(--yc-text-subheader-2-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n margin: 0;\n}\n.ycn-settings__section-item {\n margin-top: 24px;\n}\n.ycn-settings__section + .ycn-settings__section {\n margin-top: 32px;\n}\n.ycn-settings__item {\n display: grid;\n grid-template-columns: 216px 1fr;\n justify-items: start;\n}\n.ycn-settings__item_align_top {\n align-items: start;\n}\n.ycn-settings__item_align_center {\n align-items: center;\n}\n.ycn-settings__item-title_badge {\n position: relative;\n}\n.ycn-settings__item-title_badge::after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--yc-color-text-danger);\n position: absolute;\n right: -8px;\n top: 1px;\n}\n.ycn-settings__item-description {\n font-size: var(--yc-text-caption-2-font-size);\n line-height: var(--yc-text-caption-2-line-height);\n font-weight: var(--yc-text-caption-font-weight);\n display: block;\n margin-top: 2px;\n padding-right: 20px;\n color: var(--yc-color-text-secondary);\n}\n.ycn-settings__found {\n font-weight: var(--yc-text-accent-font-weight);\n background: var(--yc-color-base-selection);\n}";
|
|
5057
5075
|
styleInject(css_248z);
|
|
5058
5076
|
|
|
5059
5077
|
const b = block('settings');
|
|
@@ -5069,10 +5087,22 @@ function Settings(_a) {
|
|
|
5069
5087
|
}
|
|
5070
5088
|
return (React__default.createElement(SettingsContent, Object.assign({ view: view }, props), children));
|
|
5071
5089
|
}
|
|
5090
|
+
const getPageTitleById = (menu, activePage) => {
|
|
5091
|
+
for (const firstLevel of menu) {
|
|
5092
|
+
if ('groupTitle' in firstLevel) {
|
|
5093
|
+
for (const secondLevel of firstLevel.items)
|
|
5094
|
+
if (secondLevel.id === activePage)
|
|
5095
|
+
return secondLevel.title;
|
|
5096
|
+
}
|
|
5097
|
+
else if (firstLevel.id === activePage)
|
|
5098
|
+
return firstLevel.title;
|
|
5099
|
+
}
|
|
5100
|
+
return '';
|
|
5101
|
+
};
|
|
5072
5102
|
Settings.defaultProps = {
|
|
5073
5103
|
dict: defaultDict,
|
|
5074
5104
|
};
|
|
5075
|
-
function SettingsContent({ initialPage,
|
|
5105
|
+
function SettingsContent({ initialPage, children, renderNotFound, dict, view, onPageChange, onClose, }) {
|
|
5076
5106
|
var _a, _b;
|
|
5077
5107
|
const [search, setSearch] = React__default.useState('');
|
|
5078
5108
|
const { menu, pages } = getSettingsFromChildren(children, search);
|
|
@@ -5116,12 +5146,16 @@ function SettingsContent({ initialPage, onPageChange, children, renderNotFound,
|
|
|
5116
5146
|
if (!activePage) {
|
|
5117
5147
|
return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default.createElement("div", { className: b('not-found') }, dict === null || dict === void 0 ? void 0 : dict.not_found));
|
|
5118
5148
|
}
|
|
5119
|
-
|
|
5120
|
-
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
|
|
5149
|
+
const filteredSections = pages[activePage].sections.filter((section) => !section.hidden);
|
|
5150
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
5151
|
+
!isMobile && (React__default.createElement(Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, activePage))),
|
|
5152
|
+
React__default.createElement("div", { className: b('content') }, filteredSections.map((section) => (React__default.createElement("div", { key: section.title, className: b('section') },
|
|
5153
|
+
section.showTitle && (React__default.createElement("h3", { className: b('section-heading') }, section.title)),
|
|
5154
|
+
section.header &&
|
|
5155
|
+
(isMobile ? (React__default.createElement("div", { className: b('section-subheader') }, section.header)) : (section.header)),
|
|
5156
|
+
section.items.map(({ hidden, title, element }) => hidden ? null : (React__default.createElement("div", { key: title, className: b('section-item') }, React__default.cloneElement(element, Object.assign(Object.assign({}, element.props), { title: search && title
|
|
5157
|
+
? prepareTitle(title, search)
|
|
5158
|
+
: title })))))))))));
|
|
5125
5159
|
};
|
|
5126
5160
|
return (React__default.createElement("div", { className: b({ view }) },
|
|
5127
5161
|
isMobile ? (React__default.createElement(React__default.Fragment, null,
|
|
@@ -5137,7 +5171,7 @@ function SettingsContent({ initialPage, onPageChange, children, renderNotFound,
|
|
|
5137
5171
|
}
|
|
5138
5172
|
}
|
|
5139
5173
|
} },
|
|
5140
|
-
React__default.createElement(
|
|
5174
|
+
React__default.createElement(Title, null, dict === null || dict === void 0 ? void 0 : dict.heading_settings),
|
|
5141
5175
|
React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), onChange: setSearch, placeholder: dict === null || dict === void 0 ? void 0 : dict.placeholder_search, autoFocus: true }),
|
|
5142
5176
|
React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
|
|
5143
5177
|
React__default.createElement("div", { className: b('page') }, renderPageContent())));
|
|
@@ -5182,5 +5216,5 @@ function prepareTitle(string, search) {
|
|
|
5182
5216
|
return title;
|
|
5183
5217
|
}
|
|
5184
5218
|
|
|
5185
|
-
export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem, HotkeysPanel, MobileHeaderDict, Settings };
|
|
5219
|
+
export { PublicActionBar as ActionBar, AsideHeader, Dict, Drawer, DrawerItem, FooterItem, HotkeysPanel, MobileHeaderDict, Settings, Title };
|
|
5186
5220
|
//# sourceMappingURL=index.js.map
|