@gravity-ui/navigation 3.0.0-beta.2 → 3.0.0-beta.3

package/build/esm/PageLayoutAside-Bd3aJNrH.js

@@ -1,958 +0,0 @@
-import * as React from 'react';
-import React__default, { useCallback, useMemo, useRef, useState, useEffect, Component, createElement, useContext } from 'react';
-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 { 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-BU0M-jfC.js';
-import { b as b$6 } from './utils-D0s6YtvW.js';
-import { S as SvgDividerCollapsed } from './divider-collapsed-BgKmR8h9.js';
-import { Drawer, DrawerItem } from './Drawer.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)}.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 onPinButtonClick = useCallback((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        onToggle();
-    }, [onToggle]);
-    const onItemClick = (e) => {
-        if (editMode) {
-            e.stopPropagation();
-            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 }),
-        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' },
-            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": "Configuring the menu bar",
-	"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$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, 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);
-        if (isEditMode) {
-            (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onOpenEditMode) === null || _a === undefined ? undefined : _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);
-    }, []);
-    const togglePageVisibility = useCallback((item) => {
-        var _a;
-        if (!onMenuItemsChanged) {
-            return;
-        }
-        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);
-        onMenuItemsChanged(originItems.map((menuItem) => {
-            if (menuItem.id !== changedItem.id) {
-                return menuItem;
-            }
-            return changedItem;
-        }));
-    }, [onMenuItemsChanged, editMenuProps]);
-    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 === undefined ? undefined : 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 = defaultMenuItems === null || defaultMenuItems === undefined ? undefined : 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 === undefined ? undefined : onMenuItemsChanged(newItems.filter((item) => item.type !== 'divider'));
-        setDraggingItemTitle(null);
-        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onChangeItemsOrder) === null || _a === undefined ? undefined : _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(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 === undefined ? undefined : 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')))));
-};
-
-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
- * Sebastian Decima
- *
- * Forked from version 0.5.3; includes the following modifications:
- * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
- * 2) Defer initialization code via a top-level function wrapper (to support SSR).
- * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
- * 4) Add nonce for style element.
- * 5) Use 'export' statement over 'module.exports' assignment
- **/
-
-// Check `document` and `window` in case of server-side rendering
-let windowObject;
-if (typeof window !== "undefined") {
-  windowObject = window;
-
-  // eslint-disable-next-line no-restricted-globals
-} else if (typeof self !== "undefined") {
-  // eslint-disable-next-line no-restricted-globals
-  windowObject = self;
-} else {
-  windowObject = global;
-}
-let cancelFrame = null;
-let requestFrame = null;
-const TIMEOUT_DURATION = 20;
-const clearTimeoutFn = windowObject.clearTimeout;
-const setTimeoutFn = windowObject.setTimeout;
-const cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;
-const requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;
-if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
-  // For environments that don't support animation frame,
-  // fallback to a setTimeout based approach.
-  cancelFrame = clearTimeoutFn;
-  requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
-    return setTimeoutFn(callback, TIMEOUT_DURATION);
-  };
-} else {
-  // Counter intuitively, environments that support animation frames can be trickier.
-  // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
-  // In this case, we should fallback to a setTimeout() implementation.
-  cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
-    cancelAnimationFrameFn(animationFrameID);
-    clearTimeoutFn(timeoutID);
-  };
-  requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
-    const animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
-      clearTimeoutFn(timeoutID);
-      callback();
-    });
-    const timeoutID = setTimeoutFn(function timeoutCallback() {
-      cancelAnimationFrameFn(animationFrameID);
-      callback();
-    }, TIMEOUT_DURATION);
-    return [animationFrameID, timeoutID];
-  };
-}
-function createDetectElementResize(nonce) {
-  let animationKeyframes;
-  let animationName;
-  let animationStartEvent;
-  let animationStyle;
-  let checkTriggers;
-  let resetTriggers;
-  let scrollListener;
-  const attachEvent = typeof document !== "undefined" && document.attachEvent;
-  if (!attachEvent) {
-    resetTriggers = function (element) {
-      const triggers = element.__resizeTriggers__,
-        expand = triggers.firstElementChild,
-        contract = triggers.lastElementChild,
-        expandChild = expand.firstElementChild;
-      contract.scrollLeft = contract.scrollWidth;
-      contract.scrollTop = contract.scrollHeight;
-      expandChild.style.width = expand.offsetWidth + 1 + "px";
-      expandChild.style.height = expand.offsetHeight + 1 + "px";
-      expand.scrollLeft = expand.scrollWidth;
-      expand.scrollTop = expand.scrollHeight;
-    };
-    checkTriggers = function (element) {
-      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
-    };
-    scrollListener = function (e) {
-      // Don't measure (which forces) reflow for scrolls that happen inside of children!
-      if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) {
-        return;
-      }
-      const element = this;
-      resetTriggers(this);
-      if (this.__resizeRAF__) {
-        cancelFrame(this.__resizeRAF__);
-      }
-      this.__resizeRAF__ = requestFrame(function animationFrame() {
-        if (checkTriggers(element)) {
-          element.__resizeLast__.width = element.offsetWidth;
-          element.__resizeLast__.height = element.offsetHeight;
-          element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
-            fn.call(element, e);
-          });
-        }
-      });
-    };
-
-    /* Detect CSS Animations support to detect element display/re-attach */
-    let animation = false;
-    let keyframeprefix = "";
-    animationStartEvent = "animationstart";
-    const domPrefixes = "Webkit Moz O ms".split(" ");
-    let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
-    let pfx = "";
-    {
-      const elm = document.createElement("fakeelement");
-      if (elm.style.animationName !== undefined) {
-        animation = true;
-      }
-      if (animation === false) {
-        for (let i = 0; i < domPrefixes.length; i++) {
-          if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
-            pfx = domPrefixes[i];
-            keyframeprefix = "-" + pfx.toLowerCase() + "-";
-            animationStartEvent = startEvents[i];
-            animation = true;
-            break;
-          }
-        }
-      }
-    }
-    animationName = "resizeanim";
-    animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
-    animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
-  }
-  const createStyles = function (doc) {
-    if (!doc.getElementById("detectElementResize")) {
-      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-      const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
-        head = doc.head || doc.getElementsByTagName("head")[0],
-        style = doc.createElement("style");
-      style.id = "detectElementResize";
-      style.type = "text/css";
-      if (nonce != null) {
-        style.setAttribute("nonce", nonce);
-      }
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(doc.createTextNode(css));
-      }
-      head.appendChild(style);
-    }
-  };
-  const addResizeListener = function (element, fn) {
-    if (attachEvent) {
-      element.attachEvent("onresize", fn);
-    } else {
-      if (!element.__resizeTriggers__) {
-        const doc = element.ownerDocument;
-        const elementStyle = windowObject.getComputedStyle(element);
-        if (elementStyle && elementStyle.position === "static") {
-          element.style.position = "relative";
-        }
-        createStyles(doc);
-        element.__resizeLast__ = {};
-        element.__resizeListeners__ = [];
-        (element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
-        const expandTrigger = doc.createElement("div");
-        expandTrigger.className = "expand-trigger";
-        expandTrigger.appendChild(doc.createElement("div"));
-        const contractTrigger = doc.createElement("div");
-        contractTrigger.className = "contract-trigger";
-        element.__resizeTriggers__.appendChild(expandTrigger);
-        element.__resizeTriggers__.appendChild(contractTrigger);
-        element.appendChild(element.__resizeTriggers__);
-        resetTriggers(element);
-        element.addEventListener("scroll", scrollListener, true);
-
-        /* Listen for a css animation to detect element display/re-attach */
-        if (animationStartEvent) {
-          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
-            if (e.animationName === animationName) {
-              resetTriggers(element);
-            }
-          };
-          element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
-        }
-      }
-      element.__resizeListeners__.push(fn);
-    }
-  };
-  const removeResizeListener = function (element, fn) {
-    if (attachEvent) {
-      element.detachEvent("onresize", fn);
-    } else {
-      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-      if (!element.__resizeListeners__.length) {
-        element.removeEventListener("scroll", scrollListener, true);
-        if (element.__resizeTriggers__.__animationListener__) {
-          element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
-          element.__resizeTriggers__.__animationListener__ = null;
-        }
-        try {
-          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
-        } catch (e) {
-          // Preact compat; see developit/preact-compat/issues/228
-        }
-      }
-    }
-  };
-  return {
-    addResizeListener,
-    removeResizeListener
-  };
-}
-
-class AutoSizer extends Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      height: this.props.defaultHeight || 0,
-      scaledHeight: this.props.defaultHeight || 0,
-      scaledWidth: this.props.defaultWidth || 0,
-      width: this.props.defaultWidth || 0
-    };
-    this._autoSizer = null;
-    this._detectElementResize = null;
-    this._parentNode = null;
-    this._resizeObserver = null;
-    this._timeoutId = null;
-    this._onResize = () => {
-      this._timeoutId = null;
-      const {
-        disableHeight,
-        disableWidth,
-        onResize
-      } = this.props;
-      if (this._parentNode) {
-        // 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 || "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;
-        const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
-        const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
-        if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
-          this.setState({
-            height,
-            width,
-            scaledHeight,
-            scaledWidth
-          });
-          if (typeof onResize === "function") {
-            onResize({
-              height,
-              scaledHeight,
-              scaledWidth,
-              width
-            });
-          }
-        }
-      }
-    };
-    this._setRef = autoSizer => {
-      this._autoSizer = autoSizer;
-    };
-  }
-  componentDidMount() {
-    const {
-      nonce
-    } = this.props;
-    const parentNode = this._autoSizer ? this._autoSizer.parentNode : null;
-    if (parentNode != null && parentNode.ownerDocument && parentNode.ownerDocument.defaultView && parentNode instanceof parentNode.ownerDocument.defaultView.HTMLElement) {
-      // Delay access of parentNode until mount.
-      // This handles edge-cases where the component has already been unmounted before its ref has been set,
-      // As well as libraries like react-lite which have a slightly different lifecycle.
-      this._parentNode = parentNode;
-
-      // Use ResizeObserver from the same context where parentNode (which we will observe) was defined
-      // Using just global can result into onResize events not being emitted in cases with multiple realms
-      const ResizeObserverInstance = parentNode.ownerDocument.defaultView.ResizeObserver;
-      if (ResizeObserverInstance != null) {
-        this._resizeObserver = new ResizeObserverInstance(() => {
-          // Guard against "ResizeObserver loop limit exceeded" error;
-          // could be triggered if the state update causes the ResizeObserver handler to run long.
-          // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
-          this._timeoutId = setTimeout(this._onResize, 0);
-        });
-        this._resizeObserver.observe(parentNode);
-      } else {
-        // Defer requiring resize handler in order to support server-side rendering.
-        // See issue #41
-        this._detectElementResize = createDetectElementResize(nonce);
-        this._detectElementResize.addResizeListener(parentNode, this._onResize);
-      }
-      this._onResize();
-    }
-  }
-  componentWillUnmount() {
-    if (this._parentNode) {
-      if (this._detectElementResize) {
-        this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
-      }
-      if (this._timeoutId !== null) {
-        clearTimeout(this._timeoutId);
-      }
-      if (this._resizeObserver) {
-        this._resizeObserver.disconnect();
-      }
-    }
-  }
-  render() {
-    const {
-      children,
-      defaultHeight,
-      defaultWidth,
-      disableHeight = false,
-      disableWidth = false,
-      doNotBailOutOnEmptyChildren = false,
-      nonce,
-      onResize,
-      style = {},
-      tagName = "div",
-      ...rest
-    } = this.props;
-    const {
-      height,
-      scaledHeight,
-      scaledWidth,
-      width
-    } = this.state;
-
-    // Outer div should not force width/height since that may prevent containers from shrinking.
-    // Inner component should overflow and use calculated width/height.
-    // See issue #68 for more information.
-    const outerStyle = {
-      overflow: "visible"
-    };
-    const childParams = {};
-
-    // Avoid rendering children before the initial measurements have been collected.
-    // At best this would just be wasting cycles.
-    let bailoutOnChildren = false;
-    if (!disableHeight) {
-      if (height === 0) {
-        bailoutOnChildren = true;
-      }
-      outerStyle.height = 0;
-      childParams.height = height;
-      childParams.scaledHeight = scaledHeight;
-    }
-    if (!disableWidth) {
-      if (width === 0) {
-        bailoutOnChildren = true;
-      }
-      outerStyle.width = 0;
-      childParams.width = width;
-      childParams.scaledWidth = scaledWidth;
-    }
-    if (doNotBailOutOnEmptyChildren) {
-      bailoutOnChildren = false;
-    }
-    return createElement(tagName, {
-      ref: this._setRef,
-      style: {
-        ...outerStyle,
-        ...style
-      },
-      ...rest
-    }, !bailoutOnChildren && children(childParams));
-  }
-}
-
-const multipleTooltipContextDefaults = {
-    active: false,
-    activeIndex: undefined,
-    hideCollapseItemTooltip: false,
-    lastClickedItemIndex: undefined,
-    setValue: () => { },
-};
-const MultipleTooltipContext = React__default.createContext(multipleTooltipContextDefaults);
-class MultipleTooltipProvider extends React__default.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.state = Object.assign({}, multipleTooltipContextDefaults);
-        this.setValue = (value) => {
-            this.setState(Object.assign({}, value));
-        };
-    }
-    render() {
-        const { children } = this.props;
-        return (React__default.createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
-    }
-}
-
-var css_248z$3 = ".g-root_theme_dark .gn-multiple-tooltip,.g-root_theme_dark-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n      --g-color-base-float-medium,var(--g-color-private-white-100-solid)\n  );--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,var(--g-color-base-background) 50%,transparent);--multiple-tooltip-backdrop-filter:blur(16px)}.g-root_theme_dark-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n      --g-color-base-float-medium,var(--g-color-private-white-150-solid)\n  )}.g-root_theme_light .gn-multiple-tooltip,.g-root_theme_light-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n      --g-color-base-float-medium,var(--g-color-private-black-550-solid)\n  );--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,var(--g-color-base-background) 50%,transparent);--multiple-tooltip-backdrop-filter:blur(12px)}.gn-multiple-tooltip.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$3);
-
-const b$3 = block('multiple-tooltip');
-const POPUP_OFFSET = { mainAxis: -32, crossAxis: 4 };
-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
-            .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$3('item', { divider: true }), key: idx }, item.title));
-                default:
-                    return (React__default.createElement("div", { className: b$3('item', {
-                            active: item === activeItem,
-                        }), key: idx }, item.title));
-            }
-        }))));
-};
-
-var css_248z$2 = ".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$2);
-
-const b$2 = block('composite-bar');
-const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, }) => {
-    const ref = useRef(null);
-    const tooltipRef = useRef(null);
-    const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
-    const { compact } = useAsideHeaderContext();
-    React__default.useEffect(() => {
-        function handleBlurWindow() {
-            if (multipleTooltip && multipleTooltipActive) {
-                setMultipleTooltipContextValue({ active: false });
-            }
-        }
-        window.addEventListener('blur', handleBlurWindow);
-        return () => {
-            window.removeEventListener('blur', handleBlurWindow);
-        };
-    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
-    const onTooltipMouseEnter = useCallback((e) => {
-        if (multipleTooltip &&
-            compact &&
-            !multipleTooltipActive &&
-            document.hasFocus() &&
-            activeIndex !== lastClickedItemIndex &&
-            e.clientX <= ASIDE_HEADER_COMPACT_WIDTH) {
-            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
-                active: true,
-            });
-        }
-    }, [
-        multipleTooltip,
-        compact,
-        multipleTooltipActive,
-        activeIndex,
-        lastClickedItemIndex,
-        setMultipleTooltipContextValue,
-    ]);
-    const onTooltipMouseLeave = useCallback(() => {
-        if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
-            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === undefined ? undefined : setMultipleTooltipContextValue({
-                active: false,
-                lastClickedItemIndex: undefined,
-            });
-        }
-    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
-    const onMouseEnterByIndex = useCallback((itemIndex) => () => {
-        if (multipleTooltip && document.hasFocus()) {
-            let multipleTooltipActiveValue = multipleTooltipActive;
-            if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
-                multipleTooltipActiveValue = true;
-            }
-            if (activeIndex === itemIndex &&
-                multipleTooltipActive === multipleTooltipActiveValue) {
-                return;
-            }
-            setMultipleTooltipContextValue({
-                activeIndex: itemIndex,
-                active: multipleTooltipActiveValue,
-            });
-        }
-    }, [
-        multipleTooltip,
-        multipleTooltipActive,
-        lastClickedItemIndex,
-        activeIndex,
-        setMultipleTooltipContextValue,
-    ]);
-    const onMouseLeave = useCallback(() => {
-        var _a;
-        if (compact && document.hasFocus()) {
-            (_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem(undefined);
-            if (multipleTooltip &&
-                (activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
-                setMultipleTooltipContextValue({
-                    activeIndex: undefined,
-                    lastClickedItemIndex: undefined,
-                });
-            }
-        }
-    }, [
-        activeIndex,
-        compact,
-        lastClickedItemIndex,
-        multipleTooltip,
-        setMultipleTooltipContextValue,
-    ]);
-    const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed, event) => {
-        if (compact &&
-            multipleTooltip &&
-            itemIndex !== lastClickedItemIndex &&
-            item.id !== COLLAPSE_ITEM_ID) {
-            setMultipleTooltipContextValue({
-                lastClickedItemIndex: itemIndex,
-                active: false,
-            });
-        }
-        onItemClick === null || onItemClick === undefined ? undefined : onItemClick(item, collapsed, event);
-    }, [
-        compact,
-        lastClickedItemIndex,
-        multipleTooltip,
-        onItemClick,
-        setMultipleTooltipContextValue,
-    ]);
-    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$2('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
-                    const itemExtraProps = isMenuItem(item) ? { item } : item;
-                    const enableTooltip = isMenuItem(item)
-                        ? !multipleTooltip
-                        : item.enableTooltip;
-                    return (React__default.createElement(Item, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), onCollapseItemClick: onMoreClick, collapseItems: collapseItems })));
-                } })),
-        type === 'menu' && multipleTooltip && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
-};
-const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, }) => {
-    if (items.length === 0) {
-        return null;
-    }
-    let node;
-    if (type === 'menu') {
-        const minHeight = getItemsMinHeight(items);
-        const collapseItem = getMoreButtonItem(menuMoreTitle);
-        node = (React__default.createElement("div", { className: b$2({ 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);
-            return (React__default.createElement("div", { style: { width, height } },
-                React__default.createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
-        }))));
-    }
-    else {
-        node = (React__default.createElement("div", { className: b$2({ subheader: true }) },
-            React__default.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
-    }
-    return React__default.createElement(MultipleTooltipProvider, null, node);
-};
-
-var button_collapse$1 = "Collapse";
-var button_expand$1 = "Expand";
-var label_more$1 = "More";
-var en = {
-	button_collapse: button_collapse$1,
-	button_expand: button_expand$1,
-	label_more: label_more$1
-};
-
-var button_collapse = "Свернуть";
-var button_expand = "Развернуть";
-var label_more = "Ещё";
-var ru = {
-	button_collapse: button_collapse,
-	button_expand: button_expand,
-	label_more: label_more
-};
-
-const COMPONENT = 'AsideHeader';
-var i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}${COMPONENT}`);
-
-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,
-    fill: "currentColor",
-    viewBox: "0 0 8 8"
-  }, 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"
-  })));
-};
-
-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);
-
-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);
-    }, [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" })));
-};
-
-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}";
-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 hasWrapper = typeof wrapper === 'function';
-    let buttonIcon;
-    if (iconSrc) {
-        buttonIcon = (React__default.createElement("span", { 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 });
-    }
-    let logo;
-    if (typeof text === 'function') {
-        logo = text();
-    }
-    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));
-};
-
-const DEFAULT_SUBHEADER_ITEMS = [];
-const Header = () => {
-    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
-    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, 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') }))),
-        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 }))));
-};
-
-const Panels = () => {
-    const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
-    return panelItems ? (React__default.createElement(Drawer, { className: b$6('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
-};
-
-const FirstPanel = React__default.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, qa, } = useAsideHeaderInnerContext();
-    const visibleMenuItems = useVisibleMenuItems();
-    const asideRef = useRef(null);
-    React__default.useEffect(() => {
-        setRef(ref, asideRef.current);
-    }, [ref]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: b$6('aside', className), style: { width: size }, "data-qa": qa },
-            React__default.createElement("div", { className: b$6('aside-popup-anchor'), ref: asideRef }),
-            customBackground && (React__default.createElement("div", { className: b$6('aside-custom-background', customBackgroundClassName) }, customBackground)),
-            React__default.createElement("div", { className: b$6('aside-content', { ['with-decoration']: headerDecoration }) },
-                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({
-                    size,
-                    compact: Boolean(compact),
-                    asideRef,
-                })),
-                !hideCollapseButton && React__default.createElement(CollapseButton, null))),
-        React__default.createElement(Panels, null)));
-});
-FirstPanel.displayName = 'FirstPanel';
-
-var InnerPanels;
-(function (InnerPanels) {
-    InnerPanels["AllPages"] = "all-pages";
-})(InnerPanels || (InnerPanels = {}));
-
-const EMPTY_MENU_ITEMS = [];
-const useAsideHeaderInnerContextValue = (props) => {
-    const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged, onAllPagesClick } = props;
-    const [innerVisiblePanel, setInnerVisiblePanel] = useState();
-    const ALL_PAGES_MENU_ITEM = React__default.useMemo(() => {
-        return getAllPagesMenuItem();
-    }, []);
-    const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === undefined ? undefined : 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)) {
-            setInnerVisiblePanel(undefined);
-        }
-    }, [panelItems]);
-    const innerOnClosePanel = useCallback(() => {
-        setInnerVisiblePanel(undefined);
-        onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
-    }, [onClosePanel]);
-    const onItemClick = useCallback((item, collapsed, event) => {
-        var _a;
-        if (item.id === ALL_PAGES_MENU_ITEM.id) {
-            onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
-            setInnerVisiblePanel((prev) => prev === InnerPanels.AllPages ? undefined : InnerPanels.AllPages);
-        }
-        else {
-            innerOnClosePanel();
-        }
-        (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, collapsed, event);
-    }, [innerOnClosePanel, ALL_PAGES_MENU_ITEM, onClosePanel]);
-    const innerMenuItems = useMemo(() => allPagesIsAvailable
-        ? [
-            ...(menuItems || EMPTY_MENU_ITEMS),
-            Object.assign(Object.assign({}, ALL_PAGES_MENU_ITEM), { current: innerVisiblePanel === InnerPanels.AllPages, onItemClick: onAllPagesClick }),
-        ]
-        : menuItems || EMPTY_MENU_ITEMS, [allPagesIsAvailable, menuItems, innerVisiblePanel, ALL_PAGES_MENU_ITEM, onAllPagesClick]);
-    const innerPanelItems = useMemo(() => {
-        if (!allPagesIsAvailable) {
-            return panelItems;
-        }
-        return [
-            ...(panelItems || []),
-            {
-                id: InnerPanels.AllPages,
-                content: React__default.createElement(AllPagesPanel, null),
-                visible: innerVisiblePanel === InnerPanels.AllPages,
-            },
-        ];
-    }, [allPagesIsAvailable, panelItems, innerVisiblePanel]);
-    return Object.assign(Object.assign({}, props), { onClosePanel: innerOnClosePanel, allPagesIsAvailable, menuItems: innerMenuItems, panelItems: innerPanelItems, size,
-        onItemClick });
-};
-
-const PageLayoutAside = React__default.forwardRef((props, ref) => {
-    const { size, compact } = useAsideHeaderContext();
-    const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign({ size, compact }, props));
-    return (React__default.createElement(AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
-        React__default.createElement(FirstPanel, { ref: ref })));
-});
-PageLayoutAside.displayName = 'PageLayoutAside';
-
-export { Logo as L, PageLayoutAside as P };
-//# sourceMappingURL=PageLayoutAside-Bd3aJNrH.js.map