@gravity-ui/navigation 0.9.0 → 0.10.1

package/build/esm/index.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent, useState, useMemo, useCallback, useEffect } from 'react';
+import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent, useRef, useContext, useCallback, useState, useMemo, useEffect } from 'react';
 import { useBodyScrollLock, Button, Icon, Popup, List, Tooltip, Text, Hotkey, TextInput, Tabs, Loader, Sheet, eventBroker } from '@gravity-ui/uikit';
 import ReactDOM from 'react-dom';
-import { Xmark } from '@gravity-ui/icons';
+import { Ellipsis, Xmark } from '@gravity-ui/icons';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -84,8 +84,8 @@ const defaultDict$2 = {
     [MobileHeaderDict.OpenBurger]: 'Open menu',
 };
 
-function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$3() {
+  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -96,7 +96,7 @@ function _extends$4() {
     }
     return target;
   };
-  return _extends$4.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -2249,7 +2249,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
         _this$props.classNames;
         var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
 
-    return /*#__PURE__*/React__default.createElement(Transition, _extends$4({}, props, {
+    return /*#__PURE__*/React__default.createElement(Transition, _extends$3({}, props, {
       onEnter: this.onEnter,
       onEntered: this.onEntered,
       onEntering: this.onEntering,
@@ -2265,7 +2265,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
 CSSTransition.defaultProps = {
   classNames: ''
 };
-CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({}, Transition.propTypes, {
+CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({}, Transition.propTypes, {
   /**
    * The animation classNames applied to the component as it appears, enters,
    * exits or has finished the transition. A single name can be provided, which
@@ -2627,7 +2627,7 @@ var TransitionGroup = /*#__PURE__*/function (_React$Component) {
 
     if (this.mounted) {
       this.setState(function (state) {
-        var children = _extends$4({}, state.children);
+        var children = _extends$3({}, state.children);
 
         delete children[child.key];
         return {
@@ -3130,15 +3130,15 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$l = ".ycn-drawer__item {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  height: 100%;\n  will-change: transform;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-drawer__item_direction_right {\n  left: auto;\n  right: 0;\n}\n.ycn-drawer__item-transition-enter {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-enter {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-enter-active, .ycn-drawer__item-transition_direction_right-enter-active {\n  transform: translate(0, 0);\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done, .ycn-drawer__item-transition_direction_right-enter-done {\n  filter: blur(0px);\n  transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit, .ycn-drawer__item-transition_direction_right-exit {\n  transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active, .ycn-drawer__item-transition_direction_right-exit-active {\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-exit-active {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-exit-active {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-exit-done, .ycn-drawer__item-transition_direction_right-exit-done {\n  visibility: hidden;\n}\n.ycn-drawer__veil {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-color: var(--yc-color-sfx-veil);\n}\n.ycn-drawer__veil-transition-enter {\n  opacity: 0;\n}\n.ycn-drawer__veil-transition-enter-active {\n  opacity: 1;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit {\n  opacity: 1;\n}\n.ycn-drawer__veil-transition-exit-active {\n  opacity: 0;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit-done {\n  visibility: hidden;\n}";
-styleInject(css_248z$l);
+var css_248z$m = ".ycn-drawer__item {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  height: 100%;\n  will-change: transform;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-drawer__item_direction_right {\n  left: auto;\n  right: 0;\n}\n.ycn-drawer__item-transition-enter {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-enter {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-enter-active, .ycn-drawer__item-transition_direction_right-enter-active {\n  transform: translate(0, 0);\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done, .ycn-drawer__item-transition_direction_right-enter-done {\n  filter: blur(0px);\n  transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit, .ycn-drawer__item-transition_direction_right-exit {\n  transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active, .ycn-drawer__item-transition_direction_right-exit-active {\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-exit-active {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-exit-active {\n  transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-exit-done, .ycn-drawer__item-transition_direction_right-exit-done {\n  visibility: hidden;\n}\n.ycn-drawer__veil {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-color: var(--yc-color-sfx-veil);\n}\n.ycn-drawer__veil-transition-enter {\n  opacity: 0;\n}\n.ycn-drawer__veil-transition-enter-active {\n  opacity: 1;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit {\n  opacity: 1;\n}\n.ycn-drawer__veil-transition-exit-active {\n  opacity: 0;\n  transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit-done {\n  visibility: hidden;\n}";
+styleInject(css_248z$m);
 
-const b$m = block('drawer');
+const b$n = block('drawer');
 const TIMEOUT = 300;
 const DrawerItem = ({ visible, content, direction, className }) => {
     const itemRef = React__default.useRef(null);
-    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$m('item-transition', { direction }), nodeRef: itemRef },
-        React__default.createElement("div", { ref: itemRef, className: b$m('item', { direction }, className) }, content)));
+    return (React__default.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$n('item-transition', { direction }), nodeRef: itemRef },
+        React__default.createElement("div", { ref: itemRef, className: b$n('item', { direction }, className) }, content)));
 };
 const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
     let someItemVisible = false;
@@ -3169,9 +3169,9 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     const veilRef = React__default.useRef(null);
     return (React__default.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
         const childrenVisible = someItemVisible && state === 'entered';
-        return (React__default.createElement("div", { ref: containerRef, className: b$m(null, className), style: style },
-            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$m('veil-transition'), nodeRef: veilRef },
-                React__default.createElement("div", { ref: veilRef, className: b$m('veil'), onClick: onVeilClick })),
+        return (React__default.createElement("div", { ref: containerRef, className: b$n(null, className), style: style },
+            React__default.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$n('veil-transition'), nodeRef: veilRef },
+                React__default.createElement("div", { ref: veilRef, className: b$n('veil'), onClick: onVeilClick })),
             React__default.Children.map(children, (child) => {
                 const childElem = child;
                 if (childElem.type === DrawerItem) {
@@ -3183,10 +3183,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
     }));
 };
 
-var css_248z$k = ".ycn-logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 40px;\n}\n.ycn-logo__logo-btn-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.ycn-logo__logo-btn-place .yc-button::before {\n  background-color: transparent;\n}\n.ycn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n  --yc-button-height: 38px;\n}\n.ycn-logo__logo {\n  font-size: var(--yc-text-body-2-font-size);\n  line-height: var(--yc-text-body-2-line-height);\n  font-weight: var(--yc-text-body-font-weight);\n  vertical-align: middle;\n  cursor: pointer;\n}\n.ycn-logo__logo-link, .ycn-logo__logo-link:hover, .ycn-logo__logo-link:active, .ycn-logo__logo-link:visited, .ycn-logo__logo-link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.yc-root .ycn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n  background-color: transparent;\n}";
-styleInject(css_248z$k);
+var css_248z$l = ".ycn-logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 40px;\n}\n.ycn-logo__logo-btn-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.ycn-logo__logo-btn-place .yc-button::before {\n  background-color: transparent;\n}\n.ycn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n  --yc-button-height: 38px;\n}\n.ycn-logo__logo {\n  font-size: var(--yc-text-body-2-font-size);\n  line-height: var(--yc-text-body-2-line-height);\n  font-weight: var(--yc-text-body-font-weight);\n  vertical-align: middle;\n  cursor: pointer;\n}\n.ycn-logo__logo-link, .ycn-logo__logo-link:hover, .ycn-logo__logo-link:active, .ycn-logo__logo-link:visited, .ycn-logo__logo-link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.yc-root .ycn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n  background-color: transparent;\n}";
+styleInject(css_248z$l);
 
-const b$l = block('logo');
+const b$m = block('logo');
 const Logo$1 = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
     const hasClickHandler = typeof onClick === 'function';
     const hasWrapper = typeof wrapper === 'function';
@@ -3204,18 +3204,18 @@ const Logo$1 = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, te
     else if (icon) {
         buttonIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: iconClassName });
     }
-    const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$l('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
+    const button = (React__default.createElement(Button, Object.assign({ view: "flat", size: "l", className: b$m('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
     let logo;
     if (typeof text === 'function') {
         logo = text();
     }
     else {
-        logo = (React__default.createElement("div", { className: b$l('logo'), style: { fontSize: textSize } }, text));
+        logo = (React__default.createElement("div", { className: b$m('logo'), style: { fontSize: textSize } }, text));
     }
-    return (React__default.createElement("div", { className: b$l() },
-        React__default.createElement("div", { className: b$l('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
+    return (React__default.createElement("div", { className: b$m() },
+        React__default.createElement("div", { className: b$m('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
         !compact &&
-            (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$l('logo-link'), onClick: onClick }), logo)))));
+            (hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$m('logo-link'), onClick: onClick }), logo)))));
 };
 
 var classCallCheck = function (instance, Constructor) {
@@ -3242,7 +3242,7 @@ var createClass = function () {
   };
 }();
 
-var _extends$3 = Object.assign || function (target) {
+var _extends$2 = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i];
 
@@ -3685,7 +3685,7 @@ var AutoSizer = function (_React$PureComponent) {
         {
           className: className,
           ref: this._setRef,
-          style: _extends$3({}, outerStyle, style)
+          style: _extends$2({}, outerStyle, style)
         },
         !bailoutOnChildren && children(childParams)
       );
@@ -3746,17 +3746,66 @@ function getItemsMinHeight(items) {
         getItemsHeight(afterMoreButtonItems) +
         (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
 }
+function getMoreButtonItem(dict) {
+    var _a;
+    const title = (_a = dict === null || dict === void 0 ? void 0 : dict[Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$2[Dict.MoreButton];
+    return {
+        id: COLLAPSE_ITEM_ID,
+        title,
+        icon: Ellipsis,
+        iconSize: 18,
+    };
+}
+function getAutosizeListItems(items, height, collapseItem) {
+    var _a, _b, _c;
+    const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
+    const regularItems = items.filter((item) => !item.afterMoreButton);
+    const listItems = [...regularItems, ...afterMoreButtonItems];
+    const allItemsHeight = getItemsHeight(listItems);
+    if (allItemsHeight <= height) {
+        return { listItems, collapseItems: [] };
+    }
+    const collapseItemHeight = getItemHeight$1(collapseItem);
+    listItems.splice(regularItems.length, 0, collapseItem);
+    const collapseItems = [];
+    let listHeight = allItemsHeight + collapseItemHeight;
+    let index = listItems.length;
+    while (listHeight > height) {
+        if (index === 0) {
+            break;
+        }
+        index--;
+        const item = listItems[index];
+        if (item.pinned || item.id === COLLAPSE_ITEM_ID || item.afterMoreButton) {
+            continue;
+        }
+        if (item.type === 'divider') {
+            if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
+                listHeight -= getItemHeight$1(item);
+                listItems.splice(index, 1);
+            }
+            continue;
+        }
+        listHeight -= getItemHeight$1(item);
+        collapseItems.unshift(...listItems.splice(index, 1));
+    }
+    if (((_b = listItems[index]) === null || _b === void 0 ? void 0 : _b.type) === 'divider' &&
+        (index === 0 || ((_c = listItems[index - 1]) === null || _c === void 0 ? void 0 : _c.type) === 'divider')) {
+        listItems.splice(index, 1);
+    }
+    return { listItems, collapseItems };
+}
 
-var css_248z$j = ".ycn-composite-bar-item {\n  --composite-bar-item-action-size: 36px;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  cursor: pointer;\n}\n.ycn-composite-bar-item__icon {\n  color: var(--yc-color-text-misc);\n}\n.ycn-composite-bar-item__icon-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.ycn-composite-bar-item__title {\n  display: flex;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-adornment {\n  margin: 0 10px;\n}\n.ycn-composite-bar-item__collapse-item {\n  display: flex;\n  padding: 0 16px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.ycn-composite-bar-item__collapse-item .ycn-composite-bar-item__title-adornment {\n  margin-right: 0;\n}\n.ycn-composite-bar-item__menu-divider {\n  margin: 0 8px;\n  width: 100%;\n  border-top: 1px solid var(--yc-color-line-generic);\n  cursor: default;\n}\n.ycn-composite-bar-item__collapse-items-popup-content {\n  padding: 4px 0;\n}\n.ycn-composite-bar-item__link {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.ycn-composite-bar-item__link, .ycn-composite-bar-item__link:hover, .ycn-composite-bar-item__link:active, .ycn-composite-bar-item__link:visited, .ycn-composite-bar-item__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.ycn-composite-bar-item__btn-icon {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ycn-composite-bar-item_type_action {\n  justify-content: center;\n  height: var(--composite-bar-item-action-size);\n  margin: 0 10px 8px;\n  background: var(--yc-color-base-float);\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n  border-radius: var(--composite-bar-item-action-size);\n  transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.ycn-composite-bar-item_type_action:focus {\n  box-shadow: 0 0 0 2px var(--yc-color-line-misc);\n}\n.ycn-composite-bar-item_type_action:focus:not(:focus-visible) {\n  box-shadow: none;\n}\n.ycn-composite-bar-item_type_action:hover {\n  background-color: var(--yc-color-base-float-hover);\n}\n.ycn-composite-bar-item_type_action:active {\n  box-shadow: 0 1px 2px var(--yc-color-sfx-shadow);\n  transition: none;\n  transform: scale(0.96);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__icon-place {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin-right: 16px;\n}\n.ycn-composite-bar-item__icon-tooltip_item-type_action {\n  margin-left: 10px;\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact).ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact):not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular {\n  background-color: var(--yc-color-base-simple-hover);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin: 0;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--yc-color-base-simple-hover);\n}";
-styleInject(css_248z$j);
+var css_248z$k = ".ycn-composite-bar-item {\n  --composite-bar-item-action-size: 36px;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  cursor: pointer;\n}\n.ycn-composite-bar-item__icon {\n  color: var(--yc-color-text-misc);\n}\n.ycn-composite-bar-item__icon-place {\n  flex-shrink: 0;\n  width: var(--aside-header-min-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.ycn-composite-bar-item__title {\n  display: flex;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ycn-composite-bar-item__title-adornment {\n  margin: 0 10px;\n}\n.ycn-composite-bar-item__collapse-item {\n  display: flex;\n  padding: 0 16px;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.ycn-composite-bar-item__collapse-item .ycn-composite-bar-item__title-adornment {\n  margin-right: 0;\n}\n.ycn-composite-bar-item__menu-divider {\n  margin: 0 8px;\n  width: 100%;\n  border-top: 1px solid var(--yc-color-line-generic);\n  cursor: default;\n}\n.ycn-composite-bar-item__collapse-items-popup-content {\n  padding: 4px 0;\n}\n.ycn-composite-bar-item__link {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.ycn-composite-bar-item__link, .ycn-composite-bar-item__link:hover, .ycn-composite-bar-item__link:active, .ycn-composite-bar-item__link:visited, .ycn-composite-bar-item__link:focus {\n  text-decoration: none;\n  outline: none;\n  color: inherit;\n}\n.ycn-composite-bar-item__btn-icon {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ycn-composite-bar-item_type_action {\n  justify-content: center;\n  height: var(--composite-bar-item-action-size);\n  margin: 0 10px 8px;\n  background: var(--yc-color-base-float);\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n  border-radius: var(--composite-bar-item-action-size);\n  transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.ycn-composite-bar-item_type_action:focus {\n  box-shadow: 0 0 0 2px var(--yc-color-line-misc);\n}\n.ycn-composite-bar-item_type_action:focus:not(:focus-visible) {\n  box-shadow: none;\n}\n.ycn-composite-bar-item_type_action:hover {\n  background-color: var(--yc-color-base-float-hover);\n}\n.ycn-composite-bar-item_type_action:active {\n  box-shadow: 0 1px 2px var(--yc-color-sfx-shadow);\n  transition: none;\n  transform: scale(0.96);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__icon-place {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin-right: 16px;\n}\n.ycn-composite-bar-item__icon-tooltip_item-type_action {\n  margin-left: 10px;\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact).ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact):not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular {\n  background-color: var(--yc-color-base-simple-hover);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action {\n  width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n  margin: 0;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n  position: relative;\n  background-color: transparent;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 38px;\n  height: 38px;\n  margin-top: -19px;\n  margin-left: -19px;\n  border-radius: 7px;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n  background-color: var(--yc-color-base-simple-hover);\n}";
+styleInject(css_248z$k);
 
-const b$k = block('composite-bar-item');
+const b$l = block('composite-bar-item');
 function renderItemTitle(item) {
-    let titleNode = React__default.createElement("div", { className: b$k('title-text') }, item.title);
+    let titleNode = React__default.createElement("div", { className: b$l('title-text') }, item.title);
     if (item.rightAdornment) {
         titleNode = (React__default.createElement(React__default.Fragment, null,
             titleNode,
-            React__default.createElement("div", { className: b$k('title-adornment') }, item.rightAdornment)));
+            React__default.createElement("div", { className: b$l('title-adornment') }, item.rightAdornment)));
     }
     return titleNode;
 }
@@ -3765,7 +3814,7 @@ const defaultPopupOffset = [-20, 8];
 const Item$1 = (props) => {
     const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
     if (item.type === 'divider') {
-        return React__default.createElement("div", { className: b$k('menu-divider') });
+        return React__default.createElement("div", { className: b$l('menu-divider') });
     }
     const [open, toggleOpen] = React__default.useState(false);
     const ref = React__default.useRef(null);
@@ -3786,7 +3835,7 @@ const Item$1 = (props) => {
         onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
     }, [onClosePopup]);
     const makeNode = ({ icon: iconEl, title: titleEl }) => {
-        const createdNode = (React__default.createElement("div", { className: b$k({ type, current, compact }, className), ref: ref, onClick: () => {
+        const createdNode = (React__default.createElement("div", { className: b$l({ type, current, compact }, className), ref: ref, onClick: (event) => {
                 if (collapsedItem) {
                     /**
                      * If we call onItemClick for collapsedItem then:
@@ -3796,7 +3845,7 @@ const Item$1 = (props) => {
                     toggleOpen(!open);
                 }
                 else {
-                    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false);
+                    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
                 }
             }, onMouseEnter: () => {
                 if (!compact) {
@@ -3807,13 +3856,13 @@ const Item$1 = (props) => {
                     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
                 }
             } },
-            React__default.createElement("div", { className: b$k('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$k('icon-tooltip', { 'item-type': type }) },
-                React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$k('btn-icon') }, iconEl))) : (iconEl)),
-            React__default.createElement("div", { className: b$k('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
-            renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$k('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
-        return item.link ? (React__default.createElement("a", { href: item.link, className: b$k('link') }, createdNode)) : (createdNode);
+            React__default.createElement("div", { className: b$l('icon-place') }, compact ? (React__default.createElement(Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
+                React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$l('btn-icon') }, iconEl))) : (iconEl)),
+            React__default.createElement("div", { className: b$l('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
+            renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$l('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
+        return item.link ? (React__default.createElement("a", { href: item.link, className: b$l('link') }, createdNode)) : (createdNode);
     };
-    const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$k('icon') }) : null;
+    const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$l('icon') }) : null;
     const titleNode = renderItemTitle(item);
     const params = { icon: iconNode, title: titleNode };
     let node;
@@ -3831,13 +3880,13 @@ const Item$1 = (props) => {
 Item$1.displayName = 'Item';
 function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
     return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
-        React__default.createElement("div", { className: b$k('collapse-items-popup-content') },
-            React__default.createElement(List, { itemClassName: b$k('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
+        React__default.createElement("div", { className: b$l('collapse-items-popup-content') },
+            React__default.createElement(List, { itemClassName: b$l('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
                     const makeCollapseNode = ({ title: titleEl }) => {
-                        const res = (React__default.createElement("div", { className: b$k('collapse-item'), onClick: () => {
-                                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
+                        const res = (React__default.createElement("div", { className: b$l('collapse-item'), onClick: (event) => {
+                                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true, event);
                             } }, titleEl));
-                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$k('link') }, res)) : (res);
+                        return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$l('link') }, res)) : (res);
                     };
                     const titleNode = renderItemTitle(collapseItem);
                     const params = { title: titleNode };
@@ -3851,123 +3900,149 @@ function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClos
                 } })))) : null;
 }
 
-var _path$2;
-function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
-var SvgDots = function SvgDots(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 16 16",
-    width: 16,
-    height: 16
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    d: "M14 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 14 6.125zm-5.906 0a1.874 1.874 0 1 1 0 3.749 1.874 1.874 0 0 1 0-3.749zM2 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 2 6.125z",
-    fill: "currentColor",
-    fillRule: "evenodd"
-  })));
-};
-var dotsIcon = SvgDots;
-
-var css_248z$i = ".ycn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
-styleInject(css_248z$i);
+var css_248z$j = ".ycn-composite-bar {\n  flex: 1 0 auto;\n  width: 100%;\n  min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n  background-color: transparent;\n}";
+styleInject(css_248z$j);
 
-const b$j = block('composite-bar');
-class CompositeBar extends React__default.Component {
+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 = {
-            activeItemIndex: undefined,
+        this.state = Object.assign({}, multipleTooltipContextDefaults);
+        this.setValue = (value) => {
+            this.setState(Object.assign({}, value));
         };
-        this.listRef = React__default.createRef();
     }
     render() {
-        const { enableCollapsing, items } = this.props;
-        if (items.length === 0) {
-            return null;
-        }
-        if (!enableCollapsing) {
-            return React__default.createElement("div", { className: b$j() }, this.renderMenu());
-        }
-        const minHeight = getItemsMinHeight(items);
-        return (React__default.createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
-            const style = {
-                width,
-                height,
-            };
-            return React__default.createElement("div", { style: style }, this.renderAutosizeMenu(height));
-        }))));
-    }
-    renderAutosizeMenu(height) {
-        const { compact, onItemClick } = this.props;
-        const { listItems, collapseItems } = this.getAutosizeListItems(height);
-        return (React__default.createElement(List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex$1(listItems), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item$1, { item: item, onMouseLeave: () => {
-                    var _a;
-                    if (compact) {
-                        (_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
-                    }
-                }, compact: compact, collapseItems: collapseItems, onItemClick: onItemClick })) }));
+        const { children } = this.props;
+        return (React__default.createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
     }
-    renderMenu() {
-        const { items, onItemClick, compact } = this.props;
-        return (React__default.createElement(List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item$1, { item: item, onMouseLeave: () => {
-                    var _a;
-                    if (compact) {
-                        (_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
-                    }
-                }, compact: compact, onItemClick: onItemClick })) }));
-    }
-    getMoreButtonItem() {
-        var _a;
-        const { dict } = this.props;
-        const title = (_a = dict === null || dict === void 0 ? void 0 : dict[Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$2[Dict.MoreButton];
-        return {
-            id: COLLAPSE_ITEM_ID,
-            title,
-            icon: dotsIcon,
-            iconSize: 16,
-        };
-    }
-    getAutosizeListItems(height) {
-        var _a, _b, _c;
-        const { items } = this.props;
-        const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
-        const regularItems = items.filter((item) => !item.afterMoreButton);
-        const listItems = [...regularItems, ...afterMoreButtonItems];
-        const allItemsHeight = getItemsHeight(listItems);
-        if (allItemsHeight <= height) {
-            return { listItems, collapseItems: [] };
+}
+
+var css_248z$i = ".yc-root_theme_dark .ycn-multiple-tooltip,\n.yc-root_theme_dark-hc .ycn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #424147;\n  --multiple-tooltip-item-active-bg-color: var(--yc-color-base-float-heavy);\n  --multiple-tooltip-backdrop-background: linear-gradient(\n      90deg,\n      #313036 0%,\n      rgba(49, 48, 54, 0.3) 100%\n  );\n  --multiple-tooltip-backdrop-filter: blur(16px);\n}\n\n.yc-root_theme_light .ycn-multiple-tooltip,\n.yc-root_theme_light-hc .ycn-multiple-tooltip {\n  --multiple-tooltip-item-bg-color: #7a7a7a;\n  --multiple-tooltip-item-active-bg-color: var(--yc-color-base-float-heavy);\n  --multiple-tooltip-backdrop-background: linear-gradient(\n      90deg,\n      #ffffff 0%,\n      rgba(255, 255, 255, 0.3) 100%\n  );\n  --multiple-tooltip-backdrop-filter: blur(12px);\n}\n\n.ycn-multiple-tooltip {\n  background-color: transparent;\n  box-shadow: none;\n}\n.ycn-multiple-tooltip::before {\n  content: \"\";\n  box-shadow: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  background: var(--multiple-tooltip-backdrop-background);\n  filter: var(--multiple-tooltip-backdrop-filter);\n}\n.ycn-multiple-tooltip__items-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 32px 40px 32px 12px;\n}\n.ycn-multiple-tooltip__item {\n  display: flex;\n  box-sizing: border-box;\n  height: 30px;\n  padding: 8px 12px;\n  background-color: var(--multiple-tooltip-item-bg-color);\n  position: relative;\n  border-radius: 5px;\n  align-items: center;\n  color: var(--yc-color-text-light-primary);\n  margin-bottom: 5px;\n  transition: transform 100ms ease-in-out;\n}\n.ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider) + .ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider), .ycn-multiple-tooltip__item:first-child {\n  margin-top: 5px;\n}\n.ycn-multiple-tooltip__item_divider + .ycn-multiple-tooltip__item:not(.ycn-multiple-tooltip__item_divider) {\n  margin-top: 4px;\n}\n.ycn-multiple-tooltip__item_active {\n  background-color: var(--multiple-tooltip-item-active-bg-color);\n  transform: translateX(-12px);\n}\n.ycn-multiple-tooltip__item_divider {\n  height: 15px;\n  visibility: hidden;\n  margin: 0;\n}";
+styleInject(css_248z$i);
+
+const b$k = 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.useContext(MultipleTooltipContext);
+    const activeItem = activeIndex === undefined ? null : items[activeIndex];
+    return (React__default.createElement(Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, className: b$k(null), modifiers: POPUP_MODIFIERS },
+        React__default.createElement("div", { className: b$k('items-container') }, items
+            .filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
+            (id !== COLLAPSE_ITEM_ID && type !== 'action'))
+            .map((item, idx) => {
+            switch (item.type) {
+                case 'divider':
+                    return (React__default.createElement("div", { className: b$k('item', { divider: true }), key: idx }, item.title));
+                default:
+                    return (React__default.createElement("div", { className: b$k('item', {
+                            active: item === activeItem,
+                        }), key: idx }, item.title));
+            }
+        }))));
+};
+
+const b$j = block('composite-bar');
+const CompositeBarView = ({ items, compact, onItemClick, collapseItems, multipleTooltip = true, }) => {
+    const ref = useRef(null);
+    const tooltipRef = useRef(null);
+    const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
+    const onTooltipMouseEnter = useCallback((e) => {
+        if (!multipleTooltipActive &&
+            activeIndex !== lastClickedItemIndex &&
+            e.clientX <= ASIDE_HEADER_COMPACT_WIDTH) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
+                active: true,
+            });
         }
-        const collapseItem = this.getMoreButtonItem();
-        const collapseItemHeight = getItemHeight$1(collapseItem);
-        listItems.splice(regularItems.length, 0, collapseItem);
-        const collapseItems = [];
-        let listHeight = allItemsHeight + collapseItemHeight;
-        let index = listItems.length;
-        while (listHeight > height) {
-            if (index === 0) {
-                break;
+    }, [multipleTooltipActive, activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
+    const onTooltipMouseLeave = useCallback(() => {
+        if (multipleTooltipActive) {
+            setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
+                active: false,
+                lastClickedItemIndex: undefined,
+            });
+        }
+    }, [multipleTooltipActive, setMultipleTooltipContextValue]);
+    const onMouseEnterByIndex = useCallback((itemIndex) => () => {
+        if (multipleTooltip) {
+            let multipleTooltipActiveValue = multipleTooltipActive;
+            if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
+                multipleTooltipActiveValue = true;
             }
-            index--;
-            const item = listItems[index];
-            if (item.pinned || item.id === COLLAPSE_ITEM_ID || item.afterMoreButton) {
-                continue;
+            if (activeIndex === itemIndex &&
+                multipleTooltipActive === multipleTooltipActiveValue) {
+                return;
             }
-            if (item.type === 'divider') {
-                if (index + 1 < listItems.length && ((_a = listItems[index + 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
-                    listHeight -= getItemHeight$1(item);
-                    listItems.splice(index, 1);
-                }
-                continue;
+            setMultipleTooltipContextValue({
+                activeIndex: itemIndex,
+                active: multipleTooltipActiveValue,
+            });
+        }
+    }, [multipleTooltipActive, activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
+    const onMouseLeave = useCallback(() => {
+        var _a;
+        if (compact) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
+            if (multipleTooltip &&
+                (activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
+                setMultipleTooltipContextValue({
+                    activeIndex: undefined,
+                    lastClickedItemIndex: undefined,
+                });
             }
-            listHeight -= getItemHeight$1(item);
-            collapseItems.unshift(...listItems.splice(index, 1));
         }
-        if (((_b = listItems[index]) === null || _b === void 0 ? void 0 : _b.type) === 'divider' &&
-            (index === 0 || ((_c = listItems[index - 1]) === null || _c === void 0 ? void 0 : _c.type) === 'divider')) {
-            listItems.splice(index, 1);
+    }, [activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
+    const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed) => {
+        if (compact &&
+            multipleTooltip &&
+            itemIndex !== lastClickedItemIndex &&
+            item.id !== COLLAPSE_ITEM_ID) {
+            setMultipleTooltipContextValue({
+                lastClickedItemIndex: itemIndex,
+                active: false,
+            });
         }
-        return { listItems, collapseItems };
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed);
+    }, [lastClickedItemIndex, 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: getSelectedItemIndex$1(items), itemHeight: getItemHeight$1, itemClassName: b$j('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => (React__default.createElement(Item$1, { item: item, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), compact: compact, collapseItems: collapseItems, enableTooltip: !multipleTooltip })) })),
+        React__default.createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items })));
+};
+const CompositeBar = ({ items, compact, enableCollapsing, dict, onItemClick, multipleTooltip = false, }) => {
+    if (items.length === 0) {
+        return null;
     }
-}
+    let node = null;
+    if (enableCollapsing) {
+        const minHeight = getItemsMinHeight(items);
+        const collapseItem = getMoreButtonItem(dict);
+        node = (React__default.createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, ({ width, height }) => {
+            const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
+            return (React__default.createElement("div", { style: { width, height } },
+                React__default.createElement(CompositeBarView, { items: listItems, compact: compact, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
+        }))));
+    }
+    else {
+        node = (React__default.createElement("div", { className: b$j() },
+            React__default.createElement(CompositeBarView, { items: items, compact: compact, onItemClick: onItemClick, multipleTooltip: multipleTooltip })));
+    }
+    return React__default.createElement(MultipleTooltipProvider, null, node);
+};
 
 /* Used by renderContent AsideHeader prop */
 const RenderContent = React__default.memo(({ renderContent, size }) => {
@@ -4017,13 +4092,13 @@ class AsideHeader extends React__default.Component {
         super(...arguments);
         this.asideRef = React__default.createRef();
         this.renderFirstPane = (size) => {
-            const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
+            const { dict, menuItems, panelItems, compact, headerDecoration, multipleTooltip } = this.props;
             return (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("div", { className: b$i('aside'), style: { width: size } },
                     React__default.createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
                     React__default.createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
                         this.renderHeader(),
-                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$i('menu-items') })),
+                        (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$i('menu-items') })),
                         this.renderFooter(size),
                         this.renderCollapseButton())),
                 panelItems && this.renderPanels(size)));