@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/cjs/index.js
CHANGED
|
@@ -32,10 +32,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
32
32
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
33
33
|
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
|
34
34
|
|
|
35
|
-
const ASIDE_HEADER_ICON_SIZE = 18;
|
|
36
|
-
const ASIDE_HEADER_COMPACT_WIDTH = 56;
|
|
37
|
-
const ASIDE_HEADER_EXPANDED_WIDTH = 236;
|
|
38
|
-
|
|
39
35
|
/* Used by renderContent AsideHeader prop */
|
|
40
36
|
const RenderContent = React__default["default"].memo(({ renderContent, size }) => {
|
|
41
37
|
return React__default["default"].createElement(React__default["default"].Fragment, null, renderContent({ size }));
|
|
@@ -547,6 +543,10 @@ function isMenuItem(item) {
|
|
|
547
543
|
return (item === null || item === void 0 ? void 0 : item.id) !== undefined;
|
|
548
544
|
}
|
|
549
545
|
|
|
546
|
+
const ASIDE_HEADER_ICON_SIZE = 18;
|
|
547
|
+
const ASIDE_HEADER_COMPACT_WIDTH = 56;
|
|
548
|
+
const ASIDE_HEADER_EXPANDED_WIDTH = 236;
|
|
549
|
+
|
|
550
550
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
551
551
|
|
|
552
552
|
/**
|
|
@@ -1115,10 +1115,10 @@ function styleInject(css, ref) {
|
|
|
1115
1115
|
}
|
|
1116
1116
|
}
|
|
1117
1117
|
|
|
1118
|
-
var css_248z$
|
|
1119
|
-
styleInject(css_248z$
|
|
1118
|
+
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}";
|
|
1119
|
+
styleInject(css_248z$p);
|
|
1120
1120
|
|
|
1121
|
-
const b$
|
|
1121
|
+
const b$q = block('composite-bar-highlighted-item');
|
|
1122
1122
|
const DEBOUNCE_TIME = 200;
|
|
1123
1123
|
const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
1124
1124
|
const { openModalSubscriber } = useAsideHeaderInnerContext();
|
|
@@ -1129,7 +1129,7 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
|
1129
1129
|
height: 0,
|
|
1130
1130
|
});
|
|
1131
1131
|
const [isModalOpen, setIsModalOpen] = React.useState(false);
|
|
1132
|
-
const
|
|
1132
|
+
const handleResizeDebounced = React.useMemo(() => debounce_1(() => {
|
|
1133
1133
|
var _a;
|
|
1134
1134
|
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()) || {};
|
|
1135
1135
|
setPosition({
|
|
@@ -1138,7 +1138,8 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
|
1138
1138
|
width,
|
|
1139
1139
|
height,
|
|
1140
1140
|
});
|
|
1141
|
-
}, DEBOUNCE_TIME, { leading: true }), []);
|
|
1141
|
+
}, DEBOUNCE_TIME, { leading: true }), [iconRef]);
|
|
1142
|
+
const handleResize = React.useCallback(() => handleResizeDebounced(), [handleResizeDebounced]);
|
|
1142
1143
|
React.useEffect(() => {
|
|
1143
1144
|
if (!isModalOpen) {
|
|
1144
1145
|
return;
|
|
@@ -1154,21 +1155,21 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
|
1154
1155
|
return null;
|
|
1155
1156
|
}
|
|
1156
1157
|
return (React__default["default"].createElement(uikit.Portal, null,
|
|
1157
|
-
React__default["default"].createElement("div", { className: b$
|
|
1158
|
-
React__default["default"].createElement("div", { className: b$
|
|
1158
|
+
React__default["default"].createElement("div", { className: b$q(), style: { left, top, width, height }, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
|
|
1159
|
+
React__default["default"].createElement("div", { className: b$q('icon') }, iconNode))));
|
|
1159
1160
|
};
|
|
1160
1161
|
HighlightedItem.displayName = 'HighlightedItem';
|
|
1161
1162
|
|
|
1162
|
-
var css_248z$
|
|
1163
|
-
styleInject(css_248z$
|
|
1163
|
+
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}";
|
|
1164
|
+
styleInject(css_248z$o);
|
|
1164
1165
|
|
|
1165
|
-
const b$
|
|
1166
|
+
const b$p = block('composite-bar-item');
|
|
1166
1167
|
function renderItemTitle(item) {
|
|
1167
|
-
let titleNode = React__default["default"].createElement("div", { className: b$
|
|
1168
|
+
let titleNode = React__default["default"].createElement("div", { className: b$p('title-text') }, item.title);
|
|
1168
1169
|
if (item.rightAdornment) {
|
|
1169
1170
|
titleNode = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1170
1171
|
titleNode,
|
|
1171
|
-
React__default["default"].createElement("div", { className: b$
|
|
1172
|
+
React__default["default"].createElement("div", { className: b$p('title-adornment') }, item.rightAdornment)));
|
|
1172
1173
|
}
|
|
1173
1174
|
return titleNode;
|
|
1174
1175
|
}
|
|
@@ -1177,9 +1178,6 @@ const defaultPopupOffset = [-20, 8];
|
|
|
1177
1178
|
const Item$1 = (props) => {
|
|
1178
1179
|
const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, onItemClickCapture, bringForward, } = props;
|
|
1179
1180
|
const { compact } = useAsideHeaderContext();
|
|
1180
|
-
if (item.type === 'divider') {
|
|
1181
|
-
return React__default["default"].createElement("div", { className: b$n('menu-divider') });
|
|
1182
|
-
}
|
|
1183
1181
|
const [open, toggleOpen] = React__default["default"].useState(false);
|
|
1184
1182
|
const ref = React__default["default"].useRef(null);
|
|
1185
1183
|
const anchorRef = popupAnchor || ref;
|
|
@@ -1199,13 +1197,16 @@ const Item$1 = (props) => {
|
|
|
1199
1197
|
}
|
|
1200
1198
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
1201
1199
|
}, [onClosePopup]);
|
|
1200
|
+
if (item.type === 'divider') {
|
|
1201
|
+
return React__default["default"].createElement("div", { className: b$p('menu-divider') });
|
|
1202
|
+
}
|
|
1202
1203
|
const makeIconNode = (iconEl) => {
|
|
1203
|
-
return compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$
|
|
1204
|
-
React__default["default"].createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$
|
|
1204
|
+
return compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$p('icon-tooltip', { 'item-type': type }) },
|
|
1205
|
+
React__default["default"].createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$p('btn-icon') }, iconEl))) : (iconEl);
|
|
1205
1206
|
};
|
|
1206
1207
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
1207
1208
|
const createdNode = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1208
|
-
React__default["default"].createElement("div", { className: b$
|
|
1209
|
+
React__default["default"].createElement("div", { className: b$p({ type, current, compact }, className), ref: ref, onClick: (event) => {
|
|
1209
1210
|
if (collapsedItem) {
|
|
1210
1211
|
/**
|
|
1211
1212
|
* If we call onItemClick for collapsedItem then:
|
|
@@ -1226,12 +1227,12 @@ const Item$1 = (props) => {
|
|
|
1226
1227
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
1227
1228
|
}
|
|
1228
1229
|
} },
|
|
1229
|
-
React__default["default"].createElement("div", { className: b$
|
|
1230
|
-
React__default["default"].createElement("div", { className: b$
|
|
1231
|
-
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { contentClassName: b$
|
|
1232
|
-
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$
|
|
1230
|
+
React__default["default"].createElement("div", { className: b$p('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
|
|
1231
|
+
React__default["default"].createElement("div", { className: b$p('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)),
|
|
1232
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { contentClassName: b$p('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
1233
|
+
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$p('link') }, createdNode)) : (createdNode);
|
|
1233
1234
|
};
|
|
1234
|
-
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$
|
|
1235
|
+
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$p('icon') }) : null;
|
|
1235
1236
|
const titleNode = renderItemTitle(item);
|
|
1236
1237
|
const params = { icon: iconNode, title: titleNode };
|
|
1237
1238
|
let node;
|
|
@@ -1252,13 +1253,13 @@ Item$1.displayName = 'Item';
|
|
|
1252
1253
|
function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
1253
1254
|
const { compact } = useAsideHeaderContext();
|
|
1254
1255
|
return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default["default"].createElement(uikit.Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
|
|
1255
|
-
React__default["default"].createElement("div", { className: b$
|
|
1256
|
-
React__default["default"].createElement(uikit.List, { itemClassName: b$
|
|
1256
|
+
React__default["default"].createElement("div", { className: b$p('collapse-items-popup-content') },
|
|
1257
|
+
React__default["default"].createElement(uikit.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) => {
|
|
1257
1258
|
const makeCollapseNode = ({ title: titleEl }) => {
|
|
1258
|
-
const res = (React__default["default"].createElement("div", { className: b$
|
|
1259
|
+
const res = (React__default["default"].createElement("div", { className: b$p('collapse-item'), onClick: (event) => {
|
|
1259
1260
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true, event);
|
|
1260
1261
|
} }, titleEl));
|
|
1261
|
-
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$
|
|
1262
|
+
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$p('link') }, res)) : (res);
|
|
1262
1263
|
};
|
|
1263
1264
|
const titleNode = renderItemTitle(collapseItem);
|
|
1264
1265
|
const params = { title: titleNode };
|
|
@@ -1299,10 +1300,10 @@ class MultipleTooltipProvider extends React__default["default"].PureComponent {
|
|
|
1299
1300
|
}
|
|
1300
1301
|
}
|
|
1301
1302
|
|
|
1302
|
-
var css_248z$
|
|
1303
|
-
styleInject(css_248z$
|
|
1303
|
+
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}";
|
|
1304
|
+
styleInject(css_248z$n);
|
|
1304
1305
|
|
|
1305
|
-
const b$
|
|
1306
|
+
const b$o = block('multiple-tooltip');
|
|
1306
1307
|
const POPUP_OFFSET = [-32, 4];
|
|
1307
1308
|
const POPUP_MODIFIERS = [
|
|
1308
1309
|
{
|
|
@@ -1313,26 +1314,26 @@ const POPUP_MODIFIERS = [
|
|
|
1313
1314
|
const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
|
|
1314
1315
|
const { activeIndex, hideCollapseItemTooltip } = React__default["default"].useContext(MultipleTooltipContext);
|
|
1315
1316
|
const activeItem = activeIndex === undefined ? null : items[activeIndex];
|
|
1316
|
-
return (React__default["default"].createElement(uikit.Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$
|
|
1317
|
-
React__default["default"].createElement("div", { className: b$
|
|
1317
|
+
return (React__default["default"].createElement(uikit.Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$o(null), modifiers: POPUP_MODIFIERS },
|
|
1318
|
+
React__default["default"].createElement("div", { className: b$o('items-container') }, items
|
|
1318
1319
|
.filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
|
|
1319
1320
|
(id !== COLLAPSE_ITEM_ID && type !== 'action'))
|
|
1320
1321
|
.map((item, idx) => {
|
|
1321
1322
|
switch (item.type) {
|
|
1322
1323
|
case 'divider':
|
|
1323
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
1324
|
+
return (React__default["default"].createElement("div", { className: b$o('item', { divider: true }), key: idx }, item.title));
|
|
1324
1325
|
default:
|
|
1325
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
1326
|
+
return (React__default["default"].createElement("div", { className: b$o('item', {
|
|
1326
1327
|
active: item === activeItem,
|
|
1327
1328
|
}), key: idx }, item.title));
|
|
1328
1329
|
}
|
|
1329
1330
|
}))));
|
|
1330
1331
|
};
|
|
1331
1332
|
|
|
1332
|
-
var css_248z$
|
|
1333
|
-
styleInject(css_248z$
|
|
1333
|
+
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}";
|
|
1334
|
+
styleInject(css_248z$m);
|
|
1334
1335
|
|
|
1335
|
-
const b$
|
|
1336
|
+
const b$n = block('composite-bar');
|
|
1336
1337
|
const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
|
|
1337
1338
|
const ref = React.useRef(null);
|
|
1338
1339
|
const tooltipRef = React.useRef(null);
|
|
@@ -1375,9 +1376,9 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1375
1376
|
lastClickedItemIndex: undefined,
|
|
1376
1377
|
});
|
|
1377
1378
|
}
|
|
1378
|
-
}, [multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
1379
|
+
}, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
1379
1380
|
const onMouseEnterByIndex = React.useCallback((itemIndex) => () => {
|
|
1380
|
-
if (multipleTooltip) {
|
|
1381
|
+
if (multipleTooltip && document.hasFocus()) {
|
|
1381
1382
|
let multipleTooltipActiveValue = multipleTooltipActive;
|
|
1382
1383
|
if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
|
|
1383
1384
|
multipleTooltipActiveValue = true;
|
|
@@ -1391,10 +1392,16 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1391
1392
|
active: multipleTooltipActiveValue,
|
|
1392
1393
|
});
|
|
1393
1394
|
}
|
|
1394
|
-
}, [
|
|
1395
|
+
}, [
|
|
1396
|
+
multipleTooltip,
|
|
1397
|
+
multipleTooltipActive,
|
|
1398
|
+
lastClickedItemIndex,
|
|
1399
|
+
activeIndex,
|
|
1400
|
+
setMultipleTooltipContextValue,
|
|
1401
|
+
]);
|
|
1395
1402
|
const onMouseLeave = React.useCallback(() => {
|
|
1396
1403
|
var _a;
|
|
1397
|
-
if (compact) {
|
|
1404
|
+
if (compact && document.hasFocus()) {
|
|
1398
1405
|
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
1399
1406
|
if (multipleTooltip &&
|
|
1400
1407
|
(activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
|
|
@@ -1404,7 +1411,13 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1404
1411
|
});
|
|
1405
1412
|
}
|
|
1406
1413
|
}
|
|
1407
|
-
}, [
|
|
1414
|
+
}, [
|
|
1415
|
+
activeIndex,
|
|
1416
|
+
compact,
|
|
1417
|
+
lastClickedItemIndex,
|
|
1418
|
+
multipleTooltip,
|
|
1419
|
+
setMultipleTooltipContextValue,
|
|
1420
|
+
]);
|
|
1408
1421
|
const onItemClickByIndex = React.useCallback((itemIndex) => (item, collapsed, event) => {
|
|
1409
1422
|
if (compact &&
|
|
1410
1423
|
multipleTooltip &&
|
|
@@ -1416,17 +1429,23 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
|
|
|
1416
1429
|
});
|
|
1417
1430
|
}
|
|
1418
1431
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
|
|
1419
|
-
}, [
|
|
1432
|
+
}, [
|
|
1433
|
+
compact,
|
|
1434
|
+
lastClickedItemIndex,
|
|
1435
|
+
multipleTooltip,
|
|
1436
|
+
onItemClick,
|
|
1437
|
+
setMultipleTooltipContextValue,
|
|
1438
|
+
]);
|
|
1420
1439
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1421
1440
|
React__default["default"].createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
1422
|
-
React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$
|
|
1441
|
+
React__default["default"].createElement(uikit.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) => {
|
|
1423
1442
|
const itemExtraProps = isMenuItem(item) ? { item } : item;
|
|
1424
1443
|
const enableTooltip = isMenuItem(item)
|
|
1425
1444
|
? !multipleTooltip
|
|
1426
1445
|
: item.enableTooltip;
|
|
1427
1446
|
return (React__default["default"].createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
|
|
1428
1447
|
} })),
|
|
1429
|
-
type === 'menu' && (React__default["default"].createElement(MultipleTooltip, { open: compact &&
|
|
1448
|
+
type === 'menu' && multipleTooltip && (React__default["default"].createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
1430
1449
|
};
|
|
1431
1450
|
const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip = false, }) => {
|
|
1432
1451
|
if (items.length === 0) {
|
|
@@ -1436,20 +1455,20 @@ const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip
|
|
|
1436
1455
|
if (type === 'menu') {
|
|
1437
1456
|
const minHeight = getItemsMinHeight(items);
|
|
1438
1457
|
const collapseItem = getMoreButtonItem(menuMoreTitle);
|
|
1439
|
-
node = (React__default["default"].createElement("div", { className: b$
|
|
1458
|
+
node = (React__default["default"].createElement("div", { className: b$n({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
|
|
1440
1459
|
const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
|
|
1441
1460
|
return (React__default["default"].createElement("div", { style: { width, height } },
|
|
1442
1461
|
React__default["default"].createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
1443
1462
|
}))));
|
|
1444
1463
|
}
|
|
1445
1464
|
else {
|
|
1446
|
-
node = (React__default["default"].createElement("div", { className: b$
|
|
1465
|
+
node = (React__default["default"].createElement("div", { className: b$n({ subheader: true }) },
|
|
1447
1466
|
React__default["default"].createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
|
|
1448
1467
|
}
|
|
1449
1468
|
return React__default["default"].createElement(MultipleTooltipProvider, null, node);
|
|
1450
1469
|
};
|
|
1451
1470
|
|
|
1452
|
-
const b$
|
|
1471
|
+
const b$m = block('aside-header');
|
|
1453
1472
|
|
|
1454
1473
|
const PARAM_REGEXP = /{{(.*?)}}/g;
|
|
1455
1474
|
function replaceParams(keyValue, params) {
|
|
@@ -1650,17 +1669,170 @@ const subscribeConfigure = (sub) => {
|
|
|
1650
1669
|
};
|
|
1651
1670
|
const getConfig = () => config$1;
|
|
1652
1671
|
|
|
1653
|
-
const i18n$
|
|
1654
|
-
i18n$
|
|
1672
|
+
const i18n$5 = new I18N();
|
|
1673
|
+
i18n$5.setLang(getConfig().lang);
|
|
1655
1674
|
subscribeConfigure((config) => {
|
|
1656
|
-
i18n$
|
|
1675
|
+
i18n$5.setLang(config.lang);
|
|
1657
1676
|
});
|
|
1658
1677
|
|
|
1659
1678
|
function registerKeyset(data, keysetName) {
|
|
1660
|
-
Object.entries(data).forEach(([lang, keys]) => i18n$
|
|
1661
|
-
return i18n$
|
|
1679
|
+
Object.entries(data).forEach(([lang, keys]) => i18n$5.registerKeyset(lang, keysetName, keys));
|
|
1680
|
+
return i18n$5.keyset(keysetName);
|
|
1662
1681
|
}
|
|
1663
1682
|
|
|
1683
|
+
var en$4 = {
|
|
1684
|
+
"menu-item.all-pages.title": "All pages",
|
|
1685
|
+
"all-panel.menu.category.allOther": "All other",
|
|
1686
|
+
"all-panel.resetToDefault": "Reset to default",
|
|
1687
|
+
"all-panel.title.editing": "Editing",
|
|
1688
|
+
"all-panel.title.main": "All pages"
|
|
1689
|
+
};
|
|
1690
|
+
|
|
1691
|
+
var ru$4 = {
|
|
1692
|
+
"menu-item.all-pages.title": "Все страницы",
|
|
1693
|
+
"all-panel.menu.category.allOther": "Остальное",
|
|
1694
|
+
"all-panel.resetToDefault": "Сбросить по умолчанию",
|
|
1695
|
+
"all-panel.title.editing": "Редактирование",
|
|
1696
|
+
"all-panel.title.main": "Все страницы"
|
|
1697
|
+
};
|
|
1698
|
+
|
|
1699
|
+
const COMPONENT$4 = 'AllPagesPanel';
|
|
1700
|
+
var i18n$4 = registerKeyset({ en: en$4, ru: ru$4 }, COMPONENT$4);
|
|
1701
|
+
|
|
1702
|
+
const ALL_PAGES_ID = 'all-pages';
|
|
1703
|
+
const ALL_PAGES_MENU_ITEM = {
|
|
1704
|
+
id: ALL_PAGES_ID,
|
|
1705
|
+
title: i18n$4('menu-item.all-pages.title'),
|
|
1706
|
+
tooltipText: i18n$4('menu-item.all-pages.title'),
|
|
1707
|
+
icon: icons.Ellipsis,
|
|
1708
|
+
};
|
|
1709
|
+
|
|
1710
|
+
const useGroupedMenuItems = (items) => {
|
|
1711
|
+
const allPagesMenuItems = React.useMemo(() => {
|
|
1712
|
+
const filteredItems = items.filter((item) => item.type !== 'divider' && item.id !== ALL_PAGES_ID);
|
|
1713
|
+
filteredItems.sort((a, b) => {
|
|
1714
|
+
if (a.type === 'action') {
|
|
1715
|
+
return 1;
|
|
1716
|
+
}
|
|
1717
|
+
if (b.type === 'action') {
|
|
1718
|
+
return -1;
|
|
1719
|
+
}
|
|
1720
|
+
return 0;
|
|
1721
|
+
});
|
|
1722
|
+
const groupedItems = filteredItems.reduce((acc, item) => {
|
|
1723
|
+
const category = item.category || i18n$4('all-panel.menu.category.allOther');
|
|
1724
|
+
if (!acc[category]) {
|
|
1725
|
+
acc[category] = [];
|
|
1726
|
+
}
|
|
1727
|
+
acc[category].push(item);
|
|
1728
|
+
return acc;
|
|
1729
|
+
}, {});
|
|
1730
|
+
return groupedItems;
|
|
1731
|
+
}, [items]);
|
|
1732
|
+
return allPagesMenuItems;
|
|
1733
|
+
};
|
|
1734
|
+
|
|
1735
|
+
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}";
|
|
1736
|
+
styleInject(css_248z$l);
|
|
1737
|
+
|
|
1738
|
+
const b$l = block('all-pages-list-item');
|
|
1739
|
+
const AllPagesListItem = (props) => {
|
|
1740
|
+
const { item, editMode, onToggle } = props;
|
|
1741
|
+
const onPinButtonClick = React.useCallback((e) => {
|
|
1742
|
+
e.stopPropagation();
|
|
1743
|
+
e.preventDefault();
|
|
1744
|
+
onToggle();
|
|
1745
|
+
}, [onToggle]);
|
|
1746
|
+
const onItemClick = (e) => {
|
|
1747
|
+
if (editMode) {
|
|
1748
|
+
e.stopPropagation();
|
|
1749
|
+
e.preventDefault();
|
|
1750
|
+
}
|
|
1751
|
+
};
|
|
1752
|
+
return (React__default["default"].createElement("div", { className: b$l(), onClick: onItemClick },
|
|
1753
|
+
item.icon ? (React__default["default"].createElement(uikit.Icon, { className: b$l('icon'), data: item.icon, size: item.iconSize })) : null,
|
|
1754
|
+
React__default["default"].createElement("span", { className: b$l('text') }, item.title),
|
|
1755
|
+
editMode && (React__default["default"].createElement(uikit.Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
|
|
1756
|
+
React__default["default"].createElement(uikit.Button.Icon, null, item.hidden ? React__default["default"].createElement(icons.Pin, null) : React__default["default"].createElement(icons.PinFill, null))))));
|
|
1757
|
+
};
|
|
1758
|
+
|
|
1759
|
+
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}";
|
|
1760
|
+
styleInject(css_248z$k);
|
|
1761
|
+
|
|
1762
|
+
const b$k = block('all-pages-panel');
|
|
1763
|
+
const AllPagesPanel = (props) => {
|
|
1764
|
+
const { startEditIcon, onEditModeChanged, className } = props;
|
|
1765
|
+
const { menuItems, onMenuItemsChanged } = useAsideHeaderInnerContext();
|
|
1766
|
+
const menuItemsRef = React.useRef(menuItems);
|
|
1767
|
+
menuItemsRef.current = menuItems;
|
|
1768
|
+
const [isEditMode, setIsEditMode] = React.useState(false);
|
|
1769
|
+
const toggleEditMode = React.useCallback(() => {
|
|
1770
|
+
setIsEditMode((prev) => !prev);
|
|
1771
|
+
}, []);
|
|
1772
|
+
const groupedItems = useGroupedMenuItems(menuItems);
|
|
1773
|
+
React.useEffect(() => {
|
|
1774
|
+
onEditModeChanged === null || onEditModeChanged === void 0 ? void 0 : onEditModeChanged(isEditMode);
|
|
1775
|
+
}, [isEditMode, onEditModeChanged]);
|
|
1776
|
+
const onItemClick = React.useCallback((item) => {
|
|
1777
|
+
var _a;
|
|
1778
|
+
//@ts-ignore TODO fix when @gravity-ui/uikit/List will provide event arg on item click
|
|
1779
|
+
(_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, false);
|
|
1780
|
+
}, []);
|
|
1781
|
+
const togglePageVisibility = React.useCallback((item) => {
|
|
1782
|
+
if (!onMenuItemsChanged) {
|
|
1783
|
+
return;
|
|
1784
|
+
}
|
|
1785
|
+
const changedItem = Object.assign(Object.assign({}, item), { hidden: !item.hidden });
|
|
1786
|
+
const originItems = menuItemsRef.current.filter((menuItem) => menuItem.id !== ALL_PAGES_ID);
|
|
1787
|
+
onMenuItemsChanged(originItems.map((menuItem) => {
|
|
1788
|
+
if (menuItem.id !== changedItem.id) {
|
|
1789
|
+
return menuItem;
|
|
1790
|
+
}
|
|
1791
|
+
return changedItem;
|
|
1792
|
+
}));
|
|
1793
|
+
}, [onMenuItemsChanged]);
|
|
1794
|
+
const itemRender = React.useCallback((item, _isActive, _itemIndex) => (React__default["default"].createElement(AllPagesListItem, { item: item, editMode: isEditMode, onToggle: () => togglePageVisibility(item) })), [isEditMode, togglePageVisibility]);
|
|
1795
|
+
const onResetToDefaultClick = React.useCallback(() => {
|
|
1796
|
+
if (!onMenuItemsChanged) {
|
|
1797
|
+
return;
|
|
1798
|
+
}
|
|
1799
|
+
const originItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
|
|
1800
|
+
onMenuItemsChanged(originItems.map((item) => (Object.assign(Object.assign({}, item), { hidden: false }))));
|
|
1801
|
+
}, [onMenuItemsChanged]);
|
|
1802
|
+
return (React__default["default"].createElement(uikit.Flex, { className: b$k(null, className), gap: "5", direction: "column" },
|
|
1803
|
+
React__default["default"].createElement(uikit.Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
|
|
1804
|
+
React__default["default"].createElement(uikit.Text, { variant: "subheader-2" }, isEditMode ? i18n$4('all-panel.title.editing') : i18n$4('all-panel.title.main')),
|
|
1805
|
+
React__default["default"].createElement(uikit.Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default["default"].createElement(uikit.Icon, { data: icons.Gear }))),
|
|
1806
|
+
React__default["default"].createElement(uikit.Flex, { className: b$k('content'), gap: "5", direction: "column" }, Object.keys(groupedItems).map((category) => {
|
|
1807
|
+
return (React__default["default"].createElement(uikit.Flex, { key: category, direction: "column", gap: "3" },
|
|
1808
|
+
React__default["default"].createElement(uikit.Text, { className: b$k('category'), variant: "body-1", color: "secondary" }, category),
|
|
1809
|
+
React__default["default"].createElement(uikit.List, { virtualized: false, filterable: false, items: groupedItems[category], onItemClick: onItemClick, renderItem: itemRender })));
|
|
1810
|
+
})),
|
|
1811
|
+
isEditMode && (React__default["default"].createElement(uikit.Button, { onClick: onResetToDefaultClick }, i18n$4('all-panel.resetToDefault')))));
|
|
1812
|
+
};
|
|
1813
|
+
|
|
1814
|
+
const useVisibleMenuItems = () => {
|
|
1815
|
+
const { menuItems, allPagesIsAvailable } = useAsideHeaderInnerContext();
|
|
1816
|
+
return React.useMemo(() => {
|
|
1817
|
+
if (!allPagesIsAvailable) {
|
|
1818
|
+
return menuItems;
|
|
1819
|
+
}
|
|
1820
|
+
let lastVisibleIndex = 0;
|
|
1821
|
+
return menuItems.filter((item, index, items) => {
|
|
1822
|
+
if (item.hidden) {
|
|
1823
|
+
return false;
|
|
1824
|
+
}
|
|
1825
|
+
if (index > 0 &&
|
|
1826
|
+
item.type === 'divider' &&
|
|
1827
|
+
(items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)) {
|
|
1828
|
+
return false;
|
|
1829
|
+
}
|
|
1830
|
+
lastVisibleIndex = index;
|
|
1831
|
+
return true;
|
|
1832
|
+
});
|
|
1833
|
+
}, [allPagesIsAvailable, menuItems]);
|
|
1834
|
+
};
|
|
1835
|
+
|
|
1664
1836
|
var button_collapse$1 = "Collapse";
|
|
1665
1837
|
var button_expand$1 = "Expand";
|
|
1666
1838
|
var label_more$1 = "More";
|
|
@@ -1729,15 +1901,15 @@ var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
|
1729
1901
|
const DEFAULT_SUBHEADER_ITEMS = [];
|
|
1730
1902
|
const Header = () => {
|
|
1731
1903
|
const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
|
|
1904
|
+
const { onClick: onLogoClickProp } = logo;
|
|
1732
1905
|
const onLogoClick = React.useCallback((event) => {
|
|
1733
|
-
var _a;
|
|
1734
1906
|
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
1735
|
-
|
|
1736
|
-
}, [onClosePanel,
|
|
1737
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
1907
|
+
onLogoClickProp === null || onLogoClickProp === void 0 ? void 0 : onLogoClickProp(event);
|
|
1908
|
+
}, [onClosePanel, onLogoClickProp]);
|
|
1909
|
+
return (React__default["default"].createElement("div", { className: b$m('header', { ['with-decoration']: headerDecoration }) },
|
|
1738
1910
|
React__default["default"].createElement(Logo$1, Object.assign({}, logo, { onClick: onLogoClick })),
|
|
1739
1911
|
React__default["default"].createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
|
|
1740
|
-
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$
|
|
1912
|
+
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$m('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
1741
1913
|
};
|
|
1742
1914
|
|
|
1743
1915
|
function fakeDisplayName(newDisplayName, Component) {
|
|
@@ -1767,12 +1939,12 @@ const CollapseButton = () => {
|
|
|
1767
1939
|
const { onChangeCompact, compact, expandTitle, collapseTitle } = useAsideHeaderInnerContext();
|
|
1768
1940
|
const onCollapseButtonClick = React.useCallback(() => {
|
|
1769
1941
|
onChangeCompact === null || onChangeCompact === void 0 ? void 0 : onChangeCompact(!compact);
|
|
1770
|
-
}, [compact]);
|
|
1942
|
+
}, [compact, onChangeCompact]);
|
|
1771
1943
|
const buttonTitle = compact
|
|
1772
1944
|
? expandTitle || i18n$3('button_expand')
|
|
1773
1945
|
: collapseTitle || i18n$3('button_collapse');
|
|
1774
|
-
return (React__default["default"].createElement(uikit.Button, { className: b$
|
|
1775
|
-
React__default["default"].createElement(NotIcon, { data: controlMenuButtonIcon, className: b$
|
|
1946
|
+
return (React__default["default"].createElement(uikit.Button, { className: b$m('collapse-button', { compact }), view: "flat", onClick: onCollapseButtonClick, title: buttonTitle },
|
|
1947
|
+
React__default["default"].createElement(NotIcon, { data: controlMenuButtonIcon, className: b$m('collapse-icon'), width: "16", height: "10" })));
|
|
1776
1948
|
};
|
|
1777
1949
|
|
|
1778
1950
|
function _extends() {
|
|
@@ -4850,19 +5022,20 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
4850
5022
|
|
|
4851
5023
|
const Panels = () => {
|
|
4852
5024
|
const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
|
|
4853
|
-
return panelItems ? (React__default["default"].createElement(Drawer, { className: b$
|
|
5025
|
+
return panelItems ? (React__default["default"].createElement(Drawer, { className: b$m('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
|
|
4854
5026
|
};
|
|
4855
5027
|
|
|
4856
5028
|
const FirstPanel = () => {
|
|
4857
|
-
const { size, onItemClick,
|
|
5029
|
+
const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, renderFooter, compact, } = useAsideHeaderInnerContext();
|
|
5030
|
+
const visibleMenuItems = useVisibleMenuItems();
|
|
4858
5031
|
const asideRef = React.useRef(null);
|
|
4859
5032
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4860
|
-
React__default["default"].createElement("div", { className: b$
|
|
4861
|
-
React__default["default"].createElement("div", { className: b$
|
|
4862
|
-
React__default["default"].createElement("div", { className: b$
|
|
5033
|
+
React__default["default"].createElement("div", { className: b$m('aside'), style: { width: size } },
|
|
5034
|
+
React__default["default"].createElement("div", { className: b$m('aside-popup-anchor'), ref: asideRef }),
|
|
5035
|
+
React__default["default"].createElement("div", { className: b$m('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4863
5036
|
React__default["default"].createElement(Header, null),
|
|
4864
|
-
(
|
|
4865
|
-
React__default["default"].createElement("div", { className: b$
|
|
5037
|
+
(visibleMenuItems === null || visibleMenuItems === void 0 ? void 0 : visibleMenuItems.length) ? (React__default["default"].createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n$3('label_more'), onItemClick: onItemClick, multipleTooltip: multipleTooltip })) : (React__default["default"].createElement("div", { className: b$m('menu-items') })),
|
|
5038
|
+
React__default["default"].createElement("div", { className: b$m('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4866
5039
|
size,
|
|
4867
5040
|
compact: Boolean(compact),
|
|
4868
5041
|
asideRef,
|
|
@@ -4874,21 +5047,70 @@ const FirstPanel = () => {
|
|
|
4874
5047
|
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}";
|
|
4875
5048
|
styleInject(css_248z$h);
|
|
4876
5049
|
|
|
4877
|
-
|
|
4878
|
-
|
|
4879
|
-
|
|
5050
|
+
var InnerPanels;
|
|
5051
|
+
(function (InnerPanels) {
|
|
5052
|
+
InnerPanels["AllPages"] = "all-pages";
|
|
5053
|
+
})(InnerPanels || (InnerPanels = {}));
|
|
5054
|
+
|
|
5055
|
+
const EMPTY_MENU_ITEMS = [];
|
|
5056
|
+
const useAsideHeaderInnerContextValue = (props) => {
|
|
5057
|
+
const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged } = props;
|
|
5058
|
+
const [innerVisiblePanel, setInnerVisiblePanel] = React.useState();
|
|
5059
|
+
const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0);
|
|
5060
|
+
React.useEffect(() => {
|
|
5061
|
+
// If any user panel became visible we need to switch off all inner panels
|
|
5062
|
+
if (panelItems === null || panelItems === void 0 ? void 0 : panelItems.some((x) => x.visible)) {
|
|
5063
|
+
setInnerVisiblePanel(undefined);
|
|
5064
|
+
}
|
|
5065
|
+
}, [panelItems]);
|
|
5066
|
+
const innerOnClosePanel = React.useCallback(() => {
|
|
5067
|
+
setInnerVisiblePanel(undefined);
|
|
5068
|
+
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
5069
|
+
}, [onClosePanel]);
|
|
4880
5070
|
const onItemClick = React.useCallback((item, collapsed, event) => {
|
|
4881
5071
|
var _a;
|
|
4882
|
-
|
|
5072
|
+
if (item.id === ALL_PAGES_MENU_ITEM.id) {
|
|
5073
|
+
setInnerVisiblePanel((prev) => prev === InnerPanels.AllPages ? undefined : InnerPanels.AllPages);
|
|
5074
|
+
}
|
|
5075
|
+
else {
|
|
5076
|
+
innerOnClosePanel();
|
|
5077
|
+
}
|
|
4883
5078
|
(_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, collapsed, event);
|
|
4884
|
-
}, [
|
|
5079
|
+
}, [innerOnClosePanel]);
|
|
5080
|
+
const innerMenuItems = React.useMemo(() => allPagesIsAvailable
|
|
5081
|
+
? [
|
|
5082
|
+
...(menuItems || EMPTY_MENU_ITEMS),
|
|
5083
|
+
Object.assign(Object.assign({}, ALL_PAGES_MENU_ITEM), { current: innerVisiblePanel === InnerPanels.AllPages }),
|
|
5084
|
+
]
|
|
5085
|
+
: menuItems || EMPTY_MENU_ITEMS, [allPagesIsAvailable, menuItems, innerVisiblePanel]);
|
|
5086
|
+
const innerPanelItems = React.useMemo(() => {
|
|
5087
|
+
if (!allPagesIsAvailable) {
|
|
5088
|
+
return panelItems;
|
|
5089
|
+
}
|
|
5090
|
+
return [
|
|
5091
|
+
...(panelItems || []),
|
|
5092
|
+
{
|
|
5093
|
+
id: InnerPanels.AllPages,
|
|
5094
|
+
content: React__default["default"].createElement(AllPagesPanel, null),
|
|
5095
|
+
visible: innerVisiblePanel === InnerPanels.AllPages,
|
|
5096
|
+
},
|
|
5097
|
+
];
|
|
5098
|
+
}, [allPagesIsAvailable, panelItems, innerVisiblePanel]);
|
|
5099
|
+
return Object.assign(Object.assign({}, props), { onClosePanel: innerOnClosePanel, allPagesIsAvailable, menuItems: innerMenuItems, panelItems: innerPanelItems, size,
|
|
5100
|
+
onItemClick });
|
|
5101
|
+
};
|
|
5102
|
+
|
|
5103
|
+
const AsideHeader = (props) => {
|
|
5104
|
+
const { className, compact } = props;
|
|
5105
|
+
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
4885
5106
|
const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
|
|
5107
|
+
const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign(Object.assign({}, props), { size }));
|
|
4886
5108
|
return (React__default["default"].createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
|
|
4887
|
-
React__default["default"].createElement(AsideHeaderInnerContextProvider, { value:
|
|
4888
|
-
React__default["default"].createElement("div", { className: b$
|
|
4889
|
-
React__default["default"].createElement("div", { className: b$
|
|
5109
|
+
React__default["default"].createElement(AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
|
|
5110
|
+
React__default["default"].createElement("div", { className: b$m({ compact }, className) },
|
|
5111
|
+
React__default["default"].createElement("div", { className: b$m('pane-container') },
|
|
4890
5112
|
React__default["default"].createElement(FirstPanel, null),
|
|
4891
|
-
React__default["default"].createElement(Content, { size: size, renderContent: props.renderContent, className: b$
|
|
5113
|
+
React__default["default"].createElement(Content, { size: size, renderContent: props.renderContent, className: b$m('content') }))))));
|
|
4892
5114
|
};
|
|
4893
5115
|
|
|
4894
5116
|
/******************************************************************************
|
|
@@ -5675,12 +5897,12 @@ const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, b
|
|
|
5675
5897
|
onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, panelOpen ? EVENT_NAMES.closeEvent : EVENT_NAMES.openEvent);
|
|
5676
5898
|
return panelOpen ? null : name;
|
|
5677
5899
|
});
|
|
5678
|
-
}, [
|
|
5900
|
+
}, [onEvent]);
|
|
5679
5901
|
const onMobilePanelToggle = React.useCallback(({ detail }) => {
|
|
5680
5902
|
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5681
5903
|
onPanelToggle(detail === null || detail === void 0 ? void 0 : detail.panelName);
|
|
5682
5904
|
}
|
|
5683
|
-
}, [
|
|
5905
|
+
}, [onPanelToggle]);
|
|
5684
5906
|
const onMobilePanelOpen = React.useCallback(({ detail }) => {
|
|
5685
5907
|
if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
|
|
5686
5908
|
onEvent === null || onEvent === void 0 ? void 0 : onEvent(detail === null || detail === void 0 ? void 0 : detail.panelName, EVENT_NAMES.openEvent);
|
|
@@ -5720,16 +5942,16 @@ const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, b
|
|
|
5720
5942
|
size,
|
|
5721
5943
|
isCompact: compact,
|
|
5722
5944
|
});
|
|
5723
|
-
}, [burgerMenu
|
|
5945
|
+
}, [burgerMenu, size, compact]);
|
|
5724
5946
|
const onLogoClick = React.useCallback((event) => {
|
|
5725
5947
|
var _a;
|
|
5726
5948
|
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
5727
5949
|
(_a = logo.onClick) === null || _a === void 0 ? void 0 : _a.call(logo, event);
|
|
5728
|
-
}, [logo
|
|
5950
|
+
}, [logo, onClosePanel]);
|
|
5729
5951
|
const burgerPanelItem = React.useMemo(() => ({
|
|
5730
5952
|
id: BURGER_PANEL_ITEM_ID,
|
|
5731
5953
|
content: (React__default["default"].createElement(BurgerMenu, { items: burgerMenu.items, modalItem: burgerMenu.modalItem, renderFooter: renderBurgerMenuFooter, onItemClick: onBurgerMenuItemClick, className: b$1('burger-menu') })),
|
|
5732
|
-
}), [burgerMenu]);
|
|
5954
|
+
}), [burgerMenu.items, burgerMenu.modalItem, onBurgerMenuItemClick, renderBurgerMenuFooter]);
|
|
5733
5955
|
React.useEffect(() => {
|
|
5734
5956
|
const node = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
|
|
5735
5957
|
if (node) {
|
|
@@ -5748,7 +5970,14 @@ const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, b
|
|
|
5748
5970
|
node.removeEventListener('MOBILE_PANEL_CLOSE', onMobilePanelClose);
|
|
5749
5971
|
}
|
|
5750
5972
|
};
|
|
5751
|
-
}, [
|
|
5973
|
+
}, [
|
|
5974
|
+
targetRef,
|
|
5975
|
+
onBurgerClose,
|
|
5976
|
+
onBurgerOpen,
|
|
5977
|
+
onMobilePanelToggle,
|
|
5978
|
+
onMobilePanelOpen,
|
|
5979
|
+
onMobilePanelClose,
|
|
5980
|
+
]);
|
|
5752
5981
|
return (React__default["default"].createElement("div", { className: b$1({ compact }, className), ref: targetRef },
|
|
5753
5982
|
React__default["default"].createElement("header", { className: b$1('header'), style: { height: size } },
|
|
5754
5983
|
React__default["default"].createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger'), closeTitle: burgerCloseTitle, openTitle: burgerOpenTitle }),
|