@cloud-ru/ds-uikit-product-header 2.0.3-preview-c6bef496.0 → 2.0.3

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

@@ -13,7 +13,7 @@
   grid-column:1/-1;
   padding:0 var(--sn-primitive-dimension-4, 4px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .subcategory[data-title-only]{
   padding:var(--sn-primitive-dimension-4, 4px);
@@ -60,7 +60,7 @@
 .subcategoryDescription{
   width:100%;
   padding-bottom:var(--sn-primitive-dimension-4, 4px);
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
 }
 
 .subcategoryTitleDraggable{

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

@@ -27,7 +27,7 @@
 }
 @media (hover: hover){
   .header:hover{
-    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
   }
   .header:hover .headerActions{
     pointer-events:auto;
@@ -38,7 +38,7 @@
 .headerTitle{
   flex:1 0 0;
   min-width:0;
-  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
 }
 
 .group{
@@ -53,7 +53,7 @@
   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);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
 }
 .group[data-appear]{
   animation:group-appear 0.24s cubic-bezier(0.4, 0, 0.2, 1) backwards;
@@ -68,7 +68,7 @@
 }
 .group[data-drag-preview] .header{
   cursor:grabbing;
-  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .group[data-drag-preview] .header .headerActions{
   pointer-events:auto;
@@ -99,7 +99,7 @@
   height:var(--sn-primitive-dimension-24, 24px);
   border:none;
   border-radius:var(--sn-button-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
   background-color:transparent;
   outline:none;
 }
@@ -206,11 +206,11 @@
 }
 .colorMarker[data-block-color=neutral]{
   visibility:visible;
-  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
 }
 .colorMarker[data-block-color=primary]{
   visibility:visible;
-  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
 }
 .colorMarker[data-block-color=orange]{
   visibility:visible;

package/dist/esm/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.css

@@ -2,8 +2,8 @@
   flex-shrink:0;
   width:var(--sn-primitive-dimension-40, 40px);
   height:var(--sn-primitive-dimension-40, 40px);
-  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
-  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
+  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
+  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
 }
 
 .emptyState{
@@ -15,7 +15,7 @@
 }
 
 .emptyText{
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
   text-align:center;
   white-space:pre-line;
 }

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

@@ -8,7 +8,7 @@
   min-height:var(--sn-primitive-dimension-88, 88px);
   padding:var(--sn-primitive-dimension-8, 8px) 0 0;
   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-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
 }
 
 .header{
@@ -35,8 +35,8 @@
   min-height:var(--sn-primitive-dimension-44, 44px);
 }
 .listScroll[data-insert-new] [data-favorite]{
-  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
-  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
+  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
+  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #0d0d0d));
 }
 
 .dropTarget{

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider } from '@cloud-ru/ds-divider';
-import { CardNavigation } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { Fragment } from 'react';
 import { TEST_IDS } from '../../../../constants.js';
 import { getLinkEmblem } from '../../utils/index.js';
 import styles from './styles.module.css';
 export function MenuBottom({ settingItems, leftBottom }) {
-    return (_jsxs("div", { className: styles.bottom, "data-test-id": TEST_IDS.mainMenu.leftBottom, children: [Boolean(settingItems?.length) && (_jsx("div", { className: styles.bottomItems, "data-test-id": TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => (_jsxs(Fragment, { children: [item.divider === 'before' && _jsx(Divider, { orientation: 'horizontal', className: styles.bottomDivider }), _jsx(CardNavigation, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), title: item.label, icon: getLinkEmblem(item), onClick: item.onClick, "data-test-id": `header__drawer-menu__setting-${item.id}` }), item.divider === 'after' && _jsx(Divider, { orientation: 'horizontal', className: styles.bottomDivider })] }, item.id))) })), leftBottom] }));
+    return (_jsxs("div", { className: styles.bottom, "data-test-id": TEST_IDS.mainMenu.leftBottom, children: [Boolean(settingItems?.length) && (_jsx("div", { className: styles.bottomItems, "data-test-id": TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => (_jsxs(Fragment, { children: [item.divider === 'before' && _jsx(Divider, { orientation: 'horizontal', className: styles.bottomDivider }), _jsx(CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), title: item.label, icon: getLinkEmblem(item), onClick: item.onClick, "data-test-id": `header__drawer-menu__setting-${item.id}` }), item.divider === 'after' && _jsx(Divider, { orientation: 'horizontal', className: styles.bottomDivider })] }, item.id))) })), leftBottom] }));
 }

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

@@ -61,7 +61,7 @@
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 
 .menuBody{

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

@@ -3,7 +3,7 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
   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)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 .container[data-mobile]{
   gap:0;
@@ -15,8 +15,8 @@
   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)));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
 }
 .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)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
 }

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Divider } from '@cloud-ru/ds-divider';
-import { SNAP_POINTS_PRESET } from '@cloud-ru/ds-list';
 import { useCallback, useMemo } from 'react';
-import { TEST_IDS } from '../../../../constants.js';
+import { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../../../constants.js';
 import { MobileDrawerCustom } from '../../../../mobileOverlays.js';
 import { MainMenuDndContext } from '../../hooks/useMainMenuDnd.js';
 import { useMenuItems } from '../../hooks/useMenuItems.js';
@@ -33,5 +32,5 @@ export function MenuMobile({ open = false, setOpen, settingItems, platformGroups
     const handleClose = useCallback(() => {
         setOpen?.(false);
     }, [setOpen]);
-    return (_jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: SNAP_POINTS_PRESET.full, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsxs(_Fragment, { children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader, isMobile: true }), _jsx(Divider, { orientation: 'horizontal' })] }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [leftTop, search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && _jsx(Favorites, { favorite: favorite, servicesById: servicesById, isMobile: true }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(Content, { isMobile: true, 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 && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
+    return (_jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsxs(_Fragment, { children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader, isMobile: true }), _jsx(Divider, { orientation: 'horizontal' })] }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [leftTop, search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && _jsx(Favorites, { favorite: favorite, servicesById: servicesById, isMobile: true }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(Content, { isMobile: true, 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 && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
 }

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

@@ -3,7 +3,7 @@
 }
 
 .drawerMobile{
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3))) !important;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4))) !important;
 }
 
 .scrollMobile{

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

@@ -2,10 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Scroll } from '@cloud-ru/ds-scroll';
 import { useCallback, useRef, useState } from 'react';
 import styles from './styles.module.css';
-// Упругая прокрутка у верхней границы (touch-скролл на мобильных не "упирается" жёстко в 0 —
-// контент можно немного "оттянуть" дальше) даёт scrollTop, не совпадающий с реальным положением
-// контента в этот момент. Диапазон запаса — единицы пикселей; двух хватает с большим запасом.
-const TOP_OVERSCROLL_EPSILON_PX = 2;
 export function ScrollWithAnimatedStickyPanel({ panel, children }) {
     const [positions, setPositions] = useState({ panelTopShift: 0, containerScroll: 0 });
     const [panelHeight, setPanelHeight] = useState(0);
@@ -18,13 +14,6 @@ export function ScrollWithAnimatedStickyPanel({ panel, children }) {
             return;
         const panelHeight = panelRef.current.offsetHeight;
         setPanelHeight(panelHeight);
-        // У верхней границы панель всегда полностью видна — не доверяем накопленному diff. Иначе
-        // "лишний" ход упругой прокрутки у самого верха читается как скролл вниз и на возврате к
-        // началу списка панель может остаться скрытой, хотя пользователь как раз скроллит наверх.
-        if (target.scrollTop <= TOP_OVERSCROLL_EPSILON_PX) {
-            setPositions({ panelTopShift: 0, containerScroll: target.scrollTop });
-            return;
-        }
         setPositions(prev => {
             const diff = prev.containerScroll - target.scrollTop;
             return {
@@ -33,11 +22,10 @@ export function ScrollWithAnimatedStickyPanel({ panel, children }) {
             };
         });
     }, []);
-    const setPanelRef = useCallback((element) => {
-        if (element) {
-            setPanelHeight(element.offsetHeight);
-            panelRef.current = element;
-        }
-    }, []);
-    return (_jsxs("div", { className: styles.container, style: { '--snack-autohide-panel-height': `${panelHeight}px` }, children: [_jsx(Scroll, { barHideStrategy: 'never', overflow: { x: 'hidden' }, onScroll: handleScroll, children: children }), _jsx("div", { className: styles.panel, ref: setPanelRef, style: { top: positions.panelTopShift }, children: panel })] }));
+    return (_jsxs("div", { className: styles.container, style: { '--snack-autohide-panel-height': `${panelHeight}px` }, children: [_jsx(Scroll, { barHideStrategy: 'never', overflow: { x: 'hidden' }, onScroll: handleScroll, children: children }), _jsx("div", { className: styles.panel, ref: element => {
+                    if (element) {
+                        setPanelHeight(element.offsetHeight);
+                        panelRef.current = element;
+                    }
+                }, style: { top: positions.panelTopShift }, children: panel })] }));
 }

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

@@ -7,5 +7,5 @@
   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)));
   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)));
+  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
 }

package/dist/esm/components/UserMenu/UserMenu.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar } from '@cloud-ru/ds-avatar';
-import { Droplist, SNAP_POINTS_PRESET } from '@cloud-ru/ds-list';
+import { Droplist } from '@cloud-ru/ds-list';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
-import { useCallback, useMemo } from 'react';
-import { TEST_IDS } from '../../constants.js';
+import { useMemo } from 'react';
+import { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../constants.js';
 import { useDesktopComfortClassName } from '../../hooks/useDesktopComfortClassName.js';
 import { useMobileLayout } from '../../hooks/useMobileLayout.js';
 import { headerLocale } from '../../locale/index.js';
@@ -22,9 +22,6 @@ export function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, o
     const comfortClassName = useDesktopComfortClassName();
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
     const { fullName = '', inviteCount } = profile;
-    const handleClose = useCallback(() => {
-        setOpen(false);
-    }, [setOpen]);
     const { pinTop, items: menuItems, pinBottom, } = useUserMenuItems({
         isMobile,
         profile,
@@ -33,7 +30,9 @@ export function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, o
         organizationItems,
         bottomItems,
         settingItems,
-        onClose: handleClose,
+        onClose: () => {
+            setOpen(false);
+        },
         onLogout,
     });
     const trigger = useMemo(() => (_jsx(HeaderButton, { tooltip: { tip: triggerTooltip }, isMobile: isMobile, onClick: () => {
@@ -45,5 +44,5 @@ export function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, o
                 appearance: 'primary',
             }
             : undefined, "data-test-id": TEST_IDS.userMenu.button, icon: _jsx(Avatar, { appearance: 'red', size: 's', name: fullName, showTwoSymbols: true }), "data-pressed": open })), [fullName, inviteCount, onClick, open, setOpen, isMobile, triggerTooltip]);
-    return (_jsx(Droplist, { open: open, onOpenChange: setOpen, size: 'm', selection: SELECTION_STUB, pinTop: pinTop, items: menuItems, pinBottom: pinBottom, scroll: !isMobile, trigger: 'click', placement: 'bottom-end', className: cn(styles.userMenuDroplist, comfortClassName), closeOnPopstate: true, "data-test-id": TEST_IDS.userMenu.root, label: t('user'), snapPoints: SNAP_POINTS_PRESET.full, withDividers: false, triggerClassName: styles.userMenuDroplistTrigger, children: trigger }));
+    return (_jsx(Droplist, { open: open, onOpenChange: setOpen, size: 'm', selection: SELECTION_STUB, pinTop: pinTop, items: menuItems, pinBottom: pinBottom, scroll: !isMobile, trigger: 'click', placement: 'bottom-end', className: cn(styles.userMenuDroplist, comfortClassName), closeOnPopstate: true, "data-test-id": TEST_IDS.userMenu.root, label: t('user'), snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, children: trigger }));
 }

package/dist/esm/components/UserMenu/hooks/useLogoutItem.d.ts

@@ -1,4 +1,4 @@
-import { BaseItem } from '@cloud-ru/ds-list';
+import { ListProps } from '@cloud-ru/ds-list';
 export declare function useLogoutItem({ onLogout }: {
     onLogout?(): void;
-}): BaseItem;
+}): ListProps['items'];

package/dist/esm/components/UserMenu/hooks/useLogoutItem.js

@@ -2,16 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ExitSVG } from '@cloud-ru/ds-icons/interface/product';
 import { useMemo } from 'react';
 import { headerLocale } from '../../../locale/index.js';
-import styles from '../styles.module.css';
 export function useLogoutItem({ onLogout }) {
     const { t } = headerLocale.useTranslations();
-    return useMemo(() => ({
-        beforeContent: _jsx(ExitSVG, {}),
-        content: {
-            label: t('logout'),
+    return useMemo(() => [
+        {
+            beforeContent: _jsx(ExitSVG, {}),
+            content: {
+                label: t('logout'),
+            },
+            onClick: onLogout,
+            'data-test-id': 'header__user-menu__logout',
         },
-        className: styles.logoutItem,
-        onClick: onLogout,
-        'data-test-id': 'header__user-menu__logout',
-    }), [onLogout, t]);
+    ], [onLogout, t]);
 }

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

@@ -35,11 +35,11 @@ export function useUserMenuItems({ profile, theme, onLogout, topItems = EMPTY_AR
         }
         pinTop = pinTop.concat(topItems);
         let pinBottom = bottomItems.concat(logoutItem);
+        if (isMobile && Boolean(settingItems?.length)) {
+            pinBottom = pinBottom.concat([DIVIDER_ITEM, ...settingItems]);
+        }
         // В шторке прокручивается всё меню, закреплять части незачем; разделитель над организациями добавляем сами
         if (isMobile) {
-            if (settingItems?.length) {
-                pinBottom = [...bottomItems, ...settingItems, DIVIDER_ITEM, logoutItem];
-            }
             return {
                 pinTop: [],
                 items: withClose([...pinTop, DIVIDER_ITEM, ...organizationItems, ...pinBottom]),

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

@@ -1,16 +1,7 @@
-.userMenuDroplistTrigger{
-  display:inline-flex;
-}
-
 .userMenuDroplist{
   width:256px;
 }
 
 .profileSettingsIcon{
-  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
-}
-
-.logoutItem span,
-.logoutItem svg{
-  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
 }

package/dist/esm/constants.d.ts

@@ -26,3 +26,4 @@ export declare const TEST_IDS: {
         readonly root: "header__breadcrumbs";
     };
 };
+export declare const BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS: number[];

package/dist/esm/constants.js

@@ -26,3 +26,5 @@ export const TEST_IDS = {
         root: 'header__breadcrumbs',
     },
 };
+// Только mobile: в мастере bottomSheet панель открывается на всю высоту экрана.
+export const BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS = [1];

package/dist/esm/style.css

@@ -35,7 +35,7 @@
 
 .header{
   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)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 .header[data-mobile] .top{
   padding:0;
@@ -146,7 +146,7 @@
   overflow:hidden;
   flex-shrink:1;
   min-width:0;
-  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
   text-overflow:ellipsis;
   white-space:nowrap;
 }
@@ -223,7 +223,7 @@
   grid-column:1/-1;
   padding:0 var(--sn-primitive-dimension-4, 4px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .subcategory[data-title-only]{
   padding:var(--sn-primitive-dimension-4, 4px);
@@ -270,7 +270,7 @@
 .subcategoryDescription{
   width:100%;
   padding-bottom:var(--sn-primitive-dimension-4, 4px);
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
 }
 
 .subcategoryTitleDraggable{
@@ -312,7 +312,7 @@
 }
 @media (hover: hover){
   .header:hover{
-    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
   }
   .header:hover .headerActions{
     pointer-events:auto;
@@ -323,7 +323,7 @@
 .headerTitle{
   flex:1 0 0;
   min-width:0;
-  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
 }
 
 .group{
@@ -338,7 +338,7 @@
   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);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
 }
 .group[data-appear]{
   animation:group-appear 0.24s cubic-bezier(0.4, 0, 0.2, 1) backwards;
@@ -353,7 +353,7 @@
 }
 .group[data-drag-preview] .header{
   cursor:grabbing;
-  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .group[data-drag-preview] .header .headerActions{
   pointer-events:auto;
@@ -384,7 +384,7 @@
   height:var(--sn-primitive-dimension-24, 24px);
   border:none;
   border-radius:var(--sn-button-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
   background-color:transparent;
   outline:none;
 }
@@ -491,11 +491,11 @@
 }
 .colorMarker[data-block-color=neutral]{
   visibility:visible;
-  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
 }
 .colorMarker[data-block-color=primary]{
   visibility:visible;
-  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
 }
 .colorMarker[data-block-color=orange]{
   visibility:visible;
@@ -577,8 +577,8 @@
   flex-shrink:0;
   width:var(--sn-primitive-dimension-40, 40px);
   height:var(--sn-primitive-dimension-40, 40px);
-  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
-  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
+  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
+  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
 }
 
 .emptyState{
@@ -590,7 +590,7 @@
 }
 
 .emptyText{
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
   text-align:center;
   white-space:pre-line;
 }
@@ -604,7 +604,7 @@
   min-height:var(--sn-primitive-dimension-88, 88px);
   padding:var(--sn-primitive-dimension-8, 8px) 0 0;
   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-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
 }
 
 .header{
@@ -631,8 +631,8 @@
   min-height:var(--sn-primitive-dimension-44, 44px);
 }
 .listScroll[data-insert-new] [data-favorite]{
-  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
-  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
+  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
+  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #0d0d0d));
 }
 
 .dropTarget{
@@ -772,7 +772,7 @@
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 
 .menuBody{
@@ -798,7 +798,7 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
   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)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
 }
 .container[data-mobile]{
   gap:0;
@@ -810,17 +810,17 @@
   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)));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
 }
 .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)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
 }
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
 }
 
 .drawerMobile{
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3))) !important;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4))) !important;
 }
 
 .scrollMobile{
@@ -949,21 +949,12 @@
   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)));
   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)));
+  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
 }
-.userMenuDroplistTrigger{
-  display:inline-flex;
-}
-
 .userMenuDroplist{
   width:256px;
 }
 
 .profileSettingsIcon{
-  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
-}
-
-.logoutItem span,
-.logoutItem svg{
-  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
 }