@cloud-ru/ds-uikit-product-header 1.5.2-preview-0406cbd2.0 → 1.5.2-preview-43886f3e.0

package/README.md

@@ -656,7 +656,7 @@ export function Basic() {
       profile={{ fullName: 'Ivan Petrov', email: 'ipetrov@cloud.ru', inviteCount: 1 }}
       theme={{ value: 'light' }}
       settingItems={SETTING_ITEMS}
-      items={[{ content: { label: 'Option 1' } }, { content: { label: 'Option 2' } }]}
+      topItems={[{ content: { label: 'Option 1' } }, { content: { label: 'Option 2' } }]}
       data-test-id='header-user-menu-basic'
     />
   );
@@ -693,14 +693,16 @@ export function ControlledTheme() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `items` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — |  |
+| `bottomItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — | Пункты перед «Выйти из аккаунта». На desktop закреплены снизу |
 | `onClick` | `(() => void)` | — |  |
 | `onLogout` | `(() => void)` | — |  |
 | `open` | `boolean` | — |  |
+| `organizationItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — | Список организаций. На desktop — единственная прокручиваемая часть меню |
 | `profile` | `UserProfileProps` | `{}` |  |
 | `setOpen` | `((open: boolean) => void)` | — |  |
 | `settingItems` | `BaseItemProps` | — |  |
 | `theme` | `ThemeProps` | — |  |
+| `topItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — | Пункты после темы. На desktop закреплены сверху вместе с профилем и темой |
 | `triggerTooltip` | `string` | — |  |
 
 ##### Related types

package/dist/cjs/components/HeaderButton/HeaderButton.js

@@ -7,7 +7,6 @@ exports.HeaderButton = HeaderButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("@cloud-ru/ds-button");
 const tooltip_1 = require("@cloud-ru/ds-tooltip");
-const classnames_1 = __importDefault(require("classnames"));
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 /**
  * HeaderButton — кнопка хедера с тултипом (лого, пользовательское меню и т.п.).
@@ -27,5 +26,5 @@ function HeaderButton({ tooltip, isMobile, className, ...rest }) {
                 placement: 'bottom',
                 ...tooltip,
                 triggerClassName: styles_module_scss_1.default.tooltipTrigger,
-            }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.headerButton, className) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: className }) }));
 }

package/dist/cjs/components/Logo/Logo.js

@@ -29,7 +29,8 @@ function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest
                     setError(true);
                 } }));
         }
-        return ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.logoWrap, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.iconStack, children: [(0, jsx_runtime_1.jsx)(logos_1.CloudLogo, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconDefault) }), (0, jsx_runtime_1.jsx)(product_1.HomeFilledSVG, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconHover) })] }), mode && mode !== constants_1.HEADER_LOGO_MODE.Prod && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { as: 'span', label: mode, size: 'xs', appearance: constants_1.MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
+        const showMode = mode && mode !== constants_1.HEADER_LOGO_MODE.Prod;
+        return ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.logoWrap, "data-with-mode": showMode || undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.iconStack, children: [(0, jsx_runtime_1.jsx)(logos_1.CloudLogo, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconDefault) }), (0, jsx_runtime_1.jsx)(product_1.HomeFilledSVG, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconHover) })] }), showMode && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { as: 'span', label: constants_1.MAP_LOGO_MODE_TO_LABEL[mode], size: 'xs', appearance: constants_1.MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
     }, [error, mode, path, logoThemeClassName]);
     return ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { as: 'a', tooltip: tooltip, className: (0, classnames_1.default)(styles_module_scss_1.default.logo, className), href: href, tabIndex: 0, onClick: onClick, loading: loading, icon: logo, ...(0, utils_1.extractDataTestProps)(rest) }));
 }

package/dist/cjs/components/Logo/constants.d.ts

@@ -8,3 +8,5 @@ export declare const HEADER_LOGO_MODE: {
 };
 export type HeaderLogoMode = ValueOf<typeof HEADER_LOGO_MODE>;
 export declare const MAP_LOGO_MODE_TO_APPEARANCE: Record<Exclude<HeaderLogoMode, 'prod'>, PromoTagProps['appearance']>;
+/** Подпись тега режима, как в макете `logoEvo` */
+export declare const MAP_LOGO_MODE_TO_LABEL: Record<Exclude<HeaderLogoMode, 'prod'>, string>;

package/dist/cjs/components/Logo/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MAP_LOGO_MODE_TO_APPEARANCE = exports.HEADER_LOGO_MODE = void 0;
+exports.MAP_LOGO_MODE_TO_LABEL = exports.MAP_LOGO_MODE_TO_APPEARANCE = exports.HEADER_LOGO_MODE = void 0;
 exports.HEADER_LOGO_MODE = {
     Develop: 'develop',
     Stage: 'stage',
@@ -12,3 +12,9 @@ exports.MAP_LOGO_MODE_TO_APPEARANCE = {
     [exports.HEADER_LOGO_MODE.Stage]: 'orange',
     [exports.HEADER_LOGO_MODE.Hybrid]: 'violet',
 };
+/** Подпись тега режима, как в макете `logoEvo` */
+exports.MAP_LOGO_MODE_TO_LABEL = {
+    [exports.HEADER_LOGO_MODE.Develop]: 'dev',
+    [exports.HEADER_LOGO_MODE.Stage]: 'stage',
+    [exports.HEADER_LOGO_MODE.Hybrid]: 'hybrid',
+};

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

@@ -9,6 +9,9 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
 }
+.logoWrap[data-with-mode]{
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
 
 .iconStack{
   position:relative;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css

@@ -32,7 +32,7 @@
 .actions{
   display:flex;
   flex-shrink:0;
-  gap:var(--sn-primitive-dimension-8, 8px);
+  gap:var(--sn-primitive-dimension-0, 0px);
   align-items:center;
   margin-left:auto;
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css

@@ -40,10 +40,6 @@
   min-width:0;
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
 }
-.headerTitle:hover .headerActions, .headerTitle:focus-visible .headerActions, .headerTitle:has(:focus-visible) .headerActions{
-  pointer-events:auto;
-  opacity:1;
-}
 
 .group{
   position:relative;
@@ -110,10 +106,10 @@
   grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
-.groupBody:not([data-mobile]):not([data-subcategory-body]){
+.groupBody:not([data-subcategory-body]){
   padding:var(--sn-primitive-dimension-4, 4px);
 }
-.groupBody:not([data-mobile]):not([data-show-description]){
+.groupBody:not([data-show-description]){
   gap:var(--sn-primitive-dimension-0, 0px);
 }
 @container (width <= 728px){

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

@@ -67,5 +67,5 @@ function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
                                     onChange: favorite.onChange(service.id),
                                 }, ...(0, utils_3.getCommonCardProps)(service, handleFavoriteServiceClick(service)) }, service.id))), !isEmpty && !isFavoritesSegment && recentCards] }) }) })) : ((0, jsx_runtime_1.jsx)(components_1.FavoritesSortable, { favorite: favorite, favoriteItems: favoriteItems, segment: resolvedSegment, setSegment: setSegment, isEmpty: isEmpty, recentCards: recentCards, onFavoriteServiceClick: handleFavoriteServiceClick }));
     })();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.FAVORITES_TEST_IDS.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, headerClassName), "data-test-id": constants_1.FAVORITES_TEST_IDS.header, children: [(0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', width: segment_control_1.WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', ...favorite.actions, className: comfortClassName, closeDroplistOnItemClick: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', size: 'm', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, { size: 24 }), "data-test-id": constants_1.FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.FAVORITES_TEST_IDS.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, headerClassName), "data-test-id": constants_1.FAVORITES_TEST_IDS.header, children: [(0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', width: segment_control_1.WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', ...favorite.actions, className: comfortClassName, closeDroplistOnItemClick: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'simple', size: 'm', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, { size: 24 }), "data-test-id": constants_1.FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
 }

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

@@ -13,4 +13,10 @@
   flex-grow:1;
   flex-shrink:1;
   justify-content:flex-start;
+}
+.closeButton.closeButton[data-view=simple][data-appearance=neutral] [data-text-opacity]{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+.closeButton.closeButton[data-view=simple][data-appearance=neutral] [aria-hidden][data-text-opacity]{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
 }

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

@@ -12,5 +12,5 @@ const locale_1 = require("../../../../locale");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 exports.Search = (0, react_1.forwardRef)(({ value, onChange, onBlur, onFocus, isMobile = false }, ref) => {
     const { t } = locale_1.headerLocale.useTranslations();
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchWrap, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(search_1.Search, { ref: ref, size: 'm', outline: !isMobile, placeholder: t('searchByServices'), value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, "data-test-id": constants_1.TEST_IDS.mainMenu.search, className: styles_module_scss_1.default.search, background: isMobile }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchWrap, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(search_1.Search, { ref: ref, size: 'm', outline: false, placeholder: t('searchByServices'), value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, "data-test-id": constants_1.TEST_IDS.mainMenu.search, className: styles_module_scss_1.default.search, background: isMobile }) }));
 });

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

@@ -1,6 +1,7 @@
 .breadcrumbs{
   display:flex;
   align-items:center;
+  box-sizing:border-box;
   min-width:0;
   height:100%;
   padding:0 var(--sn-primitive-dimension-8, 8px) !important;

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

@@ -3,7 +3,12 @@ import { ThemeProps, UserProfileProps } from './types';
 export type UserMenuProps = {
     profile?: UserProfileProps;
     theme?: ThemeProps;
-    items?: DroplistProps['items'];
+    /** Пункты после темы. На desktop закреплены сверху вместе с профилем и темой */
+    topItems?: DroplistProps['items'];
+    /** Список организаций. На desktop — единственная прокручиваемая часть меню */
+    organizationItems?: DroplistProps['items'];
+    /** Пункты перед «Выйти из аккаунта». На desktop закреплены снизу */
+    bottomItems?: DroplistProps['items'];
     settingItems?: BaseItemProps[];
     onLogout?(): void;
     open?: boolean;
@@ -11,4 +16,4 @@ export type UserMenuProps = {
     triggerTooltip?: string;
     onClick?(): void;
 };
-export declare function UserMenu({ profile, open: openProp, setOpen: setOpenProp, onLogout, items, settingItems, theme, onClick, triggerTooltip, }: UserMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function UserMenu({ profile, open: openProp, setOpen: setOpenProp, onLogout, topItems, organizationItems, bottomItems, settingItems, theme, onClick, triggerTooltip, }: UserMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/UserMenu/UserMenu.js

@@ -22,17 +22,19 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 // пунктам меню (профиль, организации, выход) состояние выбора не меняют — подсвечена
 // всегда только текущая тема и ветка `Тема` над ней.
 const SELECTION_STUB = { mode: 'single', value: '__empty_stub__', onChange: () => { } };
-function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout, items, settingItems, theme, onClick, triggerTooltip, }) {
+function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout, topItems, organizationItems, bottomItems, settingItems, theme, onClick, triggerTooltip, }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const isMobile = (0, useMobileLayout_1.useMobileLayout)();
     const comfortClassName = (0, useDesktopComfortClassName_1.useDesktopComfortClassName)();
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     const { fullName = '', inviteCount } = profile;
-    const userMenuItems = (0, useUserMenuItems_1.useUserMenuItems)({
+    const { pinTop, items: menuItems, pinBottom } = (0, useUserMenuItems_1.useUserMenuItems)({
         isMobile,
         profile,
         theme,
-        items,
+        topItems,
+        organizationItems,
+        bottomItems,
         settingItems,
         onClose: () => {
             setOpen(false);
@@ -48,5 +50,5 @@ function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout
                 appearance: 'primary',
             }
             : undefined, "data-test-id": constants_1.TEST_IDS.userMenu.button, icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { appearance: 'red', size: 's', name: fullName, showTwoSymbols: true }), "data-pressed": open })), [fullName, inviteCount, onClick, open, setOpen, isMobile, triggerTooltip]);
-    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { open: open, onOpenChange: setOpen, size: 'm', selection: SELECTION_STUB, items: userMenuItems, trigger: 'click', placement: 'bottom-end', className: (0, classnames_1.default)(styles_module_scss_1.default.userMenuDroplist, comfortClassName), closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.userMenu.root, label: t('user'), snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, children: trigger }));
+    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { open: open, onOpenChange: setOpen, size: 'm', selection: SELECTION_STUB, pinTop: pinTop, items: menuItems, pinBottom: pinBottom, scroll: !isMobile, trigger: 'click', placement: 'bottom-end', className: (0, classnames_1.default)(styles_module_scss_1.default.userMenuDroplist, comfortClassName), closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.userMenu.root, label: t('user'), snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, children: trigger }));
 }

package/dist/cjs/components/UserMenu/hooks/useProfileItem.js

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useProfileItem = useProfileItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const avatar_1 = require("@cloud-ru/ds-avatar");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const react_1 = require("react");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 function useProfileItem({ fullName = '', email = '', itemWrapRender, onClick, }) {
     return (0, react_1.useMemo)(() => ({
         content: {
@@ -16,7 +20,7 @@ function useProfileItem({ fullName = '', email = '', itemWrapRender, onClick, })
         },
         onClick,
         beforeContent: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { appearance: 'red', size: 's', name: fullName, showTwoSymbols: true }),
-        afterContent: (0, jsx_runtime_1.jsx)(system_1.SettingsSVG, {}),
+        afterContent: (0, jsx_runtime_1.jsx)(system_1.SettingsSVG, { className: styles_module_scss_1.default.profileSettingsIcon }),
         itemWrapRender,
         id: 'header__user-menu__button',
         'data-test-id': 'header__user-menu__manage-profile',

package/dist/cjs/components/UserMenu/hooks/useUserMenuItems.d.ts

@@ -1,87 +1,16 @@
 import { BaseItemProps, ListProps } from '@cloud-ru/ds-list';
-import { MouseEvent } from 'react';
 import { ThemeProps, UserProfileProps } from '../types';
 type UseMenuItems = {
     profile: UserProfileProps;
     theme?: ThemeProps;
-    items?: ListProps['items'];
+    topItems?: ListProps['items'];
+    organizationItems?: ListProps['items'];
+    bottomItems?: ListProps['items'];
     settingItems?: BaseItemProps[];
     onLogout?(): void;
     onClose?(): void;
     isMobile?: boolean;
 };
-export declare function useUserMenuItems({ profile, theme, onLogout, items: itemsProp, isMobile, onClose, settingItems, }: UseMenuItems): (import("@cloud-ru/ds-list").AccordionItem | import("@cloud-ru/ds-list").NextListItem | import("@cloud-ru/ds-list").GroupItem | import("@cloud-ru/ds-list").GroupSelectItem | {
-    onClick: (e: MouseEvent<HTMLElement>) => void;
-    'data-test-id'?: string;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    beforeContent?: import("react").ReactNode;
-    afterContent?: import("react").ReactNode;
-    content?: import("@cloud-ru/ds-list").ItemContentProps | import("react").ReactNode;
-    onMouseDown?(e: MouseEvent<HTMLElement>): void;
-    onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
-    onFocus?(e: import("react").FocusEvent<HTMLElement>): void;
-    onBlur?(e: import("react").FocusEvent<HTMLElement>): void;
-    id?: import("@cloud-ru/ds-list").ItemId;
-    disabled?: boolean;
-    hidden?: boolean;
-    itemRef?: import("react").RefObject<HTMLElement>;
-    className?: string;
-    inactive?: boolean;
-    switch?: boolean;
-    showSwitchIcon?: boolean;
-    itemWrapRender?(item: import("react").ReactNode): import("react").ReactNode;
-    checked?: boolean;
-})[];
+type UserMenuSections = Required<Pick<ListProps, 'pinTop' | 'items' | 'pinBottom'>>;
+export declare function useUserMenuItems({ profile, theme, onLogout, topItems, organizationItems, bottomItems, isMobile, onClose, settingItems, }: UseMenuItems): UserMenuSections;
 export {};

package/dist/cjs/components/UserMenu/hooks/useUserMenuItems.js

@@ -12,21 +12,12 @@ const DIVIDER_ITEM = {
     divider: true,
     items: [],
 };
-function useUserMenuItems({ profile, theme, onLogout, items: itemsProp = [], isMobile, onClose, settingItems = [], }) {
+function useUserMenuItems({ profile, theme, onLogout, topItems = [], organizationItems = [], bottomItems = [], isMobile, onClose, settingItems = [], }) {
     const profileItem = (0, useProfileItem_1.useProfileItem)(profile);
     const themeItem = (0, useThemeItem_1.useThemeItem)({ ...(theme || {}), isMobile, onClose });
     const logoutItem = (0, useLogoutItem_1.useLogoutItem)({ onLogout });
-    const items = (0, react_1.useMemo)(() => {
-        let items = [profileItem];
-        if (themeItem) {
-            items = items.concat([DIVIDER_ITEM, themeItem]);
-        }
-        items = items.concat(itemsProp);
-        items = items.concat(logoutItem);
-        if (isMobile && Boolean(settingItems?.length)) {
-            items = items.concat([DIVIDER_ITEM, ...settingItems]);
-        }
-        return items.map(item => {
+    return (0, react_1.useMemo)(() => {
+        const withClose = (list) => list.map(item => {
             if ((0, list_1.isBaseItemProps)(item)) {
                 return {
                     ...item,
@@ -40,6 +31,19 @@ function useUserMenuItems({ profile, theme, onLogout, items: itemsProp = [], isM
             }
             return item;
         });
-    }, [isMobile, itemsProp, logoutItem, onClose, profileItem, settingItems, themeItem]);
-    return items;
+        let pinTop = [profileItem];
+        if (themeItem) {
+            pinTop = pinTop.concat([DIVIDER_ITEM, themeItem]);
+        }
+        pinTop = pinTop.concat(topItems);
+        let pinBottom = bottomItems.concat(logoutItem);
+        if (isMobile && Boolean(settingItems?.length)) {
+            pinBottom = pinBottom.concat([DIVIDER_ITEM, ...settingItems]);
+        }
+        // В шторке прокручивается всё меню, закреплять части незачем; разделитель над организациями добавляем сами
+        if (isMobile) {
+            return { pinTop: [], items: withClose([...pinTop, DIVIDER_ITEM, ...organizationItems, ...pinBottom]), pinBottom: [] };
+        }
+        return { pinTop: withClose(pinTop), items: withClose(organizationItems), pinBottom: withClose(pinBottom) };
+    }, [bottomItems, isMobile, logoutItem, onClose, organizationItems, profileItem, settingItems, themeItem, topItems]);
 }

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

@@ -2,6 +2,6 @@
   width:256px;
 }
 
-.userMenuTrigger{
-  display:block;
+.profileSettingsIcon{
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
 }

package/dist/cjs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
 export * from './constants';
+export * from './hooks/useDesktopComfortClassName';
 export * from './locale';
 export { useLocalStorage } from '@cloud-ru/ds-utils';

package/dist/cjs/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLocalStorage = void 0;
 __exportStar(require("./components"), exports);
 __exportStar(require("./constants"), exports);
+__exportStar(require("./hooks/useDesktopComfortClassName"), exports);
 __exportStar(require("./locale"), exports);
 var utils_1 = require("@cloud-ru/ds-utils");
 Object.defineProperty(exports, "useLocalStorage", { enumerable: true, get: function () { return utils_1.useLocalStorage; } });

package/dist/cjs/style.css

@@ -56,6 +56,9 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
 }
+.logoWrap[data-with-mode]{
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
 
 .iconStack{
   position:relative;
@@ -196,7 +199,7 @@
 .actions{
   display:flex;
   flex-shrink:0;
-  gap:var(--sn-primitive-dimension-8, 8px);
+  gap:var(--sn-primitive-dimension-0, 0px);
   align-items:center;
   margin-left:auto;
 }
@@ -324,10 +327,6 @@
   min-width:0;
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
 }
-.headerTitle:hover .headerActions, .headerTitle:focus-visible .headerActions, .headerTitle:has(:focus-visible) .headerActions{
-  pointer-events:auto;
-  opacity:1;
-}
 
 .group{
   position:relative;
@@ -394,10 +393,10 @@
   grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
-.groupBody:not([data-mobile]):not([data-subcategory-body]){
+.groupBody:not([data-subcategory-body]){
   padding:var(--sn-primitive-dimension-4, 4px);
 }
-.groupBody:not([data-mobile]):not([data-show-description]){
+.groupBody:not([data-show-description]){
   gap:var(--sn-primitive-dimension-0, 0px);
 }
 @container (width <= 728px){
@@ -773,6 +772,12 @@
   flex-shrink:1;
   justify-content:flex-start;
 }
+.closeButton.closeButton[data-view=simple][data-appearance=neutral] [data-text-opacity]{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+.closeButton.closeButton[data-view=simple][data-appearance=neutral] [aria-hidden][data-text-opacity]{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
 }
@@ -895,6 +900,7 @@
 .breadcrumbs{
   display:flex;
   align-items:center;
+  box-sizing:border-box;
   min-width:0;
   height:100%;
   padding:0 var(--sn-primitive-dimension-8, 8px) !important;
@@ -914,6 +920,6 @@
   width:256px;
 }
 
-.userMenuTrigger{
-  display:block;
+.profileSettingsIcon{
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
 }

package/dist/esm/components/HeaderButton/HeaderButton.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@cloud-ru/ds-button';
 import { WithTooltip } from '@cloud-ru/ds-tooltip';
-import cn from 'classnames';
 import styles from './styles.module.css';
 /**
  * HeaderButton — кнопка хедера с тултипом (лого, пользовательское меню и т.п.).
@@ -21,5 +20,5 @@ export function HeaderButton({ tooltip, isMobile, className, ...rest }) {
                 placement: 'bottom',
                 ...tooltip,
                 triggerClassName: styles.tooltipTrigger,
-            }, children: _jsx(Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: cn(styles.headerButton, className) }) }));
+            }, children: _jsx(Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: className }) }));
 }

package/dist/esm/components/Logo/Logo.js

@@ -7,7 +7,7 @@ import { extractDataTestProps } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { HeaderButton } from '../HeaderButton/index.js';
-import { HEADER_LOGO_MODE, MAP_LOGO_MODE_TO_APPEARANCE } from './constants.js';
+import { HEADER_LOGO_MODE, MAP_LOGO_MODE_TO_APPEARANCE, MAP_LOGO_MODE_TO_LABEL } from './constants.js';
 import styles from './styles.module.css';
 export function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest }) {
     const [error, setError] = useState(false);
@@ -23,7 +23,8 @@ export function Logo({ path, loading, mode, href, onClick, className, tooltip, .
                     setError(true);
                 } }));
         }
-        return (_jsxs("span", { className: styles.logoWrap, children: [_jsxs("span", { className: styles.iconStack, children: [_jsx(CloudLogo, { size: 24, className: cn(styles.icon, logoThemeClassName, styles.iconDefault) }), _jsx(HomeFilledSVG, { size: 24, className: cn(styles.icon, logoThemeClassName, styles.iconHover) })] }), mode && mode !== HEADER_LOGO_MODE.Prod && (_jsx(PromoTag, { as: 'span', label: mode, size: 'xs', appearance: MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
+        const showMode = mode && mode !== HEADER_LOGO_MODE.Prod;
+        return (_jsxs("span", { className: styles.logoWrap, "data-with-mode": showMode || undefined, children: [_jsxs("span", { className: styles.iconStack, children: [_jsx(CloudLogo, { size: 24, className: cn(styles.icon, logoThemeClassName, styles.iconDefault) }), _jsx(HomeFilledSVG, { size: 24, className: cn(styles.icon, logoThemeClassName, styles.iconHover) })] }), showMode && (_jsx(PromoTag, { as: 'span', label: MAP_LOGO_MODE_TO_LABEL[mode], size: 'xs', appearance: MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
     }, [error, mode, path, logoThemeClassName]);
     return (_jsx(HeaderButton, { as: 'a', tooltip: tooltip, className: cn(styles.logo, className), href: href, tabIndex: 0, onClick: onClick, loading: loading, icon: logo, ...extractDataTestProps(rest) }));
 }

package/dist/esm/components/Logo/constants.d.ts

@@ -8,3 +8,5 @@ export declare const HEADER_LOGO_MODE: {
 };
 export type HeaderLogoMode = ValueOf<typeof HEADER_LOGO_MODE>;
 export declare const MAP_LOGO_MODE_TO_APPEARANCE: Record<Exclude<HeaderLogoMode, 'prod'>, PromoTagProps['appearance']>;
+/** Подпись тега режима, как в макете `logoEvo` */
+export declare const MAP_LOGO_MODE_TO_LABEL: Record<Exclude<HeaderLogoMode, 'prod'>, string>;

package/dist/esm/components/Logo/constants.js

@@ -9,3 +9,9 @@ export const MAP_LOGO_MODE_TO_APPEARANCE = {
     [HEADER_LOGO_MODE.Stage]: 'orange',
     [HEADER_LOGO_MODE.Hybrid]: 'violet',
 };
+/** Подпись тега режима, как в макете `logoEvo` */
+export const MAP_LOGO_MODE_TO_LABEL = {
+    [HEADER_LOGO_MODE.Develop]: 'dev',
+    [HEADER_LOGO_MODE.Stage]: 'stage',
+    [HEADER_LOGO_MODE.Hybrid]: 'hybrid',
+};

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

@@ -9,6 +9,9 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
 }
+.logoWrap[data-with-mode]{
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
 
 .iconStack{
   position:relative;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css

@@ -32,7 +32,7 @@
 .actions{
   display:flex;
   flex-shrink:0;
-  gap:var(--sn-primitive-dimension-8, 8px);
+  gap:var(--sn-primitive-dimension-0, 0px);
   align-items:center;
   margin-left:auto;
 }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css

@@ -40,10 +40,6 @@
   min-width:0;
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
 }
-.headerTitle:hover .headerActions, .headerTitle:focus-visible .headerActions, .headerTitle:has(:focus-visible) .headerActions{
-  pointer-events:auto;
-  opacity:1;
-}
 
 .group{
   position:relative;
@@ -110,10 +106,10 @@
   grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
-.groupBody:not([data-mobile]):not([data-subcategory-body]){
+.groupBody:not([data-subcategory-body]){
   padding:var(--sn-primitive-dimension-4, 4px);
 }
-.groupBody:not([data-mobile]):not([data-show-description]){
+.groupBody:not([data-show-description]){
   gap:var(--sn-primitive-dimension-0, 0px);
 }
 @container (width <= 728px){

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

@@ -61,5 +61,5 @@ export function Favorites({ favorite, allServiceGroups, headerClassName, isMobil
                                     onChange: favorite.onChange(service.id),
                                 }, ...getCommonCardProps(service, handleFavoriteServiceClick(service)) }, service.id))), !isEmpty && !isFavoritesSegment && recentCards] }) }) })) : (_jsx(FavoritesSortable, { favorite: favorite, favoriteItems: favoriteItems, segment: resolvedSegment, setSegment: setSegment, isEmpty: isEmpty, recentCards: recentCards, onFavoriteServiceClick: handleFavoriteServiceClick }));
     })();
-    return (_jsxs("div", { className: styles.root, "data-test-id": FAVORITES_TEST_IDS.root, children: [_jsxs("div", { className: cn(styles.header, headerClassName), "data-test-id": FAVORITES_TEST_IDS.header, children: [_jsx(SegmentControl, { size: 'm', width: WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles.segmentControl, "data-test-id": FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && (_jsx(Droplist, { size: 'm', ...favorite.actions, className: comfortClassName, closeDroplistOnItemClick: true, children: _jsx(Button, { view: 'function', size: 'm', appearance: 'neutral', icon: _jsx(KebabSVG, { size: 24 }), "data-test-id": FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
+    return (_jsxs("div", { className: styles.root, "data-test-id": FAVORITES_TEST_IDS.root, children: [_jsxs("div", { className: cn(styles.header, headerClassName), "data-test-id": FAVORITES_TEST_IDS.header, children: [_jsx(SegmentControl, { size: 'm', width: WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles.segmentControl, "data-test-id": FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && (_jsx(Droplist, { size: 'm', ...favorite.actions, className: comfortClassName, closeDroplistOnItemClick: true, children: _jsx(Button, { view: 'simple', size: 'm', appearance: 'neutral', icon: _jsx(KebabSVG, { size: 24 }), "data-test-id": FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
 }

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

@@ -13,4 +13,10 @@
   flex-grow:1;
   flex-shrink:1;
   justify-content:flex-start;
+}
+.closeButton.closeButton[data-view=simple][data-appearance=neutral] [data-text-opacity]{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+.closeButton.closeButton[data-view=simple][data-appearance=neutral] [aria-hidden][data-text-opacity]{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
 }

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

@@ -6,5 +6,5 @@ import { headerLocale } from '../../../../locale/index.js';
 import styles from './styles.module.css';
 export const Search = forwardRef(({ value, onChange, onBlur, onFocus, isMobile = false }, ref) => {
     const { t } = headerLocale.useTranslations();
-    return (_jsx("div", { className: styles.searchWrap, "data-mobile": isMobile || undefined, children: _jsx(SearchSnack, { ref: ref, size: 'm', outline: !isMobile, placeholder: t('searchByServices'), value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, "data-test-id": TEST_IDS.mainMenu.search, className: styles.search, background: isMobile }) }));
+    return (_jsx("div", { className: styles.searchWrap, "data-mobile": isMobile || undefined, children: _jsx(SearchSnack, { ref: ref, size: 'm', outline: false, placeholder: t('searchByServices'), value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, "data-test-id": TEST_IDS.mainMenu.search, className: styles.search, background: isMobile }) }));
 });