@gravity-ui/navigation 1.5.0 → 1.6.0

package/build/cjs/FirstPanel-2f78b962.js

@@ -0,0 +1,902 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var styleInject_es = require('./style-inject.es-935afc04.js');
+var Item = require('./Item-15bdb320.js');
+var AsideHeaderContext = require('./AsideHeaderContext.js');
+var icons = require('@gravity-ui/icons');
+var registerKeyset = require('./registerKeyset-f4ce9ee7.js');
+var Drawer = require('./Drawer.js');
+
+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]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * 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 React.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) {
+        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 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;
+    if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.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 = this._autoSizer.parentNode;
+
+      // Defer requiring resize handler in order to support server-side rendering.
+      // See issue #41
+      if (this._parentNode != null) {
+        if (typeof ResizeObserver !== "undefined") {
+          this._resizeObserver = new ResizeObserver(() => {
+            // 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(this._parentNode);
+        } else {
+          this._detectElementResize = createDetectElementResize(nonce);
+          this._detectElementResize.addResizeListener(this._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.observe(this._parentNode);
+        this._resizeObserver.disconnect();
+      }
+    }
+  }
+  render() {
+    const {
+      children,
+      defaultHeight,
+      defaultWidth,
+      disableHeight = false,
+      disableWidth = 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;
+    }
+    return React.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["default"].createContext(multipleTooltipContextDefaults);
+class MultipleTooltipProvider extends React__default["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["default"].createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
+    }
+}
+
+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{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);
+
+const b$5 = styleInject_es.block('multiple-tooltip');
+const POPUP_OFFSET = [-32, 4];
+const POPUP_MODIFIERS = [
+    {
+        name: 'preventOverflow',
+        enabled: false,
+    },
+];
+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$5(null), modifiers: POPUP_MODIFIERS, disableLayer: true },
+        React__default["default"].createElement("div", { className: b$5('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$5('item', { divider: true }), key: idx }, item.title));
+                default:
+                    return (React__default["default"].createElement("div", { className: b$5('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);
+
+const b$4 = styleInject_es.block('composite-bar');
+const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
+    const ref = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext);
+    const { compact } = AsideHeaderContext.useAsideHeaderContext();
+    React__default["default"].useEffect(() => {
+        function handleBlurWindow() {
+            if (multipleTooltip && multipleTooltipActive) {
+                setMultipleTooltipContextValue({ active: false });
+            }
+        }
+        window.addEventListener('blur', handleBlurWindow);
+        return () => {
+            window.removeEventListener('blur', handleBlurWindow);
+        };
+    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onTooltipMouseEnter = React.useCallback((e) => {
+        if (multipleTooltip &&
+            compact &&
+            !multipleTooltipActive &&
+            document.hasFocus() &&
+            activeIndex !== lastClickedItemIndex &&
+            e.clientX <= Item.ASIDE_HEADER_COMPACT_WIDTH) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
+                active: true,
+            });
+        }
+    }, [
+        multipleTooltip,
+        compact,
+        multipleTooltipActive,
+        activeIndex,
+        lastClickedItemIndex,
+        setMultipleTooltipContextValue,
+    ]);
+    const onTooltipMouseLeave = React.useCallback(() => {
+        if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
+                active: false,
+                lastClickedItemIndex: undefined,
+            });
+        }
+    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onMouseEnterByIndex = React.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 = React.useCallback(() => {
+        var _a;
+        if (compact && document.hasFocus()) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
+            if (multipleTooltip &&
+                (activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
+                setMultipleTooltipContextValue({
+                    activeIndex: undefined,
+                    lastClickedItemIndex: undefined,
+                });
+            }
+        }
+    }, [
+        activeIndex,
+        compact,
+        lastClickedItemIndex,
+        multipleTooltip,
+        setMultipleTooltipContextValue,
+    ]);
+    const onItemClickByIndex = React.useCallback((itemIndex) => (item, collapsed, event) => {
+        if (compact &&
+            multipleTooltip &&
+            itemIndex !== lastClickedItemIndex &&
+            item.id !== Item.COLLAPSE_ITEM_ID) {
+            setMultipleTooltipContextValue({
+                lastClickedItemIndex: itemIndex,
+                active: false,
+            });
+        }
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
+    }, [
+        compact,
+        lastClickedItemIndex,
+        multipleTooltip,
+        onItemClick,
+        setMultipleTooltipContextValue,
+    ]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
+            React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? Item.getSelectedItemIndex(items) : undefined, itemHeight: Item.getItemHeight, itemsHeight: Item.getItemsHeight, itemClassName: b$4('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
+                    const itemExtraProps = Item.isMenuItem(item) ? { item } : item;
+                    const enableTooltip = Item.isMenuItem(item)
+                        ? !multipleTooltip
+                        : item.enableTooltip;
+                    return (React__default["default"].createElement(Item.Item, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
+                } })),
+        type === 'menu' && multipleTooltip && (React__default["default"].createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
+};
+const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip = false, }) => {
+    if (items.length === 0) {
+        return null;
+    }
+    let node;
+    if (type === 'menu') {
+        const minHeight = Item.getItemsMinHeight(items);
+        const collapseItem = Item.getMoreButtonItem(menuMoreTitle);
+        node = (React__default["default"].createElement("div", { className: b$4({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
+            const { listItems, collapseItems } = Item.getAutosizeListItems(items, height, collapseItem);
+            return (React__default["default"].createElement("div", { style: { width, height } },
+                React__default["default"].createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+        }))));
+    }
+    else {
+        node = (React__default["default"].createElement("div", { className: b$4({ subheader: true }) },
+            React__default["default"].createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
+    }
+    return React__default["default"].createElement(MultipleTooltipProvider, null, node);
+};
+
+const b$3 = styleInject_es.block('aside-header');
+
+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 = styleInject_es.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 = styleInject_es.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";
+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 = registerKeyset.registerKeyset({ en, ru }, 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}";
+styleInject_es.styleInject(css_248z);
+
+const b = styleInject_es.block('logo');
+const Logo = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href, wrapper, onClick, }) => {
+    const { compact } = AsideHeaderContext.useAsideHeaderContext();
+    const hasWrapper = typeof wrapper === 'function';
+    let buttonIcon;
+    if (iconSrc) {
+        buttonIcon = (React__default["default"].createElement(uikit.Button.Icon, { className: iconClassName },
+            React__default["default"].createElement("img", { alt: "logo icon", src: iconSrc, width: iconSize, height: iconSize })));
+    }
+    else if (icon) {
+        buttonIcon = React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: iconClassName });
+    }
+    const button = (React__default["default"].createElement(uikit.Button, { view: "flat", size: "l", className: b('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick, target: "_self", href: href }, buttonIcon));
+    let logo;
+    if (typeof text === 'function') {
+        logo = text();
+    }
+    else {
+        logo = (React__default["default"].createElement("div", { className: b('logo'), style: { fontSize: textSize } }, text));
+    }
+    return (React__default["default"].createElement("div", { className: b() },
+        React__default["default"].createElement("div", { className: b('logo-btn-place') }, hasWrapper ? wrapper(button, Boolean(compact)) : button),
+        !compact &&
+            (hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, Boolean(compact)))) : (React__default["default"].createElement("a", { href: href !== null && href !== void 0 ? href : '/', target: "_self", className: b('logo-link'), onClick: onClick }, logo)))));
+};
+
+var _path$1;
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    width: 56,
+    height: 29,
+    viewBox: "0 0 56 29",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M56 0v29c-.8-1-7-6.1-17.7-8.4L13 15.7A16 16 0 0 1 0 0Z"
+  })));
+};
+var headerDividerCollapsedIcon = SvgDividerCollapsed;
+
+const DEFAULT_SUBHEADER_ITEMS = [];
+const Header = () => {
+    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const { onClick: onLogoClickProp } = logo;
+    const onLogoClick = React.useCallback((event) => {
+        onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
+        onLogoClickProp === null || onLogoClickProp === void 0 ? void 0 : onLogoClickProp(event);
+    }, [onClosePanel, onLogoClickProp]);
+    return (React__default["default"].createElement("div", { className: b$3('header', { ['with-decoration']: headerDecoration }) },
+        React__default["default"].createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick })),
+        React__default["default"].createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
+        React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$3('header-divider'), width: Item.ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
+};
+
+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: b$3('collapse-button', { compact }), view: "flat", onClick: onCollapseButtonClick, title: buttonTitle },
+        React__default["default"].createElement(NotIcon, { data: controlMenuButtonIcon, className: b$3('collapse-icon'), width: "16", height: "10" })));
+};
+
+const Panels = () => {
+    const { panelItems, onClosePanel, size } = AsideHeaderContext.useAsideHeaderInnerContext();
+    return panelItems ? (React__default["default"].createElement(Drawer.Drawer, { className: b$3('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(Drawer.DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
+};
+
+const FirstPanel = React__default["default"].forwardRef((_props, ref) => {
+    const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, renderFooter, compact, } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const visibleMenuItems = useVisibleMenuItems();
+    const asideRef = React.useRef(null);
+    React__default["default"].useEffect(() => {
+        uikit.setRef(ref, asideRef.current);
+    }, [ref]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: b$3('aside'), style: { width: size } },
+            React__default["default"].createElement("div", { className: b$3('aside-popup-anchor'), ref: asideRef }),
+            React__default["default"].createElement("div", { className: b$3('aside-content', { ['with-decoration']: headerDecoration }) },
+                React__default["default"].createElement(Header, null),
+                (visibleMenuItems === null || visibleMenuItems === void 0 ? void 0 : visibleMenuItems.length) ? (React__default["default"].createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, multipleTooltip: multipleTooltip })) : (React__default["default"].createElement("div", { className: b$3('menu-items') })),
+                React__default["default"].createElement("div", { className: b$3('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
+                    size,
+                    compact: Boolean(compact),
+                    asideRef,
+                })),
+                React__default["default"].createElement(CollapseButton, null))),
+        React__default["default"].createElement(Panels, null)));
+});
+
+exports.AllPagesPanel = AllPagesPanel;
+exports.FirstPanel = FirstPanel;
+exports.b = b$3;
+exports.getAllPagesMenuItem = getAllPagesMenuItem;
+//# sourceMappingURL=FirstPanel-2f78b962.js.map