@cloud-ru/ds-uikit-product-header 2.1.0 → 2.1.2

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 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
+
 # 2.1.0 (2026-10-05)
 
 ### Features

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

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