@gravity-ui/navigation 0.0.7 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.1.0](https://github.com/gravity-ui/navigation/compare/v0.0.7...v0.1.0) (2022-10-17)
+
+
+### Features
+
+* add ActionBar component ([#19](https://github.com/gravity-ui/navigation/issues/19)) ([595d418](https://github.com/gravity-ui/navigation/commit/595d4189f005615e4ba504cef4689d48fb6a798a))
+* **CompositeBar:** divider item type ([#11](https://github.com/gravity-ui/navigation/issues/11)) ([89f3b85](https://github.com/gravity-ui/navigation/commit/89f3b854ac9348837352809101502a876def8940))
+
 ## [0.0.7](https://github.com/gravity-ui/navigation/compare/v0.0.6...v0.0.7) (2022-10-11)
 
 

package/build/cjs/index.js

@@ -87,6 +87,84 @@ function block(name) {
     return _default(`${NAMESPACE}${name}`);
 }
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$b = ".ycn-action-bar-group {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}";
+styleInject(css_248z$b);
+
+const b$b = block('action-bar-group');
+const ActionBarGroup = ({ children, className, pull }) => {
+    return (React__default["default"].createElement("ul", { className: b$b({ pull }, className), role: "group" }, children));
+};
+ActionBarGroup.displayName = 'ActionBar.Group';
+
+var css_248z$a = ".ycn-action-bar-item {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n  margin-left: 0;\n  margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n  margin-left: auto;\n  margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n  margin-left: auto;\n  margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n  margin-left: 8px;\n}";
+styleInject(css_248z$a);
+
+const b$a = block('action-bar-item');
+const ActionBarItem = ({ children, className, pull, spacing = true }) => {
+    return React__default["default"].createElement("li", { className: b$a({ pull, spacing }, className) }, children);
+};
+ActionBarItem.displayName = 'ActionBar.Item';
+
+var css_248z$9 = ".ycn-action-bar-section {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n  border-left: solid 1px var(--yc-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n  flex: 1 1 auto;\n  padding-left: 20px;\n  padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n  padding-left: 6px;\n  padding-right: 6px;\n}";
+styleInject(css_248z$9);
+
+const b$9 = block('action-bar-section');
+const ActionBarSection = ({ children, type = 'primary' }) => {
+    return React__default["default"].createElement("div", { className: b$9({ type }) }, children);
+};
+ActionBarSection.displayName = 'ActionBar.Section';
+
+var css_248z$8 = ".ycn-action-bar-separator {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-left: 6px;\n  margin-right: 6px;\n  border-right: solid 1px var(--yc-color-line-generic);\n  height: 40px;\n}";
+styleInject(css_248z$8);
+
+const b$8 = block('action-bar-separator');
+const ActionBarSeparator = () => {
+    return React__default["default"].createElement("li", { role: "separator", className: b$8() });
+};
+ActionBarSeparator.displayName = 'ActionBar.Separator';
+
+var css_248z$7 = ".ycn-action-bar {\n  box-sizing: border-box;\n  height: 40px;\n  border-bottom: solid 1px var(--yc-color-line-generic);\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}";
+styleInject(css_248z$7);
+
+const b$7 = block('action-bar');
+const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
+    return (React__default["default"].createElement("section", { className: b$7(null, className), "aria-label": ariaLabel }, children));
+};
+ActionBar.displayName = 'ActionBar';
+const PublicActionBar = Object.assign(ActionBar, {
+    Section: ActionBarSection,
+    Group: ActionBarGroup,
+    Item: ActionBarItem,
+    Separator: ActionBarSeparator,
+});
+
 exports.Dict = void 0;
 (function (Dict) {
     Dict["ExpandButton"] = "button_expand";
@@ -3113,33 +3191,6 @@ SwitchTransition.defaultProps = {
   mode: modes.out
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
 var css_248z$6 = ".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-transition-enter {\n  transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition-enter-active {\n  transform: translate(0, 0);\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done {\n  filter: blur(0px);\n  transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit {\n  transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active {\n  transform: translate(-100%, 0);\n  transition: transform 300ms;\n}\n.ycn-drawer__item-transition-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$6);
 
@@ -3749,6 +3800,8 @@ function getItemHeight(item) {
     switch (item.type) {
         case 'action':
             return 50;
+        case 'divider':
+            return 15;
         default:
             return ITEM_HEIGHT;
     }
@@ -3756,10 +3809,31 @@ function getItemHeight(item) {
 function getItemsHeight(items) {
     return items.reduce((sum, item) => sum + getItemHeight(item), 0);
 }
-const getSelectedItemIndex = (items) => {
+function getSelectedItemIndex(items) {
     const index = items.findIndex(({ current }) => Boolean(current));
     return index === -1 ? undefined : index;
-};
+}
+function getPinnedItems(items) {
+    const pinnedItems = [];
+    for (const item of items) {
+        if (item.pinned) {
+            pinnedItems.push(item);
+        }
+        else if (item.type === 'divider') {
+            if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {
+                pinnedItems.push(item);
+            }
+        }
+    }
+    return pinnedItems;
+}
+function getItemsMinHeight(items) {
+    const pinnedItems = getPinnedItems(items);
+    const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
+    return (getItemsHeight(pinnedItems) +
+        getItemsHeight(afterMoreButtonItems) +
+        (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
+}
 
 var css_248z$4 = ".ycn-item-tooltip.yc-popup {\n  animation-name: none;\n  box-shadow: none;\n  border: none;\n}\n.ycn-item-tooltip__text {\n  padding: 6px 12px;\n  background-color: var(--yc-color-base-float-heavy);\n  color: var(--yc-color-text-light-primary);\n  border-radius: 4px;\n}";
 styleInject(css_248z$4);
@@ -3778,7 +3852,7 @@ const ItemTooltip = ({ anchor, text }) => {
         React__default["default"].createElement("div", { className: b$4('text') }, text)));
 };
 
-var css_248z$3 = ".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__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: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}";
+var css_248z$3 = ".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: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$3);
 
 const b$3 = block('composite-bar-item');
@@ -3794,6 +3868,9 @@ function renderItemTitle(item) {
 const defaultPopupPlacement = ['right-end'];
 const defaultPopupOffset = [-20, 8];
 const Item = ({ item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, }) => {
+    if (item.type === 'divider') {
+        return React__default["default"].createElement("div", { className: b$3('menu-divider') });
+    }
     const [tooltipAnchor, setTooltipAnchor] = React__default["default"].useState(null);
     const [open, toggleOpen] = React__default["default"].useState(false);
     const ref = React__default["default"].useRef(null);
@@ -3894,14 +3971,13 @@ class CompositeBar extends React__default["default"].Component {
     }
     render() {
         const { enableCollapsing, items } = this.props;
+        if (items.length === 0) {
+            return null;
+        }
         if (!enableCollapsing) {
             return React__default["default"].createElement("div", { className: b$2() }, this.renderMenu());
         }
-        const pinnedItems = items.filter((item) => item.pinned);
-        const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
-        const minHeight = getItemsHeight(pinnedItems) +
-            getItemsHeight(afterMoreButtonItems) +
-            (pinnedItems.length === items.length ? 0 : ITEM_HEIGHT);
+        const minHeight = getItemsMinHeight(items);
         return (React__default["default"].createElement("div", { className: b$2({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
             const style = {
                 width,
@@ -3911,42 +3987,8 @@ class CompositeBar extends React__default["default"].Component {
         }))));
     }
     renderAutosizeMenu(height) {
-        const { dict, items, compact, onItemClick } = this.props;
-        const afterMoreButtonItems = items.filter((item) => item.afterMoreButton);
-        const extraItemHeight = items.reduce((sum, item) => sum + (getItemHeight(item) - ITEM_HEIGHT), afterMoreButtonItems.length * ITEM_HEIGHT);
-        const capacity = Math.max(1, Math.floor((height - extraItemHeight) / ITEM_HEIGHT));
-        let listItems;
-        let collapseItems = [];
-        const regularItems = items.filter((item) => !item.afterMoreButton);
-        if (capacity === 1) {
-            listItems = regularItems.filter((item) => item.pinned);
-            collapseItems = [...regularItems.filter((item) => !item.pinned)];
-        }
-        else if (capacity < items.length) {
-            const extraCount = regularItems.filter((item, idx) => item.pinned && idx >= capacity - 1).length;
-            const pinnedFlag = regularItems.reduceRight((acc, curr, idx) => {
-                const useExtraCount = !curr.pinned && idx < capacity - 1 && acc.extraCount > 0;
-                acc.flags.unshift(curr.pinned || useExtraCount);
-                return {
-                    flags: acc.flags,
-                    extraCount: acc.extraCount - Number(useExtraCount),
-                };
-            }, { flags: [], extraCount }).flags;
-            listItems = regularItems.filter((item, idx) => item.pinned || (idx < capacity - 1 && !pinnedFlag[idx]));
-            collapseItems = regularItems.filter((item, idx) => !item.pinned && (idx >= capacity - 1 || pinnedFlag[idx]));
-        }
-        else {
-            listItems = [...regularItems];
-        }
-        if ((collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) === 1) {
-            listItems = listItems.concat(collapseItems);
-        }
-        else if ((collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) > 1) {
-            listItems.push(this.getMoreButtonItem(dict));
-        }
-        if (afterMoreButtonItems.length) {
-            listItems = listItems.concat(afterMoreButtonItems);
-        }
+        const { compact, onItemClick } = this.props;
+        const { listItems, collapseItems } = this.getAutosizeListItems(height);
         return (React__default["default"].createElement(uikit.List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex(listItems), itemHeight: getItemHeight, itemClassName: b$2('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, onItemClick: onItemClick, renderItem: (item) => (React__default["default"].createElement(Item, { item: item, onMouseLeave: () => {
                     var _a;
                     if (compact) {
@@ -3963,8 +4005,9 @@ class CompositeBar extends React__default["default"].Component {
                     }
                 }, compact: compact })) }));
     }
-    getMoreButtonItem(dict) {
+    getMoreButtonItem() {
         var _a;
+        const { dict } = this.props;
         const title = (_a = dict === null || dict === void 0 ? void 0 : dict[exports.Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict[exports.Dict.MoreButton];
         return {
             id: COLLAPSE_ITEM_ID,
@@ -3973,6 +4016,46 @@ class CompositeBar extends React__default["default"].Component {
             iconSize: 16,
         };
     }
+    getAutosizeListItems(height) {
+        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: [] };
+        }
+        const collapseItem = this.getMoreButtonItem();
+        const collapseItemHeight = getItemHeight(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 && listItems[index + 1].type === 'divider') {
+                    listHeight -= getItemHeight(item);
+                    listItems.splice(index, 1);
+                }
+                continue;
+            }
+            listHeight -= getItemHeight(item);
+            collapseItems.unshift(...listItems.splice(index, 1));
+        }
+        if (listItems[index].type === 'divider' &&
+            (index === 0 || listItems[index - 1].type === 'divider')) {
+            listItems.splice(index, 1);
+        }
+        return { listItems, collapseItems };
+    }
 }
 
 /* Used by renderContent AsideHeader prop */
@@ -4016,7 +4099,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
   })));
 };
 
-var css_248z$1 = ".yc-root {\n  --aside-header-background-color: var(--yc-color-base-info);\n  --aside-header-collapse-button-divider-line-color: var(\n      --aside-header-header-divider-line-color\n  );\n}\n\n.yc-root_theme_light {\n  --aside-header-divider-line-color: transparent;\n  --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark {\n  --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n  --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n}\n\n.ycn-aside-header {\n  --aside-header-min-width: 56px;\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n  position: sticky;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--yc-color-base-background);\n  z-index: 100;\n  box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  width: 1px;\n  height: 100%;\n  content: \"\";\n  background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n}\n.ycn-aside-header__aside-content {\n  --gradient-height: 334px;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n  width: inherit;\n  height: inherit;\n  position: relative;\n  z-index: 2;\n  user-select: none;\n  background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header__aside-content::after {\n  position: absolute;\n  top: 0;\n  right: -100px;\n  bottom: 0;\n  width: 100px;\n  content: \"\";\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n  margin: 8px 0;\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n  background: transparent;\n}\n.ycn-aside-header__header {\n  --aside-header-header-divider-height: 29px;\n  position: relative;\n  z-index: 1;\n  flex: none;\n  box-sizing: border-box;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  width: 100%;\n  height: calc(100% - var(--aside-header-header-divider-height));\n  content: \"\";\n  background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n  position: absolute;\n  bottom: 12px;\n  left: 0;\n  z-index: -2;\n  width: 100%;\n  height: 1px;\n  content: \"\";\n  background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header::after {\n  display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n  display: block;\n}\n.ycn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.ycn-aside-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  overflow: auto;\n}\n.ycn-aside-header__panel {\n  height: 100%;\n}\n.ycn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.ycn-aside-header__content {\n  width: calc(100% - var(--aside-header-size));\n}\n.ycn-aside-header__collapse-button {\n  --yc-button-background-color-hover: transparent;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex: none;\n  width: 100%;\n  height: 20px;\n  border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-primary);\n}";
+var css_248z$1 = ".yc-root {\n  --aside-header-background-color: var(--yc-color-base-info);\n  --aside-header-collapse-button-divider-line-color: var(\n      --aside-header-header-divider-line-color\n  );\n}\n\n.yc-root_theme_light {\n  --aside-header-divider-line-color: transparent;\n  --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark {\n  --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n  --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n}\n\n.ycn-aside-header {\n  --aside-header-min-width: 56px;\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n  position: sticky;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--yc-color-base-background);\n  z-index: 100;\n  box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  width: 1px;\n  height: 100%;\n  content: \"\";\n  background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n}\n.ycn-aside-header__aside-content {\n  --gradient-height: 334px;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n  width: inherit;\n  height: inherit;\n  position: relative;\n  z-index: 2;\n  user-select: none;\n  background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header__aside-content::after {\n  position: absolute;\n  top: 0;\n  right: -100px;\n  bottom: 0;\n  width: 100px;\n  content: \"\";\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n  margin: 8px 0;\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n  background: transparent;\n}\n.ycn-aside-header__header {\n  --aside-header-header-divider-height: 29px;\n  position: relative;\n  z-index: 1;\n  flex: none;\n  box-sizing: border-box;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  width: 100%;\n  height: calc(100% - var(--aside-header-header-divider-height));\n  content: \"\";\n  background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n  position: absolute;\n  bottom: 12px;\n  left: 0;\n  z-index: -2;\n  width: 100%;\n  height: 1px;\n  content: \"\";\n  background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n  display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header::after {\n  display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n  display: block;\n}\n.ycn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.ycn-aside-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  overflow: auto;\n}\n.ycn-aside-header__panel {\n  height: 100%;\n}\n.ycn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.ycn-aside-header__content {\n  width: calc(100% - var(--aside-header-size));\n}\n.ycn-aside-header__collapse-button {\n  --yc-button-background-color-hover: transparent;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex: none;\n  width: 100%;\n  height: 20px;\n  border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n  margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n  color: var(--yc-color-text-primary);\n}";
 styleInject(css_248z$1);
 
 const b$1 = block('aside-header');
@@ -4140,6 +4223,7 @@ const FooterItem = (_a) => {
     return (React__default["default"].createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b({ compact: props.compact }) })));
 };
 
+exports.ActionBar = PublicActionBar;
 exports.AsideHeader = AsideHeader;
 exports.Drawer = Drawer;
 exports.DrawerItem = DrawerItem;