@gravity-ui/navigation 2.26.0 → 2.28.0-beta.0

package/build/cjs/{PageLayoutAside-946fbebf.js → PageLayoutAside-BmldF8Ej.js}

@@ -4,20 +4,17 @@ var React = require('react');
 var uikit = require('@gravity-ui/uikit');
 var icons = require('@gravity-ui/icons');
 var AsideHeaderContext = require('./AsideHeaderContext.js');
-var cn = require('./cn-9933321a.js');
-var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var cn = require('./cn-DSlPZbcs.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
 var i18n$2 = require('@gravity-ui/uikit/i18n');
-var constants = require('./constants-d81c3867.js');
-var Item = require('./Item-7c1b54f5.js');
-var utils = require('./utils-db3e03c2.js');
-var dividerCollapsed = require('./divider-collapsed-b743122e.js');
+var constants = require('./constants-B0DLAQY9.js');
+var Item = require('./Item-C8T3eOCP.js');
+var utils = require('./utils-BrRoop7o.js');
+var dividerCollapsed = require('./divider-collapsed-BLSp99lJ.js');
 var Drawer = require('./Drawer.js');
-require('./debounce-8772fd80.js');
+require('./debounce-RFF04eVR.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -30,12 +27,11 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 var css_248z$5 = ".gn-all-pages-list-item{align-items:center;column-gap:var(--g-spacing-4);display:flex;height:40px;padding:0 var(--g-spacing-6);width:100%}.gn-all-pages-list-item__text{flex:1}.gn-all-pages-list-item__icon{color:var(--g-color-text-misc)}";
 styleInject_es.styleInject(css_248z$5);
@@ -54,11 +50,11 @@ const AllPagesListItem = (props) => {
             e.preventDefault();
         }
     };
-    return (React__default["default"].createElement("div", { className: b$5(), onClick: onItemClick },
-        item.icon ? (React__default["default"].createElement(uikit.Icon, { className: b$5('icon'), data: item.icon, size: item.iconSize })) : null,
-        React__default["default"].createElement("span", { className: b$5('text') }, item.title),
-        editMode && !item.preventUserRemoving && (React__default["default"].createElement(uikit.Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
-            React__default["default"].createElement(uikit.Button.Icon, null, item.hidden ? React__default["default"].createElement(icons.Pin, null) : React__default["default"].createElement(icons.PinFill, null))))));
+    return (React.createElement("div", { className: b$5(), onClick: onItemClick },
+        item.icon ? (React.createElement(uikit.Icon, { className: b$5('icon'), data: item.icon, size: item.iconSize })) : null,
+        React.createElement("span", { className: b$5('text') }, item.title),
+        editMode && !item.preventUserRemoving && (React.createElement(uikit.Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
+            React.createElement(uikit.Button.Icon, null, item.hidden ? React.createElement(icons.Pin, null) : React.createElement(icons.PinFill, null))))));
 };
 
 var en$1 = {
@@ -156,7 +152,7 @@ const AllPagesPanel = (props) => {
             return changedItem;
         }));
     }, [onMenuItemsChanged, editMenuProps]);
-    const itemRender = React.useCallback((item, _isActive, _itemIndex) => (React__default["default"].createElement(AllPagesListItem, { item: item, editMode: isEditMode, onToggle: () => togglePageVisibility(item) })), [isEditMode, togglePageVisibility]);
+    const itemRender = React.useCallback((item, _isActive, _itemIndex) => (React.createElement(AllPagesListItem, { item: item, editMode: isEditMode, onToggle: () => togglePageVisibility(item) })), [isEditMode, togglePageVisibility]);
     const onResetToDefaultClick = React.useCallback(() => {
         var _a;
         if (!onMenuItemsChanged) {
@@ -166,16 +162,16 @@ const AllPagesPanel = (props) => {
         const originItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
         onMenuItemsChanged(originItems.map((item) => (Object.assign(Object.assign({}, item), { hidden: false }))));
     }, [onMenuItemsChanged, editMenuProps]);
-    return (React__default["default"].createElement(uikit.Flex, { className: b$4(null, className), gap: "5", direction: "column" },
-        React__default["default"].createElement(uikit.Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
-            React__default["default"].createElement(uikit.Text, { variant: "subheader-2" }, isEditMode ? i18n$1('all-panel.title.editing') : i18n$1('all-panel.title.main')),
-            React__default["default"].createElement(uikit.Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default["default"].createElement(uikit.Icon, { data: icons.Gear }))),
-        React__default["default"].createElement(uikit.Flex, { className: b$4('content'), gap: "5", direction: "column" }, Object.keys(groupedItems).map((category) => {
-            return (React__default["default"].createElement(uikit.Flex, { key: category, direction: "column", gap: "3" },
-                React__default["default"].createElement(uikit.Text, { className: b$4('category'), variant: "body-1", color: "secondary" }, category),
-                React__default["default"].createElement(uikit.List, { virtualized: false, filterable: false, items: groupedItems[category], onItemClick: onItemClick, renderItem: itemRender })));
+    return (React.createElement(uikit.Flex, { className: b$4(null, className), gap: "5", direction: "column" },
+        React.createElement(uikit.Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
+            React.createElement(uikit.Text, { variant: "subheader-2" }, isEditMode ? i18n$1('all-panel.title.editing') : i18n$1('all-panel.title.main')),
+            React.createElement(uikit.Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React.createElement(uikit.Icon, { data: icons.Gear }))),
+        React.createElement(uikit.Flex, { className: b$4('content'), gap: "5", direction: "column" }, Object.keys(groupedItems).map((category) => {
+            return (React.createElement(uikit.Flex, { key: category, direction: "column", gap: "3" },
+                React.createElement(uikit.Text, { className: b$4('category'), variant: "body-1", color: "secondary" }, category),
+                React.createElement(uikit.List, { virtualized: false, filterable: false, items: groupedItems[category], onItemClick: onItemClick, renderItem: itemRender })));
         })),
-        isEditMode && (React__default["default"].createElement(uikit.Button, { onClick: onResetToDefaultClick }, i18n$1('all-panel.resetToDefault')))));
+        isEditMode && (React.createElement(uikit.Button, { onClick: onResetToDefaultClick }, i18n$1('all-panel.resetToDefault')))));
 };
 
 const useVisibleMenuItems = () => {
@@ -586,8 +582,8 @@ const multipleTooltipContextDefaults = {
     lastClickedItemIndex: undefined,
     setValue: () => { },
 };
-const MultipleTooltipContext = React__default["default"].createContext(multipleTooltipContextDefaults);
-class MultipleTooltipProvider extends React__default["default"].PureComponent {
+const MultipleTooltipContext = React.createContext(multipleTooltipContextDefaults);
+class MultipleTooltipProvider extends React.PureComponent {
     constructor() {
         super(...arguments);
         this.state = Object.assign({}, multipleTooltipContextDefaults);
@@ -597,7 +593,7 @@ class MultipleTooltipProvider extends React__default["default"].PureComponent {
     }
     render() {
         const { children } = this.props;
-        return (React__default["default"].createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
+        return (React.createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
     }
 }
 
@@ -613,18 +609,18 @@ const POPUP_MODIFIERS = [
     },
 ];
 const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
-    const { activeIndex, hideCollapseItemTooltip } = React__default["default"].useContext(MultipleTooltipContext);
+    const { activeIndex, hideCollapseItemTooltip } = React.useContext(MultipleTooltipContext);
     const activeItem = activeIndex === undefined ? null : items[activeIndex];
-    return (React__default["default"].createElement(uikit.Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$3(null), modifiers: POPUP_MODIFIERS, disableLayer: true },
-        React__default["default"].createElement("div", { className: b$3('items-container') }, items
+    return (React.createElement(uikit.Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$3(null), modifiers: POPUP_MODIFIERS, disableLayer: true },
+        React.createElement("div", { className: b$3('items-container') }, items
             .filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
             (id !== Item.COLLAPSE_ITEM_ID && type !== 'action'))
             .map((item, idx) => {
             switch (item.type) {
                 case 'divider':
-                    return (React__default["default"].createElement("div", { className: b$3('item', { divider: true }), key: idx }, item.title));
+                    return (React.createElement("div", { className: b$3('item', { divider: true }), key: idx }, item.title));
                 default:
-                    return (React__default["default"].createElement("div", { className: b$3('item', {
+                    return (React.createElement("div", { className: b$3('item', {
                             active: item === activeItem,
                         }), key: idx }, item.title));
             }
@@ -635,12 +631,12 @@ var css_248z$2 = ".gn-composite-bar{flex:1 0 auto;min-height:40px;width:100%}.gn
 styleInject_es.styleInject(css_248z$2);
 
 const b$2 = cn.block('composite-bar');
-const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
+const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, }) => {
     const ref = React.useRef(null);
     const tooltipRef = React.useRef(null);
     const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext);
     const { compact } = AsideHeaderContext.useAsideHeaderContext();
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         function handleBlurWindow() {
             if (multipleTooltip && multipleTooltipActive) {
                 setMultipleTooltipContextValue({ active: false });
@@ -737,18 +733,18 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
         onItemClick,
         setMultipleTooltipContextValue,
     ]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
-            React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? Item.getSelectedItemIndex(items) : undefined, itemHeight: Item.getItemHeight, itemsHeight: Item.getItemsHeight, itemClassName: b$2('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
+            React.createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? Item.getSelectedItemIndex(items) : undefined, itemHeight: Item.getItemHeight, itemsHeight: Item.getItemsHeight, itemClassName: b$2('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
                     const itemExtraProps = Item.isMenuItem(item) ? { item } : item;
                     const enableTooltip = Item.isMenuItem(item)
                         ? !multipleTooltip
                         : item.enableTooltip;
-                    return (React__default["default"].createElement(Item.Item, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
+                    return (React.createElement(Item.Item, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), onCollapseItemClick: onMoreClick, collapseItems: collapseItems })));
                 } })),
-        type === 'menu' && multipleTooltip && (React__default["default"].createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
+        type === 'menu' && multipleTooltip && (React.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
 };
-const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip = false, }) => {
+const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, }) => {
     if (items.length === 0) {
         return null;
     }
@@ -756,19 +752,19 @@ const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip
     if (type === 'menu') {
         const minHeight = Item.getItemsMinHeight(items);
         const collapseItem = Item.getMoreButtonItem(menuMoreTitle);
-        node = (React__default["default"].createElement("div", { className: b$2({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, (size) => {
+        node = (React.createElement("div", { className: b$2({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React.createElement(AutoSizer, null, (size) => {
             const width = Number.isNaN(size.width) ? 0 : size.width;
             const height = Number.isNaN(size.height) ? 0 : size.height;
             const { listItems, collapseItems } = Item.getAutosizeListItems(items, height, collapseItem);
-            return (React__default["default"].createElement("div", { style: { width, height } },
-                React__default["default"].createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+            return (React.createElement("div", { style: { width, height } },
+                React.createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
         }))));
     }
     else {
-        node = (React__default["default"].createElement("div", { className: b$2({ subheader: true }) },
-            React__default["default"].createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
+        node = (React.createElement("div", { className: b$2({ subheader: true }) },
+            React.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
     }
-    return React__default["default"].createElement(MultipleTooltipProvider, null, node);
+    return React.createElement(MultipleTooltipProvider, null, node);
 };
 
 var button_collapse$1 = "Collapse";
@@ -796,16 +792,15 @@ var _path;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgControlMenuButton = function SvgControlMenuButton(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8,
-    viewBox: "0 0 8 8",
     fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg"
+    viewBox: "0 0 8 8"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m.72 7.64 6.39-3.2a.5.5 0 0 0 0-.89L.72.36A.5.5 0 0 0 0 .81v6.38c0 .37.4.61.72.45Z"
+    d: "m.72 7.64 6.39-3.2a.5.5 0 0 0 0-.89L.72.36A.5.5 0 0 0 0 .81v6.38c0 .37.4.61.72.45"
   })));
 };
-var controlMenuButtonIcon = SvgControlMenuButton;
 
 var css_248z$1 = ".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)}";
 styleInject_es.styleInject(css_248z$1);
@@ -819,8 +814,8 @@ const CollapseButton = ({ className }) => {
     const buttonTitle = compact
         ? expandTitle || i18n('button_expand')
         : collapseTitle || i18n('button_collapse');
-    return (React__default["default"].createElement("button", { className: b$1({ compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
-        React__default["default"].createElement(uikit.Icon, { data: controlMenuButtonIcon, className: b$1('icon'), width: "16", height: "10" })));
+    return (React.createElement("button", { className: b$1({ compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
+        React.createElement(uikit.Icon, { data: SvgControlMenuButton, className: b$1('icon'), width: "16", height: "10" })));
 };
 
 var css_248z = ".gn-logo{height:40px}.gn-logo,.gn-logo__logo-btn-place{align-items:center;display:flex;flex-shrink:0}.gn-logo__logo-btn-place{cursor:pointer;justify-content:center}.gn-logo__logo-btn-place .g-button:before{background-color:transparent}.gn-logo__logo{cursor:pointer;font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-2-line-height);vertical-align:middle}.gn-logo__logo-link,.gn-logo__logo-link:active,.gn-logo__logo-link:focus,.gn-logo__logo-link:hover,.gn-logo__logo-link:visited{color:inherit;outline:none;text-decoration:none}.g-root .gn-logo__btn-logo.button2_theme_flat.button2_hovered_yes:before{background-color:transparent}";
@@ -831,13 +826,13 @@ const Logo = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15
     const hasWrapper = typeof wrapper === 'function';
     let buttonIcon;
     if (iconSrc) {
-        buttonIcon = (React__default["default"].createElement(uikit.Button.Icon, { className: iconClassName },
-            React__default["default"].createElement("img", { alt: "logo icon", src: iconSrc, width: iconSize, height: iconSize })));
+        buttonIcon = (React.createElement(uikit.Button.Icon, { className: iconClassName },
+            React.createElement("img", { alt: "logo icon", src: iconSrc, width: iconSize, height: iconSize })));
     }
     else if (icon) {
-        buttonIcon = React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: iconClassName });
+        buttonIcon = React.createElement(uikit.Icon, { data: icon, size: iconSize, className: iconClassName });
     }
-    const button = (React__default["default"].createElement(uikit.Button, { view: "flat", size: "l", className: b('btn-logo', buttonClassName), component: hasWrapper ? 'span' : undefined, onClick: onClick, target: target, rel: target === '_self' ? undefined : 'noreferrer', href: href, extraProps: {
+    const button = (React.createElement(uikit.Button, { view: "flat", size: "l", className: b('btn-logo', buttonClassName), component: hasWrapper ? 'span' : undefined, onClick: onClick, target: target, rel: target === '_self' ? undefined : 'noreferrer', href: href, extraProps: {
             'aria-label': ariaLabel,
             'aria-labelledby': ariaLabelledby,
         } }, buttonIcon));
@@ -846,12 +841,12 @@ const Logo = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15
         logo = text();
     }
     else {
-        logo = (React__default["default"].createElement("div", { className: b('logo'), style: { fontSize: textSize } }, text));
+        logo = (React.createElement("div", { className: b('logo'), style: { fontSize: textSize } }, text));
     }
-    return (React__default["default"].createElement("div", { className: b(null, className) },
-        React__default["default"].createElement("div", { className: b('logo-btn-place', buttonWrapperClassName) }, hasWrapper ? wrapper(button, Boolean(compact)) : button),
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("div", { className: b('logo-btn-place', buttonWrapperClassName) }, hasWrapper ? wrapper(button, Boolean(compact)) : button),
         !compact &&
-            (hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, Boolean(compact)))) : (React__default["default"].createElement("a", { href: href !== null && href !== void 0 ? href : '/', target: target, rel: target === '_self' ? undefined : 'noreferrer', className: b('logo-link'), onClick: onClick }, logo)))));
+            (hasWrapper ? (React.createElement("div", { onClick: onClick }, wrapper(logo, Boolean(compact)))) : (React.createElement("a", { href: href !== null && href !== void 0 ? href : '/', target: target, rel: target === '_self' ? undefined : 'noreferrer', className: b('logo-link'), onClick: onClick }, logo)))));
 };
 
 const DEFAULT_SUBHEADER_ITEMS = [];
@@ -863,38 +858,38 @@ const Header = () => {
         onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
         (_a = logo === null || logo === void 0 ? void 0 : logo.onClick) === null || _a === void 0 ? void 0 : _a.call(logo, event);
     }, [onClosePanel, logo]);
-    return (React__default["default"].createElement("div", { className: utils.b('header', { ['with-decoration']: headerDecoration }) },
-        logo && (React__default["default"].createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonWrapperClassName: utils.b('logo-button-wrapper'), buttonClassName: utils.b('logo-button') }))),
-        React__default["default"].createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
-        React__default["default"].createElement(uikit.Icon, { data: dividerCollapsed.headerDividerCollapsedIcon, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT })));
+    return (React.createElement("div", { className: utils.b('header', { ['with-decoration']: headerDecoration }) },
+        logo && (React.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonWrapperClassName: utils.b('logo-button-wrapper'), buttonClassName: utils.b('logo-button') }))),
+        React.createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
+        React.createElement(uikit.Icon, { data: dividerCollapsed.SvgDividerCollapsed, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT })));
 };
 
 const Panels = () => {
     const { panelItems, onClosePanel, size } = AsideHeaderContext.useAsideHeaderInnerContext();
-    return panelItems ? (React__default["default"].createElement(Drawer.Drawer, { className: utils.b('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(Drawer.DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
+    return panelItems ? (React.createElement(Drawer.Drawer, { className: utils.b('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React.createElement(Drawer.DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
 };
 
-const FirstPanel = React__default["default"].forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, qa, } = AsideHeaderContext.useAsideHeaderInnerContext();
+const FirstPanel = React.forwardRef((_props, ref) => {
+    const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, qa, } = AsideHeaderContext.useAsideHeaderInnerContext();
     const visibleMenuItems = useVisibleMenuItems();
     const asideRef = React.useRef(null);
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         uikit.setRef(ref, asideRef.current);
     }, [ref]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: utils.b('aside', className), style: { width: size }, "data-qa": qa },
-            React__default["default"].createElement("div", { className: utils.b('aside-popup-anchor'), ref: asideRef }),
-            React__default["default"].createElement("div", { className: utils.b('aside-content', { ['with-decoration']: headerDecoration }) },
-                customBackground && (React__default["default"].createElement("div", { className: utils.b('aside-custom-background', customBackgroundClassName) }, customBackground)),
-                React__default["default"].createElement(Header, null),
-                (visibleMenuItems === null || visibleMenuItems === void 0 ? void 0 : visibleMenuItems.length) ? (React__default["default"].createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, multipleTooltip: multipleTooltip })) : (React__default["default"].createElement("div", { className: utils.b('menu-items') })),
-                React__default["default"].createElement("div", { className: utils.b('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: utils.b('aside', className), style: { width: size }, "data-qa": qa },
+            React.createElement("div", { className: utils.b('aside-popup-anchor'), ref: asideRef }),
+            React.createElement("div", { className: utils.b('aside-content', { ['with-decoration']: headerDecoration }) },
+                customBackground && (React.createElement("div", { className: utils.b('aside-custom-background', customBackgroundClassName) }, customBackground)),
+                React.createElement(Header, null),
+                (visibleMenuItems === null || visibleMenuItems === void 0 ? void 0 : visibleMenuItems.length) ? (React.createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, multipleTooltip: multipleTooltip })) : (React.createElement("div", { className: utils.b('menu-items') })),
+                React.createElement("div", { className: utils.b('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
                     size,
                     compact: Boolean(compact),
                     asideRef,
                 })),
-                !hideCollapseButton && React__default["default"].createElement(CollapseButton, null))),
-        React__default["default"].createElement(Panels, null)));
+                !hideCollapseButton && React.createElement(CollapseButton, null))),
+        React.createElement(Panels, null)));
 });
 FirstPanel.displayName = 'FirstPanel';
 
@@ -907,7 +902,7 @@ const EMPTY_MENU_ITEMS = [];
 const useAsideHeaderInnerContextValue = (props) => {
     const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged } = props;
     const [innerVisiblePanel, setInnerVisiblePanel] = React.useState();
-    const ALL_PAGES_MENU_ITEM = React__default["default"].useMemo(() => {
+    const ALL_PAGES_MENU_ITEM = React.useMemo(() => {
         return getAllPagesMenuItem();
     }, []);
     const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0);
@@ -946,7 +941,7 @@ const useAsideHeaderInnerContextValue = (props) => {
             ...(panelItems || []),
             {
                 id: InnerPanels.AllPages,
-                content: React__default["default"].createElement(AllPagesPanel, null),
+                content: React.createElement(AllPagesPanel, null),
                 visible: innerVisiblePanel === InnerPanels.AllPages,
             },
         ];
@@ -955,14 +950,14 @@ const useAsideHeaderInnerContextValue = (props) => {
         onItemClick });
 };
 
-const PageLayoutAside = React__default["default"].forwardRef((props, ref) => {
+const PageLayoutAside = React.forwardRef((props, ref) => {
     const { size, compact } = AsideHeaderContext.useAsideHeaderContext();
     const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign({ size, compact }, props));
-    return (React__default["default"].createElement(AsideHeaderContext.AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
-        React__default["default"].createElement(FirstPanel, { ref: ref })));
+    return (React.createElement(AsideHeaderContext.AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
+        React.createElement(FirstPanel, { ref: ref })));
 });
 PageLayoutAside.displayName = 'PageLayoutAside';
 
 exports.Logo = Logo;
 exports.PageLayoutAside = PageLayoutAside;
-//# sourceMappingURL=PageLayoutAside-946fbebf.js.map
+//# sourceMappingURL=PageLayoutAside-BmldF8Ej.js.map