npm - @gravity-ui/navigation - Versions diffs - 6.5.1 → 7.0.0-beta.0 - Mend

@gravity-ui/navigation 6.5.1 → 7.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (298) hide show

package/build/esm/components/AsideHeader/components/CompositeBar/utils.js CHANGED Viewed

@@ -1,15 +1,23 @@
 import { Ellipsis } from '@gravity-ui/icons';
-import { ITEM_HEIGHT, POPUP_REGULAR_ITEM_HEIGHT } from '../../../constants.js';
+import { POPUP_REGULAR_ITEM_HEIGHT } from '../../../constants.js';
+import { getAsideHeaderDensityConfig } from '../../density.js';
 import { COLLAPSE_ITEM_ID, COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX } from './constants.js';
+import { isItemPresentationCurrent } from './presentationCurrent.js';
-function getItemHeight(compositeItem) {
+function getRegularItemHeight(compositeItem, menuDensity, layout) {
+    const config = getAsideHeaderDensityConfig(menuDensity);
+    return compositeItem.titleLines === 2 && !(layout === null || layout === undefined ? undefined : layout.sidebarCompact)
+        ? config.twoLineItemHeight
+        : config.itemHeight;
+}
+function getItemHeight(compositeItem, menuDensity = 'default', layout) {
     switch (compositeItem.type) {
         case 'action':
-            return 50;
+            return getAsideHeaderDensityConfig(menuDensity).actionItemHeight;
         case 'divider':
             return 15;
         default:
-            return ITEM_HEIGHT;
+            return getRegularItemHeight(compositeItem, menuDensity, layout);
     }
 }
 function getPopupItemHeight(compositeItem) {
@@ -22,15 +30,8 @@ function getPopupItemHeight(compositeItem) {
             return POPUP_REGULAR_ITEM_HEIGHT;
     }
 }
-function getItemsHeight(items) {
-    return items.reduce((sum, item) => sum + getItemHeight(item), 0);
-}
-function getPopupItemsHeight(items) {
-    return items.reduce((sum, item) => sum + getPopupItemHeight(item), 0);
-}
-function getSelectedItemIndex(compositeItems) {
-    const index = compositeItems.findIndex(({ current }) => Boolean(current));
-    return index === -1 ? undefined : index;
+function getItemsHeight(items, menuDensity = 'default', layout) {
+    return items.reduce((sum, item) => sum + getItemHeight(item, menuDensity, layout), 0);
 }
 function getPinnedItems(compositeItems) {
     const pinnedItems = [];
@@ -46,19 +47,21 @@ function getPinnedItems(compositeItems) {
     }
     return pinnedItems;
 }
-function getItemsMinHeight(compositeItems) {
+function getItemsMinHeight(compositeItems, menuDensity = 'default', layout) {
     const pinnedItems = getPinnedItems(compositeItems);
     const afterMoreButtonItems = compositeItems.filter(({ afterMoreButton }) => afterMoreButton);
-    return (getItemsHeight(pinnedItems) +
-        getItemsHeight(afterMoreButtonItems) +
-        (pinnedItems.length === compositeItems.length ? 0 : ITEM_HEIGHT));
+    const { itemHeight } = getAsideHeaderDensityConfig(menuDensity);
+    return (getItemsHeight(pinnedItems, menuDensity, layout) +
+        getItemsHeight(afterMoreButtonItems, menuDensity, layout) +
+        (pinnedItems.length === compositeItems.length ? 0 : itemHeight));
 }
-function getMoreButtonItem(menuMoreTitle) {
+function getMoreButtonItem(menuMoreTitle, menuDensity = 'default') {
+    const { iconSize } = getAsideHeaderDensityConfig(menuDensity);
     return {
         id: COLLAPSE_ITEM_ID,
         title: menuMoreTitle,
         icon: Ellipsis,
-        iconSize: 18,
+        iconSize,
     };
 }
 function makeGroupHeaderAsideItem(group) {
@@ -67,8 +70,10 @@ function makeGroupHeaderAsideItem(group) {
         title: group.title,
         icon: group.icon,
         iconSize: group.iconSize,
-        // Do not set `current` from children: only nested items should show selection;
-        // otherwise the group header and root List row highlight the whole group block.
+        // `current` comes only from the group itself (its own page), never from
+        // children: nested items show their own selection, and the root List row
+        // must not highlight the whole group block.
+        current: group.current,
     };
 }
 function makeOverflowGroupAsideItem(group, children) {
@@ -76,15 +81,19 @@ function makeOverflowGroupAsideItem(group, children) {
         id: `__gn-composite-bar__group-overflow__${group.id}`,
         title: group.title,
         icon: group.icon,
+        iconSize: group.iconSize,
+        current: group.current,
+        href: group.href,
+        onItemClick: group.onItemClick,
         compositeBarMenuPopupItems: children,
         compositeBarMenuPopupTitle: group.popupTitle,
     };
 }
-function getCompositeBarRowLayoutHeight(row) {
+function getCompositeBarRowLayoutHeight(row, menuDensity = 'default', layout) {
     if (row.kind === 'item') {
-        return getItemHeight(row.item);
+        return getItemHeight(row.item, menuDensity, layout);
     }
-    return getItemHeight(makeGroupHeaderAsideItem(row.group));
+    return getItemHeight(makeGroupHeaderAsideItem(row.group), menuDensity, layout);
 }
 /**
  * Moves rows whose item has `afterMoreButton` to the end (parity with scroll vs collapse DOM order).
@@ -112,29 +121,29 @@ function compositeBarRowsToFlatForMinHeight(rows) {
     }
     return out;
 }
-function getCompositeBarRowsMinHeight(rows) {
-    return getItemsMinHeight(compositeBarRowsToFlatForMinHeight(rows));
+function getCompositeBarRowsMinHeight(rows, menuDensity = 'default', layout) {
+    return getItemsMinHeight(compositeBarRowsToFlatForMinHeight(rows), menuDensity, layout);
 }
-function getSelectedCompositeBarRowIndex(rows) {
+function getSelectedCompositeBarRowIndex(rows, suppressCurrentItemIds) {
     const index = rows.findIndex((row) => {
         if (row.kind === 'item') {
-            return Boolean(row.item.current);
+            return isItemPresentationCurrent(row.item, { suppressCurrentItemIds });
         }
         // Group rows embed their own List; selection is on nested items, not this root row.
         return false;
     });
     return index === -1 ? undefined : index;
 }
-function getAutosizeCompositeBarRows(rows, height, collapseItem) {
+function getAutosizeCompositeBarRows(rows, height, collapseItem, menuDensity = 'default', layout) {
     const ordered = getReorderedCompositeBarRows(rows);
     const afterMoreRows = ordered.filter((r) => r.kind === 'item' && r.item.afterMoreButton);
     const regularRows = ordered.filter((r) => !(r.kind === 'item' && r.item.afterMoreButton));
     const listRows = [...regularRows, ...afterMoreRows];
-    const allRowsHeight = listRows.reduce((sum, row) => sum + getCompositeBarRowLayoutHeight(row), 0);
+    const allRowsHeight = listRows.reduce((sum, row) => sum + getCompositeBarRowLayoutHeight(row, menuDensity, layout), 0);
     if (allRowsHeight <= height) {
         return { listRows, collapseItems: [] };
     }
-    const collapseItemHeight = getItemHeight(collapseItem);
+    const collapseItemHeight = getItemHeight(collapseItem, menuDensity, layout);
     listRows.splice(regularRows.length, 0, { kind: 'item', item: collapseItem });
     const collapseItems = [];
     let listHeight = allRowsHeight + collapseItemHeight;
@@ -157,18 +166,18 @@ function getAutosizeCompositeBarRows(rows, height, collapseItem) {
                 if (index + 1 < listRows.length &&
                     (nextRow === null || nextRow === undefined ? undefined : nextRow.kind) === 'item' &&
                     nextRow.item.type === 'divider') {
-                    listHeight -= getItemHeight(compositeItem);
+                    listHeight -= getItemHeight(compositeItem, menuDensity, layout);
                     listRows.splice(index, 1);
                 }
                 continue;
             }
-            listHeight -= getItemHeight(compositeItem);
+            listHeight -= getItemHeight(compositeItem, menuDensity, layout);
             collapseItems.unshift(...listRows
                 .splice(index, 1)
                 .map((r) => r.item));
         }
         else {
-            listHeight -= getCompositeBarRowLayoutHeight(row);
+            listHeight -= getCompositeBarRowLayoutHeight(row, menuDensity, layout);
             const [removed] = listRows.splice(index, 1);
             if ((removed === null || removed === undefined ? undefined : removed.kind) === 'group') {
                 collapseItems.unshift(makeOverflowGroupAsideItem(removed.group, removed.items));
@@ -185,5 +194,5 @@ function getAutosizeCompositeBarRows(rows, height, collapseItem) {
     return { listRows, collapseItems };
 }
-export { getAutosizeCompositeBarRows, getCompositeBarRowsMinHeight, getItemHeight, getItemsHeight, getMoreButtonItem, getPopupItemHeight, getPopupItemsHeight, getReorderedCompositeBarRows, getSelectedCompositeBarRowIndex, getSelectedItemIndex, makeGroupHeaderAsideItem };
+export { getAutosizeCompositeBarRows, getCompositeBarRowsMinHeight, getItemHeight, getItemsHeight, getMoreButtonItem, getPopupItemHeight, getReorderedCompositeBarRows, getSelectedCompositeBarRowIndex, makeGroupHeaderAsideItem };
 //# sourceMappingURL=utils.js.map

package/build/esm/components/AsideHeader/components/CompositeBar/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {ITEM_HEIGHT, POPUP_REGULAR_ITEM_HEIGHT} from '../../../constants';\nimport {MenuGroup} from '../../../types';\nimport {AsideHeaderItem} from '../../types';\n\nimport {COLLAPSE_ITEM_ID, COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX} from './constants';\nimport type {CompositeBarRow} from './grouping';\n\nexport function getItemHeight(compositeItem: AsideHeaderItem) {\n switch (compositeItem.type) {\n case 'action':\n return 50;\n case 'divider':\n return 15;\n\n default:\n return ITEM_HEIGHT;\n }\n}\n\nexport function getPopupItemHeight(compositeItem: AsideHeaderItem) {\n switch (compositeItem.type) {\n case 'action':\n return 50;\n case 'divider':\n return 15;\n\n default:\n return POPUP_REGULAR_ITEM_HEIGHT;\n }\n}\n\nexport function getItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n return items.reduce((sum, item) => sum + getItemHeight(item), 0);\n}\n\nexport function getPopupItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n return items.reduce((sum, item) => sum + getPopupItemHeight(item), 0);\n}\n\nexport function getSelectedItemIndex(compositeItems: AsideHeaderItem[]) {\n const index = compositeItems.findIndex(({current}) => Boolean(current));\n return index === -1 ? undefined : index;\n}\n\nfunction getPinnedItems(compositeItems: AsideHeaderItem[]) {\n const pinnedItems: AsideHeaderItem[] = [];\n for (const compositeItem of compositeItems) {\n if (compositeItem.pinned) {\n pinnedItems.push(compositeItem);\n } else if (compositeItem.type === 'divider') {\n if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {\n pinnedItems.push(compositeItem);\n }\n }\n }\n return pinnedItems;\n}\n\nfunction getItemsMinHeight(compositeItems: AsideHeaderItem[]) {\n const pinnedItems = getPinnedItems(compositeItems);\n const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n\n return (\n getItemsHeight(pinnedItems) +\n getItemsHeight(afterMoreButtonItems) +\n (pinnedItems.length === compositeItems.length ? 0 : ITEM_HEIGHT)\n );\n}\n\nexport function getMoreButtonItem(menuMoreTitle?: string): AsideHeaderItem {\n return {\n id: COLLAPSE_ITEM_ID,\n title: menuMoreTitle,\n icon: Ellipsis,\n iconSize: 18,\n };\n}\n\nexport function makeGroupHeaderAsideItem(group: MenuGroup): AsideHeaderItem {\n return {\n id: `${COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX}${group.id}`,\n title: group.title,\n icon: group.icon,\n iconSize: group.iconSize,\n // Do not set `current` from children: only nested items should show selection;\n // otherwise the group header and root List row highlight the whole group block.\n };\n}\n\nfunction makeOverflowGroupAsideItem(\n group: MenuGroup,\n children: AsideHeaderItem[],\n): AsideHeaderItem {\n return {\n id: `__gn-composite-bar__group-overflow__${group.id}`,\n title: group.title,\n icon: group.icon,\n compositeBarMenuPopupItems: children,\n compositeBarMenuPopupTitle: group.popupTitle,\n };\n}\n\nfunction getCompositeBarRowLayoutHeight(row: CompositeBarRow): number {\n if (row.kind === 'item') {\n return getItemHeight(row.item);\n }\n return getItemHeight(makeGroupHeaderAsideItem(row.group));\n}\n\n/*\n Moves rows whose item has `afterMoreButton` to the end (parity with scroll vs collapse DOM order).\n \n @param rows Composite bar rows before ordering.\n * @returns Rows with `afterMoreButton` item rows last, or the same array reference when none.\n */\nexport function getReorderedCompositeBarRows(rows: CompositeBarRow[]): CompositeBarRow[] {\n const afterMoreRows = rows.filter((r) => r.kind === 'item' && r.item.afterMoreButton);\n\n if (afterMoreRows.length === 0) {\n return rows;\n }\n\n const regularRows = rows.filter((r) => !(r.kind === 'item' && r.item.afterMoreButton));\n\n return [...regularRows, ...afterMoreRows];\n}\n\nfunction compositeBarRowsToFlatForMinHeight(rows: CompositeBarRow[]): AsideHeaderItem[] {\n const out: AsideHeaderItem[] = [];\n for (const row of rows) {\n if (row.kind === 'item') {\n out.push(row.item);\n } else {\n out.push(makeGroupHeaderAsideItem(row.group));\n }\n }\n return out;\n}\n\nexport function getCompositeBarRowsMinHeight(rows: CompositeBarRow[]): number {\n return getItemsMinHeight(compositeBarRowsToFlatForMinHeight(rows));\n}\n\nexport function getSelectedCompositeBarRowIndex(rows: CompositeBarRow[]): number \| undefined {\n const index = rows.findIndex((row) => {\n if (row.kind === 'item') {\n return Boolean(row.item.current);\n }\n // Group rows embed their own List; selection is on nested items, not this root row.\n return false;\n });\n return index === -1 ? undefined : index;\n}\n\nexport function getAutosizeCompositeBarRows(\n rows: CompositeBarRow[],\n height: number,\n collapseItem: AsideHeaderItem,\n): {\n listRows: CompositeBarRow[];\n collapseItems: AsideHeaderItem[];\n} {\n const ordered = getReorderedCompositeBarRows(rows);\n const afterMoreRows = ordered.filter((r) => r.kind === 'item' && r.item.afterMoreButton);\n const regularRows = ordered.filter((r) => !(r.kind === 'item' && r.item.afterMoreButton));\n const listRows: CompositeBarRow[] = [...regularRows, ...afterMoreRows];\n\n const allRowsHeight = listRows.reduce(\n (sum, row) => sum + getCompositeBarRowLayoutHeight(row),\n 0,\n );\n if (allRowsHeight <= height) {\n return {listRows, collapseItems: []};\n }\n\n const collapseItemHeight = getItemHeight(collapseItem);\n\n listRows.splice(regularRows.length, 0, {kind: 'item', item: collapseItem});\n const collapseItems: AsideHeaderItem[] = [];\n\n let listHeight = allRowsHeight + collapseItemHeight;\n let index = listRows.length;\n while (listHeight > height) {\n if (index === 0) {\n break;\n }\n index--;\n\n const row = listRows[index];\n if (row.kind === 'item') {\n const compositeItem = row.item;\n if (\n compositeItem.pinned \|\|\n compositeItem.id === COLLAPSE_ITEM_ID \|\|\n compositeItem.afterMoreButton\n ) {\n continue;\n }\n if (compositeItem.type === 'divider') {\n const nextRow = listRows[index + 1];\n if (\n index + 1 < listRows.length &&\n nextRow?.kind === 'item' &&\n nextRow.item.type === 'divider'\n ) {\n listHeight -= getItemHeight(compositeItem);\n listRows.splice(index, 1);\n }\n continue;\n }\n listHeight -= getItemHeight(compositeItem);\n collapseItems.unshift(\n ...listRows\n .splice(index, 1)\n .map((r) => (r as Extract<CompositeBarRow, {kind: 'item'}>).item),\n );\n } else {\n listHeight -= getCompositeBarRowLayoutHeight(row);\n const [removed] = listRows.splice(index, 1);\n if (removed?.kind === 'group') {\n collapseItems.unshift(makeOverflowGroupAsideItem(removed.group, removed.items));\n }\n }\n }\n const at = listRows[index];\n const prev = listRows[index - 1];\n if (\n at?.kind === 'item' &&\n at.item.type === 'divider' &&\n (index === 0 \|\| (prev?.kind === 'item' && prev.item.type === 'divider'))\n ) {\n listRows.splice(index, 1);\n }\n\n return {listRows, collapseItems};\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../../../../src/components/AsideHeader/components/CompositeBar/utils.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {POPUP_REGULAR_ITEM_HEIGHT} from '../../../constants';\nimport {MenuGroup} from '../../../types';\nimport {AsideHeaderMenuDensity, getAsideHeaderDensityConfig} from '../../density';\nimport {AsideHeaderItem} from '../../types';\n\nimport {COLLAPSE_ITEM_ID, COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX} from './constants';\nimport type {CompositeBarRow} from './grouping';\nimport {isItemPresentationCurrent} from './presentationCurrent';\n\ntype CompositeBarItemLayoutOptions = {\n /** Collapsed sidebar (icon-only rows): multi-line titles use the regular row height. /\n sidebarCompact?: boolean;\n};\n\nfunction getRegularItemHeight(\n compositeItem: AsideHeaderItem,\n menuDensity: AsideHeaderMenuDensity,\n layout?: CompositeBarItemLayoutOptions,\n) {\n const config = getAsideHeaderDensityConfig(menuDensity);\n\n return compositeItem.titleLines === 2 && !layout?.sidebarCompact\n ? config.twoLineItemHeight\n : config.itemHeight;\n}\n\nexport function getItemHeight(\n compositeItem: AsideHeaderItem,\n menuDensity: AsideHeaderMenuDensity = 'default',\n layout?: CompositeBarItemLayoutOptions,\n) {\n switch (compositeItem.type) {\n case 'action':\n return getAsideHeaderDensityConfig(menuDensity).actionItemHeight;\n case 'divider':\n return 15;\n\n default:\n return getRegularItemHeight(compositeItem, menuDensity, layout);\n }\n}\n\nexport function getPopupItemHeight(compositeItem: AsideHeaderItem) {\n switch (compositeItem.type) {\n case 'action':\n return 50;\n case 'divider':\n return 15;\n\n default:\n return POPUP_REGULAR_ITEM_HEIGHT;\n }\n}\n\nexport function getItemsHeight<T extends AsideHeaderItem>(\n items: T[],\n menuDensity: AsideHeaderMenuDensity = 'default',\n layout?: CompositeBarItemLayoutOptions,\n) {\n return items.reduce((sum, item) => sum + getItemHeight(item, menuDensity, layout), 0);\n}\n\nexport function getPopupItemsHeight<T extends AsideHeaderItem>(items: T[]) {\n return items.reduce((sum, item) => sum + getPopupItemHeight(item), 0);\n}\n\nfunction getPinnedItems(compositeItems: AsideHeaderItem[]) {\n const pinnedItems: AsideHeaderItem[] = [];\n for (const compositeItem of compositeItems) {\n if (compositeItem.pinned) {\n pinnedItems.push(compositeItem);\n } else if (compositeItem.type === 'divider') {\n if (pinnedItems.length > 0 && pinnedItems[pinnedItems.length - 1].type !== 'divider') {\n pinnedItems.push(compositeItem);\n }\n }\n }\n return pinnedItems;\n}\n\nfunction getItemsMinHeight(\n compositeItems: AsideHeaderItem[],\n menuDensity: AsideHeaderMenuDensity = 'default',\n layout?: CompositeBarItemLayoutOptions,\n) {\n const pinnedItems = getPinnedItems(compositeItems);\n const afterMoreButtonItems = compositeItems.filter(({afterMoreButton}) => afterMoreButton);\n const {itemHeight} = getAsideHeaderDensityConfig(menuDensity);\n\n return (\n getItemsHeight(pinnedItems, menuDensity, layout) +\n getItemsHeight(afterMoreButtonItems, menuDensity, layout) +\n (pinnedItems.length === compositeItems.length ? 0 : itemHeight)\n );\n}\n\nexport function getMoreButtonItem(\n menuMoreTitle?: string,\n menuDensity: AsideHeaderMenuDensity = 'default',\n): AsideHeaderItem {\n const {iconSize} = getAsideHeaderDensityConfig(menuDensity);\n\n return {\n id: COLLAPSE_ITEM_ID,\n title: menuMoreTitle,\n icon: Ellipsis,\n iconSize,\n };\n}\n\nexport function makeGroupHeaderAsideItem(group: MenuGroup): AsideHeaderItem {\n return {\n id: `${COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX}${group.id}`,\n title: group.title,\n icon: group.icon,\n iconSize: group.iconSize,\n // `current` comes only from the group itself (its own page), never from\n // children: nested items show their own selection, and the root List row\n // must not highlight the whole group block.\n current: group.current,\n };\n}\n\nfunction makeOverflowGroupAsideItem(\n group: MenuGroup,\n children: AsideHeaderItem[],\n): AsideHeaderItem {\n return {\n id: `__gn-composite-bar__group-overflow__${group.id}`,\n title: group.title,\n icon: group.icon,\n iconSize: group.iconSize,\n current: group.current,\n href: group.href,\n onItemClick: group.onItemClick,\n compositeBarMenuPopupItems: children,\n compositeBarMenuPopupTitle: group.popupTitle,\n };\n}\n\nfunction getCompositeBarRowLayoutHeight(\n row: CompositeBarRow,\n menuDensity: AsideHeaderMenuDensity = 'default',\n layout?: CompositeBarItemLayoutOptions,\n): number {\n if (row.kind === 'item') {\n return getItemHeight(row.item, menuDensity, layout);\n }\n return getItemHeight(makeGroupHeaderAsideItem(row.group), menuDensity, layout);\n}\n\n/\n Moves rows whose item has `afterMoreButton` to the end (parity with scroll vs collapse DOM order).\n \n @param rows Composite bar rows before ordering.\n * @returns Rows with `afterMoreButton` item rows last, or the same array reference when none.\n */\nexport function getReorderedCompositeBarRows(rows: CompositeBarRow[]): CompositeBarRow[] {\n const afterMoreRows = rows.filter((r) => r.kind === 'item' && r.item.afterMoreButton);\n\n if (afterMoreRows.length === 0) {\n return rows;\n }\n\n const regularRows = rows.filter((r) => !(r.kind === 'item' && r.item.afterMoreButton));\n\n return [...regularRows, ...afterMoreRows];\n}\n\nfunction compositeBarRowsToFlatForMinHeight(rows: CompositeBarRow[]): AsideHeaderItem[] {\n const out: AsideHeaderItem[] = [];\n for (const row of rows) {\n if (row.kind === 'item') {\n out.push(row.item);\n } else {\n out.push(makeGroupHeaderAsideItem(row.group));\n }\n }\n return out;\n}\n\nexport function getCompositeBarRowsMinHeight(\n rows: CompositeBarRow[],\n menuDensity: AsideHeaderMenuDensity = 'default',\n layout?: CompositeBarItemLayoutOptions,\n): number {\n return getItemsMinHeight(compositeBarRowsToFlatForMinHeight(rows), menuDensity, layout);\n}\n\nexport function getSelectedCompositeBarRowIndex(\n rows: CompositeBarRow[],\n suppressCurrentItemIds?: ReadonlySet<string>,\n): number \| undefined {\n const index = rows.findIndex((row) => {\n if (row.kind === 'item') {\n return isItemPresentationCurrent(row.item, {suppressCurrentItemIds});\n }\n // Group rows embed their own List; selection is on nested items, not this root row.\n return false;\n });\n return index === -1 ? undefined : index;\n}\n\nexport function getAutosizeCompositeBarRows(\n rows: CompositeBarRow[],\n height: number,\n collapseItem: AsideHeaderItem,\n menuDensity: AsideHeaderMenuDensity = 'default',\n layout?: CompositeBarItemLayoutOptions,\n): {\n listRows: CompositeBarRow[];\n collapseItems: AsideHeaderItem[];\n} {\n const ordered = getReorderedCompositeBarRows(rows);\n const afterMoreRows = ordered.filter((r) => r.kind === 'item' && r.item.afterMoreButton);\n const regularRows = ordered.filter((r) => !(r.kind === 'item' && r.item.afterMoreButton));\n const listRows: CompositeBarRow[] = [...regularRows, ...afterMoreRows];\n\n const allRowsHeight = listRows.reduce(\n (sum, row) => sum + getCompositeBarRowLayoutHeight(row, menuDensity, layout),\n 0,\n );\n if (allRowsHeight <= height) {\n return {listRows, collapseItems: []};\n }\n\n const collapseItemHeight = getItemHeight(collapseItem, menuDensity, layout);\n\n listRows.splice(regularRows.length, 0, {kind: 'item', item: collapseItem});\n const collapseItems: AsideHeaderItem[] = [];\n\n let listHeight = allRowsHeight + collapseItemHeight;\n let index = listRows.length;\n while (listHeight > height) {\n if (index === 0) {\n break;\n }\n index--;\n\n const row = listRows[index];\n if (row.kind === 'item') {\n const compositeItem = row.item;\n if (\n compositeItem.pinned \|\|\n compositeItem.id === COLLAPSE_ITEM_ID \|\|\n compositeItem.afterMoreButton\n ) {\n continue;\n }\n if (compositeItem.type === 'divider') {\n const nextRow = listRows[index + 1];\n if (\n index + 1 < listRows.length &&\n nextRow?.kind === 'item' &&\n nextRow.item.type === 'divider'\n ) {\n listHeight -= getItemHeight(compositeItem, menuDensity, layout);\n listRows.splice(index, 1);\n }\n continue;\n }\n listHeight -= getItemHeight(compositeItem, menuDensity, layout);\n collapseItems.unshift(\n ...listRows\n .splice(index, 1)\n .map((r) => (r as Extract<CompositeBarRow, {kind: 'item'}>).item),\n );\n } else {\n listHeight -= getCompositeBarRowLayoutHeight(row, menuDensity, layout);\n const [removed] = listRows.splice(index, 1);\n if (removed?.kind === 'group') {\n collapseItems.unshift(makeOverflowGroupAsideItem(removed.group, removed.items));\n }\n }\n }\n const at = listRows[index];\n const prev = listRows[index - 1];\n if (\n at?.kind === 'item' &&\n at.item.type === 'divider' &&\n (index === 0 \|\| (prev?.kind === 'item' && prev.item.type === 'divider'))\n ) {\n listRows.splice(index, 1);\n }\n\n return {listRows, collapseItems};\n}\n"],"names":[],"mappings":"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"}

package/build/esm/components/AsideHeader/components/FirstPanel.js CHANGED Viewed

@@ -1,40 +1,159 @@
-import React__default, { useRef } from 'react';
-import { setRef } from '@gravity-ui/uikit';
+import React__default, { useState, useRef, useCallback } from 'react';
+import { useUniqId, setRef } from '@gravity-ui/uikit';
 import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
 import i18n from '../i18n/index.js';
+import { getQuickAccessMenuItems } from '../quickAccess.js';
 import { b } from '../utils.js';
 import './AllPagesPanel/AllPagesPanel.js';
 import '@gravity-ui/icons';
 import '../types.js';
 import './AllPagesPanel/i18n/index.js';
 import { useVisibleMenuItems } from './AllPagesPanel/useVisibleMenuItems.js';
+import { AsideDivider } from './AsideDivider.js';
 import { CollapseButton } from './CollapseButton/CollapseButton.js';
+import { useCollapseAnchor, CollapseAnchorContext } from './CollapseButton/useCollapseAnchor.js';
 import { CompositeBar } from './CompositeBar/CompositeBar.js';
+import { ScrollableWithScrollbar } from './CompositeBar/ScrollableWithScrollbar/ScrollableWithScrollbar.js';
+import { COMPOSITE_BAR_ITEM_ID_ATTRIBUTE } from './CompositeBar/constants.js';
 import { Header } from './Header.js';
 import { Panels } from './Panels.js';
 const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
+const QUICK_ACCESS_COMPOSITE_ID = 'gravity-ui/navigation-quick-access-composite-bar';
+const FOCUSABLE_ITEM_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function findCompositeBar(root, id) {
+    return Array.from(root.querySelectorAll('[id]')).find((element) => element.id === id);
+}
+function findCompositeBarItemFocusTarget(root, itemId) {
+    var _a;
+    if (!root) {
+        return undefined;
+    }
+    const itemElements = Array.from(root.querySelectorAll(`[${COMPOSITE_BAR_ITEM_ID_ATTRIBUTE}]`));
+    const itemElement = itemId
+        ? itemElements.find((element) => element.getAttribute(COMPOSITE_BAR_ITEM_ID_ATTRIBUTE) === itemId)
+        : itemElements[0];
+    if (!itemElement) {
+        return undefined;
+    }
+    if (itemElement.matches(FOCUSABLE_ITEM_SELECTOR)) {
+        return itemElement;
+    }
+    const wrappingFocusable = itemElement.closest(FOCUSABLE_ITEM_SELECTOR);
+    if (wrappingFocusable && root.contains(wrappingFocusable)) {
+        return wrappingFocusable;
+    }
+    return (_a = itemElement.querySelector(FOCUSABLE_ITEM_SELECTOR)) !== null && _a !== undefined ? _a : undefined;
+}
 const FirstPanel = React__default.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuOverflow, collapsedMenuGroupIds, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, aboveMenuContent, qa, } = useAsideHeaderInnerContext();
+    const { size, onItemClick, headerDecoration, hideSectionDividers, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuGroupNestedIcons, menuOverflow, collapsedMenuGroupIds, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, aboveMenuContent, enableQuickAccess = false, quickAccessHighlightInMainMenu = false, quickAccessIsAvailable, onToggleQuickAccess, qa, } = useAsideHeaderInnerContext();
+    const panelId = useUniqId();
+    const collapseAnchor = useCollapseAnchor(!hideCollapseButton, compact);
     const visibleMenuItems = useVisibleMenuItems();
+    const quickAccessEnabled = enableQuickAccess;
+    const quickAccessItems = React__default.useMemo(() => (quickAccessEnabled ? getQuickAccessMenuItems(visibleMenuItems, menuGroups) : []), [menuGroups, quickAccessEnabled, visibleMenuItems]);
+    const suppressedCurrentItemIds = React__default.useMemo(() => quickAccessEnabled && !quickAccessHighlightInMainMenu
+        ? new Set(quickAccessItems.map((item) => item.id))
+        : undefined, [quickAccessEnabled, quickAccessHighlightInMainMenu, quickAccessItems]);
+    const hasQuickAccessItems = quickAccessItems.length > 0;
+    const [menuScrollOverflows, setMenuScrollOverflows] = useState(false);
     const asideRef = useRef(null);
+    const pendingQuickAccessFocusRef = useRef();
+    const handleMenuScrollOverflowChange = useCallback((overflows) => {
+        setMenuScrollOverflows(overflows);
+    }, []);
+    const handleQuickAccessToggle = React__default.useCallback((item, event) => {
+        var _a, _b;
+        if (item.quickAccess &&
+            (event === null || event === undefined ? undefined : event.detail) === 0 &&
+            event.currentTarget.ownerDocument.activeElement === event.currentTarget) {
+            const itemIndex = quickAccessItems.findIndex((quickAccessItem) => quickAccessItem.id === item.id);
+            pendingQuickAccessFocusRef.current = {
+                itemId: item.id,
+                nextItemId: (_a = quickAccessItems[itemIndex + 1]) === null || _a === undefined ? undefined : _a.id,
+                previousItemId: (_b = quickAccessItems[itemIndex - 1]) === null || _b === undefined ? undefined : _b.id,
+                trigger: event.currentTarget,
+            };
+        }
+        onToggleQuickAccess(item);
+    }, [onToggleQuickAccess, quickAccessItems]);
+    React__default.useEffect(() => {
+        var _a, _b, _c, _d, _e;
+        const pendingFocus = pendingQuickAccessFocusRef.current;
+        if (!pendingFocus ||
+            quickAccessItems.some((quickAccessItem) => quickAccessItem.id === pendingFocus.itemId)) {
+            return;
+        }
+        const ownerDocument = pendingFocus.trigger.ownerDocument;
+        const asideRoot = (_a = asideRef.current) === null || _a === undefined ? undefined : _a.parentElement;
+        if (!asideRoot) {
+            pendingQuickAccessFocusRef.current = undefined;
+            return;
+        }
+        const quickAccessRoot = findCompositeBar(asideRoot, QUICK_ACCESS_COMPOSITE_ID);
+        const menuRoot = findCompositeBar(asideRoot, MENU_ITEMS_COMPOSITE_ID);
+        const remainingQuickAccessIds = new Set(quickAccessItems.map((item) => item.id));
+        const adjacentQuickAccessItemId = [
+            pendingFocus.nextItemId,
+            pendingFocus.previousItemId,
+        ].find((itemId) => itemId && remainingQuickAccessIds.has(itemId));
+        const focusTarget = (_e = (_d = (_c = (_b = findCompositeBarItemFocusTarget(quickAccessRoot, adjacentQuickAccessItemId)) !== null && _b !== undefined ? _b : findCompositeBarItemFocusTarget(menuRoot, pendingFocus.itemId)) !== null && _c !== undefined ? _c : findCompositeBarItemFocusTarget(quickAccessRoot)) !== null && _d !== undefined ? _d : findCompositeBarItemFocusTarget(menuRoot)) !== null && _e !== undefined ? _e : asideRoot.querySelector(FOCUSABLE_ITEM_SELECTOR);
+        const ownerWindow = ownerDocument.defaultView;
+        if (!focusTarget || !ownerWindow) {
+            pendingQuickAccessFocusRef.current = undefined;
+            return;
+        }
+        // Finish the keyboard activation first: focus applied during the click can otherwise
+        // be reset to body when the removed button completes its native activation lifecycle.
+        ownerWindow.requestAnimationFrame(() => {
+            if (pendingQuickAccessFocusRef.current !== pendingFocus) {
+                return;
+            }
+            pendingQuickAccessFocusRef.current = undefined;
+            const nextActiveElement = ownerDocument.activeElement;
+            // Do not steal focus if the user moved it before an asynchronous controlled update.
+            if (nextActiveElement === ownerDocument.body ||
+                nextActiveElement === ownerDocument.documentElement) {
+                focusTarget.focus();
+            }
+        });
+    }, [quickAccessItems]);
+    const quickAccessCompositeBar = (React__default.createElement(CompositeBar, { menuItemClassName: b('menu-item'), compositeId: QUICK_ACCESS_COMPOSITE_ID, type: "quick-access", compact: compact, items: quickAccessItems, onItemClick: onItemClick, enableQuickAccessPin: quickAccessIsAvailable, onToggleQuickAccess: handleQuickAccessToggle }));
+    const menuCompositeBar = (React__default.createElement(CompositeBar, { menuItemClassName: b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, layoutWidth: size, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuGroupNestedIcons: menuGroupNestedIcons, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, menuOverflow: menuOverflow, collapsedMenuGroupIds: collapsedMenuGroupIds, defaultCollapsedMenuGroupIds: defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed: onToggleMenuGroupCollapsed, enableQuickAccessPin: quickAccessIsAvailable, onToggleQuickAccess: onToggleQuickAccess, suppressCurrentItemIds: suppressedCurrentItemIds }));
+    const quickAccessSection = hasQuickAccessItems ? (React__default.createElement("div", { className: b('quick-access'), "data-gn-aside-current-container": true },
+        !compact && (React__default.createElement("div", { className: b('quick-access-title'), "data-gn-aside-part": "quick-access-title" }, i18n('quick_access_title'))),
+        quickAccessCompositeBar,
+        React__default.createElement(AsideDivider, { className: b('quick-access-divider'), transitionId: "quick-access" }))) : null;
+    const menuSection = visibleMenuItems.length ? (menuCompositeBar) : (React__default.createElement("div", { className: b('menu-items') }));
     React__default.useEffect(() => {
         setRef(ref, asideRef.current);
     }, [ref]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: b('aside', { 'menu-overflow-scroll': menuOverflow === 'scroll' && !compact }, className), style: { width: size }, "data-qa": qa },
+        React__default.createElement("div", { className: b('aside', className), style: { width: size }, "data-qa": qa, "data-gn-aside-panel": true, id: panelId, ref: collapseAnchor.panelRef },
             React__default.createElement("div", { className: b('aside-popup-anchor'), ref: asideRef }),
             customBackground && (React__default.createElement("div", { className: b('aside-custom-background', customBackgroundClassName) }, customBackground)),
-            React__default.createElement("div", { className: b('aside-content', { ['with-decoration']: headerDecoration }) },
+            React__default.createElement("div", { className: b('aside-content', {
+                    'with-decoration': headerDecoration,
+                    'hide-section-dividers': hideSectionDividers,
+                    'with-quick-access': quickAccessEnabled,
+                    'with-quick-access-items': quickAccessEnabled && hasQuickAccessItems,
+                }) },
                 React__default.createElement(Header, null),
                 aboveMenuContent,
-                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { menuItemClassName: b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, menuOverflow: menuOverflow, collapsedMenuGroupIds: collapsedMenuGroupIds, defaultCollapsedMenuGroupIds: defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed: onToggleMenuGroupCollapsed })) : (React__default.createElement("div", { className: b('menu-items') })),
-                React__default.createElement("div", { className: b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
-                    size,
-                    compact: Boolean(compact),
-                    asideRef,
-                })),
-                !hideCollapseButton && React__default.createElement(CollapseButton, null))),
+                React__default.createElement(ScrollableWithScrollbar, { className: b('unified-menu-scroll'), onOverflowChange: handleMenuScrollOverflowChange, showScrollDividers: hideSectionDividers },
+                    React__default.createElement("div", { className: b('unified-menu-content'), "data-gn-aside-current-container": true },
+                        quickAccessSection,
+                        menuSection)),
+                React__default.createElement("div", { className: b('footer', { 'with-divider': menuScrollOverflows }), ref: collapseAnchor.footerRef },
+                    React__default.createElement(CollapseAnchorContext.Provider, { value: collapseAnchor.context },
+                        React__default.createElement(AsideDivider, { className: b('footer-divider'), transitionId: "footer" }), renderFooter === null || renderFooter === undefined ? undefined :
+                        renderFooter({
+                            size,
+                            compact: Boolean(compact),
+                            asideRef,
+                        }),
+                        !hideCollapseButton && !collapseAnchor.selected && (React__default.createElement("div", { "data-gn-collapse-fallback": true, "data-gn-collapse-anchor": "", className: b('collapse-fallback'), ref: collapseAnchor.fallbackRef })))))),
+        !hideCollapseButton && (React__default.createElement(CollapseButton, { panelId: panelId, slotRef: collapseAnchor.slotRef })),
         React__default.createElement(Panels, null)));
 });
 FirstPanel.displayName = 'FirstPanel';

package/build/esm/components/AsideHeader/components/FirstPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CompositeBar} from './CompositeBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n const {\n size,\n onItemClick,\n headerDecoration,\n menuMoreTitle,\n onMenuMoreClick,\n renderFooter,\n compact,\n customBackground,\n customBackgroundClassName,\n className,\n hideCollapseButton,\n menuGroups,\n menuOverflow,\n collapsedMenuGroupIds,\n defaultCollapsedMenuGroupIds,\n onToggleMenuGroupCollapsed,\n aboveMenuContent,\n qa,\n } = useAsideHeaderInnerContext();\n const visibleMenuItems = useVisibleMenuItems();\n\n const asideRef = useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n setRef<HTMLDivElement>(ref, asideRef.current);\n }, [ref]);\n\n return (\n <React.Fragment>\n <div\n className={b(\n 'aside',\n {'menu-overflow-scroll': menuOverflow === 'scroll' && !compact},\n className,\n )}\n style={{width: size}}\n data-qa={qa}\n >\n <div className={b('aside-popup-anchor')} ref={asideRef} />\n {customBackground && (\n <div className={b('aside-custom-background', customBackgroundClassName)}>\n {customBackground}\n </div>\n )}\n\n <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n <Header />\n {aboveMenuContent}\n {visibleMenuItems?.length ? (\n <CompositeBar\n menuItemClassName={b('menu-item')}\n compositeId={MENU_ITEMS_COMPOSITE_ID}\n type=\"menu\"\n compact={compact}\n items={visibleMenuItems}\n menuGroups={menuGroups}\n menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n onItemClick={onItemClick}\n onMoreClick={onMenuMoreClick}\n menuOverflow={menuOverflow}\n collapsedMenuGroupIds={collapsedMenuGroupIds}\n defaultCollapsedMenuGroupIds={defaultCollapsedMenuGroupIds}\n onToggleMenuGroupCollapsed={onToggleMenuGroupCollapsed}\n />\n ) : (\n <div className={b('menu-items')} />\n )}\n <div className={b('footer')}>\n {renderFooter?.({\n size,\n compact: Boolean(compact),\n asideRef,\n })}\n </div>\n {!hideCollapseButton && <CollapseButton />}\n </div>\n </div>\n <Panels />\n </React.Fragment>\n );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["React"],"mappings":"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"}
1	+ {"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useCallback, useRef, useState} from 'react';\n\nimport {setRef, useUniqId} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {getQuickAccessMenuItems} from '../quickAccess';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {AsideDivider} from './AsideDivider';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CollapseAnchorContext, useCollapseAnchor} from './CollapseButton/useCollapseAnchor';\nimport {CompositeBar} from './CompositeBar';\nimport type {QuickAccessToggleHandler} from './CompositeBar/Item/Item.types';\nimport {ScrollableWithScrollbar} from './CompositeBar/ScrollableWithScrollbar';\nimport {COMPOSITE_BAR_ITEM_ID_ATTRIBUTE} from './CompositeBar/constants';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\nconst QUICK_ACCESS_COMPOSITE_ID = 'gravity-ui/navigation-quick-access-composite-bar';\nconst FOCUSABLE_ITEM_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\ntype PendingQuickAccessFocus = {\n itemId: string;\n nextItemId?: string;\n previousItemId?: string;\n trigger: HTMLButtonElement;\n};\n\nfunction findCompositeBar(root: HTMLElement, id: string) {\n return Array.from(root.querySelectorAll<HTMLElement>('[id]')).find(\n (element) => element.id === id,\n );\n}\n\nfunction findCompositeBarItemFocusTarget(root?: HTMLElement, itemId?: string) {\n if (!root) {\n return undefined;\n }\n\n const itemElements = Array.from(\n root.querySelectorAll<HTMLElement>(`[${COMPOSITE_BAR_ITEM_ID_ATTRIBUTE}]`),\n );\n const itemElement = itemId\n ? itemElements.find(\n (element) => element.getAttribute(COMPOSITE_BAR_ITEM_ID_ATTRIBUTE) === itemId,\n )\n : itemElements[0];\n\n if (!itemElement) {\n return undefined;\n }\n\n if (itemElement.matches(FOCUSABLE_ITEM_SELECTOR)) {\n return itemElement;\n }\n\n const wrappingFocusable = itemElement.closest<HTMLElement>(FOCUSABLE_ITEM_SELECTOR);\n\n if (wrappingFocusable && root.contains(wrappingFocusable)) {\n return wrappingFocusable;\n }\n\n return itemElement.querySelector<HTMLElement>(FOCUSABLE_ITEM_SELECTOR) ?? undefined;\n}\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n const {\n size,\n onItemClick,\n headerDecoration,\n hideSectionDividers,\n menuMoreTitle,\n onMenuMoreClick,\n renderFooter,\n compact,\n customBackground,\n customBackgroundClassName,\n className,\n hideCollapseButton,\n menuGroups,\n menuGroupNestedIcons,\n menuOverflow,\n collapsedMenuGroupIds,\n defaultCollapsedMenuGroupIds,\n onToggleMenuGroupCollapsed,\n aboveMenuContent,\n enableQuickAccess = false,\n quickAccessHighlightInMainMenu = false,\n quickAccessIsAvailable,\n onToggleQuickAccess,\n qa,\n } = useAsideHeaderInnerContext();\n const panelId = useUniqId();\n const collapseAnchor = useCollapseAnchor(!hideCollapseButton, compact);\n const visibleMenuItems = useVisibleMenuItems();\n const quickAccessEnabled = enableQuickAccess;\n const quickAccessItems = React.useMemo(\n () => (quickAccessEnabled ? getQuickAccessMenuItems(visibleMenuItems, menuGroups) : []),\n [menuGroups, quickAccessEnabled, visibleMenuItems],\n );\n const suppressedCurrentItemIds = React.useMemo(\n () =>\n quickAccessEnabled && !quickAccessHighlightInMainMenu\n ? new Set(quickAccessItems.map((item) => item.id))\n : undefined,\n [quickAccessEnabled, quickAccessHighlightInMainMenu, quickAccessItems],\n );\n const hasQuickAccessItems = quickAccessItems.length > 0;\n const [menuScrollOverflows, setMenuScrollOverflows] = useState(false);\n const asideRef = useRef<HTMLDivElement>(null);\n const pendingQuickAccessFocusRef = useRef<PendingQuickAccessFocus>();\n\n const handleMenuScrollOverflowChange = useCallback((overflows: boolean) => {\n setMenuScrollOverflows(overflows);\n }, []);\n\n const handleQuickAccessToggle = React.useCallback<QuickAccessToggleHandler>(\n (item, event) => {\n if (\n item.quickAccess &&\n event?.detail === 0 &&\n event.currentTarget.ownerDocument.activeElement === event.currentTarget\n ) {\n const itemIndex = quickAccessItems.findIndex(\n (quickAccessItem) => quickAccessItem.id === item.id,\n );\n\n pendingQuickAccessFocusRef.current = {\n itemId: item.id,\n nextItemId: quickAccessItems[itemIndex + 1]?.id,\n previousItemId: quickAccessItems[itemIndex - 1]?.id,\n trigger: event.currentTarget,\n };\n }\n\n onToggleQuickAccess(item);\n },\n [onToggleQuickAccess, quickAccessItems],\n );\n\n React.useEffect(() => {\n const pendingFocus = pendingQuickAccessFocusRef.current;\n\n if (\n !pendingFocus \|\|\n quickAccessItems.some((quickAccessItem) => quickAccessItem.id === pendingFocus.itemId)\n ) {\n return;\n }\n\n const ownerDocument = pendingFocus.trigger.ownerDocument;\n const asideRoot = asideRef.current?.parentElement;\n\n if (!asideRoot) {\n pendingQuickAccessFocusRef.current = undefined;\n return;\n }\n\n const quickAccessRoot = findCompositeBar(asideRoot, QUICK_ACCESS_COMPOSITE_ID);\n const menuRoot = findCompositeBar(asideRoot, MENU_ITEMS_COMPOSITE_ID);\n const remainingQuickAccessIds = new Set(quickAccessItems.map((item) => item.id));\n const adjacentQuickAccessItemId = [\n pendingFocus.nextItemId,\n pendingFocus.previousItemId,\n ].find((itemId) => itemId && remainingQuickAccessIds.has(itemId));\n const focusTarget =\n findCompositeBarItemFocusTarget(quickAccessRoot, adjacentQuickAccessItemId) ??\n findCompositeBarItemFocusTarget(menuRoot, pendingFocus.itemId) ??\n findCompositeBarItemFocusTarget(quickAccessRoot) ??\n findCompositeBarItemFocusTarget(menuRoot) ??\n asideRoot.querySelector<HTMLElement>(FOCUSABLE_ITEM_SELECTOR);\n const ownerWindow = ownerDocument.defaultView;\n\n if (!focusTarget \|\| !ownerWindow) {\n pendingQuickAccessFocusRef.current = undefined;\n return;\n }\n\n // Finish the keyboard activation first: focus applied during the click can otherwise\n // be reset to body when the removed button completes its native activation lifecycle.\n ownerWindow.requestAnimationFrame(() => {\n if (pendingQuickAccessFocusRef.current !== pendingFocus) {\n return;\n }\n\n pendingQuickAccessFocusRef.current = undefined;\n const nextActiveElement = ownerDocument.activeElement;\n\n // Do not steal focus if the user moved it before an asynchronous controlled update.\n if (\n nextActiveElement === ownerDocument.body \|\|\n nextActiveElement === ownerDocument.documentElement\n ) {\n focusTarget.focus();\n }\n });\n }, [quickAccessItems]);\n\n const quickAccessCompositeBar = (\n <CompositeBar\n menuItemClassName={b('menu-item')}\n compositeId={QUICK_ACCESS_COMPOSITE_ID}\n type=\"quick-access\"\n compact={compact}\n items={quickAccessItems}\n onItemClick={onItemClick}\n enableQuickAccessPin={quickAccessIsAvailable}\n onToggleQuickAccess={handleQuickAccessToggle}\n />\n );\n\n const menuCompositeBar = (\n <CompositeBar\n menuItemClassName={b('menu-item')}\n compositeId={MENU_ITEMS_COMPOSITE_ID}\n layoutWidth={size}\n type=\"menu\"\n compact={compact}\n items={visibleMenuItems}\n menuGroups={menuGroups}\n menuGroupNestedIcons={menuGroupNestedIcons}\n menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n onItemClick={onItemClick}\n onMoreClick={onMenuMoreClick}\n menuOverflow={menuOverflow}\n collapsedMenuGroupIds={collapsedMenuGroupIds}\n defaultCollapsedMenuGroupIds={defaultCollapsedMenuGroupIds}\n onToggleMenuGroupCollapsed={onToggleMenuGroupCollapsed}\n enableQuickAccessPin={quickAccessIsAvailable}\n onToggleQuickAccess={onToggleQuickAccess}\n suppressCurrentItemIds={suppressedCurrentItemIds}\n />\n );\n\n const quickAccessSection = hasQuickAccessItems ? (\n <div className={b('quick-access')} data-gn-aside-current-container>\n {!compact && (\n <div className={b('quick-access-title')} data-gn-aside-part=\"quick-access-title\">\n {i18n('quick_access_title')}\n </div>\n )}\n {quickAccessCompositeBar}\n <AsideDivider className={b('quick-access-divider')} transitionId=\"quick-access\" />\n </div>\n ) : null;\n\n const menuSection = visibleMenuItems.length ? (\n menuCompositeBar\n ) : (\n <div className={b('menu-items')} />\n );\n\n React.useEffect(() => {\n setRef<HTMLDivElement>(ref, asideRef.current);\n }, [ref]);\n\n return (\n <React.Fragment>\n <div\n className={b('aside', className)}\n style={{width: size}}\n data-qa={qa}\n data-gn-aside-panel\n id={panelId}\n ref={collapseAnchor.panelRef}\n >\n <div className={b('aside-popup-anchor')} ref={asideRef} />\n {customBackground && (\n <div className={b('aside-custom-background', customBackgroundClassName)}>\n {customBackground}\n </div>\n )}\n\n <div\n className={b('aside-content', {\n 'with-decoration': headerDecoration,\n 'hide-section-dividers': hideSectionDividers,\n 'with-quick-access': quickAccessEnabled,\n 'with-quick-access-items': quickAccessEnabled && hasQuickAccessItems,\n })}\n >\n <Header />\n {aboveMenuContent}\n <ScrollableWithScrollbar\n className={b('unified-menu-scroll')}\n onOverflowChange={handleMenuScrollOverflowChange}\n showScrollDividers={hideSectionDividers}\n >\n <div className={b('unified-menu-content')} data-gn-aside-current-container>\n {quickAccessSection}\n {menuSection}\n </div>\n </ScrollableWithScrollbar>\n <div\n className={b('footer', {'with-divider': menuScrollOverflows})}\n ref={collapseAnchor.footerRef}\n >\n <CollapseAnchorContext.Provider value={collapseAnchor.context}>\n <AsideDivider className={b('footer-divider')} transitionId=\"footer\" />\n {renderFooter?.({\n size,\n compact: Boolean(compact),\n asideRef,\n })}\n {!hideCollapseButton && !collapseAnchor.selected && (\n <div\n data-gn-collapse-fallback\n data-gn-collapse-anchor=\"\"\n className={b('collapse-fallback')}\n ref={collapseAnchor.fallbackRef}\n />\n )}\n </CollapseAnchorContext.Provider>\n </div>\n </div>\n </div>\n {!hideCollapseButton && (\n <CollapseButton panelId={panelId} slotRef={collapseAnchor.slotRef} />\n )}\n <Panels />\n </React.Fragment>\n );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.FooterItem-module__gn-footer-item___Hi7NH{border-radius:var(--gn-aside-header-item-expanded-radius);width:100%}
+.FooterItem-module__gn-footer-item___Hi7NH{border-radius:var(--gn-aside-header-item-expanded-radius,var(--_--gn-aside-header-density-item-expanded-radius,8px));width:100%}.FooterItem-module__gn-footer-item___Hi7NH[data-gn-collapse-anchor]:not(.FooterItem-module__gn-footer-item_compact___rth8I){margin-inline:0 24px;width:calc(100% - 24px)}.FooterItem-module__gn-footer-item___Hi7NH[data-gn-collapse-anchor]:not(.FooterItem-module__gn-footer-item_compact___rth8I)[data-type=action]{margin-inline:10px 34px;width:calc(100% - 44px)}
 .FooterItem-module__gn-mobile-header-footer-item___dk-Wo{flex-grow:1;position:relative}.FooterItem-module__gn-mobile-header-footer-item__button___KSu25{align-items:center;background:none;border:none;box-sizing:border-box;color:inherit;cursor:pointer;display:flex;font-family:var(--g-text-body-font-family);font-size:inherit;font-weight:var(--g-text-body-font-weight);justify-content:center;outline:none;padding:13px 10px;width:100%}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo .FooterItem-module__gn-mobile-header-footer-item__icon___Spltd{color:var(--g-color-text-misc)}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo+.FooterItem-module__gn-mobile-header-footer-item___dk-Wo:before{border-left:1px solid var(--g-color-base-generic);bottom:8px;content:"";left:0;position:absolute;top:8px}.FooterItem-module__gn-mobile-header-footer-item___dk-Wo:empty{display:none}

package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.js CHANGED Viewed

@@ -1,8 +1,10 @@
 import './FooterItem.css';
 import { __rest } from 'tslib';
 import React__default from 'react';
-import { ASIDE_HEADER_ICON_SIZE } from '../../../constants.js';
 import { createBlock, block } from '../../../utils/cn.js';
+import { useAsideHeaderContext } from '../../AsideHeaderContext.js';
+import { getAsideHeaderDensityConfig } from '../../density.js';
+import { CollapseAnchorContext } from '../CollapseButton/useCollapseAnchor.js';
 import { Item } from '../CompositeBar/Item/Item.js';
 import styles from './FooterItem.module.scss.js';
@@ -10,7 +12,21 @@ const b = createBlock('footer-item', styles);
 const bGlobal = block('footer-item');
 function FooterItem(_a) {
     var { regularSize } = _a, props = __rest(_a, ["regularSize"]);
-    return (React__default.createElement(Item, Object.assign({}, props, { iconSize: ASIDE_HEADER_ICON_SIZE, className: `${b({ compact: props.compact })} ${bGlobal({ 'regular-size': regularSize })}` })));
+    const anchor = React__default.useContext(CollapseAnchorContext);
+    const register = anchor === null || anchor === undefined ? undefined : anchor.register;
+    const [registrationId] = React__default.useState(() => Symbol());
+    const cleanup = React__default.useRef();
+    const rowRef = React__default.useCallback((element) => {
+        var _a;
+        (_a = cleanup.current) === null || _a === undefined ? undefined : _a.call(cleanup);
+        cleanup.current = undefined;
+        if (element && register)
+            cleanup.current = register(element, registrationId);
+    }, [register, registrationId]);
+    const suppressTooltip = Boolean((anchor === null || anchor === undefined ? undefined : anchor.compact) && anchor.selectedId === registrationId);
+    const { menuDensity } = useAsideHeaderContext();
+    const { iconSize } = getAsideHeaderDensityConfig(menuDensity);
+    return (React__default.createElement(Item, Object.assign({}, props, { rowRef: rowRef, enableTooltip: suppressTooltip ? false : props.enableTooltip, iconSize: iconSize, className: `${b({ compact: props.compact })} ${bGlobal({ 'regular-size': regularSize })}` })));
 }
 export { FooterItem };

package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FooterItem.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterItem/FooterItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {~~ASIDE_HEADER_ICON_SIZE~~} from '../../../~~constants~~';\nimport {~~block,~~ ~~createBlock~~} from '~~../../../utils/cn~~';\nimport {AsideHeaderItem} from '../../types';\nimport {Item} from '../CompositeBar/Item/Item';\n\nimport styles from './FooterItem.module.scss';\n\nconst b = createBlock('footer-item', styles);\nconst bGlobal = block('footer-item');\n\nexport interface FooterItemProps extends AsideHeaderItem {\n /*\n When `true`, the item is rendered with the same geometry as regular menu\n * items (40px row, 38px icon background) instead of the reduced footer size.\n */\n regularSize?: boolean;\n}\n\nexport function FooterItem({regularSize, ...props}: FooterItemProps) {\n return (\n <Item\n {...props}\n iconSize={~~ASIDE_HEADER_ICON_SIZE~~}\n className={`${b({compact: props.compact})} ${bGlobal({'regular-size': regularSize})}`}\n />\n );\n}\n"],"names":["React"],"mappings":"~~;;;;;;;AASA~~,MAAM,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC;AAC5C,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;AAU9B,SAAU,UAAU,CAAC,EAAwC,EAAA;AAAxC,IAAA,IAAA,EAAC,WAAW,EAA4B,GAAA,EAAA,EAAvB,KAAK,GAAA,MAAA,CAAA,EAAA,EAAtB,eAAuB,CAAD;~~AAC7C~~,IAAA,QACIA,~~cAAA~~,CAAA,aAAA,~~CAAC~~,IAAI,~~EAAA~~,MAAA,CAAA,MAAA,CAAA,EAAA,~~EACG~~,KAAK,~~EACT~~,~~EAAA~~,QAAQ,EAAE,~~sBAAsB~~,~~EAChC~~,SAAS,EAAE,~~CAAG~~,~~EAAA~~,CAAC,CAAC,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAC,CAAC,~~CAAA~~,CAAA,~~EAAI~~,OAAO,CAAC,EAAC,cAAc,EAAE,WAAW,EAAC,CAAC,CAAE,CAAA,~~EAAA,~~CAAA~~,CACvF~~;AAEV;;;;"}
1	+ {"version":3,"file":"FooterItem.js","sources":["../../../../../../../src/components/AsideHeader/components/FooterItem/FooterItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {block, createBlock} from '../../../utils/cn';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {getAsideHeaderDensityConfig} from '../../density';\nimport {AsideHeaderItem} from '../../types';\nimport {CollapseAnchorContext} from '../CollapseButton/useCollapseAnchor';\nimport {Item} from '../CompositeBar/Item/Item';\n\nimport styles from './FooterItem.module.scss';\n\nconst b = createBlock('footer-item', styles);\nconst bGlobal = block('footer-item');\n\nexport interface FooterItemProps extends AsideHeaderItem {\n /*\n When `true`, the item is rendered with the same geometry as regular menu\n * items (40px row, 38px icon background) instead of the reduced footer size.\n */\n regularSize?: boolean;\n}\n\nexport function FooterItem({regularSize, ...props}: FooterItemProps) {\n const anchor = React.useContext(CollapseAnchorContext);\n const register = anchor?.register;\n const [registrationId] = React.useState(() => Symbol());\n const cleanup = React.useRef<() => void>();\n const rowRef = React.useCallback(\n (element: HTMLElement \| null) => {\n cleanup.current?.();\n cleanup.current = undefined;\n if (element && register) cleanup.current = register(element, registrationId);\n },\n [register, registrationId],\n );\n const suppressTooltip = Boolean(anchor?.compact && anchor.selectedId === registrationId);\n const {menuDensity} = useAsideHeaderContext();\n const {iconSize} = getAsideHeaderDensityConfig(menuDensity);\n\n return (\n <Item\n {...props}\n rowRef={rowRef}\n enableTooltip={suppressTooltip ? false : props.enableTooltip}\n iconSize={iconSize}\n className={`${b({compact: props.compact})} ${bGlobal({'regular-size': regularSize})}`}\n />\n );\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAWA,MAAM,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC;AAC5C,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;AAU9B,SAAU,UAAU,CAAC,EAAwC,EAAA;AAAxC,IAAA,IAAA,EAAC,WAAW,EAA4B,GAAA,EAAA,EAAvB,KAAK,GAAA,MAAA,CAAA,EAAA,EAAtB,eAAuB,CAAD;IAC7C,MAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,KAAA,IAAA,IAAN,MAAM,KAAN,SAAA,GAAA,SAAA,GAAA,MAAM,CAAE,QAAQ;AACjC,IAAA,MAAM,CAAC,cAAc,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,MAAM,MAAM,EAAE,CAAC;AACvD,IAAA,MAAM,OAAO,GAAGA,cAAK,CAAC,MAAM,EAAc;IAC1C,MAAM,MAAM,GAAGA,cAAK,CAAC,WAAW,CAC5B,CAAC,OAA2B,KAAI;;AAC5B,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,OAAA,CAAI;AACnB,QAAA,OAAO,CAAC,OAAO,GAAG,SAAS;QAC3B,IAAI,OAAO,IAAI,QAAQ;YAAE,OAAO,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;AAChF,KAAC,EACD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC7B;AACD,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,CAAA,MAAM,aAAN,MAAM,KAAA,SAAA,GAAA,SAAA,GAAN,MAAM,CAAE,OAAO,KAAI,MAAM,CAAC,UAAU,KAAK,cAAc,CAAC;AACxF,IAAA,MAAM,EAAC,WAAW,EAAC,GAAG,qBAAqB,EAAE;IAC7C,MAAM,EAAC,QAAQ,EAAC,GAAG,2BAA2B,CAAC,WAAW,CAAC;IAE3D,QACIA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,IACT,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,eAAe,GAAG,KAAK,GAAG,KAAK,CAAC,aAAa,EAC5D,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAA,EAAG,CAAC,CAAC,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAC,CAAC,CAAI,CAAA,EAAA,OAAO,CAAC,EAAC,cAAc,EAAE,WAAW,EAAC,CAAC,CAAA,CAAE,EACvF,CAAA,CAAA;AAEV;;;;"}

package/build/esm/components/AsideHeader/components/FooterItem/FooterItem.module.scss.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH"};
+var styles = {"gn-footer-item":"FooterItem-module__gn-footer-item___Hi7NH","gnFooterItem":"FooterItem-module__gn-footer-item___Hi7NH","gn-footer-item_compact":"FooterItem-module__gn-footer-item_compact___rth8I","gnFooterItemCompact":"FooterItem-module__gn-footer-item_compact___rth8I"};
 export { styles as default };
 //# sourceMappingURL=FooterItem.module.scss.js.map

package/build/esm/components/AsideHeader/components/Header.js CHANGED Viewed

@@ -1,25 +1,29 @@
 import React__default, { useCallback } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { Logo } from '../../Logo/Logo.js';
-import { ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT } from '../../constants.js';
+import { HEADER_DIVIDER_HEIGHT } from '../../constants.js';
 import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
+import { getAsideHeaderDensityConfig } from '../density.js';
 import { b } from '../utils.js';
+import { AsideDivider } from './AsideDivider.js';
 import { CompositeBar } from './CompositeBar/CompositeBar.js';
 import SvgDividerCollapsed from '../../../assets/icons/divider-collapsed.svg.js';
 const DEFAULT_SUBHEADER_ITEMS = [];
 const HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';
 const Header = () => {
-    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems, compact } = useAsideHeaderInnerContext();
+    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems, compact, menuDensity, } = useAsideHeaderInnerContext();
+    const { compactWidth } = getAsideHeaderDensityConfig(menuDensity);
     const onLogoClick = useCallback((event) => {
         var _a;
         onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
         (_a = logo === null || logo === undefined ? undefined : logo.onClick) === null || _a === undefined ? undefined : _a.call(logo, event);
     }, [onClosePanel, logo]);
     return (React__default.createElement("div", { className: b('header', { ['with-decoration']: headerDecoration }) },
-        logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: b('logo-button'), iconPlaceClassName: b('logo-icon-place') }))),
+        logo && (React__default.createElement(Logo, Object.assign({}, logo, { "data-gn-aside-transition-row": "logo", className: b('logo', logo.className), onClick: onLogoClick, compact: compact, buttonClassName: b('logo-button'), iconPlaceClassName: b('logo-icon-place') }))),
         React__default.createElement(CompositeBar, { compositeId: HEADER_COMPOSITE_ID, type: "subheader", menuItemClassName: b('menu-item'), compact: compact, items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
-        headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
+        React__default.createElement(AsideDivider, { className: b('header-bottom-divider'), transitionId: "header" }),
+        headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: compactWidth, height: HEADER_DIVIDER_HEIGHT }))));
 };
 export { Header };