@cloud-ru/ds-uikit-product-header 2.1.3-preview-97040951.0 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-header",
-  "version": "2.1.3-preview-97040951.0",
+  "version": "2.1.3",
   "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-breadcrumbs": "1.0.28",
-    "@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-97040951.0",
-    "@cloud-ru/ds-divider": "1.0.2",
-    "@cloud-ru/ds-icons": "1.5.0",
-    "@cloud-ru/ds-list": "2.3.1",
-    "@cloud-ru/ds-info-block": "1.0.3",
-    "@cloud-ru/ds-locale": "1.0.0",
-    "@cloud-ru/ds-portal-context": "1.0.2",
-    "@cloud-ru/ds-modal": "2.0.0",
-    "@cloud-ru/ds-promo-tag": "1.0.3",
-    "@cloud-ru/ds-scroll": "1.0.5",
-    "@cloud-ru/ds-segment-control": "1.0.13",
-    "@cloud-ru/ds-search": "1.0.14",
-    "@cloud-ru/ds-skeleton": "1.0.2",
-    "@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-card-predefined": "4.0.8",
-    "@cloud-ru/ds-uikit-product-switch-row": "1.0.14",
-    "@cloud-ru/ds-utils": "1.2.0",
-    "@cloud-ru/ds-uikit-product-title-clickable": "1.0.16"
+    "@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"
   },
   "publishConfig": {
     "access": "public"

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

@@ -316,9 +316,7 @@ export function Content({
                 loading={loading}
               />
 
-              <div className={styles.rightTop} data-mobile={isMobile || undefined}>
-                {rightTop}
-              </div>
+              {rightTop}
             </MountAnimation>
           </>
         )}

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

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

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

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

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

@@ -27,28 +27,6 @@
   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

@@ -167,7 +167,7 @@ export function MenuDesktop({
         isNeedRightBlock
           ? {
               min: MENU_WIDTH_MIN,
-              max: 'full',
+              max: MENU_WIDTH_MAX,
               default: Math.min(Math.max(defaultWidth, MENU_WIDTH_MIN), MENU_WIDTH_MAX),
               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 = 630 + 24;
+export const MENU_WIDTH_MIN = 960 + 24;
 
 export const MENU_WIDTH_MAX = 1208 + 24;

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

@@ -2,8 +2,6 @@
 @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
@@ -42,9 +40,7 @@ $drawer-sidebar-width: 263px;
     // по умолчанию box-sizing: content-box; и из-за этого max-width определяется некорректно
     box-sizing: border-box;
     width: 100%;
-    max-width: calc(
-      #{$drawer-sidebar-width} + #{drawer.$sn-drawer-anatomy-container-vertical-positionLeft-paddingRight}
-    );
+    max-width: calc(263px + #{drawer.$sn-drawer-anatomy-container-vertical-positionLeft-paddingRight});
 
     .left {
       width: 100%;
@@ -80,7 +76,7 @@ $drawer-sidebar-width: 263px;
 .menu {
   --snack-menu-header-height: #{base.$sn-primitive-dimension-40};
   // Нет токена ширины левой колонки меню.
-  --snack-menu-left-width: #{$drawer-sidebar-width};
+  --snack-menu-left-width: 263px;
 
   position: relative;
   height: 100vh;

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

@@ -13,11 +13,10 @@ 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, useEffect, useMemo, useState } from 'react';
+import { createContext, ReactNode, useCallback, useContext, 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,
@@ -164,16 +163,6 @@ 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/dist/cjs/components/MainMenu/styles.module.css

@@ -1,8 +0,0 @@
-.dragging,
-.dragging *{
-  cursor:grabbing !important;
-}
-
-.dragging *{
-  pointer-events:none !important;
-}

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

@@ -1,8 +0,0 @@
-.dragging,
-.dragging *{
-  cursor:grabbing !important;
-}
-
-.dragging *{
-  pointer-events:none !important;
-}

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

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