@gravity-ui/navigation 0.21.0 → 0.22.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/build/cjs/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.d.ts +10 -0
- package/build/cjs/components/AllPagesPanel/AllPagesListItem/index.d.ts +1 -0
- package/build/cjs/components/AllPagesPanel/AllPagesPanel.d.ts +9 -0
- package/build/cjs/components/AllPagesPanel/constants.d.ts +3 -0
- package/build/cjs/components/AllPagesPanel/i18n/index.d.ts +2 -0
- package/build/cjs/components/AllPagesPanel/index.d.ts +3 -0
- package/build/cjs/components/AllPagesPanel/useGroupedMenuItems.d.ts +4 -0
- package/build/cjs/components/AllPagesPanel/useVisibleMenuItems.d.ts +2 -0
- package/build/cjs/components/AsideHeader/AsideHeader.d.ts +2 -4
- package/build/cjs/components/AsideHeader/AsideHeaderContext.d.ts +2 -0
- package/build/cjs/components/AsideHeader/__stories__/getAsideHeaderWrapper.d.ts +1 -1
- package/build/cjs/components/AsideHeader/types.d.ts +6 -0
- package/build/cjs/components/AsideHeader/useAsideHeaderInnerContextValue.d.ts +5 -0
- package/build/cjs/components/index.d.ts +1 -1
- package/build/cjs/components/types.d.ts +12 -0
- package/build/cjs/index.js +334 -104
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.d.ts +10 -0
- package/build/esm/components/AllPagesPanel/AllPagesListItem/index.d.ts +1 -0
- package/build/esm/components/AllPagesPanel/AllPagesPanel.d.ts +9 -0
- package/build/esm/components/AllPagesPanel/constants.d.ts +3 -0
- package/build/esm/components/AllPagesPanel/i18n/index.d.ts +2 -0
- package/build/esm/components/AllPagesPanel/index.d.ts +3 -0
- package/build/esm/components/AllPagesPanel/useGroupedMenuItems.d.ts +4 -0
- package/build/esm/components/AllPagesPanel/useVisibleMenuItems.d.ts +2 -0
- package/build/esm/components/AsideHeader/AsideHeader.d.ts +2 -4
- package/build/esm/components/AsideHeader/AsideHeaderContext.d.ts +2 -0
- package/build/esm/components/AsideHeader/__stories__/getAsideHeaderWrapper.d.ts +1 -1
- package/build/esm/components/AsideHeader/types.d.ts +6 -0
- package/build/esm/components/AsideHeader/useAsideHeaderInnerContextValue.d.ts +5 -0
- package/build/esm/components/index.d.ts +1 -1
- package/build/esm/components/types.d.ts +12 -0
- package/build/esm/index.js +337 -107
- package/build/esm/index.js.map +1 -1
- package/package.json +2 -1
package/build/esm/index.js
CHANGED
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { Component, createElement, useState, useCallback, useEffect, useRef, useContext, Children, isValidElement, cloneElement
|
|
3
|
-
import { Portal, Icon, Popup, List, Tooltip, Button,
|
|
2
|
+
import React__default, { Component, createElement, useState, useMemo, useCallback, useEffect, useRef, useContext, Children, isValidElement, cloneElement } from 'react';
|
|
3
|
+
import { Portal, Icon, Popup, List, Tooltip, Button, Flex, Text, useBodyScrollLock, Hotkey, TextInput, Tabs, Loader, Sheet, eventBroker } from '@gravity-ui/uikit';
|
|
4
4
|
import { withNaming } from '@bem-react/classname';
|
|
5
|
-
import { Ellipsis, Xmark } from '@gravity-ui/icons';
|
|
5
|
+
import { Ellipsis, Pin, PinFill, Gear, Xmark } from '@gravity-ui/icons';
|
|
6
6
|
import ReactDOM from 'react-dom';
|
|
7
7
|
|
|
8
|
-
const ASIDE_HEADER_ICON_SIZE = 18;
|
|
9
|
-
const ASIDE_HEADER_COMPACT_WIDTH = 56;
|
|
10
|
-
const ASIDE_HEADER_EXPANDED_WIDTH = 236;
|
|
11
|
-
|
|
12
8
|
/* Used by renderContent AsideHeader prop */
|
|
13
9
|
const RenderContent = React__default.memo(({ renderContent, size }) => {
|
|
14
10
|
return React__default.createElement(React__default.Fragment, null, renderContent({ size }));
|
|
@@ -520,6 +516,10 @@ function isMenuItem(item) {
|
|
|
520
516
|
return (item === null || item === void 0 ? void 0 : item.id) !== undefined;
|
|
521
517
|
}
|
|
522
518
|
|
|
519
|
+
const ASIDE_HEADER_ICON_SIZE = 18;
|
|
520
|
+
const ASIDE_HEADER_COMPACT_WIDTH = 56;
|
|
521
|
+
const ASIDE_HEADER_EXPANDED_WIDTH = 236;
|
|
522
|
+
|
|
523
523
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
524
524
|
|
|
525
525
|
/**
|
|
@@ -1088,10 +1088,10 @@ function styleInject(css, ref) {
|
|
|
1088
1088
|
}
|
|
1089
1089
|
}
|
|
1090
1090
|
|
|
1091
|
-
var css_248z$
|
|
1092
|
-
styleInject(css_248z$
|
|
1091
|
+
var css_248z$p = ".gn-composite-bar-highlighted-item {\n position: absolute;\n z-index: 10000;\n display: flex;\n justify-content: center;\n}\n.gn-composite-bar-highlighted-item__icon {\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n border-radius: 7px;\n cursor: pointer;\n background-color: var(--g-color-base-background);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n transform: translateY(1px);\n overflow: hidden;\n box-shadow: 0 8px 20px 0 var(--g-color-sfx-shadow);\n}\n.gn-composite-bar-highlighted-item__icon::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-highlighted-item__icon:hover::before {\n background-color: var(--g-color-base-selection-hover);\n}";
|
|
1092
|
+
styleInject(css_248z$p);
|
|
1093
1093
|
|
|
1094
|
-
const b$
|
|
1094
|
+
const b$q = block('composite-bar-highlighted-item');
|
|
1095
1095
|
const DEBOUNCE_TIME = 200;
|
|
1096
1096
|
const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
1097
1097
|
const { openModalSubscriber } = useAsideHeaderInnerContext();
|
|
@@ -1102,7 +1102,7 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
|
1102
1102
|
height: 0,
|
|
1103
1103
|
});
|
|
1104
1104
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
1105
|
-
const
|
|
1105
|
+
const handleResizeDebounced = useMemo(() => debounce_1(() => {
|
|
1106
1106
|
var _a;
|
|
1107
1107
|
const { top = 0, left = 0, width = 0, height = 0, } = ((_a = iconRef === null || iconRef === void 0 ? void 0 : iconRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
|
|
1108
1108
|
setPosition({
|
|
@@ -1111,7 +1111,8 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
|
1111
1111
|
width,
|
|
1112
1112
|
height,
|
|
1113
1113
|
});
|
|
1114
|
-
}, DEBOUNCE_TIME, { leading: true }), []);
|
|
1114
|
+
}, DEBOUNCE_TIME, { leading: true }), [iconRef]);
|
|
1115
|
+
const handleResize = useCallback(() => handleResizeDebounced(), [handleResizeDebounced]);
|
|
1115
1116
|
useEffect(() => {
|
|
1116
1117
|
if (!isModalOpen) {
|
|
1117
1118
|
return;
|
|
@@ -1127,21 +1128,21 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
|
1127
1128
|
return null;
|
|
1128
1129
|
}
|
|
1129
1130
|
return (React__default.createElement(Portal, null,
|
|
1130
|
-
React__default.createElement("div", { className: b$
|
|
1131
|
-
React__default.createElement("div", { className: b$
|
|
1131
|
+
React__default.createElement("div", { className: b$q(), style: { left, top, width, height }, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
|
|
1132
|
+
React__default.createElement("div", { className: b$q('icon') }, iconNode))));
|
|
1132
1133
|
};
|
|
1133
1134
|
HighlightedItem.displayName = 'HighlightedItem';
|
|
1134
1135
|
|
|
1135
|
-
var css_248z$
|
|
1136
|
-
styleInject(css_248z$
|
|
1136
|
+
var css_248z$o = ".gn-composite-bar-item {\n --gn-composite-bar-item-action-size: 36px;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n cursor: pointer;\n}\n.gn-composite-bar-item__icon {\n color: var(--g-color-text-misc);\n}\n.gn-footer-item .gn-composite-bar-item__icon, .gn-composite-bar-highlighted-item .gn-composite-bar-item__icon {\n color: var(--gn-aside-header-footer-item-icon-color);\n}\n.gn-composite-bar_subheader .gn-composite-bar-item__icon {\n color: var(--gn-aside-header-subheader-item-icon-color);\n}\n.gn-composite-bar-item__icon-place {\n flex-shrink: 0;\n width: var(--gn-aside-header-min-width);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n.gn-composite-bar-item__title {\n display: flex;\n overflow: hidden;\n}\n.gn-composite-bar-item__title-text {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.gn-composite-bar-item__title-adornment {\n margin: 0 10px;\n}\n.gn-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.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment {\n margin-right: 0;\n}\n.gn-composite-bar-item__menu-divider {\n margin: 0 8px;\n width: 100%;\n border-top: 1px solid var(--g-color-line-generic);\n cursor: default;\n}\n.gn-composite-bar-item__collapse-items-popup-content {\n padding: 4px 0;\n}\n.gn-composite-bar-item__link {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n.gn-composite-bar-item__link, .gn-composite-bar-item__link:hover, .gn-composite-bar-item__link:active, .gn-composite-bar-item__link:visited, .gn-composite-bar-item__link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.gn-composite-bar-item__btn-icon {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.gn-composite-bar-item_type_action {\n justify-content: center;\n height: var(--gn-composite-bar-item-action-size);\n margin: 0 10px 8px;\n background: var(--g-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(--gn-composite-bar-item-action-size);\n transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.gn-composite-bar-item_type_action:focus {\n box-shadow: 0 0 0 2px var(--g-color-line-misc);\n}\n.gn-composite-bar-item_type_action:focus:not(:focus-visible) {\n box-shadow: none;\n}\n.gn-composite-bar-item_type_action:hover {\n background-color: var(--g-color-base-float-hover);\n}\n.gn-composite-bar-item_type_action:active {\n box-shadow: 0 1px 2px var(--g-color-sfx-shadow);\n transition: none;\n transform: scale(0.96);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place {\n width: var(--gn-composite-bar-item-action-size);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n margin-right: 16px;\n}\n.gn-composite-bar-item__icon-tooltip_item-type_action {\n margin-left: 10px;\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular {\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular {\n background-color: var(--g-color-base-simple-hover);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action {\n width: var(--gn-composite-bar-item-action-size);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n margin: 0;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n background-color: var(--g-color-base-simple-hover);\n}";
|
|
1137
|
+
styleInject(css_248z$o);
|
|
1137
1138
|
|
|
1138
|
-
const b$
|
|
1139
|
+
const b$p = block('composite-bar-item');
|
|
1139
1140
|
function renderItemTitle(item) {
|
|
1140
|
-
let titleNode = React__default.createElement("div", { className: b$
|
|
1141
|
+
let titleNode = React__default.createElement("div", { className: b$p('title-text') }, item.title);
|
|
1141
1142
|
if (item.rightAdornment) {
|
|
1142
1143
|
titleNode = (React__default.createElement(React__default.Fragment, null,
|
|
1143
1144
|
titleNode,
|
|
1144
|
-
React__default.createElement("div", { className: b$
|
|
1145
|
+
React__default.createElement("div", { className: b$p('title-adornment') }, item.rightAdornment)));
|
|
1145
1146
|
}
|
|
1146
1147
|
return titleNode;
|
|
1147
1148
|
}
|
|
@@ -1150,9 +1151,6 @@ const defaultPopupOffset = [-20, 8];
|
|
|
1150
1151
|
const Item$1 = (props) => {
|
|
1151
1152
|
const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, onItemClickCapture, bringForward, } = props;
|
|
1152
1153
|
const { compact } = useAsideHeaderContext();
|
|
1153
|
-
if (item.type === 'divider') {
|
|
1154
|
-
return React__default.createElement("div", { className: b$n('menu-divider') });
|
|
1155
|
-
}
|
|
1156
1154
|
const [open, toggleOpen] = React__default.useState(false);
|
|
1157
1155
|
const ref = React__default.useRef(null);
|
|
1158
1156
|
const anchorRef = popupAnchor || ref;
|
|
@@ -1172,38 +1170,42 @@ const Item$1 = (props) => {
|
|
|
1172
1170
|
}
|
|
1173
1171
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
1174
1172
|
}, [onClosePopup]);
|
|
1173
|
+
if (item.type === 'divider') {
|
|
1174
|
+
return React__default.createElement("div", { className: b$p('menu-divider') });
|
|
1175
|
+
}
|
|
1175
1176
|
const makeIconNode = (iconEl) => {
|
|
1176
|
-
return compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$
|
|
1177
|
-
React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$
|
|
1177
|
+
return compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$p('icon-tooltip', { 'item-type': type }) },
|
|
1178
|
+
React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$p('btn-icon') }, iconEl))) : (iconEl);
|
|
1178
1179
|
};
|
|
1179
1180
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
1180
|
-
const createdNode = (React__default.createElement(
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1181
|
+
const createdNode = (React__default.createElement(React__default.Fragment, null,
|
|
1182
|
+
React__default.createElement("div", { className: b$p({ type, current, compact }, className), ref: ref, onClick: (event) => {
|
|
1183
|
+
if (collapsedItem) {
|
|
1184
|
+
/**
|
|
1185
|
+
* If we call onItemClick for collapsedItem then:
|
|
1186
|
+
* - User get unexpected item in onItemClick callback
|
|
1187
|
+
* - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
|
|
1188
|
+
*/
|
|
1189
|
+
toggleOpen(!open);
|
|
1190
|
+
}
|
|
1191
|
+
else {
|
|
1192
|
+
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
|
|
1193
|
+
}
|
|
1194
|
+
}, onClickCapture: onItemClickCapture, onMouseEnter: () => {
|
|
1195
|
+
if (!compact) {
|
|
1196
|
+
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
1197
|
+
}
|
|
1198
|
+
}, onMouseLeave: () => {
|
|
1199
|
+
if (!compact) {
|
|
1200
|
+
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
1201
|
+
}
|
|
1202
|
+
} },
|
|
1203
|
+
React__default.createElement("div", { className: b$p('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
|
|
1204
|
+
React__default.createElement("div", { className: b$p('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)),
|
|
1205
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { contentClassName: b$p('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
1206
|
+
return item.link ? (React__default.createElement("a", { href: item.link, className: b$p('link') }, createdNode)) : (createdNode);
|
|
1205
1207
|
};
|
|
1206
|
-
const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$
|
|
1208
|
+
const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$p('icon') }) : null;
|
|
1207
1209
|
const titleNode = renderItemTitle(item);
|
|
1208
1210
|
const params = { icon: iconNode, title: titleNode };
|
|
1209
1211
|
let node;
|
|
@@ -1224,13 +1226,13 @@ Item$1.displayName = 'Item';
|
|
|
1224
1226
|
function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
1225
1227
|
const { compact } = useAsideHeaderContext();
|
|
1226
1228
|
return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
|
|
1227
|
-
React__default.createElement("div", { className: b$
|
|
1228
|
-
React__default.createElement(List, { itemClassName: b$
|
|
1229
|
+
React__default.createElement("div", { className: b$p('collapse-items-popup-content') },
|
|
1230
|
+
React__default.createElement(List, { itemClassName: b$p('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, onItemClick: onClose, renderItem: (collapseItem) => {
|
|
1229
1231
|
const makeCollapseNode = ({ title: titleEl }) => {
|
|
1230
|
-
const res = (React__default.createElement("div", { className: b$
|
|
1232
|
+
const res = (React__default.createElement("div", { className: b$p('collapse-item'), onClick: (event) => {
|
|
1231
1233
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true, event);
|
|
1232
1234
|
} }, titleEl));
|
|
1233
|
-
return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$
|
|
1235
|
+
return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$p('link') }, res)) : (res);
|
|
1234
1236
|
};
|
|
1235
1237
|
const titleNode = renderItemTitle(collapseItem);
|
|
1236
1238
|
const params = { title: titleNode };
|
|
@@ -1271,10 +1273,10 @@ class MultipleTooltipProvider extends React__default.PureComponent {
|
|
|
1271
1273
|
}
|
|
1272
1274
|
}
|
|
1273
1275
|
|
|
1274
|
-
var css_248z$
|
|
1275
|
-
styleInject(css_248z$
|
|
1276
|
+
var css_248z$n = ".g-root_theme_dark .gn-multiple-tooltip,\n.g-root_theme_dark-hc .gn-multiple-tooltip {\n --multiple-tooltip-item-bg-color: #424147;\n --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n --multiple-tooltip-backdrop-background: linear-gradient(\n 90deg,\n #313036 0%,\n rgba(49, 48, 54, 0.3) 100%\n );\n --multiple-tooltip-backdrop-filter: blur(16px);\n}\n\n.g-root_theme_light .gn-multiple-tooltip,\n.g-root_theme_light-hc .gn-multiple-tooltip {\n --multiple-tooltip-item-bg-color: #7a7a7a;\n --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n --multiple-tooltip-backdrop-background: linear-gradient(\n 90deg,\n #ffffff 0%,\n rgba(255, 255, 255, 0.3) 100%\n );\n --multiple-tooltip-backdrop-filter: blur(12px);\n}\n\n.gn-multiple-tooltip {\n background-color: transparent;\n box-shadow: none;\n}\n.gn-multiple-tooltip::before {\n content: \"\";\n box-shadow: none;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n background: var(--multiple-tooltip-backdrop-background);\n filter: var(--multiple-tooltip-backdrop-filter);\n}\n.gn-multiple-tooltip__items-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 32px 40px 32px 12px;\n}\n.gn-multiple-tooltip__item {\n display: flex;\n box-sizing: border-box;\n height: 30px;\n padding: 8px 12px;\n background-color: var(--multiple-tooltip-item-bg-color);\n position: relative;\n border-radius: 5px;\n align-items: center;\n color: var(--g-color-text-light-primary);\n margin-bottom: 5px;\n transition: transform 100ms ease-in-out;\n}\n.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider), .gn-multiple-tooltip__item:first-child {\n margin-top: 5px;\n}\n.gn-multiple-tooltip__item_divider + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) {\n margin-top: 4px;\n}\n.gn-multiple-tooltip__item_active {\n background-color: var(--multiple-tooltip-item-active-bg-color);\n transform: translateX(-12px);\n}\n.gn-multiple-tooltip__item_divider {\n height: 15px;\n visibility: hidden;\n margin: 0;\n}";
|
|
1277
|
+
styleInject(css_248z$n);
|
|
1276
1278
|
|
|
1277
|
-
const b$
|
|
1279
|
+
const b$o = block('multiple-tooltip');
|
|
1278
1280
|
const POPUP_OFFSET = [-32, 4];
|
|
1279
1281
|
const POPUP_MODIFIERS = [
|
|
1280
1282
|
{
|
|
@@ -1285,26 +1287,26 @@ const POPUP_MODIFIERS = [
|
|
|
1285
1287
|
const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
|
|
1286
1288
|
const { activeIndex, hideCollapseItemTooltip } = React__default.useContext(MultipleTooltipContext);
|
|
1287
1289
|
const activeItem = activeIndex === undefined ? null : items[activeIndex];
|
|
1288
|
-
return (React__default.createElement(Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$
|
|
1289
|
-
React__default.createElement("div", { className: b$
|
|
1290
|
+
return (React__default.createElement(Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$o(null), modifiers: POPUP_MODIFIERS },
|
|
1291
|
+
React__default.createElement("div", { className: b$o('items-container') }, items
|
|
1290
1292
|
.filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
|
|
1291
1293
|
(id !== COLLAPSE_ITEM_ID && type !== 'action'))
|
|
1292
1294
|
.map((item, idx) => {
|
|
1293
1295
|
switch (item.type) {
|
|
1294
1296
|
case 'divider':
|
|
1295
|
-
return (React__default.createElement("div", { className: b$
|
|
1297
|
+
return (React__default.createElement("div", { className: b$o('item', { divider: true }), key: idx }, item.title));
|
|
1296
1298
|
default:
|
|
1297
|
-
return (React__default.createElement("div", { className: b$
|
|
1299
|
+
return (React__default.createElement("div", { className: b$o('item', {
|
|
1298
1300
|
active: item === activeItem,
|
|
1299
1301
|
}), key: idx }, item.title));
|
|
1300
1302
|
}
|
|
1301
1303
|
}))));
|
|
1302
1304
|
};
|
|
1303
1305
|
|
|
1304
|
-
var css_248z$
|
|
1305
|
-
styleInject(css_248z$
|
|
1306
|
+
var css_248z$m = ".gn-composite-bar {\n flex: 1 0 auto;\n width: 100%;\n min-height: 40px;\n}\n.gn-composite-bar .gn-composite-bar__root-menu-item[class] {\n background-color: transparent;\n}";
|
|
1307
|
+
styleInject(css_248z$m);
|
|
1306
1308
|
|
|
1307
|
-
const b$
|
|
1309
|
+
const b$n = block('composite-bar');
|
|
1308
1310
|
const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
|
|
1309
1311
|
const ref = useRef(null);
|
|
1310
1312
|
const tooltipRef = useRef(null);
|
|
@@ -1347,7 +1349,7 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1347
1349
|
lastClickedItemIndex: undefined,
|
|
1348
1350
|
});
|
|
1349
1351
|
}
|
|
1350
|
-
}, [multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
1352
|
+
}, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
1351
1353
|
const onMouseEnterByIndex = useCallback((itemIndex) => () => {
|
|
1352
1354
|
if (multipleTooltip) {
|
|
1353
1355
|
let multipleTooltipActiveValue = multipleTooltipActive;
|
|
@@ -1363,7 +1365,13 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1363
1365
|
active: multipleTooltipActiveValue,
|
|
1364
1366
|
});
|
|
1365
1367
|
}
|
|
1366
|
-
}, [
|
|
1368
|
+
}, [
|
|
1369
|
+
multipleTooltip,
|
|
1370
|
+
multipleTooltipActive,
|
|
1371
|
+
lastClickedItemIndex,
|
|
1372
|
+
activeIndex,
|
|
1373
|
+
setMultipleTooltipContextValue,
|
|
1374
|
+
]);
|
|
1367
1375
|
const onMouseLeave = useCallback(() => {
|
|
1368
1376
|
var _a;
|
|
1369
1377
|
if (compact) {
|
|
@@ -1376,7 +1384,13 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1376
1384
|
});
|
|
1377
1385
|
}
|
|
1378
1386
|
}
|
|
1379
|
-
}, [
|
|
1387
|
+
}, [
|
|
1388
|
+
activeIndex,
|
|
1389
|
+
compact,
|
|
1390
|
+
lastClickedItemIndex,
|
|
1391
|
+
multipleTooltip,
|
|
1392
|
+
setMultipleTooltipContextValue,
|
|
1393
|
+
]);
|
|
1380
1394
|
const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed, event) => {
|
|
1381
1395
|
if (compact &&
|
|
1382
1396
|
multipleTooltip &&
|
|
@@ -1388,10 +1402,16 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1388
1402
|
});
|
|
1389
1403
|
}
|
|
1390
1404
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
|
|
1391
|
-
}, [
|
|
1405
|
+
}, [
|
|
1406
|
+
compact,
|
|
1407
|
+
lastClickedItemIndex,
|
|
1408
|
+
multipleTooltip,
|
|
1409
|
+
onItemClick,
|
|
1410
|
+
setMultipleTooltipContextValue,
|
|
1411
|
+
]);
|
|
1392
1412
|
return (React__default.createElement(React__default.Fragment, null,
|
|
1393
1413
|
React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
1394
|
-
React__default.createElement(List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$
|
|
1414
|
+
React__default.createElement(List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$n('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
|
|
1395
1415
|
const itemExtraProps = isMenuItem(item) ? { item } : item;
|
|
1396
1416
|
const enableTooltip = isMenuItem(item)
|
|
1397
1417
|
? !multipleTooltip
|
|
@@ -1408,20 +1428,20 @@ const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip
|
|
|
1408
1428
|
if (type === 'menu') {
|
|
1409
1429
|
const minHeight = getItemsMinHeight(items);
|
|
1410
1430
|
const collapseItem = getMoreButtonItem(menuMoreTitle);
|
|
1411
|
-
node = (React__default.createElement("div", { className: b$
|
|
1431
|
+
node = (React__default.createElement("div", { className: b$n({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
|
|
1412
1432
|
const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
|
|
1413
1433
|
return (React__default.createElement("div", { style: { width, height } },
|
|
1414
1434
|
React__default.createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
1415
1435
|
}))));
|
|
1416
1436
|
}
|
|
1417
1437
|
else {
|
|
1418
|
-
node = (React__default.createElement("div", { className: b$
|
|
1438
|
+
node = (React__default.createElement("div", { className: b$n({ subheader: true }) },
|
|
1419
1439
|
React__default.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
|
|
1420
1440
|
}
|
|
1421
1441
|
return React__default.createElement(MultipleTooltipProvider, null, node);
|
|
1422
1442
|
};
|
|
1423
1443
|
|
|
1424
|
-
const b$
|
|
1444
|
+
const b$m = block('aside-header');
|
|
1425
1445
|
|
|
1426
1446
|
const PARAM_REGEXP = /{{(.*?)}}/g;
|
|
1427
1447
|
function replaceParams(keyValue, params) {
|
|
@@ -1622,17 +1642,170 @@ const subscribeConfigure = (sub) => {
|
|
|
1622
1642
|
};
|
|
1623
1643
|
const getConfig = () => config$1;
|
|
1624
1644
|
|
|
1625
|
-
const i18n$
|
|
1626
|
-
i18n$
|
|
1645
|
+
const i18n$5 = new I18N();
|
|
1646
|
+
i18n$5.setLang(getConfig().lang);
|
|
1627
1647
|
subscribeConfigure((config) => {
|
|
1628
|
-
i18n$
|
|
1648
|
+
i18n$5.setLang(config.lang);
|
|
1629
1649
|
});
|
|
1630
1650
|
|
|
1631
1651
|
function registerKeyset(data, keysetName) {
|
|
1632
|
-
Object.entries(data).forEach(([lang, keys]) => i18n$
|
|
1633
|
-
return i18n$
|
|
1652
|
+
Object.entries(data).forEach(([lang, keys]) => i18n$5.registerKeyset(lang, keysetName, keys));
|
|
1653
|
+
return i18n$5.keyset(keysetName);
|
|
1634
1654
|
}
|
|
1635
1655
|
|
|
1656
|
+
var en$4 = {
|
|
1657
|
+
"menu-item.all-pages.title": "All pages",
|
|
1658
|
+
"all-panel.menu.category.allOther": "All other",
|
|
1659
|
+
"all-panel.resetToDefault": "Reset to default",
|
|
1660
|
+
"all-panel.title.editing": "Editing",
|
|
1661
|
+
"all-panel.title.main": "All pages"
|
|
1662
|
+
};
|
|
1663
|
+
|
|
1664
|
+
var ru$4 = {
|
|
1665
|
+
"menu-item.all-pages.title": "Все страницы",
|
|
1666
|
+
"all-panel.menu.category.allOther": "Остальное",
|
|
1667
|
+
"all-panel.resetToDefault": "Сбросить по умолчанию",
|
|
1668
|
+
"all-panel.title.editing": "Редактирование",
|
|
1669
|
+
"all-panel.title.main": "Все страницы"
|
|
1670
|
+
};
|
|
1671
|
+
|
|
1672
|
+
const COMPONENT$4 = 'AllPagesPanel';
|
|
1673
|
+
var i18n$4 = registerKeyset({ en: en$4, ru: ru$4 }, COMPONENT$4);
|
|
1674
|
+
|
|
1675
|
+
const ALL_PAGES_ID = 'all-pages';
|
|
1676
|
+
const ALL_PAGES_MENU_ITEM = {
|
|
1677
|
+
id: ALL_PAGES_ID,
|
|
1678
|
+
title: i18n$4('menu-item.all-pages.title'),
|
|
1679
|
+
tooltipText: i18n$4('menu-item.all-pages.title'),
|
|
1680
|
+
icon: Ellipsis,
|
|
1681
|
+
};
|
|
1682
|
+
|
|
1683
|
+
const useGroupedMenuItems = (items) => {
|
|
1684
|
+
const allPagesMenuItems = useMemo(() => {
|
|
1685
|
+
const filteredItems = items.filter((item) => item.type !== 'divider' && item.id !== ALL_PAGES_ID);
|
|
1686
|
+
filteredItems.sort((a, b) => {
|
|
1687
|
+
if (a.type === 'action') {
|
|
1688
|
+
return 1;
|
|
1689
|
+
}
|
|
1690
|
+
if (b.type === 'action') {
|
|
1691
|
+
return -1;
|
|
1692
|
+
}
|
|
1693
|
+
return 0;
|
|
1694
|
+
});
|
|
1695
|
+
const groupedItems = filteredItems.reduce((acc, item) => {
|
|
1696
|
+
const category = item.category || i18n$4('all-panel.menu.category.allOther');
|
|
1697
|
+
if (!acc[category]) {
|
|
1698
|
+
acc[category] = [];
|
|
1699
|
+
}
|
|
1700
|
+
acc[category].push(item);
|
|
1701
|
+
return acc;
|
|
1702
|
+
}, {});
|
|
1703
|
+
return groupedItems;
|
|
1704
|
+
}, [items]);
|
|
1705
|
+
return allPagesMenuItems;
|
|
1706
|
+
};
|
|
1707
|
+
|
|
1708
|
+
var css_248z$l = ".gn-all-pages-list-item {\n display: flex;\n align-items: center;\n width: 100%;\n height: 40px;\n padding: 0 var(--g-spacing-6);\n column-gap: var(--g-spacing-4);\n}\n.gn-all-pages-list-item__text {\n flex: 1;\n}\n.gn-all-pages-list-item__icon {\n color: var(--g-color-text-misc);\n}";
|
|
1709
|
+
styleInject(css_248z$l);
|
|
1710
|
+
|
|
1711
|
+
const b$l = block('all-pages-list-item');
|
|
1712
|
+
const AllPagesListItem = (props) => {
|
|
1713
|
+
const { item, editMode, onToggle } = props;
|
|
1714
|
+
const onPinButtonClick = useCallback((e) => {
|
|
1715
|
+
e.stopPropagation();
|
|
1716
|
+
e.preventDefault();
|
|
1717
|
+
onToggle();
|
|
1718
|
+
}, [onToggle]);
|
|
1719
|
+
const onItemClick = (e) => {
|
|
1720
|
+
if (editMode) {
|
|
1721
|
+
e.stopPropagation();
|
|
1722
|
+
e.preventDefault();
|
|
1723
|
+
}
|
|
1724
|
+
};
|
|
1725
|
+
return (React__default.createElement("div", { className: b$l(), onClick: onItemClick },
|
|
1726
|
+
item.icon ? (React__default.createElement(Icon, { className: b$l('icon'), data: item.icon, size: item.iconSize })) : null,
|
|
1727
|
+
React__default.createElement("span", { className: b$l('text') }, item.title),
|
|
1728
|
+
editMode && (React__default.createElement(Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
|
|
1729
|
+
React__default.createElement(Button.Icon, null, item.hidden ? React__default.createElement(Pin, null) : React__default.createElement(PinFill, null))))));
|
|
1730
|
+
};
|
|
1731
|
+
|
|
1732
|
+
var css_248z$k = ".gn-all-pages-panel {\n min-width: 300px;\n height: 100%;\n padding: var(--g-spacing-4) var(--g-spacing-6);\n box-sizing: border-box;\n}\n.gn-all-pages-panel__content {\n overflow: auto;\n flex: 1;\n margin: 0 calc(var(--g-spacing-6) * -1);\n}\n.gn-all-pages-panel__category {\n padding: 0 var(--g-spacing-6);\n}\n.gn-all-pages-panel__discoverable-feature-wrapper {\n display: flex;\n}";
|
|
1733
|
+
styleInject(css_248z$k);
|
|
1734
|
+
|
|
1735
|
+
const b$k = block('all-pages-panel');
|
|
1736
|
+
const AllPagesPanel = (props) => {
|
|
1737
|
+
const { startEditIcon, onEditModeChanged, className } = props;
|
|
1738
|
+
const { menuItems, onMenuItemsChanged } = useAsideHeaderInnerContext();
|
|
1739
|
+
const menuItemsRef = useRef(menuItems);
|
|
1740
|
+
menuItemsRef.current = menuItems;
|
|
1741
|
+
const [isEditMode, setIsEditMode] = useState(false);
|
|
1742
|
+
const toggleEditMode = useCallback(() => {
|
|
1743
|
+
setIsEditMode((prev) => !prev);
|
|
1744
|
+
}, []);
|
|
1745
|
+
const groupedItems = useGroupedMenuItems(menuItems);
|
|
1746
|
+
useEffect(() => {
|
|
1747
|
+
onEditModeChanged === null || onEditModeChanged === void 0 ? void 0 : onEditModeChanged(isEditMode);
|
|
1748
|
+
}, [isEditMode, onEditModeChanged]);
|
|
1749
|
+
const onItemClick = useCallback((item) => {
|
|
1750
|
+
var _a;
|
|
1751
|
+
//@ts-ignore TODO fix when @gravity-ui/uikit/List will provide event arg on item click
|
|
1752
|
+
(_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, false);
|
|
1753
|
+
}, []);
|
|
1754
|
+
const togglePageVisibility = useCallback((item) => {
|
|
1755
|
+
if (!onMenuItemsChanged) {
|
|
1756
|
+
return;
|
|
1757
|
+
}
|
|
1758
|
+
const changedItem = Object.assign(Object.assign({}, item), { hidden: !item.hidden });
|
|
1759
|
+
const originItems = menuItemsRef.current.filter((menuItem) => menuItem.id !== ALL_PAGES_ID);
|
|
1760
|
+
onMenuItemsChanged(originItems.map((menuItem) => {
|
|
1761
|
+
if (menuItem.id !== changedItem.id) {
|
|
1762
|
+
return menuItem;
|
|
1763
|
+
}
|
|
1764
|
+
return changedItem;
|
|
1765
|
+
}));
|
|
1766
|
+
}, [onMenuItemsChanged]);
|
|
1767
|
+
const itemRender = useCallback((item, _isActive, _itemIndex) => (React__default.createElement(AllPagesListItem, { item: item, editMode: isEditMode, onToggle: () => togglePageVisibility(item) })), [isEditMode, togglePageVisibility]);
|
|
1768
|
+
const onResetToDefaultClick = useCallback(() => {
|
|
1769
|
+
if (!onMenuItemsChanged) {
|
|
1770
|
+
return;
|
|
1771
|
+
}
|
|
1772
|
+
const originItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
|
|
1773
|
+
onMenuItemsChanged(originItems.map((item) => (Object.assign(Object.assign({}, item), { hidden: false }))));
|
|
1774
|
+
}, [onMenuItemsChanged]);
|
|
1775
|
+
return (React__default.createElement(Flex, { className: b$k(null, className), gap: "5", direction: "column" },
|
|
1776
|
+
React__default.createElement(Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
|
|
1777
|
+
React__default.createElement(Text, { variant: "subheader-2" }, isEditMode ? i18n$4('all-panel.title.editing') : i18n$4('all-panel.title.main')),
|
|
1778
|
+
React__default.createElement(Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default.createElement(Icon, { data: Gear }))),
|
|
1779
|
+
React__default.createElement(Flex, { className: b$k('content'), gap: "5", direction: "column" }, Object.keys(groupedItems).map((category) => {
|
|
1780
|
+
return (React__default.createElement(Flex, { key: category, direction: "column", gap: "3" },
|
|
1781
|
+
React__default.createElement(Text, { className: b$k('category'), variant: "body-1", color: "secondary" }, category),
|
|
1782
|
+
React__default.createElement(List, { virtualized: false, filterable: false, items: groupedItems[category], onItemClick: onItemClick, renderItem: itemRender })));
|
|
1783
|
+
})),
|
|
1784
|
+
isEditMode && (React__default.createElement(Button, { onClick: onResetToDefaultClick }, i18n$4('all-panel.resetToDefault')))));
|
|
1785
|
+
};
|
|
1786
|
+
|
|
1787
|
+
const useVisibleMenuItems = () => {
|
|
1788
|
+
const { menuItems, allPagesIsAvailable } = useAsideHeaderInnerContext();
|
|
1789
|
+
return useMemo(() => {
|
|
1790
|
+
if (!allPagesIsAvailable) {
|
|
1791
|
+
return menuItems;
|
|
1792
|
+
}
|
|
1793
|
+
let lastVisibleIndex = 0;
|
|
1794
|
+
return menuItems.filter((item, index, items) => {
|
|
1795
|
+
if (item.hidden) {
|
|
1796
|
+
return false;
|
|
1797
|
+
}
|
|
1798
|
+
if (index > 0 &&
|
|
1799
|
+
item.type === 'divider' &&
|
|
1800
|
+
(items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)) {
|
|
1801
|
+
return false;
|
|
1802
|
+
}
|
|
1803
|
+
lastVisibleIndex = index;
|
|
1804
|
+
return true;
|
|
1805
|
+
});
|
|
1806
|
+
}, [allPagesIsAvailable, menuItems]);
|
|
1807
|
+
};
|
|
1808
|
+
|
|
1636
1809
|
var button_collapse$1 = "Collapse";
|
|
1637
1810
|
var button_expand$1 = "Expand";
|
|
1638
1811
|
var label_more$1 = "More";
|
|
@@ -1701,15 +1874,15 @@ var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
|
1701
1874
|
const DEFAULT_SUBHEADER_ITEMS = [];
|
|
1702
1875
|
const Header = () => {
|
|
1703
1876
|
const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
|
|
1877
|
+
const { onClick: onLogoClickProp } = logo;
|
|
1704
1878
|
const onLogoClick = useCallback((event) => {
|
|
1705
|
-
var _a;
|
|
1706
1879
|
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
1707
|
-
|
|
1708
|
-
}, [onClosePanel,
|
|
1709
|
-
return (React__default.createElement("div", { className: b$
|
|
1880
|
+
onLogoClickProp === null || onLogoClickProp === void 0 ? void 0 : onLogoClickProp(event);
|
|
1881
|
+
}, [onClosePanel, onLogoClickProp]);
|
|
1882
|
+
return (React__default.createElement("div", { className: b$m('header', { ['with-decoration']: headerDecoration }) },
|
|
1710
1883
|
React__default.createElement(Logo$1, Object.assign({}, logo, { onClick: onLogoClick })),
|
|
1711
1884
|
React__default.createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
|
|
1712
|
-
React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$
|
|
1885
|
+
React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$m('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
1713
1886
|
};
|
|
1714
1887
|
|
|
1715
1888
|
function fakeDisplayName(newDisplayName, Component) {
|
|
@@ -1739,12 +1912,12 @@ const CollapseButton = () => {
|
|
|
1739
1912
|
const { onChangeCompact, compact, expandTitle, collapseTitle } = useAsideHeaderInnerContext();
|
|
1740
1913
|
const onCollapseButtonClick = useCallback(() => {
|
|
1741
1914
|
onChangeCompact === null || onChangeCompact === void 0 ? void 0 : onChangeCompact(!compact);
|
|
1742
|
-
}, [compact]);
|
|
1915
|
+
}, [compact, onChangeCompact]);
|
|
1743
1916
|
const buttonTitle = compact
|
|
1744
1917
|
? expandTitle || i18n$3('button_expand')
|
|
1745
1918
|
: collapseTitle || i18n$3('button_collapse');
|
|
1746
|
-
return (React__default.createElement(Button, { className: b$
|
|
1747
|
-
React__default.createElement(NotIcon, { data: controlMenuButtonIcon, className: b$
|
|
1919
|
+
return (React__default.createElement(Button, { className: b$m('collapse-button', { compact }), view: "flat", onClick: onCollapseButtonClick, title: buttonTitle },
|
|
1920
|
+
React__default.createElement(NotIcon, { data: controlMenuButtonIcon, className: b$m('collapse-icon'), width: "16", height: "10" })));
|
|
1748
1921
|
};
|
|
1749
1922
|
|
|
1750
1923
|
function _extends() {
|
|
@@ -4822,19 +4995,20 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
4822
4995
|
|
|
4823
4996
|
const Panels = () => {
|
|
4824
4997
|
const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
|
|
4825
|
-
return panelItems ? (React__default.createElement(Drawer, { className: b$
|
|
4998
|
+
return panelItems ? (React__default.createElement(Drawer, { className: b$m('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
|
|
4826
4999
|
};
|
|
4827
5000
|
|
|
4828
5001
|
const FirstPanel = () => {
|
|
4829
|
-
const { size, onItemClick,
|
|
5002
|
+
const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, renderFooter, compact, } = useAsideHeaderInnerContext();
|
|
5003
|
+
const visibleMenuItems = useVisibleMenuItems();
|
|
4830
5004
|
const asideRef = useRef(null);
|
|
4831
5005
|
return (React__default.createElement(React__default.Fragment, null,
|
|
4832
|
-
React__default.createElement("div", { className: b$
|
|
4833
|
-
React__default.createElement("div", { className: b$
|
|
4834
|
-
React__default.createElement("div", { className: b$
|
|
5006
|
+
React__default.createElement("div", { className: b$m('aside'), style: { width: size } },
|
|
5007
|
+
React__default.createElement("div", { className: b$m('aside-popup-anchor'), ref: asideRef }),
|
|
5008
|
+
React__default.createElement("div", { className: b$m('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4835
5009
|
React__default.createElement(Header, null),
|
|
4836
|
-
(
|
|
4837
|
-
React__default.createElement("div", { className: b$
|
|
5010
|
+
(visibleMenuItems === null || visibleMenuItems === void 0 ? void 0 : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n$3('label_more'), onItemClick: onItemClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$m('menu-items') })),
|
|
5011
|
+
React__default.createElement("div", { className: b$m('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4838
5012
|
size,
|
|
4839
5013
|
compact: Boolean(compact),
|
|
4840
5014
|
asideRef,
|
|
@@ -4846,21 +5020,70 @@ const FirstPanel = () => {
|
|
|
4846
5020
|
var css_248z$h = ".g-root {\n --gn-aside-header-background-color: var(--g-color-base-warning-light);\n --gn-aside-header-collapse-button-divider-line-color: var(\n --gn-aside-header-subheader-divider-line-color\n );\n --gn-aside-header-footer-item-icon-color: var(--g-color-text-primary);\n --gn-aside-header-subheader-item-icon-color: var(--g-color-text-primary);\n --gn-aside-header-item-icon-background-size: 38px;\n}\n\n.g-root_theme_light,\n.g-root_theme_light-hc {\n --gn-aside-header-divider-line-color: transparent;\n --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic);\n}\n\n.g-root_theme_dark,\n.g-root_theme_dark-hc {\n --gn-aside-header-divider-line-color: var(--g-color-line-generic-solid);\n --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic-solid);\n}\n\n.gn-aside-header {\n --gn-aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--g-color-base-background);\n}\n.gn-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(--g-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.gn-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(--gn-aside-header-divider-line-color);\n}\n.gn-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.gn-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.gn-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.gn-aside-header__aside-content > .gn-aside-header-logo {\n margin: 8px 0;\n}\n.gn-aside-header__aside-content_with-decoration {\n background: linear-gradient(180deg, var(--gn-aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.gn-aside-header_compact .gn-aside-header__aside-content {\n background: transparent;\n}\n.gn-aside-header__header {\n --gn-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.gn-aside-header__header .gn-aside-header__header-divider {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -2;\n display: none;\n color: var(--gn-aside-header-background-color);\n}\n.gn-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(--gn-aside-header-header-divider-height));\n content: \"\";\n background-color: var(--gn-aside-header-background-color);\n}\n.gn-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(--gn-aside-header-subheader-divider-line-color);\n}\n.gn-aside-header_compact .gn-aside-header__header::before {\n display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider {\n display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration::after {\n display: none;\n}\n.gn-aside-header__menu-items {\n flex-grow: 1;\n}\n.gn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.gn-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.gn-aside-header__panel {\n height: 100%;\n}\n.gn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.gn-aside-header__content {\n width: calc(100% - var(--gn-aside-header-size));\n z-index: 95;\n}\n.gn-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(--gn-aside-header-collapse-button-divider-line-color);\n margin-top: auto;\n}\n.gn-aside-header__collapse-button > .yc-button__text {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n}\n.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.gn-aside-header__collapse-button .gn-aside-header__collapse-icon {\n color: var(--g-color-text-secondary);\n}\n.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon {\n color: var(--g-color-text-primary);\n}";
|
|
4847
5021
|
styleInject(css_248z$h);
|
|
4848
5022
|
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
5023
|
+
var InnerPanels;
|
|
5024
|
+
(function (InnerPanels) {
|
|
5025
|
+
InnerPanels["AllPages"] = "all-pages";
|
|
5026
|
+
})(InnerPanels || (InnerPanels = {}));
|
|
5027
|
+
|
|
5028
|
+
const EMPTY_MENU_ITEMS = [];
|
|
5029
|
+
const useAsideHeaderInnerContextValue = (props) => {
|
|
5030
|
+
const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged } = props;
|
|
5031
|
+
const [innerVisiblePanel, setInnerVisiblePanel] = useState();
|
|
5032
|
+
const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0);
|
|
5033
|
+
useEffect(() => {
|
|
5034
|
+
// If any user panel became visible we need to switch off all inner panels
|
|
5035
|
+
if (panelItems === null || panelItems === void 0 ? void 0 : panelItems.some((x) => x.visible)) {
|
|
5036
|
+
setInnerVisiblePanel(undefined);
|
|
5037
|
+
}
|
|
5038
|
+
}, [panelItems]);
|
|
5039
|
+
const innerOnClosePanel = useCallback(() => {
|
|
5040
|
+
setInnerVisiblePanel(undefined);
|
|
5041
|
+
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
5042
|
+
}, [onClosePanel]);
|
|
4852
5043
|
const onItemClick = useCallback((item, collapsed, event) => {
|
|
4853
5044
|
var _a;
|
|
4854
|
-
|
|
5045
|
+
if (item.id === ALL_PAGES_MENU_ITEM.id) {
|
|
5046
|
+
setInnerVisiblePanel((prev) => prev === InnerPanels.AllPages ? undefined : InnerPanels.AllPages);
|
|
5047
|
+
}
|
|
5048
|
+
else {
|
|
5049
|
+
innerOnClosePanel();
|
|
5050
|
+
}
|
|
4855
5051
|
(_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, collapsed, event);
|
|
4856
|
-
}, [
|
|
5052
|
+
}, [innerOnClosePanel]);
|
|
5053
|
+
const innerMenuItems = useMemo(() => allPagesIsAvailable
|
|
5054
|
+
? [
|
|
5055
|
+
...(menuItems || EMPTY_MENU_ITEMS),
|
|
5056
|
+
Object.assign(Object.assign({}, ALL_PAGES_MENU_ITEM), { current: innerVisiblePanel === InnerPanels.AllPages }),
|
|
5057
|
+
]
|
|
5058
|
+
: menuItems || EMPTY_MENU_ITEMS, [allPagesIsAvailable, menuItems, innerVisiblePanel]);
|
|
5059
|
+
const innerPanelItems = useMemo(() => {
|
|
5060
|
+
if (!allPagesIsAvailable) {
|
|
5061
|
+
return panelItems;
|
|
5062
|
+
}
|
|
5063
|
+
return [
|
|
5064
|
+
...(panelItems || []),
|
|
5065
|
+
{
|
|
5066
|
+
id: InnerPanels.AllPages,
|
|
5067
|
+
content: React__default.createElement(AllPagesPanel, null),
|
|
5068
|
+
visible: innerVisiblePanel === InnerPanels.AllPages,
|
|
5069
|
+
},
|
|
5070
|
+
];
|
|
5071
|
+
}, [allPagesIsAvailable, panelItems, innerVisiblePanel]);
|
|
5072
|
+
return Object.assign(Object.assign({}, props), { onClosePanel: innerOnClosePanel, allPagesIsAvailable, menuItems: innerMenuItems, panelItems: innerPanelItems, size,
|
|
5073
|
+
onItemClick });
|
|
5074
|
+
};
|
|
5075
|
+
|
|
5076
|
+
const AsideHeader = (props) => {
|
|
5077
|
+
const { className, compact } = props;
|
|
5078
|
+
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
4857
5079
|
const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
|
|
5080
|
+
const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign(Object.assign({}, props), { size }));
|
|
4858
5081
|
return (React__default.createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
|
|
4859
|
-
React__default.createElement(AsideHeaderInnerContextProvider, { value:
|
|
4860
|
-
React__default.createElement("div", { className: b$
|
|
4861
|
-
React__default.createElement("div", { className: b$
|
|
5082
|
+
React__default.createElement(AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
|
|
5083
|
+
React__default.createElement("div", { className: b$m({ compact }, className) },
|
|
5084
|
+
React__default.createElement("div", { className: b$m('pane-container') },
|
|
4862
5085
|
React__default.createElement(FirstPanel, null),
|
|
4863
|
-
React__default.createElement(Content, { size: size, renderContent: props.renderContent, className: b$
|
|
5086
|
+
React__default.createElement(Content, { size: size, renderContent: props.renderContent, className: b$m('content') }))))));
|
|
4864
5087
|
};
|
|
4865
5088
|
|
|
4866
5089
|
/******************************************************************************
|
|
@@ -5647,12 +5870,12 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseT
|
|
|
5647
5870
|
onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, panelOpen ? EVENT_NAMES.closeEvent : EVENT_NAMES.openEvent);
|
|
5648
5871
|
return panelOpen ? null : name;
|
|
5649
5872
|
});
|
|
5650
|
-
}, [
|
|
5873
|
+
}, [onEvent]);
|
|
5651
5874
|
const onMobilePanelToggle = useCallback(({ detail }) => {
|
|
5652
5875
|
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5653
5876
|
onPanelToggle(detail === null || detail === void 0 ? void 0 : detail.panelName);
|
|
5654
5877
|
}
|
|
5655
|
-
}, [
|
|
5878
|
+
}, [onPanelToggle]);
|
|
5656
5879
|
const onMobilePanelOpen = useCallback(({ detail }) => {
|
|
5657
5880
|
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5658
5881
|
onEvent === null || onEvent === void 0 ? void 0 : onEvent(detail === null || detail === void 0 ? void 0 : detail.panelName, EVENT_NAMES.openEvent);
|
|
@@ -5692,16 +5915,16 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseT
|
|
|
5692
5915
|
size,
|
|
5693
5916
|
isCompact: compact,
|
|
5694
5917
|
});
|
|
5695
|
-
}, [burgerMenu
|
|
5918
|
+
}, [burgerMenu, size, compact]);
|
|
5696
5919
|
const onLogoClick = useCallback((event) => {
|
|
5697
5920
|
var _a;
|
|
5698
5921
|
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
5699
5922
|
(_a = logo.onClick) === null || _a === void 0 ? void 0 : _a.call(logo, event);
|
|
5700
|
-
}, [logo
|
|
5923
|
+
}, [logo, onClosePanel]);
|
|
5701
5924
|
const burgerPanelItem = useMemo(() => ({
|
|
5702
5925
|
id: BURGER_PANEL_ITEM_ID,
|
|
5703
5926
|
content: (React__default.createElement(BurgerMenu, { items: burgerMenu.items, modalItem: burgerMenu.modalItem, renderFooter: renderBurgerMenuFooter, onItemClick: onBurgerMenuItemClick, className: b$1('burger-menu') })),
|
|
5704
|
-
}), [burgerMenu]);
|
|
5927
|
+
}), [burgerMenu.items, burgerMenu.modalItem, onBurgerMenuItemClick, renderBurgerMenuFooter]);
|
|
5705
5928
|
useEffect(() => {
|
|
5706
5929
|
const node = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
|
|
5707
5930
|
if (node) {
|
|
@@ -5720,7 +5943,14 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseT
|
|
|
5720
5943
|
node.removeEventListener('MOBILE_PANEL_CLOSE', onMobilePanelClose);
|
|
5721
5944
|
}
|
|
5722
5945
|
};
|
|
5723
|
-
}, [
|
|
5946
|
+
}, [
|
|
5947
|
+
targetRef,
|
|
5948
|
+
onBurgerClose,
|
|
5949
|
+
onBurgerOpen,
|
|
5950
|
+
onMobilePanelToggle,
|
|
5951
|
+
onMobilePanelOpen,
|
|
5952
|
+
onMobilePanelClose,
|
|
5953
|
+
]);
|
|
5724
5954
|
return (React__default.createElement("div", { className: b$1({ compact }, className), ref: targetRef },
|
|
5725
5955
|
React__default.createElement("header", { className: b$1('header'), style: { height: size } },
|
|
5726
5956
|
React__default.createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger'), closeTitle: burgerCloseTitle, openTitle: burgerOpenTitle }),
|