@cloud-ru/ds-uikit-product-header 1.5.4-preview-65417497.0 → 2.0.0

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

@@ -14,12 +14,16 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const locale_1 = require("../../../../locale");
 const emptyArray_1 = require("../../../../utils/emptyArray");
+const noop_1 = require("../../../../utils/noop");
 const shouldBeOpenedInNewTab_1 = require("../../../../utils/shouldBeOpenedInNewTab");
 const utils_2 = require("../../utils");
+const MountAnimation_1 = require("../MountAnimation");
+const cardsContext_1 = require("./cardsContext");
 const constants_1 = require("./constants");
 const ContentToolbar_1 = require("./helperComponents/ContentToolbar");
 const SortableGroup_1 = require("./helperComponents/SortableGroup");
 const useContentSegmentsSortable_1 = require("./hooks/useContentSegmentsSortable");
+const useProgressiveCount_1 = require("./hooks/useProgressiveCount");
 const useSegmentDnd_1 = require("./hooks/useSegmentDnd");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Content({ searchValue, search, rightTop, segments, searchGroups = emptyArray_1.EMPTY_ARRAY, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
@@ -34,7 +38,8 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = empty
     });
     const isSearching = Boolean(searchValue);
     const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
-    const handleLinkClick = (0, react_1.useCallback)((service, e) => {
+    // Ссылки на обработчики стабильны: иначе `memo` карточек ломается при каждом рендере потребителя.
+    const handleLinkClick = (0, utils_1.useEventHandler)((service, e) => {
         if (service.disabled) {
             e?.preventDefault();
             return;
@@ -44,7 +49,11 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = empty
         }
         onSegmentServiceClick?.(service, e);
         service.onClick?.(e);
-    }, [onSegmentServiceClick]);
+    });
+    const handleFavoriteChange = (0, utils_1.useEventHandler)((productId) => (favorite ? favorite.onChange(productId) : noop_1.noop));
+    const favoriteValue = favorite?.value;
+    const favoriteIds = (0, react_1.useMemo)(() => (favoriteValue ? new Set(favoriteValue) : undefined), [favoriteValue]);
+    const showGroupsColors = preferences?.showGroupsColors?.value;
     const { orderedGroups, expandedIds, onExpandedChange, handleDragEnd: handleSortableDragEnd, } = (0, useContentSegmentsSortable_1.useContentSegmentsSortable)({
         segments,
         activeSegmentId: segmentId,
@@ -62,35 +71,50 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = empty
         expandedIds,
         onSortableDragEnd: handleSortableDragEnd,
         showDescription,
-        showGroupsColors: preferences?.showGroupsColors?.value,
-        favorite,
+        showGroupsColors,
+        favoriteIds,
+        onFavoriteChange: handleFavoriteChange,
     });
-    const allGroupsExpanded = visibleGroups.length > 0 && visibleGroups.every(({ id }) => expandedIds.includes(id));
+    // Первый экран монтируется сразу, остальные группы дорисовываются порциями (см. `useProgressiveCount`).
+    const renderedGroupsCount = (0, useProgressiveCount_1.useProgressiveCount)(visibleGroups.length, `${segmentId}|${isSearching}`, !loading);
+    const renderedGroups = (0, react_1.useMemo)(() => (renderedGroupsCount < visibleGroups.length ? visibleGroups.slice(0, renderedGroupsCount) : visibleGroups), [visibleGroups, renderedGroupsCount]);
+    const expandedIdsSet = (0, react_1.useMemo)(() => new Set(expandedIds), [expandedIds]);
+    const visibleGroupIds = (0, react_1.useMemo)(() => visibleGroups.map(({ id }) => id), [visibleGroups]);
+    const allGroupsExpanded = visibleGroups.length > 0 && visibleGroupIds.every(id => expandedIdsSet.has(id));
     const handleToggleAllGroupsExpanded = (0, react_1.useCallback)(() => {
-        const visibleIds = visibleGroups.map(({ id }) => id);
         if (allGroupsExpanded) {
-            onExpandedChange(expandedIds.filter(id => !visibleIds.includes(id)));
+            const visibleIdsSet = new Set(visibleGroupIds);
+            onExpandedChange(expandedIds.filter(id => !visibleIdsSet.has(id)));
             return;
         }
-        onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
-    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
+        onExpandedChange([...new Set([...expandedIds, ...visibleGroupIds])]);
+    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds]);
+    const cardsContext = (0, react_1.useMemo)(() => ({
+        showDescription,
+        isMobile,
+        dragEnabled: enableServiceDrag,
+        favoriteIds,
+        onFavoriteChange: favoriteIds ? handleFavoriteChange : undefined,
+        onServiceClick: handleLinkClick,
+    }), [showDescription, isMobile, enableServiceDrag, favoriteIds, handleFavoriteChange, handleLinkClick]);
     const segmentItems = (0, react_1.useMemo)(() => segments?.map(segment => ({
         value: segment.id,
         label: segment.label,
         icon: segment.icon,
     })), [segments]);
     const hasCards = visibleGroups.length > 0;
+    const mountAnimationType = isMobile ? undefined : 'fade-slide-up-right';
     const cards = (() => {
         if (loading) {
             return Array.from({ length: 5 }).map((_, index) => (0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroupSkeleton, { isMobile: isMobile }, index));
         }
         if (hasCards) {
-            return ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: visibleGroups.map(({ id }) => id), strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'multiple', expanded: expandedIds, onExpandedChange: onExpandedChange, children: visibleGroups.map(({ id, label, icon, items, favoritesEnabled, blockColor, highlight }) => ((0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroup, { id: id, icon: icon, label: label, items: items, isExpanded: expandedIds.includes(id), blockColor: (0, utils_2.resolveGroupBlockColor)(blockColor, preferences?.showGroupsColors?.value), showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favorite, groupFavoritesEnabled: favoritesEnabled, onServiceClick: handleLinkClick, highlight: highlight }, id))) }) }));
+            return ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: visibleGroupIds, strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)(cardsContext_1.CardsContext.Provider, { value: cardsContext, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'multiple', expanded: expandedIds, onExpandedChange: onExpandedChange, children: renderedGroups.map(({ id, label, icon, items, favoritesEnabled, blockColor, highlight }) => ((0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroup, { id: id, icon: icon, label: label, items: items, isExpanded: expandedIdsSet.has(id), blockColor: (0, utils_2.resolveGroupBlockColor)(blockColor, showGroupsColors), isMobile: isMobile, enableServiceDrag: enableServiceDrag, groupFavoritesEnabled: favoritesEnabled, appear: !isMobile, highlight: highlight }, id))) }) }) }));
         }
         return ((0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { size: 'm', icon: {
                 icon: isSearching ? system_1.SearchSVG : system_1.CrossSVG,
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? constants_1.TEST_IDS.noDataFound : constants_1.TEST_IDS.noData, "data-mobile": isMobile || undefined, className: styles_module_scss_1.default.noData }));
     })();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), rightTop] })), cards, footer] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { type: mountAnimationType, className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), rightTop] }) })), cards, footer] })] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/cardsContext.d.ts

@@ -0,0 +1,20 @@
+import { MouseEvent } from 'react';
+import { FavoriteProps, InnerLink } from '../../types';
+export type CardsContextValue = {
+    showDescription: boolean;
+    isMobile?: boolean;
+    /** Карточки можно перетаскивать в избранное (иначе рендерятся без dnd-обвязки). */
+    dragEnabled: boolean;
+    /** Id избранных сервисов. Не передано — избранное для карточек недоступно. */
+    favoriteIds?: ReadonlySet<string>;
+    /** Стабильная по ссылке обёртка над `favorite.onChange`. */
+    onFavoriteChange?: FavoriteProps['onChange'];
+    /** Стабильная по ссылке обёртка над обработчиком клика по карточке. */
+    onServiceClick?(service: InnerLink, event?: MouseEvent<HTMLElement>): void;
+};
+/**
+ * Общие настройки карточек сервисов внутри группы. Заменяет сквозную передачу
+ * `showDescription` / `isMobile` / `favorite` / `onServiceClick` через все уровни сетки.
+ */
+export declare const CardsContext: import("react").Context<CardsContextValue>;
+export declare function useCardsContext(): CardsContextValue;

package/dist/cjs/components/MainMenu/helperComponents/Content/cardsContext.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardsContext = void 0;
+exports.useCardsContext = useCardsContext;
+const react_1 = require("react");
+const DEFAULT_VALUE = {
+    showDescription: false,
+    dragEnabled: false,
+};
+/**
+ * Общие настройки карточек сервисов внутри группы. Заменяет сквозную передачу
+ * `showDescription` / `isMobile` / `favorite` / `onServiceClick` через все уровни сетки.
+ */
+exports.CardsContext = (0, react_1.createContext)(DEFAULT_VALUE);
+function useCardsContext() {
+    return (0, react_1.useContext)(exports.CardsContext);
+}

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.d.ts

@@ -1,18 +1,27 @@
 import { ReactNode } from 'react';
 import { MainMenuPreferencesProps } from '../../../../types';
 export type ContentToolbarSegmentItem = {
+    /** Значение сегмента (id). */
     value: string;
+    /** Подпись сегмента. */
     label: string;
+    /** Иконка сегмента. */
     icon?: ReactNode;
 };
 export type ContentToolbarProps = {
+    /** Значение активного сегмента SegmentControl. */
     segment: string;
+    /** Колбэк смены активного сегмента. */
     onSegmentChange(segment: string): void;
+    /** Пункты SegmentControl. Без пунктов (или с одним) SegmentControl не отображается. */
     segmentItems?: ContentToolbarSegmentItem[];
+    /** Все группы сегмента раскрыты — определяет иконку кнопки свернуть/развернуть все. */
     allGroupsExpanded: boolean;
+    /** Колбэк клика по кнопке свернуть/развернуть все группы. */
     onToggleAllGroupsExpanded(): void;
     /** Настройки меню (модалка по кнопке). Не передано — кнопка настроек не отображается. */
     preferences?: MainMenuPreferencesProps;
+    /** Мобильная раскладка — кнопка свернуть/развернуть все скрывается. */
     isMobile?: boolean;
     /** Флаг загрузки данных — сегменты подгружаются с бэка, поэтому SegmentControl тоже уходит в скелетон. */
     loading?: boolean;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.d.ts

@@ -1,12 +1,31 @@
 import { LinksGroup, LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
-import { SortableGroupCardsProps } from './components';
-export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & Pick<LinksGroup, 'icon'> & {
+import { CardsContextValue } from '../../cardsContext';
+export type SortableGroupProps = Pick<LinksGroup, 'icon' | 'items'> & {
+    /** Id группы. */
     id: string;
+    /** Заголовок группы. */
     label: LinksGroupTitle;
+    /** Раскрыта ли группа. */
     isExpanded?: boolean;
+    /** Мобильная раскладка. */
+    isMobile?: boolean;
+    /** Группу можно перетаскивать (иначе рендерится без `useSortable`). */
+    enableServiceDrag?: boolean;
+    /** Цвет блока группы. */
     blockColor?: LinksGroupBlockColor;
+    /** Визуальное выделение группы. */
     highlight?: boolean;
+    /** Разрешено ли добавление карточек группы в избранное. */
     groupFavoritesEnabled?: boolean;
+    /** Группа появляется с fade-in при монтировании (на desktop; на mobile анимирует контейнер). */
+    appear?: boolean;
 };
-export declare function SortableGroup({ id, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled, onServiceClick, blockColor, highlight, }: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, groupFavoritesEnabled, blockColor, highlight, }: Omit<SortableGroupProps, 'enableServiceDrag'>): import("react/jsx-runtime").JSX.Element;
+declare function SortableGroupBase(props: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const SortableGroup: import("react").MemoExoticComponent<typeof SortableGroupBase>;
+export type SortableGroupDragPreviewProps = Omit<SortableGroupProps, 'enableServiceDrag'> & Pick<CardsContextValue, 'showDescription' | 'favoriteIds' | 'onFavoriteChange'>;
+/**
+ * Превью группы в `DragOverlay`. Рендерится вне `Content`, поэтому свой `CardsContext` собирает
+ * сам: без drag-обвязки карточек и без обработчика клика.
+ */
+export declare function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favoriteIds, onFavoriteChange, groupFavoritesEnabled, blockColor, highlight, }: SortableGroupDragPreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortableGroup = SortableGroup;
+exports.SortableGroup = void 0;
 exports.SortableGroupDragPreview = SortableGroupDragPreview;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sortable_1 = require("@dnd-kit/sortable");
@@ -11,14 +11,27 @@ const utilities_1 = require("@dnd-kit/utilities");
 const accordion_1 = require("@cloud-ru/ds-accordion");
 const drag_and_drop_1 = require("@cloud-ru/ds-drag-and-drop");
 const theme_1 = require("@cloud-ru/ds-theme");
+const react_1 = require("react");
+const cardsContext_1 = require("../../cardsContext");
 const constants_1 = require("../../constants");
 const components_1 = require("./components");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function SortableGroup({ id, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled = true, onServiceClick, blockColor, highlight, }) {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, sortable_1.useSortable)({
-        id,
-        disabled: !enableServiceDrag,
-    });
+function GroupView({ id, icon, label, items, isExpanded, isMobile, enableServiceDrag, groupFavoritesEnabled = true, blockColor, highlight, appear, attributes, listeners, setNodeRef, style, isDragging, }) {
+    const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;
+    // Появление проигрывается один раз. React переставляет узлы `insertBefore`, а браузер при
+    // повторной вставке перезапускает CSS-анимацию — при перетаскивании группы соседи «моргали».
+    // После окончания флаг снимается, и перестановка анимацию уже не запускает.
+    const [isAppearing, setIsAppearing] = (0, react_1.useState)(Boolean(appear));
+    const handleAnimationEnd = (0, react_1.useCallback)((event) => {
+        // `animationend` всплывает от вложенных анимаций — нужна только своя.
+        if (event.target === event.currentTarget) {
+            setIsAppearing(false);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, id: id, style: style, className: styles_module_scss_1.default.group, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, "data-appear": isAppearing || undefined, onAnimationEnd: handleAnimationEnd, "data-test-id": `${constants_1.TEST_IDS.groupCard}-${id}`, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: id, showChevron: false, afterTitle: (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, icon: icon, isExpanded: isExpanded, enableServiceDrag: enableServiceDrag, attributes: attributes, listeners: listeners, isMobile: isMobile }), children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, groupFavoritesEnabled: groupFavoritesEnabled }) })] }));
+}
+function DraggableGroup(props) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, sortable_1.useSortable)({ id: props.id });
     const style = {
         // CSS.Transform добавляет scaleX/scaleY, из-за чего перетаскиваемая группа "растягивается"
         // при пересечении с соседней группой другой высоты. CSS.Translate использует только сдвиг.
@@ -27,10 +40,25 @@ function SortableGroup({ id, icon, label, items, isExpanded, showDescription, is
         transform: transform ? utilities_1.CSS.Translate.toString(transform) : undefined,
         transition,
     };
-    const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;
-    return ((0, jsx_runtime_1.jsxs)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, id: id, style: style, className: styles_module_scss_1.default.group, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, "data-test-id": `${constants_1.TEST_IDS.groupCard}-${id}`, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: id, showChevron: false, afterTitle: (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, icon: icon, isExpanded: isExpanded, enableServiceDrag: enableServiceDrag, attributes: attributes, listeners: listeners, isMobile: isMobile }), children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled, onServiceClick: onServiceClick }) })] }));
+    return ((0, jsx_runtime_1.jsx)(GroupView, { ...props, attributes: attributes, listeners: listeners, setNodeRef: setNodeRef, style: style, isDragging: isDragging }));
 }
-function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, groupFavoritesEnabled, blockColor, highlight, }) {
+function SortableGroupBase(props) {
+    // Без drag (mobile, поиск, нет избранного) группа не регистрируется в `SortableContext`.
+    return props.enableServiceDrag ? (0, jsx_runtime_1.jsx)(DraggableGroup, { ...props }) : (0, jsx_runtime_1.jsx)(GroupView, { ...props });
+}
+exports.SortableGroup = (0, react_1.memo)(SortableGroupBase);
+/**
+ * Превью группы в `DragOverlay`. Рендерится вне `Content`, поэтому свой `CardsContext` собирает
+ * сам: без drag-обвязки карточек и без обработчика клика.
+ */
+function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favoriteIds, onFavoriteChange, groupFavoritesEnabled, blockColor, highlight, }) {
     const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;
-    return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragPreview, { className: styles_module_scss_1.default.groupDragPreview, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.group, "data-drag-preview": true, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupDragPreviewHeader, children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, isExpanded: isExpanded, isMobile: isMobile, enableServiceDrag: true }) }), isExpanded && ((0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled }))] }) }));
+    const cardsContext = {
+        showDescription,
+        isMobile,
+        dragEnabled: false,
+        favoriteIds,
+        onFavoriteChange,
+    };
+    return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragPreview, { className: styles_module_scss_1.default.groupDragPreview, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.group, "data-drag-preview": true, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupDragPreviewHeader, children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, isExpanded: isExpanded, isMobile: isMobile, enableServiceDrag: true }) }), isExpanded && ((0, jsx_runtime_1.jsx)(cardsContext_1.CardsContext.Provider, { value: cardsContext, children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, groupFavoritesEnabled: groupFavoritesEnabled }) }))] }) }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.d.ts

@@ -1,9 +1,12 @@
 import { InnerLink } from '../../../../../types';
-import { ServiceCardProps } from '../../../../ServiceCard';
-export type SortableGroupCardsProps = Pick<ServiceCardProps, 'showDescription' | 'isMobile' | 'favorite' | 'onServiceClick'> & {
+export type SortableGroupCardsProps = {
+    /** Id группы-предка. */
     groupId: string;
+    /** Карточки сервисов группы. */
     items: InnerLink[];
-    enableServiceDrag?: boolean;
+    /** Разрешено ли добавление карточек группы в избранное. */
     groupFavoritesEnabled?: boolean;
 };
-export declare function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled, onServiceClick, }: SortableGroupCardsProps): import("react/jsx-runtime").JSX.Element;
+declare function SortableGroupCardsBase({ groupId, items, groupFavoritesEnabled }: SortableGroupCardsProps): import("react/jsx-runtime").JSX.Element;
+export declare const SortableGroupCards: import("react").MemoExoticComponent<typeof SortableGroupCardsBase>;
+export {};

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.js

@@ -3,19 +3,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortableGroupCards = SortableGroupCards;
+exports.SortableGroupCards = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ServiceCard_1 = require("../../../../ServiceCard");
+const cardsContext_1 = require("../../../cardsContext");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const utils_1 = require("../utils");
 const SubCategory_1 = require("./SubCategory");
-function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled, onServiceClick, }) {
+function SortableGroupCardsBase({ groupId, items, groupFavoritesEnabled }) {
+    const { isMobile, showDescription, dragEnabled, favoriteIds, onFavoriteChange, onServiceClick } = (0, cardsContext_1.useCardsContext)();
+    const cardFavoriteChange = favoriteIds ? onFavoriteChange : undefined;
     const blocks = (0, react_1.useMemo)(() => (0, utils_1.splitIntoBlocks)(items), [items]);
     return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBlocks, children: blocks.map(block => {
             if (block.type === 'subcategory') {
-                return ((0, jsx_runtime_1.jsx)(SubCategory_1.SubCategory, { groupId: groupId, service: block.service, showDescription: showDescription, isMobile: isMobile, dragDisabled: !enableServiceDrag, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled, onServiceClick: onServiceClick }, String(groupId) + block.service.id));
+                return ((0, jsx_runtime_1.jsx)(SubCategory_1.SubCategory, { groupId: groupId, service: block.service, groupFavoritesEnabled: groupFavoritesEnabled }, String(groupId) + block.service.id));
             }
-            return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: block.services.map(service => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: !enableServiceDrag }, String(groupId) + service.id))) }, String(groupId) + block.services[0].id));
+            return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: block.services.map(service => ((0, jsx_runtime_1.jsx)(ServiceCard_1.GridServiceCard, { groupId: groupId, service: service, favoriteChecked: favoriteIds?.has(service.id), onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragEnabled: dragEnabled }, String(groupId) + service.id))) }, String(groupId) + block.services[0].id));
         }) }));
 }
+exports.SortableGroupCards = (0, react_1.memo)(SortableGroupCardsBase);

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts

@@ -1,6 +1,8 @@
 import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
 export type SortableGroupDragHandleProps = {
+    /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
     attributes?: DraggableAttributes;
+    /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
     listeners?: DraggableSyntheticListeners;
 };
 export declare function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts

@@ -6,4 +6,6 @@ export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
     enableServiceDrag?: boolean;
     isMobile?: boolean;
 } & SortableGroupDragHandleProps;
-export declare function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare const SortableGroupHeader: import("react").MemoExoticComponent<typeof SortableGroupHeaderBase>;
+export {};

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js

@@ -3,19 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortableGroupHeader = SortableGroupHeader;
+exports.SortableGroupHeader = void 0;
 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 typography_1 = require("@cloud-ru/ds-typography");
 const uikit_product_title_clickable_1 = require("@cloud-ru/ds-uikit-product-title-clickable");
+const react_1 = require("react");
 const utils_1 = require("../../../../../utils");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const SortableGroupDragHandle_1 = require("./SortableGroupDragHandle");
-function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
-    const handleLabelClick = e => {
+function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
+    const handleLabelClick = (0, react_1.useCallback)(e => {
         e.stopPropagation();
         label?.onClick?.(e);
-    };
+    }, [label]);
     return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? ((0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: (0, utils_1.getLinkEmblem)({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
 }
+exports.SortableGroupHeader = (0, react_1.memo)(SortableGroupHeaderBase);

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupSkeleton.d.ts

@@ -1,4 +1,5 @@
 type SortableGroupSkeletonProps = {
+    /** Мобильная раскладка. */
     isMobile?: boolean;
 };
 export declare function SortableGroupSkeleton({ isMobile }: SortableGroupSkeletonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,12 @@
-import { ServiceCardProps } from '../../../../../ServiceCard';
-export type SubCategoryProps = Pick<ServiceCardProps, 'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile'> & {
+import { InnerLink } from '../../../../../../types';
+export type SubCategoryProps = {
+    /** Id группы-предка. */
     groupId: string;
-    dragDisabled?: boolean;
+    /** Карточка подкатегории (с непустым {@link InnerLink.items}). */
+    service: InnerLink;
+    /** Разрешено ли добавление карточек группы в избранное. */
     groupFavoritesEnabled?: boolean;
 };
-export declare function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, groupFavoritesEnabled, }: SubCategoryProps): import("react/jsx-runtime").JSX.Element;
+declare function SubCategoryBase({ groupId, service, groupFavoritesEnabled }: SubCategoryProps): import("react/jsx-runtime").JSX.Element;
+export declare const SubCategory: import("react").MemoExoticComponent<typeof SubCategoryBase>;
+export {};

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

@@ -3,18 +3,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubCategory = SubCategory;
+exports.SubCategory = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const accordion_1 = require("@cloud-ru/ds-accordion");
 const react_1 = require("react");
+const noop_1 = require("../../../../../../../../utils/noop");
 const innerLink_1 = require("../../../../../../utils/innerLink");
 const ServiceCard_1 = require("../../../../../ServiceCard");
+const cardsContext_1 = require("../../../../cardsContext");
 const constants_1 = require("../../../../constants");
 const styles_module_scss_1 = __importDefault(require('../../styles.module.css'));
 const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
 const SubCategoryTitle_1 = require("./SubCategoryTitle");
-const noop = () => { };
-function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, groupFavoritesEnabled, }) {
+const TITLE_ONLY_EXPANDABLE = { value: true, onClick: noop_1.noop };
+const SubCategoryBody = (0, react_1.memo)(function SubCategoryBody({ nestedGroupId, items, variant }) {
+    const { isMobile, showDescription, dragEnabled, favoriteIds, onFavoriteChange, onServiceClick } = (0, cardsContext_1.useCardsContext)();
+    const cardFavoriteChange = favoriteIds ? onFavoriteChange : undefined;
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": variant === 'expanded' ? 'expanded' : true, "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: items.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.GridServiceCard, { groupId: nestedGroupId, service: nestedService, favoriteChecked: favoriteIds?.has(nestedService.id), onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragEnabled: dragEnabled }, nestedGroupId + nestedService.id))) }));
+});
+function SubCategoryBase({ groupId, service, groupFavoritesEnabled }) {
     const subcategoryId = (0, innerLink_1.getSubCategoryId)(groupId, service.id);
     const nestedGroupId = (0, innerLink_1.getNestedServiceGroupId)(groupId, service.id);
     const nestedItems = (0, react_1.useMemo)(() => service.items?.filter(item => !item.hidden) ?? [], [service.items]);
@@ -28,19 +35,17 @@ function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled
             setIsExpanded(isExpanded ? undefined : subcategoryId);
         }
     }, [isExpanded, subcategoryId, isExpandableEnabled]);
+    const expandable = (0, react_1.useMemo)(() => ({ value: Boolean(isExpanded), onClick: handleExpandedChange }), [isExpanded, handleExpandedChange]);
+    const testId = `${constants_1.TEST_IDS.subcategory}-${service.id}`;
+    const title = ((0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: viewMode === 'group-title-only' ? TITLE_ONLY_EXPANDABLE : expandable, groupFavoritesEnabled: groupFavoritesEnabled }));
     // 'group-title-only' — только заголовок подкатегории, без раскрываемого тела и кнопки
     // переключения: карточка ведёт себя как обычная ссылка (см. isSubCategoryCard в utils/innerLink).
     if (viewMode === 'group-title-only') {
-        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.subcategory, "data-title-only": true, "data-test-id": `${constants_1.TEST_IDS.subcategory}-${service.id}`, children: (0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: { value: true, onClick: noop }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.subcategory, "data-title-only": true, "data-test-id": testId, children: title }));
     }
     if (viewMode === 'expanded') {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": `${constants_1.TEST_IDS.subcategory}-${service.id}`, children: [(0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: {
-                        value: Boolean(isExpanded),
-                        onClick: handleExpandedChange,
-                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": 'expanded', "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": testId, children: [title, (0, jsx_runtime_1.jsx)(SubCategoryBody, { nestedGroupId: nestedGroupId, items: nestedItems, variant: 'expanded' })] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": `${constants_1.TEST_IDS.subcategory}-${service.id}`, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'single', expanded: isExpanded, onExpandedChange: handleExpandedChange, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: subcategoryId, showChevron: false, className: styles_module_scss_2.default.subcategoryAccordion, afterTitle: (0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: {
-                        value: Boolean(isExpanded),
-                        onClick: handleExpandedChange,
-                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": true, "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": testId, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'single', expanded: isExpanded, onExpandedChange: handleExpandedChange, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: subcategoryId, showChevron: false, className: styles_module_scss_2.default.subcategoryAccordion, afterTitle: title, children: (0, jsx_runtime_1.jsx)(SubCategoryBody, { nestedGroupId: nestedGroupId, items: nestedItems, variant: 'expandable' }) }) }) }));
 }
+exports.SubCategory = (0, react_1.memo)(SubCategoryBase);

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

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

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

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