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

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/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/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyState.js

@@ -3,17 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmptyState = void 0;
+exports.EmptyState = EmptyState;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const typography_1 = require("@cloud-ru/ds-typography");
-const react_1 = require("react");
 const locale_1 = require("../../../../../../locale");
 const constants_1 = require("../../constants");
 const EmptyFavoriteSVG_1 = require("./EmptyFavoriteSVG");
 const EmptyRecentSVG_1 = require("./EmptyRecentSVG");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function EmptyStateBase({ isFavoritesSegment, isMobile }) {
+function EmptyState({ isFavoritesSegment, isMobile }) {
     const { t } = locale_1.headerLocale.useTranslations();
     return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.emptyState, "data-test-id": constants_1.FAVORITES_TEST_IDS.emptyState, children: isFavoritesSegment ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EmptyFavoriteSVG_1.EmptyFavoriteSVG, { className: styles_module_scss_1.default.emptyIcon }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 's', className: styles_module_scss_1.default.emptyText, children: isMobile ? t('favorite.emptyMobile') : t('favorite.emptyDesktop') })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EmptyRecentSVG_1.EmptyRecentSVG, { className: styles_module_scss_1.default.emptyIcon }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 's', className: styles_module_scss_1.default.emptyText, children: t('recent.empty') })] })) }));
 }
-exports.EmptyState = (0, react_1.memo)(EmptyStateBase);

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

@@ -0,0 +1,19 @@
+import { MouseEvent, ReactNode } from 'react';
+import { FavoriteProps, InnerLink } from '../../../types';
+import { FavoritesSegment } from '../constants';
+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/cjs/components/MainMenu/helperComponents/Favorites/components/FavoritesSortable.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FavoritesSortable = FavoritesSortable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
+const drag_and_drop_1 = require("@cloud-ru/ds-drag-and-drop");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const constants_1 = require("../constants");
+const useFavoritesDnd_1 = require("../hooks/useFavoritesDnd");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const utils_1 = require("../utils");
+const EmptyState_1 = require("./EmptyState");
+const SortableFavoriteCard_1 = require("./SortableFavoriteCard");
+/**
+ * Desktop-обёртка тела списка: реордер drag&drop + приём карточек из общей
+ * сетки. Требует `<DndContext>`-предка, поэтому `useFavoritesDnd` вызывается
+ * только здесь — на mobile этот компонент не рендерится вовсе (см. `Favorites`).
+ */
+function FavoritesSortable({ favorite, favoriteItems, segment, setSegment, isEmpty, recentCards, onFavoriteServiceClick, }) {
+    const isFavoritesSegment = segment === constants_1.FAVORITES_SEGMENT.Favorites;
+    const { setNodeRef, listEndRef, favoriteSortableIds, insertIndex, isInsertingToEnd, showDropOver, showInsertNew } = (0, useFavoritesDnd_1.useFavoritesDnd)({ favorite, favoriteItems, segment, setSegment });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.listScroll, "data-insert-new": showInsertNew, children: [(0, jsx_runtime_1.jsx)(drag_and_drop_1.DropTarget, { active: Boolean(showDropOver), className: styles_module_scss_1.default.dropTarget, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.listScrollInner, overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsxs)("div", { ref: setNodeRef, className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: [isEmpty && (0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { isFavoritesSegment: isFavoritesSegment }), !isEmpty && isFavoritesSegment && ((0, jsx_runtime_1.jsxs)(sortable_1.SortableContext, { items: favoriteSortableIds, strategy: sortable_1.verticalListSortingStrategy, children: [favoriteItems.map((service, index) => ((0, jsx_runtime_1.jsx)(SortableFavoriteCard_1.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),
+                                    }, ...(0, utils_1.getCommonCardProps)(service, onFavoriteServiceClick(service)) }, service.id))), (0, jsx_runtime_1.jsx)("div", { ref: listEndRef, className: styles_module_scss_1.default.listEnd, "aria-hidden": true })] })), !isEmpty && !isFavoritesSegment && recentCards] }) })] }));
+}

package/dist/cjs/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/cjs/components/MainMenu/helperComponents/Favorites/components/SortableFavoriteCard.js

@@ -3,16 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortableFavoriteCard = void 0;
+exports.SortableFavoriteCard = SortableFavoriteCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const drag_and_drop_1 = require("@cloud-ru/ds-drag-and-drop");
 const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card-predefined");
-const react_1 = require("react");
 const dnd_1 = require("../../../utils/dnd");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
-function SortableFavoriteCardBase({ serviceId, className, showInsertIndicatorBefore, showInsertIndicatorAfter, isFirst, ...cardProps }) {
+function SortableFavoriteCard({ serviceId, className, showInsertIndicatorBefore, showInsertIndicatorAfter, isFirst, ...cardProps }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, sortable_1.useSortable)({
         id: (0, dnd_1.getServiceFavoriteDragId)(serviceId),
     });
@@ -27,4 +26,3 @@ function SortableFavoriteCardBase({ serviceId, className, showInsertIndicatorBef
     const { tabIndex, ...restAttributes } = attributes ?? {};
     return ((0, jsx_runtime_1.jsxs)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, style: style, className: styles_module_scss_1.default.sortableCard, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, ...listeners, ...restAttributes, children: [showInsertIndicatorBefore && (0, jsx_runtime_1.jsx)(drag_and_drop_1.DropIndicator, { placement: drag_and_drop_1.PLACEMENT.Before, atEdge: isFirst }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'a', ...cardProps, className: className ?? styles_module_scss_1.default.card, tabIndex: tabIndex }), showInsertIndicatorAfter && (0, jsx_runtime_1.jsx)(drag_and_drop_1.DropIndicator, { placement: drag_and_drop_1.PLACEMENT.After, atEdge: true })] }));
 }
-exports.SortableFavoriteCard = (0, react_1.memo)(SortableFavoriteCardBase);

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

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

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

@@ -16,6 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./SortableFavoriteCard"), exports);
 __exportStar(require("./EmptyState"), exports);
-__exportStar(require("./FavoritesDesktop"), exports);
+__exportStar(require("./FavoritesSortable"), exports);
 __exportStar(require("./FavoritesItemsSkeleton"), exports);
-__exportStar(require("./FavoritesMobile"), exports);

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

@@ -0,0 +1,25 @@
+import { FavoriteProps, InnerLink } from '../../../types';
+import { FavoritesSegment } from '../constants';
+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 {};

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

@@ -1,37 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFavoritesReorder = useFavoritesReorder;
+exports.useFavoritesDnd = useFavoritesDnd;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("@dnd-kit/core");
 const react_1 = require("react");
 const useMainMenuDnd_1 = require("../../../hooks/useMainMenuDnd");
 const utils_1 = require("../../../utils");
 const ServiceCard_1 = require("../../ServiceCard");
+const constants_1 = require("../constants");
 const useFavoritesInsertIndicator_1 = require("./useFavoritesInsertIndicator");
 /**
- * Оркестрирует 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.
  */
-function useFavoritesReorder({ favoriteIds, favoriteItems }) {
+function useFavoritesDnd({ favorite, favoriteItems, segment, setSegment }) {
     const { setGroupDragOverlay } = (0, useMainMenuDnd_1.useMainMenuDndOverlay)();
-    const { active: activeOnMount } = (0, core_1.useDndContext)();
-    const [activeFavoriteId, setActiveFavoriteId] = (0, react_1.useState)(() => activeOnMount && (0, utils_1.isServiceFavoriteDragId)(activeOnMount.id) ? (0, utils_1.parseServiceDragId)(activeOnMount.id) : null);
-    const [isFavoriteReorderDrag, setIsFavoriteReorderDrag] = (0, react_1.useState)(() => Boolean(activeOnMount && (0, utils_1.isServiceFavoriteDragId)(activeOnMount.id)));
-    const [isDraggingToFavorites, setDraggingToFavorites] = (0, react_1.useState)(() => Boolean(activeOnMount && (0, utils_1.isServiceSourceDragId)(activeOnMount.id)));
+    const [activeFavoriteId, setActiveFavoriteId] = (0, react_1.useState)(null);
+    const [isFavoriteReorderDrag, setIsFavoriteReorderDrag] = (0, react_1.useState)(false);
+    const [isDraggingToFavorites, setDraggingToFavorites] = (0, react_1.useState)(false);
     const listEndRef = (0, react_1.useRef)(null);
     const shouldScrollToEndRef = (0, react_1.useRef)(false);
-    const favoriteSortableIds = (0, react_1.useMemo)(() => favoriteIds.map(utils_1.getServiceFavoriteDragId), [favoriteIds]);
-    const insertIndex = (0, useFavoritesInsertIndicator_1.useFavoritesInsertIndicator)(favoriteIds);
+    const isFavoritesSegment = segment === constants_1.FAVORITES_SEGMENT.Favorites;
+    const favoriteSortableIds = (0, react_1.useMemo)(() => favorite.value.map(utils_1.getServiceFavoriteDragId), [favorite.value]);
+    const insertIndex = (0, useFavoritesInsertIndicator_1.useFavoritesInsertIndicator)(favorite.value);
     const isInsertingToEnd = favoriteItems.length > 0 && insertIndex === favoriteItems.length;
     const isInsertingNew = isDraggingToFavorites && !favoriteItems.length;
     const insertIndexRef = (0, react_1.useRef)(insertIndex);
@@ -40,11 +34,18 @@ function useFavoritesReorder({ favoriteIds, favoriteItems }) {
     const { setNodeRef, isOver } = (0, core_1.useDroppable)({
         id: utils_1.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,
     });
     (0, core_1.useDndMonitor)({
         onDragStart({ active }) {
+            // Форсим сегмент только для карточки из каталога: избранное уже показывается на
+            // сегменте Favorites, и его же карточки только там и рендерятся — при реордере внутри
+            // списка `setSegment` вызывался бы с тем же значением. `useValueControl` не сравнивает
+            // значение с текущим и всё равно зовёт `onSegmentChange` — лишний колбэк на каждый drag.
             if ((0, utils_1.isServiceSourceDragId)(active.id)) {
+                if (segment !== constants_1.FAVORITES_SEGMENT.Favorites) {
+                    setSegment(constants_1.FAVORITES_SEGMENT.Favorites);
+                }
                 setDraggingToFavorites(true);
             }
             if ((0, utils_1.isServiceFavoriteDragId)(active.id)) {
@@ -53,7 +54,7 @@ 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);
@@ -82,7 +83,7 @@ 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/cjs/components/MainMenu/helperComponents/MenuBottom/MenuBottom.d.ts

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

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

@@ -1,2 +1,2 @@
 import { MainMenuProps } from '../../types';
-export declare function MenuDesktop({ open, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -8,11 +8,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const divider_1 = require("@cloud-ru/ds-divider");
 const drawer_1 = require("@cloud-ru/ds-drawer");
 const scroll_1 = require("@cloud-ru/ds-scroll");
+const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
 const constants_1 = require("../../../../constants");
 const useMainMenuDnd_1 = require("../../hooks/useMainMenuDnd");
 const useMenuItems_1 = require("../../hooks/useMenuItems");
-const utils_1 = require("../../utils");
 const Content_1 = require("../Content");
 const Favorites_1 = require("../Favorites");
 const MenuBottom_1 = require("../MenuBottom");
@@ -21,7 +21,8 @@ const MountAnimation_1 = require("../MountAnimation");
 const Search_1 = require("../Search");
 const constants_2 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = constants_2.MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = constants_2.MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+    const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     const { scrollRef, searchRef, resultItems } = (0, useMenuItems_1.useMenuItems)({
         segments,
         search,
@@ -44,19 +45,18 @@ function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segm
     // сегменты используются, `loading` держит панель смонтированной на время ответа бэка — иначе
     // `Content` не успевает показать свой skeleton (он монтируется только когда данные уже пришли),
     // и между "ничего" и карточками на кадр проскакивает пустое состояние «нет данных».
-    const isNeedRightBlock = (0, react_1.useMemo)(() => segments !== undefined && (loading || segments.some(segment => segment.items.length > 0)), [segments, loading]);
+    const isNeedRightBlock = segments !== undefined && (loading || segments.some(segment => segment.items.length > 0));
     const hasBottomItems = Boolean(settingItems?.length) || Boolean(leftBottom);
     const allServiceGroups = (0, react_1.useMemo)(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
-    const servicesById = (0, react_1.useMemo)(() => (0, utils_1.buildServicesById)(allServiceGroups), [allServiceGroups]);
     const mainMenuDnd = (0, useMainMenuDnd_1.useMainMenuDnd)({
         favorite,
-        servicesById,
+        groups: allServiceGroups,
         showDescription: preferences?.showDescription.value ?? false,
     });
     const handleCloseDrawer = (0, react_1.useCallback)(() => {
-        setOpen?.(false);
+        setOpen(false);
     }, [setOpen]);
-    const menu = ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuHeader, children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles_module_scss_1.default.menuHeaderBrand }), isNeedRightBlock && search && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef })] }))] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuBody, children: [(0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.left, "data-test-id": constants_1.TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }), isNeedRightBlock && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, servicesById: servicesById }), hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-in', children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, "data-test-id": constants_1.TEST_IDS.mainMenu.right, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)(Content_1.Content, { className: styles_module_scss_1.default.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, preferences: preferences, loading: loading }) }) })] }))] })] }));
+    const menu = ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuHeader, children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles_module_scss_1.default.menuHeaderBrand }), isNeedRightBlock && search && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef })] }))] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuBody, children: [(0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.left, "data-test-id": constants_1.TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }), isNeedRightBlock && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-in', children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) }), (0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-slide-up-right', className: styles_module_scss_1.default.right, "data-test-id": constants_1.TEST_IDS.mainMenu.right, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)(Content_1.Content, { className: styles_module_scss_1.default.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, preferences: preferences, loading: loading }) }) })] }))] })] }));
     return ((0, jsx_runtime_1.jsx)(drawer_1.DrawerCustom, { open: open, onClose: handleCloseDrawer, width: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles_module_scss_1.default.drawer, rootClassName: styles_module_scss_1.default.drawerRoot, "data-test-id": constants_1.TEST_IDS.mainMenu.drawer, "data-small": !isNeedRightBlock || undefined, disableMotions: true, showButtonClosed: false, resizable: isNeedRightBlock
             ? {
                 min: constants_2.MENU_WIDTH_MIN,

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

@@ -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/cjs/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/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.d.ts

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

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

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