@cloud-ru/ds-uikit-product-header 1.5.1 → 1.5.2-preview-f23261f8.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
@@ -821,5 +823,4 @@ export function Basic() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `isMobile` | `boolean` | — |  |
 | `items` | `BreadcrumbsProps` \| `Item` | — |  |

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderButton = HeaderButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("@cloud-ru/ds-button");
-const theme_1 = require("@cloud-ru/ds-theme");
 const tooltip_1 = require("@cloud-ru/ds-tooltip");
 const classnames_1 = __importDefault(require("classnames"));
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -16,7 +15,6 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
  * остальное API `Button` и `Tooltip` передаётся как есть.
  */
 function HeaderButton({ tooltip, isMobile, className, ...rest }) {
-    const compactThemeClassName = (0, theme_1.useThemeClassnames)({ density: 'compact' });
     return (
     // FIXME: typescript ломается, если не указать tip явно
     //  пока не разбирался почему так
@@ -29,5 +27,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, compactThemeClassName, className) }) }));
+            }, 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) }) }));
 }

package/dist/cjs/components/HeaderLayout/HeaderLayout.js

@@ -6,23 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderLayout = HeaderLayout;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const divider_1 = require("@cloud-ru/ds-divider");
-const theme_1 = require("@cloud-ru/ds-theme");
 const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("react");
 const constants_1 = require("../../constants");
 const useMobileLayout_1 = require("../../hooks/useMobileLayout");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }) {
     const isMobile = (0, useMobileLayout_1.useMobileLayout)();
-    const headerRef = (0, react_1.useRef)(null);
-    const header = ((0, jsx_runtime_1.jsxs)("header", { ref: headerRef, className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), ...(0, utils_1.extractSupportProps)({ 'data-test-id': constants_1.TEST_IDS.headerLayout.root, ...rest }), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [logo && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logo }), menu && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), menu] })), !isMobile && select && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, children: toolbar })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs })] }));
-    // Временная фиксация: на mobile прикладная тема переключилась на compact, а шапка сверстана
-    // под comfort и на compact ещё не переехала. Провайдер (а не класс на `<header>`) нужен потому,
-    // что поверхности шапки — порталы: они переэмитят набор `sn-*` из контекста на своём корне,
-    // и класс, поставленный поверх, проиграл бы их собственному.
-    if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(theme_1.ChildThemeProvider, { value: { density: theme_1.DENSITY.Comfort }, rootRef: headerRef, children: header }));
-    }
-    return header;
+    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), "data-mobile": isMobile || undefined, ...(0, utils_1.extractSupportProps)({ 'data-test-id': constants_1.TEST_IDS.headerLayout.root, ...rest }), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [logo && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logo }), menu && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), menu, isMobile && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' })] })), !isMobile && select && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, children: toolbar })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }))] }));
 }

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

@@ -18,7 +18,6 @@
   align-items:center;
   box-sizing:border-box;
   height:var(--sn-primitive-dimension-24, 24px);
-  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
 }
 
 .left{
@@ -34,4 +33,12 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   height:100%;
+}
+
+.header[data-mobile] .top{
+  padding:var(--sn-primitive-dimension-0, 0px);
+}
+.header[data-mobile] .left,
+.header[data-mobile] .right{
+  gap:var(--sn-primitive-dimension-0, 0px);
 }

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

@@ -36,6 +36,7 @@
 .logo{
   position:relative;
   flex-shrink:0;
+  box-sizing:border-box;
 }
 .logo:active:not([data-disabled]) .iconDefault{
   opacity:0;

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

@@ -9,7 +9,6 @@ const button_1 = require("@cloud-ru/ds-button");
 const card_1 = require("@cloud-ru/ds-card");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const promo_tag_1 = require("@cloud-ru/ds-promo-tag");
-const theme_1 = require("@cloud-ru/ds-theme");
 const typography_1 = require("@cloud-ru/ds-typography");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
@@ -18,11 +17,10 @@ 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 compactThemeClassname = (0, theme_1.useThemeClassnames)({ density: 'compact' });
     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: (0, classnames_1.default)(styles_module_scss_1.default.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, { size: 16 }), 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-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, { size: 16 }), 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

@@ -11,6 +11,7 @@
 }
 
 .root{
+  box-sizing:border-box;
   width:100%;
   min-width:0;
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.js

@@ -28,7 +28,7 @@ function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpan
         (0, react_1.startTransition)(() => preferences?.showDescription?.onChange(value));
     };
     const hasSegmentItems = segmentItems && segmentItems?.length > 0;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.TEST_IDS.toolbar, children: [hasSegmentItems && ((0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { loading: loading, skeleton: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.segmentControlSkeleton, "data-test-id": constants_1.TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.segmentControlSkeletonBlock }) }), children: (0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [preferences && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { icon: (0, jsx_runtime_1.jsx)(system_1.SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsButton, onClick: openModal, tooltip: { tip: t('menuSettingsTitle') } }), (0, jsx_runtime_1.jsx)(modal_1.Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsModal, cancelButton: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-mobile": isMobile || undefined, "data-test-id": constants_1.TEST_IDS.toolbar, children: [hasSegmentItems && ((0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { loading: loading, skeleton: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.segmentControlSkeleton, "data-test-id": constants_1.TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.segmentControlSkeletonBlock }) }), children: (0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [preferences && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { icon: (0, jsx_runtime_1.jsx)(system_1.SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsButton, onClick: openModal, tooltip: { tip: t('menuSettingsTitle') } }), (0, jsx_runtime_1.jsx)(modal_1.Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsModal, cancelButton: {
                                     label: t('close'),
                                     onClick: closeModal,
                                 }, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.settingsContent, children: [preferences.showGroupsColors && ((0, jsx_runtime_1.jsx)(uikit_product_switch_row_1.SwitchRow, { title: t('menuSettingsShowGroupsColors'), checked: preferences.showGroupsColors.value, onChange: preferences.showGroupsColors.onChange, "data-test-id": constants_1.TEST_IDS.settingsShowGroupsColorsSwitch })), (0, jsx_runtime_1.jsx)(uikit_product_switch_row_1.SwitchRow, { title: t('menuSettingsShowDescription'), checked: preferences.showDescription.value, onChange: handleShowDescriptionChange, "data-test-id": constants_1.TEST_IDS.settingsShowDescriptionSwitch })] }) })] })), !isMobile && ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { icon: allGroupsExpanded ? (0, jsx_runtime_1.jsx)(system_1.CollapseVerticalSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ExpandVerticalSVG, {}), "aria-label": allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups'), "data-test-id": constants_1.TEST_IDS.toggleAllGroups, onClick: onToggleAllGroupsExpanded, tooltip: { tip: allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups') } }))] }))] }));

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

@@ -3,6 +3,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.js

@@ -10,7 +10,7 @@ const ServiceCard_1 = require("../../../../ServiceCard");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const SubCategory_1 = require("./SubCategory");
 function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled, onServiceClick, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, children: items.map(service => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: items.map(service => {
             if (service.hidden) {
                 return null;
             }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.js

@@ -37,10 +37,10 @@ function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled
         return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": `${constants_1.TEST_IDS.subcategory}-${service.id}`, children: [(0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: {
                         value: Boolean(isExpanded),
                         onClick: handleExpandedChange,
-                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": 'expanded', "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) })] }));
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": 'expanded', "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) })] }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": `${constants_1.TEST_IDS.subcategory}-${service.id}`, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'single', expanded: isExpanded, onExpandedChange: handleExpandedChange, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: subcategoryId, showChevron: false, className: styles_module_scss_2.default.subcategoryAccordion, afterTitle: (0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: {
                         value: Boolean(isExpanded),
                         onClick: handleExpandedChange,
-                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": true, "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) }) }) }) }));
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": true, "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) }) }) }) }));
 }

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

@@ -27,7 +27,7 @@
 }
 @media (hover: hover){
   .header:hover{
-    background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
   }
   .header:hover .headerActions{
     pointer-events:auto;
@@ -50,6 +50,7 @@
   overflow-x:clip;
   display:flex;
   flex-direction:column;
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
@@ -109,6 +110,12 @@
   grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
+.groupBody:not([data-mobile]):not([data-subcategory-body]){
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+.groupBody:not([data-mobile]):not([data-show-description]){
+  gap:var(--sn-primitive-dimension-0, 0px);
+}
 @container (width <= 728px){
   .groupBody:not([data-mobile]){
     grid-template-columns:repeat(2, minmax(auto, 1fr));
@@ -125,7 +132,7 @@
 }
 
 .decoration{
-  --highlight-border-width:1px;
+  --highlight-border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
   position:absolute;
   top:0;
   left:0;

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

@@ -14,6 +14,7 @@ const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card
 const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
+const useDesktopComfortClassName_1 = require("../../../../hooks/useDesktopComfortClassName");
 const locale_1 = require("../../../../locale");
 const utils_2 = require("../../utils");
 const components_1 = require("./components");
@@ -23,6 +24,7 @@ const utils_3 = require("./utils");
 function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const loading = favorite.loading;
+    const comfortClassName = (0, useDesktopComfortClassName_1.useDesktopComfortClassName)();
     const [segment, setSegment] = (0, utils_1.useValueControl)({
         value: favorite.segment,
         defaultValue: constants_1.FAVORITES_SEGMENT.Favorites,
@@ -65,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, 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: '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] }));
 }

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

@@ -47,16 +47,18 @@
 
 .listScrollInner{
   height:100%;
-  max-height:calc(var(--sn-primitive-dimension-32, 32px) * 12 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
+  max-height:calc((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-8, 8px));
 }
 .listScrollInner[data-mobile]{
-  max-height:calc(var(--sn-primitive-dimension-40, 40px) * 6 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
+  max-height:calc((var(--sn-primitive-dimension-40, 40px) + var(--sn-primitive-dimension-4, 4px)) * 6 + var(--sn-primitive-dimension-8, 8px));
 }
 
 .list{
   display:flex;
   flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
   align-items:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
 }
@@ -82,6 +84,7 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-8, 8px);
 }

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

@@ -56,13 +56,14 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }
 
 .menu{
-  --snack-menu-header-height:40px;
+  --snack-menu-header-height:var(--sn-primitive-dimension-40, 40px);
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;

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

@@ -3,5 +3,6 @@ export type MenuHeaderBrandProps = {
     logo?: ReactNode;
     onClose(): void;
     className?: string;
+    isMobile?: boolean;
 };
-export declare function MenuHeaderBrand({ logo, onClose, className }: MenuHeaderBrandProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuHeaderBrand({ logo, onClose, className, isMobile }: MenuHeaderBrandProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,7 +11,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const locale_1 = require("../../../../locale");
 const HeaderButton_1 = require("../../../HeaderButton");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function MenuHeaderBrand({ logo, onClose, className }) {
+function MenuHeaderBrand({ logo, onClose, className, isMobile }) {
     const { t } = locale_1.headerLocale.useTranslations();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.container, className), children: [logo, (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { className: styles_module_scss_1.default.closeButton, onClick: onClose, icon: (0, jsx_runtime_1.jsx)(system_1.ChevronLeftSVG, {}), label: t('close') })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.container, className), "data-mobile": isMobile || undefined, children: [logo, (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { className: styles_module_scss_1.default.closeButton, onClick: onClose, icon: (0, jsx_runtime_1.jsx)(system_1.ChevronLeftSVG, {}), label: t('close') })] }));
 }

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

@@ -5,6 +5,9 @@
   box-sizing:border-box;
   background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
+.container[data-mobile]{
+  gap:var(--sn-primitive-dimension-0, 0px);
+}
 
 .closeButton{
   flex-grow:1;

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuMobile = MenuMobile;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const divider_1 = require("@cloud-ru/ds-divider");
-const theme_1 = require("@cloud-ru/ds-theme");
 const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
 const constants_1 = require("../../../../constants");
@@ -40,9 +39,5 @@ function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platfo
     const handleClose = (0, react_1.useCallback)(() => {
         setOpen(false);
     }, [setOpen]);
-    return (
-    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
-    // `HeaderLayout`, поэтому объявляем плотность здесь же. Обёртка провайдера layout-прозрачная
-    // (`display: contents`) — меню рендерится порталом, лишний бокс в строке шапки не нужен.
-    (0, jsx_runtime_1.jsx)(theme_1.ChildThemeProvider, { value: { density: theme_1.DENSITY.Comfort }, className: styles_module_scss_1.default.densityScope, children: (0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, className: styles_module_scss_1.default.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader, isMobile: true }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, className: styles_module_scss_1.default.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
 }

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

@@ -1,10 +1,5 @@
-.densityScope{
-  display:contents;
-}
-
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
-  padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
 .rightContent{
@@ -22,6 +17,7 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-8, 8px);
+  box-sizing:border-box;
   min-height:100%;
   margin-top:calc(var(--sn-primitive-dimension-40, 40px) + var(--sn-divider-anatomy-container-height, var(--sn-primitive-dimension-1, 1px)));
   padding:var(--sn-primitive-dimension-16, 16px);

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

@@ -5,17 +5,17 @@
   animation-fill-mode:forwards;
 }
 .wrapper[data-animation-type=fade-slide-up-right]{
-  transform:translate(-12px, 4px);
+  transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
   opacity:0;
   animation-name:fade-slide-up-right;
 }
 .wrapper[data-animation-type=fade-slide-up]{
-  transform:translate(0, 4px);
+  transform:translate(0, var(--sn-primitive-dimension-4, 4px));
   opacity:0;
   animation-name:fade-slide-up;
 }
 .wrapper[data-animation-type=slide-right]{
-  transform:translate(-12px, 0);
+  transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), 0);
   animation-name:slide-right;
 }
 .wrapper[data-animation-type=fade-in]{
@@ -32,7 +32,7 @@
 }
 @keyframes fade-slide-up{
   0%{
-    transform:translate(0, 4px);
+    transform:translate(0, var(--sn-primitive-dimension-4, 4px));
     opacity:0;
   }
   100%{
@@ -42,7 +42,7 @@
 }
 @keyframes fade-slide-up-right{
   0%{
-    transform:translate(-12px, 4px);
+    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
     opacity:0;
   }
   100%{
@@ -52,7 +52,7 @@
 }
 @keyframes slide-right{
   0%{
-    transform:translate(-12px, 0);
+    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), 0);
   }
   100%{
     transform:translate(0, 0);

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

@@ -1,6 +1,8 @@
 .searchWrap:not([data-mobile]){
   flex:1 1 auto;
-  padding:var(--sn-primitive-dimension-2, 2px) var(--sn-primitive-dimension-10, 10px);
+  box-sizing:border-box;
+  margin:0 var(--sn-primitive-dimension-4, 4px);
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-12, 12px);
 }
 
 .search{

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

@@ -1,7 +1,6 @@
 import { BreadcrumbsProps } from '@cloud-ru/ds-breadcrumbs';
 type PathBreadcrumbsProps = {
     items: BreadcrumbsProps['items'];
-    isMobile?: boolean;
 };
-export declare function PathBreadcrumbs({ isMobile, items }: PathBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare function PathBreadcrumbs({ items }: PathBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/PathBreadcrumbs/PathBreadcrumbs.js

@@ -8,6 +8,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const breadcrumbs_1 = require("@cloud-ru/ds-breadcrumbs");
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function PathBreadcrumbs({ isMobile, items }) {
-    return ((0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { items: items, className: styles_module_scss_1.default.breadcrumbs, inactiveLastItem: items.length > 1, separator: '/', size: isMobile ? 'xs' : 's', "data-test-id": constants_1.TEST_IDS.breadcrumbs.root }));
+function PathBreadcrumbs({ items }) {
+    return ((0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { items: items, className: styles_module_scss_1.default.breadcrumbs, inactiveLastItem: items.length > 1, separator: '/', size: 'xs', "data-test-id": constants_1.TEST_IDS.breadcrumbs.root }));
 }

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

@@ -2,8 +2,10 @@
   display:flex;
   align-items:center;
   justify-content:center;
+  box-sizing:border-box;
   width:var(--sn-primitive-dimension-24, 24px);
   height:var(--sn-primitive-dimension-24, 24px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
+  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
 }

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

@@ -8,8 +8,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const avatar_1 = require("@cloud-ru/ds-avatar");
 const list_1 = require("@cloud-ru/ds-list");
 const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const constants_1 = require("../../constants");
+const useDesktopComfortClassName_1 = require("../../hooks/useDesktopComfortClassName");
 const useMobileLayout_1 = require("../../hooks/useMobileLayout");
 const locale_1 = require("../../locale");
 const HeaderButton_1 = require("../HeaderButton");
@@ -20,16 +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);
@@ -42,7 +47,8 @@ function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout
         }, counter: Number(inviteCount)
             ? {
                 value: Number(inviteCount),
+                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: styles_module_scss_1.default.userMenuDroplist, 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 }));
 }