@gravity-ui/navigation 1.8.4 → 2.0.0-beta.0

package/build/esm/PageLayoutAside.js

@@ -1,20 +1,175 @@
 import * as React from 'react';
-import React__default, { Component, createElement, useRef, useContext, useCallback, useMemo, useState, useEffect } from 'react';
-import { Popup, List, Icon, Button, Flex, Text, setRef } from '@gravity-ui/uikit';
-import { b as block } from './cn-589cd9e2.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-29a1bfdb.js';
+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 { Pin, PinFill, Ellipsis, Gear } from '@gravity-ui/icons';
+import { useAsideHeaderInnerContext, useAsideHeaderContext, AsideHeaderInnerContextProvider } from './AsideHeaderContext.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-b1604ff5.js';
-import { useAsideHeaderContext, useAsideHeaderInnerContext, AsideHeaderInnerContextProvider } from './AsideHeaderContext.js';
-import { b as b$5 } from './utils-6d5146c7.js';
-import { Ellipsis, Pin, PinFill, Gear } from '@gravity-ui/icons';
-import { r as registerKeyset } from './registerKeyset-35f1ea08.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-9eb6b3be.js';
+import { b as b$5 } from './utils-117463a5.js';
 import { h as headerDividerCollapsedIcon } from './divider-collapsed-6468fa36.js';
 import { Drawer, DrawerItem } from './Drawer.js';
 import './debounce-64cd2b4c.js';
 import '@bem-react/classname';
 import 'react-dom';
 
+var css_248z$4 = ".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(css_248z$4);
+
+const b$4 = block('all-pages-list-item');
+const AllPagesListItem = (props) => {
+    const { item, editMode, onToggle } = props;
+    const onPinButtonClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onToggle();
+    }, [onToggle]);
+    const onItemClick = (e) => {
+        if (editMode) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    return (React__default.createElement("div", { className: b$4(), onClick: onItemClick },
+        item.icon ? (React__default.createElement(Icon, { className: b$4('icon'), data: item.icon, size: item.iconSize })) : null,
+        React__default.createElement("span", { className: b$4('text') }, item.title),
+        editMode && (React__default.createElement(Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
+            React__default.createElement(Button.Icon, null, item.hidden ? React__default.createElement(Pin, null) : React__default.createElement(PinFill, null))))));
+};
+
+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.main": "All pages"
+};
+
+var ru$1 = {
+	"menu-item.all-pages.title": "Все страницы",
+	"all-panel.menu.category.allOther": "Остальное",
+	"all-panel.resetToDefault": "Сбросить по умолчанию",
+	"all-panel.title.editing": "Редактирование",
+	"all-panel.title.main": "Все страницы"
+};
+
+const COMPONENT$1 = 'AllPagesPanel';
+var i18n$1 = addComponentKeysets({ en: en$1, ru: ru$1 }, `${NAMESPACE}${COMPONENT$1}`);
+
+const ALL_PAGES_ID = 'all-pages';
+function getAllPagesMenuItem() {
+    return {
+        id: ALL_PAGES_ID,
+        title: i18n$1('menu-item.all-pages.title'),
+        tooltipText: i18n$1('menu-item.all-pages.title'),
+        icon: Ellipsis,
+    };
+}
+
+const useGroupedMenuItems = (items) => {
+    const allPagesMenuItems = useMemo(() => {
+        const filteredItems = items.filter((item) => item.type !== 'divider' && item.id !== ALL_PAGES_ID);
+        filteredItems.sort((a, b) => {
+            if (a.type === 'action') {
+                return 1;
+            }
+            if (b.type === 'action') {
+                return -1;
+            }
+            return 0;
+        });
+        const groupedItems = filteredItems.reduce((acc, item) => {
+            const category = item.category || i18n$1('all-panel.menu.category.allOther');
+            if (!acc[category]) {
+                acc[category] = [];
+            }
+            acc[category].push(item);
+            return acc;
+        }, {});
+        return groupedItems;
+    }, [items]);
+    return allPagesMenuItems;
+};
+
+var css_248z$3 = ".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}";
+styleInject(css_248z$3);
+
+const b$3 = block('all-pages-panel');
+const AllPagesPanel = (props) => {
+    const { startEditIcon, onEditModeChanged, className } = props;
+    const { menuItems, onMenuItemsChanged } = useAsideHeaderInnerContext();
+    const menuItemsRef = useRef(menuItems);
+    menuItemsRef.current = menuItems;
+    const [isEditMode, setIsEditMode] = useState(false);
+    const toggleEditMode = useCallback(() => {
+        setIsEditMode((prev) => !prev);
+    }, []);
+    const groupedItems = useGroupedMenuItems(menuItems);
+    useEffect(() => {
+        onEditModeChanged === null || onEditModeChanged === void 0 ? void 0 : onEditModeChanged(isEditMode);
+    }, [isEditMode, onEditModeChanged]);
+    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 === void 0 ? void 0 : _a.call(item, item, false);
+    }, []);
+    const togglePageVisibility = useCallback((item) => {
+        if (!onMenuItemsChanged) {
+            return;
+        }
+        const changedItem = Object.assign(Object.assign({}, item), { hidden: !item.hidden });
+        const originItems = menuItemsRef.current.filter((menuItem) => menuItem.id !== ALL_PAGES_ID);
+        onMenuItemsChanged(originItems.map((menuItem) => {
+            if (menuItem.id !== changedItem.id) {
+                return menuItem;
+            }
+            return changedItem;
+        }));
+    }, [onMenuItemsChanged]);
+    const itemRender = useCallback((item, _isActive, _itemIndex) => (React__default.createElement(AllPagesListItem, { item: item, editMode: isEditMode, onToggle: () => togglePageVisibility(item) })), [isEditMode, togglePageVisibility]);
+    const onResetToDefaultClick = useCallback(() => {
+        if (!onMenuItemsChanged) {
+            return;
+        }
+        const originItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
+        onMenuItemsChanged(originItems.map((item) => (Object.assign(Object.assign({}, item), { hidden: false }))));
+    }, [onMenuItemsChanged]);
+    return (React__default.createElement(Flex, { className: b$3(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$3('content'), gap: "5", direction: "column" }, Object.keys(groupedItems).map((category) => {
+            return (React__default.createElement(Flex, { key: category, direction: "column", gap: "3" },
+                React__default.createElement(Text, { className: b$3('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')))));
+};
+
+const useVisibleMenuItems = () => {
+    const { menuItems, allPagesIsAvailable } = useAsideHeaderInnerContext();
+    return useMemo(() => {
+        if (!allPagesIsAvailable) {
+            return menuItems;
+        }
+        let lastVisibleIndex = 0;
+        return menuItems.filter((item, index, items) => {
+            if (item.hidden) {
+                return false;
+            }
+            if (index > 0 &&
+                item.type === 'divider' &&
+                (items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)) {
+                return false;
+            }
+            lastVisibleIndex = index;
+            return true;
+        });
+    }, [allPagesIsAvailable, menuItems]);
+};
+
 /**
  * Detect Element Resize.
  * https://github.com/sdecima/javascript-detect-element-resize
@@ -252,16 +407,15 @@ class AutoSizer extends Component {
         onResize
       } = this.props;
       if (this._parentNode) {
-        var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
         // Guard against AutoSizer component being removed from the DOM immediately after being added.
         // This can result in invalid style values which can result in NaN values if we don't handle them.
         // See issue #150 for more context.
 
         const style = window.getComputedStyle(this._parentNode) || {};
-        const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
-        const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
-        const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
-        const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
+        const paddingLeft = parseFloat(style.paddingLeft || "0");
+        const paddingRight = parseFloat(style.paddingRight || "0");
+        const paddingTop = parseFloat(style.paddingTop || "0");
+        const paddingBottom = parseFloat(style.paddingBottom || "0");
         const rect = this._parentNode.getBoundingClientRect();
         const scaledHeight = rect.height - paddingTop - paddingBottom;
         const scaledWidth = rect.width - paddingLeft - paddingRight;
@@ -412,10 +566,10 @@ class MultipleTooltipProvider extends React__default.PureComponent {
     }
 }
 
-var css_248z$4 = ".g-root_theme_dark .gn-multiple-tooltip,.g-root_theme_dark-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:#424147;--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,#313036,rgba(49,48,54,.3));--multiple-tooltip-backdrop-filter:blur(16px)}.g-root_theme_light .gn-multiple-tooltip,.g-root_theme_light-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:#7a7a7a;--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,#fff,hsla(0,0%,100%,.3));--multiple-tooltip-backdrop-filter:blur(12px)}.gn-multiple-tooltip.gn-multiple-tooltip{background-color:transparent;box-shadow:none}.gn-multiple-tooltip:before{background:var(--multiple-tooltip-backdrop-background);box-shadow:none;content:\"\";filter:var(--multiple-tooltip-backdrop-filter);height:100%;position:absolute;width:100%;z-index:-1}.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}";
-styleInject(css_248z$4);
+var css_248z$2 = ".g-root_theme_dark .gn-multiple-tooltip,.g-root_theme_dark-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(--g-color-private-white-100-solid);--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(--g-color-private-white-150-solid)}.g-root_theme_light .gn-multiple-tooltip,.g-root_theme_light-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(--g-color-private-black-550-solid);--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.gn-multiple-tooltip{background-color:transparent;box-shadow:none}.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}.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}";
+styleInject(css_248z$2);
 
-const b$4 = block('multiple-tooltip');
+const b$2 = block('multiple-tooltip');
 const POPUP_OFFSET = [-32, 4];
 const POPUP_MODIFIERS = [
     {
@@ -426,26 +580,26 @@ const POPUP_MODIFIERS = [
 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, contentClassName: b$4(null), modifiers: POPUP_MODIFIERS, disableLayer: true },
-        React__default.createElement("div", { className: b$4('items-container') }, items
+    return (React__default.createElement(Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$2(null), modifiers: POPUP_MODIFIERS, disableLayer: true },
+        React__default.createElement("div", { className: b$2('items-container') }, items
             .filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
             (id !== COLLAPSE_ITEM_ID && type !== 'action'))
             .map((item, idx) => {
             switch (item.type) {
                 case 'divider':
-                    return (React__default.createElement("div", { className: b$4('item', { divider: true }), key: idx }, item.title));
+                    return (React__default.createElement("div", { className: b$2('item', { divider: true }), key: idx }, item.title));
                 default:
-                    return (React__default.createElement("div", { className: b$4('item', {
+                    return (React__default.createElement("div", { className: b$2('item', {
                             active: item === activeItem,
                         }), key: idx }, item.title));
             }
         }))));
 };
 
-var css_248z$3 = ".gn-composite-bar{flex:1 0 auto;min-height:40px;width:100%}.gn-composite-bar .gn-composite-bar__root-menu-item[class]{background-color:transparent}";
-styleInject(css_248z$3);
+var css_248z$1 = ".gn-composite-bar{flex:1 0 auto;min-height:40px;width:100%}.gn-composite-bar .gn-composite-bar__root-menu-item[class]{background-color:transparent}";
+styleInject(css_248z$1);
 
-const b$3 = block('composite-bar');
+const b$1 = block('composite-bar');
 const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
     const ref = useRef(null);
     const tooltipRef = useRef(null);
@@ -550,7 +704,7 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
     ]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
-            React__default.createElement(List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex(items) : undefined, itemHeight: getItemHeight, itemsHeight: getItemsHeight, itemClassName: b$3('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
+            React__default.createElement(List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex(items) : undefined, itemHeight: getItemHeight, itemsHeight: getItemsHeight, itemClassName: b$1('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
                     const itemExtraProps = isMenuItem(item) ? { item } : item;
                     const enableTooltip = isMenuItem(item)
                         ? !multipleTooltip
@@ -567,7 +721,7 @@ const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip
     if (type === 'menu') {
         const minHeight = getItemsMinHeight(items);
         const collapseItem = getMoreButtonItem(menuMoreTitle);
-        node = (React__default.createElement("div", { className: b$3({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, (size) => {
+        node = (React__default.createElement("div", { className: b$1({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.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 } = getAutosizeListItems(items, height, collapseItem);
@@ -576,167 +730,12 @@ const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip
         }))));
     }
     else {
-        node = (React__default.createElement("div", { className: b$3({ subheader: true }) },
+        node = (React__default.createElement("div", { className: b$1({ subheader: true }) },
             React__default.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
     }
     return React__default.createElement(MultipleTooltipProvider, null, node);
 };
 
-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.main": "All pages"
-};
-
-var ru$1 = {
-	"menu-item.all-pages.title": "Все страницы",
-	"all-panel.menu.category.allOther": "Остальное",
-	"all-panel.resetToDefault": "Сбросить по умолчанию",
-	"all-panel.title.editing": "Редактирование",
-	"all-panel.title.main": "Все страницы"
-};
-
-const COMPONENT$1 = 'AllPagesPanel';
-var i18n$1 = registerKeyset({ en: en$1, ru: ru$1 }, COMPONENT$1);
-
-const ALL_PAGES_ID = 'all-pages';
-function getAllPagesMenuItem() {
-    return {
-        id: ALL_PAGES_ID,
-        title: i18n$1('menu-item.all-pages.title'),
-        tooltipText: i18n$1('menu-item.all-pages.title'),
-        icon: Ellipsis,
-    };
-}
-
-const useGroupedMenuItems = (items) => {
-    const allPagesMenuItems = useMemo(() => {
-        const filteredItems = items.filter((item) => item.type !== 'divider' && item.id !== ALL_PAGES_ID);
-        filteredItems.sort((a, b) => {
-            if (a.type === 'action') {
-                return 1;
-            }
-            if (b.type === 'action') {
-                return -1;
-            }
-            return 0;
-        });
-        const groupedItems = filteredItems.reduce((acc, item) => {
-            const category = item.category || i18n$1('all-panel.menu.category.allOther');
-            if (!acc[category]) {
-                acc[category] = [];
-            }
-            acc[category].push(item);
-            return acc;
-        }, {});
-        return groupedItems;
-    }, [items]);
-    return allPagesMenuItems;
-};
-
-var css_248z$2 = ".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(css_248z$2);
-
-const b$2 = block('all-pages-list-item');
-const AllPagesListItem = (props) => {
-    const { item, editMode, onToggle } = props;
-    const onPinButtonClick = useCallback((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        onToggle();
-    }, [onToggle]);
-    const onItemClick = (e) => {
-        if (editMode) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
-    return (React__default.createElement("div", { className: b$2(), onClick: onItemClick },
-        item.icon ? (React__default.createElement(Icon, { className: b$2('icon'), data: item.icon, size: item.iconSize })) : null,
-        React__default.createElement("span", { className: b$2('text') }, item.title),
-        editMode && (React__default.createElement(Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
-            React__default.createElement(Button.Icon, null, item.hidden ? React__default.createElement(Pin, null) : React__default.createElement(PinFill, null))))));
-};
-
-var css_248z$1 = ".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}";
-styleInject(css_248z$1);
-
-const b$1 = block('all-pages-panel');
-const AllPagesPanel = (props) => {
-    const { startEditIcon, onEditModeChanged, className } = props;
-    const { menuItems, onMenuItemsChanged } = useAsideHeaderInnerContext();
-    const menuItemsRef = useRef(menuItems);
-    menuItemsRef.current = menuItems;
-    const [isEditMode, setIsEditMode] = useState(false);
-    const toggleEditMode = useCallback(() => {
-        setIsEditMode((prev) => !prev);
-    }, []);
-    const groupedItems = useGroupedMenuItems(menuItems);
-    useEffect(() => {
-        onEditModeChanged === null || onEditModeChanged === void 0 ? void 0 : onEditModeChanged(isEditMode);
-    }, [isEditMode, onEditModeChanged]);
-    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 === void 0 ? void 0 : _a.call(item, item, false);
-    }, []);
-    const togglePageVisibility = useCallback((item) => {
-        if (!onMenuItemsChanged) {
-            return;
-        }
-        const changedItem = Object.assign(Object.assign({}, item), { hidden: !item.hidden });
-        const originItems = menuItemsRef.current.filter((menuItem) => menuItem.id !== ALL_PAGES_ID);
-        onMenuItemsChanged(originItems.map((menuItem) => {
-            if (menuItem.id !== changedItem.id) {
-                return menuItem;
-            }
-            return changedItem;
-        }));
-    }, [onMenuItemsChanged]);
-    const itemRender = useCallback((item, _isActive, _itemIndex) => (React__default.createElement(AllPagesListItem, { item: item, editMode: isEditMode, onToggle: () => togglePageVisibility(item) })), [isEditMode, togglePageVisibility]);
-    const onResetToDefaultClick = useCallback(() => {
-        if (!onMenuItemsChanged) {
-            return;
-        }
-        const originItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
-        onMenuItemsChanged(originItems.map((item) => (Object.assign(Object.assign({}, item), { hidden: false }))));
-    }, [onMenuItemsChanged]);
-    return (React__default.createElement(Flex, { className: b$1(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$1('content'), gap: "5", direction: "column" }, Object.keys(groupedItems).map((category) => {
-            return (React__default.createElement(Flex, { key: category, direction: "column", gap: "3" },
-                React__default.createElement(Text, { className: b$1('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')))));
-};
-
-const useVisibleMenuItems = () => {
-    const { menuItems, allPagesIsAvailable } = useAsideHeaderInnerContext();
-    return useMemo(() => {
-        if (!allPagesIsAvailable) {
-            return menuItems;
-        }
-        let lastVisibleIndex = 0;
-        return menuItems.filter((item, index, items) => {
-            if (item.hidden) {
-                return false;
-            }
-            if (index > 0 &&
-                item.type === 'divider' &&
-                (items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)) {
-                return false;
-            }
-            lastVisibleIndex = index;
-            return true;
-        });
-    }, [allPagesIsAvailable, menuItems]);
-};
-
 var button_collapse$1 = "Collapse";
 var button_expand$1 = "Expand";
 var label_more$1 = "More";
@@ -756,9 +755,44 @@ var ru = {
 };
 
 const COMPONENT = 'AsideHeader';
-var i18n = registerKeyset({ en, ru }, COMPONENT);
+var i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}${COMPONENT}`);
+
+function fakeDisplayName(newDisplayName, Component) {
+    const Fake = (props) => React__default.createElement(Component, Object.assign({}, props));
+    Fake.displayName = newDisplayName;
+    return Fake;
+}
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgControlMenuButton = function SvgControlMenuButton(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 8,
+    height: 8,
+    viewBox: "0 0 8 8",
+    fill: "currentColor",
+    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.45Z"
+  })));
+};
+var controlMenuButtonIcon = SvgControlMenuButton;
+
+// TODO: remove temporary fix for expand button
+const NotIcon = fakeDisplayName('NotIcon', Icon);
+const CollapseButton = () => {
+    const { onChangeCompact, compact, expandTitle, collapseTitle } = useAsideHeaderInnerContext();
+    const onCollapseButtonClick = useCallback(() => {
+        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$5('collapse-button', { compact }), view: "flat", onClick: onCollapseButtonClick, title: buttonTitle },
+        React__default.createElement(NotIcon, { data: controlMenuButtonIcon, className: b$5('collapse-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;width:var(--gn-aside-header-min-width)}.gn-logo__logo-btn-place .yc-button:before{background-color:transparent}.gn-logo__btn-logo.yc-button_view_flat.yc-button_size_l{--yc-button-height:var(--gn-aside-header-item-icon-background-size)}.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}";
+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;width:var(--gn-aside-header-min-width)}.gn-logo__logo-btn-place .g-button:before{background-color:transparent}.gn-logo__btn-logo.g-button_view_flat.g-button_size_l{--g-button-height:var(\n      --gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size)\n  )}.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');
@@ -801,41 +835,6 @@ const Header = () => {
         React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$5('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT })));
 };
 
-function fakeDisplayName(newDisplayName, Component) {
-    const Fake = (props) => React__default.createElement(Component, Object.assign({}, props));
-    Fake.displayName = newDisplayName;
-    return Fake;
-}
-
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SvgControlMenuButton = function SvgControlMenuButton(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 8,
-    height: 8,
-    viewBox: "0 0 8 8",
-    fill: "currentColor",
-    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.45Z"
-  })));
-};
-var controlMenuButtonIcon = SvgControlMenuButton;
-
-// TODO: remove temporary fix for expand button
-const NotIcon = fakeDisplayName('NotIcon', Icon);
-const CollapseButton = () => {
-    const { onChangeCompact, compact, expandTitle, collapseTitle } = useAsideHeaderInnerContext();
-    const onCollapseButtonClick = useCallback(() => {
-        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$5('collapse-button', { compact }), view: "flat", onClick: onCollapseButtonClick, title: buttonTitle },
-        React__default.createElement(NotIcon, { data: controlMenuButtonIcon, className: b$5('collapse-icon'), width: "16", height: "10" })));
-};
-
 const Panels = () => {
     const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
     return panelItems ? (React__default.createElement(Drawer, { className: b$5('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
@@ -863,6 +862,7 @@ const FirstPanel = React__default.forwardRef((_props, ref) => {
                 React__default.createElement(CollapseButton, null))),
         React__default.createElement(Panels, null)));
 });
+FirstPanel.displayName = 'FirstPanel';
 
 var InnerPanels;
 (function (InnerPanels) {
@@ -926,6 +926,7 @@ const PageLayoutAside = React__default.forwardRef((props, ref) => {
     return (React__default.createElement(AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
         React__default.createElement(FirstPanel, { ref: ref })));
 });
+PageLayoutAside.displayName = 'PageLayoutAside';
 
 export { PageLayoutAside };
 //# sourceMappingURL=PageLayoutAside.js.map