@cloud-ru/ds-uikit-product-header 1.1.4 → 1.1.5-preview-17885440.0

package/README.md

@@ -206,6 +206,7 @@ export function WithFavorites() {
 | `disabled` | `boolean` | — |  |
 | `draggerTooltip` | `string` | — | Текст подсказки для драггера (desktop only) |
 | `favorite` | `FavoriteProps` | — |  |
+| `leftBottom` | `ReactNode` | — |  |
 | `leftTop` | `ReactNode` | — |  |
 | `loading` | `boolean` | — | Флаг загрузки данных |
 | `logo` | `ReactNode` | — |  |
@@ -221,7 +222,7 @@ export function WithFavorites() {
 | `segmentPrefs` | `MainMenuSegmentPrefs` | — | Пользовательские prefs сегментов (порядок / раскрытие групп). <br/> Нет записи для сегмента или omit `order` / `expanded` → uncontrolled для этого поля. |
 | `segments` | `MainMenuSegment` | — | Сегменты правой панели (сетка карточек) — только каталог. <br/> При поиске: совпадения из сегментов без `pinBottomOnSearch` → `platformGroups` → сегменты с `pinBottomOnSearch`. <br/> Если один и тот же {@link InnerLink.id} совпал сразу в нескольких сегментах — остаётся только <br/> первое по этому приоритету вхождение, остальные (и опустевшие после этого группы) не показываются. <br/> При `segments.length > 1` показывается SegmentControl (скрывается во время поиска). <br/> Порядок и раскрытие групп — через `segmentPrefs` и колбэки ниже. |
 | `setOpen` | `((open: boolean) => void)` | — |  |
-| `settingItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `ListProps` \| `ScrollProps` | — | Пункты левой колонки (desktop) / нижней части списка (mobile). <br/> Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей). <br/> Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах. |
+| `settingItems` | `InnerLink` \| `MainMenuSettingsItem` | — | Пункты левой колонки (desktop) / нижней части списка (mobile). <br/> Плоский список (`dividerBefore` для разделителей). <br/> Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах. |
 
 ##### Related types
 
@@ -240,6 +241,24 @@ export function WithFavorites() {
 | `segment` | `"favorites"` \| `"recent"` | — | Активный сегмент («Избранное» / «Недавнее») в панели избранного. <br/> Не передано — неуправляемое состояние (дефолт `'favorites'`). |
 | `value` | `string[]` | — | Список id избранных сервисов |
 
+- `FavoritesSegment` = `"favorites"` \| `"recent"`
+
+**InnerLink**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `aliases` | `string[]` | — | Синонимы для fuzzy-поиска. |
+| `badge` | `CardServiceLightProps` \| `PromoTagPredefinedBaseProps` | — |  |
+| `description` | `string \| undefined` | — | Краткое описание сервиса — отображается при включённом переключателе «Описание». |
+| `disabled` | `boolean \| undefined` | — |  |
+| `hidden` | `boolean \| undefined` | — |  |
+| `href` | `string \| undefined` | — |  |
+| `icon` | `JSXElementConstructor<{ size?: number; className?: string; }> \| undefined` | — | Иконка карточки. |
+| `id` | `string` | — | Уникальный идентификатор карточки (также используется в избранном и при поиске). <br/> Один и тот же сервис может быть представлен в разных сегментах с разной <br/> детализацией (простая карточка в общем каталоге и раскрытая с вложенными <br/> сервисами версия в другом сегменте) — в этом случае обеим версиям задаётся <br/> общий `id`. При поиске из совпадений с одинаковым `id` в разных сегментах <br/> остаётся только первое по приоритету сегментов (см. <br/> {@link <br/> MainMenuProps.segments <br/> } <br/> ). |
+| `items` | `InnerLink` | — | Вложенные сервисы подкатегории. <br/> При наличии карточка раскрывается аккордеоном: в свёрнутом виде — обычная карточка <br/> с кнопкой раскрытия, в развёрнутом — заголовок <br/> {@link <br/> TitleClickable <br/> } <br/> и сетка вложенных сервисов. |
+| `label` | `string` | — | Заголовок карточки. |
+| `onClick` | `(e?: MouseEvent<HTMLElement>) => void` | — |  |
+
 **LinksGroup**
 
 | Prop | Type | Default | Description |
@@ -249,11 +268,16 @@ export function WithFavorites() {
 | `favoritesEnabled` | `boolean \| undefined` | — | Разрешено ли добавление карточек группы в избранное. |
 | `hidden` | `boolean \| undefined` | — |  |
 | `highlight` | `boolean \| undefined` | — | Визуальное выделение группы |
+| `icon` | `JSXElementConstructor<{ size?: number; className?: string; }> \| undefined` | — |  |
 | `id` | `string` | — | Уникальный идентификатор группы (якорь скролла, поиск по id). |
 | `items` | `InnerLink` | — | Карточки сервисов или ссылок внутри группы. |
 | `label` | `LinksGroupTitle` \| `TitleClickable` \| `TitleStatic` | — | Заголовок группы в сетке карточек и в боковой навигации. |
 | `onClick` | `((e?: MouseEvent<HTMLElement>) => void) \| undefined` | — |  |
 
+- `LinksGroupBlockColor` = `"blue"` \| `"green"` \| `"neutral"` \| `"orange"` \| `"pink"` \| `"primary"` \| `"red"` \| `"violet"` \| `"yellow"`
+
+- `LinksGroupTitle` = `TitleStatic | TitleClickable`
+
 **MainMenuPreferencesProps**
 
 | Prop | Type | Default | Description |
@@ -281,6 +305,25 @@ export function WithFavorites() {
 | `id` | `string` | — | Id сегмента из <br/> {@link <br/> MainMenuSegment.id <br/> } <br/> . |
 | `order` | `string[] \| undefined` | — | Порядок id групп. Если не передан — uncontrolled для этого сегмента <br/> (дефолт = порядок `items`; новые группы добавляются в конец). |
 
+**MainMenuSettingsItem**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `divider` | `"after"` \| `"before"` | — |  |
+| `hidden` | `boolean \| undefined` | — |  |
+| `href` | `string \| undefined` | — |  |
+| `icon` | `JSXElementConstructor<{ size?: number; className?: string; }> \| undefined` | — | Иконка карточки. |
+| `id` | `string` | — | Уникальный идентификатор карточки (также используется в избранном и при поиске). <br/> Один и тот же сервис может быть представлен в разных сегментах с разной <br/> детализацией (простая карточка в общем каталоге и раскрытая с вложенными <br/> сервисами версия в другом сегменте) — в этом случае обеим версиям задаётся <br/> общий `id`. При поиске из совпадений с одинаковым `id` в разных сегментах <br/> остаётся только первое по приоритету сегментов (см. <br/> {@link <br/> MainMenuProps.segments <br/> } <br/> ). |
+| `label` | `string` | — | Заголовок карточки. |
+| `onClick` | `(e?: MouseEvent<HTMLElement>) => void` | — |  |
+
+**MainMenuToggleProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onChange` | `(value: boolean) => void` | — |  |
+| `value` | `boolean` | — |  |
+
 **SearchProps**
 
 | Prop | Type | Default | Description |
@@ -291,6 +334,22 @@ export function WithFavorites() {
 | `onSearchNoResult` | `((value: string) => void) \| undefined` | — |  |
 | `value` | `string` | — |  |
 
+**TitleClickable**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `href` | `string \| undefined` | — |  |
+| `onClick` | `((e?: MouseEvent<HTMLElement>) => void) \| undefined` | — |  |
+| `text` | `string` | — |  |
+
+**TitleStatic**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `href` | `undefined` | — |  |
+| `onClick` | `undefined` | — |  |
+| `text` | `string` | — |  |
+
 ## UserMenu
 
 Меню пользователя — профиль, переключатель темы, пункты настроек и выход.

package/dist/cjs/components/HeaderLayout/styles.module.css

@@ -18,7 +18,7 @@
   align-items:center;
   box-sizing:border-box;
   height:var(--sn-primitive-dimension-24, 24px);
-  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
 }
 
 .left{

package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js

@@ -25,8 +25,7 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
     const { t } = locale_1.headerLocale.useTranslations();
     const showDescription = (0, react_1.useDeferredValue)(preferences?.showDescription.value ?? false);
     const segmentPrefsById = (0, react_1.useMemo)(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
-    const visibleSegments = (0, react_1.useMemo)(() => segments.filter(segment => segment.items.some(group => (0, utils_2.getLinksGroupVisibleItemsCount)(group) > 0)), [segments]);
-    const defaultSegmentId = visibleSegments[0]?.id ?? segments[0]?.id ?? '';
+    const defaultSegmentId = activeSegmentId ?? segments[0]?.id ?? '';
     const [segmentId = defaultSegmentId, setSegmentId] = (0, utils_1.useValueControl)({
         value: activeSegmentId,
         defaultValue: defaultSegmentId,
@@ -35,10 +34,10 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
     const isSearching = Boolean(searchValue);
     const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
     (0, react_1.useEffect)(() => {
-        if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
+        if (!segments.some(segment => segment.id === segmentId) && defaultSegmentId) {
             setSegmentId(defaultSegmentId);
         }
-    }, [defaultSegmentId, segmentId, setSegmentId, visibleSegments]);
+    }, [defaultSegmentId, segmentId, setSegmentId, segments]);
     const handleLinkClick = (0, react_1.useCallback)(({ disabled, onClick }, e) => {
         if (disabled) {
             e?.preventDefault();
@@ -79,23 +78,23 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
         }
         onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
     }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
-    const segmentItems = (0, react_1.useMemo)(() => visibleSegments.map(segment => ({
+    const segmentItems = (0, react_1.useMemo)(() => segments.map(segment => ({
         value: segment.id,
         label: segment.label,
         icon: segment.icon,
-    })), [visibleSegments]);
+    })), [segments]);
     const hasCards = visibleGroups.length > 0;
     const cards = (() => {
         if (loading) {
             return Array.from({ length: 5 }).map((_, index) => (0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroupSkeleton, { isMobile: isMobile }, index));
         }
         if (hasCards) {
-            return ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: visibleGroups.map(({ id }) => id), strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'multiple', expanded: expandedIds, onExpandedChange: onExpandedChange, children: visibleGroups.map(({ id, label, items, favoritesEnabled = true, blockColor, highlight }) => ((0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroup, { id: id, label: label, items: items, isExpanded: expandedIds.includes(id), blockColor: (0, utils_2.resolveGroupBlockColor)(blockColor, preferences?.showGroupsColors?.value), showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favoritesEnabled ? favorite : undefined, onServiceClick: handleLinkClick, highlight: highlight }, id))) }) }));
+            return ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: visibleGroups.map(({ id }) => id), strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'multiple', expanded: expandedIds, onExpandedChange: onExpandedChange, children: visibleGroups.map(({ id, label, icon, items, favoritesEnabled = true, blockColor, highlight }) => ((0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroup, { id: id, icon: icon, label: label, items: items, isExpanded: expandedIds.includes(id), blockColor: (0, utils_2.resolveGroupBlockColor)(blockColor, preferences?.showGroupsColors?.value), showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favoritesEnabled ? favorite : undefined, onServiceClick: handleLinkClick, highlight: highlight }, id))) }) }));
         }
         return ((0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { size: 'm', icon: {
-                icon: system_1.SearchSVG,
+                icon: isSearching ? system_1.SearchSVG : system_1.CrossSVG,
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? constants_1.TEST_IDS.noDataFound : constants_1.TEST_IDS.noData }));
     })();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": !hasCards || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile && rightTop, (0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile && rightTop, (0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css

@@ -3,6 +3,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.d.ts

@@ -1,11 +1,11 @@
-import { LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
+import { LinksGroup, LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
 import { SortableGroupCardsProps } from './components';
-export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & {
+export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & Pick<LinksGroup, 'icon'> & {
     id: string;
     label: LinksGroupTitle;
     isExpanded?: boolean;
     blockColor?: LinksGroupBlockColor;
     highlight?: boolean;
 };
-export declare function SortableGroup({ id, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroup({ id, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, blockColor, highlight, }: Omit<SortableGroupProps, 'enableServiceDrag'>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.js

@@ -14,7 +14,7 @@ const theme_1 = require("@cloud-ru/ds-theme");
 const constants_1 = require("../../constants");
 const components_1 = require("./components");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function SortableGroup({ id, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }) {
+function SortableGroup({ id, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, sortable_1.useSortable)({
         id,
         disabled: !enableServiceDrag,
@@ -28,7 +28,7 @@ function SortableGroup({ id, label, items, isExpanded, showDescription, isMobile
         transition,
     };
     const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;
-    return ((0, jsx_runtime_1.jsxs)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, id: id, style: style, className: styles_module_scss_1.default.group, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, "data-test-id": `${constants_1.TEST_IDS.groupCard}-${id}`, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: id, showChevron: false, afterTitle: (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, isExpanded: isExpanded, enableServiceDrag: enableServiceDrag, attributes: attributes, listeners: listeners, isMobile: isMobile }), children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favorite, onServiceClick: onServiceClick }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, id: id, style: style, className: styles_module_scss_1.default.group, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, "data-test-id": `${constants_1.TEST_IDS.groupCard}-${id}`, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: id, showChevron: false, afterTitle: (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, icon: icon, isExpanded: isExpanded, enableServiceDrag: enableServiceDrag, attributes: attributes, listeners: listeners, isMobile: isMobile }), children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favorite, onServiceClick: onServiceClick }) })] }));
 }
 function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, blockColor, highlight, }) {
     const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts

@@ -1,9 +1,9 @@
-import { LinksGroupTitle } from '../../../../../types';
+import { LinksGroup, LinksGroupTitle } from '../../../../../types';
 import { SortableGroupDragHandleProps } from './SortableGroupDragHandle';
-export type SortableGroupHeaderProps = {
+export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
     label: LinksGroupTitle;
     isExpanded?: boolean;
     enableServiceDrag?: boolean;
     isMobile?: boolean;
 } & SortableGroupDragHandleProps;
-export declare function SortableGroupHeader({ label, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js

@@ -8,8 +8,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("@cloud-ru/ds-button");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const typography_1 = require("@cloud-ru/ds-typography");
+const uikit_product_title_clickable_1 = require("@cloud-ru/ds-uikit-product-title-clickable");
+const utils_1 = require("../../../../../utils");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const SortableGroupDragHandle_1 = require("./SortableGroupDragHandle");
-function SortableGroupHeader({ label, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, children: label.text }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
+function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
+    const handleLabelClick = e => {
+        e.stopPropagation();
+        label?.onClick?.(e);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? ((0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, before: (0, utils_1.getLinkEmblem)({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css

@@ -50,6 +50,7 @@
   overflow-x:clip;
   display:flex;
   flex-direction:column;
+  width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));

package/dist/cjs/components/MainMenu/helperComponents/MenuBottom/MenuBottom.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { MainMenuSettingsItem } from '../../types';
+type MenuBottomProps = {
+    settingItems?: MainMenuSettingsItem[];
+    leftBottom: ReactNode;
+};
+export declare function MenuBottom({ settingItems, leftBottom }: MenuBottomProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/MainMenu/helperComponents/MenuBottom/MenuBottom.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuBottom = MenuBottom;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const divider_1 = require("@cloud-ru/ds-divider");
+const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card-predefined");
+const constants_1 = require("../../../../constants");
+const utils_1 = require("../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MenuBottom({ settingItems, leftBottom }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottom, children: [Boolean(settingItems?.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.divider === 'before' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider }), (0, react_1.createElement)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: (0, utils_1.getLinkEmblem)(item), onClick: item.onClick, "data-test-id": `header__drawer-menu__setting-${item.id}` }), item.divider === 'after' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider })] }))) })), leftBottom] }));
+}

package/dist/cjs/components/MainMenu/helperComponents/MenuBottom/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuBottom';

package/dist/cjs/components/MainMenu/helperComponents/MenuBottom/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MenuBottom"), exports);

package/dist/cjs/components/MainMenu/helperComponents/MenuBottom/styles.module.css

@@ -0,0 +1,13 @@
+.bottomItems{
+  width:100%;
+}
+
+.bottom{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.bottomDivider{
+  margin:var(--sn-primitive-dimension-2, 2px) 0;
+}

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.d.ts

@@ -1,2 +1,2 @@
 import { MainMenuProps } from '../../types';
-export declare function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js

@@ -7,7 +7,6 @@ exports.MenuDesktop = MenuDesktop;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const divider_1 = require("@cloud-ru/ds-divider");
 const drawer_1 = require("@cloud-ru/ds-drawer");
-const list_1 = require("@cloud-ru/ds-list");
 const scroll_1 = require("@cloud-ru/ds-scroll");
 const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
@@ -16,12 +15,13 @@ const useMainMenuDnd_1 = require("../../hooks/useMainMenuDnd");
 const useMenuItems_1 = require("../../hooks/useMenuItems");
 const Content_1 = require("../Content");
 const Favorites_1 = require("../Favorites");
+const MenuBottom_1 = require("../MenuBottom");
 const MenuHeaderBrand_1 = require("../MenuHeaderBrand");
 const MountAnimation_1 = require("../MountAnimation");
 const Search_1 = require("../Search");
 const constants_2 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, defaultWidth = constants_2.MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = constants_2.MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     const { scrollRef, searchRef, resultItems } = (0, useMenuItems_1.useMenuItems)({
         segments,
@@ -41,6 +41,7 @@ function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platf
         return () => cancelAnimationFrame(frameId);
     }, [open, hasSearch, searchRef]);
     const isNeedRightBlock = segments && segments.some(segment => segment.items.length > 0);
+    const hasBottomItems = Boolean(settingItems?.length) || Boolean(leftBottom);
     const allServiceGroups = (0, react_1.useMemo)(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
     const mainMenuDnd = (0, useMainMenuDnd_1.useMainMenuDnd)({
         favorite,
@@ -50,7 +51,7 @@ function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platf
     const handleCloseDrawer = (0, react_1.useCallback)(() => {
         setOpen(false);
     }, [setOpen]);
-    const menu = ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuHeader, children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles_module_scss_1.default.menuHeaderBrand }), isNeedRightBlock && search && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef })] }))] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuBody, children: [(0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.left, "data-test-id": constants_1.TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }), isNeedRightBlock && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), Boolean(settingItems?.length) && ((0, jsx_runtime_1.jsx)(list_1.List, { items: settingItems ?? [], size: 'm', barHideStrategy: 'never', className: styles_module_scss_1.default.settingItems }))] }), isNeedRightBlock && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-in', children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) }), (0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-slide-up-right', className: styles_module_scss_1.default.right, "data-test-id": constants_1.TEST_IDS.mainMenu.right, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)(Content_1.Content, { onClose: handleCloseDrawer, className: styles_module_scss_1.default.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, preferences: preferences, loading: loading }) }) })] }))] })] }));
+    const menu = ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuHeader, children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles_module_scss_1.default.menuHeaderBrand }), isNeedRightBlock && search && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef })] }))] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuBody, children: [(0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.left, "data-test-id": constants_1.TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }), isNeedRightBlock && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-in', children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) }), (0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-slide-up-right', className: styles_module_scss_1.default.right, "data-test-id": constants_1.TEST_IDS.mainMenu.right, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)(Content_1.Content, { onClose: handleCloseDrawer, className: styles_module_scss_1.default.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, preferences: preferences, loading: loading }) }) })] }))] })] }));
     return ((0, jsx_runtime_1.jsx)(drawer_1.DrawerCustom, { open: open, onClose: handleCloseDrawer, width: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles_module_scss_1.default.drawer, rootClassName: styles_module_scss_1.default.drawerRoot, "data-test-id": constants_1.TEST_IDS.mainMenu.drawer, "data-small": !isNeedRightBlock || undefined, disableMotions: true, showButtonClosed: false, resizable: isNeedRightBlock
             ? {
                 min: constants_2.MENU_WIDTH_MIN,

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css

@@ -43,11 +43,6 @@
   min-height:0;
 }
 
-.settingItems{
-  flex-shrink:0;
-  height:auto;
-}
-
 .right{
   position:relative;
   display:flex;
@@ -63,6 +58,7 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
+  width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.d.ts

@@ -1,2 +1,2 @@
 import { MainMenuProps } from '../../types';
-export declare function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, logo, rightTop, leftTop, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, logo, rightTop, leftTop, leftBottom, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuMobile = MenuMobile;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const list_1 = require("@cloud-ru/ds-list");
 const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
 const constants_1 = require("../../../../constants");
@@ -14,15 +13,17 @@ const useMainMenuDnd_1 = require("../../hooks/useMainMenuDnd");
 const useMenuItems_1 = require("../../hooks/useMenuItems");
 const Content_1 = require("../Content");
 const Favorites_1 = require("../Favorites");
+const MenuBottom_1 = require("../MenuBottom");
 const MenuHeaderBrand_1 = require("../MenuHeaderBrand");
 const MountAnimation_1 = require("../MountAnimation");
 const ScrollWithAnimatedStickyPanel_1 = require("../ScrollWithAnimatedStickyPanel");
 const Search_1 = require("../Search");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const SNAP_POINTS = [1];
-function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, logo, rightTop, leftTop, loading, }) {
+function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, logo, rightTop, leftTop, leftBottom, loading, }) {
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     const hasSegments = segments && segments.some(segment => segment.items.length > 0);
+    const hasBottomItems = Boolean(settingItems?.length) || Boolean(leftBottom);
     const isSearching = Boolean(search?.value);
     const { searchRef, resultItems } = (0, useMenuItems_1.useMenuItems)({
         segments,
@@ -33,5 +34,5 @@ function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platfo
     const handleClose = (0, react_1.useCallback)(() => {
         setOpen(false);
     }, [setOpen]);
-    return ((0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, onClose: handleClose, className: styles_module_scss_1.default.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, loading: loading }) })), !isSearching && settingItems && (0, jsx_runtime_1.jsx)(list_1.List, { items: settingItems, size: 'm', barHideStrategy: 'never' })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, onClose: handleClose, className: styles_module_scss_1.default.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
 }

package/dist/cjs/components/MainMenu/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseItemProps, ListProps } from '@cloud-ru/ds-list';
+import { BaseItemProps } from '@cloud-ru/ds-list';
 import { SearchProps as SearchPropsSnack } from '@cloud-ru/ds-search';
 import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { JSXElementConstructor, MouseEvent, ReactNode } from 'react';
@@ -19,12 +19,7 @@ export type InnerLink = {
      * остаётся только первое по приоритету сегментов (см. {@link MainMenuProps.segments}).
      */
     id: string;
-    /**
-     * Иконка карточки.
-     *
-     * Если не задана, вместо иконки рендерится `Avatar` с двухбуквенным текстом по `label`
-     * (см. `getAvatarNameFromLabel`).
-     */
+    /** Иконка карточки. */
     icon?: JSXElementConstructor<{
         size?: number;
         className?: string;
@@ -53,9 +48,11 @@ export type InnerLink = {
 type TitleStatic = {
     text: string;
     onClick?: never;
+    href?: never;
 };
 type TitleClickable = {
     text: string;
+    href?: string;
     onClick?(e?: MouseEvent<HTMLElement>): void;
 };
 export type LinksGroupTitle = TitleStatic | TitleClickable;
@@ -71,6 +68,10 @@ export type LinksGroup = {
     id: string;
     /** Заголовок группы в сетке карточек и в боковой навигации. */
     label: LinksGroupTitle;
+    icon?: JSXElementConstructor<{
+        size?: number;
+        className?: string;
+    }>;
     /**
      * Синонимы заголовка группы для fuzzy-поиска.
      */
@@ -202,12 +203,16 @@ export type MainMenuPreferencesProps = {
      */
     showGroupsColors?: MainMenuToggleProps;
 };
+export type MainMenuSettingsItem = Pick<InnerLink, 'id' | 'label' | 'icon' | 'onClick' | 'href' | 'hidden'> & {
+    divider?: 'before' | 'after';
+};
 export type MainMenuProps = {
     disabled?: boolean;
     open?: boolean;
     setOpen?(open: boolean): void;
     logo?: ReactNode;
     leftTop?: ReactNode;
+    leftBottom?: ReactNode;
     rightTop?: ReactNode;
     /**
      * Сегменты правой панели (сетка карточек) — только каталог.
@@ -245,10 +250,10 @@ export type MainMenuProps = {
     /**
      * Пункты левой колонки (desktop) / нижней части списка (mobile).
      *
-     * Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей).
+     * Плоский список (`dividerBefore` для разделителей).
      * Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах.
      */
-    settingItems?: ListProps['items'];
+    settingItems?: MainMenuSettingsItem[];
     /**
      * Платформенные группы (например «Облачные продукты», «Другие продукты»).
      *

package/dist/cjs/components/MainMenu/utils/getLinkEmblem.d.ts

@@ -1,3 +1,3 @@
 import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { InnerLink } from '../types';
-export declare function getLinkEmblem(link: InnerLink): CardServiceLightProps['icon'];
+export declare function getLinkEmblem(link: Pick<InnerLink, 'icon'>): CardServiceLightProps['icon'];

package/dist/cjs/components/MainMenu/utils/getLinkEmblem.js

@@ -1,18 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLinkEmblem = getLinkEmblem;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const avatar_1 = require("@cloud-ru/ds-avatar");
 const react_1 = require("react");
-const getAvatarNameFromLabel_1 = require("./getAvatarNameFromLabel");
-function createAvatarIcon(displayName) {
-    return function LinkAvatarIcon({ className }) {
-        return ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { name: displayName, showTwoSymbols: true, shape: 'squared', appearance: 'neutral', size: 's', className: className }));
-    };
-}
 function getLinkEmblem(link) {
     if (!link.icon) {
-        return (0, react_1.createElement)(createAvatarIcon((0, getAvatarNameFromLabel_1.getAvatarNameFromLabel)(link.label)));
+        return undefined;
     }
     return (0, react_1.createElement)(link.icon);
 }

package/dist/cjs/components/MainMenu/utils/index.d.ts

@@ -1,5 +1,4 @@
 export * from './innerLink';
-export * from './getAvatarNameFromLabel';
 export * from './flatLinksGroups';
 export * from './getLinkEmblem';
 export * from './mapInnerLinksToListItems';

package/dist/cjs/components/MainMenu/utils/index.js

@@ -15,7 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./innerLink"), exports);
-__exportStar(require("./getAvatarNameFromLabel"), exports);
 __exportStar(require("./flatLinksGroups"), exports);
 __exportStar(require("./getLinkEmblem"), exports);
 __exportStar(require("./mapInnerLinksToListItems"), exports);

package/dist/cjs/components/PathBreadcrumbs/styles.module.css

@@ -1,4 +1,7 @@
 .breadcrumbs{
+  display:flex;
+  align-items:center;
   min-width:0;
+  height:100%;
   padding:0 var(--sn-primitive-dimension-8, 8px) !important;
 }

package/dist/cjs/components/UserMenu/UserMenu.js

@@ -40,5 +40,10 @@ function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout
                 value: Number(inviteCount),
             }
             : undefined, "data-test-id": constants_1.TEST_IDS.userMenu.button, icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { appearance: 'red', size: 's', name: fullName, showTwoSymbols: true }), "data-pressed": open })), [fullName, inviteCount, onClick, open, setOpen, isMobile, triggerTooltip]);
-    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { open: open, onOpenChange: setOpen, size: 'm', items: userMenuItems, trigger: 'click', placement: 'bottom-end', className: styles_module_scss_1.default.userMenuDroplist, closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.userMenu.root, label: t('user'), children: trigger }));
+    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { open: open, onOpenChange: setOpen, size: 'm', 
+        // Выбор темы ведёт корневой список: `value` — текущая тема, `id` опций совпадает с
+        // `ThemeMode`. `selection` контролируемый и без `onChange`, поэтому клики по обычным
+        // пунктам меню (профиль, организации, выход) состояние выбора не меняют — подсвечена
+        // всегда только текущая тема и ветка `Тема` над ней.
+        selection: { mode: 'single', value: '__empty_stub__', onChange: () => { } }, items: userMenuItems, trigger: 'click', placement: 'bottom-end', className: styles_module_scss_1.default.userMenuDroplist, closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.userMenu.root, label: t('user'), children: trigger }));
 }

package/dist/cjs/constants.d.ts

@@ -10,6 +10,8 @@ export declare const TEST_IDS: {
         readonly search: "header__drawer-menu__search";
         readonly left: "header__drawer-menu__left";
         readonly right: "header__drawer-menu__right";
+        readonly leftBottom: "header__drawer-menu__left-bottom";
+        readonly leftBottomItems: "header__drawer-menu__left-bottom-items";
     };
     readonly userMenu: {
         readonly root: "header__user-menu";