@cloud-ru/ds-uikit-product-header 2.1.3 → 2.1.4-preview-0fb5d9fa.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-header",
-  "version": "2.1.3",
+  "version": "2.1.4-preview-0fb5d9fa.0",
   "description": "Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.",
   "repository": {
     "type": "git",
@@ -45,33 +45,33 @@
     "@dnd-kit/utilities": "^3.2.2",
     "classnames": "^2.5.1",
     "fuse.js": "^7.1.0",
-    "@cloud-ru/ds-accordion": "^1.2.1",
-    "@cloud-ru/ds-avatar": "^1.0.11",
-    "@cloud-ru/ds-adaptive": "^1.0.2",
-    "@cloud-ru/ds-button": "^1.0.4",
-    "@cloud-ru/ds-breadcrumbs": "^1.0.29",
-    "@cloud-ru/ds-card": "^1.0.22",
-    "@cloud-ru/ds-drag-and-drop": "^1.1.3",
-    "@cloud-ru/ds-divider": "^1.0.2",
-    "@cloud-ru/ds-drawer": "^2.0.0",
-    "@cloud-ru/ds-icons": "^1.5.0",
-    "@cloud-ru/ds-info-block": "^1.0.3",
-    "@cloud-ru/ds-list": "^2.3.2",
-    "@cloud-ru/ds-locale": "^1.0.0",
-    "@cloud-ru/ds-modal": "^2.0.0",
-    "@cloud-ru/ds-portal-context": "^1.0.2",
-    "@cloud-ru/ds-promo-tag": "^1.0.3",
-    "@cloud-ru/ds-scroll": "^1.0.5",
-    "@cloud-ru/ds-search": "^1.0.14",
-    "@cloud-ru/ds-skeleton": "^1.0.2",
-    "@cloud-ru/ds-segment-control": "^1.0.13",
-    "@cloud-ru/ds-theme": "^2.1.0",
-    "@cloud-ru/ds-tooltip": "^1.0.11",
-    "@cloud-ru/ds-typography": "^1.0.1",
-    "@cloud-ru/ds-uikit-product-switch-row": "^1.0.14",
-    "@cloud-ru/ds-uikit-product-title-clickable": "^1.0.16",
-    "@cloud-ru/ds-utils": "^1.2.0",
-    "@cloud-ru/ds-uikit-product-card-predefined": "^4.0.9"
+    "@cloud-ru/ds-accordion": "1.2.1",
+    "@cloud-ru/ds-adaptive": "1.0.2",
+    "@cloud-ru/ds-breadcrumbs": "1.0.29",
+    "@cloud-ru/ds-avatar": "1.0.11",
+    "@cloud-ru/ds-button": "1.0.4",
+    "@cloud-ru/ds-card": "1.0.22",
+    "@cloud-ru/ds-drag-and-drop": "1.1.3",
+    "@cloud-ru/ds-drawer": "2.0.1-preview-0fb5d9fa.0",
+    "@cloud-ru/ds-divider": "1.0.2",
+    "@cloud-ru/ds-icons": "1.5.0",
+    "@cloud-ru/ds-info-block": "1.0.3",
+    "@cloud-ru/ds-list": "2.3.2",
+    "@cloud-ru/ds-locale": "1.0.0",
+    "@cloud-ru/ds-modal": "2.0.0",
+    "@cloud-ru/ds-portal-context": "1.0.2",
+    "@cloud-ru/ds-promo-tag": "1.0.3",
+    "@cloud-ru/ds-search": "1.0.14",
+    "@cloud-ru/ds-segment-control": "1.0.13",
+    "@cloud-ru/ds-skeleton": "1.0.2",
+    "@cloud-ru/ds-theme": "2.1.0",
+    "@cloud-ru/ds-scroll": "1.0.5",
+    "@cloud-ru/ds-uikit-product-card-predefined": "4.0.9",
+    "@cloud-ru/ds-uikit-product-switch-row": "1.0.14",
+    "@cloud-ru/ds-tooltip": "1.0.11",
+    "@cloud-ru/ds-typography": "1.0.1",
+    "@cloud-ru/ds-utils": "1.2.0",
+    "@cloud-ru/ds-uikit-product-title-clickable": "1.0.16"
   },
   "publishConfig": {
     "access": "public"

package/src/components/MainMenu/MainMenu.tsx

@@ -25,6 +25,7 @@ export function MainMenu({
   onActiveSegmentChange,
   onSegmentOrderChange,
   onSegmentExpandedChange,
+  onToggleAllGroupsExpanded,
   onSegmentServiceClick,
   favorite,
   search,
@@ -74,6 +75,7 @@ export function MainMenu({
         onSegmentOrderChange={onSegmentOrderChange}
         onSegmentExpandedChange={onSegmentExpandedChange}
         onSegmentServiceClick={onSegmentServiceClick}
+        onToggleAllGroupsExpanded={onToggleAllGroupsExpanded}
         platformGroups={platformGroups}
         search={search}
         logo={logo}

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

@@ -72,6 +72,11 @@ export type ContentProps = {
    */
   onSegmentExpandedChange?(segmentId: string, expandedGroupIds: string[]): void;
 
+  /**
+   * Колбэк смены всех групп раскрытых.
+   */
+  onToggleAllGroupsExpanded?(action: 'collapseAllGroups' | 'expandAllGroups'): void;
+
   /**
    * Колбэк клика по карточке сервиса в сегменте.
    */
@@ -120,6 +125,7 @@ export function Content({
   onSegmentOrderChange,
   onSegmentExpandedChange,
   onSegmentServiceClick,
+  onToggleAllGroupsExpanded,
   className,
   footer,
   favorite,
@@ -210,6 +216,8 @@ export function Content({
   const allGroupsExpanded = visibleGroups.length > 0 && visibleGroupIds.every(id => expandedIdsSet.has(id));
 
   const handleToggleAllGroupsExpanded = useCallback(() => {
+    onToggleAllGroupsExpanded?.(allGroupsExpanded ? 'collapseAllGroups' : 'expandAllGroups');
+
     if (allGroupsExpanded) {
       const visibleIdsSet = new Set(visibleGroupIds);
 
@@ -218,7 +226,7 @@ export function Content({
     }
 
     onExpandedChange([...new Set([...expandedIds, ...visibleGroupIds])]);
-  }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds]);
+  }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds, onToggleAllGroupsExpanded]);
 
   const cardsContext = useMemo<CardsContextValue>(
     () => ({
@@ -316,7 +324,9 @@ export function Content({
                 loading={loading}
               />
 
-              {rightTop}
+              <div className={styles.rightTop} data-mobile={isMobile || undefined}>
+                {rightTop}
+              </div>
             </MountAnimation>
           </>
         )}

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

@@ -1,24 +1,14 @@
-import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { DragDropSVG } from '@cloud-ru/ds-icons/interface/system';
 import { stopEventPropagation } from '@cloud-ru/ds-utils';
 
 import { headerLocale } from '../../../../../../../locale';
 import styles from '../styles.module.scss';
 
-export type SortableGroupDragHandleProps = {
-  /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
-  attributes?: DraggableAttributes;
-  /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
-  listeners?: DraggableSyntheticListeners;
-};
-
-export function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps) {
+export function SortableGroupDragHandle() {
   const { t } = headerLocale.useTranslations();
 
   return (
     <button
-      {...attributes}
-      {...listeners}
       type='button'
       className={styles.dragHandle}
       aria-label={t('dragGroup')}

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

@@ -1,3 +1,4 @@
+import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { Button } from '@cloud-ru/ds-button';
 import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
 import { Typography } from '@cloud-ru/ds-typography';
@@ -7,14 +8,18 @@ import { memo, MouseEventHandler, useCallback } from 'react';
 import { LinksGroup, LinksGroupTitle } from '../../../../../types';
 import { getLinkEmblem } from '../../../../../utils';
 import styles from '../styles.module.scss';
-import { SortableGroupDragHandle, SortableGroupDragHandleProps } from './SortableGroupDragHandle';
+import { SortableGroupDragHandle } from './SortableGroupDragHandle';
 
 export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
   label: LinksGroupTitle;
   isExpanded?: boolean;
   enableServiceDrag?: boolean;
   isMobile?: boolean;
-} & SortableGroupDragHandleProps;
+  /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
+  attributes?: DraggableAttributes;
+  /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
+  listeners?: DraggableSyntheticListeners;
+};
 
 function SortableGroupHeaderBase({
   label,
@@ -35,7 +40,7 @@ function SortableGroupHeaderBase({
   );
 
   return (
-    <div className={styles.header} data-expanded={isExpanded || undefined}>
+    <div className={styles.header} data-expanded={isExpanded || undefined} {...attributes} {...listeners} tabIndex={-1}>
       <Typography
         variant='title'
         size='m'
@@ -56,7 +61,7 @@ function SortableGroupHeaderBase({
 
       {(enableServiceDrag || !isMobile) && (
         <div className={styles.headerActions} data-always-visible={isMobile || undefined}>
-          {enableServiceDrag && <SortableGroupDragHandle attributes={attributes} listeners={listeners} />}
+          {enableServiceDrag && <SortableGroupDragHandle />}
 
           {!isMobile && (
             <Button

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

@@ -17,6 +17,11 @@ $map-block-color-decor: (
   'pink': base.$sn-theme-color-pink-decor,
 );
 
+@mixin header-actions-visible {
+  pointer-events: auto;
+  opacity: 1;
+}
+
 .headerActions {
   pointer-events: none;
 
@@ -29,7 +34,7 @@ $map-block-color-decor: (
   outline: none;
 
   &[data-always-visible] {
-    opacity: 1;
+    @include header-actions-visible;
   }
 }
 
@@ -47,8 +52,7 @@ $map-block-color-decor: (
   &:focus-visible,
   &:has(:focus-visible) {
     .headerActions {
-      pointer-events: auto;
-      opacity: 1;
+      @include header-actions-visible;
     }
   }
 
@@ -57,8 +61,7 @@ $map-block-color-decor: (
       background-color: base.$sn-theme-color-neutral-decorTransparent;
 
       .headerActions {
-        pointer-events: auto;
-        opacity: 1;
+        @include header-actions-visible;
       }
     }
   }
@@ -106,22 +109,31 @@ $map-block-color-decor: (
   }
 
   &[data-drag-preview] {
-    cursor: grabbing;
-
     .header {
-      cursor: grabbing;
       background-color: base.$sn-theme-color-neutral-decorTransparent;
 
       .headerActions {
-        pointer-events: auto;
-        opacity: 1;
+        @include header-actions-visible;
+      }
+    }
+  }
+
+  &:has(:focus-visible) {
+    .headerActions {
+      @include header-actions-visible;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .headerActions {
+        @include header-actions-visible;
       }
     }
   }
 }
 
 .groupDragPreview {
-  cursor: grabbing;
   container-type: inline-size;
   border-radius: $group-border-radius;
 }
@@ -172,7 +184,6 @@ $map-block-color-decor: (
 
 .groupBody {
   display: grid;
-  grid-template-columns: repeat(3, minmax(auto, 1fr));
   gap: base.$sn-primitive-dimension-4;
 
   &:not([data-subcategory-body]) {
@@ -184,14 +195,11 @@ $map-block-color-decor: (
     gap: 0;
   }
 
+  // Drawer десктопного меню ресайзится пользователем (см. MenuDesktop.resizable), поэтому число
+  // колонок выводится из ширины контейнера автоматически: сколько карточек минимальной ширины влезает.
+  // Нет токена минимальной ширины карточки.
   &:not([data-mobile]) {
-    // Drawer десктопного меню ресайзится пользователем (см. MenuDesktop.resizable),
-    // поэтому колонки реагируют на реальную ширину контейнера (container query
-    // от `.rightContent`), а не на ширину viewport.
-    // Перестраиваться должно при ширине дровера 1024px, поэтому width тут указан с вычетом
-    @container (width <= 728px) {
-      grid-template-columns: repeat(2, minmax(auto, 1fr));
-    }
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   }
 
   &[data-mobile] {

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

@@ -27,6 +27,28 @@
   gap: inherit;
 }
 
+.rightTop {
+  width: 100%;
+  min-width: 0;
+
+  &:not([data-mobile]) {
+    // Не больше двух колонок: минимальная ширина колонки не меньше половины контейнера (за вычетом gap),
+    // а при ширине меньше 2 × 286px баннеры встают в одну колонку. `auto-fit` схлопывает пустые колонки: один баннер занимает всю ширину.
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(max(286px, calc((100% - #{base.$sn-primitive-dimension-4}) / 2)), 1fr)
+    );
+    gap: base.$sn-primitive-dimension-4;
+  }
+
+  &[data-mobile] {
+    display: flex;
+    flex-direction: column;
+    gap: base.$sn-primitive-dimension-8;
+  }
+}
+
 .noData {
   flex: 1 1 auto;
   place-self: center center;

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

@@ -14,7 +14,7 @@ import { MenuBottom } from '../MenuBottom';
 import { MenuHeaderBrand } from '../MenuHeaderBrand';
 import { MountAnimation } from '../MountAnimation';
 import { Search } from '../Search';
-import { MENU_WIDTH_MAX, MENU_WIDTH_MIN } from './constants';
+import { MENU_WIDTH_DEFAULT, MENU_WIDTH_MIN } from './constants';
 import styles from './styles.module.scss';
 
 export function MenuDesktop({
@@ -28,6 +28,7 @@ export function MenuDesktop({
   onActiveSegmentChange,
   onSegmentOrderChange,
   onSegmentExpandedChange,
+  onToggleAllGroupsExpanded,
   onSegmentServiceClick,
   favorite,
   search,
@@ -36,7 +37,7 @@ export function MenuDesktop({
   rightTop,
   leftTop,
   leftBottom,
-  defaultWidth = MENU_WIDTH_MAX,
+  defaultWidth = MENU_WIDTH_DEFAULT,
   onWidthChangeEnd,
   draggerTooltip,
   loading,
@@ -140,6 +141,7 @@ export function MenuDesktop({
                   onSegmentOrderChange={onSegmentOrderChange}
                   onSegmentExpandedChange={onSegmentExpandedChange}
                   onSegmentServiceClick={onSegmentServiceClick}
+                  onToggleAllGroupsExpanded={onToggleAllGroupsExpanded}
                   preferences={preferences}
                   loading={loading}
                 />
@@ -167,8 +169,8 @@ export function MenuDesktop({
         isNeedRightBlock
           ? {
               min: MENU_WIDTH_MIN,
-              max: MENU_WIDTH_MAX,
-              default: Math.min(Math.max(defaultWidth, MENU_WIDTH_MIN), MENU_WIDTH_MAX),
+              max: 'full',
+              default: defaultWidth,
               onResizeEnd: onWidthChangeEnd,
               draggerTooltip,
             }

package/src/components/MainMenu/helperComponents/MenuDesktop/constants.ts

@@ -1,6 +1,6 @@
 export const MENU_WIDTH_STORAGE_KEY = 'cloud-ru-main-menu-user-width';
 
 // паддинг справа 24px у дровера нужно компенсировать
-export const MENU_WIDTH_MIN = 960 + 24;
+export const MENU_WIDTH_MIN = 630 + 24;
 
-export const MENU_WIDTH_MAX = 1208 + 24;
+export const MENU_WIDTH_DEFAULT = 1208 + 24;

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

@@ -2,6 +2,8 @@
 @use '@cloud-ru/ds-figma-variables/build/scss/components/divider.module' as divider;
 @use '@cloud-ru/ds-figma-variables/build/scss/components/drawer.module' as drawer;
 
+$drawer-sidebar-width: 263px;
+
 .drawer {
   border-radius: drawer.$sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius
     drawer.$sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius
@@ -40,7 +42,9 @@
     // по умолчанию box-sizing: content-box; и из-за этого max-width определяется некорректно
     box-sizing: border-box;
     width: 100%;
-    max-width: calc(263px + #{drawer.$sn-drawer-anatomy-container-vertical-positionLeft-paddingRight});
+    max-width: calc(
+      #{$drawer-sidebar-width} + #{drawer.$sn-drawer-anatomy-container-vertical-positionLeft-paddingRight}
+    );
 
     .left {
       width: 100%;
@@ -76,7 +80,7 @@
 .menu {
   --snack-menu-header-height: #{base.$sn-primitive-dimension-40};
   // Нет токена ширины левой колонки меню.
-  --snack-menu-left-width: 263px;
+  --snack-menu-left-width: #{$drawer-sidebar-width};
 
   position: relative;
   height: 100vh;

package/src/components/MainMenu/hooks/useMainMenuDnd.tsx

@@ -13,10 +13,11 @@ import {
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import { usePortalContext } from '@cloud-ru/ds-portal-context';
-import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { ServiceCard } from '../helperComponents/ServiceCard';
+import styles from '../styles.module.scss';
 import { FavoriteProps, InnerLink } from '../types';
 import {
   favoriteListCollisionDetection,
@@ -163,6 +164,16 @@ export function MainMenuDndContext({
   overlayContextValue,
 }: Partial<MainMenuDndContextProps>) {
   const portalContextRef = usePortalContext();
+  const isDragging = Boolean(dragOverlay);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    /* Для предотвращения случайных взаимодействий с любыми другими элементами при перетаскивании */
+    document.body.classList.add(styles.dragging);
+
+    return () => document.body.classList.remove(styles.dragging);
+  }, [isDragging]);
 
   // `DragOverlay` рендерит `position: fixed` без собственного портала. Drawer-обёртка
   // (`.snack-rc-drawer-content-wrapper`) держит `will-change: transform`, а это, как и

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

@@ -0,0 +1,10 @@
+// Класс ставится на `body` на время drag: превью в `DragOverlay` с `pointer-events: none`,
+// поэтому курсор определяется элементами под ним, и `!important` перебивает их собственные.
+.dragging,
+.dragging * {
+  cursor: grabbing !important;
+}
+
+.dragging * {
+  pointer-events: none !important;
+}

package/src/components/MainMenu/types.ts

@@ -266,6 +266,7 @@ export type MainMenuProps = Pick<
   | 'onActiveSegmentChange'
   | 'onSegmentOrderChange'
   | 'onSegmentExpandedChange'
+  | 'onToggleAllGroupsExpanded'
   | 'onSegmentServiceClick'
   | 'favorite'
   | 'preferences'