@gravity-ui/navigation 0.21.1 → 0.22.1
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 +2 -1
- package/build/cjs/components/types.d.ts +12 -0
- package/build/cjs/index.js +316 -87
- 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 +2 -1
- package/build/esm/components/types.d.ts +12 -0
- package/build/esm/index.js +319 -90
- 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,13 +1170,16 @@ 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
1181
|
const createdNode = (React__default.createElement(React__default.Fragment, null,
|
|
1181
|
-
React__default.createElement("div", { className: b$
|
|
1182
|
+
React__default.createElement("div", { className: b$p({ type, current, compact }, className), ref: ref, onClick: (event) => {
|
|
1182
1183
|
if (collapsedItem) {
|
|
1183
1184
|
/**
|
|
1184
1185
|
* If we call onItemClick for collapsedItem then:
|
|
@@ -1199,12 +1200,12 @@ const Item$1 = (props) => {
|
|
|
1199
1200
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
1200
1201
|
}
|
|
1201
1202
|
} },
|
|
1202
|
-
React__default.createElement("div", { className: b$
|
|
1203
|
-
React__default.createElement("div", { className: b$
|
|
1204
|
-
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { contentClassName: b$
|
|
1205
|
-
return item.link ? (React__default.createElement("a", { href: item.link, className: b$
|
|
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);
|
|
1206
1207
|
};
|
|
1207
|
-
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;
|
|
1208
1209
|
const titleNode = renderItemTitle(item);
|
|
1209
1210
|
const params = { icon: iconNode, title: titleNode };
|
|
1210
1211
|
let node;
|
|
@@ -1225,13 +1226,13 @@ Item$1.displayName = 'Item';
|
|
|
1225
1226
|
function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
1226
1227
|
const { compact } = useAsideHeaderContext();
|
|
1227
1228
|
return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
|
|
1228
|
-
React__default.createElement("div", { className: b$
|
|
1229
|
-
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) => {
|
|
1230
1231
|
const makeCollapseNode = ({ title: titleEl }) => {
|
|
1231
|
-
const res = (React__default.createElement("div", { className: b$
|
|
1232
|
+
const res = (React__default.createElement("div", { className: b$p('collapse-item'), onClick: (event) => {
|
|
1232
1233
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true, event);
|
|
1233
1234
|
} }, titleEl));
|
|
1234
|
-
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);
|
|
1235
1236
|
};
|
|
1236
1237
|
const titleNode = renderItemTitle(collapseItem);
|
|
1237
1238
|
const params = { title: titleNode };
|
|
@@ -1272,10 +1273,10 @@ class MultipleTooltipProvider extends React__default.PureComponent {
|
|
|
1272
1273
|
}
|
|
1273
1274
|
}
|
|
1274
1275
|
|
|
1275
|
-
var css_248z$
|
|
1276
|
-
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);
|
|
1277
1278
|
|
|
1278
|
-
const b$
|
|
1279
|
+
const b$o = block('multiple-tooltip');
|
|
1279
1280
|
const POPUP_OFFSET = [-32, 4];
|
|
1280
1281
|
const POPUP_MODIFIERS = [
|
|
1281
1282
|
{
|
|
@@ -1286,26 +1287,26 @@ const POPUP_MODIFIERS = [
|
|
|
1286
1287
|
const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
|
|
1287
1288
|
const { activeIndex, hideCollapseItemTooltip } = React__default.useContext(MultipleTooltipContext);
|
|
1288
1289
|
const activeItem = activeIndex === undefined ? null : items[activeIndex];
|
|
1289
|
-
return (React__default.createElement(Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$
|
|
1290
|
-
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
|
|
1291
1292
|
.filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
|
|
1292
1293
|
(id !== COLLAPSE_ITEM_ID && type !== 'action'))
|
|
1293
1294
|
.map((item, idx) => {
|
|
1294
1295
|
switch (item.type) {
|
|
1295
1296
|
case 'divider':
|
|
1296
|
-
return (React__default.createElement("div", { className: b$
|
|
1297
|
+
return (React__default.createElement("div", { className: b$o('item', { divider: true }), key: idx }, item.title));
|
|
1297
1298
|
default:
|
|
1298
|
-
return (React__default.createElement("div", { className: b$
|
|
1299
|
+
return (React__default.createElement("div", { className: b$o('item', {
|
|
1299
1300
|
active: item === activeItem,
|
|
1300
1301
|
}), key: idx }, item.title));
|
|
1301
1302
|
}
|
|
1302
1303
|
}))));
|
|
1303
1304
|
};
|
|
1304
1305
|
|
|
1305
|
-
var css_248z$
|
|
1306
|
-
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);
|
|
1307
1308
|
|
|
1308
|
-
const b$
|
|
1309
|
+
const b$n = block('composite-bar');
|
|
1309
1310
|
const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
|
|
1310
1311
|
const ref = useRef(null);
|
|
1311
1312
|
const tooltipRef = useRef(null);
|
|
@@ -1348,9 +1349,9 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1348
1349
|
lastClickedItemIndex: undefined,
|
|
1349
1350
|
});
|
|
1350
1351
|
}
|
|
1351
|
-
}, [multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
1352
|
+
}, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
1352
1353
|
const onMouseEnterByIndex = useCallback((itemIndex) => () => {
|
|
1353
|
-
if (multipleTooltip) {
|
|
1354
|
+
if (multipleTooltip && document.hasFocus()) {
|
|
1354
1355
|
let multipleTooltipActiveValue = multipleTooltipActive;
|
|
1355
1356
|
if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
|
|
1356
1357
|
multipleTooltipActiveValue = true;
|
|
@@ -1364,10 +1365,16 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1364
1365
|
active: multipleTooltipActiveValue,
|
|
1365
1366
|
});
|
|
1366
1367
|
}
|
|
1367
|
-
}, [
|
|
1368
|
+
}, [
|
|
1369
|
+
multipleTooltip,
|
|
1370
|
+
multipleTooltipActive,
|
|
1371
|
+
lastClickedItemIndex,
|
|
1372
|
+
activeIndex,
|
|
1373
|
+
setMultipleTooltipContextValue,
|
|
1374
|
+
]);
|
|
1368
1375
|
const onMouseLeave = useCallback(() => {
|
|
1369
1376
|
var _a;
|
|
1370
|
-
if (compact) {
|
|
1377
|
+
if (compact && document.hasFocus()) {
|
|
1371
1378
|
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
1372
1379
|
if (multipleTooltip &&
|
|
1373
1380
|
(activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
|
|
@@ -1377,7 +1384,13 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1377
1384
|
});
|
|
1378
1385
|
}
|
|
1379
1386
|
}
|
|
1380
|
-
}, [
|
|
1387
|
+
}, [
|
|
1388
|
+
activeIndex,
|
|
1389
|
+
compact,
|
|
1390
|
+
lastClickedItemIndex,
|
|
1391
|
+
multipleTooltip,
|
|
1392
|
+
setMultipleTooltipContextValue,
|
|
1393
|
+
]);
|
|
1381
1394
|
const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed, event) => {
|
|
1382
1395
|
if (compact &&
|
|
1383
1396
|
multipleTooltip &&
|
|
@@ -1389,17 +1402,23 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1389
1402
|
});
|
|
1390
1403
|
}
|
|
1391
1404
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
|
|
1392
|
-
}, [
|
|
1405
|
+
}, [
|
|
1406
|
+
compact,
|
|
1407
|
+
lastClickedItemIndex,
|
|
1408
|
+
multipleTooltip,
|
|
1409
|
+
onItemClick,
|
|
1410
|
+
setMultipleTooltipContextValue,
|
|
1411
|
+
]);
|
|
1393
1412
|
return (React__default.createElement(React__default.Fragment, null,
|
|
1394
1413
|
React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
1395
|
-
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) => {
|
|
1396
1415
|
const itemExtraProps = isMenuItem(item) ? { item } : item;
|
|
1397
1416
|
const enableTooltip = isMenuItem(item)
|
|
1398
1417
|
? !multipleTooltip
|
|
1399
1418
|
: item.enableTooltip;
|
|
1400
1419
|
return (React__default.createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
|
|
1401
1420
|
} })),
|
|
1402
|
-
type === 'menu' && (React__default.createElement(MultipleTooltip, { open: compact &&
|
|
1421
|
+
type === 'menu' && multipleTooltip && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
1403
1422
|
};
|
|
1404
1423
|
const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip = false, }) => {
|
|
1405
1424
|
if (items.length === 0) {
|
|
@@ -1409,20 +1428,20 @@ const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip
|
|
|
1409
1428
|
if (type === 'menu') {
|
|
1410
1429
|
const minHeight = getItemsMinHeight(items);
|
|
1411
1430
|
const collapseItem = getMoreButtonItem(menuMoreTitle);
|
|
1412
|
-
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 }) => {
|
|
1413
1432
|
const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
|
|
1414
1433
|
return (React__default.createElement("div", { style: { width, height } },
|
|
1415
1434
|
React__default.createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
1416
1435
|
}))));
|
|
1417
1436
|
}
|
|
1418
1437
|
else {
|
|
1419
|
-
node = (React__default.createElement("div", { className: b$
|
|
1438
|
+
node = (React__default.createElement("div", { className: b$n({ subheader: true }) },
|
|
1420
1439
|
React__default.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
|
|
1421
1440
|
}
|
|
1422
1441
|
return React__default.createElement(MultipleTooltipProvider, null, node);
|
|
1423
1442
|
};
|
|
1424
1443
|
|
|
1425
|
-
const b$
|
|
1444
|
+
const b$m = block('aside-header');
|
|
1426
1445
|
|
|
1427
1446
|
const PARAM_REGEXP = /{{(.*?)}}/g;
|
|
1428
1447
|
function replaceParams(keyValue, params) {
|
|
@@ -1623,17 +1642,170 @@ const subscribeConfigure = (sub) => {
|
|
|
1623
1642
|
};
|
|
1624
1643
|
const getConfig = () => config$1;
|
|
1625
1644
|
|
|
1626
|
-
const i18n$
|
|
1627
|
-
i18n$
|
|
1645
|
+
const i18n$5 = new I18N();
|
|
1646
|
+
i18n$5.setLang(getConfig().lang);
|
|
1628
1647
|
subscribeConfigure((config) => {
|
|
1629
|
-
i18n$
|
|
1648
|
+
i18n$5.setLang(config.lang);
|
|
1630
1649
|
});
|
|
1631
1650
|
|
|
1632
1651
|
function registerKeyset(data, keysetName) {
|
|
1633
|
-
Object.entries(data).forEach(([lang, keys]) => i18n$
|
|
1634
|
-
return i18n$
|
|
1652
|
+
Object.entries(data).forEach(([lang, keys]) => i18n$5.registerKeyset(lang, keysetName, keys));
|
|
1653
|
+
return i18n$5.keyset(keysetName);
|
|
1635
1654
|
}
|
|
1636
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
|
+
|
|
1637
1809
|
var button_collapse$1 = "Collapse";
|
|
1638
1810
|
var button_expand$1 = "Expand";
|
|
1639
1811
|
var label_more$1 = "More";
|
|
@@ -1702,15 +1874,15 @@ var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
|
1702
1874
|
const DEFAULT_SUBHEADER_ITEMS = [];
|
|
1703
1875
|
const Header = () => {
|
|
1704
1876
|
const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
|
|
1877
|
+
const { onClick: onLogoClickProp } = logo;
|
|
1705
1878
|
const onLogoClick = useCallback((event) => {
|
|
1706
|
-
var _a;
|
|
1707
1879
|
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
1708
|
-
|
|
1709
|
-
}, [onClosePanel,
|
|
1710
|
-
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 }) },
|
|
1711
1883
|
React__default.createElement(Logo$1, Object.assign({}, logo, { onClick: onLogoClick })),
|
|
1712
1884
|
React__default.createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
|
|
1713
|
-
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" })));
|
|
1714
1886
|
};
|
|
1715
1887
|
|
|
1716
1888
|
function fakeDisplayName(newDisplayName, Component) {
|
|
@@ -1740,12 +1912,12 @@ const CollapseButton = () => {
|
|
|
1740
1912
|
const { onChangeCompact, compact, expandTitle, collapseTitle } = useAsideHeaderInnerContext();
|
|
1741
1913
|
const onCollapseButtonClick = useCallback(() => {
|
|
1742
1914
|
onChangeCompact === null || onChangeCompact === void 0 ? void 0 : onChangeCompact(!compact);
|
|
1743
|
-
}, [compact]);
|
|
1915
|
+
}, [compact, onChangeCompact]);
|
|
1744
1916
|
const buttonTitle = compact
|
|
1745
1917
|
? expandTitle || i18n$3('button_expand')
|
|
1746
1918
|
: collapseTitle || i18n$3('button_collapse');
|
|
1747
|
-
return (React__default.createElement(Button, { className: b$
|
|
1748
|
-
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" })));
|
|
1749
1921
|
};
|
|
1750
1922
|
|
|
1751
1923
|
function _extends() {
|
|
@@ -4823,19 +4995,20 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
4823
4995
|
|
|
4824
4996
|
const Panels = () => {
|
|
4825
4997
|
const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
|
|
4826
|
-
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;
|
|
4827
4999
|
};
|
|
4828
5000
|
|
|
4829
5001
|
const FirstPanel = () => {
|
|
4830
|
-
const { size, onItemClick,
|
|
5002
|
+
const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, renderFooter, compact, } = useAsideHeaderInnerContext();
|
|
5003
|
+
const visibleMenuItems = useVisibleMenuItems();
|
|
4831
5004
|
const asideRef = useRef(null);
|
|
4832
5005
|
return (React__default.createElement(React__default.Fragment, null,
|
|
4833
|
-
React__default.createElement("div", { className: b$
|
|
4834
|
-
React__default.createElement("div", { className: b$
|
|
4835
|
-
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 }) },
|
|
4836
5009
|
React__default.createElement(Header, null),
|
|
4837
|
-
(
|
|
4838
|
-
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({
|
|
4839
5012
|
size,
|
|
4840
5013
|
compact: Boolean(compact),
|
|
4841
5014
|
asideRef,
|
|
@@ -4847,21 +5020,70 @@ const FirstPanel = () => {
|
|
|
4847
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}";
|
|
4848
5021
|
styleInject(css_248z$h);
|
|
4849
5022
|
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
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]);
|
|
4853
5043
|
const onItemClick = useCallback((item, collapsed, event) => {
|
|
4854
5044
|
var _a;
|
|
4855
|
-
|
|
5045
|
+
if (item.id === ALL_PAGES_MENU_ITEM.id) {
|
|
5046
|
+
setInnerVisiblePanel((prev) => prev === InnerPanels.AllPages ? undefined : InnerPanels.AllPages);
|
|
5047
|
+
}
|
|
5048
|
+
else {
|
|
5049
|
+
innerOnClosePanel();
|
|
5050
|
+
}
|
|
4856
5051
|
(_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, collapsed, event);
|
|
4857
|
-
}, [
|
|
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;
|
|
4858
5079
|
const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
|
|
5080
|
+
const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign(Object.assign({}, props), { size }));
|
|
4859
5081
|
return (React__default.createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
|
|
4860
|
-
React__default.createElement(AsideHeaderInnerContextProvider, { value:
|
|
4861
|
-
React__default.createElement("div", { className: b$
|
|
4862
|
-
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') },
|
|
4863
5085
|
React__default.createElement(FirstPanel, null),
|
|
4864
|
-
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') }))))));
|
|
4865
5087
|
};
|
|
4866
5088
|
|
|
4867
5089
|
/******************************************************************************
|
|
@@ -5648,12 +5870,12 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseT
|
|
|
5648
5870
|
onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, panelOpen ? EVENT_NAMES.closeEvent : EVENT_NAMES.openEvent);
|
|
5649
5871
|
return panelOpen ? null : name;
|
|
5650
5872
|
});
|
|
5651
|
-
}, [
|
|
5873
|
+
}, [onEvent]);
|
|
5652
5874
|
const onMobilePanelToggle = useCallback(({ detail }) => {
|
|
5653
5875
|
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5654
5876
|
onPanelToggle(detail === null || detail === void 0 ? void 0 : detail.panelName);
|
|
5655
5877
|
}
|
|
5656
|
-
}, [
|
|
5878
|
+
}, [onPanelToggle]);
|
|
5657
5879
|
const onMobilePanelOpen = useCallback(({ detail }) => {
|
|
5658
5880
|
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5659
5881
|
onEvent === null || onEvent === void 0 ? void 0 : onEvent(detail === null || detail === void 0 ? void 0 : detail.panelName, EVENT_NAMES.openEvent);
|
|
@@ -5693,16 +5915,16 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseT
|
|
|
5693
5915
|
size,
|
|
5694
5916
|
isCompact: compact,
|
|
5695
5917
|
});
|
|
5696
|
-
}, [burgerMenu
|
|
5918
|
+
}, [burgerMenu, size, compact]);
|
|
5697
5919
|
const onLogoClick = useCallback((event) => {
|
|
5698
5920
|
var _a;
|
|
5699
5921
|
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
5700
5922
|
(_a = logo.onClick) === null || _a === void 0 ? void 0 : _a.call(logo, event);
|
|
5701
|
-
}, [logo
|
|
5923
|
+
}, [logo, onClosePanel]);
|
|
5702
5924
|
const burgerPanelItem = useMemo(() => ({
|
|
5703
5925
|
id: BURGER_PANEL_ITEM_ID,
|
|
5704
5926
|
content: (React__default.createElement(BurgerMenu, { items: burgerMenu.items, modalItem: burgerMenu.modalItem, renderFooter: renderBurgerMenuFooter, onItemClick: onBurgerMenuItemClick, className: b$1('burger-menu') })),
|
|
5705
|
-
}), [burgerMenu]);
|
|
5927
|
+
}), [burgerMenu.items, burgerMenu.modalItem, onBurgerMenuItemClick, renderBurgerMenuFooter]);
|
|
5706
5928
|
useEffect(() => {
|
|
5707
5929
|
const node = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
|
|
5708
5930
|
if (node) {
|
|
@@ -5721,7 +5943,14 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseT
|
|
|
5721
5943
|
node.removeEventListener('MOBILE_PANEL_CLOSE', onMobilePanelClose);
|
|
5722
5944
|
}
|
|
5723
5945
|
};
|
|
5724
|
-
}, [
|
|
5946
|
+
}, [
|
|
5947
|
+
targetRef,
|
|
5948
|
+
onBurgerClose,
|
|
5949
|
+
onBurgerOpen,
|
|
5950
|
+
onMobilePanelToggle,
|
|
5951
|
+
onMobilePanelOpen,
|
|
5952
|
+
onMobilePanelClose,
|
|
5953
|
+
]);
|
|
5725
5954
|
return (React__default.createElement("div", { className: b$1({ compact }, className), ref: targetRef },
|
|
5726
5955
|
React__default.createElement("header", { className: b$1('header'), style: { height: size } },
|
|
5727
5956
|
React__default.createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger'), closeTitle: burgerCloseTitle, openTitle: burgerOpenTitle }),
|