@cloud-ru/ds-uikit-product-header 1.0.1-preview-7665e9c3.0

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

@@ -0,0 +1,155 @@
+import { arrayMove } from '@dnd-kit/sortable';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+function mergeIdsPreservingOrder(prevIds, nextIds) {
+    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;
+    }
+    return [...kept, ...added];
+}
+function resolveOrder(orderProp, ids) {
+    if (!orderProp) {
+        return ids;
+    }
+    return mergeIdsPreservingOrder(orderProp, ids);
+}
+function mergeExpandedIds(prevExpanded, prevKnownIds, nextIds) {
+    const nextIdSet = new Set(nextIds);
+    const prevKnownIdSet = new Set(prevKnownIds);
+    const kept = prevExpanded.filter(id => nextIdSet.has(id));
+    const added = nextIds.filter(id => !prevKnownIdSet.has(id));
+    if (added.length === 0) {
+        return kept;
+    }
+    return [...kept, ...added];
+}
+function resolveInitialExpanded(seedExpanded, ids) {
+    if (seedExpanded === ids) {
+        return ids;
+    }
+    return mergeExpandedIds(seedExpanded, seedExpanded, ids);
+}
+/**
+ * Порядок и expanded для активного сегмента или поисковой выдачи.
+ * Uncontrolled-состояние кэшируется по id сегмента, чтобы не сбрасываться при переключении.
+ */
+export function useContentSegmentsSortable({ segments, activeSegmentId, isSearching, searchGroups, segmentPrefsById, onSegmentOrderChange, onSegmentExpandedChange, disabled, isMobile, }) {
+    const activeSegment = useMemo(() => segments.find(segment => segment.id === activeSegmentId) ?? segments[0], [activeSegmentId, segments]);
+    const activePrefs = activeSegment ? segmentPrefsById.get(activeSegment.id) : undefined;
+    const groups = useMemo(() => (isSearching ? searchGroups : (activeSegment?.items ?? [])), [activeSegment?.items, isSearching, searchGroups]);
+    const ids = useMemo(() => groups.map(({ id }) => id), [groups]);
+    const idsKey = ids.join('\u0000');
+    const cacheKey = isSearching ? '__search__' : (activeSegment?.id ?? '');
+    const orderControlled = !isSearching && activePrefs?.order !== undefined;
+    const expandedControlled = !isSearching && activePrefs?.expanded !== undefined;
+    const [cache, setCache] = useState({});
+    const knownIdsByCacheKeyRef = useRef({});
+    useEffect(() => {
+        const prevKnownIds = knownIdsByCacheKeyRef.current[cacheKey] ?? ids;
+        setCache(prev => {
+            const existing = prev[cacheKey];
+            let seedOrder = existing?.order ?? ids;
+            if (isSearching) {
+                seedOrder = ids;
+            }
+            else if (orderControlled) {
+                seedOrder = activePrefs?.order ?? ids;
+            }
+            const seedExpanded = expandedControlled ? (activePrefs?.expanded ?? ids) : (existing?.expanded ?? ids);
+            const nextOrder = isSearching ? ids : resolveOrder(seedOrder, ids);
+            const nextExpanded = existing
+                ? mergeExpandedIds(seedExpanded, prevKnownIds, ids)
+                : resolveInitialExpanded(seedExpanded, ids);
+            if (existing &&
+                existing.order.length === nextOrder.length &&
+                existing.order.every((id, index) => id === nextOrder[index]) &&
+                existing.expanded.length === nextExpanded.length &&
+                existing.expanded.every((id, index) => id === nextExpanded[index])) {
+                return prev;
+            }
+            return {
+                ...prev,
+                [cacheKey]: { order: nextOrder, expanded: nextExpanded },
+            };
+        });
+        knownIdsByCacheKeyRef.current[cacheKey] = ids;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cacheKey, idsKey, isSearching, orderControlled, expandedControlled, activePrefs?.order, activePrefs?.expanded]);
+    const cached = cache[cacheKey] ?? { order: resolveOrder(undefined, ids), expanded: ids };
+    // В поиске порядок задаёт useMenuItems (regular → platform → pinned).
+    // Кэш order иначе «залипает» между нажатиями и поднимает platform выше новых совпадений.
+    const order = useMemo(() => {
+        if (isSearching) {
+            return ids;
+        }
+        if (orderControlled) {
+            return resolveOrder(activePrefs?.order, ids);
+        }
+        return resolveOrder(cached.order, ids);
+    }, [activePrefs?.order, cached.order, ids, isSearching, orderControlled]);
+    // Controlled expanded: knownIds — из ref (уже виденные группы), не из самого expanded.
+    // Иначе collapse-all (`expanded: []`) трактует все id как «новые» и снова раскрывает их.
+    // Ссылку стабилизируем: новый массив на каждом рендере ломает анимацию sortable / DragOverlay.
+    const expandedIds = useMemo(() => {
+        if (!expandedControlled) {
+            return cached.expanded;
+        }
+        const knownIds = knownIdsByCacheKeyRef.current[cacheKey] ?? ids;
+        return mergeExpandedIds(activePrefs?.expanded ?? ids, knownIds, ids);
+    }, [activePrefs?.expanded, cacheKey, cached.expanded, expandedControlled, ids]);
+    const groupsById = useMemo(() => new Map(groups.map(group => [group.id, group])), [groups]);
+    const orderedGroups = useMemo(() => {
+        if (isSearching) {
+            return groups;
+        }
+        return order.map(id => groupsById.get(id)).filter((group) => Boolean(group));
+    }, [groups, groupsById, isSearching, order]);
+    const handleDragEnd = useCallback(({ active, over }) => {
+        if (disabled || !over || active.id === over.id) {
+            return;
+        }
+        const oldIndex = order.indexOf(String(active.id));
+        const newIndex = order.indexOf(String(over.id));
+        if (oldIndex === -1 || newIndex === -1) {
+            return;
+        }
+        const nextOrder = resolveOrder(arrayMove(order, oldIndex, newIndex), ids);
+        if (!orderControlled) {
+            setCache(prev => ({
+                ...prev,
+                [cacheKey]: {
+                    order: nextOrder,
+                    expanded: prev[cacheKey]?.expanded ?? expandedIds,
+                },
+            }));
+        }
+        if (!isSearching && activeSegment) {
+            onSegmentOrderChange?.(activeSegment.id, nextOrder);
+        }
+    }, [activeSegment, cacheKey, disabled, expandedIds, ids, isSearching, onSegmentOrderChange, order, orderControlled]);
+    const onExpandedChange = useCallback((value) => {
+        if (isMobile) {
+            return;
+        }
+        const nextExpanded = value ?? [];
+        if (!expandedControlled) {
+            setCache(prev => ({
+                ...prev,
+                [cacheKey]: {
+                    order: prev[cacheKey]?.order ?? order,
+                    expanded: nextExpanded,
+                },
+            }));
+        }
+        if (!isSearching && activeSegment) {
+            onSegmentExpandedChange?.(activeSegment.id, nextExpanded);
+        }
+    }, [activeSegment, cacheKey, expandedControlled, isSearching, isMobile, onSegmentExpandedChange, order]);
+    return {
+        orderedGroups,
+        expandedIds,
+        onExpandedChange,
+        handleDragEnd,
+    };
+}

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

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

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDndMonitor } from '@dnd-kit/core';
+import { useCallback } from 'react';
+import { useMainMenuDndOverlay } from '../../../hooks/useMainMenuDnd.js';
+import { isServiceDragId, resolveGroupBlockColor } from '../../../utils/index.js';
+import { SortableGroupDragPreview } from '../helperComponents/SortableGroup/index.js';
+/**
+ * DnD групп внутри активного сегмента: drag overlay группы поверх `useContentSegmentsSortable`.
+ * Сервис-драг (карточка → избранное) сюда не попадает — фильтруется через `isServiceDragId`.
+ */
+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, favorite: activeGroup.favoritesEnabled ? favorite : undefined, highlight: activeGroup.highlight }));
+            }
+        }
+    }, [expandedIds, favorite, setGroupDragOverlay, showDescription, showGroupsColors, visibleGroups]);
+    const handleDragEnd = useCallback((event) => {
+        setGroupDragOverlay(null);
+        if (isServiceDragId(event.active.id)) {
+            return;
+        }
+        onSortableDragEnd(event);
+    }, [onSortableDragEnd, setGroupDragOverlay]);
+    const handleDragCancel = useCallback(() => {
+        setGroupDragOverlay(null);
+    }, [setGroupDragOverlay]);
+    useDndMonitor({
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+    });
+    /* useEffect(() => {
+      if (!activeGroup) {
+        setGroupDragOverlay(null);
+        return;
+      }
+  
+      setGroupDragOverlay(
+        <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}
+        />,
+      );
+  
+      return () => setGroupDragOverlay(null);
+    }, [activeGroup, expandedIds, favorite, setGroupDragOverlay, showDescription, showGroupsColors]); */
+}

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

@@ -0,0 +1,2 @@
+export * from './Content.js';
+export * from './constants.js';

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

@@ -0,0 +1,2 @@
+export * from './Content.js';
+export * from './constants.js';

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

@@ -0,0 +1,8 @@
+.content[data-empty]{
+  align-items:center;
+  justify-content:center;
+  height:100%;
+}
+.content[data-empty][data-mobile]{
+  flex:1 1 auto;
+}

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

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

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

@@ -0,0 +1,73 @@
+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 { 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 { EmptyState, FavoritesItemsSkeleton, FavoritesSortable } from './components/index.js';
+import { FAVORITES_SEGMENT, FAVORITES_TEST_IDS } from './constants.js';
+import styles from './styles.module.css';
+import { getCommonCardProps } from './utils.js';
+export function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
+    const { t } = headerLocale.useTranslations();
+    const loading = favorite.loading;
+    const [segment, setSegment] = useValueControl({
+        value: favorite.segment,
+        defaultValue: FAVORITES_SEGMENT.Favorites,
+        onChange: favorite.onSegmentChange,
+    });
+    const segmentControlItems = useMemo(() => [
+        { 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, allServiceGroups), [favorite.value, allServiceGroups]);
+    const recentItems = useMemo(() => resolveInnerLinksByIds(favorite.recentServices ?? [], allServiceGroups), [favorite.recentServices, allServiceGroups]);
+    const resolvedSegment = segment ?? FAVORITES_SEGMENT.Favorites;
+    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 recentCards = recentItems.map(service => (_jsx(CardServiceLight, { as: 'a', className: styles.card, favorite: {
+            enabled: true,
+            checked: favorite.value.includes(service.id),
+            onChange: favorite.onChange(service.id),
+        }, ...getCommonCardProps(service, handleRecentServiceClick(service)) }, service.id)));
+    const content = useMemo(() => {
+        if (loading) {
+            return _jsx(FavoritesItemsSkeleton, {});
+        }
+        const handleFavoriteServiceClick = (service) => (event) => {
+            favorite.onFavoriteServiceClick?.(service.id, event);
+            service.onClick(event);
+        };
+        /* Drag&drop реордер и приём карточек из сетки — только на desktop (требует
+          <DndContext>-предка). На mobile нет reorder-жеста, добавление/удаление
+          избранного идёт через звёздочку на карточке. */
+        return isMobile ? (_jsx("div", { className: styles.listScroll, children: _jsx(Scroll, { className: styles.listScrollInner, 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', actionsSize: 's', 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 }));
+    }, [
+        favorite,
+        favoriteItems,
+        isEmpty,
+        isFavoritesSegment,
+        isMobile,
+        loading,
+        recentCards,
+        resolvedSegment,
+        setSegment,
+    ]);
+    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', outline: true, 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/EmptyFavoriteSVG.d.ts

@@ -0,0 +1,3 @@
+export declare function EmptyFavoriteSVG({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function EmptyFavoriteSVG({ className }) {
+    return (_jsxs("svg", { className: className, "data-favorite": 'true', xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none', children: [_jsx("path", { opacity: '0.64', d: 'M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108', fill: 'none', strokeWidth: '1.5' }), _jsx("path", { d: 'M20 6L24.7699 14.4348L34.2658 16.3647L27.7178 23.5077L28.8168 33.1353L20 29.115L11.1832 33.1353L12.2822 23.5077L5.73415 16.3647L15.2301 14.4348L20 6Z', stroke: 'none' })] }));
+}

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

@@ -0,0 +1,3 @@
+export declare function EmptyRecentSVG({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function EmptyRecentSVG({ className }) {
+    return (_jsxs("svg", { className: className, xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none', children: [_jsx("path", { opacity: '0.64', d: 'M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108', stroke: '#5E606E', fill: 'none', strokeWidth: '1.5' }), _jsx("path", { d: 'M6 15L34 15L34 25L6 25L6 15Z', stroke: 'none', fill: '#C3C8D5' }), _jsx("path", { opacity: '0.64', d: 'M11.2372 20H8.33398M17.7695 20H14.8662M24.3017 20H21.3985M30.834 20H27.9308', fill: 'none', stroke: '#5E606E', strokeWidth: '1.5' }), _jsx("circle", { opacity: '0.64', cx: '2', cy: '2', r: '2', transform: 'matrix(-1 0 0 1 10 7)', stroke: '#5E606E', fill: 'none', strokeWidth: '1.5' })] }));
+}

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

@@ -0,0 +1,6 @@
+type EmptyStateProps = {
+    isFavoritesSegment: boolean;
+    isMobile?: boolean;
+};
+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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@cloud-ru/ds-typography';
+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';
+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') })] })) }));
+}

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

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

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

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

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

@@ -0,0 +1,23 @@
+.emptyIcon{
+  flex-shrink:0;
+  width:var(--sn-primitive-dimension-40, 40px);
+  height:var(--sn-primitive-dimension-40, 40px);
+}
+.emptyIcon[data-favorite]{
+  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)));
+}
+
+.emptyState{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  padding:var(--sn-primitive-dimension-8, 8px);
+}
+
+.emptyText{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-align:center;
+  white-space:pre-line;
+}

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

@@ -0,0 +1 @@
+export declare function FavoritesItemsSkeleton(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton, SkeletonContext } from '@cloud-ru/ds-skeleton';
+import styles from '../styles.module.css';
+export function FavoritesItemsSkeleton() {
+    return (_jsx(SkeletonContext.Provider, { value: true, children: _jsxs("div", { className: styles.skeleton, children: [_jsx(Skeleton, { className: styles.skeletonItem }), _jsx(Skeleton, { className: styles.skeletonItem }), _jsx(Skeleton, { className: styles.skeletonItem })] }) }));
+}

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

@@ -0,0 +1,8 @@
+import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
+export type SortableFavoriteCardProps = {
+    serviceId: string;
+    showInsertIndicatorBefore?: boolean;
+    showInsertIndicatorAfter?: boolean;
+    isFirst?: boolean;
+} & Pick<CardServiceLightProps<'a'>, 'href' | 'className' | 'tabIndex' | 'title' | 'onClick' | 'icon' | 'promoTag' | 'tooltip' | 'favorite' | 'expandable' | 'data-test-id'>;
+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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { getServiceFavoriteDragId } from '../../../utils/dnd/index.js';
+import styles from '../styles.module.css';
+export function SortableFavoriteCard({ serviceId, className, showInsertIndicatorBefore, showInsertIndicatorAfter, isFirst, ...cardProps }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: getServiceFavoriteDragId(serviceId),
+    });
+    const transformStyle = transform ? CSS.Translate.toString(transform) : undefined;
+    const style = {
+        // CSS.Transform добавляет scaleX/scaleY, из-за чего перетаскиваемая карточка "растягивается"
+        // при пересечении с соседней карточкой. CSS.Translate использует только сдвиг.
+        // Во время drag transform на источнике не применяем — превью в DragOverlay.
+        transform: isDragging ? undefined : transformStyle,
+        transition,
+    };
+    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 })] }));
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+export declare const FAVORITES_SEGMENT: {
+    readonly Favorites: "favorites";
+    readonly Recent: "recent";
+};
+export type FavoritesSegment = ValueOf<typeof FAVORITES_SEGMENT>;
+export declare const FAVORITES_TEST_IDS: {
+    readonly root: "header__drawer-menu__favorites";
+    readonly header: "header__drawer-menu__favorites-header";
+    readonly segmentControl: "header__drawer-menu__favorites-segment";
+    readonly settingsButton: "header__drawer-menu__favorites-settings";
+    readonly list: "header__drawer-menu__favorites-list";
+    readonly emptyState: "header__drawer-menu__favorites-empty";
+    readonly dropZone: "header__drawer-menu__favorites-drop-zone";
+};

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

@@ -0,0 +1,13 @@
+export const FAVORITES_SEGMENT = {
+    Favorites: 'favorites',
+    Recent: 'recent',
+};
+export const FAVORITES_TEST_IDS = {
+    root: 'header__drawer-menu__favorites',
+    header: 'header__drawer-menu__favorites-header',
+    segmentControl: 'header__drawer-menu__favorites-segment',
+    settingsButton: 'header__drawer-menu__favorites-settings',
+    list: 'header__drawer-menu__favorites-list',
+    emptyState: 'header__drawer-menu__favorites-empty',
+    dropZone: 'header__drawer-menu__favorites-drop-zone',
+};

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 {};