@gravity-ui/navigation 5.0.0-beta.0 → 5.0.0-beta.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/AsideHeader/components/CompositeBar/CompositeBar.d.ts +7 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.d.ts +2 -0
- package/build/cjs/{index-BF-1v7O1.js → index-Bw3wDNJr.js} +130 -234
- package/build/cjs/index-Bw3wDNJr.js.map +1 -0
- package/build/cjs/{index-B9p8boXH.js → index-Di96hvKc.js} +2 -2
- package/build/cjs/{index-B9p8boXH.js.map → index-Di96hvKc.js.map} +1 -1
- package/build/cjs/index.js +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.d.ts +7 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.d.ts +2 -0
- package/build/esm/{index-BzBUevHu.js → index-B2xnhTBt.js} +2 -2
- package/build/esm/{index-BzBUevHu.js.map → index-B2xnhTBt.js.map} +1 -1
- package/build/esm/{index-DH4SSAb2.js → index-OhAIuDEO.js} +132 -236
- package/build/esm/index-OhAIuDEO.js.map +1 -0
- package/build/esm/index.js +1 -1
- package/package.json +1 -1
- package/build/cjs/index-BF-1v7O1.js.map +0 -1
- package/build/esm/index-DH4SSAb2.js.map +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { useRef, useState, useEffect, useCallback, useMemo, Suspense, useContext, useLayoutEffect } from 'react';
|
|
3
3
|
import { withNaming } from '@bem-react/classname';
|
|
4
|
-
import { Icon, Portal, Popup, List, useForkRef, setRef, Flex, Text,
|
|
5
|
-
import { Ellipsis,
|
|
4
|
+
import { Icon, Portal, Button, Popup, List, useForkRef, setRef, Flex, Text, Tooltip, HelpMark, Hotkey, TextInput, Loader, Sheet, eventBroker, Menu, DropdownMenu } from '@gravity-ui/uikit';
|
|
5
|
+
import { Ellipsis, Pin, PinFill, ChevronDown, ChevronRight, Gear, Xmark, ListUl, ArrowLeft } from '@gravity-ui/icons';
|
|
6
6
|
import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
|
|
7
7
|
import { jsx } from 'react/jsx-runtime';
|
|
8
8
|
import ReactDOM from 'react-dom';
|
|
@@ -182,7 +182,7 @@ const NAMESPACE = 'gn-';
|
|
|
182
182
|
withNaming({ e: '__', m: '_' });
|
|
183
183
|
const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });
|
|
184
184
|
|
|
185
|
-
const b$
|
|
185
|
+
const b$u = block('aside-header');
|
|
186
186
|
|
|
187
187
|
function styleInject(css, ref) {
|
|
188
188
|
if ( ref === undefined ) ref = {};
|
|
@@ -211,10 +211,10 @@ function styleInject(css, ref) {
|
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
213
|
|
|
214
|
-
var css_248z$
|
|
215
|
-
styleInject(css_248z$
|
|
214
|
+
var css_248z$t = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:36px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__aside_expanded-by-hover{left:0;position:fixed;top:0}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button{margin:0 10px 2px}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--_--item-icon-background-size)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__menu-item,.gn-aside-header__menu-items-group{margin-inline:10px}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:var(--g-spacing-2) 10px}.gn-aside-header__panels{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);display:flex;flex-direction:column;inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed}.gn-aside-header__panel{flex-grow:1;height:auto}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{--gn-drawer-z-index:var(--gn-aside-header-panel-z-index,98);background:var(--g-color-base-background);position:fixed;top:0;width:100%}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}.gn-aside-header__content_expanded-by-hover{padding-left:var(--gn-aside-header-min-width)}";
|
|
215
|
+
styleInject(css_248z$t);
|
|
216
216
|
|
|
217
|
-
const TopAlert$1 = React__default.lazy(() => import('./index-
|
|
217
|
+
const TopAlert$1 = React__default.lazy(() => import('./index-B2xnhTBt.js').then((module) => ({ default: module.TopAlert })));
|
|
218
218
|
const Layout = ({ compact, className, children, topAlert, onChangeCompact }) => {
|
|
219
219
|
const { isExpanded, onMouseEnter, onMouseLeave } = useIsExpanded(compact);
|
|
220
220
|
const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : ASIDE_HEADER_COMPACT_WIDTH;
|
|
@@ -227,15 +227,15 @@ const Layout = ({ compact, className, children, topAlert, onChangeCompact }) =>
|
|
|
227
227
|
onMouseLeave,
|
|
228
228
|
}), [size, compact, isExpanded, onChangeCompact, onMouseEnter, onMouseLeave]);
|
|
229
229
|
return (React__default.createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
|
|
230
|
-
React__default.createElement("div", { className: b$
|
|
230
|
+
React__default.createElement("div", { className: b$u({ compact: !isExpanded }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
|
|
231
231
|
topAlert && (React__default.createElement(Suspense, { fallback: null },
|
|
232
|
-
React__default.createElement(TopAlert$1, { className: b$
|
|
233
|
-
React__default.createElement("div", { className: b$
|
|
232
|
+
React__default.createElement(TopAlert$1, { className: b$u('top-alert'), alert: topAlert }))),
|
|
233
|
+
React__default.createElement("div", { className: b$u('pane-container') }, children))));
|
|
234
234
|
};
|
|
235
235
|
const ConnectedContent = ({ children, renderContent, }) => {
|
|
236
236
|
const { size, compact, isExpanded } = useAsideHeaderContext();
|
|
237
237
|
const isExpandedByHover = compact && isExpanded;
|
|
238
|
-
return (React__default.createElement(Content, { size: size, className: b$
|
|
238
|
+
return (React__default.createElement(Content, { size: size, className: b$u('content', { 'expanded-by-hover': isExpandedByHover }), renderContent: renderContent }, children));
|
|
239
239
|
};
|
|
240
240
|
const PageLayout = Object.assign(Layout, {
|
|
241
241
|
Content: ConnectedContent,
|
|
@@ -379,10 +379,10 @@ var SvgControlMenuButton = function SvgControlMenuButton(props) {
|
|
|
379
379
|
})));
|
|
380
380
|
};
|
|
381
381
|
|
|
382
|
-
var css_248z$
|
|
383
|
-
styleInject(css_248z$
|
|
382
|
+
var css_248z$s = ".gn-collapse-button{--_--focus-outline-color:var(--g-color-line-focus);--_--focus-outline-offset:0;align-items:center;background:none;border:none;border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));box-sizing:content-box;color:inherit;cursor:pointer;display:flex;font-family:var(--g-text-body-font-family);font-size:inherit;font-weight:var(--g-text-body-font-weight);justify-content:center;min-height:20px;outline:none;padding:0;position:relative;width:100%}.gn-collapse-button:before{content:\"\";inset:0 2px 2px;position:absolute;z-index:-1}.gn-collapse-button:focus-visible:before{outline:var(--_--focus-outline-color) solid 2px;outline-offset:var(--_--focus-outline-offset)}.gn-collapse-button:not(.gn-collapse-button_compact) .gn-collapse-button__icon{transform:rotate(180deg)}.gn-collapse-button:hover .gn-collapse-button__icon{color:var(--g-color-text-primary)}.gn-collapse-button__icon{color:var(--g-color-text-secondary)}";
|
|
383
|
+
styleInject(css_248z$s);
|
|
384
384
|
|
|
385
|
-
const b$
|
|
385
|
+
const b$t = block('collapse-button');
|
|
386
386
|
const CollapseButton = ({ className }) => {
|
|
387
387
|
const { compact, onChangeCompact } = useAsideHeaderContext();
|
|
388
388
|
const { expandTitle, collapseTitle, collapseButtonWrapper } = useAsideHeaderInnerContext();
|
|
@@ -393,8 +393,8 @@ const CollapseButton = ({ className }) => {
|
|
|
393
393
|
const buttonTitle = compact
|
|
394
394
|
? expandTitle || i18n$3('button_expand')
|
|
395
395
|
: collapseTitle || i18n$3('button_collapse');
|
|
396
|
-
const defaultButton = (React__default.createElement("button", { className: b$
|
|
397
|
-
React__default.createElement(Icon, { data: SvgControlMenuButton, className: b$
|
|
396
|
+
const defaultButton = (React__default.createElement("button", { className: b$t({ compact: compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
|
|
397
|
+
React__default.createElement(Icon, { data: SvgControlMenuButton, className: b$t('icon'), width: "16", height: "10" })));
|
|
398
398
|
if (collapseButtonWrapper) {
|
|
399
399
|
return collapseButtonWrapper(defaultButton, {
|
|
400
400
|
compact,
|
|
@@ -1064,10 +1064,10 @@ function requireDebounce () {
|
|
|
1064
1064
|
var debounceExports = requireDebounce();
|
|
1065
1065
|
var debounceFn = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
|
|
1066
1066
|
|
|
1067
|
-
var css_248z$
|
|
1068
|
-
styleInject(css_248z$
|
|
1067
|
+
var css_248z$r = ".gn-composite-bar-highlighted-item{--_--background-color:var(--g-color-base-background);--_--item-icon-background-size:38px;--_--item-background-color-hover:var(--g-color-base-selection-hover);--_--item-selected-background-color-active:var(--g-color-base-selection);display:flex;justify-content:center;position:absolute;z-index:10000}.gn-composite-bar-highlighted-item__icon{align-items:center;background-color:var(--gn-aside-header-background-color,var(--_--background-color));border-radius:7px;box-shadow:0 8px 20px 0 var(--g-color-sfx-shadow);cursor:pointer;display:flex;height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));justify-content:center;overflow:hidden;position:relative;transform:translateY(1px);width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.gn-composite-bar-highlighted-item__icon:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color-active));content:\"\";height:100%;position:absolute;width:100%;z-index:-1}.gn-composite-bar-highlighted-item__icon:hover:before{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover))}";
|
|
1068
|
+
styleInject(css_248z$r);
|
|
1069
1069
|
|
|
1070
|
-
const b$
|
|
1070
|
+
const b$s = block('composite-bar-highlighted-item');
|
|
1071
1071
|
const DEBOUNCE_TIME = 200;
|
|
1072
1072
|
const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
1073
1073
|
const { openModalSubscriber } = useAsideHeaderInnerContext();
|
|
@@ -1106,31 +1106,31 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
|
1106
1106
|
return null;
|
|
1107
1107
|
}
|
|
1108
1108
|
return (React__default.createElement(Portal, null,
|
|
1109
|
-
React__default.createElement("div", { className: b$
|
|
1110
|
-
React__default.createElement("div", { className: b$
|
|
1109
|
+
React__default.createElement("div", { className: b$s(), style: position, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
|
|
1110
|
+
React__default.createElement("div", { className: b$s('icon') }, iconNode))));
|
|
1111
1111
|
};
|
|
1112
1112
|
HighlightedItem.displayName = 'HighlightedItem';
|
|
1113
1113
|
|
|
1114
1114
|
const ITEM_TYPE_REGULAR = 'regular';
|
|
1115
1115
|
const COLLAPSE_ITEM_ID = 'collapse-item-id';
|
|
1116
1116
|
|
|
1117
|
-
var css_248z$
|
|
1118
|
-
styleInject(css_248z$
|
|
1117
|
+
var css_248z$q = ".gn-composite-bar-item{--gn-composite-bar-item-action-size:36px;--_--item-icon-background-size:36px;--_--horizontal-divider-line-color:var(--g-color-line-generic);--_--item-background-color-hover:var(--g-color-base-simple-hover);--_--item-general-icon-color:var(--g-color-text-primary);--_--item-icon-color:var(--g-color-text-complementary);--_--item-text-color:var(--g-color-text-primary);--_--item-collapsed-radius:7px;--_--item-selected-text-color:var(--g-color-text-primary);--_--item-selected-background-color:var(--g-color-base-selection);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;min-width:0;outline:inherit;padding:0;text-decoration:inherit;width:100%}.gn-composite-bar-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-item__icon{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color))}.gn-composite-bar-item_current .gn-composite-bar-item__icon{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-item-icon-color,var(--_--item-icon-color)))}.gn-composite-bar-highlighted-item .gn-composite-bar-item__icon,.gn-composite-bar_subheader .gn-composite-bar-item__icon,.gn-footer-item .gn-composite-bar-item__icon{color:var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color))}.gn-composite-bar-highlighted-item.gn-composite-bar-item_current .gn-composite-bar-item__icon,.gn-composite-bar_subheader .gn-composite-bar-item_current .gn-composite-bar-item__icon,.gn-footer-item.gn-composite-bar-item_current .gn-composite-bar-item__icon{color:var(--gn-aside-header-item-current-icon-color,var(--gn-aside-header-general-item-icon-color,var(--_--item-general-icon-color)))}.gn-composite-bar-item__icon-tooltip .g-action-tooltip__description{color:var(--g-color-text-light-primary);margin-block-start:0}.gn-composite-bar-item__icon-place{align-items:center;display:flex;flex-shrink:0;height:100%;justify-content:center;width:var(--_--item-icon-background-size,36px)}.gn-composite-bar-item__title{align-items:center;display:flex;justify-content:space-between;margin:0 var(--g-spacing-4) 0 var(--g-spacing-2);overflow:hidden}.gn-composite-bar-item__visibility-button{margin-left:auto}.gn-composite-bar-item__title-text{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--gn-aside-header-item-text-color,var(--_--item-text-color));display:-webkit-box;overflow:hidden;text-align:start}.gn-composite-bar-item_current .gn-composite-bar-item__title-text{color:var(--gn-aside-header-item-current-text-color,var(--_--item-selected-text-color))}.gn-composite-bar-item__title-adornment{margin:0 10px}.gn-composite-bar-item__collapse-item{--_--item-icon-color:var(--g-color-text-misc);align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;height:100%;outline:inherit;padding:0 16px;text-decoration:inherit;width:100%}.gn-composite-bar-item__collapse-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-composite-bar-item__collapse-item-icon{color:var(--gn-aside-header-item-icon-color,var(--_--item-icon-color));margin-right:10px}.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment{margin-right:0}.gn-composite-bar-item__menu-divider{border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));cursor:default;margin:0 10px;width:100%}.gn-composite-bar-item__collapse-items-popup-content{padding:4px 0}.gn-composite-bar-item__link{align-items:center;display:flex;height:100%;width:100%}.gn-composite-bar-item__link,.gn-composite-bar-item__link:active,.gn-composite-bar-item__link:focus,.gn-composite-bar-item__link:hover,.gn-composite-bar-item__link:visited{color:inherit;outline:none;text-decoration:none}.gn-composite-bar-item__btn-icon{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.gn-composite-bar-item_type_action{background:var(--g-color-base-float);border-radius:var(--gn-composite-bar-item-action-size);box-shadow:0 0 0 1px rgba(0,0,0,.03),0 5px 6px rgba(0,0,0,.12);height:var(--gn-composite-bar-item-action-size);justify-content:center;margin-bottom:var(--g-spacing-2);transition:transform .1s ease-out,background-color .15s linear}.gn-composite-bar-item_type_action:focus-visible{box-shadow:0 0 0 2px var(--g-color-line-misc)}.gn-composite-bar-item_type_action:hover{background-color:var(--g-color-base-float-hover)}.gn-composite-bar-item_type_action:active{box-shadow:0 1px 2px var(--g-color-sfx-shadow);transform:scale(.96);transition:none}.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place{width:var(--gn-composite-bar-item-action-size)}.gn-composite-bar-item_type_action.gn-footer-item{width:calc(100% - 20px)}.gn-composite-bar-item__icon-tooltip_item-type_action{margin-left:10px}.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item:not(.gn-composite-bar-item_compact):hover.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar-item_compact.gn-composite-bar-item_type_action{width:var(--gn-composite-bar-item-action-size)}.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title{margin:0}.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-18px;margin-top:-18px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.gn-composite-bar-item_compact:hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.gn-composite-bar-item_compact:hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon:before{background-color:var(--gn-aside-header-item-current-background-color-hover,var(--gn-aside-header-item-current-background-color,var(--_--item-selected-background-color)));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-18px;margin-top:-18px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon{background-color:transparent;position:relative}.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{background-color:var(--gn-aside-header-item-background-color-hover,var(--_--item-background-color-hover));border-radius:var(--gn-aside-header-item-collapsed-radius,var(--_--item-collapsed-radius));content:\"\";height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));left:50%;margin-left:-18px;margin-top:-18px;position:absolute;top:50%;width:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));z-index:-1}";
|
|
1118
|
+
styleInject(css_248z$q);
|
|
1119
1119
|
|
|
1120
|
-
const b$
|
|
1120
|
+
const b$r = block('composite-bar-item');
|
|
1121
1121
|
function renderItemTitle(params) {
|
|
1122
|
-
let titleNode = React__default.createElement("div", { className: b$
|
|
1122
|
+
let titleNode = React__default.createElement("div", { className: b$r('title-text') }, params.title);
|
|
1123
1123
|
if (params.rightAdornment) {
|
|
1124
1124
|
titleNode = (React__default.createElement(React__default.Fragment, null,
|
|
1125
1125
|
titleNode,
|
|
1126
|
-
React__default.createElement("div", { className: b$
|
|
1126
|
+
React__default.createElement("div", { className: b$r('title-adornment') }, params.rightAdornment)));
|
|
1127
1127
|
}
|
|
1128
1128
|
return titleNode;
|
|
1129
1129
|
}
|
|
1130
1130
|
const defaultPopupPlacement = ['right-end'];
|
|
1131
1131
|
const defaultPopupOffset = { mainAxis: 8, crossAxis: -20 };
|
|
1132
1132
|
const Item$1 = (props) => {
|
|
1133
|
-
const { className, onMouseLeave, onMouseEnter, popupVisible = false, popupRef: anchoreRefProp, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onOpenChangePopup, onItemClick, onItemClickCapture, itemWrapper, bringForward, rightAdornment, title, href, qa, compact, } = props;
|
|
1133
|
+
const { className, onMouseLeave, onMouseEnter, popupVisible = false, popupRef: anchoreRefProp, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onOpenChangePopup, onItemClick, onItemClickCapture, itemWrapper, bringForward, rightAdornment, title, href, qa, compact, editMode = false, onToggleVisibility, hidden, preventUserRemoving, } = props;
|
|
1134
1134
|
const ref = React__default.useRef(null);
|
|
1135
1135
|
const anchorRef = (anchoreRefProp === null || anchoreRefProp === undefined ? undefined : anchoreRefProp.current) ? anchoreRefProp : ref;
|
|
1136
1136
|
const highlightedRef = React__default.useRef(null);
|
|
@@ -1139,6 +1139,11 @@ const Item$1 = (props) => {
|
|
|
1139
1139
|
const icon = props.icon;
|
|
1140
1140
|
const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;
|
|
1141
1141
|
const iconQa = props.iconQa;
|
|
1142
|
+
const onPinButtonClick = React__default.useCallback((e) => {
|
|
1143
|
+
e.stopPropagation();
|
|
1144
|
+
e.preventDefault();
|
|
1145
|
+
onToggleVisibility === null || onToggleVisibility === undefined ? undefined : onToggleVisibility();
|
|
1146
|
+
}, [onToggleVisibility]);
|
|
1142
1147
|
const handleOpenChangePopup = React__default.useCallback((newOpen, event, reason) => {
|
|
1143
1148
|
var _a;
|
|
1144
1149
|
if (event instanceof MouseEvent &&
|
|
@@ -1149,15 +1154,15 @@ const Item$1 = (props) => {
|
|
|
1149
1154
|
onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(newOpen, event, reason);
|
|
1150
1155
|
}, [onOpenChangePopup]);
|
|
1151
1156
|
if (type === 'divider') {
|
|
1152
|
-
return React__default.createElement("div", { className: b$
|
|
1157
|
+
return React__default.createElement("div", { className: b$r('menu-divider') });
|
|
1153
1158
|
}
|
|
1154
1159
|
const makeIconNode = (iconEl) => {
|
|
1155
|
-
return compact ? React__default.createElement("div", { className: b$
|
|
1160
|
+
return compact ? React__default.createElement("div", { className: b$r('btn-icon') }, iconEl) : iconEl;
|
|
1156
1161
|
};
|
|
1157
1162
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
1158
1163
|
const [Tag, tagProps] = href ? ['a', { href }] : ['button', {}];
|
|
1159
1164
|
const createdNode = (React__default.createElement(React__default.Fragment, null,
|
|
1160
|
-
React__default.createElement(Tag, Object.assign({}, tagProps, { className: b$
|
|
1165
|
+
React__default.createElement(Tag, Object.assign({}, tagProps, { className: b$r({ type, current, compact }, className), ref: ref, "data-qa": qa, onClick: (event) => {
|
|
1161
1166
|
onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, false, event);
|
|
1162
1167
|
}, onClickCapture: onItemClickCapture, onMouseEnter: () => {
|
|
1163
1168
|
if (!compact) {
|
|
@@ -1168,12 +1173,14 @@ const Item$1 = (props) => {
|
|
|
1168
1173
|
onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
|
|
1169
1174
|
}
|
|
1170
1175
|
} }),
|
|
1171
|
-
React__default.createElement("div", { className: b$
|
|
1172
|
-
React__default.createElement("div", { className: b$
|
|
1176
|
+
React__default.createElement("div", { className: b$r('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
|
|
1177
|
+
React__default.createElement("div", { className: b$r('title'), title: typeof title === 'string' ? title : undefined }, titleEl),
|
|
1178
|
+
editMode && !preventUserRemoving && onToggleVisibility ? (React__default.createElement(Button, { onClick: onPinButtonClick, view: hidden ? 'flat-secondary' : 'flat-action', className: b$r('visibility-button') },
|
|
1179
|
+
React__default.createElement(Button.Icon, null, hidden ? React__default.createElement(Pin, null) : React__default.createElement(PinFill, null)))) : null),
|
|
1173
1180
|
renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React__default.createElement(Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorElement: anchorRef.current, onOpenChange: handleOpenChangePopup }, renderPopupContent()))));
|
|
1174
1181
|
return createdNode;
|
|
1175
1182
|
};
|
|
1176
|
-
const iconNode = icon ? (React__default.createElement(Icon, { qa: iconQa, data: icon, size: iconSize, className: b$
|
|
1183
|
+
const iconNode = icon ? (React__default.createElement(Icon, { qa: iconQa, data: icon, size: iconSize, className: b$r('icon') })) : null;
|
|
1177
1184
|
const titleNode = renderItemTitle({ title, rightAdornment });
|
|
1178
1185
|
const params = { icon: iconNode, title: titleNode };
|
|
1179
1186
|
let highlightedNode = null;
|
|
@@ -1217,25 +1224,25 @@ class MultipleTooltipProvider extends React__default.PureComponent {
|
|
|
1217
1224
|
}
|
|
1218
1225
|
}
|
|
1219
1226
|
|
|
1220
|
-
var css_248z$
|
|
1221
|
-
styleInject(css_248z$
|
|
1227
|
+
var css_248z$p = ".g-root_theme_dark .gn-multiple-tooltip,.g-root_theme_dark-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n --g-color-base-float-medium,var(--g-color-private-white-100-solid)\n );--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,var(--g-color-base-background) 50%,transparent);--multiple-tooltip-backdrop-filter:blur(16px)}.g-root_theme_dark-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n --g-color-base-float-medium,var(--g-color-private-white-150-solid)\n )}.g-root_theme_light .gn-multiple-tooltip,.g-root_theme_light-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n --g-color-base-float-medium,var(--g-color-private-black-550-solid)\n );--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,var(--g-color-base-background) 50%,transparent);--multiple-tooltip-backdrop-filter:blur(12px)}.gn-multiple-tooltip:before{background:var(--multiple-tooltip-backdrop-background);box-shadow:none;content:\"\";filter:var(--multiple-tooltip-backdrop-filter);height:100%;opacity:.7;position:absolute;width:100%;z-index:-1}.g-popup.gn-multiple-tooltip__popup,.gn-multiple-tooltip__popup{--g-popup-background-color:transparent;--g-popup-border-color:transparent;--g-popup-border-width:0;background-color:transparent;box-shadow:none}.gn-multiple-tooltip__items-container{align-items:flex-start;display:flex;flex-direction:column;padding:32px 40px 32px 12px}.gn-multiple-tooltip__item{align-items:center;background-color:var(--multiple-tooltip-item-bg-color);border-radius:5px;box-sizing:border-box;color:var(--g-color-text-light-primary);display:flex;height:30px;margin-bottom:5px;padding:8px 12px;position:relative;transition:transform .1s ease-in-out}.gn-multiple-tooltip__item:first-child,.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider)+.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider){margin-top:5px}.gn-multiple-tooltip__item_divider+.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider){margin-top:4px}.gn-multiple-tooltip__item_active{background-color:var(--multiple-tooltip-item-active-bg-color);transform:translateX(-12px)}.gn-multiple-tooltip__item_divider{height:15px;margin:0;visibility:hidden}";
|
|
1228
|
+
styleInject(css_248z$p);
|
|
1222
1229
|
|
|
1223
|
-
const b$
|
|
1230
|
+
const b$q = block('multiple-tooltip');
|
|
1224
1231
|
const POPUP_OFFSET = { mainAxis: 4, crossAxis: -32 };
|
|
1225
1232
|
const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
|
|
1226
1233
|
const { activeIndex, hideCollapseItemTooltip } = React__default.useContext(MultipleTooltipContext);
|
|
1227
1234
|
const activeItem = activeIndex === undefined ? null : items[activeIndex];
|
|
1228
|
-
return (React__default.createElement(Popup, { open: open, className: b$
|
|
1229
|
-
React__default.createElement("div", { className: b$
|
|
1230
|
-
React__default.createElement("div", { className: b$
|
|
1235
|
+
return (React__default.createElement(Popup, { open: open, className: b$q('popup'), anchorElement: anchorRef.current, strategy: "fixed", placement: placement, offset: POPUP_OFFSET },
|
|
1236
|
+
React__default.createElement("div", { className: b$q() },
|
|
1237
|
+
React__default.createElement("div", { className: b$q('items-container') }, items
|
|
1231
1238
|
.filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
|
|
1232
1239
|
(id !== COLLAPSE_ITEM_ID && type !== 'action'))
|
|
1233
1240
|
.map((currentItem, idx) => {
|
|
1234
1241
|
switch (currentItem.type) {
|
|
1235
1242
|
case 'divider':
|
|
1236
|
-
return (React__default.createElement("div", { className: b$
|
|
1243
|
+
return (React__default.createElement("div", { className: b$q('item', { divider: true }), key: idx }, currentItem.title));
|
|
1237
1244
|
default:
|
|
1238
|
-
return (React__default.createElement("div", { className: b$
|
|
1245
|
+
return (React__default.createElement("div", { className: b$q('item', {
|
|
1239
1246
|
active: currentItem === activeItem,
|
|
1240
1247
|
}), key: idx }, currentItem.title));
|
|
1241
1248
|
}
|
|
@@ -1253,9 +1260,7 @@ function getGroupBlockHeight(items) {
|
|
|
1253
1260
|
}
|
|
1254
1261
|
|
|
1255
1262
|
function getGroupHeight(compositeItem) {
|
|
1256
|
-
|
|
1257
|
-
const visibleItemsCount = ((_a = compositeItem.items) === null || _a === undefined ? undefined : _a.filter(({ hidden }) => !hidden)) || [];
|
|
1258
|
-
const visibleGroupItems = compositeItem.isCollapsed ? [] : visibleItemsCount;
|
|
1263
|
+
const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;
|
|
1259
1264
|
return getGroupBlockHeight(visibleGroupItems);
|
|
1260
1265
|
}
|
|
1261
1266
|
function getItemHeight$1(compositeItem) {
|
|
@@ -1280,17 +1285,15 @@ function getSelectedItemIndex$1(compositeItems) {
|
|
|
1280
1285
|
return index === -1 ? undefined : index;
|
|
1281
1286
|
}
|
|
1282
1287
|
|
|
1283
|
-
var css_248z$
|
|
1284
|
-
styleInject(css_248z$
|
|
1288
|
+
var css_248z$o = ".gn-composite-bar{--gn-aside-header-item-expanded-radius:6px;display:flex;flex:1 1 auto;flex-direction:column;min-height:40px;width:100%}.gn-composite-bar .gn-composite-bar__root-menu-item[class]{background-color:transparent}.gn-composite-bar__menu-group-header,.gn-composite-bar__menu-group-item,.gn-composite-bar__root-menu-item[class]{margin-bottom:2px}.gn-composite-bar__menu-group-header:last-child,.gn-composite-bar__menu-group-item:last-child,.gn-composite-bar__root-menu-item[class]:last-child{margin-bottom:0}.gn-composite-bar_scrollable{-ms-overflow-style:none;flex:1 1 auto;overflow-y:auto;scrollbar-width:none}.gn-composite-bar_scrollable::-webkit-scrollbar{display:none}.gn-composite-bar__root-menu-item:has(.gn-composite-bar__menu-group){align-items:flex-start}.gn-composite-bar__root-menu-item:has(.gn-composite-bar__menu-group)>.g-list__item-sort-icon{position:relative;top:12px}.gn-composite-bar__root-menu-item:has(.gn-composite-bar__menu-group):not(.gn-composite-bar__root-menu-item_compact) .g-list__item-content{overflow:visible}.gn-composite-bar__menu-group{height:100%;position:relative;width:100%}.gn-composite-bar__menu-group:before{border-left:2px solid var(--g-color-line-generic);border-radius:0;content:\"\";height:100%;left:0;position:absolute;top:0;transition:border-radius .15s ease-out;width:100%;z-index:-1}.gn-composite-bar__menu-group:hover:before,.gn-composite-bar__menu-group_expanded:before{border-radius:var(--gn-aside-header-item-expanded-radius)}.gn-composite-bar__menu-group-header,.gn-composite-bar__menu-group-item{height:36px}.gn-composite-bar__menu-group-item{position:relative}.gn-composite-bar__menu-group-item:not(.gn-composite-bar__menu-group-item_compact){width:calc(100% + 16px)}.gn-composite-bar__menu-group-item_edit{left:-16px}.gn-composite-bar__menu-group-toggle,.gn-composite-bar__menu-group-toggle-placeholder{align-items:center;cursor:pointer;display:inline-flex;height:24px;width:24px}.gn-composite-bar__menu-group-toggle{margin-left:auto}.gn-composite-bar__menu-group-icon{margin-right:var(--g-spacing-3)}";
|
|
1289
|
+
styleInject(css_248z$o);
|
|
1285
1290
|
|
|
1286
|
-
const b$
|
|
1287
|
-
const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleTooltip = false, compositeId, className,
|
|
1291
|
+
const b$p = block('composite-bar');
|
|
1292
|
+
const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleTooltip = false, compositeId, className, groupClassName, menuItemClassName, enableSorting = false, editMode = false, compact, onToggleGroupCollapsed, onToggleMenuGroupVisibility, onToggleMenuItemVisibility, onFirstLevelSortEnd, onSecondLevelSortEnd, }) => {
|
|
1288
1293
|
const ref = useRef(null);
|
|
1289
1294
|
const tooltipRef = useRef(null);
|
|
1290
1295
|
const [hoveredGroupId, setHoveredGroupId] = useState(null);
|
|
1291
1296
|
const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
|
|
1292
|
-
const { isExpanded } = useAsideHeaderInnerContext();
|
|
1293
|
-
const compact = !isExpanded;
|
|
1294
1297
|
React__default.useEffect(() => {
|
|
1295
1298
|
function handleBlurWindow() {
|
|
1296
1299
|
if (multipleTooltip && multipleTooltipActive) {
|
|
@@ -1400,65 +1403,26 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleToolt
|
|
|
1400
1403
|
onFirstLevelSortEnd({ oldIndex, newIndex });
|
|
1401
1404
|
}
|
|
1402
1405
|
}, [onFirstLevelSortEnd]);
|
|
1403
|
-
const handleSecondLevelSortEnd = useCallback((
|
|
1406
|
+
const handleSecondLevelSortEnd = useCallback((groupIndex) => ({ oldIndex, newIndex }) => {
|
|
1404
1407
|
if (onSecondLevelSortEnd) {
|
|
1405
|
-
onSecondLevelSortEnd(
|
|
1408
|
+
onSecondLevelSortEnd(groupIndex)({ oldIndex, newIndex });
|
|
1406
1409
|
}
|
|
1407
1410
|
}, [onSecondLevelSortEnd]);
|
|
1408
|
-
const renderNestedItem = useCallback((nestedItem, parentItemIndex, _nestedItemIndex, _parentGroupId) => {
|
|
1409
|
-
var _a;
|
|
1410
|
-
if ('items' in nestedItem && nestedItem.items && nestedItem.items.length > 0) {
|
|
1411
|
-
const isCollapsible = Boolean('collapsible' in nestedItem && nestedItem.collapsible);
|
|
1412
|
-
const isCollapsed = Boolean('isCollapsed' in nestedItem && nestedItem.isCollapsed);
|
|
1413
|
-
const nestedGroupListItems = ((_a = nestedItem.items) === null || _a === undefined ? undefined : _a.filter((item) => !item.hidden)) || [];
|
|
1414
|
-
const hasHeader = nestedItem.title || nestedItem.icon || isCollapsible;
|
|
1415
|
-
const isNestedGroupHovered = hoveredGroupId === nestedItem.id;
|
|
1416
|
-
let nestedGroupIcon = nestedItem.icon;
|
|
1417
|
-
if (!isCollapsed) {
|
|
1418
|
-
nestedGroupIcon = ChevronDown;
|
|
1419
|
-
}
|
|
1420
|
-
else if (isNestedGroupHovered) {
|
|
1421
|
-
nestedGroupIcon = ChevronRight;
|
|
1422
|
-
}
|
|
1423
|
-
return (React__default.createElement("div", { className: b$r('menu-group', { expanded: !isCollapsed, nested: true }) },
|
|
1424
|
-
hasHeader && (React__default.createElement(Item$1, Object.assign({}, nestedItem, { className: b$r('menu-group-header', { collapsed: isCollapsed }), icon: nestedGroupIcon, compact: compact, onMouseEnter: () => {
|
|
1425
|
-
setHoveredGroupId(nestedItem.id);
|
|
1426
|
-
}, onMouseLeave: () => {
|
|
1427
|
-
setHoveredGroupId(null);
|
|
1428
|
-
}, onItemClick: (item) => {
|
|
1429
|
-
onToggleGroupCollapsed === null || onToggleGroupCollapsed === undefined ? undefined : onToggleGroupCollapsed(item.id);
|
|
1430
|
-
} }))),
|
|
1431
|
-
!isCollapsed && (React__default.createElement(List, { items: nestedGroupListItems, sortable: enableSorting, onSortEnd: handleSecondLevelSortEnd(nestedItem.id), virtualized: false, filterable: false, itemClassName: b$r('menu-group-item'), itemsHeight: getItemsHeight, renderItem: (deepNestedItem, _isDeepItemActive, deepNestedIndex) => {
|
|
1432
|
-
return renderNestedItem(deepNestedItem, parentItemIndex, deepNestedIndex, nestedItem.id);
|
|
1433
|
-
} }))));
|
|
1434
|
-
}
|
|
1435
|
-
return (React__default.createElement(Item$1, Object.assign({ className: b$r('menu-group-item'), key: nestedItem.id }, nestedItem, { compact: compact, onMouseEnter: onMouseEnterByIndex(parentItemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(parentItemIndex, nestedItem.onItemClick) })));
|
|
1436
|
-
}, [
|
|
1437
|
-
compact,
|
|
1438
|
-
enableSorting,
|
|
1439
|
-
handleSecondLevelSortEnd,
|
|
1440
|
-
hoveredGroupId,
|
|
1441
|
-
onItemClickByIndex,
|
|
1442
|
-
onMouseEnterByIndex,
|
|
1443
|
-
onMouseLeave,
|
|
1444
|
-
onToggleGroupCollapsed,
|
|
1445
|
-
setHoveredGroupId,
|
|
1446
|
-
]);
|
|
1447
1411
|
if (!items || items.length === 0) {
|
|
1448
1412
|
return null;
|
|
1449
1413
|
}
|
|
1450
1414
|
return (React__default.createElement(React__default.Fragment, null,
|
|
1451
1415
|
React__default.createElement("div", { className: className, ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
1452
|
-
React__default.createElement(List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$
|
|
1453
|
-
|
|
1454
|
-
if (!
|
|
1455
|
-
return (React__default.createElement(Item$1, Object.assign({}, item, { className: b$
|
|
1416
|
+
React__default.createElement(List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$p('root-menu-item', { compact }), virtualized: false, filterable: false, sortable: enableSorting, onSortEnd: enableSorting ? handleFirstLevelSortEnd : undefined, renderItem: (item, _isItemActive, itemIndex) => {
|
|
1417
|
+
const groupId = item.groupId;
|
|
1418
|
+
if (!groupId) {
|
|
1419
|
+
return (React__default.createElement(Item$1, Object.assign({}, item, { className: b$p('menu-item', { compact }, menuItemClassName), compact: compact, editMode: editMode, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), onToggleVisibility: onToggleMenuItemVisibility
|
|
1420
|
+
? () => onToggleMenuItemVisibility(item)
|
|
1421
|
+
: undefined })));
|
|
1456
1422
|
}
|
|
1457
1423
|
const isCollapsible = Boolean('collapsible' in item && item.collapsible);
|
|
1458
1424
|
const isCollapsed = Boolean('isCollapsed' in item && item.isCollapsed);
|
|
1459
|
-
const groupListItems = ('items' in item &&
|
|
1460
|
-
((_a = item.items) === null || _a === undefined ? undefined : _a.filter((groupItem) => !groupItem.hidden))) ||
|
|
1461
|
-
[];
|
|
1425
|
+
const groupListItems = ('items' in item && item.items) || [];
|
|
1462
1426
|
const hasHeader = item.title || item.icon || isCollapsible;
|
|
1463
1427
|
const isUngrouped = item.id === UNGROUPED_ID;
|
|
1464
1428
|
const isGroupHovered = hoveredGroupId === item.id;
|
|
@@ -1469,41 +1433,58 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleToolt
|
|
|
1469
1433
|
else if (isGroupHovered) {
|
|
1470
1434
|
groupIcon = ChevronRight;
|
|
1471
1435
|
}
|
|
1472
|
-
return (React__default.createElement("div", { className: b$
|
|
1473
|
-
hasHeader && !isUngrouped && (React__default.createElement(Item$1, Object.assign({}, item, { className: b$
|
|
1436
|
+
return (React__default.createElement("div", { className: b$p('menu-group', { expanded: !isCollapsed }, groupClassName) },
|
|
1437
|
+
hasHeader && !isUngrouped && (React__default.createElement(Item$1, Object.assign({}, item, { className: b$p('menu-group-header', { collapsed: isCollapsed }), icon: groupIcon, compact: compact, editMode: editMode, onMouseEnter: () => {
|
|
1474
1438
|
setHoveredGroupId(item.id);
|
|
1475
1439
|
}, onMouseLeave: () => {
|
|
1476
1440
|
setHoveredGroupId(null);
|
|
1477
|
-
}, onItemClick: (
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1441
|
+
}, onItemClick: onItemClickByIndex(itemIndex, onToggleGroupCollapsed
|
|
1442
|
+
? () => onToggleGroupCollapsed(groupId)
|
|
1443
|
+
: undefined), onToggleVisibility: onToggleMenuGroupVisibility
|
|
1444
|
+
? () => onToggleMenuGroupVisibility(groupId)
|
|
1445
|
+
: undefined }))),
|
|
1446
|
+
!isCollapsed && (React__default.createElement(List, { items: groupListItems, sortable: enableSorting, onSortEnd: handleSecondLevelSortEnd(itemIndex), virtualized: false, filterable: false, itemClassName: b$p('menu-group-item', {
|
|
1447
|
+
edit: enableSorting,
|
|
1448
|
+
compact,
|
|
1449
|
+
}), itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, renderItem: (nestedItem, _isNestedItemActive, _nestedItemIndex) => {
|
|
1450
|
+
return (React__default.createElement(Item$1, Object.assign({}, nestedItem, { className: b$p('menu-group-header', {
|
|
1451
|
+
collapsed: isCollapsed,
|
|
1452
|
+
}), compact: compact, editMode: editMode, onMouseEnter: () => {
|
|
1453
|
+
setHoveredGroupId(nestedItem.id);
|
|
1454
|
+
}, onMouseLeave: () => {
|
|
1455
|
+
setHoveredGroupId(null);
|
|
1456
|
+
}, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), onToggleVisibility: onToggleMenuItemVisibility
|
|
1457
|
+
? () => onToggleMenuItemVisibility(nestedItem)
|
|
1458
|
+
: undefined })));
|
|
1482
1459
|
} }))));
|
|
1483
1460
|
} })),
|
|
1484
1461
|
type === 'menu' && multipleTooltip && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
1485
1462
|
};
|
|
1486
|
-
const CompositeBar = ({ type, items, onItemClick, onMoreClick, onToggleGroupCollapsed, multipleTooltip = false, compact, compositeId, className, }) => {
|
|
1487
|
-
|
|
1463
|
+
const CompositeBar = ({ type, items, onItemClick, onMoreClick, onToggleGroupCollapsed, multipleTooltip = false, compact, compositeId, className, groupClassName, menuItemClassName, editMode = false, }) => {
|
|
1464
|
+
var _a;
|
|
1465
|
+
const visibleItems = (_a = items === null || items === undefined ? undefined : items.filter((item) => !item.hidden)) === null || _a === undefined ? undefined : _a.map((item) => {
|
|
1466
|
+
var _a;
|
|
1467
|
+
return (Object.assign(Object.assign({}, item), { items: 'items' in item ? (_a = item.items) === null || _a === undefined ? undefined : _a.filter((item) => !item.hidden) : [] }));
|
|
1468
|
+
});
|
|
1488
1469
|
if (!visibleItems || visibleItems.length === 0) {
|
|
1489
1470
|
return null;
|
|
1490
1471
|
}
|
|
1491
1472
|
let node;
|
|
1492
1473
|
if (type === 'menu') {
|
|
1493
|
-
node = (React__default.createElement("div", { className: b$
|
|
1494
|
-
React__default.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: visibleItems, onItemClick: onItemClick, onMoreClick: onMoreClick, multipleTooltip: multipleTooltip, onToggleGroupCollapsed: onToggleGroupCollapsed })));
|
|
1474
|
+
node = (React__default.createElement("div", { className: b$p({ scrollable: true }, className) },
|
|
1475
|
+
React__default.createElement(CompositeBarView, { compositeId: compositeId, groupClassName: groupClassName, menuItemClassName: menuItemClassName, type: "menu", compact: compact, items: visibleItems, onItemClick: onItemClick, onMoreClick: onMoreClick, multipleTooltip: multipleTooltip, onToggleGroupCollapsed: onToggleGroupCollapsed, editMode: editMode })));
|
|
1495
1476
|
}
|
|
1496
1477
|
else {
|
|
1497
|
-
node = (React__default.createElement("div", { className: b$
|
|
1498
|
-
React__default.createElement(CompositeBarView, { type: "subheader", compact: compact, items: visibleItems, onItemClick: onItemClick })));
|
|
1478
|
+
node = (React__default.createElement("div", { className: b$p({ subheader: true }, className) },
|
|
1479
|
+
React__default.createElement(CompositeBarView, { groupClassName: groupClassName, menuItemClassName: menuItemClassName, type: "subheader", compact: compact, items: visibleItems, onItemClick: onItemClick, editMode: editMode })));
|
|
1499
1480
|
}
|
|
1500
1481
|
return React__default.createElement(MultipleTooltipProvider, null, node);
|
|
1501
1482
|
};
|
|
1502
1483
|
|
|
1503
|
-
var css_248z$
|
|
1504
|
-
styleInject(css_248z$
|
|
1484
|
+
var css_248z$n = ".gn-logo{height:40px}.gn-logo,.gn-logo__btn-logo{align-items:center;display:flex}.gn-logo__btn-logo{cursor:pointer;flex-shrink:0;justify-content:flex-start;overflow-wrap:break-word;width:100%;word-break:break-word}.gn-logo__btn-logo,.gn-logo__btn-logo:active,.gn-logo__btn-logo:focus,.gn-logo__btn-logo:hover,.gn-logo__btn-logo:visited{color:inherit;outline:none;text-decoration:none}.gn-logo__btn-logo:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-logo__logo{margin:0 var(--g-spacing-4) 0 var(--g-spacing-2)}.gn-logo__logo-icon-place{align-items:center;display:flex;flex-shrink:0;justify-content:center;width:36px}";
|
|
1485
|
+
styleInject(css_248z$n);
|
|
1505
1486
|
|
|
1506
|
-
const b$
|
|
1487
|
+
const b$o = block('logo');
|
|
1507
1488
|
const Logo = ({ text, icon, iconSrc, iconClassName, iconPlaceClassName, iconSize = 24, textSize = 15, href, target = '_self', wrapper, onClick, compact, className, buttonClassName, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }) => {
|
|
1508
1489
|
const hasWrapper = typeof wrapper === 'function';
|
|
1509
1490
|
let buttonIcon;
|
|
@@ -1519,7 +1500,7 @@ const Logo = ({ text, icon, iconSrc, iconClassName, iconPlaceClassName, iconSize
|
|
|
1519
1500
|
logo = text();
|
|
1520
1501
|
}
|
|
1521
1502
|
else {
|
|
1522
|
-
logo = (React__default.createElement("div", { className: b$
|
|
1503
|
+
logo = (React__default.createElement("div", { className: b$o('logo'), style: { fontSize: textSize } }, text));
|
|
1523
1504
|
}
|
|
1524
1505
|
const _a = href
|
|
1525
1506
|
? {
|
|
@@ -1531,10 +1512,10 @@ const Logo = ({ text, icon, iconSrc, iconClassName, iconPlaceClassName, iconSize
|
|
|
1531
1512
|
'aria-labelledby': ariaLabelledby,
|
|
1532
1513
|
}
|
|
1533
1514
|
: { tag: 'span' }, { tag: Button } = _a, buttonProps = __rest(_a, ["tag"]);
|
|
1534
|
-
const button = (React__default.createElement(Button, Object.assign({}, buttonProps, { className: b$
|
|
1535
|
-
React__default.createElement("span", { className: b$
|
|
1515
|
+
const button = (React__default.createElement(Button, Object.assign({}, buttonProps, { className: b$o('btn-logo', buttonClassName), onClick: onClick }),
|
|
1516
|
+
React__default.createElement("span", { className: b$o('logo-icon-place', iconPlaceClassName) }, buttonIcon),
|
|
1536
1517
|
!compact && logo));
|
|
1537
|
-
return (React__default.createElement("div", { className: b$
|
|
1518
|
+
return (React__default.createElement("div", { className: b$o(null, className) }, hasWrapper ? wrapper(button, Boolean(compact)) : button));
|
|
1538
1519
|
};
|
|
1539
1520
|
|
|
1540
1521
|
var _path;
|
|
@@ -1562,10 +1543,10 @@ const Header = () => {
|
|
|
1562
1543
|
onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
|
|
1563
1544
|
(_a = logo === null || logo === undefined ? undefined : logo.onClick) === null || _a === undefined ? undefined : _a.call(logo, event);
|
|
1564
1545
|
}, [onClosePanel, logo]);
|
|
1565
|
-
return (React__default.createElement("div", { className: b$
|
|
1566
|
-
logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: !isExpanded, buttonClassName: b$
|
|
1567
|
-
React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, type: "subheader", compact: compact, items: items, onItemClick: onItemClick }),
|
|
1568
|
-
headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b$
|
|
1546
|
+
return (React__default.createElement("div", { className: b$u('header', { ['with-decoration']: headerDecoration }) },
|
|
1547
|
+
logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: !isExpanded, buttonClassName: b$u('logo-button'), iconPlaceClassName: b$u('logo-icon-place') }))),
|
|
1548
|
+
React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, menuItemClassName: b$u('menu-item'), type: "subheader", compact: compact, items: items, onItemClick: onItemClick }),
|
|
1549
|
+
headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b$u('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
|
|
1569
1550
|
};
|
|
1570
1551
|
|
|
1571
1552
|
// Avoid Chrome DevTools blue warning.
|
|
@@ -4088,10 +4069,10 @@ function useResizableDrawerItem(params) {
|
|
|
4088
4069
|
return { resizedWidth: displayWidth, resizerHandlers: handlers, isResizing };
|
|
4089
4070
|
}
|
|
4090
4071
|
|
|
4091
|
-
var css_248z$
|
|
4092
|
-
styleInject(css_248z$
|
|
4072
|
+
var css_248z$m = ".gn-drawer{--_--item-shadow-default:0 1px 5px 0 var(--g-color-sfx-shadow);--_--item-position:fixed;--_--resizer-width:8px;--_--resizer-color:var(--g-color-base-generic);--_--resizer-handle-color:var(--g-color-line-generic);--_--resizer-handle-color-hover:var(--g-color-line-generic-hover);--_--resizer-z-index:100;--_--veil-background-color:var(--g-color-sfx-veil);pointer-events:none;z-index:var(--gn-drawer-z-index)}.gn-drawer_hideVeil{--_--item-shadow:var(--gn-drawer-item-shadow,var(--_--item-shadow-default))}.gn-drawer__item{background-color:var(--g-color-base-background);bottom:0;box-shadow:var(--_--item-shadow,none);left:var(--gn-aside-header-size,0);pointer-events:auto;position:var(--gn-drawer-item-position,var(--_--item-position));top:var(--gn-top-alert-height,0);will-change:transform;z-index:var(--gn-drawer-item-z-index)}.gn-drawer__item_direction_right{left:auto;right:0}.gn-drawer__item_direction_top{bottom:auto;height:100%;right:0}.gn-drawer__item_direction_bottom{height:100%;right:0;top:auto}.gn-drawer__item-transition-enter{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-enter{transform:translate(100%)}.gn-drawer__item-transition_direction_top-enter{transform:translateY(-100%)}.gn-drawer__item-transition_direction_bottom-enter{transform:translateY(100%)}.gn-drawer__item-transition-enter-active,.gn-drawer__item-transition_direction_bottom-enter-active,.gn-drawer__item-transition_direction_right-enter-active,.gn-drawer__item-transition_direction_top-enter-active{transform:translate(0);transition:transform .3s}.gn-drawer__item-transition-enter-done,.gn-drawer__item-transition_direction_bottom-enter-done,.gn-drawer__item-transition_direction_right-enter-done,.gn-drawer__item-transition_direction_top-enter-done{filter:blur(0);transform:translateZ(0)}.gn-drawer__item-transition-exit,.gn-drawer__item-transition_direction_bottom-exit,.gn-drawer__item-transition_direction_right-exit,.gn-drawer__item-transition_direction_top-exit{transform:translate(0)}.gn-drawer__item-transition-exit-active,.gn-drawer__item-transition_direction_bottom-exit-active,.gn-drawer__item-transition_direction_right-exit-active,.gn-drawer__item-transition_direction_top-exit-active{transition:transform .3s}.gn-drawer__item-transition-exit-active{transform:translate(-100%)}.gn-drawer__item-transition_direction_right-exit-active{transform:translate(100%)}.gn-drawer__item-transition_direction_top-exit-active{transform:translateY(-100%)}.gn-drawer__item-transition_direction_bottom-exit-active{transform:translateY(100%)}.gn-drawer__item-transition-exit-done,.gn-drawer__item-transition_direction_bottom-exit-done,.gn-drawer__item-transition_direction_right-exit-done,.gn-drawer__item-transition_direction_top-exit-done,.gn-drawer__item_hidden{visibility:hidden}.gn-drawer__veil{background-color:var(--gn-drawer-veil-background-color,var(--_--veil-background-color));inset:0;pointer-events:auto;position:absolute;z-index:var(--gn-drawer-veil-z-index)}.gn-drawer__veil_hidden{display:none}.gn-drawer__veil-transition-enter{opacity:0}.gn-drawer__veil-transition-enter-active{opacity:1;transition:opacity .3s}.gn-drawer__veil-transition-exit{opacity:1}.gn-drawer__veil-transition-exit-active{opacity:0;transition:opacity .3s}.gn-drawer__veil-transition-exit-done{visibility:hidden}.gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color,var(--_--resizer-handle-color));border-radius:2px;height:28px;width:2px}.gn-drawer__resizer-handle_direction_bottom,.gn-drawer__resizer-handle_direction_top{height:2px;width:28px}.gn-drawer__resizer{align-items:center;background:var(--gn-drawer-item-resizer-color,var(--_--resizer-color));cursor:col-resize;display:flex;flex-direction:column;height:100%;justify-content:center;position:absolute;top:0;width:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));z-index:var(--gn-drawer-item-resizer-z-index,var(--_--resizer-z-index))}.gn-drawer__resizer_direction_right{left:0;top:var(--gn-top-alert-height,0)}.gn-drawer__resizer_direction_left{right:0;top:var(--gn-top-alert-height,0)}.gn-drawer__resizer_direction_top{bottom:0;left:0;top:unset}.gn-drawer__resizer_direction_bottom{left:0;top:0}.gn-drawer__resizer_direction_bottom,.gn-drawer__resizer_direction_top{cursor:row-resize;height:var(--gn-drawer-item-resizer-width,var(--_--resizer-width));width:100%}.gn-drawer__resizer:hover .gn-drawer__resizer-handle{background:var(--gn-drawer-item-resizer-handle-color-hover,var(--_--resizer-handle-color-hover))}";
|
|
4073
|
+
styleInject(css_248z$m);
|
|
4093
4074
|
|
|
4094
|
-
const b$
|
|
4075
|
+
const b$n = block('drawer');
|
|
4095
4076
|
const TIMEOUT = 300;
|
|
4096
4077
|
const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
|
|
4097
4078
|
const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResizeContinue, onResize, keepMounted = false, style = {}, } = props;
|
|
@@ -4123,10 +4104,10 @@ const DrawerItem = React__default.forwardRef(function DrawerItem(props, ref) {
|
|
|
4123
4104
|
React__default.useEffect(() => {
|
|
4124
4105
|
setInitialRender(true);
|
|
4125
4106
|
}, [direction]);
|
|
4126
|
-
const resizerElement = resizable ? (React__default.createElement("div", Object.assign({ className: b$
|
|
4127
|
-
React__default.createElement("div", { className: b$
|
|
4128
|
-
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, classNames: b$
|
|
4129
|
-
React__default.createElement("div", { ref: handleRef, className: b$
|
|
4107
|
+
const resizerElement = resizable ? (React__default.createElement("div", Object.assign({ className: b$n('resizer', { direction }) }, resizerHandlers),
|
|
4108
|
+
React__default.createElement("div", { className: b$n('resizer-handle', { direction }) }))) : null;
|
|
4109
|
+
return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, classNames: b$n('item-transition', { direction: cssDirection }), nodeRef: itemRef, onEnter: () => setInitialRender(false), onExit: () => setInitialRender(false) },
|
|
4110
|
+
React__default.createElement("div", { ref: handleRef, className: b$n('item', {
|
|
4130
4111
|
direction: cssDirection,
|
|
4131
4112
|
hidden: isInitialRender && !visible,
|
|
4132
4113
|
resize: isResizing,
|
|
@@ -4162,9 +4143,9 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
|
|
|
4162
4143
|
useScrollLock(shouldApplyScrollLock);
|
|
4163
4144
|
return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, nodeRef: containerRef }, (state) => {
|
|
4164
4145
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
4165
|
-
const content = (React__default.createElement("div", { ref: containerRef, className: b$
|
|
4166
|
-
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
4167
|
-
React__default.createElement("div", { ref: veilRef, className: b$
|
|
4146
|
+
const content = (React__default.createElement("div", { ref: containerRef, className: b$n({ hideVeil }, className), style: style },
|
|
4147
|
+
React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$n('veil-transition'), nodeRef: veilRef },
|
|
4148
|
+
React__default.createElement("div", { ref: veilRef, className: b$n('veil', { hidden: hideVeil }, veilClassName), onClick: onVeilClick })),
|
|
4168
4149
|
React__default.Children.map(children, (child) => {
|
|
4169
4150
|
if (React__default.isValidElement(child) &&
|
|
4170
4151
|
child.type === DrawerItem) {
|
|
@@ -4187,7 +4168,7 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
|
|
|
4187
4168
|
|
|
4188
4169
|
const Panels = () => {
|
|
4189
4170
|
const { panelItems, size, onClosePanel } = useAsideHeaderInnerContext();
|
|
4190
|
-
return panelItems ? (React__default.createElement(Drawer, { className: b$
|
|
4171
|
+
return panelItems ? (React__default.createElement(Drawer, { className: b$u('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id, className: b$u('panel') }, item)))))) : null;
|
|
4191
4172
|
};
|
|
4192
4173
|
|
|
4193
4174
|
const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
|
|
@@ -4200,15 +4181,15 @@ const FirstPanel = React__default.forwardRef((_props, ref) => {
|
|
|
4200
4181
|
}, [ref]);
|
|
4201
4182
|
const isExpandedByHover = compact && isExpanded;
|
|
4202
4183
|
return (React__default.createElement(React__default.Fragment, null,
|
|
4203
|
-
React__default.createElement("div", { className: b$
|
|
4204
|
-
React__default.createElement("div", { className: b$
|
|
4205
|
-
customBackground && (React__default.createElement("div", { className: b$
|
|
4206
|
-
React__default.createElement("div", { className: b$
|
|
4184
|
+
React__default.createElement("div", { className: b$u('aside', { 'expanded-by-hover': isExpandedByHover }, className), style: { width: size }, "data-qa": qa, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
|
|
4185
|
+
React__default.createElement("div", { className: b$u('aside-popup-anchor'), ref: asideRef }),
|
|
4186
|
+
customBackground && (React__default.createElement("div", { className: b$u('aside-custom-background', customBackgroundClassName) }, customBackground)),
|
|
4187
|
+
React__default.createElement("div", { className: b$u('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4207
4188
|
React__default.createElement(Header, null),
|
|
4208
|
-
(flatListItems === null || flatListItems === undefined ? undefined : flatListItems.length) ? (React__default.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, className: b$
|
|
4209
|
-
React__default.createElement("div", { className: b$
|
|
4189
|
+
(flatListItems === null || flatListItems === undefined ? undefined : flatListItems.length) ? (React__default.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, className: b$u('menu-items'), groupClassName: b$u('menu-items-group'), menuItemClassName: b$u('menu-item'), compact: !isExpanded, type: "menu", items: flatListItems, onItemClick: onItemClick, onMoreClick: onMenuMoreClick, onToggleGroupCollapsed: onToggleGroupCollapsed, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$u('menu-items') })),
|
|
4190
|
+
React__default.createElement("div", { className: b$u('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
|
|
4210
4191
|
size,
|
|
4211
|
-
compact: Boolean(
|
|
4192
|
+
compact: Boolean(!isExpanded),
|
|
4212
4193
|
asideRef,
|
|
4213
4194
|
})),
|
|
4214
4195
|
!hideCollapseButton && React__default.createElement(CollapseButton, null))),
|
|
@@ -4216,60 +4197,6 @@ const FirstPanel = React__default.forwardRef((_props, ref) => {
|
|
|
4216
4197
|
});
|
|
4217
4198
|
FirstPanel.displayName = 'FirstPanel';
|
|
4218
4199
|
|
|
4219
|
-
var css_248z$n = ".gn-all-pages-group-header{height:40px;padding:0 var(--g-spacing-6)}";
|
|
4220
|
-
styleInject(css_248z$n);
|
|
4221
|
-
|
|
4222
|
-
const b$o = block('all-pages-group-header');
|
|
4223
|
-
const AllPagesGroupHeader = ({ onToggleHidden, editMode, id, icon, title, hidden, isDisabled, }) => {
|
|
4224
|
-
const onHideButtonClick = useCallback((e) => {
|
|
4225
|
-
e.stopPropagation();
|
|
4226
|
-
e.preventDefault();
|
|
4227
|
-
onToggleHidden === null || onToggleHidden === undefined ? undefined : onToggleHidden(id);
|
|
4228
|
-
}, [id, onToggleHidden]);
|
|
4229
|
-
return (React__default.createElement(Flex, { className: b$o(), gap: "2", alignItems: "center", justifyContent: "space-between" },
|
|
4230
|
-
React__default.createElement(Flex, { gap: "2", alignItems: "center" },
|
|
4231
|
-
icon && React__default.createElement(Icon, { data: icon, size: 16 }),
|
|
4232
|
-
React__default.createElement(Text, { className: b$o('title'), variant: "body-1", color: "secondary" }, title)),
|
|
4233
|
-
editMode && id !== UNGROUPED_ID && (React__default.createElement(Button, { onClick: onHideButtonClick, disabled: isDisabled, view: hidden ? 'flat-secondary' : 'flat-action' },
|
|
4234
|
-
React__default.createElement(Button.Icon, null, hidden ? React__default.createElement(Pin, null) : React__default.createElement(PinFill, null))))));
|
|
4235
|
-
};
|
|
4236
|
-
|
|
4237
|
-
var css_248z$m = ".gn-all-pages-list-item{align-items:center;background:none;border:none;color:inherit;column-gap:var(--g-spacing-4);cursor:pointer;display:flex;font:inherit;height:40px;outline:inherit;padding:0 var(--g-spacing-6);text-decoration:inherit;width:100%}.gn-all-pages-list-item:focus-visible{outline:solid var(--g-color-line-misc);outline-offset:-2px}.gn-all-pages-list-item__text{flex:1;text-align:initial}.gn-all-pages-list-item__icon{color:var(--g-color-text-misc)}.gn-all-pages-list-item_edit-mode{padding:0 0 0 var(--g-spacing-4)}";
|
|
4238
|
-
styleInject(css_248z$m);
|
|
4239
|
-
|
|
4240
|
-
const b$n = block('all-pages-list-item');
|
|
4241
|
-
const AllPagesListItem = (props) => {
|
|
4242
|
-
const { item, editMode, onToggle } = props;
|
|
4243
|
-
const ref = useRef(null);
|
|
4244
|
-
const onPinButtonClick = useCallback((e) => {
|
|
4245
|
-
e.stopPropagation();
|
|
4246
|
-
e.preventDefault();
|
|
4247
|
-
onToggle();
|
|
4248
|
-
}, [onToggle]);
|
|
4249
|
-
const onItemClick = (e) => {
|
|
4250
|
-
if (editMode) {
|
|
4251
|
-
e.stopPropagation();
|
|
4252
|
-
e.preventDefault();
|
|
4253
|
-
}
|
|
4254
|
-
};
|
|
4255
|
-
const [Tag, tagProps] = item.href ? ['a', { href: item.href }] : ['button', {}];
|
|
4256
|
-
const makeNode = useCallback((params) => {
|
|
4257
|
-
return (React__default.createElement(Tag, Object.assign({}, tagProps, { className: b$n(), onClick: onItemClick, ref: ref }),
|
|
4258
|
-
params.icon,
|
|
4259
|
-
React__default.createElement("span", { className: b$n('text') }, params.title),
|
|
4260
|
-
editMode && !item.preventUserRemoving && (React__default.createElement(Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
|
|
4261
|
-
React__default.createElement(Button.Icon, null, item.hidden ? React__default.createElement(Pin, null) : React__default.createElement(PinFill, null))))));
|
|
4262
|
-
}, [Tag, tagProps, onItemClick, editMode, item, onPinButtonClick]);
|
|
4263
|
-
const iconNode = item.icon ? (React__default.createElement(Icon, { className: b$n('icon'), data: item.icon, size: item.iconSize })) : null;
|
|
4264
|
-
const titleNode = item.title;
|
|
4265
|
-
const params = { icon: iconNode, title: titleNode };
|
|
4266
|
-
const opts = { collapsed: false, compact: false, item, ref };
|
|
4267
|
-
if (typeof item.itemWrapper === 'function') {
|
|
4268
|
-
return item.itemWrapper(params, makeNode, opts);
|
|
4269
|
-
}
|
|
4270
|
-
return makeNode(params);
|
|
4271
|
-
};
|
|
4272
|
-
|
|
4273
4200
|
function buildExpandedFromFlatList(flatList) {
|
|
4274
4201
|
const expanded = [];
|
|
4275
4202
|
flatList.forEach((item) => {
|
|
@@ -4311,13 +4238,13 @@ function sortMenuItems(oldIndex, newIndex, items) {
|
|
|
4311
4238
|
return buildExpandedFromFlatList(sortedItems);
|
|
4312
4239
|
}
|
|
4313
4240
|
|
|
4314
|
-
var css_248z$l = ".gn-all-pages-panel{box-sizing:border-box;height:100%;min-width:300px;padding:var(--g-spacing-4) var(--g-spacing-6)}.gn-all-pages-panel__content{flex:1;
|
|
4241
|
+
var css_248z$l = ".gn-all-pages-panel{--gn-aside-header-item-expanded-radius:6px;box-sizing:border-box;height:100%;min-width:300px;padding:var(--g-spacing-4) var(--g-spacing-6)}.gn-all-pages-panel__content{flex:1;overflow:auto}.gn-all-pages-panel__category{padding:0 var(--g-spacing-6)}.gn-all-pages-panel__discoverable-feature-wrapper{display:flex}.gn-all-pages-panel__menu-group{margin-inline:10px;width:100%}.gn-all-pages-panel__menu-group:not(:last-child){border-bottom:1px solid var(--g-color-line-generic);padding-bottom:var(--g-spacing-2)}";
|
|
4315
4242
|
styleInject(css_248z$l);
|
|
4316
4243
|
|
|
4317
4244
|
const b$m = block('all-pages-panel');
|
|
4318
4245
|
const AllPagesPanel = (props) => {
|
|
4319
4246
|
const { startEditIcon, onEditModeChanged, className } = props;
|
|
4320
|
-
const { defaultMenuItems, editMenuProps, menuItems, menuGroups, defaultMenuGroups, onMenuItemsChanged, onMenuGroupsChanged, } = useAsideHeaderInnerContext();
|
|
4247
|
+
const { defaultMenuItems, editMenuProps, menuItems, menuGroups, defaultMenuGroups, onToggleGroupCollapsed, onMenuItemsChanged, onMenuGroupsChanged, } = useAsideHeaderInnerContext();
|
|
4321
4248
|
const items = useGroupedMenuItems(menuItems, menuGroups, true);
|
|
4322
4249
|
const menuItemsRef = useRef(items);
|
|
4323
4250
|
menuItemsRef.current = items;
|
|
@@ -4334,10 +4261,10 @@ const AllPagesPanel = (props) => {
|
|
|
4334
4261
|
(_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onOpenEditMode) === null || _a === undefined ? undefined : _a.call(editMenuProps);
|
|
4335
4262
|
}
|
|
4336
4263
|
}, [isEditMode, onEditModeChanged, editMenuProps]);
|
|
4337
|
-
const onItemClick = useCallback((item,
|
|
4264
|
+
const onItemClick = useCallback((item, collapsed, event) => {
|
|
4338
4265
|
var _a;
|
|
4339
4266
|
// TODO: make event an optional argument
|
|
4340
|
-
(_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item,
|
|
4267
|
+
(_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, collapsed, event);
|
|
4341
4268
|
}, []);
|
|
4342
4269
|
const onResetToDefaultClick = useCallback(() => {
|
|
4343
4270
|
var _a;
|
|
@@ -4359,7 +4286,7 @@ const AllPagesPanel = (props) => {
|
|
|
4359
4286
|
onMenuGroupsChanged,
|
|
4360
4287
|
defaultMenuGroups,
|
|
4361
4288
|
]);
|
|
4362
|
-
const
|
|
4289
|
+
const handleToggleGroupVisibility = useCallback((groupId) => {
|
|
4363
4290
|
if (!onMenuGroupsChanged) {
|
|
4364
4291
|
return;
|
|
4365
4292
|
}
|
|
@@ -4411,44 +4338,13 @@ const AllPagesPanel = (props) => {
|
|
|
4411
4338
|
onMenuItemsChanged === null || onMenuItemsChanged === undefined ? undefined : onMenuItemsChanged(updatedItems);
|
|
4412
4339
|
}
|
|
4413
4340
|
}, [onMenuItemsChanged]);
|
|
4414
|
-
const itemRender = useCallback((asideHeaderItem, _isActive, _itemIndex) => {
|
|
4415
|
-
return (React__default.createElement(AllPagesListItem, { item: asideHeaderItem, editMode: isEditMode, onToggle: () => toggleMenuItemsVisibility(asideHeaderItem), enableSorting: editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting }));
|
|
4416
|
-
}, [isEditMode, editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting, toggleMenuItemsVisibility]);
|
|
4417
|
-
const renderFirstLevelItem = useCallback((firstLevelItem, _isActive, itemIndex) => {
|
|
4418
|
-
if (!('items' in firstLevelItem) || firstLevelItem.items.length === 0) {
|
|
4419
|
-
return itemRender(firstLevelItem, _isActive, itemIndex);
|
|
4420
|
-
}
|
|
4421
|
-
const groupListItems = firstLevelItem.items;
|
|
4422
|
-
const sortableGroupItems = isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting)
|
|
4423
|
-
? groupListItems.filter(({ id }) => id !== ALL_PAGES_ID)
|
|
4424
|
-
: groupListItems;
|
|
4425
|
-
if (sortableGroupItems.length === 0) {
|
|
4426
|
-
return null;
|
|
4427
|
-
}
|
|
4428
|
-
const blockHeight = getGroupBlockHeight(sortableGroupItems);
|
|
4429
|
-
return (React__default.createElement(Flex, { className: b$m('groups-container'), direction: "column", style: { height: blockHeight } },
|
|
4430
|
-
firstLevelItem.title && (React__default.createElement(AllPagesGroupHeader, { id: firstLevelItem.id, icon: firstLevelItem.icon, title: firstLevelItem.title, hidden: Boolean(firstLevelItem.hidden), isDisabled: firstLevelItem.isDisabled, onToggleHidden: toggleGroupVisibility, editMode: isEditMode })),
|
|
4431
|
-
React__default.createElement(List, { itemClassName: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting)
|
|
4432
|
-
? b$m('item', { editMode: true })
|
|
4433
|
-
: undefined, itemHeight: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting) ? ITEM_HEIGHT : undefined, onSortEnd: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting)
|
|
4434
|
-
? onSecondLevelSortEnd(itemIndex)
|
|
4435
|
-
: undefined, sortable: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting), virtualized: false, filterable: false, items: sortableGroupItems, onItemClick: onItemClick, renderItem: itemRender })));
|
|
4436
|
-
}, [
|
|
4437
|
-
isEditMode,
|
|
4438
|
-
editMenuProps,
|
|
4439
|
-
toggleGroupVisibility,
|
|
4440
|
-
onSecondLevelSortEnd,
|
|
4441
|
-
onItemClick,
|
|
4442
|
-
itemRender,
|
|
4443
|
-
]);
|
|
4444
4341
|
const data = items.filter((item) => item.id !== ALL_PAGES_ID && item.type !== 'action');
|
|
4445
4342
|
return (React__default.createElement(Flex, { className: b$m(null, className), gap: "5", direction: "column" },
|
|
4446
4343
|
React__default.createElement(Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
|
|
4447
4344
|
React__default.createElement(Text, { variant: "subheader-2" }, isEditMode ? i18n$4('all-panel.title.editing') : i18n$4('all-panel.title.main')),
|
|
4448
4345
|
React__default.createElement(Tooltip, { content: i18n$4('all-panel.title.editing') },
|
|
4449
4346
|
React__default.createElement(Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default.createElement(Icon, { data: Gear })))),
|
|
4450
|
-
React__default.createElement(
|
|
4451
|
-
React__default.createElement(List, { onSortEnd: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting) ? onFirstLevelSortEnd : undefined, sortable: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting), virtualized: false, filterable: false, items: data, renderItem: renderFirstLevelItem })),
|
|
4347
|
+
React__default.createElement(CompositeBarView, { type: "menu", compact: false, className: b$m('content'), enableSorting: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting), items: data, onFirstLevelSortEnd: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting) ? onFirstLevelSortEnd : undefined, onSecondLevelSortEnd: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting) ? onSecondLevelSortEnd : undefined, editMode: isEditMode, onItemClick: onItemClick, onToggleGroupCollapsed: onToggleGroupCollapsed, onToggleMenuGroupVisibility: handleToggleGroupVisibility, onToggleMenuItemVisibility: toggleMenuItemsVisibility }),
|
|
4452
4348
|
isEditMode && (React__default.createElement(Button, { onClick: onResetToDefaultClick }, i18n$4('all-panel.resetToDefault')))));
|
|
4453
4349
|
};
|
|
4454
4350
|
|
|
@@ -4555,11 +4451,11 @@ const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
|
|
|
4555
4451
|
const { compact } = useAsideHeaderContext();
|
|
4556
4452
|
const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
|
|
4557
4453
|
const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;
|
|
4558
|
-
return (React__default.createElement("div", { className: b$
|
|
4559
|
-
React__default.createElement("div", { className: b$
|
|
4560
|
-
React__default.createElement("div", { className: b$
|
|
4454
|
+
return (React__default.createElement("div", { className: b$u('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa },
|
|
4455
|
+
React__default.createElement("div", { className: b$u('aside-content', { 'with-decoration': headerDecoration }) },
|
|
4456
|
+
React__default.createElement("div", { className: b$u('header', { 'with-decoration': headerDecoration }) },
|
|
4561
4457
|
React__default.createElement("div", { style: { height: subheaderHeight } }),
|
|
4562
|
-
compact && headerDecoration ? (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b$
|
|
4458
|
+
compact && headerDecoration ? (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b$u('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT })) : null),
|
|
4563
4459
|
React__default.createElement("div", { style: { flex: 1 } }))));
|
|
4564
4460
|
};
|
|
4565
4461
|
|
|
@@ -5562,7 +5458,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
|
|
|
5562
5458
|
var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px;background-color:var(--g-color-base-background)}.gn-mobile-header__header-container{background-color:var(--g-color-base-background);position:sticky;top:0;z-index:var(--gn-mobile-header-z-index,100)}.gn-mobile-header__header{align-items:center;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 10px}.gn-mobile-header__burger{padding:12px}.gn-mobile-header__panel-item{--gn-drawer-item-position:var(--gn-mobile-header-panel-position,absolute)}.gn-mobile-header__burger-menu,.gn-mobile-header__panel-item{background-color:var(--g-color-base-background);max-height:100%;max-width:90vw;width:320px}.gn-mobile-header__user-menu{overflow-y:auto}.gn-mobile-header__overlap-panel,.gn-mobile-header__panels{z-index:var(--gn-mobile-header-panel-z-index,98)}.gn-mobile-header__panels{inset:var(--mobile-header-min-heigth) 0 0;overflow:hidden;position:fixed}.gn-mobile-header__panel-item{height:100%;top:unset}.gn-mobile-header__content{overflow:auto}";
|
|
5563
5459
|
styleInject(css_248z$4);
|
|
5564
5460
|
|
|
5565
|
-
const TopAlert = React__default.lazy(() => import('./index-
|
|
5461
|
+
const TopAlert = React__default.lazy(() => import('./index-B2xnhTBt.js').then((module) => ({ default: module.TopAlert })));
|
|
5566
5462
|
const b$4 = block('mobile-header');
|
|
5567
5463
|
const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
|
|
5568
5464
|
const targetRef = useForwardRef(ref);
|
|
@@ -5863,4 +5759,4 @@ const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, mo
|
|
|
5863
5759
|
};
|
|
5864
5760
|
|
|
5865
5761
|
export { AsideHeader as A, DrawerItem as D, FooterItem$1 as F, HotkeysPanel as H, Logo as L, MOBILE_HEADER_EVENT_NAMES as M, PageLayout as P, Settings as S, Title as T, AsideHeaderContextProvider as a, block as b, PageLayoutAside as c, debounceFn as d, AsideFallback as e, Drawer as f, PublicActionBar as g, useSettingsContext as h, useSettingsSelectionContext as i, FooterItem as j, getMobileHeaderCustomEvent as k, MobileHeader as l, MobileLogo as m, Footer as n, MobileFooter as o, styleInject as s, useAsideHeaderContext as u };
|
|
5866
|
-
//# sourceMappingURL=index-
|
|
5762
|
+
//# sourceMappingURL=index-OhAIuDEO.js.map
|