@cloud-ru/ds-uikit-product-header 1.5.2-preview-b174c2b1.0 → 1.5.2

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.js

@@ -1,21 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion } from '@cloud-ru/ds-accordion';
-import { memo, useCallback, useMemo, useState } from 'react';
-import { noop } from '../../../../../../../../utils/noop.js';
+import { useCallback, useMemo, useState } from 'react';
 import { getNestedServiceGroupId, getSubCategoryId } from '../../../../../../utils/innerLink.js';
-import { GridServiceCard } from '../../../../../ServiceCard/index.js';
-import { useCardsContext } from '../../../../cardsContext.js';
+import { DraggableServiceCard } from '../../../../../ServiceCard/index.js';
 import { TEST_IDS } from '../../../../constants.js';
 import baseGroupStyles from '../../styles.module.css';
 import styles from './styles.module.css';
 import { SubCategoryTitle } from './SubCategoryTitle.js';
-const TITLE_ONLY_EXPANDABLE = { value: true, onClick: noop };
-const SubCategoryBody = memo(function SubCategoryBody({ nestedGroupId, items, variant }) {
-    const { isMobile, showDescription, dragEnabled, favoriteIds, onFavoriteChange, onServiceClick } = useCardsContext();
-    const cardFavoriteChange = favoriteIds ? onFavoriteChange : undefined;
-    return (_jsx("div", { className: baseGroupStyles.groupBody, "data-subcategory-body": variant === 'expanded' ? 'expanded' : true, "data-mobile": isMobile || undefined, children: items.map(nestedService => (_jsx(GridServiceCard, { groupId: nestedGroupId, service: nestedService, isFavorite: favoriteIds?.has(nestedService.id), onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragEnabled: dragEnabled }, nestedGroupId + nestedService.id))) }));
-});
-function SubCategoryBase({ groupId, service, groupFavoritesEnabled }) {
+const noop = () => { };
+export function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, groupFavoritesEnabled, }) {
     const subcategoryId = getSubCategoryId(groupId, service.id);
     const nestedGroupId = getNestedServiceGroupId(groupId, service.id);
     const nestedItems = useMemo(() => service.items?.filter(item => !item.hidden) ?? [], [service.items]);
@@ -29,17 +22,19 @@ function SubCategoryBase({ groupId, service, groupFavoritesEnabled }) {
             setIsExpanded(isExpanded ? undefined : subcategoryId);
         }
     }, [isExpanded, subcategoryId, isExpandableEnabled]);
-    const expandable = useMemo(() => ({ value: Boolean(isExpanded), onClick: handleExpandedChange }), [isExpanded, handleExpandedChange]);
-    const testId = `${TEST_IDS.subcategory}-${service.id}`;
-    const title = (_jsx(SubCategoryTitle, { groupId: groupId, service: service, expandable: viewMode === 'group-title-only' ? TITLE_ONLY_EXPANDABLE : expandable, groupFavoritesEnabled: groupFavoritesEnabled }));
     // 'group-title-only' — только заголовок подкатегории, без раскрываемого тела и кнопки
     // переключения: карточка ведёт себя как обычная ссылка (см. isSubCategoryCard в utils/innerLink).
     if (viewMode === 'group-title-only') {
-        return (_jsx("div", { className: styles.subcategory, "data-title-only": true, "data-test-id": testId, children: title }));
+        return (_jsx("div", { className: styles.subcategory, "data-title-only": true, "data-test-id": `${TEST_IDS.subcategory}-${service.id}`, children: _jsx(SubCategoryTitle, { groupId: groupId, service: service, expandable: { value: true, onClick: noop }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }) }));
     }
     if (viewMode === 'expanded') {
-        return (_jsxs("div", { className: styles.subcategory, "data-test-id": testId, children: [title, _jsx(SubCategoryBody, { nestedGroupId: nestedGroupId, items: nestedItems, variant: 'expanded' })] }));
+        return (_jsxs("div", { className: styles.subcategory, "data-test-id": `${TEST_IDS.subcategory}-${service.id}`, children: [_jsx(SubCategoryTitle, { groupId: groupId, service: service, expandable: {
+                        value: Boolean(isExpanded),
+                        onClick: handleExpandedChange,
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), _jsx("div", { className: baseGroupStyles.groupBody, "data-subcategory-body": 'expanded', "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => (_jsx(DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) })] }));
     }
-    return (_jsx("div", { className: styles.subcategory, "data-test-id": testId, children: _jsx(Accordion, { selectionMode: 'single', expanded: isExpanded, onExpandedChange: handleExpandedChange, children: _jsx(Accordion.CollapseBlockTertiary, { id: subcategoryId, showChevron: false, className: styles.subcategoryAccordion, afterTitle: title, children: _jsx(SubCategoryBody, { nestedGroupId: nestedGroupId, items: nestedItems, variant: 'expandable' }) }) }) }));
+    return (_jsx("div", { className: styles.subcategory, "data-test-id": `${TEST_IDS.subcategory}-${service.id}`, children: _jsx(Accordion, { selectionMode: 'single', expanded: isExpanded, onExpandedChange: handleExpandedChange, children: _jsx(Accordion.CollapseBlockTertiary, { id: subcategoryId, showChevron: false, className: styles.subcategoryAccordion, afterTitle: _jsx(SubCategoryTitle, { groupId: groupId, service: service, expandable: {
+                        value: Boolean(isExpanded),
+                        onClick: handleExpandedChange,
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), children: _jsx("div", { className: baseGroupStyles.groupBody, "data-subcategory-body": true, "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => (_jsx(DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) }) }) }) }));
 }
-export const SubCategory = memo(SubCategoryBase);

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategoryTitle.d.ts

@@ -1,10 +1,5 @@
-import { GridServiceCardProps } from '../../../../../ServiceCard/index.js';
+import { DraggableServiceCardProps } from '../../../../../ServiceCard/index.js';
 export type SubCategoryTitleProps = {
-    /** Id группы-предка. */
     groupId: string;
-    /** Кнопка избранного показывается только если для группы избранное включено. */
-    groupFavoritesEnabled?: boolean;
-} & Pick<GridServiceCardProps, 'expandable' | 'service'>;
-declare function SubCategoryTitleBase({ groupId, service, groupFavoritesEnabled, expandable }: SubCategoryTitleProps): import("react/jsx-runtime").JSX.Element;
-export declare const SubCategoryTitle: import("react").MemoExoticComponent<typeof SubCategoryTitleBase>;
-export {};
+} & Pick<DraggableServiceCardProps, 'expandable' | 'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile' | 'dragDisabled'>;
+export declare function SubCategoryTitle({ groupId, service, showDescription: showDescriptionProp, isMobile, dragDisabled, favorite, onServiceClick, expandable, }: SubCategoryTitleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,62 +3,56 @@ import { Typography } from '@cloud-ru/ds-typography';
 import { CardActionsSurface, createCardActionsKeyDownHandler } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';
 import { stopEventPropagation } from '@cloud-ru/ds-utils';
-import { memo, useCallback, useMemo, useRef } from 'react';
+import { useRef } from 'react';
 import { getLinkEmblem } from '../../../../../../utils/index.js';
-import { GridServiceCard } from '../../../../../ServiceCard/index.js';
-import { useCardsContext } from '../../../../cardsContext.js';
+import { DraggableServiceCard } from '../../../../../ServiceCard/index.js';
 import { TEST_IDS } from '../../../../constants.js';
 import styles from './styles.module.css';
-function SubCategoryTitleBase({ groupId, service, groupFavoritesEnabled, expandable }) {
-    const { isMobile, showDescription: showDescriptionProp, dragEnabled, favoriteIds, onFavoriteChange, onServiceClick, } = useCardsContext();
+export function SubCategoryTitle({ groupId, service, showDescription: showDescriptionProp, isMobile, dragDisabled, favorite, onServiceClick, expandable, }) {
     const titleRef = useRef(null);
     const tooltipTriggerRef = useRef(null);
     const favoriteRef = useRef(null);
-    const { id, description, icon } = service;
-    const handleServiceClick = useCallback((event) => {
+    const handleServiceClick = (event) => {
         stopEventPropagation(event);
         onServiceClick?.(service, event);
-    }, [onServiceClick, service]);
-    const titleTestId = `${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 = useMemo(() => createCardActionsKeyDownHandler({
+    };
+    const titleTestId = `${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 = 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 = useMemo(() => getLinkEmblem({ icon }), [icon]);
+    });
     if (expandable?.value) {
-        return (_jsxs("div", { className: styles.subcategoryTitle, "data-mobile": isMobile || undefined, children: [_jsxs("div", { className: styles.subcategoryTitleRow, onKeyDown: handleKeyDown, children: [_jsx(TitleClickable, { as: 'a', href: service.href, onClick: handleServiceClick, innerRef: titleRef, title: service.label, icon: emblem, className: styles.subcategoryTitleClickable, "data-test-id": titleTestId }), _jsx(CardActionsSurface, { className: styles.subcategoryTitleActions, actionsVisibility: 'always', actionsSize: isMobile ? 's' : 'm', tooltip: hasTooltip
+        return (_jsxs("div", { className: styles.subcategoryTitle, "data-mobile": isMobile || undefined, children: [_jsxs("div", { className: styles.subcategoryTitleRow, onKeyDown: handleKeyDown, children: [_jsx(TitleClickable, { as: 'a', href: service.href, onClick: handleServiceClick, innerRef: titleRef, title: service.label, icon: getLinkEmblem(service), className: styles.subcategoryTitleClickable, "data-test-id": titleTestId }), _jsx(CardActionsSurface, { className: styles.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 && (_jsx(Typography, { as: 'p', variant: 'body', size: 's', className: styles.subcategoryDescription, "data-test-id": `${titleTestId}-description`, children: description }))] }));
+                                : undefined })] }), showDescription && (_jsx(Typography, { as: 'p', variant: 'body', size: 's', className: styles.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
-    _jsx("div", { className: styles.subcategoryTitleDraggable, onPointerDown: stopEventPropagation, onClick: stopEventPropagation, children: _jsx(GridServiceCard, { groupId: groupId, service: service, isFavorite: isFavorite, onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragEnabled: dragEnabled, expandable: expandable }) }));
+    _jsx("div", { className: styles.subcategoryTitleDraggable, onPointerDown: stopEventPropagation, onClick: stopEventPropagation, children: _jsx(DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragDisabled: dragDisabled, expandable: expandable }) }));
 }
-export const SubCategoryTitle = memo(SubCategoryTitleBase);

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

@@ -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;
@@ -58,14 +56,6 @@
   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-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;
-  }
-}
 .group[data-drag-preview]{
   cursor:grabbing;
 }
@@ -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/esm/components/MainMenu/helperComponents/Content/hooks/useContentSegmentsSortable.js

@@ -1,10 +1,8 @@
 import { arrayMove } from '@dnd-kit/sortable';
 import { useCallback, useEffect, useMemo, useRef, useState } from '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/esm/components/MainMenu/helperComponents/Content/hooks/useSegmentDnd.d.ts

@@ -1,16 +1,16 @@
 import { DragEndEvent } from '@dnd-kit/core';
-import { LinksGroup } from '../../../types.js';
-import { CardsContextValue } from '../cardsContext.js';
+import { FavoriteProps, LinksGroup } from '../../../types.js';
 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/esm/components/MainMenu/helperComponents/Content/hooks/useSegmentDnd.js

@@ -8,16 +8,16 @@ import { SortableGroupDragPreview } from '../helperComponents/SortableGroup/inde
  * DnD групп внутри активного сегмента: drag overlay группы поверх `useContentSegmentsSortable`.
  * Сервис-драг (карточка → избранное) сюда не попадает — фильтруется через `isServiceDragId`.
  */
-export function useSegmentDnd({ visibleGroups, expandedIds, onSortableDragEnd, showDescription, showGroupsColors, favoriteIds, onFavoriteChange, }) {
+export function useSegmentDnd({ visibleGroups, expandedIds, onSortableDragEnd, showDescription, showGroupsColors, favorite, }) {
     const { setGroupDragOverlay } = useMainMenuDndOverlay();
     const handleDragStart = useCallback(({ active }) => {
         if (!isServiceDragId(active.id)) {
             const activeGroup = visibleGroups.find(({ id }) => id === String(active.id));
             if (activeGroup) {
-                setGroupDragOverlay(_jsx(SortableGroupDragPreview, { id: activeGroup.id, label: activeGroup.label, items: activeGroup.items, isExpanded: expandedIds.includes(activeGroup.id), blockColor: resolveGroupBlockColor(activeGroup.blockColor, showGroupsColors), showDescription: showDescription, favoriteIds: activeGroup.favoritesEnabled ? favoriteIds : undefined, onFavoriteChange: onFavoriteChange, highlight: activeGroup.highlight }));
+                setGroupDragOverlay(_jsx(SortableGroupDragPreview, { id: activeGroup.id, label: activeGroup.label, items: activeGroup.items, isExpanded: expandedIds.includes(activeGroup.id), blockColor: 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 = useCallback((event) => {
         setGroupDragOverlay(null);
         if (isServiceDragId(event.active.id)) {

package/dist/esm/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/esm/components/MainMenu/helperComponents/Favorites/Favorites.d.ts

@@ -1,12 +1,12 @@
-import { FavoriteProps, InnerLink } from '../../types.js';
+import { FavoriteProps, LinksGroup } from '../../types.js';
 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/esm/components/MainMenu/helperComponents/Favorites/Favorites.js

@@ -2,16 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@cloud-ru/ds-button';
 import { KebabSVG } from '@cloud-ru/ds-icons/interface/system';
 import { Droplist } from '@cloud-ru/ds-list';
+import { Scroll } from '@cloud-ru/ds-scroll';
 import { SegmentControl, WIDTH } from '@cloud-ru/ds-segment-control';
-import { useEventHandler, useValueControl } from '@cloud-ru/ds-utils';
+import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import { useMemo } from 'react';
 import { headerLocale } from '../../../../locale/index.js';
 import { resolveInnerLinksByIds } from '../../utils/index.js';
-import { FavoritesDesktop, FavoritesItemsSkeleton, FavoritesMobile } from './components/index.js';
+import { EmptyState, FavoritesItemsSkeleton, FavoritesSortable } from './components/index.js';
 import { FAVORITES_SEGMENT, FAVORITES_TEST_IDS } from './constants.js';
 import styles from './styles.module.css';
-export function Favorites({ favorite, servicesById, headerClassName, isMobile }) {
+import { getCommonCardProps } from './utils.js';
+export function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
     const { t } = headerLocale.useTranslations();
     const loading = favorite.loading;
     const [segment, setSegment] = useValueControl({
@@ -23,23 +26,38 @@ export function Favorites({ favorite, servicesById, headerClassName, isMobile })
         { value: FAVORITES_SEGMENT.Favorites, label: t('favorite.title'), disabled: loading },
         { value: FAVORITES_SEGMENT.Recent, label: t('recent.title'), disabled: loading },
     ], [t, loading]);
-    const favoriteItems = useMemo(() => resolveInnerLinksByIds(favorite.value, servicesById), [favorite.value, servicesById]);
-    const recentItems = useMemo(() => resolveInnerLinksByIds(favorite.recentServices ?? [], servicesById), [favorite.recentServices, servicesById]);
+    const favoriteItems = useMemo(() => resolveInnerLinksByIds(favorite.value, allServiceGroups), [favorite.value, allServiceGroups]);
+    const recentItems = useMemo(() => resolveInnerLinksByIds(favorite.recentServices ?? [], allServiceGroups), [favorite.recentServices, allServiceGroups]);
     const resolvedSegment = segment ?? FAVORITES_SEGMENT.Favorites;
-    // Стабильные по ссылке колбэки: иначе `memo` карточек и списков-по-сегменту ломается
-    // при каждом рендере `Favorites` — см. `FavoritesReorderList`/`RecentList`/`FavoritesList`.
-    const handleRecentServiceClick = useEventHandler((service) => (event) => {
+    const isFavoritesSegment = resolvedSegment === FAVORITES_SEGMENT.Favorites;
+    const isEmpty = (isFavoritesSegment ? favoriteItems : recentItems).length === 0;
+    const handleRecentServiceClick = (service) => (event) => {
         favorite.onRecentServiceClick?.(service.id, event);
         service.onClick(event);
-    });
-    const handleFavoriteServiceClick = useEventHandler((service) => (event) => {
+    };
+    const handleFavoriteServiceClick = (service) => (event) => {
         favorite.onFavoriteServiceClick?.(service.id, event);
         service.onClick(event);
-    });
-    /* Drag&drop реордер и приём карточек из сетки — только на desktop (требует
-        <DndContext>-предка). На mobile нет reorder-жеста, добавление/удаление
-        избранного идёт через звёздочку на карточке. Оба варианта сами решают по
-        сегменту, что рендерить — вся карточко-строительная логика внутри них. */
-    const content = isMobile ? (_jsx(FavoritesMobile, { favoriteIds: favorite.value, onFavoriteChange: favorite.onChange, favoriteItems: favoriteItems, recentItems: recentItems, segment: resolvedSegment, onFavoriteServiceClick: handleFavoriteServiceClick, onRecentServiceClick: handleRecentServiceClick })) : (_jsx(FavoritesDesktop, { favoriteIds: favorite.value, onFavoriteChange: favorite.onChange, favoriteItems: favoriteItems, recentItems: recentItems, segment: resolvedSegment, setSegment: setSegment, onFavoriteServiceClick: handleFavoriteServiceClick, onRecentServiceClick: handleRecentServiceClick }));
-    return (_jsxs("div", { className: styles.root, "data-test-id": FAVORITES_TEST_IDS.root, children: [_jsxs("div", { className: cn(styles.header, headerClassName), "data-test-id": FAVORITES_TEST_IDS.header, children: [_jsx(SegmentControl, { size: 'm', width: WIDTH.Full, value: segment, onChange: setSegment, className: styles.segmentControl, "data-test-id": FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && (_jsx(Droplist, { size: 'm', ...favorite.actions, closeDroplistOnItemClick: true, children: _jsx(Button, { view: 'function', size: 'm', appearance: 'neutral', icon: _jsx(KebabSVG, { size: 24 }), "data-test-id": FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), loading ? _jsx(FavoritesItemsSkeleton, {}) : content] }));
+    };
+    const recentCards = recentItems.map(service => (_jsx(CardServiceLight, { as: 'a', className: styles.card, actionsVisibility: isMobile ? 'always' : 'hover', favorite: {
+            enabled: true,
+            checked: favorite.value.includes(service.id),
+            onChange: favorite.onChange(service.id),
+        }, ...getCommonCardProps(service, handleRecentServiceClick(service)) }, service.id)));
+    const content = (() => {
+        if (loading) {
+            return _jsx(FavoritesItemsSkeleton, {});
+        }
+        /* Drag&drop реордер и приём карточек из сетки — только на desktop (требует
+          <DndContext>-предка). На mobile нет reorder-жеста, добавление/удаление
+          избранного идёт через звёздочку на карточке. */
+        return isMobile ? (_jsx("div", { className: styles.listScroll, children: _jsx(Scroll, { className: styles.listScrollInner, "data-mobile": isMobile || undefined, overflow: { x: 'hidden' }, children: _jsxs("div", { className: styles.list, "data-test-id": FAVORITES_TEST_IDS.list, children: [isEmpty && _jsx(EmptyState, { isFavoritesSegment: isFavoritesSegment, isMobile: true }), !isEmpty &&
+                            isFavoritesSegment &&
+                            favoriteItems.map(service => (_jsx(CardServiceLight, { as: 'a', className: styles.card, actionsVisibility: 'always', favorite: {
+                                    enabled: true,
+                                    checked: true,
+                                    onChange: favorite.onChange(service.id),
+                                }, ...getCommonCardProps(service, handleFavoriteServiceClick(service)) }, service.id))), !isEmpty && !isFavoritesSegment && recentCards] }) }) })) : (_jsx(FavoritesSortable, { favorite: favorite, favoriteItems: favoriteItems, segment: resolvedSegment, setSegment: setSegment, isEmpty: isEmpty, recentCards: recentCards, onFavoriteServiceClick: handleFavoriteServiceClick }));
+    })();
+    return (_jsxs("div", { className: styles.root, "data-test-id": FAVORITES_TEST_IDS.root, children: [_jsxs("div", { className: cn(styles.header, headerClassName), "data-test-id": FAVORITES_TEST_IDS.header, children: [_jsx(SegmentControl, { size: 'm', width: WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles.segmentControl, "data-test-id": FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && (_jsx(Droplist, { size: 'm', ...favorite.actions, closeDroplistOnItemClick: true, children: _jsx(Button, { view: 'function', size: 'm', appearance: 'neutral', icon: _jsx(KebabSVG, { size: 24 }), "data-test-id": FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
 }

package/dist/esm/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyState.d.ts

@@ -1,9 +1,6 @@
 type EmptyStateProps = {
-    /** Пустое состояние сегмента «Избранное» (иначе — «Недавнее»). */
     isFavoritesSegment: boolean;
-    /** Мобильная раскладка. */
     isMobile?: boolean;
 };
-declare function EmptyStateBase({ isFavoritesSegment, isMobile }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
-export declare const EmptyState: import("react").MemoExoticComponent<typeof EmptyStateBase>;
+export declare function EmptyState({ isFavoritesSegment, isMobile }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyState.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@cloud-ru/ds-typography';
-import { memo } from 'react';
 import { headerLocale } from '../../../../../../locale/index.js';
 import { FAVORITES_TEST_IDS } from '../../constants.js';
 import { EmptyFavoriteSVG } from './EmptyFavoriteSVG.js';
 import { EmptyRecentSVG } from './EmptyRecentSVG.js';
 import styles from './styles.module.css';
-function EmptyStateBase({ isFavoritesSegment, isMobile }) {
+export function EmptyState({ isFavoritesSegment, isMobile }) {
     const { t } = headerLocale.useTranslations();
     return (_jsx("div", { className: styles.emptyState, "data-test-id": FAVORITES_TEST_IDS.emptyState, children: isFavoritesSegment ? (_jsxs(_Fragment, { children: [_jsx(EmptyFavoriteSVG, { className: styles.emptyIcon }), _jsx(Typography, { variant: 'body', size: 's', className: styles.emptyText, children: isMobile ? t('favorite.emptyMobile') : t('favorite.emptyDesktop') })] })) : (_jsxs(_Fragment, { children: [_jsx(EmptyRecentSVG, { className: styles.emptyIcon }), _jsx(Typography, { variant: 'body', size: 's', className: styles.emptyText, children: t('recent.empty') })] })) }));
 }
-export const EmptyState = memo(EmptyStateBase);

package/dist/esm/components/MainMenu/helperComponents/Favorites/components/FavoritesSortable.d.ts

@@ -0,0 +1,19 @@
+import { MouseEvent, ReactNode } from 'react';
+import { FavoriteProps, InnerLink } from '../../../types.js';
+import { FavoritesSegment } from '../constants.js';
+type FavoritesSortableProps = {
+    favorite: FavoriteProps;
+    favoriteItems: InnerLink[];
+    segment: FavoritesSegment;
+    setSegment(segment: FavoritesSegment): void;
+    isEmpty: boolean;
+    recentCards: ReactNode;
+    onFavoriteServiceClick(service: InnerLink): (event: MouseEvent<HTMLElement>) => void;
+};
+/**
+ * Desktop-обёртка тела списка: реордер drag&drop + приём карточек из общей
+ * сетки. Требует `<DndContext>`-предка, поэтому `useFavoritesDnd` вызывается
+ * только здесь — на mobile этот компонент не рендерится вовсе (см. `Favorites`).
+ */
+export declare function FavoritesSortable({ favorite, favoriteItems, segment, setSegment, isEmpty, recentCards, onFavoriteServiceClick, }: FavoritesSortableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/MainMenu/helperComponents/Favorites/components/FavoritesSortable.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { DropTarget } from '@cloud-ru/ds-drag-and-drop';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { FAVORITES_SEGMENT, FAVORITES_TEST_IDS } from '../constants.js';
+import { useFavoritesDnd } from '../hooks/useFavoritesDnd.js';
+import styles from '../styles.module.css';
+import { getCommonCardProps } from '../utils.js';
+import { EmptyState } from './EmptyState/index.js';
+import { SortableFavoriteCard } from './SortableFavoriteCard.js';
+/**
+ * Desktop-обёртка тела списка: реордер drag&drop + приём карточек из общей
+ * сетки. Требует `<DndContext>`-предка, поэтому `useFavoritesDnd` вызывается
+ * только здесь — на mobile этот компонент не рендерится вовсе (см. `Favorites`).
+ */
+export function FavoritesSortable({ favorite, favoriteItems, segment, setSegment, isEmpty, recentCards, onFavoriteServiceClick, }) {
+    const isFavoritesSegment = segment === FAVORITES_SEGMENT.Favorites;
+    const { setNodeRef, listEndRef, favoriteSortableIds, insertIndex, isInsertingToEnd, showDropOver, showInsertNew } = useFavoritesDnd({ favorite, favoriteItems, segment, setSegment });
+    return (_jsxs("div", { className: styles.listScroll, "data-insert-new": showInsertNew, children: [_jsx(DropTarget, { active: Boolean(showDropOver), className: styles.dropTarget, "aria-hidden": true }), _jsx(Scroll, { className: styles.listScrollInner, overflow: { x: 'hidden' }, children: _jsxs("div", { ref: setNodeRef, className: styles.list, "data-test-id": FAVORITES_TEST_IDS.list, children: [isEmpty && _jsx(EmptyState, { isFavoritesSegment: isFavoritesSegment }), !isEmpty && isFavoritesSegment && (_jsxs(SortableContext, { items: favoriteSortableIds, strategy: verticalListSortingStrategy, children: [favoriteItems.map((service, index) => (_jsx(SortableFavoriteCard, { serviceId: service.id, showInsertIndicatorBefore: insertIndex === index, showInsertIndicatorAfter: isInsertingToEnd && index === favoriteItems.length - 1, isFirst: index === 0, favorite: {
+                                        enabled: true,
+                                        checked: true,
+                                        onChange: favorite.onChange(service.id),
+                                    }, ...getCommonCardProps(service, onFavoriteServiceClick(service)) }, service.id))), _jsx("div", { ref: listEndRef, className: styles.listEnd, "aria-hidden": true })] })), !isEmpty && !isFavoritesSegment && recentCards] }) })] }));
+}

package/dist/esm/components/MainMenu/helperComponents/Favorites/components/SortableFavoriteCard.d.ts

@@ -1,14 +1,8 @@
 import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
 export type SortableFavoriteCardProps = {
-    /** Id сервиса (используется для drag-идентификатора карточки). */
     serviceId: string;
-    /** Показывать индикатор вставки перед карточкой (drag поверх избранного). */
     showInsertIndicatorBefore?: boolean;
-    /** Показывать индикатор вставки после карточки (drag поверх избранного). */
     showInsertIndicatorAfter?: boolean;
-    /** Карточка первая в списке — влияет на позиционирование индикатора вставки. */
     isFirst?: boolean;
 } & Pick<CardServiceLightProps<'a'>, 'href' | 'className' | 'tabIndex' | 'title' | 'onClick' | 'icon' | 'promoTag' | 'tooltip' | 'favorite' | 'expandable' | 'data-test-id'>;
-declare function SortableFavoriteCardBase({ serviceId, className, showInsertIndicatorBefore, showInsertIndicatorAfter, isFirst, ...cardProps }: SortableFavoriteCardProps): import("react/jsx-runtime").JSX.Element;
-export declare const SortableFavoriteCard: import("react").MemoExoticComponent<typeof SortableFavoriteCardBase>;
-export {};
+export declare function SortableFavoriteCard({ serviceId, className, showInsertIndicatorBefore, showInsertIndicatorAfter, isFirst, ...cardProps }: SortableFavoriteCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/helperComponents/Favorites/components/SortableFavoriteCard.js

@@ -3,10 +3,9 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { DRAG_MODE, DragGhost, DropIndicator, PLACEMENT } from '@cloud-ru/ds-drag-and-drop';
 import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
-import { memo } from 'react';
 import { getServiceFavoriteDragId } from '../../../utils/dnd/index.js';
 import styles from '../styles.module.css';
-function SortableFavoriteCardBase({ serviceId, className, showInsertIndicatorBefore, showInsertIndicatorAfter, isFirst, ...cardProps }) {
+export function SortableFavoriteCard({ serviceId, className, showInsertIndicatorBefore, showInsertIndicatorAfter, isFirst, ...cardProps }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id: getServiceFavoriteDragId(serviceId),
     });
@@ -21,4 +20,3 @@ function SortableFavoriteCardBase({ serviceId, className, showInsertIndicatorBef
     const { tabIndex, ...restAttributes } = attributes ?? {};
     return (_jsxs(DragGhost, { innerRef: setNodeRef, style: style, className: styles.sortableCard, dragging: isDragging, mode: DRAG_MODE.Dynamic, ...listeners, ...restAttributes, children: [showInsertIndicatorBefore && _jsx(DropIndicator, { placement: PLACEMENT.Before, atEdge: isFirst }), _jsx(CardServiceLight, { as: 'a', ...cardProps, className: className ?? styles.card, tabIndex: tabIndex }), showInsertIndicatorAfter && _jsx(DropIndicator, { placement: PLACEMENT.After, atEdge: true })] }));
 }
-export const SortableFavoriteCard = memo(SortableFavoriteCardBase);

package/dist/esm/components/MainMenu/helperComponents/Favorites/components/index.d.ts

@@ -1,5 +1,4 @@
 export * from './SortableFavoriteCard.js';
 export * from './EmptyState/index.js';
-export * from './FavoritesDesktop.js';
+export * from './FavoritesSortable.js';
 export * from './FavoritesItemsSkeleton.js';
-export * from './FavoritesMobile.js';

package/dist/esm/components/MainMenu/helperComponents/Favorites/components/index.js

@@ -1,5 +1,4 @@
 export * from './SortableFavoriteCard.js';
 export * from './EmptyState/index.js';
-export * from './FavoritesDesktop.js';
+export * from './FavoritesSortable.js';
 export * from './FavoritesItemsSkeleton.js';
-export * from './FavoritesMobile.js';

package/dist/esm/components/MainMenu/helperComponents/Favorites/hooks/useFavoritesDnd.d.ts

@@ -0,0 +1,25 @@
+import { FavoriteProps, InnerLink } from '../../../types.js';
+import { FavoritesSegment } from '../constants.js';
+type UseFavoritesDndParams = {
+    favorite: FavoriteProps;
+    favoriteItems: InnerLink[];
+    segment: FavoritesSegment;
+    setSegment(segment: FavoritesSegment): void;
+};
+/**
+ * Оркестрирует drag&drop избранного: приём карточек сервисов из общей сетки
+ * (droppable), реордер внутри списка (insert-индикатор) и drag-превью.
+ *
+ * Требует `<DndContext>`-предка (см. `MainMenuDndContext`) — доступно только
+ * на desktop-раскладке, на mobile избранное рендерится без drag&drop.
+ */
+export declare function useFavoritesDnd({ favorite, favoriteItems, segment, setSegment }: UseFavoritesDndParams): {
+    setNodeRef: (element: HTMLElement | null) => void;
+    listEndRef: import("react").RefObject<HTMLDivElement>;
+    favoriteSortableIds: string[];
+    insertIndex: number | null;
+    isInsertingToEnd: boolean;
+    showDropOver: true | undefined;
+    showInsertNew: true | undefined;
+};
+export {};