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

package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js

@@ -116,5 +116,5 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = empty
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? constants_1.TEST_IDS.noDataFound : constants_1.TEST_IDS.noData, "data-mobile": isMobile || undefined, className: styles_module_scss_1.default.noData }));
     })();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { type: mountAnimationType, className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), rightTop] }) })), cards, footer] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { type: mountAnimationType, className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightTop, "data-mobile": isMobile || undefined, children: rightTop })] }) })), cards, footer] })] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts

@@ -1,8 +1 @@
-import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
-export type SortableGroupDragHandleProps = {
-    /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
-    attributes?: DraggableAttributes;
-    /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
-    listeners?: DraggableSyntheticListeners;
-};
-export declare function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroupDragHandle(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.js

@@ -9,7 +9,7 @@ const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const utils_1 = require("@cloud-ru/ds-utils");
 const locale_1 = require("../../../../../../../locale");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
-function SortableGroupDragHandle({ attributes, listeners }) {
+function SortableGroupDragHandle() {
     const { t } = locale_1.headerLocale.useTranslations();
-    return ((0, jsx_runtime_1.jsx)("button", { ...attributes, ...listeners, type: 'button', className: styles_module_scss_1.default.dragHandle, "aria-label": t('dragGroup'), "data-test-id": 'header__drawer-menu__group-card-drag-handle', onClick: utils_1.stopEventPropagation, children: (0, jsx_runtime_1.jsx)(system_1.DragDropSVG, { size: 24 }) }));
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: styles_module_scss_1.default.dragHandle, "aria-label": t('dragGroup'), "data-test-id": 'header__drawer-menu__group-card-drag-handle', onClick: utils_1.stopEventPropagation, children: (0, jsx_runtime_1.jsx)(system_1.DragDropSVG, { size: 24 }) }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts

@@ -1,11 +1,15 @@
+import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { LinksGroup, LinksGroupTitle } from '../../../../../types';
-import { SortableGroupDragHandleProps } 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;
+};
 declare function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare const SortableGroupHeader: import("react").MemoExoticComponent<typeof SortableGroupHeaderBase>;
 export {};

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js

@@ -18,6 +18,6 @@ function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, a
         e.stopPropagation();
         label?.onClick?.(e);
     }, [label]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? ((0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: (0, utils_1.getLinkEmblem)({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, ...attributes, ...listeners, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? ((0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: (0, utils_1.getLinkEmblem)({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, {}), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
 }
 exports.SortableGroupHeader = (0, react_1.memo)(SortableGroupHeaderBase);

package/dist/cjs/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/cjs/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/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js

@@ -21,7 +21,7 @@ const MountAnimation_1 = require("../MountAnimation");
 const Search_1 = require("../Search");
 const constants_2 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = constants_2.MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = constants_2.MENU_WIDTH_DEFAULT, onWidthChangeEnd, draggerTooltip, loading, }) {
     const { scrollRef, searchRef, resultItems } = (0, useMenuItems_1.useMenuItems)({
         segments,
         search,
@@ -60,8 +60,8 @@ function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segm
     return ((0, jsx_runtime_1.jsx)(drawer_1.DrawerCustom, { open: open, onClose: handleCloseDrawer, width: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles_module_scss_1.default.drawer, rootClassName: styles_module_scss_1.default.drawerRoot, "data-test-id": constants_1.TEST_IDS.mainMenu.drawer, "data-small": !isNeedRightBlock || undefined, disableMotions: true, showButtonClosed: false, resizable: isNeedRightBlock
             ? {
                 min: constants_2.MENU_WIDTH_MIN,
-                max: constants_2.MENU_WIDTH_MAX,
-                default: Math.min(Math.max(defaultWidth, constants_2.MENU_WIDTH_MIN), constants_2.MENU_WIDTH_MAX),
+                max: 'full',
+                default: defaultWidth,
                 onResizeEnd: onWidthChangeEnd,
                 draggerTooltip,
             }

package/dist/cjs/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/cjs/components/MainMenu/helperComponents/MenuDesktop/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MENU_WIDTH_MAX = exports.MENU_WIDTH_MIN = exports.MENU_WIDTH_STORAGE_KEY = void 0;
+exports.MENU_WIDTH_DEFAULT = exports.MENU_WIDTH_MIN = exports.MENU_WIDTH_STORAGE_KEY = void 0;
 exports.MENU_WIDTH_STORAGE_KEY = 'cloud-ru-main-menu-user-width';
 // паддинг справа 24px у дровера нужно компенсировать
-exports.MENU_WIDTH_MIN = 960 + 24;
-exports.MENU_WIDTH_MAX = 1208 + 24;
+exports.MENU_WIDTH_MIN = 630 + 24;
+exports.MENU_WIDTH_DEFAULT = 1208 + 24;

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

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMainMenuDndOverlay = useMainMenuDndOverlay;
 exports.useMainMenuDnd = useMainMenuDnd;
@@ -11,6 +14,7 @@ const portal_context_1 = require("@cloud-ru/ds-portal-context");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const ServiceCard_1 = require("../helperComponents/ServiceCard");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const utils_1 = require("../utils");
 const restrictGroupDragToVerticalAxis = args => {
     if (args.active?.id != null && (0, utils_1.isServiceSourceDragId)(args.active.id)) {
@@ -87,6 +91,14 @@ function useMainMenuDnd({ favorite, servicesById, showDescription }) {
 }
 function MainMenuDndContext({ children, sensors, modifiers, collisionDetection, onDragStart, onDragEnd, onDragCancel, dragOverlay, overlayContextValue, }) {
     const portalContextRef = (0, portal_context_1.usePortalContext)();
+    const isDragging = Boolean(dragOverlay);
+    (0, react_1.useEffect)(() => {
+        if (!isDragging)
+            return;
+        /* Для предотвращения случайных взаимодействий с любыми другими элементами при перетаскивании */
+        document.body.classList.add(styles_module_scss_1.default.dragging);
+        return () => document.body.classList.remove(styles_module_scss_1.default.dragging);
+    }, [isDragging]);
     // `DragOverlay` рендерит `position: fixed` без собственного портала. Drawer-обёртка
     // (`.snack-rc-drawer-content-wrapper`) держит `will-change: transform`, а это, как и
     // настоящий transform, создаёт containing block для fixed-потомков — оверлей резолвится

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

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

package/dist/cjs/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;

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

@@ -110,5 +110,5 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? TEST_IDS.noDataFound : TEST_IDS.noData, "data-mobile": isMobile || undefined, className: styles.noData }));
     })();
-    return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && (_jsx(_Fragment, { children: _jsxs(MountAnimation, { type: mountAnimationType, className: styles.top, children: [_jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), rightTop] }) })), cards, footer] })] }));
+    return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && (_jsx(_Fragment, { children: _jsxs(MountAnimation, { type: mountAnimationType, className: styles.top, children: [_jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), _jsx("div", { className: styles.rightTop, "data-mobile": isMobile || undefined, children: rightTop })] }) })), cards, footer] })] }));
 }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts

@@ -1,8 +1 @@
-import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
-export type SortableGroupDragHandleProps = {
-    /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
-    attributes?: DraggableAttributes;
-    /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
-    listeners?: DraggableSyntheticListeners;
-};
-export declare function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroupDragHandle(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.js

@@ -3,7 +3,7 @@ import { DragDropSVG } from '@cloud-ru/ds-icons/interface/system';
 import { stopEventPropagation } from '@cloud-ru/ds-utils';
 import { headerLocale } from '../../../../../../../locale/index.js';
 import styles from '../styles.module.css';
-export function SortableGroupDragHandle({ attributes, listeners }) {
+export function SortableGroupDragHandle() {
     const { t } = headerLocale.useTranslations();
-    return (_jsx("button", { ...attributes, ...listeners, type: 'button', className: styles.dragHandle, "aria-label": t('dragGroup'), "data-test-id": 'header__drawer-menu__group-card-drag-handle', onClick: stopEventPropagation, children: _jsx(DragDropSVG, { size: 24 }) }));
+    return (_jsx("button", { type: 'button', className: styles.dragHandle, "aria-label": t('dragGroup'), "data-test-id": 'header__drawer-menu__group-card-drag-handle', onClick: stopEventPropagation, children: _jsx(DragDropSVG, { size: 24 }) }));
 }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts

@@ -1,11 +1,15 @@
+import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { LinksGroup, LinksGroupTitle } from '../../../../../types.js';
-import { SortableGroupDragHandleProps } from './SortableGroupDragHandle.js';
 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;
+};
 declare function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare const SortableGroupHeader: import("react").MemoExoticComponent<typeof SortableGroupHeaderBase>;
 export {};

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js

@@ -12,6 +12,6 @@ function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, a
         e.stopPropagation();
         label?.onClick?.(e);
     }, [label]);
-    return (_jsxs("div", { className: styles.header, "data-expanded": isExpanded || undefined, children: [_jsx(Typography, { variant: 'title', size: 'm', className: styles.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? (_jsx(TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: getLinkEmblem({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && (_jsxs("div", { className: styles.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && _jsx(SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && (_jsx(Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
+    return (_jsxs("div", { className: styles.header, "data-expanded": isExpanded || undefined, ...attributes, ...listeners, tabIndex: -1, children: [_jsx(Typography, { variant: 'title', size: 'm', className: styles.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? (_jsx(TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: getLinkEmblem({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && (_jsxs("div", { className: styles.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && _jsx(SortableGroupDragHandle, {}), !isMobile && (_jsx(Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
 }
 export const SortableGroupHeader = memo(SortableGroupHeaderBase);

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

@@ -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, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = MENU_WIDTH_DEFAULT, onWidthChangeEnd, draggerTooltip, loading, }) {
     const { scrollRef, searchRef, resultItems } = useMenuItems({
         segments,
         search,
@@ -54,8 +54,8 @@ 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,
-                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/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;