@cloud-ru/ds-uikit-product-header-legacy 0.1.4 → 0.1.5

package/README.md

@@ -7,12 +7,12 @@
 ## Когда использовать
 
 - Нужна обратимо совместимая шапка и меню навигации старого кабинета на стеке `@ds/*`.
-- Собирается MainMenu с селектором платформ и категориями сервисов: desktop — двухколоночный drawer; mobile — левый одноколоночный drawer.
+- Собирается MainMenu с селектором платформ и категориями сервисов: desktop — двухколоночный drawer; mobile — левый одноколоночный drawer (или новое bottom-sheet-меню через `customMobileMenu`).
 
 Когда **не** нужен пакет:
 
 - Новая продуктовая шапка без legacy-контрактов:
-  - используйте актуальные layout/header-пакеты Product UI Kit.
+  - используйте **`@cloud-ru/ds-uikit-product-header`**.
 - Отдельная карточка сервиса вне меню:
   - используйте **`@cloud-ru/ds-uikit-product-card-predefined`**.
 
@@ -36,7 +36,8 @@ import {
 
 ## Смотри также
 
-- **`MainMenu`** — desktop/mobile drawer и слоты `leftTop` / `search`.
+- **`MainMenu`** — desktop/mobile drawer, слоты `leftTop` / `search`, интеграция с **`MenuMobile`** через `customMobileMenu`.
+- **`@cloud-ru/ds-uikit-product-header`** — новая шапка и mobile bottom sheet для поэтапной миграции.
 - **`@cloud-ru/ds-uikit-product-card-predefined`** — `CardServiceLight` в сетке категорий.
 - **`@cloud-ru/ds-drawer`** — drawer, на котором собран MainMenu.
 - **`@cloud-ru/ds-adaptive`** — `AdaptiveProvider` / `layoutType` для поверхности MainMenu.
@@ -249,9 +250,9 @@ Legacy MainMenu — кнопка MainMenuSVG и адаптивный drawer на
 Legacy MainMenu (Figma `navigationOldDrawer` / `navigationOldDrawerMobile`). Кнопка с `MainMenuSVG` открывает drawer навигации.
 
 - **Desktop** — двухколоночный `@cloud-ru/ds-drawer` (`DrawerCustom`): левая колонка 256px, divider, правая с поиском и категориями.
-- **Mobile** — левый одноколоночный drawer (не BottomSheet): заголовок «Навигация», scroll-body со sticky-поиском.
+- **Mobile** — по умолчанию левый одноколоночный drawer (не BottomSheet): заголовок «Навигация», scroll-body со sticky-поиском. Через `customMobileMenu` можно подставить mobile-меню из **`@cloud-ru/ds-uikit-product-header`** (bottom sheet).
 
-Поверхность выбирается через `AdaptiveProvider` (`layoutType`); проп `isMobile` — legacy override.
+Поверхность выбирается через `AdaptiveProvider` (`layoutType`).
 
 ### Когда использовать
 
@@ -263,7 +264,7 @@ Legacy MainMenu (Figma `navigationOldDrawer` / `navigationOldDrawerMobile`). К
 - Только верхняя полоса без drawer:
   - используйте **`HeaderLayout`**.
 - Новая продуктовая навигация без legacy-контрактов:
-  - используйте актуальные layout/header-пакеты Product UI Kit.
+  - используйте **`@cloud-ru/ds-uikit-product-header`**.
 
 ### Анатомия
 
@@ -292,11 +293,19 @@ Legacy MainMenu (Figma `navigationOldDrawer` / `navigationOldDrawerMobile`). К
 1. `leftTop` — в микрофронте и Figma: два `PlatformSelector` (платформа + проект с `avatarName`).
 2. `search` — свёрнутый `NavigationSearch`; при скролле остаётся sticky (`position: sticky`).
 3. `rightTop` — баннеры в колонку (`data-mobile` на контейнере).
-4. `serviceGroups` — те же категории; favorite на карточках всегда виден.
-5. `settingItems` — `@cloud-ru/ds-list` с divider внизу.
+4. `serviceGroups` — те же категории в сетке из одной колонки (`data-mobile` на `.services`); favorite на карточках всегда виден.
+5. `settingItems` — `CardServiceLight` + `Divider` внизу scroll-body.
 
 `sidebarBottomSlot` на mobile **не** рендерится (legacy-поведение).
 
+#### customMobileMenu
+
+Только на mobile: заменяет встроенный legacy `MenuMobile` (левый drawer). Типичный сценарий — микрофронт с legacy `HeaderLayout` и новым mobile-меню из `@cloud-ru/ds-uikit-product-header`.
+
+- `MenuMobile` импортируется из `@cloud-ru/ds-uikit-product-header`, **не** из `@cloud-ru/ds-uikit-product-header-legacy`.
+- Передаются те же controlled `open` / `setOpen`, что и в `MainMenu` — иначе кнопка-триггер и drawer разойдутся.
+- Данные для `MenuMobile` маппятся на API нового header (`segments`, `settingItems` и т.д.) отдельно от legacy-пропов `MainMenu`.
+
 #### open / setOpen
 
 Controlled-открытие drawer. Без `open` состояние держит сам компонент. В примерах drawer закрыт до клика по trigger.
@@ -496,12 +505,44 @@ export function MobileSurface() {
 }
 ```
 
+#### Новое mobile-меню через `customMobileMenu`
+
+Controlled-состояние drawer общее для trigger и mobile-меню:
+
+```tsx
+import { useState } from 'react';
+import { MainMenu } from '@cloud-ru/ds-uikit-product-header-legacy';
+import { MenuMobile } from '@cloud-ru/ds-uikit-product-header';
+
+function HeaderMainMenu() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MainMenu
+      open={open}
+      setOpen={setOpen}
+      serviceGroups={legacyServiceGroups}
+      /* …остальные legacy-пропы для desktop… */
+      customMobileMenu={
+        <MenuMobile
+          open={open}
+          setOpen={setOpen}
+          segments={headerSegments}
+          /* …пропы API @cloud-ru/ds-uikit-product-header… */
+        />
+      }
+    />
+  );
+}
+```
+
 ### Props
 
 **WithSupportProps**
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `customMobileMenu` | `ReactNode` | — | Только mobile: заменяет legacy `MenuMobile` (левый drawer). <br/> Например, `MenuMobile` из `@cloud-ru/ds-uikit-product-header` (bottom sheet). <br/> Передавайте те же `open` / `setOpen`, что и в `MainMenu` (controlled), иначе триггер и кастомное меню разойдутся. |
 | `data-test-id` | `string` | — |  |
 | `disabled` | `boolean` | — |  |
 | `favorite` | `{ value: string[]; onChange: (productId: string) => (addingValue: boolean) => void; }` | — |  |
@@ -513,7 +554,7 @@ export function MobileSurface() {
 | `search` | `SearchProps` | — |  |
 | `serviceGroups` | `LinksGroup[]` | — | Основные группы облачных сервисов (инфраструктура, сеть, хранилище и т.п.). <br/> Всегда видны в сетке карточек при пустом поиске; участвуют в избранном и боковой навигации. <br/> При поиске фильтруются вместе с остальными группами и показываются **первыми** в выдаче. |
 | `setOpen` | `((open: boolean) => void)` | — |  |
-| `settingItems` | `LinksGroup` | — | Административные сервисы (одна группа, например «Административные сервисы»). <br/> Без поиска: пункты в нижней части левой колонки (desktop), не в сетке карточек. <br/> С поиском: группа попадает в результаты только при совпадении; отображается **последней** <br/> (ниже `serviceGroups` и `platformGroups`). Обычно `favoritesEnabled: false`. |
+| `settingItems` | `LinksGroup` | — | Административные сервисы (одна группа, например «Административные сервисы»). <br/> Без поиска: пункты в нижней части левой колонки (desktop), не в сетке карточек. <br/> С поиском: группа попадает в результаты только при совпадении; отображается **последней** <br/> (ниже `serviceGroups` и `platformGroups`). Обычно `favoritesEnabled: false`. <br/> Mobile: `CardServiceLight` + `Divider` внизу scroll-body. |
 | `sidebarBottomSlot` | `ReactNode` | — | Нижний слот левой колонки sidebar (Figma `bottom > items`). |
 
 ### Storybook
@@ -525,18 +566,23 @@ WithSampleContent (Figma mobile composition):
 Desktop (`navigationOldDrawer`):
 
 Mobile (`navigationOldDrawerMobile`):
+
+### Смотри также
+
+- **`@cloud-ru/ds-uikit-product-header` / MainMenu** — новое меню и экспорт `MenuMobile` (bottom sheet) для `customMobileMenu`.
+- **`@cloud-ru/ds-uikit-product-card-predefined`** — `CardServiceLight` в сетке категорий и в `settingItems` на mobile.
 ### Адаптивность
 
 Desktop-first: раскладку берёт `AdaptiveProvider` в корне приложения / Storybook. Переключение toolbar `layoutType=mobile` показывает mobile-поверхность без смены API.
 
 | Проп | Desktop | Mobile |
 |------|---------|--------|
-| `isMobile` | Явный override поверхности; без пропа — из контекста | То же |
+| `customMobileMenu` | — | Заменяет legacy `MenuMobile`; без пропа — левый drawer |
 | `sidebarBottomSlot` | Нижний слот левой колонки | Не рендерится |
-| `settingItems` | Карточки в левой колонке | `@cloud-ru/ds-list` внизу scroll-body |
+| `settingItems` | Карточки в левой колонке | `CardServiceLight` + `Divider` внизу scroll-body |
 | `leftTop` | Один селектор платформы | Платформа + проект (два `PlatformSelector`) |
 | `search` | Вне Scroll, всегда развёрнут | Sticky в scroll-body, сначала свёрнут |
-| `rightTop` / `serviceGroups` | Правая колонка | Одноколоночный scroll-body |
+| `rightTop` / `serviceGroups` | Правая колонка | Одноколоночный scroll-body; сетка сервисов — 1 колонка |
 
 Форс конкретной раскладки в Storybook — toolbar-global `layoutType` или вложенный `AdaptiveProvider` / `withLayoutType`.
 

package/dist/cjs/components/MainMenu/MainMenu.d.ts

@@ -4,6 +4,6 @@ import { MainMenuProps } from './types';
 /**
  * Legacy MainMenu: desktop — двухколоночный drawer; mobile — левый одноколоночный drawer.
  */
-export declare function MainMenu({ open: openProp, setOpen: setOpenProp, leftTop, rightTop, settingItems, serviceGroups, platformGroups, onLinkChange, favorite, search, sidebarBottomSlot, disabled, ...rest }: WithSupportProps<MainMenuProps & {
+export declare function MainMenu({ open: openProp, setOpen: setOpenProp, leftTop, rightTop, settingItems, serviceGroups, platformGroups, onLinkChange, favorite, search, sidebarBottomSlot, customMobileMenu, disabled, ...rest }: WithSupportProps<MainMenuProps & {
     disabled?: boolean;
 }>): ReactElement;

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

@@ -12,9 +12,21 @@ const MenuMobile_1 = require("./helperComponents/MenuMobile");
 /**
  * Legacy MainMenu: desktop — двухколоночный drawer; mobile — левый одноколоночный drawer.
  */
-function MainMenu({ open: openProp, setOpen: setOpenProp, leftTop, rightTop, settingItems, serviceGroups, platformGroups, onLinkChange, favorite, search, sidebarBottomSlot, disabled, ...rest }) {
+function MainMenu({ open: openProp, setOpen: setOpenProp, leftTop, rightTop, settingItems, serviceGroups, platformGroups, onLinkChange, favorite, search, sidebarBottomSlot, customMobileMenu, disabled, ...rest }) {
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     const isMobile = (0, useMobileLayout_1.useMobileLayout)();
-    const MenuComponent = isMobile ? MenuMobile_1.MenuMobile : MenuDesktop_1.MenuDesktop;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, utils_1.extractSupportProps)(rest), appearance: 'neutral', view: 'simple', size: 'm', disabled: disabled, icon: (0, jsx_runtime_1.jsx)(product_1.MainMenuSVG, {}), onClick: () => setOpen(true), "data-test-id": constants_1.TEST_IDS.trigger }), (0, jsx_runtime_1.jsx)(MenuComponent, { open: open, setOpen: setOpen, leftTop: leftTop, rightTop: rightTop, settingItems: settingItems, serviceGroups: serviceGroups, platformGroups: platformGroups, onLinkChange: onLinkChange, favorite: favorite, search: search, sidebarBottomSlot: sidebarBottomSlot })] }));
+    const menuProps = {
+        open,
+        setOpen,
+        leftTop,
+        rightTop,
+        settingItems,
+        serviceGroups,
+        platformGroups,
+        onLinkChange,
+        favorite,
+        search,
+        sidebarBottomSlot,
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, utils_1.extractSupportProps)(rest), appearance: 'neutral', view: 'simple', size: 'm', disabled: disabled, icon: (0, jsx_runtime_1.jsx)(product_1.MainMenuSVG, {}), onClick: () => setOpen(true), "data-test-id": constants_1.TEST_IDS.trigger }), isMobile ? (customMobileMenu ?? (0, jsx_runtime_1.jsx)(MenuMobile_1.MenuMobile, { ...menuProps })) : (0, jsx_runtime_1.jsx)(MenuDesktop_1.MenuDesktop, { ...menuProps })] }));
 }

package/dist/cjs/components/MainMenu/types.d.ts

@@ -102,6 +102,8 @@ export type MainMenuProps = {
      * Без поиска: пункты в нижней части левой колонки (desktop), не в сетке карточек.
      * С поиском: группа попадает в результаты только при совпадении; отображается **последней**
      * (ниже `serviceGroups` и `platformGroups`). Обычно `favoritesEnabled: false`.
+     *
+     * Mobile: `CardServiceLight` + `Divider` внизу scroll-body.
      */
     settingItems?: LinksGroup;
     /**
@@ -127,5 +129,12 @@ export type MainMenuProps = {
     search?: SearchProps;
     /** Нижний слот левой колонки sidebar (Figma `bottom > items`). */
     sidebarBottomSlot?: ReactNode;
+    /**
+     * Только mobile: заменяет legacy `MenuMobile` (левый drawer).
+     * Например, `MenuMobile` из `@cloud-ru/ds-uikit-product-header` (bottom sheet).
+     *
+     * Передавайте те же `open` / `setOpen`, что и в `MainMenu` (controlled), иначе триггер и кастомное меню разойдутся.
+     */
+    customMobileMenu?: ReactNode;
 };
 export {};

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

@@ -4,6 +4,6 @@ import { MainMenuProps } from './types.js';
 /**
  * Legacy MainMenu: desktop — двухколоночный drawer; mobile — левый одноколоночный drawer.
  */
-export declare function MainMenu({ open: openProp, setOpen: setOpenProp, leftTop, rightTop, settingItems, serviceGroups, platformGroups, onLinkChange, favorite, search, sidebarBottomSlot, disabled, ...rest }: WithSupportProps<MainMenuProps & {
+export declare function MainMenu({ open: openProp, setOpen: setOpenProp, leftTop, rightTop, settingItems, serviceGroups, platformGroups, onLinkChange, favorite, search, sidebarBottomSlot, customMobileMenu, disabled, ...rest }: WithSupportProps<MainMenuProps & {
     disabled?: boolean;
 }>): ReactElement;

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

@@ -9,9 +9,21 @@ import { MenuMobile } from './helperComponents/MenuMobile/index.js';
 /**
  * Legacy MainMenu: desktop — двухколоночный drawer; mobile — левый одноколоночный drawer.
  */
-export function MainMenu({ open: openProp, setOpen: setOpenProp, leftTop, rightTop, settingItems, serviceGroups, platformGroups, onLinkChange, favorite, search, sidebarBottomSlot, disabled, ...rest }) {
+export function MainMenu({ open: openProp, setOpen: setOpenProp, leftTop, rightTop, settingItems, serviceGroups, platformGroups, onLinkChange, favorite, search, sidebarBottomSlot, customMobileMenu, disabled, ...rest }) {
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
     const isMobile = useMobileLayout();
-    const MenuComponent = isMobile ? MenuMobile : MenuDesktop;
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { ...extractSupportProps(rest), appearance: 'neutral', view: 'simple', size: 'm', disabled: disabled, icon: _jsx(MainMenuSVG, {}), onClick: () => setOpen(true), "data-test-id": TEST_IDS.trigger }), _jsx(MenuComponent, { open: open, setOpen: setOpen, leftTop: leftTop, rightTop: rightTop, settingItems: settingItems, serviceGroups: serviceGroups, platformGroups: platformGroups, onLinkChange: onLinkChange, favorite: favorite, search: search, sidebarBottomSlot: sidebarBottomSlot })] }));
+    const menuProps = {
+        open,
+        setOpen,
+        leftTop,
+        rightTop,
+        settingItems,
+        serviceGroups,
+        platformGroups,
+        onLinkChange,
+        favorite,
+        search,
+        sidebarBottomSlot,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ...extractSupportProps(rest), appearance: 'neutral', view: 'simple', size: 'm', disabled: disabled, icon: _jsx(MainMenuSVG, {}), onClick: () => setOpen(true), "data-test-id": TEST_IDS.trigger }), isMobile ? (customMobileMenu ?? _jsx(MenuMobile, { ...menuProps })) : _jsx(MenuDesktop, { ...menuProps })] }));
 }

package/dist/esm/components/MainMenu/types.d.ts

@@ -102,6 +102,8 @@ export type MainMenuProps = {
      * Без поиска: пункты в нижней части левой колонки (desktop), не в сетке карточек.
      * С поиском: группа попадает в результаты только при совпадении; отображается **последней**
      * (ниже `serviceGroups` и `platformGroups`). Обычно `favoritesEnabled: false`.
+     *
+     * Mobile: `CardServiceLight` + `Divider` внизу scroll-body.
      */
     settingItems?: LinksGroup;
     /**
@@ -127,5 +129,12 @@ export type MainMenuProps = {
     search?: SearchProps;
     /** Нижний слот левой колонки sidebar (Figma `bottom > items`). */
     sidebarBottomSlot?: ReactNode;
+    /**
+     * Только mobile: заменяет legacy `MenuMobile` (левый drawer).
+     * Например, `MenuMobile` из `@cloud-ru/ds-uikit-product-header` (bottom sheet).
+     *
+     * Передавайте те же `open` / `setOpen`, что и в `MainMenu` (controlled), иначе триггер и кастомное меню разойдутся.
+     */
+    customMobileMenu?: ReactNode;
 };
 export {};