@cloud-ru/ds-uikit-product-header 1.3.9 → 1.3.10-preview-1030ded1.0

package/README.md

@@ -342,7 +342,6 @@ function LocalMainMenu() {
 | `badge` | `CardServiceLightProps` \| `PromoTagPredefinedBaseProps` | — |  |
 | `description` | `string \| undefined` | — | Краткое описание сервиса — отображается при включённом переключателе «Описание». |
 | `disabled` | `boolean \| undefined` | — |  |
-| `expandableEnabled` | `boolean \| undefined` | — | Разрешено ли раскрытие карточки. default=false - Запрещено |
 | `favoritesEnabled` | `boolean \| undefined` | — | Разрешено ли добавление карточки в избранное. default=true - разрешено |
 | `hidden` | `boolean \| undefined` | — |  |
 | `href` | `string \| undefined` | — |  |
@@ -351,6 +350,9 @@ function LocalMainMenu() {
 | `items` | `InnerLink` | — | Вложенные сервисы подкатегории. <br/> При наличии карточка раскрывается аккордеоном: в свёрнутом виде — обычная карточка <br/> с кнопкой раскрытия, в развёрнутом — заголовок <br/> {@link <br/> TitleClickable <br/> } <br/> и сетка вложенных сервисов. |
 | `label` | `string` | — | Заголовок карточки. |
 | `onClick` | `(e?: MouseEvent<HTMLElement>) => void` | — |  |
+| `viewMode` | `"expandable"` \| `"expanded"` \| `"flat-link"` \| `"group-title-only"` | — | Режим отображения карточки. default='expandable'. <br/> - `'expandable'` — подкатегория при наличии реальных <br/> {@link <br/> items <br/> } <br/> : заголовок <br/> {@link <br/> TitleClickable <br/> } <br/> с шевроном и сетка вложенных сервисов (раскрытие/схлопывание — <br/> см. <br/> {@link <br/> expandableEnabled <br/> } <br/> ). Без `items` — обычная карточка сервиса. <br/> - `'group-title-only'` — заголовок подкатегории ( <br/> {@link <br/> TitleClickable <br/> } <br/> с шевроном) без <br/> раскрываемого тела, даже если `items` заданы: карточка ведёт себя как обычная ссылка. <br/> Полезно для группы, чьи вложенные сервисы показываются на отдельной странице. <br/> - `'flat-link'` — всегда обычная карточка сервиса, даже если `items` заданы. |
+
+- `InnerLinkViewMode` = `"expandable"` \| `"expanded"` \| `"flat-link"` \| `"group-title-only"`
 
 **LinksGroup**
 
@@ -514,7 +516,6 @@ import { MainMenu, MenuMobile } from '@cloud-ru/ds-uikit-product-header';
 | `badge` | `CardServiceLightProps` \| `PromoTagPredefinedBaseProps` | — |  |
 | `description` | `string \| undefined` | — | Краткое описание сервиса — отображается при включённом переключателе «Описание». |
 | `disabled` | `boolean \| undefined` | — |  |
-| `expandableEnabled` | `boolean \| undefined` | — | Разрешено ли раскрытие карточки. default=false - Запрещено |
 | `favoritesEnabled` | `boolean \| undefined` | — | Разрешено ли добавление карточки в избранное. default=true - разрешено |
 | `hidden` | `boolean \| undefined` | — |  |
 | `href` | `string \| undefined` | — |  |
@@ -523,6 +524,9 @@ import { MainMenu, MenuMobile } from '@cloud-ru/ds-uikit-product-header';
 | `items` | `InnerLink` | — | Вложенные сервисы подкатегории. <br/> При наличии карточка раскрывается аккордеоном: в свёрнутом виде — обычная карточка <br/> с кнопкой раскрытия, в развёрнутом — заголовок <br/> {@link <br/> TitleClickable <br/> } <br/> и сетка вложенных сервисов. |
 | `label` | `string` | — | Заголовок карточки. |
 | `onClick` | `(e?: MouseEvent<HTMLElement>) => void` | — |  |
+| `viewMode` | `"expandable"` \| `"expanded"` \| `"flat-link"` \| `"group-title-only"` | — | Режим отображения карточки. default='expandable'. <br/> - `'expandable'` — подкатегория при наличии реальных <br/> {@link <br/> items <br/> } <br/> : заголовок <br/> {@link <br/> TitleClickable <br/> } <br/> с шевроном и сетка вложенных сервисов (раскрытие/схлопывание — <br/> см. <br/> {@link <br/> expandableEnabled <br/> } <br/> ). Без `items` — обычная карточка сервиса. <br/> - `'group-title-only'` — заголовок подкатегории ( <br/> {@link <br/> TitleClickable <br/> } <br/> с шевроном) без <br/> раскрываемого тела, даже если `items` заданы: карточка ведёт себя как обычная ссылка. <br/> Полезно для группы, чьи вложенные сервисы показываются на отдельной странице. <br/> - `'flat-link'` — всегда обычная карточка сервиса, даже если `items` заданы. |
+
+- `InnerLinkViewMode` = `"expandable"` \| `"expanded"` \| `"flat-link"` \| `"group-title-only"`
 
 **LinksGroup**
 

package/dist/cjs/components/MainMenu/helperComponents/Banners/MenuBanner.d.ts

@@ -13,4 +13,4 @@ export type MenuBannerProps = WithSupportProps<{
     /** CSS-класс корневого элемента */
     className?: string;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'children'>>;
-export declare function MenuBanner({ title, promoTag, afterTitle, onClose, className, href, target, 'data-test-id': dataTestId, ...rest }: MenuBannerProps): ReactElement;
+export declare function MenuBanner({ title, promoTag, afterTitle, onClose, className, href, 'data-test-id': dataTestId, ...rest }: MenuBannerProps): ReactElement;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuBanner = MenuBanner;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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");
@@ -15,7 +16,7 @@ const react_1 = require("react");
 const locale_1 = require("../../../../locale");
 const constants_1 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#', target, 'data-test-id': dataTestId, ...rest }) {
+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 => {
@@ -23,5 +24,5 @@ function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#
         e.stopPropagation();
         onClose?.(e);
     }, [onClose]);
-    return ((0, jsx_runtime_1.jsxs)("a", { href: href, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, 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)("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, as: 'span', role: 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, 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 }))] }) }));
 }

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

@@ -10,28 +10,24 @@
 }
 
 .root{
+  width:100%;
+  min-width:0;
+}
+.root:hover .closeButton, .root:focus-visible .closeButton, .root:has(*:focus-visible) .closeButton{
+  visibility:visible;
+}
+
+.contentRow{
   position:relative;
   display:flex;
-  gap:var(--sn-primitive-dimension-4, 4px);
+  gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
   align-items:center;
   box-sizing:border-box;
   width:100%;
   min-width:0;
-  min-height:var(--sn-primitive-dimension-48, 48px);
+  min-height:var(--sn-primitive-dimension-40, 40px);
   padding:0 var(--sn-primitive-dimension-12, 12px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  font:inherit;
-  color:inherit;
-  text-align:left;
-  text-decoration:none;
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
-}
-.root:hover .closeButton, .root:focus-visible .closeButton, .root:focus-within .closeButton{
-  visibility:visible;
-}
-.root:focus-visible{
-  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
-  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  border-radius:inherit;
 }
 
 .titleWrapper{

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

@@ -33,11 +33,6 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
     });
     const isSearching = Boolean(searchValue);
     const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
-    (0, react_1.useEffect)(() => {
-        if (!segments?.some(segment => segment.id === segmentId) && defaultSegmentId) {
-            setSegmentId(defaultSegmentId);
-        }
-    }, [defaultSegmentId, segmentId, setSegmentId, segments]);
     const handleLinkClick = (0, react_1.useCallback)((service, e) => {
         if (service.disabled) {
             e?.preventDefault();

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

@@ -15,7 +15,7 @@ function SortableGroupCards({ groupId, items, showDescription, isMobile, enableS
                 return null;
             }
             const key = String(groupId) + service.id;
-            if ((0, innerLink_1.hasNestedItems)(service)) {
+            if ((0, innerLink_1.isSubCategoryCard)(service)) {
                 return ((0, jsx_runtime_1.jsx)(SubCategory_1.SubCategory, { groupId: groupId, service: service, showDescription: showDescription, isMobile: isMobile, dragDisabled: !enableServiceDrag, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled, onServiceClick: onServiceClick }, key));
             }
             return ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: !enableServiceDrag }, key));

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

@@ -13,18 +13,32 @@ const constants_1 = require("../../../../constants");
 const styles_module_scss_1 = __importDefault(require('../../styles.module.css'));
 const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
 const SubCategoryTitle_1 = require("./SubCategoryTitle");
+const NOOP = () => { };
 function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, groupFavoritesEnabled, }) {
     const 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]);
-    const isExpandableEnabled = service.expandableEnabled ?? false;
+    const hasItems = nestedItems.length > 0;
+    const viewMode = service.viewMode ?? 'expanded';
+    const isExpandableEnabled = hasItems && viewMode === 'expandable';
     // Раскрытие подкатегории — локальное uncontrolled состояние: наружу его пока не выводим.
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(subcategoryId);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(hasItems ? subcategoryId : undefined);
     const handleExpandedChange = (0, react_1.useCallback)(() => {
         if (isExpandableEnabled) {
             setIsExpanded(isExpanded ? undefined : subcategoryId);
         }
     }, [isExpanded, subcategoryId, isExpandableEnabled]);
+    // 'group-title-only' — только заголовок подкатегории, без раскрываемого тела и кнопки
+    // переключения: карточка ведёт себя как обычная ссылка (см. isSubCategoryCard в utils/innerLink).
+    if (viewMode === 'group-title-only') {
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.subcategory, "data-title-only": true, "data-test-id": `${constants_1.TEST_IDS.subcategory}-${service.id}`, children: (0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: { value: true, onClick: NOOP }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }) }));
+    }
+    if (viewMode === 'expanded') {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": `${constants_1.TEST_IDS.subcategory}-${service.id}`, children: [(0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: {
+                        value: Boolean(isExpanded),
+                        onClick: handleExpandedChange,
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": 'expanded', "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) })] }));
+    }
     return ((0, jsx_runtime_1.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,

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

@@ -9,12 +9,18 @@
 .subcategory{
   min-width:0;
 }
-.subcategory:has([data-subcategory-body]){
+.subcategory:has([data-subcategory-body]), .subcategory[data-title-only]{
   grid-column:1/-1;
   padding:0 var(--sn-primitive-dimension-4, 4px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
   background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
 }
+.subcategory[data-title-only]{
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+.subcategory:has([data-subcategory-body=expanded]){
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px) 0;
+}
 
 .subcategoryAccordion{
   min-width:0;

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

@@ -120,6 +120,9 @@
 .groupBody[data-subcategory-body]{
   padding-bottom:var(--sn-primitive-dimension-4, 4px);
 }
+.groupBody[data-subcategory-body=expanded]{
+  padding-top:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingVertical, var(--sn-primitive-dimension-4, 4px));
+}
 
 .decoration{
   --highlight-border-width:1px;

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

@@ -5,7 +5,7 @@
   align-items:center;
   box-sizing:border-box;
   width:100%;
-  min-height:0;
+  min-height:var(--sn-primitive-dimension-88, 88px);
   padding:var(--sn-primitive-dimension-8, 8px) 0 0;
   border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
   background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
@@ -32,7 +32,7 @@
   position:relative;
   flex:1 1 auto;
   width:100%;
-  min-height:0;
+  min-height:var(--sn-primitive-dimension-44, 44px);
 }
 .listScroll[data-insert-new] [data-favorite]{
   fill: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))));

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

@@ -51,8 +51,5 @@ function DraggableServiceCard({ groupId, service, favorite, dragDisabled, ...pro
         disabled,
     });
     const { tabIndex, ...restAttributes } = attributes ?? {};
-    if (disabled) {
-        return (0, jsx_runtime_1.jsx)(ServiceCard, { service: service, favorite: favorite, ...props, tabIndex: tabIndex });
-    }
     return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, className: styles_module_scss_1.default.draggableCard, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Static, ...listeners, ...restAttributes, children: (0, jsx_runtime_1.jsx)(ServiceCard, { service: service, favorite: favorite, ...props, tabIndex: tabIndex }) }));
 }

package/dist/cjs/components/MainMenu/types.d.ts

@@ -4,6 +4,7 @@ import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefine
 import { JSXElementConstructor, MouseEvent, ReactNode } from 'react';
 import { ContentProps } from './helperComponents/Content';
 import { FavoritesSegment } from './helperComponents/Favorites/constants';
+export type InnerLinkViewMode = 'group-title-only' | 'flat-link' | 'expanded' | 'expandable';
 /**
  * Карточка сервиса или ссылки внутри {@link LinksGroup}.
  *
@@ -36,15 +37,25 @@ export type InnerLink = {
     badge?: CardServiceLightProps['promoTag'];
     /** Разрешено ли добавление карточки в избранное. default=true - разрешено */
     favoritesEnabled?: boolean;
-    /** Разрешено ли раскрытие карточки. default=false - Запрещено */
-    expandableEnabled?: boolean;
+    /**
+     * Режим отображения карточки. default='expandable'.
+     *
+     * - `'expandable'` — подкатегория при наличии реальных {@link items}: заголовок
+     *   {@link TitleClickable} с шевроном и сетка вложенных сервисов (раскрытие/схлопывание —
+     *   см. {@link expandableEnabled}). Без `items` — обычная карточка сервиса.
+     * - `'group-title-only'` — заголовок подкатегории ({@link TitleClickable} с шевроном) без
+     *   раскрываемого тела, даже если `items` заданы: карточка ведёт себя как обычная ссылка.
+     *   Полезно для группы, чьи вложенные сервисы показываются на отдельной странице.
+     * - `'flat-link'` — всегда обычная карточка сервиса, даже если `items` заданы.
+     */
+    viewMode?: InnerLinkViewMode;
     /**
      * Вложенные сервисы подкатегории.
      *
      * При наличии карточка раскрывается аккордеоном: в свёрнутом виде — обычная карточка
      * с кнопкой раскрытия, в развёрнутом — заголовок {@link TitleClickable} и сетка вложенных сервисов.
      */
-    items?: InnerLink[];
+    items?: Omit<InnerLink, 'items' | 'viewMode' | 'expandableEnabled'>[];
     /**
      * Синонимы для fuzzy-поиска.
      */

package/dist/cjs/components/MainMenu/utils/innerLink.d.ts

@@ -1,5 +1,15 @@
 import { InnerLink, LinksGroup } from '../types';
 export declare function hasNestedItems(item: InnerLink): boolean;
+/**
+ * Рендерится ли карточка как подкатегория (заголовок {@link TitleClickable} + вложенная сетка).
+ *
+ * Решение зависит от `viewMode` (не указан — считается `'expandable'`):
+ * - `'flat-link'` — никогда, карточка всегда обычная ссылка, даже если `items` заданы.
+ * - `'group-title-only'` — всегда, даже без `items`: только заголовок, без раскрываемого тела
+ *   и кнопки переключения — карточка ведёт себя как обычная ссылка.
+ * - `'expandable'` — только при наличии реальных вложенных сервисов.
+ */
+export declare function isSubCategoryCard(item: InnerLink): boolean;
 export declare function flatInnerLinks(items?: InnerLink[]): InnerLink[];
 export declare function getLinksGroupVisibleItemsCount(group: LinksGroup): number;
 export declare function getSubCategoryId(groupId: string, serviceId: string): string;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hasNestedItems = hasNestedItems;
+exports.isSubCategoryCard = isSubCategoryCard;
 exports.flatInnerLinks = flatInnerLinks;
 exports.getLinksGroupVisibleItemsCount = getLinksGroupVisibleItemsCount;
 exports.getSubCategoryId = getSubCategoryId;
@@ -9,6 +10,25 @@ exports.findNestedInnerLinkParent = findNestedInnerLinkParent;
 function hasNestedItems(item) {
     return Boolean(item.items?.some(child => !child.hidden));
 }
+/**
+ * Рендерится ли карточка как подкатегория (заголовок {@link TitleClickable} + вложенная сетка).
+ *
+ * Решение зависит от `viewMode` (не указан — считается `'expandable'`):
+ * - `'flat-link'` — никогда, карточка всегда обычная ссылка, даже если `items` заданы.
+ * - `'group-title-only'` — всегда, даже без `items`: только заголовок, без раскрываемого тела
+ *   и кнопки переключения — карточка ведёт себя как обычная ссылка.
+ * - `'expandable'` — только при наличии реальных вложенных сервисов.
+ */
+function isSubCategoryCard(item) {
+    const viewMode = item.viewMode ?? 'expanded';
+    if (viewMode === 'flat-link') {
+        return false;
+    }
+    if (viewMode === 'group-title-only') {
+        return true;
+    }
+    return hasNestedItems(item);
+}
 function flatInnerLinks(items = []) {
     return items.flatMap(item => {
         if (item.hidden) {

package/dist/cjs/style.css

@@ -103,28 +103,24 @@
 }
 
 .root{
+  width:100%;
+  min-width:0;
+}
+.root:hover .closeButton, .root:focus-visible .closeButton, .root:has(*:focus-visible) .closeButton{
+  visibility:visible;
+}
+
+.contentRow{
   position:relative;
   display:flex;
-  gap:var(--sn-primitive-dimension-4, 4px);
+  gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
   align-items:center;
   box-sizing:border-box;
   width:100%;
   min-width:0;
-  min-height:var(--sn-primitive-dimension-48, 48px);
+  min-height:var(--sn-primitive-dimension-40, 40px);
   padding:0 var(--sn-primitive-dimension-12, 12px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  font:inherit;
-  color:inherit;
-  text-align:left;
-  text-decoration:none;
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
-}
-.root:hover .closeButton, .root:focus-visible .closeButton, .root:focus-within .closeButton{
-  visibility:visible;
-}
-.root:focus-visible{
-  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
-  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  border-radius:inherit;
 }
 
 .titleWrapper{
@@ -207,12 +203,18 @@
 .subcategory{
   min-width:0;
 }
-.subcategory:has([data-subcategory-body]){
+.subcategory:has([data-subcategory-body]), .subcategory[data-title-only]{
   grid-column:1/-1;
   padding:0 var(--sn-primitive-dimension-4, 4px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
   background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
 }
+.subcategory[data-title-only]{
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+.subcategory:has([data-subcategory-body=expanded]){
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px) 0;
+}
 
 .subcategoryAccordion{
   min-width:0;
@@ -387,6 +389,9 @@
 .groupBody[data-subcategory-body]{
   padding-bottom:var(--sn-primitive-dimension-4, 4px);
 }
+.groupBody[data-subcategory-body=expanded]{
+  padding-top:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingVertical, var(--sn-primitive-dimension-4, 4px));
+}
 
 .decoration{
   --highlight-border-width:1px;
@@ -540,7 +545,7 @@
   align-items:center;
   box-sizing:border-box;
   width:100%;
-  min-height:0;
+  min-height:var(--sn-primitive-dimension-88, 88px);
   padding:var(--sn-primitive-dimension-8, 8px) 0 0;
   border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
   background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
@@ -567,7 +572,7 @@
   position:relative;
   flex:1 1 auto;
   width:100%;
-  min-height:0;
+  min-height:var(--sn-primitive-dimension-44, 44px);
 }
 .listScroll[data-insert-new] [data-favorite]{
   fill: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))));

package/dist/esm/components/MainMenu/helperComponents/Banners/MenuBanner.d.ts

@@ -13,4 +13,4 @@ export type MenuBannerProps = WithSupportProps<{
     /** CSS-класс корневого элемента */
     className?: string;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'children'>>;
-export declare function MenuBanner({ title, promoTag, afterTitle, onClose, className, href, target, 'data-test-id': dataTestId, ...rest }: MenuBannerProps): ReactElement;
+export declare function MenuBanner({ title, promoTag, afterTitle, onClose, className, href, 'data-test-id': dataTestId, ...rest }: MenuBannerProps): ReactElement;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@cloud-ru/ds-button';
+import { Card } from '@cloud-ru/ds-card';
 import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
 import { PromoTag, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
 import { useThemeClassnames } from '@cloud-ru/ds-theme';
@@ -9,7 +10,7 @@ import { useCallback } from 'react';
 import { headerLocale } from '../../../../locale/index.js';
 import { MENU_BANNER_TEST_IDS } from './constants.js';
 import styles from './styles.module.css';
-export function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#', target, 'data-test-id': dataTestId, ...rest }) {
+export function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#', 'data-test-id': dataTestId, ...rest }) {
     const { t } = headerLocale.useTranslations();
     const compactThemeClassname = useThemeClassnames({ density: 'compact' });
     const handleClose = useCallback(e => {
@@ -17,5 +18,5 @@ export function MenuBanner({ title, promoTag, afterTitle, onClose, className, hr
         e.stopPropagation();
         onClose?.(e);
     }, [onClose]);
-    return (_jsxs("a", { href: href, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: cn(styles.root, className), "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, as: 'span', role: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: cn(styles.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }));
+    return (_jsx(Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: cn(styles.root, className), "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: _jsxs("div", { className: styles.contentRow, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, roleAppearance: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: cn(styles.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }) }));
 }

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

@@ -10,28 +10,24 @@
 }
 
 .root{
+  width:100%;
+  min-width:0;
+}
+.root:hover .closeButton, .root:focus-visible .closeButton, .root:has(*:focus-visible) .closeButton{
+  visibility:visible;
+}
+
+.contentRow{
   position:relative;
   display:flex;
-  gap:var(--sn-primitive-dimension-4, 4px);
+  gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
   align-items:center;
   box-sizing:border-box;
   width:100%;
   min-width:0;
-  min-height:var(--sn-primitive-dimension-48, 48px);
+  min-height:var(--sn-primitive-dimension-40, 40px);
   padding:0 var(--sn-primitive-dimension-12, 12px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  font:inherit;
-  color:inherit;
-  text-align:left;
-  text-decoration:none;
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
-}
-.root:hover .closeButton, .root:focus-visible .closeButton, .root:focus-within .closeButton{
-  visibility:visible;
-}
-.root:focus-visible{
-  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
-  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  border-radius:inherit;
 }
 
 .titleWrapper{

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

@@ -5,7 +5,7 @@ import { CrossSVG, SearchSVG } from '@cloud-ru/ds-icons/interface/system';
 import { InfoBlock } from '@cloud-ru/ds-info-block';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
-import { useCallback, useDeferredValue, useEffect, useMemo } from 'react';
+import { useCallback, useDeferredValue, useMemo } from 'react';
 import { headerLocale } from '../../../../locale/index.js';
 import { shouldBeOpenedInNewTab } from '../../../../utils/shouldBeOpenedInNewTab.js';
 import { getLinksGroupVisibleItemsCount, resolveGroupBlockColor } from '../../utils/index.js';
@@ -27,11 +27,6 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
     });
     const isSearching = Boolean(searchValue);
     const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
-    useEffect(() => {
-        if (!segments?.some(segment => segment.id === segmentId) && defaultSegmentId) {
-            setSegmentId(defaultSegmentId);
-        }
-    }, [defaultSegmentId, segmentId, setSegmentId, segments]);
     const handleLinkClick = useCallback((service, e) => {
         if (service.disabled) {
             e?.preventDefault();

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { hasNestedItems } from '../../../../../utils/innerLink.js';
+import { isSubCategoryCard } from '../../../../../utils/innerLink.js';
 import { DraggableServiceCard } from '../../../../ServiceCard/index.js';
 import styles from '../styles.module.css';
 import { SubCategory } from './SubCategory/index.js';
@@ -9,7 +9,7 @@ export function SortableGroupCards({ groupId, items, showDescription, isMobile,
                 return null;
             }
             const key = String(groupId) + service.id;
-            if (hasNestedItems(service)) {
+            if (isSubCategoryCard(service)) {
                 return (_jsx(SubCategory, { groupId: groupId, service: service, showDescription: showDescription, isMobile: isMobile, dragDisabled: !enableServiceDrag, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled, onServiceClick: onServiceClick }, key));
             }
             return (_jsx(DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: !enableServiceDrag }, key));

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion } from '@cloud-ru/ds-accordion';
 import { useCallback, useMemo, useState } from 'react';
 import { getNestedServiceGroupId, getSubCategoryId } from '../../../../../../utils/innerLink.js';
@@ -7,18 +7,32 @@ import { TEST_IDS } from '../../../../constants.js';
 import baseGroupStyles from '../../styles.module.css';
 import styles from './styles.module.css';
 import { SubCategoryTitle } from './SubCategoryTitle.js';
+const NOOP = () => { };
 export function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, groupFavoritesEnabled, }) {
     const subcategoryId = getSubCategoryId(groupId, service.id);
     const nestedGroupId = getNestedServiceGroupId(groupId, service.id);
     const nestedItems = useMemo(() => service.items?.filter(item => !item.hidden) ?? [], [service.items]);
-    const isExpandableEnabled = service.expandableEnabled ?? false;
+    const hasItems = nestedItems.length > 0;
+    const viewMode = service.viewMode ?? 'expanded';
+    const isExpandableEnabled = hasItems && viewMode === 'expandable';
     // Раскрытие подкатегории — локальное uncontrolled состояние: наружу его пока не выводим.
-    const [isExpanded, setIsExpanded] = useState(subcategoryId);
+    const [isExpanded, setIsExpanded] = useState(hasItems ? subcategoryId : undefined);
     const handleExpandedChange = useCallback(() => {
         if (isExpandableEnabled) {
             setIsExpanded(isExpanded ? undefined : subcategoryId);
         }
     }, [isExpanded, subcategoryId, isExpandableEnabled]);
+    // 'group-title-only' — только заголовок подкатегории, без раскрываемого тела и кнопки
+    // переключения: карточка ведёт себя как обычная ссылка (см. isSubCategoryCard в utils/innerLink).
+    if (viewMode === 'group-title-only') {
+        return (_jsx("div", { className: styles.subcategory, "data-title-only": true, "data-test-id": `${TEST_IDS.subcategory}-${service.id}`, children: _jsx(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 (_jsxs("div", { className: styles.subcategory, "data-test-id": `${TEST_IDS.subcategory}-${service.id}`, children: [_jsx(SubCategoryTitle, { groupId: groupId, service: service, expandable: {
+                        value: Boolean(isExpanded),
+                        onClick: handleExpandedChange,
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), _jsx("div", { className: baseGroupStyles.groupBody, "data-subcategory-body": 'expanded', "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => (_jsx(DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) })] }));
+    }
     return (_jsx("div", { className: styles.subcategory, "data-test-id": `${TEST_IDS.subcategory}-${service.id}`, children: _jsx(Accordion, { selectionMode: 'single', expanded: isExpanded, onExpandedChange: handleExpandedChange, children: _jsx(Accordion.CollapseBlockTertiary, { id: subcategoryId, showChevron: false, className: styles.subcategoryAccordion, afterTitle: _jsx(SubCategoryTitle, { groupId: groupId, service: service, expandable: {
                         value: Boolean(isExpanded),
                         onClick: handleExpandedChange,

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

@@ -9,12 +9,18 @@
 .subcategory{
   min-width:0;
 }
-.subcategory:has([data-subcategory-body]){
+.subcategory:has([data-subcategory-body]), .subcategory[data-title-only]{
   grid-column:1/-1;
   padding:0 var(--sn-primitive-dimension-4, 4px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
   background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
 }
+.subcategory[data-title-only]{
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+.subcategory:has([data-subcategory-body=expanded]){
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px) 0;
+}
 
 .subcategoryAccordion{
   min-width:0;

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

@@ -120,6 +120,9 @@
 .groupBody[data-subcategory-body]{
   padding-bottom:var(--sn-primitive-dimension-4, 4px);
 }
+.groupBody[data-subcategory-body=expanded]{
+  padding-top:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingVertical, var(--sn-primitive-dimension-4, 4px));
+}
 
 .decoration{
   --highlight-border-width:1px;

package/dist/esm/components/MainMenu/helperComponents/Favorites/styles.module.css

@@ -5,7 +5,7 @@
   align-items:center;
   box-sizing:border-box;
   width:100%;
-  min-height:0;
+  min-height:var(--sn-primitive-dimension-88, 88px);
   padding:var(--sn-primitive-dimension-8, 8px) 0 0;
   border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
   background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
@@ -32,7 +32,7 @@
   position:relative;
   flex:1 1 auto;
   width:100%;
-  min-height:0;
+  min-height:var(--sn-primitive-dimension-44, 44px);
 }
 .listScroll[data-insert-new] [data-favorite]{
   fill: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))));