@cloud-ru/ds-uikit-product-header 1.5.0 → 1.5.1-preview-c228f409.0

package/README.md

@@ -478,7 +478,7 @@ import { MainMenu, MenuMobile } from '@cloud-ru/ds-uikit-product-header';
 | `onSegmentOrderChange` | `((segmentId: string, orderedGroupIds: string[]) => void)` | — | Колбэк после DnD групп в сегменте (без id синтетической группы избранного). |
 | `onSegmentServiceClick` | `((service: InnerLink, e?: MouseEvent<HTMLElement, MouseEvent>) => void)` | — | Колбэк клика по карточке сервиса в сегменте. |
 | `onWidthChangeEnd` | `((width: number) => void)` | — | Вызывается при окончании изменения ширины дровера (desktop only) |
-| `open` | `boolean` | — |  |
+| `open` | `boolean` | `false` |  |
 | `platformGroups` | `LinksGroup` | — | Платформенные группы (например «Облачные продукты», «Другие продукты»). <br/> Без поиска в сетке карточек **не отображаются**. <br/> С поиском: попадают в результаты при совпадении; порядок — <br/> после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. <br/> Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`). |
 | `preferences` | `MainMenuPreferencesProps` | — | Настройки меню (модалка по кнопке в тулбаре): описания карточек, цвета групп. <br/> Не передано — кнопка настроек в тулбаре не отображается. |
 | `rightTop` | `ReactNode` | — | Слот над тулбаром правой колонки (например, баннеры) |

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

@@ -14,13 +14,16 @@ const MenuMobile_1 = require("./helperComponents/MenuMobile");
 function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, leftBottom, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
+    const searchValue = search?.value;
+    const onSearchChange = search?.onChange;
     (0, react_1.useEffect)(() => {
-        if (!open && search?.value)
-            search?.onChange('');
-    }, [open, search]);
+        if (!open && searchValue)
+            onSearchChange?.('');
+    }, [open, searchValue, onSearchChange]);
+    const handleOpen = (0, react_1.useCallback)(() => {
+        setOpen(true);
+    }, [setOpen]);
     const isMobile = (0, useMobileLayout_1.useMobileLayout)();
     const MenuComponent = isMobile ? MenuMobile_1.MenuMobile : MenuDesktop_1.MenuDesktop;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { tooltip: open ? undefined : { tip: t('services') }, isMobile: isMobile, disabled: disabled, icon: (0, jsx_runtime_1.jsx)(product_1.MainMenuSVG, {}), onClick: () => {
-                    setOpen(true);
-                }, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerButton }), (0, jsx_runtime_1.jsx)(MenuComponent, { settingItems: settingItems, segments: segments, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, platformGroups: platformGroups, search: search, logo: logo, leftTop: leftTop, leftBottom: leftBottom, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen, preferences: preferences, defaultWidth: defaultWidth, onWidthChangeEnd: onWidthChangeEnd, draggerTooltip: draggerTooltip, loading: loading })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { tooltip: open ? undefined : { tip: t('services') }, isMobile: isMobile, disabled: disabled, icon: (0, jsx_runtime_1.jsx)(product_1.MainMenuSVG, {}), onClick: handleOpen, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerButton }), (0, jsx_runtime_1.jsx)(MenuComponent, { settingItems: settingItems, segments: segments, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, platformGroups: platformGroups, search: search, logo: logo, leftTop: leftTop, leftBottom: leftBottom, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen, preferences: preferences, defaultWidth: defaultWidth, onWidthChangeEnd: onWidthChangeEnd, draggerTooltip: draggerTooltip, loading: loading })] }));
 }

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

@@ -15,12 +15,16 @@ const react_1 = require("react");
 const locale_1 = require("../../../../locale");
 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'));
+const noopFavoriteChange = () => { };
 function Content({ searchValue, search, rightTop, segments, searchGroups = [], segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const showDescription = (0, react_1.useDeferredValue)(preferences?.showDescription.value ?? false);
@@ -33,7 +37,8 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
     });
     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;
@@ -43,7 +48,11 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
         }
         onSegmentServiceClick?.(service, e);
         service.onClick?.(e);
-    }, [onSegmentServiceClick]);
+    });
+    const handleFavoriteChange = (0, utils_1.useEventHandler)((productId) => favorite ? favorite.onChange(productId) : noopFavoriteChange);
+    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,
@@ -61,35 +70,50 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
         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/SortableGroup/SortableGroup.d.ts

@@ -1,12 +1,24 @@
 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: 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,9 @@
 import { InnerLink } from '../../../../../types';
-import { ServiceCardProps } from '../../../../ServiceCard';
-export type SortableGroupCardsProps = Pick<ServiceCardProps, 'showDescription' | 'isMobile' | 'favorite' | 'onServiceClick'> & {
+export type SortableGroupCardsProps = {
     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,21 +3,26 @@ 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 innerLink_1 = require("../../../../../utils/innerLink");
 const ServiceCard_1 = require("../../../../ServiceCard");
+const cardsContext_1 = require("../../../cardsContext");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 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;
     return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, children: items.map(service => {
             if (service.hidden) {
                 return null;
             }
             const key = String(groupId) + service.id;
             if ((0, innerLink_1.isSubCategoryCard)(service)) {
-                return ((0, jsx_runtime_1.jsx)(SubCategory_1.SubCategory, { groupId: groupId, service: service, showDescription: showDescription, isMobile: isMobile, dragDisabled: !enableServiceDrag, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled, onServiceClick: onServiceClick }, key));
+                return ((0, jsx_runtime_1.jsx)(SubCategory_1.SubCategory, { groupId: groupId, service: service, groupFavoritesEnabled: groupFavoritesEnabled }, key));
             }
-            return ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: !enableServiceDrag }, key));
+            return ((0, jsx_runtime_1.jsx)(ServiceCard_1.GridServiceCard, { groupId: groupId, service: service, isFavorite: favoriteIds?.has(service.id), onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragEnabled: dragEnabled }, key));
         }) }));
 }
+exports.SortableGroupCards = (0, react_1.memo)(SortableGroupCardsBase);

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/SubCategory/SubCategory.d.ts

@@ -1,7 +1,9 @@
-import { ServiceCardProps } from '../../../../../ServiceCard';
-export type SubCategoryProps = Pick<ServiceCardProps, 'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile'> & {
+import { InnerLink } from '../../../../../../types';
+export type SubCategoryProps = {
     groupId: string;
-    dragDisabled?: boolean;
+    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 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 };
+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, children: items.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.GridServiceCard, { groupId: nestedGroupId, service: nestedService, isFavorite: favoriteIds?.has(nestedService.id), onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragEnabled: dragEnabled }, nestedGroupId + nestedService.id))) }));
+});
+function SubCategoryBase({ groupId, service, groupFavoritesEnabled }) {
     const 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, 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, 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,9 @@
-import { DraggableServiceCardProps } from '../../../../../ServiceCard';
+import { GridServiceCardProps } from '../../../../../ServiceCard';
 export type SubCategoryTitleProps = {
     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', actionsSize: isMobile ? 's' : 'm', 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, isFavorite: isFavorite, onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragEnabled: dragEnabled, expandable: expandable }) }));
 }
+exports.SubCategoryTitle = (0, react_1.memo)(SubCategoryTitleBase);

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

@@ -46,6 +46,8 @@
 }
 
 .group{
+  content-visibility:auto;
+  contain-intrinsic-size:auto var(--sn-primitive-dimension-128, 128px);
   position:relative;
   overflow-x:clip;
   display:flex;
@@ -56,6 +58,14 @@
   border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
   background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
 }
+.group[data-appear]{
+  animation:group-appear 0.24s cubic-bezier(0.4, 0, 0.2, 1) backwards;
+}
+@media (prefers-reduced-motion: reduce){
+  .group[data-appear]{
+    animation:none;
+  }
+}
 .group[data-drag-preview]{
   cursor:grabbing;
 }
@@ -233,4 +243,11 @@
 
 .skeletonService{
   padding:var(--sn-primitive-dimension-4, 4px);
+}
+
+@keyframes group-appear{
+  from{
+    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
+    opacity:0;
+  }
 }