llms.txt

UserMenu

UserMenu — dropdown с профилем пользователя, переключателем темы, дополнительными пунктами и кнопкой выхода.

Когда использовать

  • Блок аккаунта в правой части шапки консоли.
  • Переключение light / dark / system темы из интерфейса.

Примеры использования

Базовое меню

Базовое менюПрофиль, тема, пункты настроек и actions. Открывается по клику на аватар.
tsx
import { UserMenu } from '@cloud-ru/ds-uikit-product-header';

import { SETTING_ITEMS } from '../../../stories/demoData';

export function Basic() {
  return (
    <UserMenu
      profile={{ fullName: 'Ivan Petrov', email: 'ipetrov@cloud.ru', inviteCount: 1 }}
      theme={{ value: 'light' }}
      settingItems={SETTING_ITEMS}
      topItems={[{ content: { label: 'Option 1' } }, { content: { label: 'Option 2' } }]}
      data-test-id='header-user-menu-basic'
    />
  );
}

Controlled тема

Controlled тема`theme.value` и `theme.onChange` синхронизируют выбор темы с приложением.
tsx
import { UserMenu } from '@cloud-ru/ds-uikit-product-header';
import { useState } from 'react';

import { SETTING_ITEMS } from '../../../stories/demoData';

export function ControlledTheme() {
  const [theme, setTheme] = useState<'light' | 'dark' | 'system'>('light');

  return (
    <UserMenu
      profile={{ fullName: 'Ivan Petrov', email: 'ipetrov@cloud.ru' }}
      theme={{ value: theme, onChange: setTheme }}
      settingItems={SETTING_ITEMS}
      data-test-id='header-user-menu-theme'
    />
  );
}

Props

Types

PropsUserMenuProps
PropTypeDefaultRequiredDescription
bottomItemsItem[]—noПункты перед «Выйти из аккаунта». На desktop закреплены снизу
onClick(() => void)—noКолбэк клика по кнопке-триггеру.
onLogout(() => void)—noКолбэк клика по пункту «Выйти».
openboolean—noОткрыто ли меню. Не передано — состояние открытия неуправляемое (меню само переключает себя по клику на кнопку).
organizationItemsItem[]—noСписок организаций. На desktop — единственная прокручиваемая часть меню
profileUserProfileProps{}noПрофиль пользователя (имя, email, счётчик приглашений).
setOpen((open: boolean) => void)—noКолбэк открытия/закрытия меню.
settingItemsBaseItem[]—noПункты настроек в нижней части меню.
themeThemeProps—noПереключатель темы в меню. Без пропа не отображается.
topItemsItem[]—noПункты после темы. На desktop закреплены сверху вместе с профилем и темой
triggerTooltipstring—noТекст подсказки для кнопки-триггера.

ThemePropsinterface

PropTypeDefaultRequiredDescription
onChange((themeMode: ThemeMode) => void) | undefined—noКолбэк изменения режима темы.
value"dark" | "light" | "system"—noТекущий режим темы. Без пропа переключатель темы в меню не отображается.

UserProfilePropsinterface

PropTypeDefaultRequiredDescription
emailstring | undefined—noEmail пользователя.
fullNamestring | undefined—noПолное имя пользователя. Отображается в аватаре (первые буквы) и в пункте профиля меню.
inviteCountnumber | undefined—noЧисло активных приглашений — отображается счётчиком на кнопке-триггере меню.
itemWrapRender((node: ReactNode) => ReactNode) | undefined—noОборачивает содержимое пункта профиля — например, ссылкой или дополнительной разметкой.
onClick((e: MouseEvent<HTMLElement>) => void) | undefined—noКолбэк клика по пункту профиля.

Related props

BaseItemPropsinterface

PropTypeDefaultRequiredDescription
afterContentstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noСлот после основного контента
beforeContentstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noСлот до основного контента
checkedboolean | undefined—noУправляемое состояние выбранности айтема
classNamestring | undefined—noCSS-класс
contentReactNode | ItemContentProps—noОсновной контент айтема
data-test-idstring | undefined—no
disabledboolean | undefined—noФлаг неактивности элемента
hiddenboolean | undefined—noСкрыть элемент из списка (не рендерится и исключается из навигации)
idItemId | undefined—noУникальный идентификатор
inactiveboolean | undefined—noФлаг отображения отключения реакции на любое css состояние (hover/focus и тд) <br> Также элемент исключается из навигации с клавиатуры и не может быть выбран (selection)
itemRefRefObject<HTMLElement> | undefined—noСсылка на DOM-элемент айтема
itemWrapRender((item: ReactNode) => ReactNode) | undefined—noРендер-обёртка вокруг айтема (например, для проксирования в `Tooltip`/`Link`)
onBlur((e: FocusEvent<HTMLElement>) => void) | undefined—noКолбек обработки блюра
onClick((e: MouseEvent<HTMLElement>) => void) | undefined—noКолбек обработки клика
onFocus((e: FocusEvent<HTMLElement>) => void) | undefined—noКолбек обработки фокуса
onKeyDown((e: KeyboardEvent<HTMLElement>) => void) | undefined—noКолбек обработки нажатия клавиши
onMouseDown((e: MouseEvent<HTMLElement>) => void) | undefined—noКолбек обработки нажатия кнопки мыши
showSwitchIconboolean | undefined—noФлаг отображения иконки у чекбоксов
switchboolean | undefined—noФлаг отображения состояния выбранного элемента через switch

BaseItemWithoutNonGroupinterface

PropTypeDefaultRequiredDescription
afterContentstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noСлот после основного контента
beforeContentstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noСлот до основного контента
checkedboolean | undefined—noУправляемое состояние выбранности айтема
classNamestring | undefined—noCSS-класс
contentReactNode | ItemContentProps—noОсновной контент айтема
data-test-idstring | undefined—no
disabledboolean | undefined—noФлаг неактивности элемента
hiddenboolean | undefined—noСкрыть элемент из списка (не рендерится и исключается из навигации)
idItemId | undefined—noУникальный идентификатор
itemRefRefObject<HTMLElement> | undefined—noСсылка на DOM-элемент айтема
itemWrapRender((item: ReactNode) => ReactNode) | undefined—noРендер-обёртка вокруг айтема (например, для проксирования в `Tooltip`/`Link`)
onBlur((e: FocusEvent<HTMLElement>) => void) | undefined—noКолбек обработки блюра
onClick((e: MouseEvent<HTMLElement>) => void) | undefined—noКолбек обработки клика
onFocus((e: FocusEvent<HTMLElement>) => void) | undefined—noКолбек обработки фокуса
onKeyDown((e: KeyboardEvent<HTMLElement>) => void) | undefined—noКолбек обработки нажатия клавиши
onMouseDown((e: MouseEvent<HTMLElement>) => void) | undefined—noКолбек обработки нажатия кнопки мыши
showSwitchIconboolean | undefined—noФлаг отображения иконки у чекбоксов

CommonGroupIteminterface

PropTypeDefaultRequiredDescription
beforeContentstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noСлот иконки слева от label.
dividerboolean | undefined—noПоказать разделитель над группой
groupVariant"subtitle" | "subtitleTertiary"—noВизуальный стиль заголовка группы
hiddenboolean | undefined—noСкрыть группу из списка
labelstring | undefined—noЗаголовок группы
truncate{ variant?: TruncateStringProps["variant"]; } | undefined—noНастройки усечения длинного заголовка группы

DroplistPropsinterface

PropTypeDefaultRequiredDescription
actionButtonstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noТолько mobile (`BottomSheet`): action-кнопка справа в шапке.
barHideStrategy"leave" | "move" | "never" | "scroll"—noУправление скрытием скролл баров: <br> - `Never` - показывать всегда <br> - `Leave` - скрывать когда курсор покидает компонент <br> - `Scroll` - показывать только когда происходит скроллинг <br> - `Move` - показывать при движении курсора над компонентом
childrenReactNode | ((params: { onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void; }) => ReactNode)—yesТриггер для дроплиста
classNamestring | undefined—noCSS-класс
closeDroplistOnItemClickboolean | undefined—noЗакрывать выпадающий список после клика на базовый айтем. Работает в режимах selection: 'none' | 'single'
closeOnPopstateboolean | undefined—noЗакрывать ли поповер при переходе по истории браузера
collapseCollapseState | undefined—noНастройки раскрытия элементов
containerRefObject<HTMLElement | null> | undefined—noКонтейнер портала (ref). Переопределяет `PortalContext` для этого дроплиста (по аналогии с `container` у Modal/Drawer). По умолчанию — из `PortalContextProvider`.
contentRender((props: ContentRenderProps) => ReactNode) | undefined—noРендер функция основного контента айтема
data-test-idstring | undefined—no
dataErrorboolean | undefined—noЗагрузка данных завершилась ошибкой: показывается `errorDataState`
dataFilteredboolean | undefined—noТекущий пустой список — результат поиска/фильтра: показывается `noResultsState` вместо `noDataState`
errorDataStateEmptyStateProps | undefined—noЭкран при ошибке запроса
footerstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noКастомизируемый элемент в конце списка
footerActiveElementsRefsRefObject<HTMLElement>[] | undefined—noСписок ссылок на кастомные элементы, помещенные в специальную секцию внизу списка
footerDividerboolean | undefined—noПоказывать divider между body и footer (Figma `dropdownContainer.dividerWrapper` снизу)
headerstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noКастомизируемый элемент в начале списка — Figma `dropdownContainer.topBar`. Подходит для заголовка / справочного блока над поиском.
headerDividerboolean | undefined—noПоказывать divider между header и body (Figma `dropdownContainer.dividerWrapper` сверху)
itemsItem[]—yesОсновные элементы списка
labelstring | undefined—noТолько mobile (`BottomSheet`): заголовок шапки.
limitedScrollHeightboolean | undefined—noОграничить максимальную высоту скролл-контейнера в зависимости от `size`
listRefRefObject<HTMLElement> | undefined—noСсылка на элемент выпадающего списка
loadingboolean | undefined—noФлаг, отвечающий за состояние загрузки списка
markerboolean | undefined—noОтображать ли маркер у выбранного элемента списка
noDataStateEmptyStateProps | undefined—noЭкран при отсутствии данных
noResultsStateEmptyStateProps | undefined—noЭкран при отсутствии результатов поиска или фильтров
onBackButtonClick(() => void) | undefined—noТолько mobile (`BottomSheet`): callback back-кнопки.
onOpenChange((isOpen: boolean) => void) | undefined—noКолбек отображения компонента. Срабатывает при изменении состояния open.
onScroll((event?: Event) => void) | undefined—noКолбек на скролл прокручиваемого списка
openboolean | undefined—noУправляет состоянием показан/не показан.
pinBottomItem[] | undefined—noЭлементы списка, закрепленные снизу
pinTopItem[] | undefined—noЭлементы списка, закрепленные сверху
placement"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"—noПоложение поповера относительно своего триггера (children).
scrollboolean | undefined—noВключить ли скролл для основной части списка
scrollContainerClassNamestring | undefined—noCSS-класс для scroll обертки основного списка айтемов
scrollContainerRefRef<HTMLElement> | undefined—noСсылка на контейнер, который скроллится
scrollRefRef<HTMLElement> | undefined—noСсылка на элемент, обозначающий самый конец прокручиваемого списка
scrollToSelectedItemboolean | undefined—noФлаг, отвечающий за прокручивание до выбранного элемента
searchSearchState | undefined—noНастройки поисковой строки
selectionSelectionMultipleState | SelectionSingleState | undefined—noНастройки выбора элементов. `mode: 'single'` — один выбранный элемент (`value: ItemId`), `mode: 'multiple'` — множественный выбор (`value: ItemId[]`). Без `selection` выбора нет — клик вызывает только `onClick` элемента.
size"l" | "m" | "s"—noРазмер списка
slotAfterTitlestring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noТолько mobile (`BottomSheet`): slot справа от заголовка.
snapPointsSnapPoint[] | undefined—noМассив фиксированных позиций sheet'а от меньшей к большей. По дефолту `undefined` — sheet `height: auto` с одним snap'ом по высоте контента. Пример: `[0.5, 1]` — sheet открывается на половину экрана, drag вверх раскрывает до full-viewport; drag вниз ниже `0.5` ведёт к закрытию. Контракт массива (движок не сортирует и не дедуплицирует — порядок и различимость на стороне потребителя): - строго по возрастанию: индекс `0` — самая компактная позиция, последний — top / expanded; - значения должны резолвиться в различные высоты (`['50%', 0.5]` на типичном вьюпорте дадут одну высоту → дубль-индекс будет недостижим свайпом); - `'fit-content'` имеет смысл только как ЕДИНСТВЕННЫЙ snap (без `snapPoints`); внутри массива фиксированных позиций его «контентная» высота не определена.
trigger"click" | "clickAndFocusVisible" | "focus" | "focusVisible" | "hover" | "hoverAndFocus" | "hoverAndFocusVisible"—noУсловие отображения поповера: <br/> - `click` - открывать по клику <br/> - `hover` - открывать по ховеру <br/> - `focusVisible` - открывать по focus-visible <br/> - `focus` - открывать по фокусу <br/> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br/> - `hoverAndFocus` - открывать по ховеру и фокусу <br/> - `clickAndFocusVisible` - открывать по клику и focus-visible
triggerClassNamestring | undefined—noCSS-класс триггера
triggerElemRefRefObject<HTMLElement> | undefined—noСсылка на элемент-триггер для дроплиста
untouchableScrollbarsboolean | undefined—noОтключает возможность взаимодействовать со скролбарами мышью.
virtualizedboolean | undefined—noВключить виртуализацию элементов списка. Рекомендуется при количестве элементов от 1000.
widthStrategy"auto" | "eq" | "gte"—noСтратегия управления шириной контейнера поповера <br/> - `auto` - соответствует ширине контента, <br/> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br/> - `eq` - Equal, строго равен ширине таргета.
withDividersboolean | undefined—noТонкие линии между topBar↔body и body↔footer: разграничивают закреплённые шапку и подвал от прокручиваемого под ними содержимого. Передайте `false`, чтобы убрать обе линии.

ScrollPropsinterface

PropTypeDefaultRequiredDescription
barHideStrategy"leave" | "move" | "never" | "scroll"—noУправление скрытием скролл баров: <br> - `Never` - показывать всегда <br> - `Leave` - скрывать когда курсор покидает компонент <br> - `Scroll` - показывать только когда происходит скроллинг <br> - `Move` - показывать при движении курсора над компонентом
onScroll((event?: Event) => void) | undefined—noКолбек на скролл прокручиваемого списка
scrollboolean | undefined—noВключить ли скролл для основной части списка
scrollContainerRefRef<HTMLElement> | undefined—noСсылка на контейнер, который скроллится
scrollRefRef<HTMLElement> | undefined—noСсылка на элемент, обозначающий самый конец прокручиваемого списка
untouchableScrollbarsboolean | undefined—noОтключает возможность взаимодействовать со скролбарами мышью.

Types

UserMenuProps

Storybook

Открыть в Storybook →

Figma