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

package/build/cjs/PageLayoutAside.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
-var cn = require('./cn-1964a72a.js');
-var Item = require('./Item-702f50be.js');
+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 i18n$2 = require('@gravity-ui/uikit/i18n');
 var constants = require('./constants-d81c3867.js');
-var AsideHeaderContext = require('./AsideHeaderContext.js');
-var utils = require('./utils-a93dd754.js');
-var icons = require('@gravity-ui/icons');
-var registerKeyset = require('./registerKeyset-f4ce9ee7.js');
+var Item = require('./Item-d836a378.js');
+var utils = require('./utils-db3e03c2.js');
 var dividerCollapsed = require('./divider-collapsed-153868e7.js');
 var Drawer = require('./Drawer.js');
 require('./debounce-8772fd80.js');
@@ -21,26 +21,181 @@ require('react-dom');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+    }
+    n["default"] = e;
+    return Object.freeze(n);
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+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_es.styleInject(css_248z$4);
+
+const b$4 = cn.block('all-pages-list-item');
+const AllPagesListItem = (props) => {
+    const { item, editMode, onToggle } = props;
+    const onPinButtonClick = React.useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onToggle();
+    }, [onToggle]);
+    const onItemClick = (e) => {
+        if (editMode) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    return (React__default["default"].createElement("div", { className: b$4(), onClick: onItemClick },
+        item.icon ? (React__default["default"].createElement(uikit.Icon, { className: b$4('icon'), data: item.icon, size: item.iconSize })) : null,
+        React__default["default"].createElement("span", { className: b$4('text') }, item.title),
+        editMode && (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))))));
+};
+
+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 = i18n$2.addComponentKeysets({ en: en$1, ru: ru$1 }, `${cn.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: icons.Ellipsis,
+    };
+}
+
+const useGroupedMenuItems = (items) => {
+    const allPagesMenuItems = React.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_es.styleInject(css_248z$3);
+
+const b$3 = cn.block('all-pages-panel');
+const AllPagesPanel = (props) => {
+    const { startEditIcon, onEditModeChanged, className } = props;
+    const { menuItems, onMenuItemsChanged } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const menuItemsRef = React.useRef(menuItems);
+    menuItemsRef.current = menuItems;
+    const [isEditMode, setIsEditMode] = React.useState(false);
+    const toggleEditMode = React.useCallback(() => {
+        setIsEditMode((prev) => !prev);
+    }, []);
+    const groupedItems = useGroupedMenuItems(menuItems);
+    React.useEffect(() => {
+        onEditModeChanged === null || onEditModeChanged === void 0 ? void 0 : onEditModeChanged(isEditMode);
+    }, [isEditMode, onEditModeChanged]);
+    const onItemClick = React.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 = React.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 = React.useCallback((item, _isActive, _itemIndex) => (React__default["default"].createElement(AllPagesListItem, { item: item, editMode: isEditMode, onToggle: () => togglePageVisibility(item) })), [isEditMode, togglePageVisibility]);
+    const onResetToDefaultClick = React.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["default"].createElement(uikit.Flex, { className: b$3(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$3('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$3('category'), variant: "body-1", color: "secondary" }, category),
+                React__default["default"].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')))));
+};
+
+const useVisibleMenuItems = () => {
+    const { menuItems, allPagesIsAvailable } = AsideHeaderContext.useAsideHeaderInnerContext();
+    return React.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
@@ -278,16 +433,15 @@ class AutoSizer extends React.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;
@@ -438,10 +592,10 @@ class MultipleTooltipProvider extends React__default["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_es.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_es.styleInject(css_248z$2);
 
-const b$4 = cn.block('multiple-tooltip');
+const b$2 = cn.block('multiple-tooltip');
 const POPUP_OFFSET = [-32, 4];
 const POPUP_MODIFIERS = [
     {
@@ -452,26 +606,26 @@ const POPUP_MODIFIERS = [
 const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
     const { activeIndex, hideCollapseItemTooltip } = React__default["default"].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$4(null), modifiers: POPUP_MODIFIERS, disableLayer: true },
-        React__default["default"].createElement("div", { className: b$4('items-container') }, items
+    return (React__default["default"].createElement(uikit.Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$2(null), modifiers: POPUP_MODIFIERS, disableLayer: true },
+        React__default["default"].createElement("div", { className: b$2('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$4('item', { divider: true }), key: idx }, item.title));
+                    return (React__default["default"].createElement("div", { className: b$2('item', { divider: true }), key: idx }, item.title));
                 default:
-                    return (React__default["default"].createElement("div", { className: b$4('item', {
+                    return (React__default["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_es.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_es.styleInject(css_248z$1);
 
-const b$3 = cn.block('composite-bar');
+const b$1 = cn.block('composite-bar');
 const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
     const ref = React.useRef(null);
     const tooltipRef = React.useRef(null);
@@ -576,7 +730,7 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
     ]);
     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$3('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
+            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$1('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
@@ -593,7 +747,7 @@ 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$3({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, (size) => {
+        node = (React__default["default"].createElement("div", { className: b$1({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["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 } = Item.getAutosizeListItems(items, height, collapseItem);
@@ -602,167 +756,12 @@ const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip
         }))));
     }
     else {
-        node = (React__default["default"].createElement("div", { className: b$3({ subheader: true }) },
+        node = (React__default["default"].createElement("div", { className: b$1({ subheader: true }) },
             React__default["default"].createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
     }
     return React__default["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.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: icons.Ellipsis,
-    };
-}
-
-const useGroupedMenuItems = (items) => {
-    const allPagesMenuItems = React.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_es.styleInject(css_248z$2);
-
-const b$2 = cn.block('all-pages-list-item');
-const AllPagesListItem = (props) => {
-    const { item, editMode, onToggle } = props;
-    const onPinButtonClick = React.useCallback((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        onToggle();
-    }, [onToggle]);
-    const onItemClick = (e) => {
-        if (editMode) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
-    return (React__default["default"].createElement("div", { className: b$2(), onClick: onItemClick },
-        item.icon ? (React__default["default"].createElement(uikit.Icon, { className: b$2('icon'), data: item.icon, size: item.iconSize })) : null,
-        React__default["default"].createElement("span", { className: b$2('text') }, item.title),
-        editMode && (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))))));
-};
-
-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_es.styleInject(css_248z$1);
-
-const b$1 = cn.block('all-pages-panel');
-const AllPagesPanel = (props) => {
-    const { startEditIcon, onEditModeChanged, className } = props;
-    const { menuItems, onMenuItemsChanged } = AsideHeaderContext.useAsideHeaderInnerContext();
-    const menuItemsRef = React.useRef(menuItems);
-    menuItemsRef.current = menuItems;
-    const [isEditMode, setIsEditMode] = React.useState(false);
-    const toggleEditMode = React.useCallback(() => {
-        setIsEditMode((prev) => !prev);
-    }, []);
-    const groupedItems = useGroupedMenuItems(menuItems);
-    React.useEffect(() => {
-        onEditModeChanged === null || onEditModeChanged === void 0 ? void 0 : onEditModeChanged(isEditMode);
-    }, [isEditMode, onEditModeChanged]);
-    const onItemClick = React.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 = React.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 = React.useCallback((item, _isActive, _itemIndex) => (React__default["default"].createElement(AllPagesListItem, { item: item, editMode: isEditMode, onToggle: () => togglePageVisibility(item) })), [isEditMode, togglePageVisibility]);
-    const onResetToDefaultClick = React.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["default"].createElement(uikit.Flex, { className: b$1(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$1('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$1('category'), variant: "body-1", color: "secondary" }, category),
-                React__default["default"].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')))));
-};
-
-const useVisibleMenuItems = () => {
-    const { menuItems, allPagesIsAvailable } = AsideHeaderContext.useAsideHeaderInnerContext();
-    return React.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";
@@ -782,9 +781,44 @@ var ru = {
 };
 
 const COMPONENT = 'AsideHeader';
-var i18n = registerKeyset.registerKeyset({ en, ru }, COMPONENT);
+var i18n = i18n$2.addComponentKeysets({ en, ru }, `${cn.NAMESPACE}${COMPONENT}`);
 
-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}";
+function fakeDisplayName(newDisplayName, Component) {
+    const Fake = (props) => React__default["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__namespace.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__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"
+  })));
+};
+var controlMenuButtonIcon = SvgControlMenuButton;
+
+// TODO: remove temporary fix for expand button
+const NotIcon = fakeDisplayName('NotIcon', uikit.Icon);
+const CollapseButton = () => {
+    const { onChangeCompact, compact, expandTitle, collapseTitle } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const onCollapseButtonClick = React.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["default"].createElement(uikit.Button, { className: utils.b('collapse-button', { compact }), view: "flat", onClick: onCollapseButtonClick, title: buttonTitle },
+        React__default["default"].createElement(NotIcon, { data: controlMenuButtonIcon, className: utils.b('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 .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_es.styleInject(css_248z);
 
 const b = cn.block('logo');
@@ -827,41 +861,6 @@ const Header = () => {
         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 })));
 };
 
-function fakeDisplayName(newDisplayName, Component) {
-    const Fake = (props) => React__default["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__namespace.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__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"
-  })));
-};
-var controlMenuButtonIcon = SvgControlMenuButton;
-
-// TODO: remove temporary fix for expand button
-const NotIcon = fakeDisplayName('NotIcon', uikit.Icon);
-const CollapseButton = () => {
-    const { onChangeCompact, compact, expandTitle, collapseTitle } = AsideHeaderContext.useAsideHeaderInnerContext();
-    const onCollapseButtonClick = React.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["default"].createElement(uikit.Button, { className: utils.b('collapse-button', { compact }), view: "flat", onClick: onCollapseButtonClick, title: buttonTitle },
-        React__default["default"].createElement(NotIcon, { data: controlMenuButtonIcon, className: utils.b('collapse-icon'), width: "16", height: "10" })));
-};
-
 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;
@@ -889,6 +888,7 @@ const FirstPanel = React__default["default"].forwardRef((_props, ref) => {
                 React__default["default"].createElement(CollapseButton, null))),
         React__default["default"].createElement(Panels, null)));
 });
+FirstPanel.displayName = 'FirstPanel';
 
 var InnerPanels;
 (function (InnerPanels) {
@@ -952,6 +952,7 @@ const PageLayoutAside = React__default["default"].forwardRef((props, ref) => {
     return (React__default["default"].createElement(AsideHeaderContext.AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
         React__default["default"].createElement(FirstPanel, { ref: ref })));
 });
+PageLayoutAside.displayName = 'PageLayoutAside';
 
 exports.PageLayoutAside = PageLayoutAside;
 //# sourceMappingURL=PageLayoutAside.js.map