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

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

@@ -13,5 +13,5 @@ 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)();
-    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' })] }))] }));
+    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' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.breadcrums, children: 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 && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.breadcrums, children: breadcrumbs }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }))] }));
 }

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

@@ -7,12 +7,8 @@
   padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
-.bottom{
-  overflow:hidden;
-  display:flex;
-  align-items:center;
-  box-sizing:border-box;
-  height:var(--sn-primitive-dimension-24, 24px);
+.breadcrums{
+  padding:0 var(--sn-primitive-dimension-8, 8px);
 }
 
 .left{

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

@@ -12,5 +12,5 @@ const constants_1 = require("../../../../constants");
 const utils_1 = require("../../utils");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function MenuBottom({ settingItems, leftBottom }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottom, children: [Boolean(settingItems?.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [item.divider === 'before' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), title: item.label, icon: (0, utils_1.getLinkEmblem)(item), onClick: item.onClick, "data-test-id": `header__drawer-menu__setting-${item.id}` }), item.divider === 'after' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider })] }, item.id))) })), leftBottom] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottom, children: [Boolean(settingItems?.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [item.divider === 'before' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardNavigation, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), title: item.label, icon: (0, utils_1.getLinkEmblem)(item), onClick: item.onClick, "data-test-id": `header__drawer-menu__setting-${item.id}` }), item.divider === 'after' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider })] }, item.id))) })), leftBottom] }));
 }

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

@@ -6,6 +6,7 @@ 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 list_1 = require("@cloud-ru/ds-list");
 const react_1 = require("react");
 const constants_1 = require("../../../../constants");
 const mobileOverlays_1 = require("../../../../mobileOverlays");
@@ -38,5 +39,5 @@ function MenuMobile({ open = false, setOpen, settingItems, platformGroups, segme
     const handleClose = (0, react_1.useCallback)(() => {
         setOpen?.(false);
     }, [setOpen]);
-    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, 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, servicesById: servicesById, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.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 && (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: list_1.SNAP_POINTS_PRESET.full, 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, 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, servicesById: servicesById, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.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 && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
 }

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

@@ -8,6 +8,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const scroll_1 = require("@cloud-ru/ds-scroll");
 const react_1 = require("react");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+// Упругая прокрутка у верхней границы (touch-скролл на мобильных не "упирается" жёстко в 0 —
+// контент можно немного "оттянуть" дальше) даёт scrollTop, не совпадающий с реальным положением
+// контента в этот момент. Диапазон запаса — единицы пикселей; двух хватает с большим запасом.
+const TOP_OVERSCROLL_EPSILON_PX = 2;
 function ScrollWithAnimatedStickyPanel({ panel, children }) {
     const [positions, setPositions] = (0, react_1.useState)({ panelTopShift: 0, containerScroll: 0 });
     const [panelHeight, setPanelHeight] = (0, react_1.useState)(0);
@@ -20,6 +24,13 @@ 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 {
@@ -28,10 +39,11 @@ function ScrollWithAnimatedStickyPanel({ panel, children }) {
             };
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, style: { '--snack-autohide-panel-height': `${panelHeight}px` }, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { barHideStrategy: 'never', overflow: { x: 'hidden' }, onScroll: handleScroll, children: children }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.panel, ref: element => {
-                    if (element) {
-                        setPanelHeight(element.offsetHeight);
-                        panelRef.current = element;
-                    }
-                }, style: { top: positions.panelTopShift }, children: panel })] }));
+    const setPanelRef = (0, react_1.useCallback)((element) => {
+        if (element) {
+            setPanelHeight(element.offsetHeight);
+            panelRef.current = element;
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, style: { '--snack-autohide-panel-height': `${panelHeight}px` }, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { barHideStrategy: 'never', overflow: { x: 'hidden' }, onScroll: handleScroll, children: children }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.panel, ref: setPanelRef, style: { top: positions.panelTopShift }, children: panel })] }));
 }

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

@@ -28,6 +28,9 @@ function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout
     const comfortClassName = (0, useDesktopComfortClassName_1.useDesktopComfortClassName)();
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     const { fullName = '', inviteCount } = profile;
+    const handleClose = (0, react_1.useCallback)(() => {
+        setOpen(false);
+    }, [setOpen]);
     const { pinTop, items: menuItems, pinBottom, } = (0, useUserMenuItems_1.useUserMenuItems)({
         isMobile,
         profile,
@@ -36,9 +39,7 @@ function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout
         organizationItems,
         bottomItems,
         settingItems,
-        onClose: () => {
-            setOpen(false);
-        },
+        onClose: handleClose,
         onLogout,
     });
     const trigger = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { tooltip: { tip: triggerTooltip }, isMobile: isMobile, onClick: () => {
@@ -50,5 +51,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, 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 }));
+    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: list_1.SNAP_POINTS_PRESET.full, withDividers: false, triggerClassName: styles_module_scss_1.default.userMenuDroplistTrigger, children: trigger }));
 }

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

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

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

@@ -1,20 +1,23 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogoutItem = useLogoutItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const product_1 = require("@cloud-ru/ds-icons/interface/product");
 const react_1 = require("react");
 const locale_1 = require("../../../locale");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 function useLogoutItem({ onLogout }) {
     const { t } = locale_1.headerLocale.useTranslations();
-    return (0, react_1.useMemo)(() => [
-        {
-            beforeContent: (0, jsx_runtime_1.jsx)(product_1.ExitSVG, {}),
-            content: {
-                label: t('logout'),
-            },
-            onClick: onLogout,
-            'data-test-id': 'header__user-menu__logout',
+    return (0, react_1.useMemo)(() => ({
+        beforeContent: (0, jsx_runtime_1.jsx)(product_1.ExitSVG, {}),
+        content: {
+            label: t('logout'),
         },
-    ], [onLogout, t]);
+        className: styles_module_scss_1.default.logoutItem,
+        onClick: onLogout,
+        'data-test-id': 'header__user-menu__logout',
+    }), [onLogout, t]);
 }

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

@@ -38,11 +38,11 @@ function useUserMenuItems({ profile, theme, onLogout, topItems = emptyArray_1.EM
         }
         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/cjs/components/UserMenu/styles.module.css

@@ -1,7 +1,16 @@
+.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, #4a4a4a)));
+}
+
+.logoutItem span,
+.logoutItem svg{
+  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
 }

package/dist/cjs/constants.d.ts

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

package/dist/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS = exports.TEST_IDS = void 0;
+exports.TEST_IDS = void 0;
 exports.TEST_IDS = {
     headerLayout: {
         root: 'header-layout',
@@ -29,5 +29,3 @@ exports.TEST_IDS = {
         root: 'header__breadcrumbs',
     },
 };
-// Только mobile: в мастере bottomSheet панель открывается на всю высоту экрана.
-exports.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS = [1];

package/dist/cjs/style.css

@@ -10,12 +10,8 @@
   padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
-.bottom{
-  overflow:hidden;
-  display:flex;
-  align-items:center;
-  box-sizing:border-box;
-  height:var(--sn-primitive-dimension-24, 24px);
+.breadcrums{
+  padding:0 var(--sn-primitive-dimension-8, 8px);
 }
 
 .left{
@@ -951,10 +947,19 @@
   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, #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, #4a4a4a)));
+}
+
+.logoutItem span,
+.logoutItem svg{
+  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
 }

package/dist/esm/components/HeaderLayout/HeaderLayout.js

@@ -7,5 +7,5 @@ import { useMobileLayout } from '../../hooks/useMobileLayout.js';
 import styles from './styles.module.css';
 export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }) {
     const isMobile = useMobileLayout();
-    return (_jsxs("header", { className: cn(styles.header, className), "data-mobile": isMobile || undefined, ...extractSupportProps({ 'data-test-id': TEST_IDS.headerLayout.root, ...rest }), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [logo && _jsx(_Fragment, { children: logo }), menu && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), menu, isMobile && _jsx(Divider, { orientation: 'vertical' })] })), !isMobile && select && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), _jsx("div", { className: styles.right, children: toolbar })] }), _jsx(Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.bottom, children: breadcrumbs }), _jsx(Divider, { orientation: 'horizontal' })] }))] }));
+    return (_jsxs("header", { className: cn(styles.header, className), "data-mobile": isMobile || undefined, ...extractSupportProps({ 'data-test-id': TEST_IDS.headerLayout.root, ...rest }), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [logo && _jsx(_Fragment, { children: logo }), menu && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), menu, isMobile && _jsx(Divider, { orientation: 'vertical' })] })), !isMobile && select && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), _jsx("div", { className: styles.breadcrums, children: breadcrumbs })] }))] }), _jsx("div", { className: styles.right, children: toolbar })] }), _jsx(Divider, { orientation: 'horizontal' }), isMobile && breadcrumbs && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.breadcrums, children: breadcrumbs }), _jsx(Divider, { orientation: 'horizontal' })] }))] }));
 }

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

@@ -7,12 +7,8 @@
   padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
-.bottom{
-  overflow:hidden;
-  display:flex;
-  align-items:center;
-  box-sizing:border-box;
-  height:var(--sn-primitive-dimension-24, 24px);
+.breadcrums{
+  padding:0 var(--sn-primitive-dimension-8, 8px);
 }
 
 .left{

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 { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { CardNavigation } 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(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] }));
+    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] }));
 }

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

@@ -1,7 +1,8 @@
 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 { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../../../constants.js';
+import { TEST_IDS } from '../../../../constants.js';
 import { MobileDrawerCustom } from '../../../../mobileOverlays.js';
 import { MainMenuDndContext } from '../../hooks/useMainMenuDnd.js';
 import { useMenuItems } from '../../hooks/useMenuItems.js';
@@ -32,5 +33,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: 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 })] }) }) }));
+    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 })] }) }) }));
 }

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

@@ -2,6 +2,10 @@ 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);
@@ -14,6 +18,13 @@ 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 {
@@ -22,10 +33,11 @@ export function ScrollWithAnimatedStickyPanel({ panel, children }) {
             };
         });
     }, []);
-    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 })] }));
+    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 })] }));
 }

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 } from '@cloud-ru/ds-list';
+import { Droplist, SNAP_POINTS_PRESET } from '@cloud-ru/ds-list';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
-import { useMemo } from 'react';
-import { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../constants.js';
+import { useCallback, useMemo } from 'react';
+import { TEST_IDS } from '../../constants.js';
 import { useDesktopComfortClassName } from '../../hooks/useDesktopComfortClassName.js';
 import { useMobileLayout } from '../../hooks/useMobileLayout.js';
 import { headerLocale } from '../../locale/index.js';
@@ -22,6 +22,9 @@ 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,
@@ -30,9 +33,7 @@ export function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, o
         organizationItems,
         bottomItems,
         settingItems,
-        onClose: () => {
-            setOpen(false);
-        },
+        onClose: handleClose,
         onLogout,
     });
     const trigger = useMemo(() => (_jsx(HeaderButton, { tooltip: { tip: triggerTooltip }, isMobile: isMobile, onClick: () => {
@@ -44,5 +45,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: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, 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: SNAP_POINTS_PRESET.full, withDividers: false, triggerClassName: styles.userMenuDroplistTrigger, children: trigger }));
 }

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

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

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'),
-            },
-            onClick: onLogout,
-            'data-test-id': 'header__user-menu__logout',
+    return useMemo(() => ({
+        beforeContent: _jsx(ExitSVG, {}),
+        content: {
+            label: t('logout'),
         },
-    ], [onLogout, t]);
+        className: styles.logoutItem,
+        onClick: onLogout,
+        'data-test-id': 'header__user-menu__logout',
+    }), [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,7 +1,16 @@
+.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, #4a4a4a)));
+}
+
+.logoutItem span,
+.logoutItem svg{
+  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
 }

package/dist/esm/constants.d.ts

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

package/dist/esm/constants.js

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

package/dist/esm/style.css

@@ -10,12 +10,8 @@
   padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
-.bottom{
-  overflow:hidden;
-  display:flex;
-  align-items:center;
-  box-sizing:border-box;
-  height:var(--sn-primitive-dimension-24, 24px);
+.breadcrums{
+  padding:0 var(--sn-primitive-dimension-8, 8px);
 }
 
 .left{
@@ -951,10 +947,19 @@
   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, #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, #4a4a4a)));
+}
+
+.logoutItem span,
+.logoutItem svg{
+  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
 }