@cloud-ru/ds-uikit-product-header 2.1.3 → 2.1.4-preview-0fb5d9fa.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.d.ts

@@ -1,2 +1,2 @@
 import { MainMenuProps } from '../../types.js';
-export declare function MenuDesktop({ open, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuDesktop({ open, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onToggleAllGroupsExpanded, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -13,9 +13,9 @@ import { MenuBottom } from '../MenuBottom/index.js';
 import { MenuHeaderBrand } from '../MenuHeaderBrand/index.js';
 import { MountAnimation } from '../MountAnimation/index.js';
 import { Search } from '../Search/index.js';
-import { MENU_WIDTH_MAX, MENU_WIDTH_MIN } from './constants.js';
+import { MENU_WIDTH_DEFAULT, MENU_WIDTH_MIN } from './constants.js';
 import styles from './styles.module.css';
-export function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+export function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onToggleAllGroupsExpanded, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = MENU_WIDTH_DEFAULT, onWidthChangeEnd, draggerTooltip, loading, }) {
     const { scrollRef, searchRef, resultItems } = useMenuItems({
         segments,
         search,
@@ -50,12 +50,12 @@ export function MenuDesktop({ open = false, setOpen, settingItems, platformGroup
     const handleCloseDrawer = useCallback(() => {
         setOpen?.(false);
     }, [setOpen]);
-    const menu = (_jsxs("div", { className: styles.menu, children: [_jsxs("div", { className: styles.menuHeader, children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles.menuHeaderBrand }), isNeedRightBlock && search && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), _jsx(Search, { ...search, ref: searchRef })] }))] }), _jsx(Divider, {}), _jsxs("div", { className: styles.menuBody, children: [_jsxs(MountAnimation, { className: styles.left, "data-test-id": TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && _jsx("div", { className: styles.leftTop, children: leftTop }), isNeedRightBlock && favorite && _jsx(Favorites, { favorite: favorite, servicesById: servicesById }), hasBottomItems && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && (_jsxs(_Fragment, { children: [_jsx(MountAnimation, { type: 'fade-in', children: _jsx(Divider, { orientation: 'vertical' }) }), _jsx("div", { className: styles.right, "data-test-id": TEST_IDS.mainMenu.right, children: _jsx(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: _jsx(Content, { className: styles.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, preferences: preferences, loading: loading }) }) })] }))] })] }));
+    const menu = (_jsxs("div", { className: styles.menu, children: [_jsxs("div", { className: styles.menuHeader, children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles.menuHeaderBrand }), isNeedRightBlock && search && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), _jsx(Search, { ...search, ref: searchRef })] }))] }), _jsx(Divider, {}), _jsxs("div", { className: styles.menuBody, children: [_jsxs(MountAnimation, { className: styles.left, "data-test-id": TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && _jsx("div", { className: styles.leftTop, children: leftTop }), isNeedRightBlock && favorite && _jsx(Favorites, { favorite: favorite, servicesById: servicesById }), hasBottomItems && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && (_jsxs(_Fragment, { children: [_jsx(MountAnimation, { type: 'fade-in', children: _jsx(Divider, { orientation: 'vertical' }) }), _jsx("div", { className: styles.right, "data-test-id": TEST_IDS.mainMenu.right, children: _jsx(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: _jsx(Content, { className: styles.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, onToggleAllGroupsExpanded: onToggleAllGroupsExpanded, preferences: preferences, loading: loading }) }) })] }))] })] }));
     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,
-                default: Math.min(Math.max(defaultWidth, MENU_WIDTH_MIN), MENU_WIDTH_MAX),
+                max: 'full',
+                default: defaultWidth,
                 onResizeEnd: onWidthChangeEnd,
                 draggerTooltip,
             }

package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const MENU_WIDTH_STORAGE_KEY = "cloud-ru-main-menu-user-width";
 export declare const MENU_WIDTH_MIN: number;
-export declare const MENU_WIDTH_MAX: number;
+export declare const MENU_WIDTH_DEFAULT: number;

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_MAX = 1208 + 24;
+export const MENU_WIDTH_MIN = 630 + 24;
+export const MENU_WIDTH_DEFAULT = 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/MainMenu/types.d.ts

@@ -240,7 +240,7 @@ export type MainMenuSettingsItem = Pick<InnerLink, 'id' | 'label' | 'icon' | 'on
     /** Разделитель до/после пункта. */
     divider?: 'before' | 'after';
 };
-export type MainMenuProps = Pick<ContentProps, 'segments' | 'searchGroups' | 'segmentPrefs' | 'activeSegmentId' | 'onActiveSegmentChange' | 'onSegmentOrderChange' | 'onSegmentExpandedChange' | 'onSegmentServiceClick' | 'favorite' | 'preferences' | 'loading' | 'rightTop'> & {
+export type MainMenuProps = Pick<ContentProps, 'segments' | 'searchGroups' | 'segmentPrefs' | 'activeSegmentId' | 'onActiveSegmentChange' | 'onSegmentOrderChange' | 'onSegmentExpandedChange' | 'onToggleAllGroupsExpanded' | 'onSegmentServiceClick' | 'favorite' | 'preferences' | 'loading' | 'rightTop'> & {
     /** Кнопка открытия меню недоступна для клика. */
     disabled?: boolean;
     /**

package/dist/esm/style.css

@@ -300,6 +300,7 @@
   outline:none;
 }
 .headerActions[data-always-visible]{
+  pointer-events:auto;
   opacity:1;
 }
 
@@ -355,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)));
 }
@@ -411,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]){
@@ -420,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));
@@ -575,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;
@@ -939,6 +957,14 @@
 .staticCard{
   position:relative;
 }
+.dragging,
+.dragging *{
+  cursor:grabbing !important;
+}
+
+.dragging *{
+  pointer-events:none !important;
+}
 .container{
   display:flex;
   align-items:center;