@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
|
@@ -202,7 +202,7 @@ const NAMESPACE = 'gn-';
|
|
|
202
202
|
classname.withNaming({ e: '__', m: '_' });
|
|
203
203
|
const block = classname.withNaming({ n: NAMESPACE, e: '__', m: '_' });
|
|
204
204
|
|
|
205
|
-
const b$
|
|
205
|
+
const b$u = block('aside-header');
|
|
206
206
|
|
|
207
207
|
function styleInject(css, ref) {
|
|
208
208
|
if ( ref === undefined ) ref = {};
|
|
@@ -231,10 +231,10 @@ function styleInject(css, ref) {
|
|
|
231
231
|
}
|
|
232
232
|
}
|
|
233
233
|
|
|
234
|
-
var css_248z$
|
|
235
|
-
styleInject(css_248z$
|
|
234
|
+
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)}";
|
|
235
|
+
styleInject(css_248z$t);
|
|
236
236
|
|
|
237
|
-
const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-
|
|
237
|
+
const TopAlert$1 = React.lazy(() => Promise.resolve().then(function () { return require('./index-Di96hvKc.js'); }).then((module) => ({ default: module.TopAlert })));
|
|
238
238
|
const Layout = ({ compact, className, children, topAlert, onChangeCompact }) => {
|
|
239
239
|
const { isExpanded, onMouseEnter, onMouseLeave } = useIsExpanded(compact);
|
|
240
240
|
const size = isExpanded ? ASIDE_HEADER_EXPANDED_WIDTH : ASIDE_HEADER_COMPACT_WIDTH;
|
|
@@ -247,15 +247,15 @@ const Layout = ({ compact, className, children, topAlert, onChangeCompact }) =>
|
|
|
247
247
|
onMouseLeave,
|
|
248
248
|
}), [size, compact, isExpanded, onChangeCompact, onMouseEnter, onMouseLeave]);
|
|
249
249
|
return (React.createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
|
|
250
|
-
React.createElement("div", { className: b$
|
|
250
|
+
React.createElement("div", { className: b$u({ compact: !isExpanded }, className), style: Object.assign({}, { '--gn-aside-header-size': `${size}px` }) },
|
|
251
251
|
topAlert && (React.createElement(React.Suspense, { fallback: null },
|
|
252
|
-
React.createElement(TopAlert$1, { className: b$
|
|
253
|
-
React.createElement("div", { className: b$
|
|
252
|
+
React.createElement(TopAlert$1, { className: b$u('top-alert'), alert: topAlert }))),
|
|
253
|
+
React.createElement("div", { className: b$u('pane-container') }, children))));
|
|
254
254
|
};
|
|
255
255
|
const ConnectedContent = ({ children, renderContent, }) => {
|
|
256
256
|
const { size, compact, isExpanded } = useAsideHeaderContext();
|
|
257
257
|
const isExpandedByHover = compact && isExpanded;
|
|
258
|
-
return (React.createElement(Content, { size: size, className: b$
|
|
258
|
+
return (React.createElement(Content, { size: size, className: b$u('content', { 'expanded-by-hover': isExpandedByHover }), renderContent: renderContent }, children));
|
|
259
259
|
};
|
|
260
260
|
const PageLayout = Object.assign(Layout, {
|
|
261
261
|
Content: ConnectedContent,
|
|
@@ -399,10 +399,10 @@ var SvgControlMenuButton = function SvgControlMenuButton(props) {
|
|
|
399
399
|
})));
|
|
400
400
|
};
|
|
401
401
|
|
|
402
|
-
var css_248z$
|
|
403
|
-
styleInject(css_248z$
|
|
402
|
+
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)}";
|
|
403
|
+
styleInject(css_248z$s);
|
|
404
404
|
|
|
405
|
-
const b$
|
|
405
|
+
const b$t = block('collapse-button');
|
|
406
406
|
const CollapseButton = ({ className }) => {
|
|
407
407
|
const { compact, onChangeCompact } = useAsideHeaderContext();
|
|
408
408
|
const { expandTitle, collapseTitle, collapseButtonWrapper } = useAsideHeaderInnerContext();
|
|
@@ -413,8 +413,8 @@ const CollapseButton = ({ className }) => {
|
|
|
413
413
|
const buttonTitle = compact
|
|
414
414
|
? expandTitle || i18n$3('button_expand')
|
|
415
415
|
: collapseTitle || i18n$3('button_collapse');
|
|
416
|
-
const defaultButton = (React.createElement("button", { className: b$
|
|
417
|
-
React.createElement(uikit.Icon, { data: SvgControlMenuButton, className: b$
|
|
416
|
+
const defaultButton = (React.createElement("button", { className: b$t({ compact: compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
|
|
417
|
+
React.createElement(uikit.Icon, { data: SvgControlMenuButton, className: b$t('icon'), width: "16", height: "10" })));
|
|
418
418
|
if (collapseButtonWrapper) {
|
|
419
419
|
return collapseButtonWrapper(defaultButton, {
|
|
420
420
|
compact,
|
|
@@ -1084,10 +1084,10 @@ function requireDebounce () {
|
|
|
1084
1084
|
var debounceExports = requireDebounce();
|
|
1085
1085
|
var debounceFn = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
|
|
1086
1086
|
|
|
1087
|
-
var css_248z$
|
|
1088
|
-
styleInject(css_248z$
|
|
1087
|
+
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))}";
|
|
1088
|
+
styleInject(css_248z$r);
|
|
1089
1089
|
|
|
1090
|
-
const b$
|
|
1090
|
+
const b$s = block('composite-bar-highlighted-item');
|
|
1091
1091
|
const DEBOUNCE_TIME = 200;
|
|
1092
1092
|
const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
1093
1093
|
const { openModalSubscriber } = useAsideHeaderInnerContext();
|
|
@@ -1126,31 +1126,31 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
|
|
|
1126
1126
|
return null;
|
|
1127
1127
|
}
|
|
1128
1128
|
return (React.createElement(uikit.Portal, null,
|
|
1129
|
-
React.createElement("div", { className: b$
|
|
1130
|
-
React.createElement("div", { className: b$
|
|
1129
|
+
React.createElement("div", { className: b$s(), style: position, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
|
|
1130
|
+
React.createElement("div", { className: b$s('icon') }, iconNode))));
|
|
1131
1131
|
};
|
|
1132
1132
|
HighlightedItem.displayName = 'HighlightedItem';
|
|
1133
1133
|
|
|
1134
1134
|
const ITEM_TYPE_REGULAR = 'regular';
|
|
1135
1135
|
const COLLAPSE_ITEM_ID = 'collapse-item-id';
|
|
1136
1136
|
|
|
1137
|
-
var css_248z$
|
|
1138
|
-
styleInject(css_248z$
|
|
1137
|
+
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}";
|
|
1138
|
+
styleInject(css_248z$q);
|
|
1139
1139
|
|
|
1140
|
-
const b$
|
|
1140
|
+
const b$r = block('composite-bar-item');
|
|
1141
1141
|
function renderItemTitle(params) {
|
|
1142
|
-
let titleNode = React.createElement("div", { className: b$
|
|
1142
|
+
let titleNode = React.createElement("div", { className: b$r('title-text') }, params.title);
|
|
1143
1143
|
if (params.rightAdornment) {
|
|
1144
1144
|
titleNode = (React.createElement(React.Fragment, null,
|
|
1145
1145
|
titleNode,
|
|
1146
|
-
React.createElement("div", { className: b$
|
|
1146
|
+
React.createElement("div", { className: b$r('title-adornment') }, params.rightAdornment)));
|
|
1147
1147
|
}
|
|
1148
1148
|
return titleNode;
|
|
1149
1149
|
}
|
|
1150
1150
|
const defaultPopupPlacement = ['right-end'];
|
|
1151
1151
|
const defaultPopupOffset = { mainAxis: 8, crossAxis: -20 };
|
|
1152
1152
|
const Item$1 = (props) => {
|
|
1153
|
-
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;
|
|
1153
|
+
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;
|
|
1154
1154
|
const ref = React.useRef(null);
|
|
1155
1155
|
const anchorRef = (anchoreRefProp === null || anchoreRefProp === undefined ? undefined : anchoreRefProp.current) ? anchoreRefProp : ref;
|
|
1156
1156
|
const highlightedRef = React.useRef(null);
|
|
@@ -1159,6 +1159,11 @@ const Item$1 = (props) => {
|
|
|
1159
1159
|
const icon = props.icon;
|
|
1160
1160
|
const iconSize = props.iconSize || ASIDE_HEADER_ICON_SIZE;
|
|
1161
1161
|
const iconQa = props.iconQa;
|
|
1162
|
+
const onPinButtonClick = React.useCallback((e) => {
|
|
1163
|
+
e.stopPropagation();
|
|
1164
|
+
e.preventDefault();
|
|
1165
|
+
onToggleVisibility === null || onToggleVisibility === undefined ? undefined : onToggleVisibility();
|
|
1166
|
+
}, [onToggleVisibility]);
|
|
1162
1167
|
const handleOpenChangePopup = React.useCallback((newOpen, event, reason) => {
|
|
1163
1168
|
var _a;
|
|
1164
1169
|
if (event instanceof MouseEvent &&
|
|
@@ -1169,15 +1174,15 @@ const Item$1 = (props) => {
|
|
|
1169
1174
|
onOpenChangePopup === null || onOpenChangePopup === undefined ? undefined : onOpenChangePopup(newOpen, event, reason);
|
|
1170
1175
|
}, [onOpenChangePopup]);
|
|
1171
1176
|
if (type === 'divider') {
|
|
1172
|
-
return React.createElement("div", { className: b$
|
|
1177
|
+
return React.createElement("div", { className: b$r('menu-divider') });
|
|
1173
1178
|
}
|
|
1174
1179
|
const makeIconNode = (iconEl) => {
|
|
1175
|
-
return compact ? React.createElement("div", { className: b$
|
|
1180
|
+
return compact ? React.createElement("div", { className: b$r('btn-icon') }, iconEl) : iconEl;
|
|
1176
1181
|
};
|
|
1177
1182
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
1178
1183
|
const [Tag, tagProps] = href ? ['a', { href }] : ['button', {}];
|
|
1179
1184
|
const createdNode = (React.createElement(React.Fragment, null,
|
|
1180
|
-
React.createElement(Tag, Object.assign({}, tagProps, { className: b$
|
|
1185
|
+
React.createElement(Tag, Object.assign({}, tagProps, { className: b$r({ type, current, compact }, className), ref: ref, "data-qa": qa, onClick: (event) => {
|
|
1181
1186
|
onItemClick === null || onItemClick === undefined ? undefined : onItemClick(props, false, event);
|
|
1182
1187
|
}, onClickCapture: onItemClickCapture, onMouseEnter: () => {
|
|
1183
1188
|
if (!compact) {
|
|
@@ -1188,12 +1193,14 @@ const Item$1 = (props) => {
|
|
|
1188
1193
|
onMouseLeave === null || onMouseLeave === undefined ? undefined : onMouseLeave();
|
|
1189
1194
|
}
|
|
1190
1195
|
} }),
|
|
1191
|
-
React.createElement("div", { className: b$
|
|
1192
|
-
React.createElement("div", { className: b$
|
|
1196
|
+
React.createElement("div", { className: b$r('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
|
|
1197
|
+
React.createElement("div", { className: b$r('title'), title: typeof title === 'string' ? title : undefined }, titleEl),
|
|
1198
|
+
editMode && !preventUserRemoving && onToggleVisibility ? (React.createElement(uikit.Button, { onClick: onPinButtonClick, view: hidden ? 'flat-secondary' : 'flat-action', className: b$r('visibility-button') },
|
|
1199
|
+
React.createElement(uikit.Button.Icon, null, hidden ? React.createElement(icons.Pin, null) : React.createElement(icons.PinFill, null)))) : null),
|
|
1193
1200
|
renderPopupContent && Boolean(anchorRef === null || anchorRef === undefined ? undefined : anchorRef.current) && (React.createElement(uikit.Popup, { strategy: "fixed", open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorElement: anchorRef.current, onOpenChange: handleOpenChangePopup }, renderPopupContent()))));
|
|
1194
1201
|
return createdNode;
|
|
1195
1202
|
};
|
|
1196
|
-
const iconNode = icon ? (React.createElement(uikit.Icon, { qa: iconQa, data: icon, size: iconSize, className: b$
|
|
1203
|
+
const iconNode = icon ? (React.createElement(uikit.Icon, { qa: iconQa, data: icon, size: iconSize, className: b$r('icon') })) : null;
|
|
1197
1204
|
const titleNode = renderItemTitle({ title, rightAdornment });
|
|
1198
1205
|
const params = { icon: iconNode, title: titleNode };
|
|
1199
1206
|
let highlightedNode = null;
|
|
@@ -1237,25 +1244,25 @@ class MultipleTooltipProvider extends React.PureComponent {
|
|
|
1237
1244
|
}
|
|
1238
1245
|
}
|
|
1239
1246
|
|
|
1240
|
-
var css_248z$
|
|
1241
|
-
styleInject(css_248z$
|
|
1247
|
+
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}";
|
|
1248
|
+
styleInject(css_248z$p);
|
|
1242
1249
|
|
|
1243
|
-
const b$
|
|
1250
|
+
const b$q = block('multiple-tooltip');
|
|
1244
1251
|
const POPUP_OFFSET = { mainAxis: 4, crossAxis: -32 };
|
|
1245
1252
|
const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
|
|
1246
1253
|
const { activeIndex, hideCollapseItemTooltip } = React.useContext(MultipleTooltipContext);
|
|
1247
1254
|
const activeItem = activeIndex === undefined ? null : items[activeIndex];
|
|
1248
|
-
return (React.createElement(uikit.Popup, { open: open, className: b$
|
|
1249
|
-
React.createElement("div", { className: b$
|
|
1250
|
-
React.createElement("div", { className: b$
|
|
1255
|
+
return (React.createElement(uikit.Popup, { open: open, className: b$q('popup'), anchorElement: anchorRef.current, strategy: "fixed", placement: placement, offset: POPUP_OFFSET },
|
|
1256
|
+
React.createElement("div", { className: b$q() },
|
|
1257
|
+
React.createElement("div", { className: b$q('items-container') }, items
|
|
1251
1258
|
.filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
|
|
1252
1259
|
(id !== COLLAPSE_ITEM_ID && type !== 'action'))
|
|
1253
1260
|
.map((currentItem, idx) => {
|
|
1254
1261
|
switch (currentItem.type) {
|
|
1255
1262
|
case 'divider':
|
|
1256
|
-
return (React.createElement("div", { className: b$
|
|
1263
|
+
return (React.createElement("div", { className: b$q('item', { divider: true }), key: idx }, currentItem.title));
|
|
1257
1264
|
default:
|
|
1258
|
-
return (React.createElement("div", { className: b$
|
|
1265
|
+
return (React.createElement("div", { className: b$q('item', {
|
|
1259
1266
|
active: currentItem === activeItem,
|
|
1260
1267
|
}), key: idx }, currentItem.title));
|
|
1261
1268
|
}
|
|
@@ -1273,9 +1280,7 @@ function getGroupBlockHeight(items) {
|
|
|
1273
1280
|
}
|
|
1274
1281
|
|
|
1275
1282
|
function getGroupHeight(compositeItem) {
|
|
1276
|
-
|
|
1277
|
-
const visibleItemsCount = ((_a = compositeItem.items) === null || _a === undefined ? undefined : _a.filter(({ hidden }) => !hidden)) || [];
|
|
1278
|
-
const visibleGroupItems = compositeItem.isCollapsed ? [] : visibleItemsCount;
|
|
1283
|
+
const visibleGroupItems = compositeItem.isCollapsed ? [] : compositeItem.items;
|
|
1279
1284
|
return getGroupBlockHeight(visibleGroupItems);
|
|
1280
1285
|
}
|
|
1281
1286
|
function getItemHeight$1(compositeItem) {
|
|
@@ -1300,17 +1305,15 @@ function getSelectedItemIndex$1(compositeItems) {
|
|
|
1300
1305
|
return index === -1 ? undefined : index;
|
|
1301
1306
|
}
|
|
1302
1307
|
|
|
1303
|
-
var css_248z$
|
|
1304
|
-
styleInject(css_248z$
|
|
1308
|
+
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)}";
|
|
1309
|
+
styleInject(css_248z$o);
|
|
1305
1310
|
|
|
1306
|
-
const b$
|
|
1307
|
-
const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleTooltip = false, compositeId, className,
|
|
1311
|
+
const b$p = block('composite-bar');
|
|
1312
|
+
const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleTooltip = false, compositeId, className, groupClassName, menuItemClassName, enableSorting = false, editMode = false, compact, onToggleGroupCollapsed, onToggleMenuGroupVisibility, onToggleMenuItemVisibility, onFirstLevelSortEnd, onSecondLevelSortEnd, }) => {
|
|
1308
1313
|
const ref = React.useRef(null);
|
|
1309
1314
|
const tooltipRef = React.useRef(null);
|
|
1310
1315
|
const [hoveredGroupId, setHoveredGroupId] = React.useState(null);
|
|
1311
1316
|
const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext);
|
|
1312
|
-
const { isExpanded } = useAsideHeaderInnerContext();
|
|
1313
|
-
const compact = !isExpanded;
|
|
1314
1317
|
React.useEffect(() => {
|
|
1315
1318
|
function handleBlurWindow() {
|
|
1316
1319
|
if (multipleTooltip && multipleTooltipActive) {
|
|
@@ -1420,65 +1423,26 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleToolt
|
|
|
1420
1423
|
onFirstLevelSortEnd({ oldIndex, newIndex });
|
|
1421
1424
|
}
|
|
1422
1425
|
}, [onFirstLevelSortEnd]);
|
|
1423
|
-
const handleSecondLevelSortEnd = React.useCallback((
|
|
1426
|
+
const handleSecondLevelSortEnd = React.useCallback((groupIndex) => ({ oldIndex, newIndex }) => {
|
|
1424
1427
|
if (onSecondLevelSortEnd) {
|
|
1425
|
-
onSecondLevelSortEnd(
|
|
1428
|
+
onSecondLevelSortEnd(groupIndex)({ oldIndex, newIndex });
|
|
1426
1429
|
}
|
|
1427
1430
|
}, [onSecondLevelSortEnd]);
|
|
1428
|
-
const renderNestedItem = React.useCallback((nestedItem, parentItemIndex, _nestedItemIndex, _parentGroupId) => {
|
|
1429
|
-
var _a;
|
|
1430
|
-
if ('items' in nestedItem && nestedItem.items && nestedItem.items.length > 0) {
|
|
1431
|
-
const isCollapsible = Boolean('collapsible' in nestedItem && nestedItem.collapsible);
|
|
1432
|
-
const isCollapsed = Boolean('isCollapsed' in nestedItem && nestedItem.isCollapsed);
|
|
1433
|
-
const nestedGroupListItems = ((_a = nestedItem.items) === null || _a === undefined ? undefined : _a.filter((item) => !item.hidden)) || [];
|
|
1434
|
-
const hasHeader = nestedItem.title || nestedItem.icon || isCollapsible;
|
|
1435
|
-
const isNestedGroupHovered = hoveredGroupId === nestedItem.id;
|
|
1436
|
-
let nestedGroupIcon = nestedItem.icon;
|
|
1437
|
-
if (!isCollapsed) {
|
|
1438
|
-
nestedGroupIcon = icons.ChevronDown;
|
|
1439
|
-
}
|
|
1440
|
-
else if (isNestedGroupHovered) {
|
|
1441
|
-
nestedGroupIcon = icons.ChevronRight;
|
|
1442
|
-
}
|
|
1443
|
-
return (React.createElement("div", { className: b$r('menu-group', { expanded: !isCollapsed, nested: true }) },
|
|
1444
|
-
hasHeader && (React.createElement(Item$1, Object.assign({}, nestedItem, { className: b$r('menu-group-header', { collapsed: isCollapsed }), icon: nestedGroupIcon, compact: compact, onMouseEnter: () => {
|
|
1445
|
-
setHoveredGroupId(nestedItem.id);
|
|
1446
|
-
}, onMouseLeave: () => {
|
|
1447
|
-
setHoveredGroupId(null);
|
|
1448
|
-
}, onItemClick: (item) => {
|
|
1449
|
-
onToggleGroupCollapsed === null || onToggleGroupCollapsed === undefined ? undefined : onToggleGroupCollapsed(item.id);
|
|
1450
|
-
} }))),
|
|
1451
|
-
!isCollapsed && (React.createElement(uikit.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) => {
|
|
1452
|
-
return renderNestedItem(deepNestedItem, parentItemIndex, deepNestedIndex, nestedItem.id);
|
|
1453
|
-
} }))));
|
|
1454
|
-
}
|
|
1455
|
-
return (React.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) })));
|
|
1456
|
-
}, [
|
|
1457
|
-
compact,
|
|
1458
|
-
enableSorting,
|
|
1459
|
-
handleSecondLevelSortEnd,
|
|
1460
|
-
hoveredGroupId,
|
|
1461
|
-
onItemClickByIndex,
|
|
1462
|
-
onMouseEnterByIndex,
|
|
1463
|
-
onMouseLeave,
|
|
1464
|
-
onToggleGroupCollapsed,
|
|
1465
|
-
setHoveredGroupId,
|
|
1466
|
-
]);
|
|
1467
1431
|
if (!items || items.length === 0) {
|
|
1468
1432
|
return null;
|
|
1469
1433
|
}
|
|
1470
1434
|
return (React.createElement(React.Fragment, null,
|
|
1471
1435
|
React.createElement("div", { className: className, ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
1472
|
-
React.createElement(uikit.List, { id: compositeId, ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$
|
|
1473
|
-
|
|
1474
|
-
if (!
|
|
1475
|
-
return (React.createElement(Item$1, Object.assign({}, item, { className: b$
|
|
1436
|
+
React.createElement(uikit.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) => {
|
|
1437
|
+
const groupId = item.groupId;
|
|
1438
|
+
if (!groupId) {
|
|
1439
|
+
return (React.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
|
|
1440
|
+
? () => onToggleMenuItemVisibility(item)
|
|
1441
|
+
: undefined })));
|
|
1476
1442
|
}
|
|
1477
1443
|
const isCollapsible = Boolean('collapsible' in item && item.collapsible);
|
|
1478
1444
|
const isCollapsed = Boolean('isCollapsed' in item && item.isCollapsed);
|
|
1479
|
-
const groupListItems = ('items' in item &&
|
|
1480
|
-
((_a = item.items) === null || _a === undefined ? undefined : _a.filter((groupItem) => !groupItem.hidden))) ||
|
|
1481
|
-
[];
|
|
1445
|
+
const groupListItems = ('items' in item && item.items) || [];
|
|
1482
1446
|
const hasHeader = item.title || item.icon || isCollapsible;
|
|
1483
1447
|
const isUngrouped = item.id === UNGROUPED_ID;
|
|
1484
1448
|
const isGroupHovered = hoveredGroupId === item.id;
|
|
@@ -1489,41 +1453,58 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, multipleToolt
|
|
|
1489
1453
|
else if (isGroupHovered) {
|
|
1490
1454
|
groupIcon = icons.ChevronRight;
|
|
1491
1455
|
}
|
|
1492
|
-
return (React.createElement("div", { className: b$
|
|
1493
|
-
hasHeader && !isUngrouped && (React.createElement(Item$1, Object.assign({}, item, { className: b$
|
|
1456
|
+
return (React.createElement("div", { className: b$p('menu-group', { expanded: !isCollapsed }, groupClassName) },
|
|
1457
|
+
hasHeader && !isUngrouped && (React.createElement(Item$1, Object.assign({}, item, { className: b$p('menu-group-header', { collapsed: isCollapsed }), icon: groupIcon, compact: compact, editMode: editMode, onMouseEnter: () => {
|
|
1494
1458
|
setHoveredGroupId(item.id);
|
|
1495
1459
|
}, onMouseLeave: () => {
|
|
1496
1460
|
setHoveredGroupId(null);
|
|
1497
|
-
}, onItemClick: (
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1461
|
+
}, onItemClick: onItemClickByIndex(itemIndex, onToggleGroupCollapsed
|
|
1462
|
+
? () => onToggleGroupCollapsed(groupId)
|
|
1463
|
+
: undefined), onToggleVisibility: onToggleMenuGroupVisibility
|
|
1464
|
+
? () => onToggleMenuGroupVisibility(groupId)
|
|
1465
|
+
: undefined }))),
|
|
1466
|
+
!isCollapsed && (React.createElement(uikit.List, { items: groupListItems, sortable: enableSorting, onSortEnd: handleSecondLevelSortEnd(itemIndex), virtualized: false, filterable: false, itemClassName: b$p('menu-group-item', {
|
|
1467
|
+
edit: enableSorting,
|
|
1468
|
+
compact,
|
|
1469
|
+
}), itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, renderItem: (nestedItem, _isNestedItemActive, _nestedItemIndex) => {
|
|
1470
|
+
return (React.createElement(Item$1, Object.assign({}, nestedItem, { className: b$p('menu-group-header', {
|
|
1471
|
+
collapsed: isCollapsed,
|
|
1472
|
+
}), compact: compact, editMode: editMode, onMouseEnter: () => {
|
|
1473
|
+
setHoveredGroupId(nestedItem.id);
|
|
1474
|
+
}, onMouseLeave: () => {
|
|
1475
|
+
setHoveredGroupId(null);
|
|
1476
|
+
}, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), onToggleVisibility: onToggleMenuItemVisibility
|
|
1477
|
+
? () => onToggleMenuItemVisibility(nestedItem)
|
|
1478
|
+
: undefined })));
|
|
1502
1479
|
} }))));
|
|
1503
1480
|
} })),
|
|
1504
1481
|
type === 'menu' && multipleTooltip && (React.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
1505
1482
|
};
|
|
1506
|
-
const CompositeBar = ({ type, items, onItemClick, onMoreClick, onToggleGroupCollapsed, multipleTooltip = false, compact, compositeId, className, }) => {
|
|
1507
|
-
|
|
1483
|
+
const CompositeBar = ({ type, items, onItemClick, onMoreClick, onToggleGroupCollapsed, multipleTooltip = false, compact, compositeId, className, groupClassName, menuItemClassName, editMode = false, }) => {
|
|
1484
|
+
var _a;
|
|
1485
|
+
const visibleItems = (_a = items === null || items === undefined ? undefined : items.filter((item) => !item.hidden)) === null || _a === undefined ? undefined : _a.map((item) => {
|
|
1486
|
+
var _a;
|
|
1487
|
+
return (Object.assign(Object.assign({}, item), { items: 'items' in item ? (_a = item.items) === null || _a === undefined ? undefined : _a.filter((item) => !item.hidden) : [] }));
|
|
1488
|
+
});
|
|
1508
1489
|
if (!visibleItems || visibleItems.length === 0) {
|
|
1509
1490
|
return null;
|
|
1510
1491
|
}
|
|
1511
1492
|
let node;
|
|
1512
1493
|
if (type === 'menu') {
|
|
1513
|
-
node = (React.createElement("div", { className: b$
|
|
1514
|
-
React.createElement(CompositeBarView, { compositeId: compositeId, type: "menu", compact: compact, items: visibleItems, onItemClick: onItemClick, onMoreClick: onMoreClick, multipleTooltip: multipleTooltip, onToggleGroupCollapsed: onToggleGroupCollapsed })));
|
|
1494
|
+
node = (React.createElement("div", { className: b$p({ scrollable: true }, className) },
|
|
1495
|
+
React.createElement(CompositeBarView, { compositeId: compositeId, groupClassName: groupClassName, menuItemClassName: menuItemClassName, type: "menu", compact: compact, items: visibleItems, onItemClick: onItemClick, onMoreClick: onMoreClick, multipleTooltip: multipleTooltip, onToggleGroupCollapsed: onToggleGroupCollapsed, editMode: editMode })));
|
|
1515
1496
|
}
|
|
1516
1497
|
else {
|
|
1517
|
-
node = (React.createElement("div", { className: b$
|
|
1518
|
-
React.createElement(CompositeBarView, { type: "subheader", compact: compact, items: visibleItems, onItemClick: onItemClick })));
|
|
1498
|
+
node = (React.createElement("div", { className: b$p({ subheader: true }, className) },
|
|
1499
|
+
React.createElement(CompositeBarView, { groupClassName: groupClassName, menuItemClassName: menuItemClassName, type: "subheader", compact: compact, items: visibleItems, onItemClick: onItemClick, editMode: editMode })));
|
|
1519
1500
|
}
|
|
1520
1501
|
return React.createElement(MultipleTooltipProvider, null, node);
|
|
1521
1502
|
};
|
|
1522
1503
|
|
|
1523
|
-
var css_248z$
|
|
1524
|
-
styleInject(css_248z$
|
|
1504
|
+
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}";
|
|
1505
|
+
styleInject(css_248z$n);
|
|
1525
1506
|
|
|
1526
|
-
const b$
|
|
1507
|
+
const b$o = block('logo');
|
|
1527
1508
|
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, }) => {
|
|
1528
1509
|
const hasWrapper = typeof wrapper === 'function';
|
|
1529
1510
|
let buttonIcon;
|
|
@@ -1539,7 +1520,7 @@ const Logo = ({ text, icon, iconSrc, iconClassName, iconPlaceClassName, iconSize
|
|
|
1539
1520
|
logo = text();
|
|
1540
1521
|
}
|
|
1541
1522
|
else {
|
|
1542
|
-
logo = (React.createElement("div", { className: b$
|
|
1523
|
+
logo = (React.createElement("div", { className: b$o('logo'), style: { fontSize: textSize } }, text));
|
|
1543
1524
|
}
|
|
1544
1525
|
const _a = href
|
|
1545
1526
|
? {
|
|
@@ -1551,10 +1532,10 @@ const Logo = ({ text, icon, iconSrc, iconClassName, iconPlaceClassName, iconSize
|
|
|
1551
1532
|
'aria-labelledby': ariaLabelledby,
|
|
1552
1533
|
}
|
|
1553
1534
|
: { tag: 'span' }, { tag: Button } = _a, buttonProps = __rest(_a, ["tag"]);
|
|
1554
|
-
const button = (React.createElement(Button, Object.assign({}, buttonProps, { className: b$
|
|
1555
|
-
React.createElement("span", { className: b$
|
|
1535
|
+
const button = (React.createElement(Button, Object.assign({}, buttonProps, { className: b$o('btn-logo', buttonClassName), onClick: onClick }),
|
|
1536
|
+
React.createElement("span", { className: b$o('logo-icon-place', iconPlaceClassName) }, buttonIcon),
|
|
1556
1537
|
!compact && logo));
|
|
1557
|
-
return (React.createElement("div", { className: b$
|
|
1538
|
+
return (React.createElement("div", { className: b$o(null, className) }, hasWrapper ? wrapper(button, Boolean(compact)) : button));
|
|
1558
1539
|
};
|
|
1559
1540
|
|
|
1560
1541
|
var _path;
|
|
@@ -1582,10 +1563,10 @@ const Header = () => {
|
|
|
1582
1563
|
onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
|
|
1583
1564
|
(_a = logo === null || logo === undefined ? undefined : logo.onClick) === null || _a === undefined ? undefined : _a.call(logo, event);
|
|
1584
1565
|
}, [onClosePanel, logo]);
|
|
1585
|
-
return (React.createElement("div", { className: b$
|
|
1586
|
-
logo && (React.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: !isExpanded, buttonClassName: b$
|
|
1587
|
-
React.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, type: "subheader", compact: compact, items: items, onItemClick: onItemClick }),
|
|
1588
|
-
headerDecoration && (React.createElement(uikit.Icon, { data: SvgDividerCollapsed, className: b$
|
|
1566
|
+
return (React.createElement("div", { className: b$u('header', { ['with-decoration']: headerDecoration }) },
|
|
1567
|
+
logo && (React.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: !isExpanded, buttonClassName: b$u('logo-button'), iconPlaceClassName: b$u('logo-icon-place') }))),
|
|
1568
|
+
React.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, menuItemClassName: b$u('menu-item'), type: "subheader", compact: compact, items: items, onItemClick: onItemClick }),
|
|
1569
|
+
headerDecoration && (React.createElement(uikit.Icon, { data: SvgDividerCollapsed, className: b$u('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
|
|
1589
1570
|
};
|
|
1590
1571
|
|
|
1591
1572
|
// Avoid Chrome DevTools blue warning.
|
|
@@ -4108,10 +4089,10 @@ function useResizableDrawerItem(params) {
|
|
|
4108
4089
|
return { resizedWidth: displayWidth, resizerHandlers: handlers, isResizing };
|
|
4109
4090
|
}
|
|
4110
4091
|
|
|
4111
|
-
var css_248z$
|
|
4112
|
-
styleInject(css_248z$
|
|
4092
|
+
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))}";
|
|
4093
|
+
styleInject(css_248z$m);
|
|
4113
4094
|
|
|
4114
|
-
const b$
|
|
4095
|
+
const b$n = block('drawer');
|
|
4115
4096
|
const TIMEOUT = 300;
|
|
4116
4097
|
const DrawerItem = React.forwardRef(function DrawerItem(props, ref) {
|
|
4117
4098
|
const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResizeContinue, onResize, keepMounted = false, style = {}, } = props;
|
|
@@ -4143,10 +4124,10 @@ const DrawerItem = React.forwardRef(function DrawerItem(props, ref) {
|
|
|
4143
4124
|
React.useEffect(() => {
|
|
4144
4125
|
setInitialRender(true);
|
|
4145
4126
|
}, [direction]);
|
|
4146
|
-
const resizerElement = resizable ? (React.createElement("div", Object.assign({ className: b$
|
|
4147
|
-
React.createElement("div", { className: b$
|
|
4148
|
-
return (React.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, classNames: b$
|
|
4149
|
-
React.createElement("div", { ref: handleRef, className: b$
|
|
4127
|
+
const resizerElement = resizable ? (React.createElement("div", Object.assign({ className: b$n('resizer', { direction }) }, resizerHandlers),
|
|
4128
|
+
React.createElement("div", { className: b$n('resizer-handle', { direction }) }))) : null;
|
|
4129
|
+
return (React.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) },
|
|
4130
|
+
React.createElement("div", { ref: handleRef, className: b$n('item', {
|
|
4150
4131
|
direction: cssDirection,
|
|
4151
4132
|
hidden: isInitialRender && !visible,
|
|
4152
4133
|
resize: isResizing,
|
|
@@ -4182,9 +4163,9 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
|
|
|
4182
4163
|
useScrollLock(shouldApplyScrollLock);
|
|
4183
4164
|
return (React.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, nodeRef: containerRef }, (state) => {
|
|
4184
4165
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
4185
|
-
const content = (React.createElement("div", { ref: containerRef, className: b$
|
|
4186
|
-
React.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
4187
|
-
React.createElement("div", { ref: veilRef, className: b$
|
|
4166
|
+
const content = (React.createElement("div", { ref: containerRef, className: b$n({ hideVeil }, className), style: style },
|
|
4167
|
+
React.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$n('veil-transition'), nodeRef: veilRef },
|
|
4168
|
+
React.createElement("div", { ref: veilRef, className: b$n('veil', { hidden: hideVeil }, veilClassName), onClick: onVeilClick })),
|
|
4188
4169
|
React.Children.map(children, (child) => {
|
|
4189
4170
|
if (React.isValidElement(child) &&
|
|
4190
4171
|
child.type === DrawerItem) {
|
|
@@ -4207,7 +4188,7 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
|
|
|
4207
4188
|
|
|
4208
4189
|
const Panels = () => {
|
|
4209
4190
|
const { panelItems, size, onClosePanel } = useAsideHeaderInnerContext();
|
|
4210
|
-
return panelItems ? (React.createElement(Drawer, { className: b$
|
|
4191
|
+
return panelItems ? (React.createElement(Drawer, { className: b$u('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React.createElement(DrawerItem, Object.assign({ key: item.id, className: b$u('panel') }, item)))))) : null;
|
|
4211
4192
|
};
|
|
4212
4193
|
|
|
4213
4194
|
const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
|
|
@@ -4220,15 +4201,15 @@ const FirstPanel = React.forwardRef((_props, ref) => {
|
|
|
4220
4201
|
}, [ref]);
|
|
4221
4202
|
const isExpandedByHover = compact && isExpanded;
|
|
4222
4203
|
return (React.createElement(React.Fragment, null,
|
|
4223
|
-
React.createElement("div", { className: b$
|
|
4224
|
-
React.createElement("div", { className: b$
|
|
4225
|
-
customBackground && (React.createElement("div", { className: b$
|
|
4226
|
-
React.createElement("div", { className: b$
|
|
4204
|
+
React.createElement("div", { className: b$u('aside', { 'expanded-by-hover': isExpandedByHover }, className), style: { width: size }, "data-qa": qa, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
|
|
4205
|
+
React.createElement("div", { className: b$u('aside-popup-anchor'), ref: asideRef }),
|
|
4206
|
+
customBackground && (React.createElement("div", { className: b$u('aside-custom-background', customBackgroundClassName) }, customBackground)),
|
|
4207
|
+
React.createElement("div", { className: b$u('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4227
4208
|
React.createElement(Header, null),
|
|
4228
|
-
(flatListItems === null || flatListItems === undefined ? undefined : flatListItems.length) ? (React.createElement(CompositeBar, { compositeId: MENU_ITEMS_COMPOSITE_ID, className: b$
|
|
4229
|
-
React.createElement("div", { className: b$
|
|
4209
|
+
(flatListItems === null || flatListItems === undefined ? undefined : flatListItems.length) ? (React.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.createElement("div", { className: b$u('menu-items') })),
|
|
4210
|
+
React.createElement("div", { className: b$u('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
|
|
4230
4211
|
size,
|
|
4231
|
-
compact: Boolean(
|
|
4212
|
+
compact: Boolean(!isExpanded),
|
|
4232
4213
|
asideRef,
|
|
4233
4214
|
})),
|
|
4234
4215
|
!hideCollapseButton && React.createElement(CollapseButton, null))),
|
|
@@ -4236,60 +4217,6 @@ const FirstPanel = React.forwardRef((_props, ref) => {
|
|
|
4236
4217
|
});
|
|
4237
4218
|
FirstPanel.displayName = 'FirstPanel';
|
|
4238
4219
|
|
|
4239
|
-
var css_248z$n = ".gn-all-pages-group-header{height:40px;padding:0 var(--g-spacing-6)}";
|
|
4240
|
-
styleInject(css_248z$n);
|
|
4241
|
-
|
|
4242
|
-
const b$o = block('all-pages-group-header');
|
|
4243
|
-
const AllPagesGroupHeader = ({ onToggleHidden, editMode, id, icon, title, hidden, isDisabled, }) => {
|
|
4244
|
-
const onHideButtonClick = React.useCallback((e) => {
|
|
4245
|
-
e.stopPropagation();
|
|
4246
|
-
e.preventDefault();
|
|
4247
|
-
onToggleHidden === null || onToggleHidden === undefined ? undefined : onToggleHidden(id);
|
|
4248
|
-
}, [id, onToggleHidden]);
|
|
4249
|
-
return (React.createElement(uikit.Flex, { className: b$o(), gap: "2", alignItems: "center", justifyContent: "space-between" },
|
|
4250
|
-
React.createElement(uikit.Flex, { gap: "2", alignItems: "center" },
|
|
4251
|
-
icon && React.createElement(uikit.Icon, { data: icon, size: 16 }),
|
|
4252
|
-
React.createElement(uikit.Text, { className: b$o('title'), variant: "body-1", color: "secondary" }, title)),
|
|
4253
|
-
editMode && id !== UNGROUPED_ID && (React.createElement(uikit.Button, { onClick: onHideButtonClick, disabled: isDisabled, view: hidden ? 'flat-secondary' : 'flat-action' },
|
|
4254
|
-
React.createElement(uikit.Button.Icon, null, hidden ? React.createElement(icons.Pin, null) : React.createElement(icons.PinFill, null))))));
|
|
4255
|
-
};
|
|
4256
|
-
|
|
4257
|
-
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)}";
|
|
4258
|
-
styleInject(css_248z$m);
|
|
4259
|
-
|
|
4260
|
-
const b$n = block('all-pages-list-item');
|
|
4261
|
-
const AllPagesListItem = (props) => {
|
|
4262
|
-
const { item, editMode, onToggle } = props;
|
|
4263
|
-
const ref = React.useRef(null);
|
|
4264
|
-
const onPinButtonClick = React.useCallback((e) => {
|
|
4265
|
-
e.stopPropagation();
|
|
4266
|
-
e.preventDefault();
|
|
4267
|
-
onToggle();
|
|
4268
|
-
}, [onToggle]);
|
|
4269
|
-
const onItemClick = (e) => {
|
|
4270
|
-
if (editMode) {
|
|
4271
|
-
e.stopPropagation();
|
|
4272
|
-
e.preventDefault();
|
|
4273
|
-
}
|
|
4274
|
-
};
|
|
4275
|
-
const [Tag, tagProps] = item.href ? ['a', { href: item.href }] : ['button', {}];
|
|
4276
|
-
const makeNode = React.useCallback((params) => {
|
|
4277
|
-
return (React.createElement(Tag, Object.assign({}, tagProps, { className: b$n(), onClick: onItemClick, ref: ref }),
|
|
4278
|
-
params.icon,
|
|
4279
|
-
React.createElement("span", { className: b$n('text') }, params.title),
|
|
4280
|
-
editMode && !item.preventUserRemoving && (React.createElement(uikit.Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
|
|
4281
|
-
React.createElement(uikit.Button.Icon, null, item.hidden ? React.createElement(icons.Pin, null) : React.createElement(icons.PinFill, null))))));
|
|
4282
|
-
}, [Tag, tagProps, onItemClick, editMode, item, onPinButtonClick]);
|
|
4283
|
-
const iconNode = item.icon ? (React.createElement(uikit.Icon, { className: b$n('icon'), data: item.icon, size: item.iconSize })) : null;
|
|
4284
|
-
const titleNode = item.title;
|
|
4285
|
-
const params = { icon: iconNode, title: titleNode };
|
|
4286
|
-
const opts = { collapsed: false, compact: false, item, ref };
|
|
4287
|
-
if (typeof item.itemWrapper === 'function') {
|
|
4288
|
-
return item.itemWrapper(params, makeNode, opts);
|
|
4289
|
-
}
|
|
4290
|
-
return makeNode(params);
|
|
4291
|
-
};
|
|
4292
|
-
|
|
4293
4220
|
function buildExpandedFromFlatList(flatList) {
|
|
4294
4221
|
const expanded = [];
|
|
4295
4222
|
flatList.forEach((item) => {
|
|
@@ -4331,13 +4258,13 @@ function sortMenuItems(oldIndex, newIndex, items) {
|
|
|
4331
4258
|
return buildExpandedFromFlatList(sortedItems);
|
|
4332
4259
|
}
|
|
4333
4260
|
|
|
4334
|
-
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;
|
|
4261
|
+
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)}";
|
|
4335
4262
|
styleInject(css_248z$l);
|
|
4336
4263
|
|
|
4337
4264
|
const b$m = block('all-pages-panel');
|
|
4338
4265
|
const AllPagesPanel = (props) => {
|
|
4339
4266
|
const { startEditIcon, onEditModeChanged, className } = props;
|
|
4340
|
-
const { defaultMenuItems, editMenuProps, menuItems, menuGroups, defaultMenuGroups, onMenuItemsChanged, onMenuGroupsChanged, } = useAsideHeaderInnerContext();
|
|
4267
|
+
const { defaultMenuItems, editMenuProps, menuItems, menuGroups, defaultMenuGroups, onToggleGroupCollapsed, onMenuItemsChanged, onMenuGroupsChanged, } = useAsideHeaderInnerContext();
|
|
4341
4268
|
const items = useGroupedMenuItems(menuItems, menuGroups, true);
|
|
4342
4269
|
const menuItemsRef = React.useRef(items);
|
|
4343
4270
|
menuItemsRef.current = items;
|
|
@@ -4354,10 +4281,10 @@ const AllPagesPanel = (props) => {
|
|
|
4354
4281
|
(_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onOpenEditMode) === null || _a === undefined ? undefined : _a.call(editMenuProps);
|
|
4355
4282
|
}
|
|
4356
4283
|
}, [isEditMode, onEditModeChanged, editMenuProps]);
|
|
4357
|
-
const onItemClick = React.useCallback((item,
|
|
4284
|
+
const onItemClick = React.useCallback((item, collapsed, event) => {
|
|
4358
4285
|
var _a;
|
|
4359
4286
|
// TODO: make event an optional argument
|
|
4360
|
-
(_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item,
|
|
4287
|
+
(_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, collapsed, event);
|
|
4361
4288
|
}, []);
|
|
4362
4289
|
const onResetToDefaultClick = React.useCallback(() => {
|
|
4363
4290
|
var _a;
|
|
@@ -4379,7 +4306,7 @@ const AllPagesPanel = (props) => {
|
|
|
4379
4306
|
onMenuGroupsChanged,
|
|
4380
4307
|
defaultMenuGroups,
|
|
4381
4308
|
]);
|
|
4382
|
-
const
|
|
4309
|
+
const handleToggleGroupVisibility = React.useCallback((groupId) => {
|
|
4383
4310
|
if (!onMenuGroupsChanged) {
|
|
4384
4311
|
return;
|
|
4385
4312
|
}
|
|
@@ -4431,44 +4358,13 @@ const AllPagesPanel = (props) => {
|
|
|
4431
4358
|
onMenuItemsChanged === null || onMenuItemsChanged === undefined ? undefined : onMenuItemsChanged(updatedItems);
|
|
4432
4359
|
}
|
|
4433
4360
|
}, [onMenuItemsChanged]);
|
|
4434
|
-
const itemRender = React.useCallback((asideHeaderItem, _isActive, _itemIndex) => {
|
|
4435
|
-
return (React.createElement(AllPagesListItem, { item: asideHeaderItem, editMode: isEditMode, onToggle: () => toggleMenuItemsVisibility(asideHeaderItem), enableSorting: editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting }));
|
|
4436
|
-
}, [isEditMode, editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting, toggleMenuItemsVisibility]);
|
|
4437
|
-
const renderFirstLevelItem = React.useCallback((firstLevelItem, _isActive, itemIndex) => {
|
|
4438
|
-
if (!('items' in firstLevelItem) || firstLevelItem.items.length === 0) {
|
|
4439
|
-
return itemRender(firstLevelItem, _isActive, itemIndex);
|
|
4440
|
-
}
|
|
4441
|
-
const groupListItems = firstLevelItem.items;
|
|
4442
|
-
const sortableGroupItems = isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting)
|
|
4443
|
-
? groupListItems.filter(({ id }) => id !== ALL_PAGES_ID)
|
|
4444
|
-
: groupListItems;
|
|
4445
|
-
if (sortableGroupItems.length === 0) {
|
|
4446
|
-
return null;
|
|
4447
|
-
}
|
|
4448
|
-
const blockHeight = getGroupBlockHeight(sortableGroupItems);
|
|
4449
|
-
return (React.createElement(uikit.Flex, { className: b$m('groups-container'), direction: "column", style: { height: blockHeight } },
|
|
4450
|
-
firstLevelItem.title && (React.createElement(AllPagesGroupHeader, { id: firstLevelItem.id, icon: firstLevelItem.icon, title: firstLevelItem.title, hidden: Boolean(firstLevelItem.hidden), isDisabled: firstLevelItem.isDisabled, onToggleHidden: toggleGroupVisibility, editMode: isEditMode })),
|
|
4451
|
-
React.createElement(uikit.List, { itemClassName: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting)
|
|
4452
|
-
? b$m('item', { editMode: true })
|
|
4453
|
-
: undefined, itemHeight: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting) ? ITEM_HEIGHT : undefined, onSortEnd: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting)
|
|
4454
|
-
? onSecondLevelSortEnd(itemIndex)
|
|
4455
|
-
: undefined, sortable: isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting), virtualized: false, filterable: false, items: sortableGroupItems, onItemClick: onItemClick, renderItem: itemRender })));
|
|
4456
|
-
}, [
|
|
4457
|
-
isEditMode,
|
|
4458
|
-
editMenuProps,
|
|
4459
|
-
toggleGroupVisibility,
|
|
4460
|
-
onSecondLevelSortEnd,
|
|
4461
|
-
onItemClick,
|
|
4462
|
-
itemRender,
|
|
4463
|
-
]);
|
|
4464
4361
|
const data = items.filter((item) => item.id !== ALL_PAGES_ID && item.type !== 'action');
|
|
4465
4362
|
return (React.createElement(uikit.Flex, { className: b$m(null, className), gap: "5", direction: "column" },
|
|
4466
4363
|
React.createElement(uikit.Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
|
|
4467
4364
|
React.createElement(uikit.Text, { variant: "subheader-2" }, isEditMode ? i18n$4('all-panel.title.editing') : i18n$4('all-panel.title.main')),
|
|
4468
4365
|
React.createElement(uikit.Tooltip, { content: i18n$4('all-panel.title.editing') },
|
|
4469
4366
|
React.createElement(uikit.Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React.createElement(uikit.Icon, { data: icons.Gear })))),
|
|
4470
|
-
React.createElement(
|
|
4471
|
-
React.createElement(uikit.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 })),
|
|
4367
|
+
React.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 }),
|
|
4472
4368
|
isEditMode && (React.createElement(uikit.Button, { onClick: onResetToDefaultClick }, i18n$4('all-panel.resetToDefault')))));
|
|
4473
4369
|
};
|
|
4474
4370
|
|
|
@@ -4575,11 +4471,11 @@ const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
|
|
|
4575
4471
|
const { compact } = useAsideHeaderContext();
|
|
4576
4472
|
const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
|
|
4577
4473
|
const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;
|
|
4578
|
-
return (React.createElement("div", { className: b$
|
|
4579
|
-
React.createElement("div", { className: b$
|
|
4580
|
-
React.createElement("div", { className: b$
|
|
4474
|
+
return (React.createElement("div", { className: b$u('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa },
|
|
4475
|
+
React.createElement("div", { className: b$u('aside-content', { 'with-decoration': headerDecoration }) },
|
|
4476
|
+
React.createElement("div", { className: b$u('header', { 'with-decoration': headerDecoration }) },
|
|
4581
4477
|
React.createElement("div", { style: { height: subheaderHeight } }),
|
|
4582
|
-
compact && headerDecoration ? (React.createElement(uikit.Icon, { data: SvgDividerCollapsed, className: b$
|
|
4478
|
+
compact && headerDecoration ? (React.createElement(uikit.Icon, { data: SvgDividerCollapsed, className: b$u('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT })) : null),
|
|
4583
4479
|
React.createElement("div", { style: { flex: 1 } }))));
|
|
4584
4480
|
};
|
|
4585
4481
|
|
|
@@ -5582,7 +5478,7 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
|
|
|
5582
5478
|
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}";
|
|
5583
5479
|
styleInject(css_248z$4);
|
|
5584
5480
|
|
|
5585
|
-
const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-
|
|
5481
|
+
const TopAlert = React.lazy(() => Promise.resolve().then(function () { return require('./index-Di96hvKc.js'); }).then((module) => ({ default: module.TopAlert })));
|
|
5586
5482
|
const b$4 = block('mobile-header');
|
|
5587
5483
|
const MobileHeader = React.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
|
|
5588
5484
|
const targetRef = useForwardRef(ref);
|
|
@@ -5908,4 +5804,4 @@ exports.styleInject = styleInject;
|
|
|
5908
5804
|
exports.useAsideHeaderContext = useAsideHeaderContext;
|
|
5909
5805
|
exports.useSettingsContext = useSettingsContext;
|
|
5910
5806
|
exports.useSettingsSelectionContext = useSettingsSelectionContext;
|
|
5911
|
-
//# sourceMappingURL=index-
|
|
5807
|
+
//# sourceMappingURL=index-Bw3wDNJr.js.map
|