@cloud-ru/ds-uikit-product-header 1.5.1-preview-d90ac2be.0 → 1.5.1

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubCategoryTitle = void 0;
+exports.SubCategoryTitle = SubCategoryTitle;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const typography_1 = require("@cloud-ru/ds-typography");
 const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card-predefined");
@@ -12,59 +12,53 @@ const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
 const utils_2 = require("../../../../../../utils");
 const ServiceCard_1 = require("../../../../../ServiceCard");
-const cardsContext_1 = require("../../../../cardsContext");
 const constants_1 = require("../../../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function SubCategoryTitleBase({ groupId, service, groupFavoritesEnabled, expandable }) {
-    const { isMobile, showDescription: showDescriptionProp, dragEnabled, favoriteIds, onFavoriteChange, onServiceClick, } = (0, cardsContext_1.useCardsContext)();
+function SubCategoryTitle({ groupId, service, showDescription: showDescriptionProp, isMobile, dragDisabled, favorite, onServiceClick, expandable, }) {
     const titleRef = (0, react_1.useRef)(null);
     const tooltipTriggerRef = (0, react_1.useRef)(null);
     const favoriteRef = (0, react_1.useRef)(null);
-    const { id, description, icon } = service;
-    const handleServiceClick = (0, react_1.useCallback)((event) => {
+    const handleServiceClick = (event) => {
         (0, utils_1.stopEventPropagation)(event);
         onServiceClick?.(service, event);
-    }, [onServiceClick, service]);
-    const titleTestId = `${constants_1.TEST_IDS.subcategoryTitle}-${id}`;
-    const cardFavoriteChange = groupFavoritesEnabled && favoriteIds ? onFavoriteChange : undefined;
-    const isFavorite = Boolean(favoriteIds?.has(id));
-    const showDescription = showDescriptionProp && Boolean(description);
-    const hasTooltip = !showDescription && Boolean(description);
-    const handleKeyDown = (0, react_1.useMemo)(() => (0, uikit_product_card_predefined_1.createCardActionsKeyDownHandler)({
+    };
+    const titleTestId = `${constants_1.TEST_IDS.subcategoryTitle}-${service.id}`;
+    const isFavorite = Boolean(favorite?.value.includes(service.id));
+    const showDescription = showDescriptionProp && Boolean(service.description);
+    const hasTooltip = !showDescription && service.description;
+    const handleKeyDown = (0, uikit_product_card_predefined_1.createCardActionsKeyDownHandler)({
         cardRef: titleRef,
         items: [
             hasTooltip ? { ref: tooltipTriggerRef } : null,
-            cardFavoriteChange
+            favorite
                 ? {
                     ref: favoriteRef,
-                    onActivate: () => cardFavoriteChange(id)(!isFavorite),
+                    onActivate: () => favorite.onChange(service.id)(!isFavorite),
                 }
                 : null,
         ],
-    }), [hasTooltip, cardFavoriteChange, id, isFavorite]);
-    const emblem = (0, react_1.useMemo)(() => (0, utils_2.getLinkEmblem)({ icon }), [icon]);
+    });
     if (expandable?.value) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subcategoryTitle, "data-mobile": isMobile || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subcategoryTitleRow, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { as: 'a', href: service.href, onClick: handleServiceClick, innerRef: titleRef, title: service.label, icon: emblem, className: styles_module_scss_1.default.subcategoryTitleClickable, "data-test-id": titleTestId }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardActionsSurface, { className: styles_module_scss_1.default.subcategoryTitleActions, actionsVisibility: 'always', actionsSize: isMobile ? 's' : 'm', tooltip: hasTooltip
+        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subcategoryTitle, "data-mobile": isMobile || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subcategoryTitleRow, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { as: 'a', href: service.href, onClick: handleServiceClick, innerRef: titleRef, title: service.label, icon: (0, utils_2.getLinkEmblem)(service), className: styles_module_scss_1.default.subcategoryTitleClickable, "data-test-id": titleTestId }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardActionsSurface, { className: styles_module_scss_1.default.subcategoryTitleActions, actionsVisibility: 'always', actionsSize: isMobile ? 's' : 'm', tooltip: hasTooltip
                                 ? {
-                                    tip: description,
+                                    tip: service.description,
                                     buttonRef: tooltipTriggerRef,
                                     trigger: isMobile ? 'click' : 'hoverAndFocusVisible',
                                     'data-test-id': `${titleTestId}-tooltip`,
                                 }
-                                : undefined, favorite: cardFavoriteChange
+                                : undefined, favorite: favorite
                                 ? {
                                     enabled: true,
                                     checked: isFavorite,
-                                    onChange: (checked) => cardFavoriteChange(id)(checked),
+                                    onChange: favorite.onChange(service.id),
                                     buttonRef: favoriteRef,
                                     'data-test-id': `${titleTestId}-favorite`,
                                 }
-                                : undefined })] }), showDescription && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'p', variant: 'body', size: 's', className: styles_module_scss_1.default.subcategoryDescription, "data-test-id": `${titleTestId}-description`, children: description }))] }));
+                                : undefined })] }), showDescription && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'p', variant: 'body', size: 's', className: styles_module_scss_1.default.subcategoryDescription, "data-test-id": `${titleTestId}-description`, children: service.description }))] }));
     }
     return (
     // Карточка — ссылка `<a>`: клик по ней бы долетал до `onClick={toggleOpen}` заголовка
     // родительского CollapseBlockTertiary (см. TODO там) и лишний раз переключал аккордеон.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subcategoryTitleDraggable, onPointerDown: utils_1.stopEventPropagation, onClick: utils_1.stopEventPropagation, children: (0, jsx_runtime_1.jsx)(ServiceCard_1.GridServiceCard, { groupId: groupId, service: service, isFavorite: isFavorite, onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragEnabled: dragEnabled, expandable: expandable }) }));
+    (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subcategoryTitleDraggable, onPointerDown: utils_1.stopEventPropagation, onClick: utils_1.stopEventPropagation, children: (0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragDisabled: dragDisabled, expandable: expandable }) }));
 }
-exports.SubCategoryTitle = (0, react_1.memo)(SubCategoryTitleBase);

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

@@ -12,7 +12,7 @@
 .subcategory:has([data-subcategory-body]), .subcategory[data-title-only]{
   grid-column:1/-1;
   padding:0 var(--sn-primitive-dimension-4, 4px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
   background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
 }
 .subcategory[data-title-only]{

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

@@ -19,7 +19,7 @@
   min-width:0;
   min-height:var(--sn-primitive-dimension-40, 40px);
   padding-inline:var(--sn-primitive-dimension-8, 8px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
 }
 .header:focus-visible .headerActions, .header:has(:focus-visible) .headerActions{
   pointer-events:auto;
@@ -46,8 +46,6 @@
 }
 
 .group{
-  content-visibility:auto;
-  contain-intrinsic-size:auto var(--sn-primitive-dimension-128, 128px);
   position:relative;
   overflow-x:clip;
   display:flex;
@@ -55,16 +53,8 @@
   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));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
-}
-.group[data-appear]{
-  animation:group-appear 0.24s cubic-bezier(0.4, 0, 0.2, 1) backwards;
-}
-@media (prefers-reduced-motion: reduce){
-  .group[data-appear]{
-    animation:none;
-  }
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .group[data-drag-preview]{
   cursor:grabbing;
@@ -81,7 +71,7 @@
 .groupDragPreview{
   cursor:grabbing;
   container-type:inline-size;
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
 }
 
 .groupDragPreviewHeader{
@@ -178,7 +168,7 @@
 }
 [data-is-highlighted] .decorationBackground{
   inset:var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width);
-  border-radius:calc(var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)) - var(--highlight-border-width));
+  border-radius:calc(var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))) - var(--highlight-border-width));
   background:linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
 }
 
@@ -197,35 +187,35 @@
 }
 .colorMarker[data-block-color=neutral]{
   visibility:visible;
-  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
 }
 .colorMarker[data-block-color=primary]{
   visibility:visible;
-  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
 }
 .colorMarker[data-block-color=orange]{
   visibility:visible;
-  background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
+  background-color:var(--sn-theme-color-orange-decor, var(--sn-brand-palette-orange-80, #fbdeb6));
 }
 .colorMarker[data-block-color=yellow]{
   visibility:visible;
-  background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
+  background-color:var(--sn-theme-color-yellow-decor, var(--sn-brand-palette-yellow-80, #f0dfb1));
 }
 .colorMarker[data-block-color=green]{
   visibility:visible;
-  background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
+  background-color:var(--sn-theme-color-green-decor, var(--sn-brand-palette-green-80, #d2ead0));
 }
 .colorMarker[data-block-color=blue]{
   visibility:visible;
-  background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
+  background-color:var(--sn-theme-color-blue-decor, var(--sn-brand-palette-blue-80, #d6e2f4));
 }
 .colorMarker[data-block-color=violet]{
   visibility:visible;
-  background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
+  background-color:var(--sn-theme-color-violet-decor, var(--sn-brand-palette-violet-80, #e6dcf3));
 }
 .colorMarker[data-block-color=pink]{
   visibility:visible;
-  background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
+  background-color:var(--sn-theme-color-pink-decor, var(--sn-brand-palette-pink-80, #f5d9e1));
 }
 
 .skeletonTitle{
@@ -243,11 +233,4 @@
 
 .skeletonService{
   padding:var(--sn-primitive-dimension-4, 4px);
-}
-
-@keyframes group-appear{
-  from{
-    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
-    opacity:0;
-  }
 }

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

@@ -4,10 +4,8 @@ exports.useContentSegmentsSortable = useContentSegmentsSortable;
 const sortable_1 = require("@dnd-kit/sortable");
 const react_1 = require("react");
 function mergeIdsPreservingOrder(prevIds, nextIds) {
-    const nextIdSet = new Set(nextIds);
-    const prevIdSet = new Set(prevIds);
-    const kept = prevIds.filter(id => nextIdSet.has(id));
-    const added = nextIds.filter(id => !prevIdSet.has(id));
+    const kept = prevIds.filter(id => nextIds.includes(id));
+    const added = nextIds.filter(id => !prevIds.includes(id));
     if (added.length === 0 && kept.length === prevIds.length) {
         return prevIds;
     }

package/dist/cjs/components/MainMenu/helperComponents/Content/hooks/useSegmentDnd.d.ts

@@ -1,16 +1,16 @@
 import { DragEndEvent } from '@dnd-kit/core';
-import { LinksGroup } from '../../../types';
-import { CardsContextValue } from '../cardsContext';
+import { FavoriteProps, LinksGroup } from '../../../types';
 type UseSegmentDndProps = {
     visibleGroups: LinksGroup[];
     expandedIds: string[];
     onSortableDragEnd(event: DragEndEvent): void;
     showDescription: boolean;
     showGroupsColors?: boolean;
-} & Pick<CardsContextValue, 'favoriteIds' | 'onFavoriteChange'>;
+    favorite?: FavoriteProps;
+};
 /**
  * DnD групп внутри активного сегмента: drag overlay группы поверх `useContentSegmentsSortable`.
  * Сервис-драг (карточка → избранное) сюда не попадает — фильтруется через `isServiceDragId`.
  */
-export declare function useSegmentDnd({ visibleGroups, expandedIds, onSortableDragEnd, showDescription, showGroupsColors, favoriteIds, onFavoriteChange, }: UseSegmentDndProps): void;
+export declare function useSegmentDnd({ visibleGroups, expandedIds, onSortableDragEnd, showDescription, showGroupsColors, favorite, }: UseSegmentDndProps): void;
 export {};

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

@@ -11,16 +11,16 @@ const SortableGroup_1 = require("../helperComponents/SortableGroup");
  * DnD групп внутри активного сегмента: drag overlay группы поверх `useContentSegmentsSortable`.
  * Сервис-драг (карточка → избранное) сюда не попадает — фильтруется через `isServiceDragId`.
  */
-function useSegmentDnd({ visibleGroups, expandedIds, onSortableDragEnd, showDescription, showGroupsColors, favoriteIds, onFavoriteChange, }) {
+function useSegmentDnd({ visibleGroups, expandedIds, onSortableDragEnd, showDescription, showGroupsColors, favorite, }) {
     const { setGroupDragOverlay } = (0, useMainMenuDnd_1.useMainMenuDndOverlay)();
     const handleDragStart = (0, react_1.useCallback)(({ active }) => {
         if (!(0, utils_1.isServiceDragId)(active.id)) {
             const activeGroup = visibleGroups.find(({ id }) => id === String(active.id));
             if (activeGroup) {
-                setGroupDragOverlay((0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroupDragPreview, { id: activeGroup.id, label: activeGroup.label, items: activeGroup.items, isExpanded: expandedIds.includes(activeGroup.id), blockColor: (0, utils_1.resolveGroupBlockColor)(activeGroup.blockColor, showGroupsColors), showDescription: showDescription, favoriteIds: activeGroup.favoritesEnabled ? favoriteIds : undefined, onFavoriteChange: onFavoriteChange, highlight: activeGroup.highlight }));
+                setGroupDragOverlay((0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroupDragPreview, { id: activeGroup.id, label: activeGroup.label, items: activeGroup.items, isExpanded: expandedIds.includes(activeGroup.id), blockColor: (0, utils_1.resolveGroupBlockColor)(activeGroup.blockColor, showGroupsColors), showDescription: showDescription, favorite: activeGroup.favoritesEnabled ? favorite : undefined, highlight: activeGroup.highlight }));
             }
         }
-    }, [expandedIds, favoriteIds, onFavoriteChange, setGroupDragOverlay, showDescription, showGroupsColors, visibleGroups]);
+    }, [expandedIds, favorite, setGroupDragOverlay, showDescription, showGroupsColors, visibleGroups]);
     const handleDragEnd = (0, react_1.useCallback)((event) => {
         setGroupDragOverlay(null);
         if ((0, utils_1.isServiceDragId)(event.active.id)) {

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

@@ -1,13 +1,3 @@
-.content{
-  display:flex;
-  flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
-  width:100%;
-  min-width:0;
-}
-.content[data-mobile]{
-  gap:var(--sn-primitive-dimension-8, 8px);
-}
 .content[data-empty]{
   height:100%;
 }
@@ -15,12 +5,6 @@
   flex:1 1 auto;
 }
 
-.top{
-  display:flex;
-  flex-direction:column;
-  gap:inherit;
-}
-
 .noData{
   flex:1 1 auto;
   place-self:center center;

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

@@ -1,12 +1,12 @@
-import { FavoriteProps, InnerLink } from '../../types';
+import { FavoriteProps, LinksGroup } from '../../types';
 export type FavoritesProps = {
     /** Список избранных сервисов */
     favorite: FavoriteProps;
-    /** Сервисы каталога по id для разрешения id в карточки */
-    servicesById: ReadonlyMap<string, InnerLink>;
+    /** Группы сервисов для разрешения id в карточки */
+    allServiceGroups: LinksGroup[];
     /** CSS-класс строки заголовка (segment + кнопка настроек) */
     headerClassName?: string;
     /** Флаг мобильной раскладки */
     isMobile?: boolean;
 };
-export declare function Favorites({ favorite, servicesById, headerClassName, isMobile }: FavoritesProps): import("react/jsx-runtime").JSX.Element;
+export declare function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }: FavoritesProps): import("react/jsx-runtime").JSX.Element;

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

@@ -20,7 +20,7 @@ const components_1 = require("./components");
 const constants_1 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_3 = require("./utils");
-function Favorites({ favorite, servicesById, headerClassName, isMobile }) {
+function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const loading = favorite.loading;
     const [segment, setSegment] = (0, utils_1.useValueControl)({
@@ -32,8 +32,8 @@ function Favorites({ favorite, servicesById, headerClassName, isMobile }) {
         { value: constants_1.FAVORITES_SEGMENT.Favorites, label: t('favorite.title'), disabled: loading },
         { value: constants_1.FAVORITES_SEGMENT.Recent, label: t('recent.title'), disabled: loading },
     ], [t, loading]);
-    const favoriteItems = (0, react_1.useMemo)(() => (0, utils_2.resolveInnerLinksByIds)(favorite.value, servicesById), [favorite.value, servicesById]);
-    const recentItems = (0, react_1.useMemo)(() => (0, utils_2.resolveInnerLinksByIds)(favorite.recentServices ?? [], servicesById), [favorite.recentServices, servicesById]);
+    const favoriteItems = (0, react_1.useMemo)(() => (0, utils_2.resolveInnerLinksByIds)(favorite.value, allServiceGroups), [favorite.value, allServiceGroups]);
+    const recentItems = (0, react_1.useMemo)(() => (0, utils_2.resolveInnerLinksByIds)(favorite.recentServices ?? [], allServiceGroups), [favorite.recentServices, allServiceGroups]);
     const resolvedSegment = segment ?? constants_1.FAVORITES_SEGMENT.Favorites;
     const isFavoritesSegment = resolvedSegment === constants_1.FAVORITES_SEGMENT.Favorites;
     const isEmpty = (isFavoritesSegment ? favoriteItems : recentItems).length === 0;
@@ -45,14 +45,11 @@ function Favorites({ favorite, servicesById, headerClassName, isMobile }) {
         favorite.onFavoriteServiceClick?.(service.id, event);
         service.onClick(event);
     };
-    // Карточки «Недавнего» нужны только на этом сегменте — на «Избранном» их не собираем.
-    const recentCards = isFavoritesSegment
-        ? null
-        : recentItems.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'a', className: styles_module_scss_1.default.card, actionsVisibility: isMobile ? 'always' : 'hover', favorite: {
-                enabled: true,
-                checked: favorite.value.includes(service.id),
-                onChange: favorite.onChange(service.id),
-            }, ...(0, utils_3.getCommonCardProps)(service, handleRecentServiceClick(service)) }, service.id)));
+    const recentCards = recentItems.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'a', className: styles_module_scss_1.default.card, actionsVisibility: isMobile ? 'always' : 'hover', favorite: {
+            enabled: true,
+            checked: favorite.value.includes(service.id),
+            onChange: favorite.onChange(service.id),
+        }, ...(0, utils_3.getCommonCardProps)(service, handleRecentServiceClick(service)) }, service.id)));
     const content = (() => {
         if (loading) {
             return (0, jsx_runtime_1.jsx)(components_1.FavoritesItemsSkeleton, {});
@@ -68,5 +65,5 @@ function Favorites({ favorite, servicesById, headerClassName, isMobile }) {
                                     onChange: favorite.onChange(service.id),
                                 }, ...(0, utils_3.getCommonCardProps)(service, handleFavoriteServiceClick(service)) }, service.id))), !isEmpty && !isFavoritesSegment && recentCards] }) }) })) : ((0, jsx_runtime_1.jsx)(components_1.FavoritesSortable, { favorite: favorite, favoriteItems: favoriteItems, segment: resolvedSegment, setSegment: setSegment, isEmpty: isEmpty, recentCards: recentCards, onFavoriteServiceClick: handleFavoriteServiceClick }));
     })();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.FAVORITES_TEST_IDS.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, headerClassName), "data-test-id": constants_1.FAVORITES_TEST_IDS.header, children: [(0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', width: segment_control_1.WIDTH.Full, value: segment, onChange: setSegment, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', ...favorite.actions, closeDroplistOnItemClick: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', size: 'm', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, { size: 24 }), "data-test-id": constants_1.FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.FAVORITES_TEST_IDS.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, headerClassName), "data-test-id": constants_1.FAVORITES_TEST_IDS.header, children: [(0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', width: segment_control_1.WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', ...favorite.actions, closeDroplistOnItemClick: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', size: 'm', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, { size: 24 }), "data-test-id": constants_1.FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.css

@@ -2,8 +2,8 @@
   flex-shrink:0;
   width:var(--sn-primitive-dimension-40, 40px);
   height:var(--sn-primitive-dimension-40, 40px);
-  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
-  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
 }
 
 .emptyState{

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

@@ -7,8 +7,8 @@
   width:100%;
   min-height:var(--sn-primitive-dimension-88, 88px);
   padding:var(--sn-primitive-dimension-8, 8px) 0 0;
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 
 .header{
@@ -35,8 +35,8 @@
   min-height:var(--sn-primitive-dimension-44, 44px);
 }
 .listScroll[data-insert-new] [data-favorite]{
-  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
-  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
+  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
+  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
 }
 
 .dropTarget{
@@ -89,5 +89,5 @@
 .skeletonItem{
   width:100%;
   height:var(--sn-primitive-dimension-24, 24px);
-  border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
 }

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

@@ -1,2 +1,2 @@
 import { MainMenuProps } from '../../types';
-export declare function MenuDesktop({ open, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, 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, onSegmentServiceClick, 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

@@ -8,11 +8,11 @@ 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 scroll_1 = require("@cloud-ru/ds-scroll");
+const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
 const constants_1 = require("../../../../constants");
 const useMainMenuDnd_1 = require("../../hooks/useMainMenuDnd");
 const useMenuItems_1 = require("../../hooks/useMenuItems");
-const utils_1 = require("../../utils");
 const Content_1 = require("../Content");
 const Favorites_1 = require("../Favorites");
 const MenuBottom_1 = require("../MenuBottom");
@@ -21,7 +21,8 @@ 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 = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, 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, onSegmentServiceClick, 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,
         search,
@@ -44,19 +45,18 @@ function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segm
     // сегменты используются, `loading` держит панель смонтированной на время ответа бэка — иначе
     // `Content` не успевает показать свой skeleton (он монтируется только когда данные уже пришли),
     // и между "ничего" и карточками на кадр проскакивает пустое состояние «нет данных».
-    const isNeedRightBlock = (0, react_1.useMemo)(() => segments !== undefined && (loading || segments.some(segment => segment.items.length > 0)), [segments, loading]);
+    const isNeedRightBlock = segments !== undefined && (loading || 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 servicesById = (0, react_1.useMemo)(() => (0, utils_1.buildServicesById)(allServiceGroups), [allServiceGroups]);
     const mainMenuDnd = (0, useMainMenuDnd_1.useMainMenuDnd)({
         favorite,
-        servicesById,
+        groups: allServiceGroups,
         showDescription: preferences?.showDescription.value ?? false,
     });
     const handleCloseDrawer = (0, react_1.useCallback)(() => {
-        setOpen?.(false);
+        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, servicesById: servicesById }), 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)("div", { 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, { 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, onSegmentServiceClick: onSegmentServiceClick, 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, { 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, onSegmentServiceClick: onSegmentServiceClick, 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

@@ -1,5 +1,5 @@
 .drawer{
-  border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
+  border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0px)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0px));
 }
 
 .scroll{
@@ -27,7 +27,7 @@
 .drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width]{
   box-sizing:border-box;
   width:100%;
-  max-width:calc(263px + var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))));
+  max-width:calc(263px + var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
 }
 .drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width] .left{
   width:100%;
@@ -53,6 +53,11 @@
 .rightContent{
   container-type:inline-size;
   overflow-x:clip;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  width:100%;
+  min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }
 
@@ -61,7 +66,7 @@
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .menuBody{

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

@@ -3,7 +3,7 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
   box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .closeButton{

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

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

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

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuMobile = MenuMobile;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const divider_1 = require("@cloud-ru/ds-divider");
+const theme_1 = require("@cloud-ru/ds-theme");
+const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
 const constants_1 = require("../../../../constants");
 const mobileOverlays_1 = require("../../../../mobileOverlays");
 const useMainMenuDnd_1 = require("../../hooks/useMainMenuDnd");
 const useMenuItems_1 = require("../../hooks/useMenuItems");
-const utils_1 = require("../../utils");
 const Content_1 = require("../Content");
 const Favorites_1 = require("../Favorites");
 const MenuBottom_1 = require("../MenuBottom");
@@ -20,7 +21,8 @@ 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 = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, logo, rightTop, leftTop, leftBottom, loading, }) {
+function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, logo, rightTop, leftTop, leftBottom, loading, }) {
+    const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     // `segments !== undefined` — сигнал «каталог вообще используется» (консьюмер без сегментов
     // никогда не передаёт проп, и `loading` в этом случае к правой панели не относится). Пока
     // сегменты используются, `loading` держит панель смонтированной на время ответа бэка — иначе
@@ -34,9 +36,13 @@ function MenuMobile({ open = false, setOpen, settingItems, platformGroups, segme
         search,
         platformGroups,
     });
-    const servicesById = (0, react_1.useMemo)(() => (0, utils_1.buildServicesById)(segments?.flatMap(segment => segment.items)), [segments]);
+    const allServiceGroups = (0, react_1.useMemo)(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
     const handleClose = (0, react_1.useCallback)(() => {
-        setOpen?.(false);
+        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.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), 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 }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, servicesById: servicesById, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
+    return (
+    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
+    // `HeaderLayout`, поэтому объявляем плотность здесь же. Обёртка провайдера layout-прозрачная
+    // (`display: contents`) — меню рендерится порталом, лишний бокс в строке шапки не нужен.
+    (0, jsx_runtime_1.jsx)(theme_1.ChildThemeProvider, { value: { density: theme_1.DENSITY.Comfort }, className: styles_module_scss_1.default.densityScope, children: (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.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), 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 }), !isSearching && 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, 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, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }) }));
 }

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

@@ -1,10 +1,21 @@
+.densityScope{
+  display:contents;
+}
+
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
   padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
+.rightContent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  min-width:0;
+}
+
 .drawerMobile{
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3))) !important;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3))) !important;
 }
 
 .scrollMobile{

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

@@ -4,4 +4,4 @@ export type MountAnimationProps = PropsWithChildren<WithSupportProps<{
     type?: 'fade-slide-up' | 'fade-slide-up-right' | 'slide-right' | 'fade-in';
     className?: string;
 }>>;
-export declare function MountAnimation({ children, type, className, ...props }: MountAnimationProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function MountAnimation({ children, type, className, ...props }: MountAnimationProps): import("react/jsx-runtime").JSX.Element;