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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-header",
-  "version": "1.3.9",
+  "version": "1.3.10-preview-1030ded1.0",
   "description": "Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.",
   "repository": {
     "type": "git",
@@ -45,32 +45,33 @@
     "@dnd-kit/utilities": "^3.2.2",
     "classnames": "^2.5.1",
     "fuse.js": "^7.1.0",
-    "@cloud-ru/ds-accordion": "^1.0.6",
-    "@cloud-ru/ds-adaptive": "^1.0.1",
-    "@cloud-ru/ds-avatar": "^1.0.3",
-    "@cloud-ru/ds-breadcrumbs": "^1.0.15",
-    "@cloud-ru/ds-button": "^1.0.2",
-    "@cloud-ru/ds-drag-and-drop": "^1.1.1",
-    "@cloud-ru/ds-drawer": "^1.2.0",
-    "@cloud-ru/ds-divider": "^1.0.1",
-    "@cloud-ru/ds-info-block": "^1.0.1",
-    "@cloud-ru/ds-icons": "^1.1.0",
-    "@cloud-ru/ds-list": "^2.1.4",
-    "@cloud-ru/ds-locale": "^1.0.0",
-    "@cloud-ru/ds-modal": "^1.1.1",
-    "@cloud-ru/ds-portal-context": "^1.0.1",
-    "@cloud-ru/ds-promo-tag": "^1.0.1",
-    "@cloud-ru/ds-search": "^1.0.7",
-    "@cloud-ru/ds-scroll": "^1.0.2",
-    "@cloud-ru/ds-segment-control": "^1.0.5",
-    "@cloud-ru/ds-skeleton": "^1.0.1",
-    "@cloud-ru/ds-theme": "^1.1.0",
-    "@cloud-ru/ds-tooltip": "^1.0.4",
-    "@cloud-ru/ds-typography": "^1.0.0",
-    "@cloud-ru/ds-uikit-product-card-predefined": "^3.0.9",
-    "@cloud-ru/ds-uikit-product-switch-row": "^1.0.6",
-    "@cloud-ru/ds-uikit-product-title-clickable": "^1.0.8",
-    "@cloud-ru/ds-utils": "^1.1.0"
+    "@cloud-ru/ds-accordion": "1.0.6",
+    "@cloud-ru/ds-adaptive": "1.0.1",
+    "@cloud-ru/ds-avatar": "1.0.3",
+    "@cloud-ru/ds-card": "1.0.12",
+    "@cloud-ru/ds-button": "1.0.2",
+    "@cloud-ru/ds-breadcrumbs": "1.0.15",
+    "@cloud-ru/ds-divider": "1.0.1",
+    "@cloud-ru/ds-drag-and-drop": "1.1.1",
+    "@cloud-ru/ds-drawer": "1.2.0",
+    "@cloud-ru/ds-icons": "1.1.0",
+    "@cloud-ru/ds-list": "2.1.4",
+    "@cloud-ru/ds-info-block": "1.0.1",
+    "@cloud-ru/ds-locale": "1.0.0",
+    "@cloud-ru/ds-modal": "1.1.1",
+    "@cloud-ru/ds-portal-context": "1.0.1",
+    "@cloud-ru/ds-promo-tag": "1.0.1",
+    "@cloud-ru/ds-scroll": "1.0.2",
+    "@cloud-ru/ds-search": "1.0.7",
+    "@cloud-ru/ds-segment-control": "1.0.5",
+    "@cloud-ru/ds-skeleton": "1.0.1",
+    "@cloud-ru/ds-theme": "1.1.0",
+    "@cloud-ru/ds-tooltip": "1.0.4",
+    "@cloud-ru/ds-typography": "1.0.0",
+    "@cloud-ru/ds-uikit-product-card-predefined": "3.0.10-preview-1030ded1.0",
+    "@cloud-ru/ds-utils": "1.1.0",
+    "@cloud-ru/ds-uikit-product-title-clickable": "1.0.8",
+    "@cloud-ru/ds-uikit-product-switch-row": "1.0.6"
   },
   "publishConfig": {
     "access": "public"

package/src/components/MainMenu/helperComponents/Banners/MenuBanner.tsx

@@ -1,4 +1,5 @@
 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, PromoTagProps, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
 import { useThemeClassnames } from '@cloud-ru/ds-theme';
@@ -33,7 +34,6 @@ export function MenuBanner({
   onClose,
   className,
   href = '#',
-  target,
   'data-test-id': dataTestId,
   ...rest
 }: MenuBannerProps): ReactElement {
@@ -50,54 +50,56 @@ export function MenuBanner({
   );
 
   return (
-    <a
+    <Card
+      as='a'
       href={href}
-      target={target}
-      rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+      radius='l'
+      view='simple'
       className={cn(styles.root, className)}
       data-test-id={dataTestId ?? MENU_BANNER_TEST_IDS.root}
       {...rest}
     >
-      <span className={styles.titleWrapper}>
-        <Typography
-          as='span'
-          variant='body'
-          size='m'
-          className={styles.title}
-          data-test-id={MENU_BANNER_TEST_IDS.title}
-        >
-          {title}
-        </Typography>
-
-        {promoTag && (
-          <PromoTag
-            {...promoTag}
+      <div className={styles.contentRow}>
+        <span className={styles.titleWrapper}>
+          <Typography
             as='span'
-            role={ROLE_APPEARANCE.Decor}
-            size={SIZE.Xs}
-            data-test-id={MENU_BANNER_TEST_IDS.promoTag}
-          />
-        )}
-      </span>
+            variant='body'
+            size='m'
+            className={styles.title}
+            data-test-id={MENU_BANNER_TEST_IDS.title}
+          >
+            {title}
+          </Typography>
 
-      {afterTitle && (
-        <div className={styles.afterTitle} data-test-id={MENU_BANNER_TEST_IDS.afterTitle}>
-          {afterTitle}
-        </div>
-      )}
+          {promoTag && (
+            <PromoTag
+              {...promoTag}
+              roleAppearance={ROLE_APPEARANCE.Decor}
+              size={SIZE.Xs}
+              data-test-id={MENU_BANNER_TEST_IDS.promoTag}
+            />
+          )}
+        </span>
 
-      {onClose && (
-        <Button
-          className={cn(styles.closeButton, compactThemeClassname)}
-          view='elevated'
-          appearance='neutral'
-          size='s'
-          icon={<CrossSVG size={16} />}
-          onClick={handleClose}
-          aria-label={t('close')}
-          data-test-id={MENU_BANNER_TEST_IDS.close}
-        />
-      )}
-    </a>
+        {afterTitle && (
+          <div className={styles.afterTitle} data-test-id={MENU_BANNER_TEST_IDS.afterTitle}>
+            {afterTitle}
+          </div>
+        )}
+
+        {onClose && (
+          <Button
+            className={cn(styles.closeButton, compactThemeClassname)}
+            view='elevated'
+            appearance='neutral'
+            size='s'
+            icon={<CrossSVG size={16} />}
+            onClick={handleClose}
+            aria-label={t('close')}
+            data-test-id={MENU_BANNER_TEST_IDS.close}
+          />
+        )}
+      </div>
+    </Card>
   );
 }

package/src/components/MainMenu/helperComponents/Banners/styles.module.scss

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

package/src/components/MainMenu/helperComponents/Content/Content.tsx

@@ -4,7 +4,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 { MouseEvent, ReactNode, useCallback, useDeferredValue, useEffect, useMemo } from 'react';
+import { MouseEvent, ReactNode, useCallback, useDeferredValue, useMemo } from 'react';
 
 import { headerLocale } from '../../../../locale';
 import { shouldBeOpenedInNewTab } from '../../../../utils/shouldBeOpenedInNewTab';
@@ -133,12 +133,6 @@ export function Content({
   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: InnerLink, e?: MouseEvent<HTMLElement>) => {
       if (service.disabled) {

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.tsx

@@ -1,5 +1,5 @@
 import { InnerLink } from '../../../../../types';
-import { hasNestedItems } from '../../../../../utils/innerLink';
+import { isSubCategoryCard } from '../../../../../utils/innerLink';
 import { DraggableServiceCard, ServiceCardProps } from '../../../../ServiceCard';
 import styles from '../styles.module.scss';
 import { SubCategory } from './SubCategory';
@@ -33,7 +33,7 @@ export function SortableGroupCards({
 
         const key = String(groupId) + service.id;
 
-        if (hasNestedItems(service)) {
+        if (isSubCategoryCard(service)) {
           return (
             <SubCategory
               key={key}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.tsx

@@ -8,6 +8,8 @@ import baseGroupStyles from '../../styles.module.scss';
 import styles from './styles.module.scss';
 import { SubCategoryTitle } from './SubCategoryTitle';
 
+const NOOP = () => {};
+
 export type SubCategoryProps = Pick<
   ServiceCardProps,
   'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile'
@@ -30,11 +32,14 @@ export function SubCategory({
   const subcategoryId = getSubCategoryId(groupId, service.id);
   const nestedGroupId = getNestedServiceGroupId(groupId, service.id);
   const nestedItems = useMemo(() => service.items?.filter(item => !item.hidden) ?? [], [service.items]);
+  const hasItems = nestedItems.length > 0;
+
+  const viewMode = service.viewMode ?? 'expanded';
 
-  const isExpandableEnabled = service.expandableEnabled ?? false;
+  const isExpandableEnabled = hasItems && viewMode === 'expandable';
 
   // Раскрытие подкатегории — локальное uncontrolled состояние: наружу его пока не выводим.
-  const [isExpanded, setIsExpanded] = useState<string | undefined>(subcategoryId);
+  const [isExpanded, setIsExpanded] = useState<string | undefined>(hasItems ? subcategoryId : undefined);
 
   const handleExpandedChange = useCallback(() => {
     if (isExpandableEnabled) {
@@ -42,6 +47,60 @@ export function SubCategory({
     }
   }, [isExpanded, subcategoryId, isExpandableEnabled]);
 
+  // 'group-title-only' — только заголовок подкатегории, без раскрываемого тела и кнопки
+  // переключения: карточка ведёт себя как обычная ссылка (см. isSubCategoryCard в utils/innerLink).
+  if (viewMode === 'group-title-only') {
+    return (
+      <div className={styles.subcategory} data-title-only data-test-id={`${TEST_IDS.subcategory}-${service.id}`}>
+        <SubCategoryTitle
+          groupId={groupId}
+          service={service}
+          expandable={{ value: true, onClick: NOOP }}
+          showDescription={showDescription}
+          isMobile={isMobile}
+          dragDisabled={dragDisabled}
+          favorite={groupFavoritesEnabled ? favorite : undefined}
+          onServiceClick={onServiceClick}
+        />
+      </div>
+    );
+  }
+
+  if (viewMode === 'expanded') {
+    return (
+      <div className={styles.subcategory} data-test-id={`${TEST_IDS.subcategory}-${service.id}`}>
+        <SubCategoryTitle
+          groupId={groupId}
+          service={service}
+          expandable={{
+            value: Boolean(isExpanded),
+            onClick: handleExpandedChange,
+          }}
+          showDescription={showDescription}
+          isMobile={isMobile}
+          dragDisabled={dragDisabled}
+          favorite={groupFavoritesEnabled ? favorite : undefined}
+          onServiceClick={onServiceClick}
+        />
+
+        <div className={baseGroupStyles.groupBody} data-subcategory-body='expanded' data-mobile={isMobile || undefined}>
+          {nestedItems.map(nestedService => (
+            <DraggableServiceCard
+              key={nestedGroupId + nestedService.id}
+              groupId={nestedGroupId}
+              service={nestedService}
+              favorite={favorite}
+              isMobile={isMobile}
+              onServiceClick={onServiceClick}
+              showDescription={showDescription}
+              dragDisabled={dragDisabled}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.subcategory} data-test-id={`${TEST_IDS.subcategory}-${service.id}`}>
       <Accordion selectionMode='single' expanded={isExpanded} onExpandedChange={handleExpandedChange}>

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/styles.module.scss

@@ -13,12 +13,21 @@
 .subcategory {
   min-width: 0;
 
-  &:has([data-subcategory-body]) {
+  &:has([data-subcategory-body]),
+  &[data-title-only] {
     grid-column: 1 / -1;
     padding: 0 base.$sn-primitive-dimension-4;
     border-radius: base.$sn-density-radius-2xs;
     background-color: base.$sn-theme-color-neutral-decorTransparent;
   }
+
+  &[data-title-only] {
+    padding: base.$sn-primitive-dimension-4;
+  }
+
+  &:has([data-subcategory-body='expanded']) {
+    padding: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-4 0;
+  }
 }
 
 .subcategoryAccordion {

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.scss

@@ -1,5 +1,6 @@
 @use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
 @use '@cloud-ru/ds-figma-variables/build/scss/components/button.module' as button;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/accordion.module' as accordion;
 
 // Радиус контейнера группы: от него считается радиус подложки внутри рамки выделения.
 $group-border-radius: base.$sn-density-radius-2xs;
@@ -173,6 +174,10 @@ $map-block-color-decor: (
   &[data-subcategory-body] {
     padding-bottom: base.$sn-primitive-dimension-4;
   }
+
+  &[data-subcategory-body='expanded'] {
+    padding-top: accordion.$sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingVertical;
+  }
 }
 
 .decoration {

package/src/components/MainMenu/helperComponents/Favorites/styles.module.scss

@@ -9,7 +9,8 @@
 
   box-sizing: border-box;
   width: 100%;
-  min-height: 0;
+  // высота всего блока с одной карточкой
+  min-height: base.$sn-primitive-dimension-88;
   padding: base.$sn-primitive-dimension-8 0 0;
   border-radius: base.$sn-density-radius-2xs;
 
@@ -40,7 +41,7 @@
   position: relative;
   flex: 1 1 auto;
   width: 100%;
-  min-height: 0;
+  min-height: base.$sn-primitive-dimension-44;
 
   &[data-insert-new] {
     [data-favorite] {

package/src/components/MainMenu/helperComponents/ServiceCard/ServiceCard.tsx

@@ -94,10 +94,6 @@ export function DraggableServiceCard({
 
   const { tabIndex, ...restAttributes } = attributes ?? {};
 
-  if (disabled) {
-    return <ServiceCard service={service} favorite={favorite} {...props} tabIndex={tabIndex} />;
-  }
-
   return (
     <DragGhost
       innerRef={setNodeRef}

package/src/components/MainMenu/types.ts

@@ -6,6 +6,8 @@ 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}.
  *
@@ -38,15 +40,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/src/components/MainMenu/utils/innerLink.ts

@@ -4,6 +4,29 @@ export function hasNestedItems(item: InnerLink): boolean {
   return Boolean(item.items?.some(child => !child.hidden));
 }
 
+/**
+ * Рендерится ли карточка как подкатегория (заголовок {@link TitleClickable} + вложенная сетка).
+ *
+ * Решение зависит от `viewMode` (не указан — считается `'expandable'`):
+ * - `'flat-link'` — никогда, карточка всегда обычная ссылка, даже если `items` заданы.
+ * - `'group-title-only'` — всегда, даже без `items`: только заголовок, без раскрываемого тела
+ *   и кнопки переключения — карточка ведёт себя как обычная ссылка.
+ * - `'expandable'` — только при наличии реальных вложенных сервисов.
+ */
+export function isSubCategoryCard(item: InnerLink): boolean {
+  const viewMode = item.viewMode ?? 'expanded';
+
+  if (viewMode === 'flat-link') {
+    return false;
+  }
+
+  if (viewMode === 'group-title-only') {
+    return true;
+  }
+
+  return hasNestedItems(item);
+}
+
 export function flatInnerLinks(items: InnerLink[] = []): InnerLink[] {
   return items.flatMap(item => {
     if (item.hidden) {