@cloud-ru/ds-uikit-product-header 1.5.1-preview-d90ac2be.0 → 1.5.2-preview-0406cbd2.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.5.1 (2026-09-25)
+
+### Bug Fixes
+
+- **FF-9083:** migrate components to renamed token keys ([fd8237d](https://github.com/cloud-ru-tech/snack-v2/commit/fd8237d04c95b5474955c946d9db7bedb3821c97))
+- **FF-9085:** pin comfort density on mobile header surfaces ([2d23010](https://github.com/cloud-ru-tech/snack-v2/commit/2d230100ae078bfa26fbe4a4d3cd643187eee00b))
+
 # 1.5.0 (2026-09-21)
 
 ### Features

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` | `false` |  |
+| `open` | `boolean` | — |  |
 | `platformGroups` | `LinksGroup` | — | Платформенные группы (например «Облачные продукты», «Другие продукты»). <br/> Без поиска в сетке карточек **не отображаются**. <br/> С поиском: попадают в результаты при совпадении; порядок — <br/> после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. <br/> Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`). |
 | `preferences` | `MainMenuPreferencesProps` | — | Настройки меню (модалка по кнопке в тулбаре): описания карточек, цвета групп. <br/> Не передано — кнопка настроек в тулбаре не отображается. |
 | `rightTop` | `ReactNode` | — | Слот над тулбаром правой колонки (например, баннеры) |
@@ -821,5 +821,4 @@ export function Basic() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `isMobile` | `boolean` | — |  |
 | `items` | `BreadcrumbsProps` \| `Item` | — |  |

package/dist/cjs/components/HeaderButton/HeaderButton.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderButton = HeaderButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("@cloud-ru/ds-button");
-const theme_1 = require("@cloud-ru/ds-theme");
 const tooltip_1 = require("@cloud-ru/ds-tooltip");
 const classnames_1 = __importDefault(require("classnames"));
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -16,7 +15,6 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
  * остальное API `Button` и `Tooltip` передаётся как есть.
  */
 function HeaderButton({ tooltip, isMobile, className, ...rest }) {
-    const compactThemeClassName = (0, theme_1.useThemeClassnames)({ density: 'compact' });
     return (
     // FIXME: typescript ломается, если не указать tip явно
     //  пока не разбирался почему так
@@ -29,5 +27,5 @@ function HeaderButton({ tooltip, isMobile, className, ...rest }) {
                 placement: 'bottom',
                 ...tooltip,
                 triggerClassName: styles_module_scss_1.default.tooltipTrigger,
-            }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.headerButton, compactThemeClassName, className) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.headerButton, className) }) }));
 }

package/dist/cjs/components/HeaderLayout/HeaderLayout.js

@@ -13,5 +13,5 @@ const useMobileLayout_1 = require("../../hooks/useMobileLayout");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }) {
     const isMobile = (0, useMobileLayout_1.useMobileLayout)();
-    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), ...(0, utils_1.extractSupportProps)({ 'data-test-id': constants_1.TEST_IDS.headerLayout.root, ...rest }), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [logo && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logo }), menu && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), menu] })), !isMobile && select && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, children: toolbar })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs })] }));
+    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), "data-mobile": isMobile || undefined, ...(0, utils_1.extractSupportProps)({ 'data-test-id': constants_1.TEST_IDS.headerLayout.root, ...rest }), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [logo && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logo }), menu && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), menu, isMobile && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' })] })), !isMobile && select && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, children: toolbar })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }))] }));
 }

package/dist/cjs/components/HeaderLayout/styles.module.css

@@ -1,6 +1,6 @@
 .header{
   box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .top{
@@ -18,7 +18,6 @@
   align-items:center;
   box-sizing:border-box;
   height:var(--sn-primitive-dimension-24, 24px);
-  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
 }
 
 .left{
@@ -34,4 +33,12 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   height:100%;
+}
+
+.header[data-mobile] .top{
+  padding:var(--sn-primitive-dimension-0, 0px);
+}
+.header[data-mobile] .left,
+.header[data-mobile] .right{
+  gap:var(--sn-primitive-dimension-0, 0px);
 }

package/dist/cjs/components/Logo/Logo.js

@@ -17,7 +17,7 @@ const constants_1 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest }) {
     const [error, setError] = (0, react_1.useState)(false);
-    const brandCThemeClassName = (0, theme_1.useThemeClassnames)({ brand: 'brandC' });
+    const logoThemeClassName = (0, theme_1.useThemeClassnames)({ brand: 'hrGreen' });
     (0, react_1.useEffect)(() => {
         setError(false);
     }, [path, loading]);
@@ -29,7 +29,7 @@ function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest
                     setError(true);
                 } }));
         }
-        return ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.logoWrap, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.iconStack, children: [(0, jsx_runtime_1.jsx)(logos_1.CloudLogo, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, brandCThemeClassName, styles_module_scss_1.default.iconDefault) }), (0, jsx_runtime_1.jsx)(product_1.HomeFilledSVG, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, brandCThemeClassName, styles_module_scss_1.default.iconHover) })] }), mode && mode !== constants_1.HEADER_LOGO_MODE.Prod && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { as: 'span', label: mode, size: 'xs', appearance: constants_1.MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
-    }, [error, mode, path, brandCThemeClassName]);
+        return ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.logoWrap, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.iconStack, children: [(0, jsx_runtime_1.jsx)(logos_1.CloudLogo, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconDefault) }), (0, jsx_runtime_1.jsx)(product_1.HomeFilledSVG, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconHover) })] }), mode && mode !== constants_1.HEADER_LOGO_MODE.Prod && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { as: 'span', label: mode, size: 'xs', appearance: constants_1.MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
+    }, [error, mode, path, logoThemeClassName]);
     return ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { as: 'a', tooltip: tooltip, className: (0, classnames_1.default)(styles_module_scss_1.default.logo, className), href: href, tabIndex: 0, onClick: onClick, loading: loading, icon: logo, ...(0, utils_1.extractDataTestProps)(rest) }));
 }

package/dist/cjs/components/Logo/styles.module.css

@@ -19,7 +19,7 @@
 .icon{
   transform-origin:50% center;
   transform-box:fill-box;
-  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
   transition:opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -36,6 +36,7 @@
 .logo{
   position:relative;
   flex-shrink:0;
+  box-sizing:border-box;
 }
 .logo:active:not([data-disabled]) .iconDefault{
   opacity:0;

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

@@ -14,16 +14,13 @@ 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 && searchValue)
-            onSearchChange?.('');
-    }, [open, searchValue, onSearchChange]);
-    const handleOpen = (0, react_1.useCallback)(() => {
-        setOpen(true);
-    }, [setOpen]);
+        if (!open && search?.value)
+            search?.onChange('');
+    }, [open, search]);
     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: 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 })] }));
+    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 })] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Banners/MenuBanner.js

@@ -9,7 +9,6 @@ const button_1 = require("@cloud-ru/ds-button");
 const card_1 = require("@cloud-ru/ds-card");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const promo_tag_1 = require("@cloud-ru/ds-promo-tag");
-const theme_1 = require("@cloud-ru/ds-theme");
 const typography_1 = require("@cloud-ru/ds-typography");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
@@ -18,11 +17,10 @@ const constants_1 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#', 'data-test-id': dataTestId, ...rest }) {
     const { t } = locale_1.headerLocale.useTranslations();
-    const compactThemeClassname = (0, theme_1.useThemeClassnames)({ density: 'compact' });
     const handleClose = (0, react_1.useCallback)(e => {
         e.preventDefault();
         e.stopPropagation();
         onClose?.(e);
     }, [onClose]);
-    return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentRow, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, className: styles_module_scss_1.default.promoTag, roleAppearance: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: (0, classnames_1.default)(styles_module_scss_1.default.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentRow, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, className: styles_module_scss_1.default.promoTag, roleAppearance: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: styles_module_scss_1.default.closeButton, view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }) }));
 }

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

@@ -11,6 +11,7 @@
 }
 
 .root{
+  box-sizing:border-box;
   width:100%;
   min-width:0;
 }
@@ -21,7 +22,7 @@
 .contentRow{
   position:relative;
   display:flex;
-  gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
+  gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
   align-items:center;
   box-sizing:border-box;
   width:100%;

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

@@ -15,16 +15,12 @@ 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);
@@ -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) : noopFavoriteChange);
-    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.js

@@ -28,7 +28,7 @@ function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpan
         (0, react_1.startTransition)(() => preferences?.showDescription?.onChange(value));
     };
     const hasSegmentItems = segmentItems && segmentItems?.length > 0;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.TEST_IDS.toolbar, children: [hasSegmentItems && ((0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { loading: loading, skeleton: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.segmentControlSkeleton, "data-test-id": constants_1.TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.segmentControlSkeletonBlock }) }), children: (0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [preferences && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { icon: (0, jsx_runtime_1.jsx)(system_1.SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsButton, onClick: openModal, tooltip: { tip: t('menuSettingsTitle') } }), (0, jsx_runtime_1.jsx)(modal_1.Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsModal, cancelButton: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-mobile": isMobile || undefined, "data-test-id": constants_1.TEST_IDS.toolbar, children: [hasSegmentItems && ((0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { loading: loading, skeleton: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.segmentControlSkeleton, "data-test-id": constants_1.TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.segmentControlSkeletonBlock }) }), children: (0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [preferences && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { icon: (0, jsx_runtime_1.jsx)(system_1.SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsButton, onClick: openModal, tooltip: { tip: t('menuSettingsTitle') } }), (0, jsx_runtime_1.jsx)(modal_1.Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsModal, cancelButton: {
                                     label: t('close'),
                                     onClick: closeModal,
                                 }, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.settingsContent, children: [preferences.showGroupsColors && ((0, jsx_runtime_1.jsx)(uikit_product_switch_row_1.SwitchRow, { title: t('menuSettingsShowGroupsColors'), checked: preferences.showGroupsColors.value, onChange: preferences.showGroupsColors.onChange, "data-test-id": constants_1.TEST_IDS.settingsShowGroupsColorsSwitch })), (0, jsx_runtime_1.jsx)(uikit_product_switch_row_1.SwitchRow, { title: t('menuSettingsShowDescription'), checked: preferences.showDescription.value, onChange: handleShowDescriptionChange, "data-test-id": constants_1.TEST_IDS.settingsShowDescriptionSwitch })] }) })] })), !isMobile && ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { icon: allGroupsExpanded ? (0, jsx_runtime_1.jsx)(system_1.CollapseVerticalSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ExpandVerticalSVG, {}), "aria-label": allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups'), "data-test-id": constants_1.TEST_IDS.toggleAllGroups, onClick: onToggleAllGroupsExpanded, tooltip: { tip: allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups') } }))] }))] }));

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

@@ -3,6 +3,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);
@@ -16,7 +17,7 @@
   display:flex;
   flex-shrink:0;
   width:264px;
-  height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
 }
 .segmentControlSkeleton[data-mobile]{
   width:100%;

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

@@ -1,24 +1,12 @@
 import { LinksGroup, LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
-import { CardsContextValue } from '../../cardsContext';
-export type SortableGroupProps = Pick<LinksGroup, 'icon' | 'items'> & {
+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,9 +1,9 @@
 import { InnerLink } from '../../../../../types';
-export type SortableGroupCardsProps = {
+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;
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, children: items.map(service => {
+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, "data-show-description": showDescription || 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/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/SubCategory/SubCategory.d.ts

@@ -1,9 +1,7 @@
-import { InnerLink } from '../../../../../../types';
-export type SubCategoryProps = {
+import { ServiceCardProps } from '../../../../../ServiceCard';
+export type SubCategoryProps = Pick<ServiceCardProps, 'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile'> & {
     groupId: string;
-    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;