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

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 2.1.2 (2026-10-05)
+
+### Bug Fixes
+
+- **FF-9172:** allow header breadcrumbs wrapper to shrink ([12a0633](https://github.com/cloud-ru-tech/snack-v2/commit/12a0633f85980128a14af6c467f9cfd7566e395e))
+- **FF-9172:** gen-props resolves indexed access to the field type ([baf31c4](https://github.com/cloud-ru-tech/snack-v2/commit/baf31c4053e76c81d681c9c19a6622f009f40413))
+- **FF-9172:** keep menu banner close button in flow and always visible on mobile ([ad48053](https://github.com/cloud-ru-tech/snack-v2/commit/ad480531898d9ab8f75f2aba2a066afe233e04da))
+- **FF-9172:** render user menu as single list when no organizations passed ([363ca6a](https://github.com/cloud-ru-tech/snack-v2/commit/363ca6abfc44575c45fd2687e6aa4bf1608ed70f))
+
 ## 2.1.1 (2026-10-05)
 
 **Note:** Version bump only for package @ds/uikit-product-header

package/README.md

@@ -339,7 +339,7 @@ function LocalMainMenu() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `aliases` | `string[]` | — | Синонимы для fuzzy-поиска. |
-| `badge` | `CardServiceLightProps` \| `PromoTagPredefinedBaseProps` | — | Промо-тег карточки. |
+| `badge` | `CardPromoTagProps` \| `PromoTagPredefinedBaseProps` | — | Промо-тег карточки. |
 | `description` | `string \| undefined` | — | Краткое описание сервиса — отображается при включённом переключателе «Описание». |
 | `disabled` | `boolean \| undefined` | — | Карточка недоступна для клика/drag и визуально приглушена. |
 | `favoritesEnabled` | `boolean \| undefined` | — | Разрешено ли добавление карточки в избранное. default=true - разрешено |
@@ -513,7 +513,7 @@ import { MainMenu, MenuMobile } from '@cloud-ru/ds-uikit-product-header';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `aliases` | `string[]` | — | Синонимы для fuzzy-поиска. |
-| `badge` | `CardServiceLightProps` \| `PromoTagPredefinedBaseProps` | — | Промо-тег карточки. |
+| `badge` | `CardPromoTagProps` \| `PromoTagPredefinedBaseProps` | — | Промо-тег карточки. |
 | `description` | `string \| undefined` | — | Краткое описание сервиса — отображается при включённом переключателе «Описание». |
 | `disabled` | `boolean \| undefined` | — | Карточка недоступна для клика/drag и визуально приглушена. |
 | `favoritesEnabled` | `boolean \| undefined` | — | Разрешено ли добавление карточки в избранное. default=true - разрешено |
@@ -693,16 +693,16 @@ export function ControlledTheme() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `bottomItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — | Пункты перед «Выйти из аккаунта». На desktop закреплены снизу |
+| `bottomItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `Item` \| `ScrollProps` | — | Пункты перед «Выйти из аккаунта». На desktop закреплены снизу |
 | `onClick` | `(() => void)` | — | Колбэк клика по кнопке-триггеру. |
 | `onLogout` | `(() => void)` | — | Колбэк клика по пункту «Выйти». |
 | `open` | `boolean` | — | Открыто ли меню. <br/> Не передано — состояние открытия неуправляемое (меню само переключает себя по клику на кнопку). |
-| `organizationItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — | Список организаций. На desktop — единственная прокручиваемая часть меню |
+| `organizationItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `Item` \| `ScrollProps` | — | Список организаций. На desktop — единственная прокручиваемая часть меню. <br/> Не передан или пуст — меню отображается единым списком без закреплённых частей. |
 | `profile` | `UserProfileProps` | `{}` | Профиль пользователя (имя, email, счётчик приглашений). |
 | `setOpen` | `((open: boolean) => void)` | — | Колбэк открытия/закрытия меню. |
 | `settingItems` | `BaseItemProps` | — | Пункты настроек в нижней части меню. |
 | `theme` | `ThemeProps` | — | Переключатель темы в меню. Без пропа не отображается. |
-| `topItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — | Пункты после темы. На desktop закреплены сверху вместе с профилем и темой |
+| `topItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `Item` \| `ScrollProps` | — | Пункты после темы. На desktop закреплены сверху вместе с профилем и темой |
 | `triggerTooltip` | `string` | — | Текст подсказки для кнопки-триггера. |
 
 ##### Related types
@@ -823,4 +823,4 @@ export function Basic() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `items` | `BreadcrumbsProps` \| `Item` | — | Пункты хлебных крошек. |
+| `items` | `Item` | — | Пункты хлебных крошек. |

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

@@ -8,6 +8,7 @@
 }
 
 .breadcrums{
+  min-width:0;
   padding:0 var(--sn-primitive-dimension-8, 8px);
 }
 

package/dist/cjs/components/MainMenu/helperComponents/Banners/MenuBanner.js

@@ -12,15 +12,17 @@ const promo_tag_1 = require("@cloud-ru/ds-promo-tag");
 const typography_1 = require("@cloud-ru/ds-typography");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
+const useMobileLayout_1 = require("../../../../hooks/useMobileLayout");
 const locale_1 = require("../../../../locale");
 const constants_1 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#', 'data-test-id': dataTestId, ...rest }) {
     const { t } = locale_1.headerLocale.useTranslations();
+    const isMobile = (0, useMobileLayout_1.useMobileLayout)();
     const handleClose = (0, react_1.useCallback)(e => {
         e.preventDefault();
         e.stopPropagation();
         onClose?.(e);
     }, [onClose]);
-    return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentRow, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, className: styles_module_scss_1.default.promoTag, roleAppearance: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: styles_module_scss_1.default.closeButton, view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, {}), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-mobile": isMobile || undefined, "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentRow, "data-closable": Boolean(onClose) || undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, className: styles_module_scss_1.default.promoTag, roleAppearance: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: styles_module_scss_1.default.closeButton, view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, {}), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }) }));
 }

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

@@ -18,6 +18,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;

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

@@ -60,7 +60,7 @@ 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,
+                max: 'full',
                 default: Math.min(Math.max(defaultWidth, constants_2.MENU_WIDTH_MIN), constants_2.MENU_WIDTH_MAX),
                 onResizeEnd: onWidthChangeEnd,
                 draggerTooltip,

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

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MENU_WIDTH_MAX = 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_MIN = 630 + 24;
 exports.MENU_WIDTH_MAX = 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/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/cjs/components/UserMenu/hooks/useUserMenuItems.js

@@ -49,6 +49,10 @@ function useUserMenuItems({ profile, theme, onLogout, topItems = emptyArray_1.EM
                 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/cjs/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;

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

@@ -8,6 +8,7 @@
 }
 
 .breadcrums{
+  min-width:0;
   padding:0 var(--sn-primitive-dimension-8, 8px);
 }
 

package/dist/esm/components/MainMenu/helperComponents/Banners/MenuBanner.js

@@ -6,15 +6,17 @@ import { PromoTag, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
 import { Typography } from '@cloud-ru/ds-typography';
 import cn from 'classnames';
 import { useCallback } from 'react';
+import { useMobileLayout } from '../../../../hooks/useMobileLayout.js';
 import { headerLocale } from '../../../../locale/index.js';
 import { MENU_BANNER_TEST_IDS } from './constants.js';
 import styles from './styles.module.css';
 export function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#', 'data-test-id': dataTestId, ...rest }) {
     const { t } = headerLocale.useTranslations();
+    const isMobile = useMobileLayout();
     const handleClose = useCallback(e => {
         e.preventDefault();
         e.stopPropagation();
         onClose?.(e);
     }, [onClose]);
-    return (_jsx(Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: cn(styles.root, className), "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: _jsxs("div", { className: styles.contentRow, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, className: styles.promoTag, roleAppearance: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: styles.closeButton, view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, {}), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }) }));
+    return (_jsx(Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: cn(styles.root, className), "data-mobile": isMobile || undefined, "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: _jsxs("div", { className: styles.contentRow, "data-closable": Boolean(onClose) || undefined, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, className: styles.promoTag, roleAppearance: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: styles.closeButton, view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, {}), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }) }));
 }

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

@@ -18,6 +18,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;

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);