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

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

@@ -8,6 +8,7 @@
   outline:none;
 }
 .headerActions[data-always-visible]{
+  pointer-events:auto;
   opacity:1;
 }
 
@@ -63,20 +64,25 @@
     animation:none;
   }
 }
-.group[data-drag-preview]{
-  cursor:grabbing;
-}
 .group[data-drag-preview] .header{
-  cursor:grabbing;
   background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .group[data-drag-preview] .header .headerActions{
   pointer-events:auto;
   opacity:1;
 }
+.group:has(:focus-visible) .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+@media (hover: hover){
+  .group:hover .headerActions{
+    pointer-events:auto;
+    opacity:1;
+  }
+}
 
 .groupDragPreview{
-  cursor:grabbing;
   container-type:inline-size;
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
 }
@@ -119,7 +125,6 @@
 
 .groupBody{
   display:grid;
-  grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
 .groupBody:not([data-subcategory-body]){
@@ -128,10 +133,8 @@
 .groupBody:not([data-show-description]){
   gap:0;
 }
-@container (width <= 728px){
-  .groupBody:not([data-mobile]){
-    grid-template-columns:repeat(2, minmax(auto, 1fr));
-  }
+.groupBody:not([data-mobile]){
+  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
 }
 .groupBody[data-mobile]{
   grid-template-columns:repeat(1, minmax(200px, 1fr));

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

@@ -21,6 +21,21 @@
   gap:inherit;
 }
 
+.rightTop{
+  width:100%;
+  min-width:0;
+}
+.rightTop:not([data-mobile]){
+  display:grid;
+  grid-template-columns:repeat(auto-fit, minmax(max(286px, (100% - var(--sn-primitive-dimension-4, 4px)) / 2), 1fr));
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+.rightTop[data-mobile]{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
 .noData{
   flex:1 1 auto;
   place-self:center center;

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

@@ -54,7 +54,7 @@ export function MenuDesktop({ open = false, setOpen, settingItems, platformGroup
     return (_jsx(DrawerCustom, { open: open, onClose: handleCloseDrawer, width: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles.drawer, rootClassName: styles.drawerRoot, "data-test-id": TEST_IDS.mainMenu.drawer, "data-small": !isNeedRightBlock || undefined, disableMotions: true, showButtonClosed: false, resizable: isNeedRightBlock
             ? {
                 min: MENU_WIDTH_MIN,
-                max: MENU_WIDTH_MAX,
+                max: 'full',
                 default: Math.min(Math.max(defaultWidth, MENU_WIDTH_MIN), MENU_WIDTH_MAX),
                 onResizeEnd: onWidthChangeEnd,
                 draggerTooltip,

package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/constants.js

@@ -1,4 +1,4 @@
 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;

package/dist/esm/components/MainMenu/hooks/useMainMenuDnd.js

@@ -3,9 +3,10 @@ import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useS
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import { usePortalContext } from '@cloud-ru/ds-portal-context';
-import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ServiceCard } from '../helperComponents/ServiceCard/index.js';
+import styles from '../styles.module.css';
 import { favoriteListCollisionDetection, getDragReferenceY, isServiceDragId, isServiceSourceDragId, parseServiceDragId, resolveFavoriteOrderOnDragEnd, } from '../utils/index.js';
 const restrictGroupDragToVerticalAxis = args => {
     if (args.active?.id != null && isServiceSourceDragId(args.active.id)) {
@@ -82,6 +83,14 @@ export function useMainMenuDnd({ favorite, servicesById, showDescription }) {
 }
 export function MainMenuDndContext({ children, sensors, modifiers, collisionDetection, onDragStart, onDragEnd, onDragCancel, dragOverlay, overlayContextValue, }) {
     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`, а это, как и
     // настоящий transform, создаёт containing block для fixed-потомков — оверлей резолвится

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

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

package/dist/esm/components/UserMenu/UserMenu.d.ts

@@ -7,7 +7,11 @@ export type UserMenuProps = {
     theme?: ThemeProps;
     /** Пункты после темы. На desktop закреплены сверху вместе с профилем и темой */
     topItems?: DroplistProps['items'];
-    /** Список организаций. На desktop — единственная прокручиваемая часть меню */
+    /**
+     * Список организаций. На desktop — единственная прокручиваемая часть меню.
+     *
+     * Не передан или пуст — меню отображается единым списком без закреплённых частей.
+     */
     organizationItems?: DroplistProps['items'];
     /** Пункты перед «Выйти из аккаунта». На desktop закреплены снизу */
     bottomItems?: DroplistProps['items'];

package/dist/esm/components/UserMenu/hooks/useUserMenuItems.js

@@ -46,6 +46,10 @@ export function useUserMenuItems({ profile, theme, onLogout, topItems = EMPTY_AR
                 pinBottom: [],
             };
         }
+        // Без организаций прокручивать нечего: пустой `items` показал бы заглушку «Нет данных»
+        if (!organizationItems.length) {
+            return { pinTop: [], items: withClose([...pinTop, DIVIDER_ITEM, ...pinBottom]), pinBottom: [] };
+        }
         return { pinTop: withClose(pinTop), items: withClose(organizationItems), pinBottom: withClose(pinBottom) };
     }, [bottomItems, isMobile, logoutItem, onClose, organizationItems, profileItem, settingItems, themeItem, topItems]);
 }

package/dist/esm/style.css

@@ -11,6 +11,7 @@
 }
 
 .breadcrums{
+  min-width:0;
   padding:0 var(--sn-primitive-dimension-8, 8px);
 }
 
@@ -116,6 +117,16 @@
 .root:hover .closeButton, .root:focus-visible .closeButton, .root:has(*:focus-visible) .closeButton{
   visibility:visible;
 }
+.root[data-mobile] .closeButton{
+  position:relative;
+  top:auto;
+  right:auto;
+  flex-shrink:0;
+  visibility:visible;
+}
+.root[data-mobile] .contentRow[data-closable]{
+  padding-right:var(--sn-primitive-dimension-4, 4px);
+}
 
 .contentRow{
   position:relative;
@@ -289,6 +300,7 @@
   outline:none;
 }
 .headerActions[data-always-visible]{
+  pointer-events:auto;
   opacity:1;
 }
 
@@ -344,20 +356,25 @@
     animation:none;
   }
 }
-.group[data-drag-preview]{
-  cursor:grabbing;
-}
 .group[data-drag-preview] .header{
-  cursor:grabbing;
   background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .group[data-drag-preview] .header .headerActions{
   pointer-events:auto;
   opacity:1;
 }
+.group:has(:focus-visible) .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+@media (hover: hover){
+  .group:hover .headerActions{
+    pointer-events:auto;
+    opacity:1;
+  }
+}
 
 .groupDragPreview{
-  cursor:grabbing;
   container-type:inline-size;
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
 }
@@ -400,7 +417,6 @@
 
 .groupBody{
   display:grid;
-  grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
 .groupBody:not([data-subcategory-body]){
@@ -409,10 +425,8 @@
 .groupBody:not([data-show-description]){
   gap:0;
 }
-@container (width <= 728px){
-  .groupBody:not([data-mobile]){
-    grid-template-columns:repeat(2, minmax(auto, 1fr));
-  }
+.groupBody:not([data-mobile]){
+  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
 }
 .groupBody[data-mobile]{
   grid-template-columns:repeat(1, minmax(200px, 1fr));
@@ -564,6 +578,21 @@
   gap:inherit;
 }
 
+.rightTop{
+  width:100%;
+  min-width:0;
+}
+.rightTop:not([data-mobile]){
+  display:grid;
+  grid-template-columns:repeat(auto-fit, minmax(max(286px, (100% - var(--sn-primitive-dimension-4, 4px)) / 2), 1fr));
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+.rightTop[data-mobile]{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
 .noData{
   flex:1 1 auto;
   place-self:center center;
@@ -928,6 +957,14 @@
 .staticCard{
   position:relative;
 }
+.dragging,
+.dragging *{
+  cursor:grabbing !important;
+}
+
+.dragging *{
+  pointer-events:none !important;
+}
 .container{
   display:flex;
   align-items:center;