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

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

@@ -13,16 +13,12 @@ const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const locale_1 = require("../../../../locale");
-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 = [], segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
@@ -37,8 +33,7 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
     });
     const isSearching = Boolean(searchValue);
     const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
-    // Ссылки на обработчики стабильны: иначе `memo` карточек ломается при каждом рендере потребителя.
-    const handleLinkClick = (0, utils_1.useEventHandler)((service, e) => {
+    const handleLinkClick = (0, react_1.useCallback)((service, e) => {
         if (service.disabled) {
             e?.preventDefault();
             return;
@@ -48,11 +43,7 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
         }
         onSegmentServiceClick?.(service, e);
         service.onClick?.(e);
-    });
-    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;
+    }, [onSegmentServiceClick]);
     const { orderedGroups, expandedIds, onExpandedChange, handleDragEnd: handleSortableDragEnd, } = (0, useContentSegmentsSortable_1.useContentSegmentsSortable)({
         segments,
         activeSegmentId: segmentId,
@@ -70,50 +61,35 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
         expandedIds,
         onSortableDragEnd: handleSortableDragEnd,
         showDescription,
-        showGroupsColors,
-        favoriteIds,
-        onFavoriteChange: handleFavoriteChange,
+        showGroupsColors: preferences?.showGroupsColors?.value,
+        favorite,
     });
-    // Первый экран монтируется сразу, остальные группы дорисовываются порциями (см. `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 allGroupsExpanded = visibleGroups.length > 0 && visibleGroups.every(({ id }) => expandedIds.includes(id));
     const handleToggleAllGroupsExpanded = (0, react_1.useCallback)(() => {
+        const visibleIds = visibleGroups.map(({ id }) => id);
         if (allGroupsExpanded) {
-            const visibleIdsSet = new Set(visibleGroupIds);
-            onExpandedChange(expandedIds.filter(id => !visibleIdsSet.has(id)));
+            onExpandedChange(expandedIds.filter(id => !visibleIds.includes(id)));
             return;
         }
-        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]);
+        onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
+    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
     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: 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)(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)(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-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] })] }));
+    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] })] }));
 }

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

@@ -1,27 +1,18 @@
 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,31 +1,12 @@
 import { LinksGroup, LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
-import { CardsContextValue } from '../../cardsContext';
-export type SortableGroupProps = Pick<LinksGroup, 'icon' | 'items'> & {
-    /** Id группы. */
+import { SortableGroupCardsProps } from './components';
+export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & Pick<LinksGroup, 'icon'> & {
     id: string;
-    /** Заголовок группы. */
     label: LinksGroupTitle;
-    /** Раскрыта ли группа. */
     isExpanded?: boolean;
-    /** Мобильная раскладка. */
-    isMobile?: boolean;
-    /** Группу можно перетаскивать (иначе рендерится без `useSortable`). */
-    enableServiceDrag?: boolean;
-    /** Цвет блока группы. */
     blockColor?: LinksGroupBlockColor;
-    /** Визуальное выделение группы. */
     highlight?: boolean;
-    /** Разрешено ли добавление карточек группы в избранное. */
     groupFavoritesEnabled?: boolean;
-    /** Группа появляется с fade-in при монтировании (на desktop; на mobile анимирует контейнер). */
-    appear?: boolean;
 };
-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 {};
+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;

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 = void 0;
+exports.SortableGroup = SortableGroup;
 exports.SortableGroupDragPreview = SortableGroupDragPreview;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sortable_1 = require("@dnd-kit/sortable");
@@ -11,27 +11,14 @@ 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 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 });
+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,
+    });
     const style = {
         // CSS.Transform добавляет scaleX/scaleY, из-за чего перетаскиваемая группа "растягивается"
         // при пересечении с соседней группой другой высоты. CSS.Translate использует только сдвиг.
@@ -40,25 +27,10 @@ function DraggableGroup(props) {
         transform: transform ? utilities_1.CSS.Translate.toString(transform) : undefined,
         transition,
     };
-    return ((0, jsx_runtime_1.jsx)(GroupView, { ...props, attributes: attributes, listeners: listeners, setNodeRef: setNodeRef, style: style, isDragging: isDragging }));
-}
-function SortableGroupBase(props) {
-    // Без drag (mobile, поиск, нет избранного) группа не регистрируется в `SortableContext`.
-    return props.enableServiceDrag ? (0, jsx_runtime_1.jsx)(DraggableGroup, { ...props }) : (0, jsx_runtime_1.jsx)(GroupView, { ...props });
+    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 }) })] }));
 }
-exports.SortableGroup = (0, react_1.memo)(SortableGroupBase);
-/**
- * Превью группы в `DragOverlay`. Рендерится вне `Content`, поэтому свой `CardsContext` собирает
- * сам: без drag-обвязки карточек и без обработчика клика.
- */
-function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favoriteIds, onFavoriteChange, groupFavoritesEnabled, blockColor, highlight, }) {
+function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, groupFavoritesEnabled, blockColor, highlight, }) {
     const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;
-    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 }) }))] }) }));
+    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 }))] }) }));
 }

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

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

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

@@ -3,26 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortableGroupCards = void 0;
+exports.SortableGroupCards = SortableGroupCards;
 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 SortableGroupCardsBase({ groupId, items, groupFavoritesEnabled }) {
-    const { isMobile, showDescription, dragEnabled, favoriteIds, onFavoriteChange, onServiceClick } = (0, cardsContext_1.useCardsContext)();
-    const cardFavoriteChange = favoriteIds ? onFavoriteChange : undefined;
+function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled, onServiceClick, }) {
     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, groupFavoritesEnabled: groupFavoritesEnabled }, key));
+                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)(ServiceCard_1.GridServiceCard, { groupId: groupId, service: service, isFavorite: favoriteIds?.has(service.id), onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragEnabled: dragEnabled }, 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));
         }) }));
 }
-exports.SortableGroupCards = (0, react_1.memo)(SortableGroupCardsBase);

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

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

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

@@ -3,21 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortableGroupHeader = void 0;
+exports.SortableGroupHeader = SortableGroupHeader;
 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 SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
-    const handleLabelClick = (0, react_1.useCallback)(e => {
+function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
+    const handleLabelClick = 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,5 +1,4 @@
 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,12 +1,7 @@
-import { InnerLink } from '../../../../../../types';
-export type SubCategoryProps = {
-    /** Id группы-предка. */
+import { ServiceCardProps } from '../../../../../ServiceCard';
+export type SubCategoryProps = Pick<ServiceCardProps, 'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile'> & {
     groupId: string;
-    /** Карточка подкатегории (с непустым {@link InnerLink.items}). */
-    service: InnerLink;
-    /** Разрешено ли добавление карточек группы в избранное. */
+    dragDisabled?: boolean;
     groupFavoritesEnabled?: boolean;
 };
-declare function SubCategoryBase({ groupId, service, groupFavoritesEnabled }: SubCategoryProps): import("react/jsx-runtime").JSX.Element;
-export declare const SubCategory: import("react").MemoExoticComponent<typeof SubCategoryBase>;
-export {};
+export declare function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, groupFavoritesEnabled, }: SubCategoryProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,25 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubCategory = void 0;
+exports.SubCategory = SubCategory;
 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 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, 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 noop = () => { };
+function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, 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]);
@@ -35,17 +28,19 @@ function SubCategoryBase({ groupId, service, groupFavoritesEnabled }) {
             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": testId, children: title }));
+        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 }) }));
     }
     if (viewMode === 'expanded') {
-        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.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.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' }) }) }) }));
+    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))) }) }) }) }));
 }
-exports.SubCategory = (0, react_1.memo)(SubCategoryBase);

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

@@ -1,10 +1,5 @@
-import { GridServiceCardProps } from '../../../../../ServiceCard';
+import { DraggableServiceCardProps } from '../../../../../ServiceCard';
 export type SubCategoryTitleProps = {
-    /** Id группы-предка. */
     groupId: string;
-    /** Кнопка избранного показывается только если для группы избранное включено. */
-    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 {};
+} & 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;

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 = void 0;
+exports.SubCategoryTitle = SubCategoryTitle;
 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,59 +12,53 @@ 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 SubCategoryTitleBase({ groupId, service, groupFavoritesEnabled, expandable }) {
-    const { isMobile, showDescription: showDescriptionProp, dragEnabled, favoriteIds, onFavoriteChange, onServiceClick, } = (0, cardsContext_1.useCardsContext)();
+function SubCategoryTitle({ groupId, service, showDescription: showDescriptionProp, isMobile, dragDisabled, favorite, onServiceClick, expandable, }) {
     const titleRef = (0, react_1.useRef)(null);
     const tooltipTriggerRef = (0, react_1.useRef)(null);
     const favoriteRef = (0, react_1.useRef)(null);
-    const { id, description, icon } = service;
-    const handleServiceClick = (0, react_1.useCallback)((event) => {
+    const handleServiceClick = (event) => {
         (0, utils_1.stopEventPropagation)(event);
         onServiceClick?.(service, event);
-    }, [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)({
+    };
+    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)({
         cardRef: titleRef,
         items: [
             hasTooltip ? { ref: tooltipTriggerRef } : null,
-            cardFavoriteChange
+            favorite
                 ? {
                     ref: favoriteRef,
-                    onActivate: () => cardFavoriteChange(id)(!isFavorite),
+                    onActivate: () => favorite.onChange(service.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: 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
+        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
                                 ? {
-                                    tip: description,
+                                    tip: service.description,
                                     buttonRef: tooltipTriggerRef,
                                     trigger: isMobile ? 'click' : 'hoverAndFocusVisible',
                                     'data-test-id': `${titleTestId}-tooltip`,
                                 }
-                                : undefined, favorite: cardFavoriteChange
+                                : undefined, favorite: favorite
                                 ? {
                                     enabled: true,
                                     checked: isFavorite,
-                                    onChange: (checked) => cardFavoriteChange(id)(checked),
+                                    onChange: favorite.onChange(service.id),
                                     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: 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: service.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.GridServiceCard, { groupId: groupId, service: service, isFavorite: isFavorite, onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragEnabled: dragEnabled, 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.DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragDisabled: dragDisabled, expandable: expandable }) }));
 }
-exports.SubCategoryTitle = (0, react_1.memo)(SubCategoryTitleBase);

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

@@ -46,8 +46,6 @@
 }
 
 .group{
-  content-visibility:auto;
-  contain-intrinsic-size:auto var(--sn-primitive-dimension-128, 128px);
   position:relative;
   overflow-x:clip;
   display:flex;
@@ -58,14 +56,6 @@
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
   background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-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;
 }
@@ -243,11 +233,4 @@
 
 .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;
-  }
 }

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

@@ -4,10 +4,8 @@ exports.useContentSegmentsSortable = useContentSegmentsSortable;
 const sortable_1 = require("@dnd-kit/sortable");
 const react_1 = require("react");
 function mergeIdsPreservingOrder(prevIds, nextIds) {
-    const nextIdSet = new Set(nextIds);
-    const prevIdSet = new Set(prevIds);
-    const kept = prevIds.filter(id => nextIdSet.has(id));
-    const added = nextIds.filter(id => !prevIdSet.has(id));
+    const kept = prevIds.filter(id => nextIds.includes(id));
+    const added = nextIds.filter(id => !prevIds.includes(id));
     if (added.length === 0 && kept.length === prevIds.length) {
         return prevIds;
     }