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

package/dist/esm/components/MainMenu/helperComponents/Favorites/hooks/{useFavoritesReorder.js → useFavoritesDnd.js}

@@ -1,34 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useDndContext, useDndMonitor, useDroppable } from '@dnd-kit/core';
+import { useDndMonitor, useDroppable } from '@dnd-kit/core';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMainMenuDndOverlay } from '../../../hooks/useMainMenuDnd.js';
 import { FAVORITES_DROP_ID, getServiceFavoriteDragId, isServiceFavoriteDragId, isServiceSourceDragId, parseServiceDragId, } from '../../../utils/index.js';
 import { ServiceCard } from '../../ServiceCard/index.js';
+import { FAVORITES_SEGMENT } from '../constants.js';
 import { useFavoritesInsertIndicator } from './useFavoritesInsertIndicator.js';
 /**
- * Оркестрирует drag&drop сегмента «Избранное»: приём карточек сервисов из общей сетки
+ * Оркестрирует drag&drop избранного: приём карточек сервисов из общей сетки
  * (droppable), реордер внутри списка (insert-индикатор) и drag-превью.
  *
- * Монтируется только вместе с {@link FavoritesReorderList}, то есть пока активен сегмент
- * «Избранное» — переключение на этот сегмент при старте drag из каталога обеспечивает
- * {@link useFavoritesAutoSwitch}, смонтированный отдельно и постоянно. Из-за этого хук может
- * подключиться уже посреди drag (сегмент только что переключился) — начальное состояние в
- * этом случае читается из текущего активного drag через `useDndContext`, а не только из
- * будущих событий монитора.
- *
- * Требует `<DndContext>`-предка (см. `MainMenuDndContext`) — доступно только на desktop-раскладке,
- * на mobile избранное рендерится без drag&drop.
+ * Требует `<DndContext>`-предка (см. `MainMenuDndContext`) — доступно только
+ * на desktop-раскладке, на mobile избранное рендерится без drag&drop.
  */
-export function useFavoritesReorder({ favoriteIds, favoriteItems }) {
+export function useFavoritesDnd({ favorite, favoriteItems, segment, setSegment }) {
     const { setGroupDragOverlay } = useMainMenuDndOverlay();
-    const { active: activeOnMount } = useDndContext();
-    const [activeFavoriteId, setActiveFavoriteId] = useState(() => activeOnMount && isServiceFavoriteDragId(activeOnMount.id) ? parseServiceDragId(activeOnMount.id) : null);
-    const [isFavoriteReorderDrag, setIsFavoriteReorderDrag] = useState(() => Boolean(activeOnMount && isServiceFavoriteDragId(activeOnMount.id)));
-    const [isDraggingToFavorites, setDraggingToFavorites] = useState(() => Boolean(activeOnMount && isServiceSourceDragId(activeOnMount.id)));
+    const [activeFavoriteId, setActiveFavoriteId] = useState(null);
+    const [isFavoriteReorderDrag, setIsFavoriteReorderDrag] = useState(false);
+    const [isDraggingToFavorites, setDraggingToFavorites] = useState(false);
     const listEndRef = useRef(null);
     const shouldScrollToEndRef = useRef(false);
-    const favoriteSortableIds = useMemo(() => favoriteIds.map(getServiceFavoriteDragId), [favoriteIds]);
-    const insertIndex = useFavoritesInsertIndicator(favoriteIds);
+    const isFavoritesSegment = segment === FAVORITES_SEGMENT.Favorites;
+    const favoriteSortableIds = useMemo(() => favorite.value.map(getServiceFavoriteDragId), [favorite.value]);
+    const insertIndex = useFavoritesInsertIndicator(favorite.value);
     const isInsertingToEnd = favoriteItems.length > 0 && insertIndex === favoriteItems.length;
     const isInsertingNew = isDraggingToFavorites && !favoriteItems.length;
     const insertIndexRef = useRef(insertIndex);
@@ -37,11 +31,18 @@ export function useFavoritesReorder({ favoriteIds, favoriteItems }) {
     const { setNodeRef, isOver } = useDroppable({
         id: FAVORITES_DROP_ID,
         // Only needed for an empty list; with cards, card droppables own the hit-testing.
-        disabled: isFavoriteReorderDrag || favoriteItems.length > 0,
+        disabled: !isFavoritesSegment || isFavoriteReorderDrag || favoriteItems.length > 0,
     });
     useDndMonitor({
         onDragStart({ active }) {
+            // Форсим сегмент только для карточки из каталога: избранное уже показывается на
+            // сегменте Favorites, и его же карточки только там и рендерятся — при реордере внутри
+            // списка `setSegment` вызывался бы с тем же значением. `useValueControl` не сравнивает
+            // значение с текущим и всё равно зовёт `onSegmentChange` — лишний колбэк на каждый drag.
             if (isServiceSourceDragId(active.id)) {
+                if (segment !== FAVORITES_SEGMENT.Favorites) {
+                    setSegment(FAVORITES_SEGMENT.Favorites);
+                }
                 setDraggingToFavorites(true);
             }
             if (isServiceFavoriteDragId(active.id)) {
@@ -50,7 +51,7 @@ export function useFavoritesReorder({ favoriteIds, favoriteItems }) {
             }
         },
         onDragEnd() {
-            shouldScrollToEndRef.current = isDraggingToFavorites && insertIndexRef.current === favoriteIds.length;
+            shouldScrollToEndRef.current = isDraggingToFavorites && insertIndexRef.current === favorite.value.length;
             setActiveFavoriteId(null);
             setIsFavoriteReorderDrag(false);
             setDraggingToFavorites(false);
@@ -79,7 +80,7 @@ export function useFavoritesReorder({ favoriteIds, favoriteItems }) {
             listEndRef.current?.scrollIntoView({ block: 'nearest' });
         });
         return () => cancelAnimationFrame(frameId);
-    }, [favoriteIds]);
+    }, [favorite.value]);
     const showDropOver = ((isOver || isDraggingToFavorites) && !isFavoriteReorderDrag) || undefined;
     const showInsertNew = (isInsertingNew && isOver) || undefined;
     return {

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

@@ -1,9 +1,7 @@
 import { ReactNode } from 'react';
 import { MainMenuSettingsItem } from '../../types.js';
 type MenuBottomProps = {
-    /** Пункты настроек, отображаемые в нижней части меню. */
     settingItems?: MainMenuSettingsItem[];
-    /** Слот под пунктами настроек. */
     leftBottom: ReactNode;
 };
 export declare function MenuBottom({ settingItems, leftBottom }: MenuBottomProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { MainMenuProps } from '../../types.js';
-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/esm/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Divider } from '@cloud-ru/ds-divider';
 import { DrawerCustom } from '@cloud-ru/ds-drawer';
 import { Scroll } from '@cloud-ru/ds-scroll';
+import { useValueControl } from '@cloud-ru/ds-utils';
 import { useCallback, useEffect, useMemo } from 'react';
 import { TEST_IDS } from '../../../../constants.js';
 import { MainMenuDndContext, useMainMenuDnd } from '../../hooks/useMainMenuDnd.js';
 import { useMenuItems } from '../../hooks/useMenuItems.js';
-import { buildServicesById } from '../../utils/index.js';
 import { Content } from '../Content/index.js';
 import { Favorites } from '../Favorites/index.js';
 import { MenuBottom } from '../MenuBottom/index.js';
@@ -15,7 +15,8 @@ import { MountAnimation } from '../MountAnimation/index.js';
 import { Search } from '../Search/index.js';
 import { MENU_WIDTH_MAX, MENU_WIDTH_MIN } from './constants.js';
 import styles from './styles.module.css';
-export function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+export function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
     const { scrollRef, searchRef, resultItems } = useMenuItems({
         segments,
         search,
@@ -38,19 +39,18 @@ export function MenuDesktop({ open = false, setOpen, settingItems, platformGroup
     // сегменты используются, `loading` держит панель смонтированной на время ответа бэка — иначе
     // `Content` не успевает показать свой skeleton (он монтируется только когда данные уже пришли),
     // и между "ничего" и карточками на кадр проскакивает пустое состояние «нет данных».
-    const isNeedRightBlock = 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 = useMemo(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
-    const servicesById = useMemo(() => buildServicesById(allServiceGroups), [allServiceGroups]);
     const mainMenuDnd = useMainMenuDnd({
         favorite,
-        servicesById,
+        groups: allServiceGroups,
         showDescription: preferences?.showDescription.value ?? false,
     });
     const handleCloseDrawer = useCallback(() => {
-        setOpen?.(false);
+        setOpen(false);
     }, [setOpen]);
-    const menu = (_jsxs("div", { className: styles.menu, children: [_jsxs("div", { className: styles.menuHeader, children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles.menuHeaderBrand }), isNeedRightBlock && search && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), _jsx(Search, { ...search, ref: searchRef })] }))] }), _jsx(Divider, {}), _jsxs("div", { className: styles.menuBody, children: [_jsxs(MountAnimation, { className: styles.left, "data-test-id": TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && _jsx("div", { className: styles.leftTop, children: leftTop }), isNeedRightBlock && favorite && _jsx(Favorites, { favorite: favorite, servicesById: servicesById }), hasBottomItems && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && (_jsxs(_Fragment, { children: [_jsx(MountAnimation, { type: 'fade-in', children: _jsx(Divider, { orientation: 'vertical' }) }), _jsx("div", { className: styles.right, "data-test-id": TEST_IDS.mainMenu.right, children: _jsx(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: _jsx(Content, { className: styles.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 = (_jsxs("div", { className: styles.menu, children: [_jsxs("div", { className: styles.menuHeader, children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles.menuHeaderBrand }), isNeedRightBlock && search && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), _jsx(Search, { ...search, ref: searchRef })] }))] }), _jsx(Divider, {}), _jsxs("div", { className: styles.menuBody, children: [_jsxs(MountAnimation, { className: styles.left, "data-test-id": TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && _jsx("div", { className: styles.leftTop, children: leftTop }), isNeedRightBlock && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), hasBottomItems && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && (_jsxs(_Fragment, { children: [_jsx(MountAnimation, { type: 'fade-in', children: _jsx(Divider, { orientation: 'vertical' }) }), _jsx(MountAnimation, { type: 'fade-slide-up-right', className: styles.right, "data-test-id": TEST_IDS.mainMenu.right, children: _jsx(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: _jsx(Content, { className: styles.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 (_jsx(DrawerCustom, { open: open, onClose: handleCloseDrawer, width: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles.drawer, rootClassName: styles.drawerRoot, "data-test-id": TEST_IDS.mainMenu.drawer, "data-small": !isNeedRightBlock || undefined, disableMotions: true, showButtonClosed: false, resizable: isNeedRightBlock
             ? {
                 min: MENU_WIDTH_MIN,

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

@@ -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);
 }
 

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

@@ -1,10 +1,7 @@
 import { ReactNode } from 'react';
 export type MenuHeaderBrandProps = {
-    /** Логотип в шапке меню. */
     logo?: ReactNode;
-    /** Колбэк клика по кнопке закрытия меню. */
     onClose(): void;
-    /** CSS-класс корневого элемента. */
     className?: string;
 };
 export declare function MenuHeaderBrand({ logo, onClose, className }: MenuHeaderBrandProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { MainMenuProps } from '../../types.js';
-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/esm/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Divider } from '@cloud-ru/ds-divider';
 import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
+import { useValueControl } from '@cloud-ru/ds-utils';
 import { useCallback, useMemo } from 'react';
 import { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../../../constants.js';
 import { MobileDrawerCustom } from '../../../../mobileOverlays.js';
 import { MainMenuDndContext } from '../../hooks/useMainMenuDnd.js';
 import { useMenuItems } from '../../hooks/useMenuItems.js';
-import { buildServicesById } from '../../utils/index.js';
 import { Content } from '../Content/index.js';
 import { Favorites } from '../Favorites/index.js';
 import { MenuBottom } from '../MenuBottom/index.js';
@@ -15,7 +15,8 @@ import { MountAnimation } from '../MountAnimation/index.js';
 import { ScrollWithAnimatedStickyPanel } from '../ScrollWithAnimatedStickyPanel/index.js';
 import { Search } from '../Search/index.js';
 import styles from './styles.module.css';
-export function MenuMobile({ open = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, logo, rightTop, leftTop, leftBottom, loading, }) {
+export 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] = useValueControl({ value: openProp, onChange: setOpenProp });
     // `segments !== undefined` — сигнал «каталог вообще используется» (консьюмер без сегментов
     // никогда не передаёт проп, и `loading` в этом случае к правой панели не относится). Пока
     // сегменты используются, `loading` держит панель смонтированной на время ответа бэка — иначе
@@ -29,13 +30,13 @@ export function MenuMobile({ open = false, setOpen, settingItems, platformGroups
         search,
         platformGroups,
     });
-    const servicesById = useMemo(() => buildServicesById(segments?.flatMap(segment => segment.items)), [segments]);
+    const allServiceGroups = useMemo(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
     const handleClose = useCallback(() => {
-        setOpen?.(false);
+        setOpen(false);
     }, [setOpen]);
     return (
     // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
     // `HeaderLayout`, поэтому объявляем плотность здесь же. Обёртка провайдера layout-прозрачная
     // (`display: contents`) — меню рендерится порталом, лишний бокс в строке шапки не нужен.
-    _jsx(ChildThemeProvider, { value: { density: DENSITY.Comfort }, className: styles.densityScope, children: _jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsxs(_Fragment, { children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader }), _jsx(Divider, { orientation: 'horizontal' })] }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [leftTop, search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && _jsx(Favorites, { favorite: favorite, servicesById: servicesById, isMobile: true }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(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 && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }) }));
+    _jsx(ChildThemeProvider, { value: { density: DENSITY.Comfort }, className: styles.densityScope, children: _jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsxs(_Fragment, { children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader }), _jsx(Divider, { orientation: 'horizontal' })] }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [leftTop && _jsx("div", { className: styles.rightContent, children: leftTop }), search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(Content, { isMobile: true, className: styles.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 && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }) }));
 }

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

@@ -7,6 +7,13 @@
   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-brand-palette-gray-90, #eeeff3))) !important;
 }

package/dist/esm/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;

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

@@ -2,9 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { extractSupportProps } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import styles from './styles.module.css';
-export function MountAnimation({ children, type, className, ...props }) {
-    if (type === undefined) {
-        return children;
-    }
+export function MountAnimation({ children, type = 'slide-right', className, ...props }) {
     return (_jsx("div", { className: cn(styles.wrapper, className), ...extractSupportProps(props), "data-animation-type": type, children: children }));
 }

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

@@ -1,43 +1,19 @@
-import { CardNavigationProps } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { MouseEvent } from 'react';
 import { FavoriteProps, InnerLink } from '../../types.js';
 export type ServiceCardProps = {
-    /** Карточка сервиса. */
     service: InnerLink;
-    /** В избранном ли сервис. Учитывается только вместе с `onFavoriteChange`. */
-    isFavorite?: boolean;
-    /**
-     * Переключение избранного (стабильная по ссылке функция). Не передано — кнопка избранного
-     * не показывается.
-     */
-    onFavoriteChange?: FavoriteProps['onChange'];
-    /** Мобильная раскладка. */
+    favorite?: FavoriteProps;
     isMobile?: boolean;
-    /** Колбэк клика по карточке. */
     onServiceClick?(service: InnerLink, event: MouseEvent<HTMLElement>): void;
-    /** Показывать описание сервиса вместо тултипа. */
     showDescription: boolean;
-    /** CSS-класс корневого элемента. */
     className?: string;
-    /** `tabIndex` корневого элемента. */
     tabIndex?: number;
-    /** Карточка рендерится как превью в `DragOverlay` (без тултипа и описания). */
     dragPreview?: boolean;
-} & Pick<CardNavigationProps, 'expandable'>;
-declare function ServiceCardBase({ service, isFavorite, onFavoriteChange, isMobile, onServiceClick, showDescription, className, tabIndex, dragPreview, expandable, }: ServiceCardProps): import("react/jsx-runtime").JSX.Element;
-export declare const ServiceCard: import("react").MemoExoticComponent<typeof ServiceCardBase>;
+} & Pick<CardServiceLightProps, 'expandable'>;
+export declare function ServiceCard({ service, favorite, isMobile, onServiceClick, showDescription, className, tabIndex, dragPreview, expandable, }: ServiceCardProps): import("react/jsx-runtime").JSX.Element;
 export type DraggableServiceCardProps = ServiceCardProps & {
     groupId: string;
+    dragDisabled?: boolean;
 };
-declare function DraggableServiceCardBase({ groupId, service, isFavorite, ...props }: DraggableServiceCardProps): import("react/jsx-runtime").JSX.Element;
-export declare const DraggableServiceCard: import("react").MemoExoticComponent<typeof DraggableServiceCardBase>;
-export type GridServiceCardProps = DraggableServiceCardProps & {
-    /**
-     * Карточку можно перетаскивать. Иначе рендерится без `useDraggable`: на mobile, при поиске и
-     * без избранного сотни карточек не регистрируются в `DndContext` впустую.
-     */
-    dragEnabled?: boolean;
-};
-declare function GridServiceCardBase({ dragEnabled, groupId, ...props }: GridServiceCardProps): import("react/jsx-runtime").JSX.Element;
-export declare const GridServiceCard: import("react").MemoExoticComponent<typeof GridServiceCardBase>;
-export {};
+export declare function DraggableServiceCard({ groupId, service, favorite, dragDisabled, ...props }: DraggableServiceCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,31 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDraggable } from '@dnd-kit/core';
 import { DRAG_MODE, DragGhost, DragPreview } from '@cloud-ru/ds-drag-and-drop';
-import { CardNavigation } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { CardServiceInfo, CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
 import cn from 'classnames';
-import { memo, useCallback, useMemo } from 'react';
 import { getLinkEmblem, getServiceSourceDragId } from '../../utils/index.js';
 import styles from './styles.module.css';
-function ServiceCardBase({ service, isFavorite = false, onFavoriteChange, isMobile, onServiceClick, showDescription, className, tabIndex, dragPreview, expandable, }) {
-    const { id, disabled, favoritesEnabled = true, description, icon } = service;
-    const handleFavoriteChange = useCallback((checked) => onFavoriteChange?.(id)(checked), [id, onFavoriteChange]);
-    const favoriteProps = useMemo(() => !dragPreview && onFavoriteChange
+export function ServiceCard({ service, favorite, isMobile, onServiceClick, showDescription, className, tabIndex, dragPreview, expandable, }) {
+    const isInFavorites = favorite?.value.includes(service.id) ?? false;
+    const isFavoriteEnabled = service.favoritesEnabled ?? true;
+    const favoriteProps = !dragPreview && favorite
         ? {
-            checked: isFavorite,
-            onChange: handleFavoriteChange,
-            enabled: !disabled && favoritesEnabled,
+            checked: isInFavorites,
+            onChange: favorite.onChange(service.id),
+            enabled: !service.disabled && isFavoriteEnabled,
         }
-        : undefined, [dragPreview, onFavoriteChange, isFavorite, handleFavoriteChange, disabled, favoritesEnabled]);
-    const handleClick = useCallback((event) => onServiceClick?.(service, event), [onServiceClick, service]);
-    const emblem = useMemo(() => getLinkEmblem({ icon }), [icon]);
-    const tooltip = useMemo(() => (!dragPreview && description ? { tip: description } : undefined), [dragPreview, description]);
+        : undefined;
     const commonProps = {
         as: 'a',
         title: service.label,
-        icon: emblem,
-        'data-test-id': `header__drawer-menu__link-${id}`,
+        icon: getLinkEmblem(service),
+        'data-test-id': `header__drawer-menu__link-${service.id}`,
         href: service.href,
-        onClick: handleClick,
+        onClick: (event) => onServiceClick?.(service, event),
         favorite: favoriteProps,
         actionsVisibility: isMobile ? 'always' : 'hover',
         promoTag: service.badge,
@@ -33,26 +29,20 @@ function ServiceCardBase({ service, isFavorite = false, onFavoriteChange, isMobi
         tabIndex,
         expandable,
     };
-    // Один компонент на оба вида: переключение описания обновляет проп, а не пересоздаёт карточку.
-    const card = (_jsx(CardNavigation, { ...commonProps, description: showDescription ? (description ?? '') : undefined, actionsSize: isMobile ? 's' : 'm', tooltip: showDescription ? undefined : tooltip }));
+    const card = showDescription ? (_jsx(CardServiceInfo, { ...commonProps, description: service.description ?? '', actionsSize: isMobile ? 's' : 'm' })) : (_jsx(CardServiceLight, { ...commonProps, tooltip: !dragPreview && service.description
+            ? {
+                tip: service.description,
+            }
+            : undefined }));
     return dragPreview ? _jsx(DragPreview, { className: styles.dragCardPreview, children: card }) : card;
 }
-export const ServiceCard = memo(ServiceCardBase);
-function DraggableServiceCardBase({ groupId, service, isFavorite, ...props }) {
+export function DraggableServiceCard({ groupId, service, favorite, dragDisabled, ...props }) {
     const isFavoriteEnabled = service.favoritesEnabled ?? true;
-    const disabled = service.disabled || isFavorite || !isFavoriteEnabled;
+    const disabled = dragDisabled || service.disabled || favorite?.value.includes(service.id) || !isFavoriteEnabled;
     const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
         id: getServiceSourceDragId(groupId, service.id),
         disabled,
     });
     const { tabIndex, ...restAttributes } = attributes ?? {};
-    return (_jsx(DragGhost, { innerRef: setNodeRef, className: styles.draggableCard, dragging: isDragging, mode: DRAG_MODE.Static, ...listeners, ...restAttributes, children: _jsx(ServiceCard, { service: service, isFavorite: isFavorite, ...props, tabIndex: tabIndex }) }));
-}
-export const DraggableServiceCard = memo(DraggableServiceCardBase);
-function GridServiceCardBase({ dragEnabled, groupId, ...props }) {
-    if (dragEnabled) {
-        return _jsx(DraggableServiceCard, { groupId: groupId, ...props });
-    }
-    return (_jsx("div", { className: styles.staticCard, children: _jsx(ServiceCard, { ...props }) }));
+    return (_jsx(DragGhost, { innerRef: setNodeRef, className: styles.draggableCard, dragging: isDragging, mode: DRAG_MODE.Static, ...listeners, ...restAttributes, children: _jsx(ServiceCard, { service: service, favorite: favorite, ...props, tabIndex: tabIndex }) }));
 }
-export const GridServiceCard = memo(GridServiceCardBase);

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

@@ -7,12 +7,7 @@
   border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
 }
 
-.draggableCard,
-.staticCard{
+.draggableCard{
   display:flex;
   min-width:0;
-}
-
-.staticCard{
-  position:relative;
 }

package/dist/esm/components/MainMenu/hooks/useMainMenuDnd.d.ts

@@ -1,19 +1,17 @@
 import { DragCancelEvent, DragEndEvent, DragStartEvent, Modifier } from '@dnd-kit/core';
 import { ReactNode } from 'react';
-import { FavoriteProps, InnerLink } from '../types.js';
+import { FavoriteProps, LinksGroup } from '../types.js';
 type MainMenuDndOverlayContextValue = {
     setGroupDragOverlay(overlay: ReactNode): void;
 };
 export declare function useMainMenuDndOverlay(): MainMenuDndOverlayContextValue;
 type UseMainMenuDndProps = {
-    /** Избранное. Без пропа DnD карточек в избранное отключён. */
     favorite?: FavoriteProps;
-    /** Все сервисы каталога по id (для резолва при DnD в избранное). */
-    servicesById: ReadonlyMap<string, InnerLink>;
-    /** Показывать описания сервисов в превью карточки при перетаскивании. */
+    /** Все группы карточек из сегментов (для резолва сервисов при DnD в избранное). */
+    groups: LinksGroup[];
     showDescription: boolean;
 };
-export declare function useMainMenuDnd({ favorite, servicesById, showDescription }: UseMainMenuDndProps): {
+export declare function useMainMenuDnd({ favorite, groups, showDescription }: UseMainMenuDndProps): {
     sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
     modifiers: Modifier[];
     collisionDetection: import("@dnd-kit/core").CollisionDetection;

package/dist/esm/components/MainMenu/hooks/useMainMenuDnd.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import { usePortalContext } from '@cloud-ru/ds-portal-context';
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ServiceCard } from '../helperComponents/ServiceCard/index.js';
-import { favoriteListCollisionDetection, getDragReferenceY, isServiceDragId, isServiceSourceDragId, parseServiceDragId, resolveFavoriteOrderOnDragEnd, } from '../utils/index.js';
+import { favoriteListCollisionDetection, flatLinksGroups, getDragReferenceY, isServiceDragId, isServiceSourceDragId, parseServiceDragId, resolveFavoriteOrderOnDragEnd, } from '../utils/index.js';
 const restrictGroupDragToVerticalAxis = args => {
     if (args.active?.id != null && isServiceSourceDragId(args.active.id)) {
         return args.transform;
     }
     return restrictToVerticalAxis(args);
 };
-const MODIFIERS = [restrictGroupDragToVerticalAxis];
 const MainMenuDndOverlayContext = createContext(null);
 export function useMainMenuDndOverlay() {
     const context = useContext(MainMenuDndOverlayContext);
@@ -21,9 +20,10 @@ export function useMainMenuDndOverlay() {
         setGroupDragOverlay: () => { },
     });
 }
-export function useMainMenuDnd({ favorite, servicesById, showDescription }) {
+export function useMainMenuDnd({ favorite, groups, showDescription }) {
     const [activeServiceId, setActiveServiceId] = useState(null);
     const [groupDragOverlay, setGroupDragOverlay] = useState(null);
+    const servicesById = useMemo(() => new Map(flatLinksGroups(groups).map(service => [service.id, service])), [groups]);
     const activeService = activeServiceId ? servicesById.get(activeServiceId) : undefined;
     const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const handleDragStart = useCallback(({ active }) => {
@@ -71,7 +71,7 @@ export function useMainMenuDnd({ favorite, servicesById, showDescription }) {
     }), []);
     return {
         sensors,
-        modifiers: MODIFIERS,
+        modifiers: [restrictGroupDragToVerticalAxis],
         collisionDetection: favoriteListCollisionDetection,
         onDragStart: handleDragStart,
         onDragEnd: handleDragEnd,
@@ -89,5 +89,7 @@ export function MainMenuDndContext({ children, sensors, modifiers, collisionDete
     // (панель начинается не с 0), оверлей визуально уезжает ровно на эту величину. Портал
     // в тот же корень, что использует сам Drawer, выносит оверлей из-под этого предка.
     const dragOverlayNode = _jsx(DragOverlay, { dropAnimation: null, children: dragOverlay });
-    return (_jsx(MainMenuDndOverlayContext.Provider, { value: overlayContextValue ?? null, children: _jsxs(DndContext, { sensors: sensors, collisionDetection: collisionDetection, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragCancel: onDragCancel, modifiers: modifiers, children: [children, portalContextRef.current ? createPortal(dragOverlayNode, portalContextRef.current) : dragOverlayNode] }) }));
+    return (_jsx(MainMenuDndOverlayContext.Provider, { value: overlayContextValue ?? null, children: _jsxs(DndContext, { sensors: sensors, collisionDetection: collisionDetection, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragCancel: onDragCancel, modifiers: modifiers, measuring: {
+                droppable: { strategy: MeasuringStrategy.Always },
+            }, children: [children, portalContextRef.current ? createPortal(dragOverlayNode, portalContextRef.current) : dragOverlayNode] }) }));
 }

package/dist/esm/components/MainMenu/hooks/useMenuItems.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { createLinksGroupsSearcher, dedupeSearchGroups, getLinksGroupVisibleItemsCount, pinGroupToBottom, } from '../utils/index.js';
+import { dedupeSearchGroups, filterLinksGroupsFuzzy, getLinksGroupVisibleItemsCount, pinGroupToBottom } from '../utils/index.js';
 function getVisibleGroups(items) {
     return items.filter(group => getLinksGroupVisibleItemsCount(group) > 0);
 }
@@ -9,25 +9,20 @@ export function useMenuItems({ search, segments, platformGroups = [] }) {
     const scrollRef = useRef(null);
     const regularSegments = useMemo(() => segments?.filter(segment => !segment.pinBottomOnSearch) ?? [], [segments]);
     const pinnedSegments = useMemo(() => segments?.filter(segment => segment.pinBottomOnSearch) ?? [], [segments]);
-    const isSearching = Boolean(searchValue);
-    // Индексы строятся при первом вводе и живут, пока поиск активен и каталог не сменился: индексация
-    // не зависит от строки поиска, поэтому пересоздавать `Fuse` на каждый символ не нужно. Пока поиска
-    // нет, индексы не строятся — открытие меню их не оплачивает.
-    const regularSearchers = useMemo(() => isSearching ? regularSegments.map(segment => createLinksGroupsSearcher(getVisibleGroups(segment.items))) : [], [isSearching, regularSegments]);
-    const pinnedSearchers = useMemo(() => isSearching ? pinnedSegments.map(segment => createLinksGroupsSearcher(getVisibleGroups(segment.items))) : [], [isSearching, pinnedSegments]);
-    const platformSearcher = useMemo(() => (isSearching && platformGroups.length > 0 ? createLinksGroupsSearcher(platformGroups) : undefined), [isSearching, platformGroups]);
     const regularGroups = useMemo(() => regularSegments.flatMap(segment => getVisibleGroups(segment.items)), [regularSegments]);
-    const pinnedGroupIds = useMemo(() => pinnedSegments.flatMap(segment => getVisibleGroups(segment.items)).map(({ id }) => id), [pinnedSegments]);
+    const pinnedGroups = useMemo(() => pinnedSegments.flatMap(segment => getVisibleGroups(segment.items)), [pinnedSegments]);
     const resultItems = useMemo(() => {
         if (!searchValue) {
             return regularGroups;
         }
-        const regularResults = regularSearchers.flatMap(search => search(searchValue));
-        const platformResults = platformSearcher ? platformSearcher(searchValue) : [];
-        const pinnedResults = pinnedSearchers.flatMap(search => search(searchValue));
+        const searchIn = (groups) => filterLinksGroupsFuzzy(searchValue, groups);
+        const regularResults = regularSegments.flatMap(segment => searchIn(getVisibleGroups(segment.items)));
+        const platformResults = platformGroups.length > 0 ? searchIn(platformGroups) : [];
+        const pinnedResults = pinnedSegments.flatMap(segment => searchIn(getVisibleGroups(segment.items)));
         const combined = dedupeSearchGroups([...regularResults, ...platformResults, ...pinnedResults]);
+        const pinnedGroupIds = pinnedGroups.map(({ id }) => id);
         return pinnedGroupIds.length > 0 ? pinGroupToBottom(combined, pinnedGroupIds) : combined;
-    }, [searchValue, regularGroups, regularSearchers, platformSearcher, pinnedSearchers, pinnedGroupIds]);
+    }, [searchValue, regularSegments, regularGroups, platformGroups, pinnedSegments, pinnedGroups]);
     useEffect(() => {
         if (searchValue && !resultItems.length) {
             onSearchNoResult?.(searchValue);