@gravity-ui/navigation 3.0.0-beta.0 → 3.0.0-beta.1

package/build/esm/{PageLayoutAside-DQVfkCeA.js → PageLayoutAside-5d010e96.js}

@@ -1,23 +1,24 @@
 import * as React from 'react';
 import React__default, { useCallback, useMemo, useRef, useState, useEffect, Component, createElement, useContext } from 'react';
-import { Icon, Button, Flex, Text, List, Popup, setRef } from '@gravity-ui/uikit';
+import { Icon, Button, Flex, Text, Tooltip, List, Popup, setRef } from '@gravity-ui/uikit';
 import { Pin, PinFill, Ellipsis, Gear } from '@gravity-ui/icons';
 import { useAsideHeaderInnerContext, useAsideHeaderContext, AsideHeaderInnerContextProvider } from './AsideHeaderContext.js';
-import { b as block, N as NAMESPACE } from './cn-CgiqTV3v.js';
-import { s as styleInject } from './style-inject.es-Bff-fD1R.js';
+import { b as block, N as NAMESPACE } from './cn-ffe5e9f5.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { A as ASIDE_HEADER_COMPACT_WIDTH, H as HEADER_DIVIDER_HEIGHT } from './constants-ChYDZ5F2.js';
-import { C as COLLAPSE_ITEM_ID, g as getItemsMinHeight, a as getAutosizeListItems, b as getSelectedItemIndex, c as getItemHeight, d as getItemsHeight, i as isMenuItem, I as Item, e as getMoreButtonItem } from './Item-BnjbUb88.js';
-import { b as b$6 } from './utils-D0s6YtvW.js';
-import { S as SvgDividerCollapsed } from './divider-collapsed-BgKmR8h9.js';
+import { a as ASIDE_HEADER_COMPACT_WIDTH, H as HEADER_DIVIDER_HEIGHT } from './constants-b1604ff5.js';
+import { C as COLLAPSE_ITEM_ID, g as getItemsMinHeight, a as getAutosizeListItems, b as getSelectedItemIndex, c as getItemHeight, d as getItemsHeight, i as isMenuItem, I as Item, e as getMoreButtonItem } from './Item-55899ec8.js';
+import { b as b$6 } from './utils-117463a5.js';
+import { h as headerDividerCollapsedIcon } from './divider-collapsed-a0ef54c3.js';
 import { Drawer, DrawerItem } from './Drawer.js';
+import './debounce-64cd2b4c.js';
 
-var css_248z$5 = ".gn-all-pages-list-item{align-items:center;background:none;border:none;color:inherit;column-gap:var(--g-spacing-4);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)}";
+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)}.gn-all-pages-list-item_edit-mode{padding:0 0 0 var(--g-spacing-4)}";
 styleInject(css_248z$5);
 
 const b$5 = block('all-pages-list-item');
 const AllPagesListItem = (props) => {
-    const { item, editMode, onToggle } = props;
+    const { item, editMode, onToggle, enableSorting, onDragStart, onDragEnd } = props;
     const onPinButtonClick = useCallback((e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -29,8 +30,21 @@ const AllPagesListItem = (props) => {
             e.preventDefault();
         }
     };
-    const [Tag, tagProps] = item.link ? ['a', { href: item.link }] : ['button', {}];
-    return (React__default.createElement(Tag, Object.assign({}, tagProps, { className: b$5(), onClick: onItemClick }),
+    const onItemDragStart = (e) => {
+        if (editMode && onDragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            onDragStart();
+        }
+    };
+    const onItemDragEnd = (e) => {
+        if (editMode && onDragEnd) {
+            e.stopPropagation();
+            e.preventDefault();
+            onDragEnd();
+        }
+    };
+    return (React__default.createElement("div", { key: item.id, className: b$5({ 'edit-mode': editMode && enableSorting }), onClick: onItemClick, draggable: editMode && enableSorting, onMouseDown: onItemDragStart, onMouseUp: onItemDragEnd },
         item.icon ? (React__default.createElement(Icon, { className: b$5('icon'), data: item.icon, size: item.iconSize })) : null,
         React__default.createElement("span", { className: b$5('text') }, item.title),
         editMode && !item.preventUserRemoving && (React__default.createElement(Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
@@ -41,7 +55,7 @@ var en$1 = {
 	"menu-item.all-pages.title": "All pages",
 	"all-panel.menu.category.allOther": "All other",
 	"all-panel.resetToDefault": "Reset to default",
-	"all-panel.title.editing": "Editing",
+	"all-panel.title.editing": "Configuring the menu bar",
 	"all-panel.title.main": "All pages"
 };
 
@@ -49,7 +63,7 @@ var ru$1 = {
 	"menu-item.all-pages.title": "Все страницы",
 	"all-panel.menu.category.allOther": "Остальное",
 	"all-panel.resetToDefault": "Сбросить по умолчанию",
-	"all-panel.title.editing": "Редактирование",
+	"all-panel.title.editing": "Настройка панели меню",
 	"all-panel.title.main": "Все страницы"
 };
 
@@ -91,31 +105,32 @@ const useGroupedMenuItems = (items) => {
     return allPagesMenuItems;
 };
 
-var css_248z$4 = ".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;margin:0 calc(var(--g-spacing-6)*-1);overflow:auto}.gn-all-pages-panel__category{padding:0 var(--g-spacing-6)}.gn-all-pages-panel__discoverable-feature-wrapper{display:flex}";
+var css_248z$4 = ".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;margin:0 calc(var(--g-spacing-6)*-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__item_editMode{padding:0 var(--g-spacing-6)}.gn-all-pages-panel__drag-placeholder{text-wrap:nowrap;padding-left:88px;padding-right:68px;visibility:hidden}";
 styleInject(css_248z$4);
 
 const b$4 = block('all-pages-panel');
 const AllPagesPanel = (props) => {
     const { startEditIcon, onEditModeChanged, className } = props;
-    const { menuItems, onMenuItemsChanged, editMenuProps } = useAsideHeaderInnerContext();
+    const { menuItems, defaultMenuItems, onMenuItemsChanged, editMenuProps } = useAsideHeaderInnerContext();
     const menuItemsRef = useRef(menuItems);
     menuItemsRef.current = menuItems;
     const [isEditMode, setIsEditMode] = useState(false);
+    const [draggingItemTitle, setDraggingItemTitle] = useState(null);
     const toggleEditMode = useCallback(() => {
         setIsEditMode((prev) => !prev);
     }, []);
     const groupedItems = useGroupedMenuItems(menuItems);
     useEffect(() => {
         var _a;
-        onEditModeChanged === null || onEditModeChanged === undefined ? undefined : onEditModeChanged(isEditMode);
+        onEditModeChanged === null || onEditModeChanged === void 0 ? void 0 : onEditModeChanged(isEditMode);
         if (isEditMode) {
-            (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onOpenEditMode) === null || _a === undefined ? undefined : _a.call(editMenuProps);
+            (_a = editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.onOpenEditMode) === null || _a === void 0 ? void 0 : _a.call(editMenuProps);
         }
     }, [isEditMode, onEditModeChanged, editMenuProps]);
     const onItemClick = useCallback((item) => {
         var _a;
         //@ts-ignore TODO fix when @gravity-ui/uikit/List will provide event arg on item click
-        (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, false);
+        (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, false);
     }, []);
     const togglePageVisibility = useCallback((item) => {
         var _a;
@@ -124,7 +139,7 @@ const AllPagesPanel = (props) => {
         }
         const changedItem = Object.assign(Object.assign({}, item), { hidden: !item.hidden });
         const originItems = menuItemsRef.current.filter((menuItem) => menuItem.id !== ALL_PAGES_ID);
-        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onToggleMenuItem) === null || _a === undefined ? undefined : _a.call(editMenuProps, changedItem);
+        (_a = editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.onToggleMenuItem) === null || _a === void 0 ? void 0 : _a.call(editMenuProps, changedItem);
         onMenuItemsChanged(originItems.map((menuItem) => {
             if (menuItem.id !== changedItem.id) {
                 return menuItem;
@@ -132,25 +147,50 @@ const AllPagesPanel = (props) => {
             return changedItem;
         }));
     }, [onMenuItemsChanged, editMenuProps]);
-    const itemRender = useCallback((item, _isActive, _itemIndex) => (React__default.createElement(AllPagesListItem, { item: item, editMode: isEditMode, onToggle: () => togglePageVisibility(item) })), [isEditMode, togglePageVisibility]);
+    const onDragEnd = useCallback(() => {
+        setDraggingItemTitle(null);
+    }, [setDraggingItemTitle]);
+    const itemRender = useCallback((item, _isActive, _itemIndex) => {
+        const onDragStart = () => {
+            setDraggingItemTitle(item.title);
+        };
+        return (React__default.createElement(AllPagesListItem, { item: item, onDragStart: onDragStart, onDragEnd: onDragEnd, editMode: isEditMode, onToggle: () => togglePageVisibility(item), enableSorting: editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.enableSorting }));
+    }, [isEditMode, togglePageVisibility, onDragEnd, setDraggingItemTitle, editMenuProps]);
     const onResetToDefaultClick = useCallback(() => {
         var _a;
         if (!onMenuItemsChanged) {
             return;
         }
-        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onResetSettingsToDefault) === null || _a === undefined ? undefined : _a.call(editMenuProps);
-        const originItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
-        onMenuItemsChanged(originItems.map((item) => (Object.assign(Object.assign({}, item), { hidden: false }))));
+        (_a = editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.onResetSettingsToDefault) === null || _a === void 0 ? void 0 : _a.call(editMenuProps);
+        const originItems = defaultMenuItems === null || defaultMenuItems === void 0 ? void 0 : defaultMenuItems.filter((item) => item.id !== ALL_PAGES_ID);
+        if (originItems) {
+            onMenuItemsChanged(originItems);
+        }
+    }, [onMenuItemsChanged, editMenuProps, defaultMenuItems]);
+    const changeItemsOrder = useCallback(({ oldIndex, newIndex }) => {
+        var _a;
+        const newItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
+        const element = newItems.splice(oldIndex, 1)[0];
+        newItems.splice(newIndex, 0, element);
+        onMenuItemsChanged === null || onMenuItemsChanged === void 0 ? void 0 : onMenuItemsChanged(newItems.filter((item) => item.type !== 'divider'));
+        setDraggingItemTitle(null);
+        (_a = editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.onChangeItemsOrder) === null || _a === void 0 ? void 0 : _a.call(editMenuProps, element, oldIndex, newIndex);
     }, [onMenuItemsChanged, editMenuProps]);
+    const sortableItems = useMemo(() => {
+        return menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID && !item.afterMoreButton && item.type !== 'divider');
+    }, [menuItems]);
     return (React__default.createElement(Flex, { className: b$4(null, className), gap: "5", direction: "column" },
         React__default.createElement(Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
             React__default.createElement(Text, { variant: "subheader-2" }, isEditMode ? i18n$1('all-panel.title.editing') : i18n$1('all-panel.title.main')),
-            React__default.createElement(Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default.createElement(Icon, { data: Gear }))),
-        React__default.createElement(Flex, { className: b$4('content'), gap: "5", direction: "column" }, Object.keys(groupedItems).map((category) => {
+            React__default.createElement(Tooltip, { content: i18n$1('all-panel.title.editing') },
+                React__default.createElement(Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default.createElement(Icon, { data: Gear })))),
+        React__default.createElement(Flex, { className: b$4('content'), gap: "5", direction: "column" }, isEditMode && (editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.enableSorting) ? (React__default.createElement("div", null,
+            React__default.createElement(List, { itemClassName: b$4('item', { editMode: true }), itemHeight: 40, onSortEnd: changeItemsOrder, sortable: true, virtualized: false, filterable: false, items: sortableItems, onItemClick: onItemClick, renderItem: itemRender }),
+            draggingItemTitle && (React__default.createElement("div", { className: b$4('drag-placeholder') }, draggingItemTitle)))) : (Object.keys(groupedItems).map((category) => {
             return (React__default.createElement(Flex, { key: category, direction: "column", gap: "3" },
                 React__default.createElement(Text, { className: b$4('category'), variant: "body-1", color: "secondary" }, category),
                 React__default.createElement(List, { virtualized: false, filterable: false, items: groupedItems[category], onItemClick: onItemClick, renderItem: itemRender })));
-        })),
+        }))),
         isEditMode && (React__default.createElement(Button, { onClick: onResetToDefaultClick }, i18n$1('all-panel.resetToDefault')))));
 };
 
@@ -581,12 +621,18 @@ var css_248z$3 = ".g-root_theme_dark .gn-multiple-tooltip,.g-root_theme_dark-hc
 styleInject(css_248z$3);
 
 const b$3 = block('multiple-tooltip');
-const POPUP_OFFSET = { mainAxis: -32, crossAxis: 4 };
+const POPUP_OFFSET = [-32, 4];
+const POPUP_MODIFIERS = [
+    {
+        name: 'preventOverflow',
+        enabled: false,
+    },
+];
 const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
     const { activeIndex, hideCollapseItemTooltip } = React__default.useContext(MultipleTooltipContext);
     const activeItem = activeIndex === undefined ? null : items[activeIndex];
-    return (React__default.createElement(Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET },
-        React__default.createElement("div", { className: b$3() }, items
+    return (React__default.createElement(Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$3(null), modifiers: POPUP_MODIFIERS, disableLayer: true },
+        React__default.createElement("div", { className: b$3('items-container') }, items
             .filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
             (id !== COLLAPSE_ITEM_ID && type !== 'action'))
             .map((item, idx) => {
@@ -628,7 +674,7 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
             document.hasFocus() &&
             activeIndex !== lastClickedItemIndex &&
             e.clientX <= ASIDE_HEADER_COMPACT_WIDTH) {
-            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
                 active: true,
             });
         }
@@ -642,7 +688,7 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
     ]);
     const onTooltipMouseLeave = useCallback(() => {
         if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
-            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
                 active: false,
                 lastClickedItemIndex: undefined,
             });
@@ -673,7 +719,7 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
     const onMouseLeave = useCallback(() => {
         var _a;
         if (compact && document.hasFocus()) {
-            (_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem(undefined);
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
             if (multipleTooltip &&
                 (activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
                 setMultipleTooltipContextValue({
@@ -699,7 +745,7 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
                 active: false,
             });
         }
-        onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, collapsed, event);
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
     }, [
         compact,
         lastClickedItemIndex,
@@ -766,15 +812,16 @@ 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.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8,
+    viewBox: "0 0 8 8",
     fill: "currentColor",
-    viewBox: "0 0 8 8"
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _path || (_path = /*#__PURE__*/React.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.45"
+    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"
   })));
 };
+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(css_248z$1);
@@ -783,29 +830,33 @@ const b$1 = block('collapse-button');
 const CollapseButton = ({ className }) => {
     const { onChangeCompact, compact, expandTitle, collapseTitle } = useAsideHeaderInnerContext();
     const onCollapseButtonClick = useCallback(() => {
-        onChangeCompact === null || onChangeCompact === undefined ? undefined : onChangeCompact(!compact);
+        onChangeCompact === null || onChangeCompact === void 0 ? void 0 : onChangeCompact(!compact);
     }, [compact, onChangeCompact]);
     const buttonTitle = compact
         ? expandTitle || i18n('button_expand')
         : collapseTitle || i18n('button_collapse');
     return (React__default.createElement("button", { className: b$1({ compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
-        React__default.createElement(Icon, { data: SvgControlMenuButton, className: b$1('icon'), width: "16", height: "10" })));
+        React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$1('icon'), width: "16", height: "10" })));
 };
 
-var css_248z = ".gn-logo{height:40px}.gn-logo,.gn-logo__btn-logo{align-items:center;display:flex}.gn-logo__btn-logo{flex-shrink:0;justify-content:center}.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-icon-place{align-items:center;display:flex;justify-content:center;width:36px}";
+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}";
 styleInject(css_248z);
 
 const b = block('logo');
-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, }) => {
+const Logo = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href, target = '_self', wrapper, onClick, compact, className, buttonWrapperClassName, buttonClassName, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }) => {
     const hasWrapper = typeof wrapper === 'function';
     let buttonIcon;
     if (iconSrc) {
-        buttonIcon = (React__default.createElement("span", { className: iconClassName },
+        buttonIcon = (React__default.createElement(Button.Icon, { className: iconClassName },
             React__default.createElement("img", { alt: "logo icon", src: iconSrc, width: iconSize, height: iconSize })));
     }
     else if (icon) {
         buttonIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: iconClassName });
     }
+    const button = (React__default.createElement(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));
     let logo;
     if (typeof text === 'function') {
         logo = text();
@@ -813,10 +864,10 @@ const Logo = ({ text, icon, iconSrc, iconClassName, iconPlaceClassName, iconSize
     else {
         logo = (React__default.createElement("div", { className: b('logo'), style: { fontSize: textSize } }, text));
     }
-    const button = (React__default.createElement("a", { className: b('btn-logo', buttonClassName), onClick: onClick, target: target, rel: target === '_self' ? undefined : 'noreferrer', href: href, "aria-label": href && ariaLabel, "aria-labelledby": href && ariaLabelledby },
-        React__default.createElement("span", { className: b('logo-icon-place', iconPlaceClassName) }, buttonIcon),
-        !compact && logo));
-    return (React__default.createElement("div", { className: b(null, className) }, hasWrapper ? wrapper(button, Boolean(compact)) : button));
+    return (React__default.createElement("div", { className: b(null, className) },
+        React__default.createElement("div", { className: b('logo-btn-place', buttonWrapperClassName) }, hasWrapper ? wrapper(button, Boolean(compact)) : button),
+        !compact &&
+            (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, Boolean(compact)))) : (React__default.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 = [];
@@ -825,13 +876,13 @@ const Header = () => {
     const { compact } = useAsideHeaderContext();
     const onLogoClick = useCallback((event) => {
         var _a;
-        onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
-        (_a = logo === null || logo === undefined ? undefined : logo.onClick) === null || _a === undefined ? undefined : _a.call(logo, event);
+        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.createElement("div", { className: b$6('header', { ['with-decoration']: headerDecoration }) },
-        logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: b$6('logo-button'), iconPlaceClassName: b$6('logo-icon-place') }))),
+        logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonWrapperClassName: b$6('logo-button-wrapper'), buttonClassName: b$6('logo-button') }))),
         React__default.createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
-        headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b$6('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
+        headerDecoration && (React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$6('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
 };
 
 const Panels = () => {
@@ -852,8 +903,8 @@ const FirstPanel = React__default.forwardRef((_props, ref) => {
             React__default.createElement("div", { className: b$6('aside-content', { ['with-decoration']: headerDecoration }) },
                 customBackground && (React__default.createElement("div", { className: b$6('aside-custom-background', customBackgroundClassName) }, customBackground)),
                 React__default.createElement(Header, null),
-                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$6('menu-items') })),
-                React__default.createElement("div", { className: b$6('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
+                (visibleMenuItems === null || visibleMenuItems === void 0 ? void 0 : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$6('menu-items') })),
+                React__default.createElement("div", { className: b$6('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
                     size,
                     compact: Boolean(compact),
                     asideRef,
@@ -875,27 +926,27 @@ const useAsideHeaderInnerContextValue = (props) => {
     const ALL_PAGES_MENU_ITEM = React__default.useMemo(() => {
         return getAllPagesMenuItem();
     }, []);
-    const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === undefined ? undefined : menuItems.length) > 0);
+    const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0);
     useEffect(() => {
         // If any user panel became visible we need to switch off all inner panels
-        if (panelItems === null || panelItems === undefined ? undefined : panelItems.some((x) => x.visible)) {
+        if (panelItems === null || panelItems === void 0 ? void 0 : panelItems.some((x) => x.visible)) {
             setInnerVisiblePanel(undefined);
         }
     }, [panelItems]);
     const innerOnClosePanel = useCallback(() => {
         setInnerVisiblePanel(undefined);
-        onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
+        onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
     }, [onClosePanel]);
     const onItemClick = useCallback((item, collapsed, event) => {
         var _a;
         if (item.id === ALL_PAGES_MENU_ITEM.id) {
-            onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
+            onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
             setInnerVisiblePanel((prev) => prev === InnerPanels.AllPages ? undefined : InnerPanels.AllPages);
         }
         else {
             innerOnClosePanel();
         }
-        (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, collapsed, event);
+        (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, collapsed, event);
     }, [innerOnClosePanel, ALL_PAGES_MENU_ITEM, onClosePanel]);
     const innerMenuItems = useMemo(() => allPagesIsAvailable
         ? [
@@ -929,4 +980,4 @@ const PageLayoutAside = React__default.forwardRef((props, ref) => {
 PageLayoutAside.displayName = 'PageLayoutAside';
 
 export { Logo as L, PageLayoutAside as P };
-//# sourceMappingURL=PageLayoutAside-DQVfkCeA.js.map
+//# sourceMappingURL=PageLayoutAside-5d010e96.js.map