@cloud-ru/ds-uikit-product-header 1.1.6-preview-5926424e.0 → 1.1.6

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.1.6 (2026-08-28)
+
+**Note:** Version bump only for package @ds/uikit-product-header
+
 ## 1.1.5 (2026-08-28)
 
 ### Bug Fixes

package/README.md

@@ -206,7 +206,6 @@ export function WithFavorites() {
 | `disabled` | `boolean` | — |  |
 | `draggerTooltip` | `string` | — | Текст подсказки для драггера (desktop only) |
 | `favorite` | `FavoriteProps` | — |  |
-| `leftBottom` | `ReactNode` | — |  |
 | `leftTop` | `ReactNode` | — |  |
 | `loading` | `boolean` | — | Флаг загрузки данных |
 | `logo` | `ReactNode` | — |  |
@@ -222,7 +221,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` | `InnerLink` \| `MainMenuSettingsItem` | — | Пункты левой колонки (desktop) / нижней части списка (mobile). <br/> Плоский список (`dividerBefore` для разделителей). <br/> Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах. |
+| `settingItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `ListProps` \| `ScrollProps` | — | Пункты левой колонки (desktop) / нижней части списка (mobile). <br/> Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей). <br/> Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах. |
 
 ##### Related types
 
@@ -241,24 +240,6 @@ 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 |
@@ -268,16 +249,11 @@ 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 |
@@ -305,25 +281,6 @@ 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 |
@@ -334,22 +291,6 @@ 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
 
 Меню пользователя — профиль, переключатель темы, пункты настроек и выход.
@@ -415,7 +356,7 @@ export function ControlledTheme() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `items` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — |  |
+| `items` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `ListProps` \| `ScrollProps` | — |  |
 | `onClick` | `(() => void)` | — |  |
 | `onLogout` | `(() => void)` | — |  |
 | `open` | `boolean` | — |  |

package/dist/cjs/components/HeaderLayout/HeaderLayout.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderLayout = HeaderLayout;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
 const divider_1 = require("@cloud-ru/ds-divider");
 const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../constants");
-const useMobileLayout_1 = require("../../hooks/useMobileLayout");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }) {
-    const isMobile = (0, useMobileLayout_1.useMobileLayout)();
+    const isMobile = (0, adaptive_1.isMobileLayout)((0, adaptive_1.useAdaptiveLayout)().layoutType);
     return ((0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), ...(0, utils_1.extractSupportProps)({ 'data-test-id': constants_1.TEST_IDS.headerLayout.root, ...rest }), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [logo && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logo }), menu && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), menu] })), !isMobile && select && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, children: toolbar })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs })] }));
 }

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-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  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)));
 }
 
 .left{

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainMenu = MainMenu;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
 const product_1 = require("@cloud-ru/ds-icons/interface/product");
 const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
 const constants_1 = require("../../constants");
-const useMobileLayout_1 = require("../../hooks/useMobileLayout");
 const locale_1 = require("../../locale");
 const HeaderButton_1 = require("../HeaderButton");
 const MenuDesktop_1 = require("./helperComponents/MenuDesktop");
@@ -18,7 +18,7 @@ function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platform
         if (!open && search?.value)
             search?.onChange('');
     }, [open, search]);
-    const isMobile = (0, useMobileLayout_1.useMobileLayout)();
+    const isMobile = (0, adaptive_1.isMobileLayout)((0, adaptive_1.useAdaptiveLayout)().layoutType);
     const MenuComponent = isMobile ? MenuMobile_1.MenuMobile : MenuDesktop_1.MenuDesktop;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { tooltip: open ? undefined : { tip: t('services') }, isMobile: isMobile, disabled: disabled, icon: (0, jsx_runtime_1.jsx)(product_1.MainMenuSVG, {}), onClick: () => {
                     setOpen(true);

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

@@ -25,7 +25,8 @@ 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 defaultSegmentId = activeSegmentId ?? segments[0]?.id ?? '';
+    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 [segmentId = defaultSegmentId, setSegmentId] = (0, utils_1.useValueControl)({
         value: activeSegmentId,
         defaultValue: defaultSegmentId,
@@ -34,10 +35,10 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
     const isSearching = Boolean(searchValue);
     const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
     (0, react_1.useEffect)(() => {
-        if (!segments.some(segment => segment.id === segmentId) && defaultSegmentId) {
+        if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
             setSegmentId(defaultSegmentId);
         }
-    }, [defaultSegmentId, segmentId, setSegmentId, segments]);
+    }, [defaultSegmentId, segmentId, setSegmentId, visibleSegments]);
     const handleLinkClick = (0, react_1.useCallback)(({ disabled, onClick }, e) => {
         if (disabled) {
             e?.preventDefault();
@@ -78,23 +79,23 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
         }
         onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
     }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
-    const segmentItems = (0, react_1.useMemo)(() => segments.map(segment => ({
+    const segmentItems = (0, react_1.useMemo)(() => visibleSegments.map(segment => ({
         value: segment.id,
         label: segment.label,
         icon: segment.icon,
-    })), [segments]);
+    })), [visibleSegments]);
     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, 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)(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)(info_block_1.InfoBlock, { size: 'm', icon: {
-                icon: isSearching ? system_1.SearchSVG : system_1.CrossSVG,
+                icon: system_1.SearchSVG,
                 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": (!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] })] }));
+    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] })] }));
 }

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

@@ -3,7 +3,6 @@
   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 { LinksGroup, LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
+import { LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
 import { SortableGroupCardsProps } from './components';
-export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & Pick<LinksGroup, 'icon'> & {
+export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & {
     id: string;
     label: LinksGroupTitle;
     isExpanded?: boolean;
     blockColor?: LinksGroupBlockColor;
     highlight?: boolean;
 };
-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 SortableGroup({ id, 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, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }) {
+function SortableGroup({ id, 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, icon, label, items, isExpanded, showDescription, is
         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, 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 }) })] }));
+    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 }) })] }));
 }
 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 { LinksGroup, LinksGroupTitle } from '../../../../../types';
+import { LinksGroupTitle } from '../../../../../types';
 import { SortableGroupDragHandleProps } from './SortableGroupDragHandle';
-export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
+export type SortableGroupHeaderProps = {
     label: LinksGroupTitle;
     isExpanded?: boolean;
     enableServiceDrag?: boolean;
     isMobile?: boolean;
 } & SortableGroupDragHandleProps;
-export declare function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroupHeader({ label, 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,14 +8,8 @@ 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, 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, icon: (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' }))] }))] }));
+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' }))] }))] }));
 }

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

@@ -50,7 +50,6 @@
   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));
@@ -116,9 +115,6 @@
 .groupBody[data-mobile]{
   grid-template-columns:repeat(1, minmax(200px, 1fr));
 }
-.groupBody[data-subcategory-body]{
-  padding-bottom:var(--sn-primitive-dimension-4, 4px);
-}
 
 .decoration{
   --highlight-border-width:1px;

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, leftBottom, 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, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -7,6 +7,7 @@ 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");
@@ -15,13 +16,12 @@ 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, leftBottom, 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, 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,7 +41,6 @@ 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,
@@ -51,7 +50,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 }), 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 }) }) })] }))] })] }));
+    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 }) }) })] }))] })] }));
     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,6 +43,11 @@
   min-height:0;
 }
 
+.settingItems{
+  flex-shrink:0;
+  height:auto;
+}
+
 .right{
   position:relative;
   display:flex;
@@ -58,7 +63,6 @@
   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, leftBottom, 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, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,7 @@ 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");
@@ -13,16 +14,15 @@ 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'));
-function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, logo, rightTop, leftTop, leftBottom, loading, }) {
+const SNAP_POINTS = [1];
+function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, logo, rightTop, leftTop, 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 +33,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: constants_1.BOTTON_SHEET_FULLSCREEN_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: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), 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 }), 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 })] }) }) }));
+    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' })] }) }) }));
 }

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

@@ -1,7 +1,7 @@
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
   padding:0 var(--sn-primitive-dimension-4, 4px);
-  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)));
+  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)));
 }
 
 .rightContent{

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

@@ -43,14 +43,10 @@ function ServiceCard({ service, favorite, isMobile, onServiceClick, showDescript
     return dragPreview ? (0, jsx_runtime_1.jsx)(drag_and_drop_1.DragPreview, { className: styles_module_scss_1.default.dragCardPreview, children: card }) : card;
 }
 function DraggableServiceCard({ groupId, service, favorite, dragDisabled, ...props }) {
-    const disabled = dragDisabled || service.disabled || favorite?.value.includes(service.id);
     const { attributes, listeners, setNodeRef, isDragging } = (0, core_1.useDraggable)({
         id: (0, utils_1.getServiceSourceDragId)(groupId, service.id),
-        disabled,
+        disabled: dragDisabled || service.disabled || favorite?.value.includes(service.id),
     });
     const { tabIndex, ...restAttributes } = attributes ?? {};
-    if (disabled) {
-        return (0, jsx_runtime_1.jsx)(ServiceCard, { service: service, favorite: favorite, ...props, tabIndex: tabIndex });
-    }
     return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, className: styles_module_scss_1.default.draggableCard, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Static, ...listeners, ...restAttributes, children: (0, jsx_runtime_1.jsx)(ServiceCard, { service: service, favorite: favorite, ...props, tabIndex: tabIndex }) }));
 }

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

@@ -8,6 +8,5 @@
 }
 
 .draggableCard{
-  display:flex;
   min-width:0;
 }

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

@@ -1,4 +1,4 @@
-import { BaseItemProps } from '@cloud-ru/ds-list';
+import { BaseItemProps, ListProps } 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,7 +19,12 @@ export type InnerLink = {
      * остаётся только первое по приоритету сегментов (см. {@link MainMenuProps.segments}).
      */
     id: string;
-    /** Иконка карточки. */
+    /**
+     * Иконка карточки.
+     *
+     * Если не задана, вместо иконки рендерится `Avatar` с двухбуквенным текстом по `label`
+     * (см. `getAvatarNameFromLabel`).
+     */
     icon?: JSXElementConstructor<{
         size?: number;
         className?: string;
@@ -48,11 +53,9 @@ 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;
@@ -68,10 +71,6 @@ export type LinksGroup = {
     id: string;
     /** Заголовок группы в сетке карточек и в боковой навигации. */
     label: LinksGroupTitle;
-    icon?: JSXElementConstructor<{
-        size?: number;
-        className?: string;
-    }>;
     /**
      * Синонимы заголовка группы для fuzzy-поиска.
      */
@@ -203,16 +202,12 @@ 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;
     /**
      * Сегменты правой панели (сетка карточек) — только каталог.
@@ -250,10 +245,10 @@ export type MainMenuProps = {
     /**
      * Пункты левой колонки (desktop) / нижней части списка (mobile).
      *
-     * Плоский список (`dividerBefore` для разделителей).
+     * Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей).
      * Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах.
      */
-    settingItems?: MainMenuSettingsItem[];
+    settingItems?: ListProps['items'];
     /**
      * Платформенные группы (например «Облачные продукты», «Другие продукты»).
      *

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

@@ -0,0 +1,14 @@
+/**
+ * Формирует двухбуквенный текст для пропа `name` компонента Avatar в MainMenu.
+ *
+ * - Одно слово — первые две буквы в верхнем регистре (`Маркетплейс` → `МА`).
+ * - Два и более слов — первая буква первых двух слов (`Партнерский кабинет` → `ПК`).
+ *
+ * @param label — подпись карточки (`InnerLink.label`).
+ * @returns Строка из двух символов для отображения в аватаре.
+ *
+ * @example
+ * getAvatarNameFromLabel('Маркетплейс'); // 'МА'
+ * getAvatarNameFromLabel('Партнерский кабинет'); // 'ПК'
+ */
+export declare function getAvatarNameFromLabel(label: string): string;